中信初中高级备课部分中级ch

1、第六章第六章网站设计和页面布局技术回顾回顾 使用使用Dreamweaver在网页中如何插入在网页中如何插入Flash？使用表格如何对表单进行布局？使用表格如何对表单进行布局？如何实现细边框样式？如何实现细边框样式？本章任务本章任务使用使用Dreamweaver创建淘宝网站点创建淘宝网站点使用使用Dreamweaver设计首页的整体布局设计首页的整体布局使用使用Dreamweaver制作首页的导航部分制作首页的导航部分使用使用Dreamweaver制作首页的广告部分制作首页的广告部分能使用网站设计流程分析简单网站的设计能使用网站设计流程分析简单网站的设计能使用能使用DIV层技术进行页面整体布局层

2、技术进行页面整体布局能使用表格进行图文内容的布局能使用表格进行图文内容的布局本章目标本章目标网站开发的流程介绍网站开发的流程介绍网站开发的网站开发的4个步骤：个步骤：1、需求分析、需求分析客户需求客户需求确认需求确认需求业务背景业务背景设计风格设计风格网站内容网站内容提供样板提供样板网站开发的流程介绍网站开发的流程介绍2、网站制作、网站制作3、测试网页、测试网页4、发布网站、发布网站保证让保证让Internet Explorer和和Mozilla Firefox浏览器能比较浏览器能比较好地展示你的作品好地展示你的作品制作好的网站，经测试之后，就可以在服务器上发布，这制作好的网站，经测试之后，就

3、可以在服务器上发布，这样，能让更多的人知道您的网站样，能让更多的人知道您的网站创建站点创建站点制作首页制作首页制作模板制作模板制作样式制作样式需求分析需求分析客户需求客户需求业务背景业务背景淘宝网提供了一个商品展示、在线购物、交互服务淘宝网提供了一个商品展示、在线购物、交互服务和管理的平台和管理的平台设计风格设计风格淘宝网具有鲜明、亮丽、明快、时尚的风格淘宝网具有鲜明、亮丽、明快、时尚的风格网站内容网站内容公司简介公司简介 、商品分类、商品分类 、商品展示、商品展示 、价格信息、价格信息 、商、商品搜索品搜索 、网上订单、网上订单 、会员注册、会员注册 、客户服务等、客户服务等确认需求确认需求

4、提供给客户一个前期静态的设计样板提供给客户一个前期静态的设计样板(可用可用photoshop制制作作)演示示例演示示例1 1：静态：静态DemoDemo演示演示大家想想淘宝网大家想想淘宝网的业务背景的业务背景创建站点创建站点 使用使用Dreamweaver创建站点的步骤如下：创建站点的步骤如下：1、选择、选择“新建站点新建站点”，然后为其命名，然后为其命名2、选择、选择“是否是否”使用服务器技术使用服务器技术3、选择、选择“编辑我的计算机上的本地副本编辑我的计算机上的本地副本”选项选项4、选择用于存储网站文件的文件夹、选择用于存储网站文件的文件夹5、选择连接到远程服务器的选项、选择连接到远程服

5、务器的选项6、在、在“文件文件”面板中创建名为面板中创建名为images文件夹文件夹演示示例演示示例2 2：在：在 Dreamweaver 8 Dreamweaver 8中创建站点中创建站点用于存储网站文件用于存储网站文件的本地根目录的本地根目录相关文件和文相关文件和文件夹的集合件夹的集合页面内容页面内容导航部分导航部分广告部分广告部分商品分类部分商品分类部分版权声明部分版权声明部分如何实现这样的如何实现这样的页面布局？页面布局？页面布局之框架布局页面布局之框架布局使用框架布局使用框架布局如何实现这样如何实现这样的页面布局？的页面布局？框架布局框架布局使用使用Dreamweaver创建如下图所

6、示的框架集页面创建如下图所示的框架集页面演示示例演示示例3 3：框架布局演示素材：框架布局演示素材 框架布局演示答案框架布局演示答案框架布局框架布局框架布局的优缺点和应用场合框架布局的优缺点和应用场合优点优点缺点缺点应用场合应用场合支持滚动条，方便支持滚动条，方便导航，节省页面下导航，节省页面下载时间等载时间等兼容性不好，保存兼容性不好，保存时不方便，应用范时不方便，应用范围有限等围有限等小型商业网站、论坛、小型商业网站、论坛、后台管理、学习教程后台管理、学习教程等等小结小结1 1 使用使用Dreamweaver制作如下图所示框架布局制作如下图所示框架布局练习答案练习答案练习素材练习素材页面布

7、局之表格布局页面布局之表格布局使用表格布局使用表格布局如何实现这样如何实现这样的页面布局？的页面布局？表格布局表格布局使用使用Dreamweaver创建如下图所示表格布局页面创建如下图所示表格布局页面表格布局表格布局表格布局的优缺点和应用场合表格布局的优缺点和应用场合优点优点缺点缺点应用场合应用场合方便排列有规律、结方便排列有规律、结构均匀的内容或数据构均匀的内容或数据产生垃圾代码、影响页面下产生垃圾代码、影响页面下载时间、灵活性不大难于修载时间、灵活性不大难于修改改内容或数据整内容或数据整齐的页面齐的页面小结小结2 2使用使用Dreamweaver制作如下图所示表格布局制作如下图所示表格布局

