[经济学]网页制作-06-ds1.ppt

第6章网站设计和页面布局技术（一） 回顾 常用样式属性有哪些？ 超链接样式有哪几种？ 内嵌样式表、行内样式表、外部样式的区别？ 预习检查 请大家叙述网站开发的大致流程？ 使用Dreamweaver创建站点有哪几步？ 页面布局有哪几种？ 本章任务 使用Dreamweaver创建淘宝网站点 使用Dreamweaver设计首页的整体布局 使用Dreamweaver制作首页的导航部分 使用Dreamweaver制作首页的广告部分 本章目标 能使用网站设计流程分析简单网站的设计 能使用DIV层技术进行页面整体布局 能使用表格进行图文内容的布局 网站开发的流程介绍 网站开发的4个步骤： 1、需求分析 网站开发的流程介绍 2、网站制作 3、测试网页 4、发布网站 需求分析 客户需求 业务背景 淘宝网提供了一个商品展示、在线购物、交互服务和管理的平台 设计风格 淘宝网具有鲜明、亮丽、明快、时尚的风格 网站内容 公司简介 、商品分类 、商品展示 、价格信息 、商品有哪些信誉好的足球投注网站 、网上订单 、会员注册 、客户服务等 确认需求 提供给客户一个前期静态的设计样板(可用photoshop制作) 创建站点 使用Dreamweaver创建站点的步骤如下： 1、选择“新建站点”，然后为其命名 2、选择“是否”使用服务器技术 3、选择“编辑我的计算机上的本地副本…”选项 4、选择用于存储网站文件的文件夹 5、选择连接到远程服务器的选项 6、在“文件”面板中创建名为images文件夹 页面内容 页面布局之框架布局 框架布局 使用Dreamweaver创建如下图所示的框架集页面 框架布局 框架布局的优缺点和应用场合 小结1 使用Dreamweaver制作如下图所示框架布局 页面布局之表格布局 表格布局 使用Dreamweaver创建如下图所示表格布局页面 表格布局 表格布局的优缺点和应用场合 小结2 使用Dreamweaver制作如下图所示表格布局 层 层 层 层 页面布局之DIV布局 什么是DIV DIV元素是用来为HTML文档内大块的内容提供结构和背景的元素。 创建DIV的步骤如下： 1、新建一个空白文档 2、选择“插入” ?“布局对象” ?“层” 或者 在“布局”插入栏?使用“绘制层”按钮进行绘制层 什么是DIV DIV层布局 DIV布局的优缺点和应用场合 层的默认设置 当层被插入时，其属性是默认的，但这些默认属性不是固定不变的，而且随时可以修改，具体步骤为： 编辑首选参数层 层与表格 层:能够更方便、精确地定位页面元素 表格：在低版本的浏览器中也能浏览 可以先用层来快速创建复杂页面布局，然后再把层布局转换成表格布局，供不支持使用层的浏览器浏览（IE3.0及以下都不支持层）。需要时，也可以在层和表格之间来回转换，以调整布局和优化页面设计。 层与表格 把层转换为表格 步骤如下：修改转换层到表格 层与表格 把表格转换为层 当我们对页面布局不满意时，需要进行调整。如果是表格布局，调整起来比较麻烦。此时，我们可以先把表格布局转换为层布局，然后通过移动层来调整布局，既方便又快捷。 ?转换步骤：修改转换表格到层 拼图游戏 打开“chapter6\拼图游戏\game\game.html”文件。 文档中有9幅图像，分别包含在9个单元格中，选定整个表格，然后将“填充”属性设置为“3”。 选择主菜单中的“修改/转换/表格到层”命令，将表格转换为9个层。 打开文档“game1.html”，将其中的表格复制到文档“game.html”中。 将全部层隐藏。 选定表格中的文本链接“1”，在【行为】面板中单击添加行为按钮，在弹出的快捷菜单中选择【显示-隐藏层】命令，打开【显示-隐藏层】对话框，将层“Layer1”设置为“显示”。 拼图游戏 在【行为】面板中将事件修改为“OnMouseOver”。 按照相同的步骤为“2”~“9”添加【显示-隐藏层】行为。 为文本“开始游戏”添加【显示-隐藏层】行为，将所有的层设置为“显示”，事件设置为“OnClick”。 选定标签“body”，然后单击“添加行为”按钮，在弹出菜单中选择【拖动层】命令，将层“Layer1”的【移动】选项设置为“不限制”。 按照相同步骤为其他8个层添加【拖动层】行为，事件全部是“OnLoad”。 为文本“全部隐藏”添加“显示-隐藏层”行为，将所有的层设置为“隐藏”，事件设置为“OnClick