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

《网站设计和页面布局技术(一).ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第六章网站设计和页面布局技术（一）回顾使用Dreamweaver在网页中如何插入Flash？使用表格如何对表单进行布局？如何实现细边框样式？2预习检查请大家叙述网站开发的大致流程？使用Dreamweaver创建站点有哪几步？页面布局有哪几种？3本章任务使用Dreamweaver创建淘宝网站点使用Dreamweaver设计首页的整体布局使用Dreamweaver制作首页的导航部分使用Dreamweaver制作首页的广告部分4能使用网站设计流程分析简单网站的设计能使用DIV层技术进行页面整体布局能使用表格进行图文内容的布局本章目标

2、5网站开发的流程介绍网站开发的4个步骤：1、需求分析客户需求确认需求业务背景设计风格网站内容提供样板6网站开发的流程介绍2、网站制作3、测试网页4、发布网站保证让InternetExplorer和MozillaFirefox浏览器能比较好地展示你的作品制作好的网站，经测试之后，就可以在服务器上发布，这样，能让更多的人知道您的网站创建站点制作首页制作模板制作样式7需求分析客户需求业务背景淘宝网提供了一个商品展示、在线购物、交互服务和管理的平台设计风格淘宝网具有鲜明、亮丽、明快、时尚的风格网站内容公司简介、商品分类、商品展示、价格

3、信息、商品搜索、网上订单、会员注册、客户服务等确认需求提供给客户一个前期静态的设计样板(可用photoshop制作)演示示例1：静态Demo演示大家想想淘宝网的业务背景8创建站点使用Dreamweaver创建站点的步骤如下：1、选择“新建站点”，然后为其命名2、选择“是否”使用服务器技术3、选择“编辑我的计算机上的本地副本…”选项4、选择用于存储网站文件的文件夹5、选择连接到远程服务器的选项6、在“文件”面板中创建名为images文件夹演示示例2：在Dreamweaver8中创建站点用于存储网站文件的本地根目录相关文件和文件夹

4、的集合9页面内容导航部分广告部分商品分类部分版权声明部分如何实现这样的页面布局？10页面布局之框架布局使用框架布局如何实现这样的页面布局？11框架布局使用Dreamweaver创建如下图所示的框架集页面演示示例3：框架布局演示素材框架布局演示答案12框架布局框架布局的优缺点和应用场合优点缺点应用场合支持滚动条，方便导航，节省页面下载时间等兼容性不好，保存时不方便，应用范围有限等小型商业网站、论坛、后台管理、学习教程等13小结1使用Dreamweaver制作如下图所示框架布局练习答案练习素材14页面布局之表格布局使用表格布局如何

5、实现这样的页面布局？15表格布局演示示例4：表格布局演示素材表格布局演示答案使用Dreamweaver创建如下图所示表格布局页面16表格布局表格布局的优缺点和应用场合优点缺点应用场合方便排列有规律、结构均匀的内容或数据产生垃圾代码、影响页面下载时间、灵活性不大难于修改内容或数据整齐的页面17小结2使用Dreamweaver制作如下图所示表格布局练习答案练习素材18页面布局之DIV布局应用了DIV布局的淘宝网主页如何实现这样的页面布局？19什么是DIVDIV元素是用来为HTML文档内大块的内容提供结构和背景的元素。创建DIV的步

6、骤如下：1、新建一个空白文档2、选择“插入”“布局对象”“层”或者在“布局”插入栏使用“绘制层”按钮进行绘制层演示示例5：教员演示绘制层用Dreamweaver绘制如下图所示的3个层，并为每个层设置不同颜色20什么是DIV#Layer1{position:absolute;left:9px;top:12px;width:418px;height:58px;z-index:1;background-color:#FF0000;}…………

7、">