internet基础第5章

《internet基础第5章》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第五章网站设计和页面布局技术英泰克国际管理咨询（北京）有限公司版权所有回顾简述样式表的基本结构？常用的样式属性有哪些？超链接样式有哪几种？内嵌样式表、行内样式表、外部样式表文件分别适用什么场合？英泰克国际管理咨询（北京）有限公司版权所有本章任务使用Dreamweaver创建淘宝网站点使用框架设计网页使用表格设计网页使用层设计网页网页的最佳布局英泰克国际管理咨询（北京）有限公司版权所有能使用网站设计流程分析简单网站的设计能使用DIV层技术进行页面整体布局能使用表格进行图文内容的布局本章目标英泰克国际管理咨询（北京）

2、有限公司版权所有网站开发的流程介绍网站开发的4个步骤：1、需求分析客户需求确认需求业务背景设计风格网站内容提供样板英泰克国际管理咨询（北京）有限公司版权所有网站开发的流程介绍2、网站制作3、测试网页4、发布网站保证让InternetExplorer和MozillaFirefox浏览器能比较好地展示你的作品制作好的网站，经测试之后，就可以在服务器上发布，这样，能让更多的人知道您的网站创建站点制作首页制作模板制作样式英泰克国际管理咨询（北京）有限公司版权所有需求分析客户需求业务背景淘宝网提供了一个商品展示、在线购物、

3、交互服务和管理的平台设计风格淘宝网具有鲜明、亮丽、明快、时尚的风格网站内容公司简介、商品分类、商品展示、价格信息、商品搜索、网上订单、会员注册、客户服务等确认需求提供给客户一个前期静态的设计样板(可用photoshop制作)演示示例1：静态Demo演示大家想想淘宝网的业务背景英泰克国际管理咨询（北京）有限公司版权所有创建站点使用Dreamweaver创建站点的步骤如下：1、选择“新建站点”，然后为其命名2、选择“是否”使用服务器技术3、选择“编辑我的计算机上的本地副本…”选项4、选择用于存储网站文件的文件夹5、选

4、择连接到远程服务器的选项6、在“文件”面板中创建名为images文件夹用于存储网站文件的本地根目录相关文件和文件夹的集合英泰克国际管理咨询（北京）有限公司版权所有页面内容导航部分广告部分商品分类部分版权声明部分如何实现这样的页面布局？英泰克国际管理咨询（北京）有限公司版权所有页面布局之框架布局使用框架布局如何实现这样的页面布局？英泰克国际管理咨询（北京）有限公司版权所有框架布局使用Dreamweaver创建如下图所示的框架集页面演示示例2：框架布局演示英泰克国际管理咨询（北京）有限公司版权所有框架布局框架布局的优

5、缺点和应用场合优点缺点应用场合支持滚动条，方便导航，节省页面下载时间等兼容性不好，保存时不方便，应用范围有限等小型商业网站、论坛、后台管理、学习教程等英泰克国际管理咨询（北京）有限公司版权所有小结1使用Dreamweaver制作如下图所示框架布局练习素材英泰克国际管理咨询（北京）有限公司版权所有页面布局之表格布局使用表格布局如何实现这样的页面布局？英泰克国际管理咨询（北京）有限公司版权所有表格布局演示示例3：表格布局演示使用Dreamweaver创建如下图所示表格布局页面英泰克国际管理咨询（北京）有限公司版权所有

6、表格布局表格布局的优缺点和应用场合优点缺点应用场合方便排列有规律、结构均匀的内容或数据产生垃圾代码、影响页面下载时间、灵活性不大难于修改内容或数据整齐的页面英泰克国际管理咨询（北京）有限公司版权所有小结2使用Dreamweaver制作如下图所示表格布局练习素材英泰克国际管理咨询（北京）有限公司版权所有页面布局之DIV布局应用了DIV布局的淘宝网主页如何实现这样的页面布局？英泰克国际管理咨询（北京）有限公司版权所有什么是DIVDIV元素是用来为HTML文档内大块的内容提供结构和背景的元素。创建DIV的步骤如下：1、

7、新建一个空白文档2、选择“插入”“布局对象”“层”或者在“布局”插入栏使用“绘制层”按钮进行绘制层用Dreamweaver绘制如下图所示的3个层，并为每个层设置不同颜色英泰克国际管理咨询（北京）有限公司版权所有什么是DIV#Layer1{position:absolute;left:9px;top:12px;width:418px;height:58px;z-index:1;background-color:#FF0000;}…………

8、"Layer1">