HTML5+CSS3网页的设计与制作单元6 模板应用与制作商品推荐页面.pptx

工业和信息化人才培养规划教材单元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】规划与设计商品推荐页面的布局结构表6-1　商品推荐页面0601.html 布局结构的HTML 代码行号HTML代码 行号HTML代码 /divdiv id=l_sidebardiv class=pagesorth2 /h2div class=content_box/div/divdiv class=recommendh2 /h2div class=content_box/div/divdiv class=myviewh2 /h2div class=content_box/div/div/divdiv id=r_contentdiv class=picrecommend /divdiv class=big_content_boxh2 /h2div class=tjcontent /div/divdiv class=big_content_boxh2 /h2div class=contentdiv class=l /divdiv class=r /div/div/div/div/div05 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 .pagesort h2 {background: url(../images/0ig-li.gif)no-repeat scroll 3% 50%;height:32px;line-height:32px;padding-left:22px;font-size:14px;font-weight:bold;}#l_sidebar .pagesort .content_box {padding:5px;border:1px solid #ccc;background:#fff;}#l_sidebar .recommend h2 {background: url(../images/0ig-li.gif) 01 02 03 04 05 06 07 08 09 10 11121314151617184．创建样式文件与编写CSS样式代码【任务6-1-1】规划与设计商品推荐页面的布局结构表6-2　商品推荐页面0601.html 布局结构对应的CSS 样式代码行号CSS代码 行号CSS代码 no-repeat scroll 3% 50%;height:32px;line-height:32px;padding-left:22px;font-size:14px;font-weight:bold;}#l_sidebar .recommend .content_box {padding:5px;border:1px solid #a0dafe;backgroun