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