网站设计和页面布局技术(一)

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