网站设计和页面布局技术

1、第七章网站设计和页面布局技术（一）1本章任务使用Dreamweaver创建淘宝网站点使用Dreamweaver设计首页的整体布局使用Dreamweaver制作首页的导航部分使用Dreamweaver制作首页的广告部分2能使用网站设计流程分析简单网站的设计能使用DIV层技术进行页面整体布局能使用表格进行图文内容的布局本章目标3网站开发的流程介绍网站开发的4个步骤：1、需求分析客户需求确认需求业务背景设计风格网站内容提供样板4网站开发的流程介绍2、网站制作3、测试网页4、发布网站保证让Internet Explorer和Mozilla Firefox浏览器能比较好地展示你的作品制作好的网站，经测试

2、之后，就可以在服务器上发布，这样，能让更多的人知道您的网站创建站点制作首页制作模板制作样式5需求分析客户需求业务背景淘宝网提供了一个商品展示、在线购物、交互服务和管理的平台设计风格淘宝网具有鲜明、亮丽、明快、时尚的风格网站内容公司简介 、商品分类 、商品展示 、价格信息 、商品搜索 、网上订单 、会员注册 、客户服务等确认需求提供给客户一个前期静态的设计样板(可用photoshop制作)演示示例1：静态Demo演示大家想想淘宝网的业务背景6创建站点 使用Dreamweaver创建站点的步骤如下：1、选择“新建站点”，然后为其命名2、选择“是否”使用服务器技术3、选择“编辑我的计算机上的本地副本

3、”选项4、选择用于存储网站文件的文件夹5、选择连接到远程服务器的选项6、在“文件”面板中创建名为images文件夹演示示例2：在 Dreamweaver 8中创建站点用于存储网站文件的本地根目录相关文件和文件夹的集合7页面内容导航部分广告部分商品分类部分版权声明部分如何实现这样的页面布局？8页面布局之框架布局使用框架布局如何实现这样的页面布局？9框架布局使用Dreamweaver创建如下图所示的框架集页面演示示例3：框架布局演示素材 框架布局演示答案10框架布局框架布局的优缺点和应用场合优点缺点应用场合支持滚动条，方便导航，节省页面下载时间等兼容性不好，保存时不方便，应用范围有限等小型商业网站

4、、论坛、后台管理、学习教程等11小结1 使用Dreamweaver制作如下图所示框架布局练习答案练习素材12页面布局之表格布局使用表格布局如何实现这样的页面布局？13表格布局演示示例4：表格布局演示素材 表格布局演示答案使用Dreamweaver创建如下图所示表格布局页面14表格布局表格布局的优缺点和应用场合优点缺点应用场合方便排列有规律、结构均匀的内容或数据产生垃圾代码、影响页面下载时间、灵活性不大难于修改内容或数据整齐的页面15小结2使用Dreamweaver制作如下图所示表格布局练习答案练习素材16页面布局之DIV布局应用了DIV布局的淘宝网主页如何实现这样的页面布局？17什么是DIVD

5、IV元素是用来为HTML文档内大块的内容提供结构和背景的元素。创建DIV的步骤如下：1、新建一个空白文档2、选择“插入” “布局对象” “层” 或者 在“布局”插入栏使用“绘制层”按钮进行绘制层演示示例5：教员演示绘制层用Dreamweaver绘制如下图所示的3个层，并为每个层设置不同颜色18什么是DIV#Layer1 position:absolute;left:9px;top:12px;width:418px;height:58px;z-index:1;background-color: #FF0000; 查看源代码ID样式选择符，方便层引用 绝对定位 层距离浏览器左边界和上边界的距离 层的宽度和高度 层叠顺序编号 层背景色层引用样式Id为Layer1的层所对应的效果19DIV层布局优点缺点应用场合代码精简、提高页面下载速度、表现和内容相分离等比较灵活难于控制复杂的不规则页面、业务种类较多的大型商业网站DIV布局的优缺点和应用场合20最佳布局如何实现这样的页面布局？head导航块层content内容块层foot版权块层表格表格 表格 表格 表格 表格 表格 表格使用DIVTABLE，整体布局用DIV，每个块的内容用表格21最佳布局创建如下图所示DIV+表格布局的页面演示示例6：演示素材 演示答案 22小