8、页面布局之页面布局之DIV布局布局应用了应用了DIV布局布局的淘宝网主页的淘宝网主页如何实现这样如何实现这样的页面布局？的页面布局？什么是什么是DIVDIV元素是用来为元素是用来为HTML文档内大块的内容提供结构和背文档内大块的内容提供结构和背景的元素。景的元素。创建创建DIV的步骤如下：的步骤如下：1、新建一个空白文档、新建一个空白文档2、选择、选择“插入插入” “布局对象布局对象” “层层” 或者或者 在在“布局布局”插入栏插入栏使用使用“绘制层绘制层”按钮进行绘制按钮进行绘制层层演示示例演示示例5 5：教员演示绘制层：教员演示绘制层用用Dreamweaver绘制如绘制如下图所示的下图所示

9、的3个层，并为个层，并为每个层设置不同颜色每个层设置不同颜色什么是什么是DIV#Layer1 position:absolute;left:9px;top:12px;width:418px;height:58px;z-index:1;background-color: #FF0000; 查看源代码查看源代码ID样式选择符，样式选择符，方便层引用方便层引用 绝对定位绝对定位 层距离浏览器左边层距离浏览器左边界和上边界的距离界和上边界的距离 层的宽度和高度层的宽度和高度 层叠顺层叠顺序编号序编号 层背景色层背景色层引用样式层引用样式Id为为Layer1的层的层所对应的效果所对应的效果DIV层布局层

10、布局优点优点缺点缺点应用场合应用场合代码精简、提高页面下代码精简、提高页面下载速度、表现和内容相载速度、表现和内容相分离等分离等比较灵活比较灵活难于控制难于控制复杂的不规则页面、复杂的不规则页面、业务种类较多的大型业务种类较多的大型商业网站商业网站DIV布局的优缺点和应用场合布局的优缺点和应用场合最佳布局最佳布局如如何何实实现现这这样样的的页页面面布布局？局？head导导航块层航块层content内容块层内容块层foot版版权块层权块层表格表格表格表格 表格表格 表格表格 表格表格 表格表格 表格表格 表格表格使用使用DIVTABLE，整体布局用，整体布局用DIV，每个块的内容用表格，每个块的

11、内容用表格最佳布局最佳布局创建如下图所示创建如下图所示DIV+表格布局的页面表格布局的页面为什么需要模板为什么需要模板页眉和导航栏页脚 页眉和导航栏页脚 页眉和导航栏页脚 大大家家想想想想这这几几个个页页面面有有相相同同的的地地方方吗？吗？为什么需要模板为什么需要模板上一张上一张ppt中三个页面的头部和尾部完全相同，中三个页面的头部和尾部完全相同，那我们做网页的时候要是每次得重新制作页面那我们做网页的时候要是每次得重新制作页面的头部和尾部，那多耗时耗力啊！该怎么办？的头部和尾部，那多耗时耗力啊！该怎么办？如果这些相同的页面的头部和尾部能用一个文件如果这些相同的页面的头部和尾部能用一个文件来代替

12、该多好啊！每次只用制作页面中不同的部来代替该多好啊！每次只用制作页面中不同的部分，相同的部分不用管。分，相同的部分不用管。这些相同的部分可以制作成一个文件，它就是模板这些相同的部分可以制作成一个文件，它就是模板演示示例演示示例1 1：将现有文档保存为模板的步骤：将现有文档保存为模板的步骤 制作模板制作模板制作模板页有两种方式，下面分别加以介绍：制作模板页有两种方式，下面分别加以介绍： 将现有文档保存为模板将现有文档保存为模板1、打开、打开HTML文档文档2、选择、选择“文件文件” “另存为模板另存为模板”3、设置相关属性，然后、设置相关属性，然后“保存保存”模板保存模板保存的位置的位置给模板起

13、给模板起的名字的名字制作模板制作模板新建空白模板新建空白模板1、选择、选择“窗口窗口” “资源资源”2、在、在“资源资源”面板上新建模板面板上新建模板3、设置相关属性，然后、设置相关属性，然后“保存保存”按按F11健也行健也行 1、单击、单击“模模板板”图标图标 2、单击、单击“新新建模板建模板”图标图标 演示示例演示示例2 2：新建空白模板的步骤：新建空白模板的步骤 创建模板后，默认情况下，应用创建模板后，默认情况下，应用模板的文档都处于非编辑状态，模板的文档都处于非编辑状态，那怎么办？那怎么办？为模板定义可编辑区域为模板定义可编辑区域制作模板制作模板定义可编辑区域定义可编辑区域添加基本可编

