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