1、第六章,网站设计和页面布局技术（一）,回顾,使用Dreamweaver在网页中如何插入Flash？ 使用表格如何对表单进行布局？ 如何实现细边框样式？,预习检查,请大家叙述网站开发的大致流程？ 使用Dreamweaver创建站点有哪几步？ 页面布局有哪几种？,本章任务,使用Dreamweaver创建淘宝网站点 使用Dreamweaver设计首页的整体布局 使用Dreamweaver制作首页的导航部分 使用Dreamweaver制作首页的广告部分,能使用网站设计流程分析简单网站的设计 能使用DIV层技术进行页面整体布局 能使用表格进行图文内容的布局,本章目标,网站开发的流程介绍,网站开发的4个步
2、骤： 1、需求分析,客户需求,确认需求,业务背景,设计风格,网站内容,提供样板,网站开发的流程介绍,2、网站制作3、测试网页4、发布网站,保证让Internet Explorer和Mozilla Firefox浏览器能比较 好地展示你的作品,制作好的网站，经测试之后，就可以在服务器上发布，这 样，能让更多的人知道您的网站,创建站点,制作首页,制作模板,制作样式,需求分析,客户需求 业务背景淘宝网提供了一个商品展示、在线购物、交互服务和管理的平台 设计风格淘宝网具有鲜明、亮丽、明快、时尚的风格 网站内容公司简介 、商品分类 、商品展示 、价格信息 、商品搜索 、网上订单 、会员注册 、客户服务等
3、 确认需求 提供给客户一个前期静态的设计样板(可用photoshop制作),演示示例1：静态Demo演示,大家想想淘宝网的业务背景,创建站点,使用Dreamweaver创建站点的步骤如下： 1、选择“新建站点”，然后为其命名 2、选择“是否”使用服务器技术 3、选择“编辑我的计算机上的本地副本”选项 4、选择用于存储网站文件的文件夹 5、选择连接到远程服务器的选项 6、在“文件”面板中创建名为images文件夹,演示示例2：在 Dreamweaver 8中创建站点,用于存储网站文件的本地根目录,相关文件和文件夹的集合,页面内容,导航部分,广告部分,商品分类部分,版权声明部分,如何实现这样的页面
4、布局？,页面布局之框架布局,使用框架布局,如何实现这样的页面布局？,框架布局,使用Dreamweaver创建如下图所示的框架集页面,演示示例3：框架布局演示素材 框架布局演示答案,框架布局,框架布局的优缺点和应用场合,小结1,使用Dreamweaver制作如下图所示框架布局,练习答案,练习素材,页面布局之表格布局,使用表格布局,如何实现这样的页面布局？,表格布局,演示示例4：表格布局演示素材 表格布局演示答案,使用Dreamweaver创建如下图所示表格布局页面,表格布局,表格布局的优缺点和应用场合,小结2,使用Dreamweaver制作如下图所示表格布局,练习答案,练习素材,页面布局之DIV
5、布局,应用了DIV布局的淘宝网主页,如何实现这样的页面布局？,什么是DIV,DIV元素是用来为HTML文档内大块的内容提供结构和背景的元素。 创建DIV的步骤如下： 1、新建一个空白文档 2、选择“插入” “布局对象” “层” 或者 在“布局”插入栏使用“绘制层”按钮进行绘制层,演示示例5：教员演示绘制层,用Dreamweaver绘制如下图所示的3个层，并为每个层设置不同颜色,什么是DIV, #Layer1 position:absolute;left:9px;top:12px;width:418px;height:58px;z-index:1;background-color: #FF000
6、0; ,查看源代码,ID样式选择符，方便层引用,绝对定位,层距离浏览器左边界和上边界的距离,层的宽度和高度,层叠顺序编号,层背景色,层引用样式,Id为Layer1的层所对应的效果,DIV层布局,DIV布局的优缺点和应用场合,最佳布局,如何实现这样的页面布局？,表格,使用DIVTABLE，整体布局用DIV，每个块的内容用表格,最佳布局,创建如下图所示DIV+表格布局的页面,演示示例6：演示素材 演示答案,小结3,使用Dreamweaver制作如下图所示布局页面,练习答案,练习素材,总结,简述网站开发的流程。 说明框架布局使用的场合。 简述表格布局的优点与缺点。 详述DIV布局的优点以及使用场合。,
