《网页设计与制作教程HTML+CSS+Bootstrap》课件 项目七创建网站“快乐花店”

项目七创建网站“快乐花店”

（模板应用）项目简介利用DreamweaverCC的模板功能，将网站中所有风格类似的网页，不变化的部分设计成模板网页，利用制作的模板来生成网页，我们只需制作网页中变化的部分，这样就极大的提高网站制作效率。项目目标本项目以《快乐花店》网站开发为例，使用模板来快速完成整个网站的建设。帮助初学者理解模板的概念和作用，学会模板网页基本框架的设计，固定元素部分的制作，以及可编辑区域的设计；学会利用模板网页来生成新的网页，对网页中可编辑区域中内容的编辑方法，以及通过修改模板来快速修改所有引用模板的网页，感受模板应用的强大功能。工作任务根据《快乐花店》网站设计与制作的要求，基于工作过程，以任务驱动的方式，利用模板功能完成整个网站中所有网页的设计和制作，使所有网页具有相同的布局和样式，保证整个网站的风格协调一致。（1）了解模板的含义和功能；（2）模板网页的设计和制作（固定区域和可编辑区域）；（3）利用模板网页生成新网页并对可编辑区域进行编辑；（4）通过修改模板网页快速修改所有引用模板的网页；（5）通过“快乐花店”网站设计与制作整理模板制作网站的一般流程。任务一构建网页结构通过以下两个步骤的操作实践来认识模板的概念和作用，初步完成《快乐花店》首页模板的制作，网页效果如图：1．设计《快乐花店》网站首页结构；2．制作《快乐花店》网站网页模板；

任务目标按照网站需求分析，建立站点文件夹，并在Dreamweaver中建立站点，通过《快乐花店》网站首页模板设计，帮助初学者理解模板的概念和作用，学会模板网页基本框架的设计，固定元素部分的制作，以及可编辑区域的设计。知识准备知识准备一了解模板的概念和作用观察这两张网页的区别。知识准备二Dreamweaver中4种模板区域可编辑区域：基于模板的网页中未锁定区域，是模板用户可以编辑修改的部分。重复区域：是网页中设置为重复的布局部分。如可以设置一个重复的表格行。可选区域：是在模板中指定为可选的部分，用于保存有可能在基于模板的网页中出现的内容。可编辑标签属性：在模板中解锁标签属性，使该属性可在基于模板的页面中编辑修改。知识准备三

模板网页的制作方式创建空白模板

插入模板知识准备四

模板网页制作要点1．定义可编辑区域2．定义可编辑的重复区域3．定义可编辑的重复表格4．取消可编辑区域标记任务实施步骤一

制作首页基本架构1．在D盘建立站点目录“klhd”及其子目录images。2．打开Dreamweaver，打开“文件”菜单，选择“新建站点”，使用站点设置对象定义站点，站点名“快乐花店”，站点文件夹“klhd”。任务实施步骤一

制作首页基本架构3．打开“资源”面板中，选择“模板”，对话框内右键单击“新建模板”，新建模板文件，重命名为“klhd.dwt”任务实施步骤一

制作首页基本架构4．双击打开klhd.dwt文件，将素材中提供的CSS样式表style.css附加到当前模板文件。利用DIV+CSS技术，使用附加的样式表，设计一个如下结构页面布局。任务实施步骤二定义模板可编辑区1．在已完成的页面设计中，鼠标指向右侧网页主体部分“本站快讯”栏目下空白区域单击左键。2．打开“插入”菜单，选择“模板>可编辑区”，在弹出的对话框的名称中输入“网页可编辑区”，点“确定”。3．切换到“代码”视图，在“<title>快乐花店</title>”之前添加：<!--TemplateBeginEditablename="doctitle"-->，之后添加：<!--TemplateEndEditable-->。任务实施步骤二定义模板可编辑区模板网页最终设计效果任务二

基于模板制作网站首页和子页通过以下七个步骤的操作实践通过四个步骤的操作实践来认识引用模板制作网页的方法，完成《快乐花店》首页：生日捧花和子页面：庆典花篮、支付方式的制作。（1）利用模板网页生成《快乐花店》首页：生日捧花；（2）利用模板网页生成《快乐花店》子页：支付方式；（3）通过修改模板网页的分类导航链接内容，修改所有引用模板网页；（4）通过浏览器预览站点，检查网站制作是否达到预期目标。任务二

基于模板制作网站首页和子页通过以下七个步骤的操作实践《快乐花店》网站首页效果图任务目标利用模板网页来生成新的网页，对网页中可编辑区域内容的编辑方法，以及通过修改模板来快速修改所有引用模板的网页，感受模板应用的强大功能。知识准备知识准备一

创建基于模板的网页方式1．使用新建命令创建基于模板的新网页知识准备知识准备一

创建基于模板的网页方式2．应用“资源”面板中的模板创建基于模板的网页知识准备二

模板管理的要点1．重命名模板文件2．修改模板文件3．更新站点4．删除模板文件任务实施步骤一

基于模板制作网站首页：生日捧花1．打开菜单“文件>新建”，弹出“新建文档”对话框，单击“网站模板”标签，切换到“网页模板”窗口。在“站点”选项框中选择“快乐花店”，再从右侧的选项框中选择模板文件“klhd”，单击“创建”按钮，创建网站首页：生日捧花。2．将视图模式切换到“拆分”，插入“鲜花推荐”图片。3．在“鲜花推荐”图片下方，使用项目列表方式添加鲜花图片。4．插入鲜花图片和名称、价格。5．打开菜单“修改>页面属性”，选择“标题/编码”选项，在“标题”栏内输入“快乐花店-生日捧花”。任务实施步骤一

基于模板制作网站首页：生日捧花首页编辑完成后的效果任务实施

课堂实践

制作网站子页：庆典花篮“庆典花篮”网页编辑完成后的效果步骤二

基于模板制作网站子页：支付方式1．同网站首页“生日捧花”创建方式，根据模板新建网页，创建网站子页：支付方式。2．将编辑模式切换到“拆分”。插入“支付方式”图片。3．在“网页可编辑区”依次插入“银行卡支付”、“微信支付”、“支付宝”、“京东支付”四种支付方式图片。4．打开菜单“修改>页面属性”，选择“标题/编码”选项，在“标题”栏内输入“快乐花店-支付方式”。步骤二

基于模板制作网站子页：支付方式“支付方式”网页编辑完成后的效果步骤三修改模板页导航链接并更新所有网页1．打开模板文件klhd.dwt，选中左侧“生日捧花”，打开“修改>创建链接”，选择站点根目录下的“index.html”，完成超