html模板怎么用6,HTML5+CSS3网页设计与制作实用教程 单元6 模板应用与制作商品推荐页面（101页）-原创力文档...

单元6模板应用与制作商品推荐页面HTML5+CSS3网页设计与制作实用教程本章导读The chapter’s introduction 通常在一个网站中会有大量风格基本相似的页面，如果逐页创建和修改，既费时又费力，而且效率不高，整个网站中的网页很难做到有统一的外观及结构。为了避免重复劳动，可以使用Dreamweaver CC 提供的模板和库功能，将具有相同版面结构的页面制作成模板，再通过模板来创建其他页面。也可以将相同的页面元素制作成库项目，并存储在库文件中以便随时调用。目录导航渐进训练任务 6-1 设计与制作电脑版商品推荐页面0601.html任务 6-2 制作基于模板的电脑版商品推荐页面0602.html探索训练 任务 6-3 设计与制作触屏版商品促销页面0603.html任务 6-4 设计与制作触屏版商品促销页面0604.html析疑解惑单元小结任务 6-1 设计与制作电脑版商品推荐页面0601.html任务描述设计与制作电脑版商品推荐页面0601.html，其浏览效果如图6-1 所示。图6-1电脑版商品推荐页面的整体浏览效果▲▲▲【任务6-1-1】规划与设计商品推荐页面的布局结构任务描述①规划商品推荐页面0601.html 的布局结构，并绘制各组成部分的页面内容分布示意图。②编写商品推荐页面0601.html 布局结构对应的HTML 代码。③定义商品推荐页面0601.html 布局结构对应的CSS 样式代码。【任务6-1-1】规划与设计商品推荐页面的布局结构任务实施1．规划与设计商品推荐页面0601.html的布局结构商品推荐页面0601.html 内容分布示意图如图6-2 所示。商品推荐页面0601.html 的布局结构设计示意图如图6-3 所示。图6-3　商品推荐页面0601.html 的布局结构设计示意图图6-2　商品推荐页面内容分布示意图【任务6-1-1】规划与设计商品推荐页面的布局结构2．创建所需的文件夹 在站点“易购网”中创建文件夹“06 模板应用与制作商品推荐页面”，在该文件夹中创建文件夹“0601”，并在文件夹“0601”中创建子文件夹“CSS”和“image”，将所需要的图片文件拷贝到“image”文件夹中。3．创建网页文档0601.html 在文件夹“0601”中创建网页文档0601.html。商品推荐页面0601.html 布局结构对应的HTML 代码如表6-1 所示。表6-1　商品推荐页面0601.html 布局结构的HTML 代码行号HTML代码

易购网 >>  手机通讯01 02 03 04 【任务6-1-1】规划与设计商品推荐页面的布局结构表6-1　商品推荐页面0601.html 布局结构的HTML 代码行号HTML代码行号HTML代码

05 06 07 08 09 10 11 12 13141516171819 202122232425262728293031323334【任务6-1-1】规划与设计商品推荐页面的布局结构 在文件夹“CSS”可创建样式文件main.css，在该样式文件中定义CSS 代码，商品推荐页面0601.html 布局结构对应的CSS 样式代码的定义如表6-2 所示。表6-2　商品推荐页面0601.html 布局结构对应的CSS 样式代码行号CSS代码行号CSS代码#l_sidebar .pagesor