html使用模板统一页面风格.pptx

回顾回顾 请简述网站开发的基本步骤？请简述网站开发的基本步骤？框架布局的优缺点？框架布局的优缺点？表格布局的适用场合？表格布局的适用场合？DIV布局的优点以及适用场合？布局的优点以及适用场合？本章任务本章任务制作网站的模板页制作网站的模板页用模板页重新制作用模板页重新制作“装备装备”的商品展示页的商品展示页用模板页制作用模板页制作“装备装备”商品的详细介绍页商品的详细介绍页用模板页制作商品用模板页制作商品“购买页面购买页面”制作样式表文件并和其他页面绑定制作样式表文件并和其他页面绑定会用会用Dreamweaver制作模板页并应用到其他页面制作模板页并应用到其他页面会用会用Dreamweaver制作样式文件并绑定到各页面制作样式文件并绑定到各页面会使用网站开发流程制作并发布网站会使用网站开发流程制作并发布网站本章目标本章目标为什么需要模板为什么需要模板页眉和导航栏页脚 页眉和导航栏页脚 页眉和导航栏页脚 大大家家想想想想这这几几个个页页面面有有相相同同的的地地方方吗吗？为什么需要模板为什么需要模板上一张上一张ppt中三个页面的中三个页面的头部和尾部完全相同头部和尾部完全相同，那我们做网页的时候要是每次得重新制作页面那我们做网页的时候要是每次得重新制作页面的头部和尾部，那多耗时耗力啊！该怎么办？的头部和尾部，那多耗时耗力啊！该怎么办？如果这些相同的页面的头部和尾部能用一个文件如果这些相同的页面的头部和尾部能用一个文件来代替该多好啊！每次只用制作页面中不同的部来代替该多好啊！每次只用制作页面中不同的部分，相同的部分不用管。分，相同的部分不用管。这些相同的部分可以制作成一个文件，它就是模板这些相同的部分可以制作成一个文件，它就是模板演示示例演示示例1 1：将现有文档保存为模板的步骤：将现有文档保存为模板的步骤 制作模板制作模板制作模板页有两种方式，下面分别加以介绍：制作模板页有两种方式，下面分别加以介绍：将现有文档保存为模板将现有文档保存为模板1、打开、打开HTML文档文档2、选择、选择“文件文件”“另存为模板另存为模板”3、设置相关属性，然后设置相关属性，然后“保存保存”模板保存模板保存的位置的位置给模板起给模板起的名字的名字制作模板制作模板新建空白模板新建空白模板1、选择、选择“窗口窗口”“资源资源”2、在在“资源资源”面板上新建模板面板上新建模板3、设置相关属性，然后设置相关属性，然后“保存保存”按按F11健也行健也行 1、单击、单击“模板模板”图标图标 2、单击、单击“新新建模板建模板”图图标标 演示示例演示示例2 2：新建空白模板的步骤：新建空白模板的步骤 创建模板后，默认情况下，应用创建模板后，默认情况下，应用模板的文档都处于非编辑状态，模板的文档都处于非编辑状态，那怎么办？那怎么办？为模板定义可编辑区域为模板定义可编辑区域制作模板制作模板定义可编辑区域定义可编辑区域添加基本可编辑区域添加基本可编辑区域1、在模板文档中选择要设置为可编辑的区域、在模板文档中选择要设置为可编辑的区域2、“插入插入”“模板对象模板对象”“可编辑区域可编辑区域”删除可编辑区域删除可编辑区域1、选择要编辑的区域、选择要编辑的区域2、“修改修改”“模板模板”“删除模板标记删除模板标记”演示示例演示示例3 3：添加和删除可编辑区域添加和删除可编辑区域已添加的已添加的“可编辑区域可编辑区域 3”，可删除，可删除不可编辑区域不可编辑区域 不可编辑区域不可编辑区域 应用模板应用模板将模板应用于页面的步骤如下：将模板应用于页面的步骤如下：1、新建要应用模板的、新建要应用模板的空白空白文档文档2、在、在“资源资源”面板找到要应用的模板面板找到要应用的模板3、将模板拖到、将模板拖到空白空白“文档文档”中中4、在可编辑区域添加或编辑数据、在可编辑区域添加或编辑数据演示示例演示示例4 4：应用模板素材应用模板素材 应用模板答案应用模板答案应用了模应用了模板的页面板的页面此区域可编辑此区域可编辑,其他其他区域不可编辑区域不可编辑应用模板应用模板演示示例演示示例5 5：应用模板素材应用模板素材 应用模板答案应用模板答案用模板页重新制作用模板页重新制作“装备装备”的商品展示页的商品展示页用模板页重新制作用模板页重新制作“装备装备”的商品展示页的步骤的商品展示页的步骤1、新建空白文档新建空白文档2、应用模板、应用模板3、在可编辑区域添加未应用模板的商品展示页内容、在可编辑区域添加未应用模板的商品展示页内容第一步：新建空白文档第一步：新建空白文档第二步：应用模板第二步：应用模板第三步：在可编辑区域添加内容第三步：在可编辑区域添加内容应用模板应用模板演示示例演示示例6 6：应用模板素材应用模板素材 应用模板答案应用模板答案用模板页制作用模板页制作“装备装备”商品的商品的详细介绍详细介绍页页用模板页重新制作用模板页重新制作“装备装备”的的详细介绍页详细介绍页的步骤的步骤1、新建空白文档、新建空白文档2、应用模板、应用模板3、在可编辑区域添加未应用模板的商品的详细介绍页内容、在可编辑区域添加未应用模板的商品的详细介绍页内容用了模板的商用了模板的商品详细介绍页品详细介绍页应用模板应用模板演示示例演示示例7 7：应用模板素材应用模板素材 应用模板答案应用模板答案用模板页制作用模板页制作“购买页面购买页面”用模板页制作用模板页制作“购买页面购买页面”的步骤的步骤1、新建空白文档、新建空白文档2、应用模板、应用模板3、在可编辑区域、在可编辑区域添加未应用模板的添加未应用模板的“购买页面购买页面”用了模板的用了模板的“购买页面购买页面”小结小结1 1用模板页制作登录、注册页面用模板页制作登录、注册页面练习答案练习答案1 1练习素材练习素材1 1练习素材练习素材2 2练习答案练习答案2 2用了模板的用了模板的“登录页面登录页面”用了模板的用了模板的“注册页面注册页面”制作样式表制作样式表 大家发现前面应用模板的页面中存在的问题大家发现前面应用模板的页面中存在的问题吗？是不是字体过大、颜色搭配不合理、超链接吗？是不是字体过大、颜色搭配不合理、超链接样式极其难看、文本不规整等？那如何解决这些样式极其难看、文本不规整等？那如何解决这些问题？问题？使用制作好的样式表文件，并和相关页面绑定使用制作好的样式表文件，并和相关页面绑定创建样式文件创建样式文件教员演示创建样式文件的步骤：教员演示创建样式文件的步骤：1、选择、选择“文件文件”“新建新建”2、选择选择“基本页基本页”“CSS”3、单击单击“创建创建”制作样式表制作样式表演示示例演示示例8 8：演示创建样式文件：演示创建样式文件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、选择附、选择附加方式加方式4、单击确定、单击确定对此页面对此页面应用样式应用样式应用样式文件应用样式文件对未应用样式的商品的详细介绍页绑定样式文件对未应用样式的商品的详细介绍页绑定样式文件应用了样式的详应用了样式的详细商品介绍页细商品介绍页比未应用样式前美观多啦比未应用样式前美观多啦!演示示例演示示例9 9：样式演示素材样式演示素材 样式演示答案样式演示答案设置页面间的链接设置页面间的链接 主页、登录页面、注册页面、商品展示页、主页、登录页面、注册页面、商品展示页、商品详细介绍页、购买页等页面都做好了并且商品详细介绍页、购买页等页面都做好了并且应用了模板和样式，如何将这些页面之间应用了模板和样式，如何将这些页面之间相互相互关联关联起来？起来？使用超链接使用超链接设置页面间的链接设置页面间的链接 演示示例演示示例1010：教员设置不同页面之间的超链接教员设置不同页面之间的超链接 教员演示如下操作：教员演示如下操作：1、将、将”首页首页”和和”登录页登录页”、”注册注册”页链接页链接2、将宝贝分类栏目中的、将宝贝分类栏目中的“装备装备”和和”商品商品”展示页链接展示页链接3、将、将”商品展示商品展示”页和页和“快乐幻想去神愿石快乐幻想去神愿石”商品详细介绍页链接商品详细介绍页链接4、将、将“快乐幻想去神愿石快乐幻想去神愿石”商品详细介绍页中的商品详细介绍页中的”立刻购买立刻购买”和和“购购 买页买页”链接链接发布站点发布站点 演示示例演示示例1212：教员演示：教员演示IIS安装过程安装过程安装过程中，提示安装过程中，提示“插入磁盘插入磁盘”，就插入，就插入Windows Server 2003 Enterprise Edition光盘光盘安装安装IIS1、打开、打开“控制面板控制面板”2、双击、双击“添加或删除程序添加或删除程序”图标图标3、单击、单击”添加删除添加删除Windows组件组件”按钮按钮 4、选中、选中“应用程序服务应用程序服务”并单击并单击”详细信息详细信息”按钮按钮 5、选中、选中“Internet信息服务信息服务(IIS)”，然后单击，然后单击”确定确定”6、单击、单击”下一步下一步”进行安装，最后单击进行安装，最后单击“完成完成”测试并发布网站测试并发布网站测试内容测试内容页面效果是否美观页面效果是否美观链接是否完好链接是否完好测试不同浏览器的兼容性测试不同浏览器的兼容性1、检查单个页面链接、检查单个页面链接2、检查整个站点的链接、检查整个站点的链接1、设置希望检查的浏览器及其版本、设置希望检查的浏览器及其版本2、检查单个页面或整站的兼容性、检查单个页面或整站的兼容性演示示例演示示例1111：检查链接是否完好和测试兼容性：检查链接是否完好和测试兼容性 演示示例演示示例1313：教员演示上传网站的过程：教员演示上传网站的过程发布站点发布站点上传网站上传网站1、选择、选择“管理站点管理站点”2、选中一个已创、选中一个已创建好的站点，然建好的站点，然后单击后单击“编辑编辑”3、选择、选择“远程信息远程信息”4、选择、选择本地本地/网络网络”5、指定网站发、指定网站发布的目录为布的目录为“C:Inetpubwwwroot”下下6、单击、单击“确定确定”7、单击、单击“上传文件上传文件”图标，就可以图标，就可以把把taobaoweb站点上传到站点上传到“C:Inetpubwwwroot”目录下目录下网站上传到指定的服务器上之后，该如何访问呢？网站上传到指定的服务器上之后，该如何访问呢？发布站点发布站点访问网站访问网站由于我们的网站是上传到本地服务器上，所以有两种访问方由于我们的网站是上传到本地服务器上，所以有两种访问方式：式：1.http:/127.0.0.1/index.html2.http:/本地服务器本地服务器IP地址地址/index.html 演示示例演示示例1414：访问上传到服务器上的网站：访问上传到服务器上的网站总结总结模板有什么好处？模板有什么好处？如何应用模板？如何应用模板？如何引入样式表文件？如何引入样式表文件？在本地在本地IIS服务器上，如何发布一个站点？服务器上，如何发布一个站点？