《html10使用模板统一页面风格.ppt》由会员分享，可在线阅读，更多相关《html10使用模板统一页面风格.ppt(26页珍藏版)》请在装配图网上搜索。

1、第十章使用模板统一页面风格,回顾,请简述网站开发的基本步骤？框架布局的优缺点？表格布局的适用场合？DIV布局的优点以及适用场合？,本章任务,制作网站的模板页用模板页重新制作“装备”的商品展示页用模板页制作“装备”商品的详细介绍页用模板页制作商品“购买页面”制作样式表文件并和其他页面绑定,会用Dreamweaver制作模板页并应用到其他页面会用Dreamweaver制作样式文件并绑定到各页面会使用网站开发流程制作并发布网站,本章目标,为什么需要模板,大家想想这几个页面有相同的地方吗？,为什么需要模板,上一张ppt中三个页面的头部和尾部完全相同，那我们做网页的时候要是每次得重新制作页面的头部和尾部。

2、，那多耗时耗力啊！该怎么办？,如果这些相同的页面的头部和尾部能用一个文件来代替该多好啊！每次只用制作页面中不同的部分，相同的部分不用管。,这些相同的部分可以制作成一个文件，它就是模板,演示示例1：将现有文档保存为模板的步骤,制作模板,制作模板页有两种方式，下面分别加以介绍：将现有文档保存为模板1、打开HTML文档2、选择“文件”“另存为模板”3、设置相关属性，然后“保存”,模板保存的位置,给模板起的名字,制作模板,新建空白模板1、选择“窗口”“资源”2、在“资源”面板上新建模板3、设置相关属性，然后“保存”,按F11健也行,1、单击“模板”图标,2、单击“新建模板”图标,演示示例2：新建空白模。

3、板的步骤,创建模板后，默认情况下，应用模板的文档都处于非编辑状态，那怎么办？,为模板定义可编辑区域,制作模板,定义可编辑区域添加基本可编辑区域1、在模板文档中选择要设置为可编辑的区域2、“插入”“模板对象”“可编辑区域”删除可编辑区域1、选择要编辑的区域2、“修改”“模板”“删除模板标记”,演示示例3：添加和删除可编辑区域,已添加的“可编辑区域3”，可删除,不可编辑区域,不可编辑区域,应用模板,将模板应用于页面的步骤如下：1、新建要应用模板的空白文档2、在“资源”面板找到要应用的模板3、将模板拖到空白“文档”中4、在可编辑区域添加或编辑数据,演示示例4：应用模板素材应用模板答案,应用了模板的页。

4、面,此区域可编辑,其他区域不可编辑,应用模板,演示示例5：应用模板素材应用模板答案,用模板页重新制作“装备”的商品展示页,用模板页重新制作“装备”的商品展示页的步骤1、新建空白文档2、应用模板3、在可编辑区域添加未应用模板的商品展示页内容,第一步：新建空白文档,第二步：应用模板,第三步：在可编辑区域添加内容,应用模板,演示示例6：应用模板素材应用模板答案,用模板页制作“装备”商品的详细介绍页,用模板页重新制作“装备”的详细介绍页的步骤1、新建空白文档2、应用模板3、在可编辑区域添加未应用模板的商品的详细介绍页内容,用了模板的商品详细介绍页,应用模板,演示示例7：应用模板素材应用模板答案,用模板。

5、页制作“购买页面”,用模板页制作“购买页面”的步骤1、新建空白文档2、应用模板3、在可编辑区域添加未应用模板的“购买页面”,用了模板的“购买页面”,小结1,用模板页制作登录、注册页面,练习答案1,练习素材1,练习素材2,练习答案2,用了模板的“登录页面”,用了模板的“注册页面”,制作样式表,大家发现前面应用模板的页面中存在的问题吗？是不是字体过大、颜色搭配不合理、超链接样式极其难看、文本不规整等？那如何解决这些问题？,使用制作好的样式表文件，并和相关页面绑定,创建样式文件教员演示创建样式文件的步骤：1、选择“文件”“新建”2、选择“基本页”“CSS”3、单击“创建”,制作样式表,演示示例8：演。

6、示创建样式文件,1、选择“基本页”,2、选择“CSS”,3、选择“创建”,制作样式表,查看样式源代码,定义样式规则教员演示定义样式规则的步骤：1、选择“窗口”“CSS样式”2、在“CSS样式”面板中，右击新建3、分别新建标签body、a等的样式4、分别新建ID样式#head、ID样式#search_form等5、分别新建类样式.fontcolor_white、类样式.tableBorder等,制作样式表,应用样式文件教员演示两种方式应用样式文件：1、打开要应用样式的网页2、在属性面板中单击“样式”下拉框3、选择附加样式4、选择要引入的样式文件,1、选择附加样式表,2、选择样式文件,3、选择附加。

7、方式,4、单击确定,对此页面应用样式,应用样式文件,对未应用样式的商品的详细介绍页绑定样式文件,应用了样式的详细商品介绍页,比未应用样式前美观多啦!,演示示例9：样式演示素材样式演示答案,设置页面间的链接,主页、登录页面、注册页面、商品展示页、商品详细介绍页、购买页等页面都做好了并且应用了模板和样式，如何将这些页面之间相互关联起来？,使用超链接,设置页面间的链接,演示示例10：教员设置不同页面之间的超链接,教员演示如下操作：1、将”首页”和”登录页”、”注册”页链接2、将宝贝分类栏目中的“装备”和”商品”展示页链接3、将”商品展示”页和“快乐幻想去神愿石”商品详细介绍页链接4、将“快乐幻想去神。

8、愿石”商品详细介绍页中的”立刻购买”和“购买页”链接,发布站点,演示示例12：教员演示IIS安装过程,安装过程中，提示“插入磁盘”，就插入WindowsServer2003EnterpriseEdition光盘,安装IIS1、打开“控制面板”2、双击“添加或删除程序”图标3、单击”添加删除Windows组件”按钮4、选中“应用程序服务”并单击”详细信息”按钮5、选中“Internet信息服务(IIS)”，然后单击”确定”6、单击”下一步”进行安装，最后单击“完成”,测试并发布网站,测试内容页面效果是否美观链接是否完好测试不同浏览器的兼容性,1、检查单个页面链接2、检查整个站点的链接,1、设置希。

9、望检查的浏览器及其版本2、检查单个页面或整站的兼容性,演示示例11：检查链接是否完好和测试兼容性,演示示例13：教员演示上传网站的过程,发布站点,上传网站,1、选择“管理站点”,2、选中一个已创建好的站点，然后单击“编辑”,3、选择“远程信息”,4、选择“本地/网络”,5、指定网站发布的目录为“C:Inetpubwwwroot”下,6、单击“确定”,7、单击“上传文件”图标，就可以把taobaoweb站点上传到“C:Inetpubwwwroot”目录下,网站上传到指定的服务器上之后，该如何访问呢？,发布站点,访问网站由于我们的网站是上传到本地服务器上，所以有两种访问方式：http:/127.0.0.1/index.htmlhttp:/本地服务器IP地址/index.html,演示示例14：访问上传到服务器上的网站,总结,模板有什么好处？如何应用模板？如何引入样式表文件？在本地IIS服务器上，如何发布一个站点。