14、辑区域添加基本可编辑区域1、在模板文档中选择要设置为可编辑的区域、在模板文档中选择要设置为可编辑的区域2、“插入插入” “模板对象模板对象” “可编辑区域可编辑区域”删除可编辑区域删除可编辑区域1、选择要编辑的区域、选择要编辑的区域2、“修改修改” “模板模板” “删除模板标记删除模板标记”演示示例演示示例3 3：添加和删除可编辑区域：添加和删除可编辑区域已添加的已添加的“可编辑区域可编辑区域 3”，可删除，可删除不可编辑区域不可编辑区域 不可编辑区域不可编辑区域 应用模板应用模板将模板应用于页面的步骤如下：将模板应用于页面的步骤如下：1、新建要应用模板的空白文档、新建要应用模板的空白文档2、

15、在、在“资源资源”面板找到要应用的模板面板找到要应用的模板3、将模板拖到空白、将模板拖到空白“文档文档”中中4、在可编辑区域添加或编辑数据、在可编辑区域添加或编辑数据演示示例演示示例4 4：应用模板素材：应用模板素材 应用模板答案应用模板答案应用了模应用了模板的页面板的页面此区域可编辑此区域可编辑,其他其他区域不可编辑区域不可编辑制作样式表制作样式表 大家发现前面应用模板的页面中存在的问题大家发现前面应用模板的页面中存在的问题吗？是不是字体过大、颜色搭配不合理、超链接吗？是不是字体过大、颜色搭配不合理、超链接样式极其难看、文本不规整等？那如何解决这些样式极其难看、文本不规整等？那如何解决这些问

16、题？问题？使用制作好的样式表文件，并和相关页面绑定使用制作好的样式表文件，并和相关页面绑定创建样式文件创建样式文件教员演示创建样式文件的步骤：教员演示创建样式文件的步骤：1、选择、选择“文件文件” “新建新建”2、选择、选择“基本页基本页” “CSS”3、单击、单击“创建创建”制作样式表制作样式表演示示例演示示例8 8：演示创建样式文件：演示创建样式文件1、选择、选择“基本页基本页”2、选择、选择“CSS”3、选择、选择“创创建建”制作样式表制作样式表查看样式源代码查看样式源代码定义样式规则定义样式规则教员演示定义样式规则的步骤：教员演示定义样式规则的步骤：1、选择、选择“窗口窗口” “CSS

17、样式样式”2、在、在“CSS样式样式”面板中，右击面板中，右击新建新建3、分别新建标签、分别新建标签body、a等的样式等的样式4、分别新建、分别新建ID样式样式#head、 ID样式样式#search_form等等5、分别新建类样式、分别新建类样式.fontcolor_white、 类样类样式式.tableBorder等等制作样式表制作样式表应用样式文件应用样式文件教员演示两种方式应用样式文件：教员演示两种方式应用样式文件：1、打开要应用样式的网页、打开要应用样式的网页2、在属性面板中单击、在属性面板中单击“样式样式”下拉框下拉框3、选择附加样式、选择附加样式4、选择要引入的样式文件、选择要

18、引入的样式文件1、选择附、选择附加样式表加样式表2、选择、选择样式文件样式文件3、选择、选择附加方式附加方式4、单击确定、单击确定设置页面间的链接设置页面间的链接 主页、登录页面、注册页面、商品展示页、主页、登录页面、注册页面、商品展示页、商品详细介绍页、购买页等页面都做好了并且商品详细介绍页、购买页等页面都做好了并且应用了模板和样式，如何将这些页面之间相互应用了模板和样式，如何将这些页面之间相互关联起来？关联起来？ 使用超链接使用超链接设置页面间的链接设置页面间的链接 教员演示如下操作：教员演示如下操作：1、将、将”首页首页”和和”登录页登录页”、”注册注册”页链接页链接2、将宝贝分类栏目中

19、的、将宝贝分类栏目中的“装备装备”和和”商品商品”展示页链接展示页链接3、将、将”商品展示商品展示”页和页和“快乐幻想去神愿石快乐幻想去神愿石”商品详细介绍商品详细介绍页链接页链接4、将、将“快乐幻想去神愿石快乐幻想去神愿石”商品详细介绍页中的商品详细介绍页中的”立刻购买立刻购买”和和“购购 买页买页”链接链接发布站点发布站点安装过程中，提示安装过程中，提示“插入磁盘插入磁盘”，就插入，就插入Windows Server 2003 Enterprise Edition光盘光盘安装安装IIS1、打开、打开“控制面板控制面板”2、双击、双击“添加或删除程序添加或删除程序”图标图标3、单击、单击”添加删除添加删除Windows组件组件”按钮按钮 4、选中、选中“应用程序服务应用程序服务”并单击并单击”详细信息详细信息”按钮按钮 5、选中、选中“Internet信息服务信息服务(IIS)”，然后单击，然后单击”确定确定”6、单击、单击”下一步下一步”进行安装，最后单击进行安装，最后单击“完成完成”测试并发布网站测试并发布网站测试内容测试内容页面效果是否美观页面效果是否美观链接是否完好链接是否完好测试不同浏览器的兼容性测试不同浏览器的兼容性1、检查单个页面链接、检查单个页面链接2、检查整个站点的链接、检查整个站点的链接1、设置希望检查的浏览器及其版本、设置希望检