HTML5+CSS3网页设计与制作实用教程单元6课件.pptx

1、单元6模板应用与制作商品推荐页面HTML5+CSS3网页设计与制作实用教程 通常在一个网站中会有大量风格基本相似的页面，如果逐页创建和修改，既费时又费力，而且效率不高，整个网站中的网页很难做到有统一的外观及结构。为了避免重复劳动，可以使用Dreamweaver CC 提供的模板和库功能，将具有相同版面结构的页面制作成模板，再通过模板来创建其他页面。也可以将相同的页面元素制作成库项目，并存储在库文件中以便随时调用。本章导读The chapters introduction目录导航渐进训练任务 6-1 设计与制作电脑版商品推荐页面0601.html探索训练 任务 6-3 设计与制作触屏版商品促销页

2、面0603.html析疑解惑单元小结任务 6-2 制作基于模板的电脑版商品推荐页面0602.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

3、 布局结构对应的CSS 样式代码。【任务6-1-1】规划与设计商品推荐页面的布局结构1规划与设计商品推荐页面0601.html的布局结构商品推荐页面0601.html 的布局结构设计示意图如图6-3 所示。图6-3商品推荐页面0601.html 的布局结构设计示意图任 务 实 施商品推荐页面0601.html 内容分布示意图如图6-2 所示。图6-2商品推荐页面内容分布示意图【任务6-1-1】规划与设计商品推荐页面的布局结构 在站点“易购网”中创建文件夹“06 模板应用与制作商品推荐页面”，在该文件夹中创建文件夹“0601”，并在文件夹“0601”中创建子文件夹“CSS”和“image”，将所

4、需要的图片文件拷贝到“image”文件夹中。2创建所需的文件夹 在文件夹“0601”中创建网页文档0601.html。商品推荐页面0601.html 布局结构对应的HTML 代码如表6-1 所示。3创建网页文档0601.html表6-1商品推荐页面0601.html 布局结构的HTML 代码01 02 03 04 易购网 >>  手机通讯HTML代码行号【任务6-1-1】规划与设计商品推荐页面的布局结构表6-1商品推荐页面0601.html 布局结构的HTML 代码05 06 07 08 09 10 11 12 13141516171819 HTML代码行号20

5、2122232425262728293031323334 HTML代码行号【任务6-1-1】规划与设计商品推荐页面的布局结构 在文件夹“CSS”可创建样式文件main.css，在该样式文件中定义CSS 代码，商品推荐页面0601.html 布局结构对应的CSS 样式代码的定义如表6-2 所示。4创建样式文件与编写CSS样式代码表6-2商品推荐页面0601.html 布局结构对应的CSS 样式代码01 02 03 04 05 06 07 08 09 #l_sidebar .pagesort h2 background: url(./images/0ig-li.gif)no-repeat scro

6、ll 3% 50%;height:32px;line-height:32px;padding-left:22px;font-size:14px;font-weight:bold;CSS代码行号10 1112131415161718#l_sidebar .pagesort .content_box padding:5px;border:1px solid #ccc;background:#fff;#l_sidebar .recommend h2 background: url(./images/0ig-li.gif) CSS代码行号【任务6-1-1】规划与设计商品推荐页面的布局结构表6-2商品推

7、荐页面0601.html 布局结构对应的CSS 样式代码1920212223242526272829303132no-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;background:#fff;CSS代码行号3334353637383940414243444546#l_sidebar .myview

8、 h2 background: url(./images/0ig-li.gif)n o -repeat scroll 3% 50%;height:32px;line-height:32px;padding-left:22px;font-size:14px;font-weight:bold;#l_sidebar .myview .content_box padding:5px;border:1px solid #eeca9f;background:#fff;CSS代码行号【任务6-1-1】规划与设计商品推荐页面的布局结构表6-2商品推荐页面0601.html 布局结构对应的CSS 样式代码474

9、8495051525354555657585960overflow:hidden;height:1%;#r_content float:right;width:790px;#r_content .picrecommend background:#f5f5f5url(./images/guanggaobg.gif)no-repeat scroll 0 0;width:770px;height:180px;CSS代码行号6162636465666768697071727374padding:10px;text-align:center;margin-bottom:10px;#r_content .

10、big_content_box margin-bottom:10px;border:3px solid #ccc;#r_content .big_content_box h2 background:#f5f5f5url(./images/title_bg.gif)repeat-x left top;CSS代码行号【任务6-1-1】规划与设计商品推荐页面的布局结构表6-2商品推荐页面0601.html 布局结构对应的CSS 样式代码7576777879808182838485868788height:34px;line-height:34px;font-size:14px;color:#c00;

11、font-weight:bold;padding-left:15px;#r_content .big_content_box .tjcontentpadding:0 0 10px 10px;height:1%;clear:both;overflow:hidden;zoom:1;CSS代码行号8990919293949596979899100101102#r_content .big_content_box .content padding:7px;height:1%;clear:both;zoom:1;#r_content .big_content_box .content .l float:

12、left;width:200px;border-right:2px solid #ccc;CSS代码行号【任务6-1-1】规划与设计商品推荐页面的布局结构表6-2商品推荐页面0601.html 布局结构对应的CSS 样式代码103104105#r_content .big_content_box .content .r float:right;CSS代码行号106107108width:560px;height:1%;CSS代码行号【说明】表6-2 中部分CSS 代码被省略，详见单元5 的表5-2。在文件夹“CSS”可创建通用样式文件base.css，在该样式文件中定义CSS 代码，样式文件b

13、ase.css 的CSS 代码如单元5 的表5-3 所示。【任务6-1-1】规划与设计商品推荐页面的布局结构网页0601.html 主体布局结构的设计外观效果如图6-4 所示。图6-4 网页0601.html 主体布局结构的设计外观效果【任务6-1-2】制作用于生成网页模板的网页0601.html任 务 描 述设计与制作用于生成网页模板的网页0601.html，其浏览效果如图6-1 所示。任 务 实 施 网页0601.html 为左右结构，通过浮动方式实现左右布局，网页的左侧版块为左浮动，右侧版块为右浮动。在“”和“”之间、“”与“”之间按由外层向里层的顺序分别插入多层Div 标签、项目列表、

14、列表项 和定义列表。在网页0601.html 中合适的位置输入文字、插入图片和设置超链接。【任务6-1-2】制作用于生成网页模板的网页0601.html表6-3网页0601.html 左侧内容的HTML 代码1布局与美化商品推荐页面的左侧列表内容 网页左侧的结构与网页0601.html 一致，从上至下依次为“设备类型”、“同类推荐”和“最近浏览的商品”。其HTML 代码如表6-3 所示。01 02 03 04 05 06 07 08 09 10 手机通讯 手机通讯3G 手机4G 手机HTML代码行号11121314151617181920CDMA 手机GSM 手机 手机配件 手机电池 其他配件

15、HTML代码行号【任务6-1-2】制作用于生成网页模板的网页0601.html表6-3网页0601.html 左侧内容的HTML 代码212223242526272829303132333435 同类推荐派(Coolpad) 大神F2 8675-A 999.00HTML代码行号【任务6-1-2】制作用于生成网页模板的网页0601.html表6-3网页0601.html 左侧内容的HTML 代码363738394041424344454647484950 最近浏览的商品2037.00 HTML代码行号【任务6-1-2】制作用于生成网页模板的网页0601.html表6-3网页0601.html 左

16、侧内容的HTML 代码515253545556 HTML代码行号【任务6-1-2】制作用于生成网页模板的网页0601.html表6-4网页0503.html 右侧“商品广告”对应的HTML 代码2实现商品推荐页面0601.html右侧的“商品广告” 在样式文件main.css 中添加必要的CSS 代码，实现对商品推荐页面0601.html 右侧“商品广告”的布局与美化，对应的CSS 样式代码如表6-2 所示。 在网页0601.html 中编写HTML 代码与插入图片，实现商品推荐页面0601.html 右侧“商品广告”，对应的HTML 代码如表6-4 所示。01 02 03 04 HTML代码

17、行号【任务6-1-2】制作用于生成网页模板的网页0601.html表6-5实现网页0601.html 右侧“热销推荐”布局与美化的CSS 代码3实现商品推荐页面0601.html右侧的“热销推荐”列表 在样式文件main.css 中添加必要的CSS 代码，实现对商品推荐页面0601.html 右侧“热销推荐”内容的布局与美化，对应的CSS 样式代码如表6-5 所示。01 02 03 04 05 06 07 0809.big_content_box margin-top: 5px;border: 3px solid #CCC;.big_content_box h2 background: url

18、(./images/title_bg3.gif)#F5F5F5 repeat-x left top;height: 34px;CSS代码行号101112131415161718line-height: 34px;font-size: 14px;color: #C00;font-weight: bold;padding-left: 15px;.big_content_box .tjcontent padding: 0 0 10px 10px;CSS代码行号【任务6-1-2】制作用于生成网页模板的网页0601.html表6-5实现网页0601.html 右侧“热销推荐”布局与美化的CSS 代码19

19、20212223242526272829303132height: 1%;clear: both;overflow: hidden;zoom: 1;.big_content_box .tjcontent .tuijian clear: both;overflow: hidden;*zoom: 1 padding:8px 0;.big_content_box .tjcontent .tuijian li float: left;CSS代码行号3334353637383940414243444546overflow: hidden;width: 250px;padding-right: 5px;p

20、adding-top: 10px;big_content_box .tjcontent .tuijian li img float: left;border: 1px solid #CCC;width:100px;height:90px;.big_content_box .tjcontent .tuijian li dl float: right;CSS代码行号【任务6-1-2】制作用于生成网页模板的网页0601.html表6-5实现网页0601.html 右侧“热销推荐”布局与美化的CSS 代码4748495051525354555657585960width: 125px;height:

21、90px;position: relative;.big_content_box .tjcontent .tuijian li dt word-break: break-all;padding-left: 5px;line-height: 150%;.big_content_box. tjcontent .tuijianl id ls pan.tj display: block;width: 37px;height: 37px;CSS代码行号6162636465666768697071727374background: url(./images/common.gif)no-repeat 0 0

22、;right: 5px;bottom: 0px;position: absolute;.big_content_box .tjcontent .tuijian li dd padding-left: 5px;font-size: 14px;color: #C00;font-weight: bold;font-family: arial;padding-top: 5px;CSS代码行号【任务6-1-2】制作用于生成网页模板的网页0601.html 在网页0601.html 中编写HTML 代码、输入文字与插入图片，实现商品推荐页面0601.html 右侧“热销推荐”，对应的HTML 代码如表6-

23、6 所示。表6-6网页0503.html 右侧“热销推荐”对应的HTML 代码01 02 03 04 05 06 07 08 09 10 11 12 热销推荐酷派(Coolpad) 大神F2 8675-A ￥995.00HTML代码行号【任务6-1-2】制作用于生成网页模板的网页0601.html表6-6网页0503.html 右侧“热销推荐”对应的HTML 代码1314151617181920 HTML代码行号【任务6-1-2】制作用于生成网页模板的网页0601.html 在样式文件main.css 中添加必要的CSS 代码，实现对商品推荐页面0601.html 右侧“潮流推荐”列表内容的布

24、局与美化，对应的CSS 样式代码如表6-7 所示。4实现商品推荐页面0601.html右侧的“潮流推荐”列表表6-7实现网页0601.html 右侧“潮流推荐”列表内容布局与美化的CSS 代码01 02 03 04 05 06 07 08 .big_content_box .content padding: 5px 10px;height: 1%;clear: both;overflow: hidden;zoom: 1;CSS代码行号0910111213141516.big_content_box .content .l float: left;width: 200px;border-righ

25、t: 2px solid #CCC;overflow: hidden;.big_content_box .content .l .focus CSS代码行号【任务6-1-2】制作用于生成网页模板的网页0601.html表6-7实现网页0601.html 右侧“潮流推荐”列表内容布局与美化的CSS 代码17181920212223242526272829width: 190px;margin-bottom: 10px;.big_content_box .content .l .focuslist width: 200px;overflow: hidden;.big_content_box .co

26、ntent .l .focuslist li background: url(./images/dot1.png)no-repeat scroll 0 50%;padding-left: 10px;CSS代码行号30313233343536373839404142height: 20px;line-height: 20px;.big_content_box .content .r float: right;width: 560px;overflow: hidden;height: 1%;.big_content_box .content .r li float: left;width: 130

27、px;CSS代码行号【任务6-1-2】制作用于生成网页模板的网页0601.html表6-7实现网页0601.html 右侧“潮流推荐”列表内容布局与美化的CSS 代码4344454647484950515253height: 180px;text-align: center;padding: 0 5px;.big_content_box .content .r li img width:100px;height:90px;.big_content_box .content .r li dl height: 18px;padding-top: 2px;CSS代码行号545556575859606

28、1626364.big_content_box .content .r li dl dt span font-size: 14px;color: #C00;font-weight: bold;font-family: arial;line-height: 1.5.big_content_box .content .r li dl dd line-height: 1.5;CSS代码行号【任务6-1-2】制作用于生成网页模板的网页0601.html 在网页0601.html 中编写HTML 代码、输入文字并插入图片，实现商品推荐页面0601.html 右侧“潮流推荐”列表，对应的HTML 代码如表

29、6-8 所示。表6-8网页0503.html 右侧“潮流推荐”列表对应的HTML 代码 潮流推荐 品牌：华为 型号：Che2-TL00 颜色：白色HTML代码行号01 02 03 04 05 06 07 08 09 10 11 【任务6-1-2】制作用于生成网页模板的网页0601.html表6-8网页0503.html 右侧“潮流推荐”列表对应的HTML 代码 制式：移动4G(TD-LTE)CPU 核数：八核 屏幕尺寸：5.5 英寸 摄像头像素：1300 万像素 ￥2199.00 三星手机SM-G7509（白色） HTML代码行号1213141516171819202122232425【任务6

30、-1-2】制作用于生成网页模板的网页0601.html表6-8网页0503.html 右侧“潮流推荐”列表对应的HTML 代码 HTML代码行号26272829303132333435363738【任务6-1-2】制作用于生成网页模板的网页0601.html 保存网页0601.html，然后按快捷键【F12】浏览该网页，其浏览效果如图6-1 所示。5保存网页与浏览网页效果图6-1电脑版商品推荐页面的整体浏览效果目录导航渐进训练任务 6-1 设计与制作电脑版商品推荐页面0601.html探索训练 任务 6-3 设计与制作触屏版商品促销页面0603.html析疑解惑单元小结任务 6-2 制作基于模

31、板的电脑版商品推荐页面0602.html任务 6-4 设计与制作触屏版商品促销页面0604.html任务 6-2 制作基于模板的电脑版商品推荐页面0602.html任 务 描 述制作基于模板的电脑版商品推荐页面0602.html，其浏览效果如图6-5 所示。图6-5基本模板的电脑版商品推荐页面的浏览效果【任务6-2-1】基于网页0601.html创建网页模板0602.dwt任 务 描 述利用网页“0601.html”创建网页模板“0602.dwt”。将网页模板“0602.dwt”中的标题文字“手机通讯”定义为可编辑区域。将网页模板“0602.dwt”中的图像“t01b.jpg”定义为可编辑区域

32、。 将网页模板“0602.dwt” 中的区域“”“”“”定义为可编辑区域。 将区域“” 的标签“background” 和区域“”的标签“bgcolor”定义为可编辑的标签属性。将区域“”定义为可编辑的可选区域。【任务6-2-1】基于网页0601.html创建网页模板0602.dwt1创建与编辑网页模板任 务 实 施 利用图6-1 所示的网页文档“0601.html”创建网页模板，如果该网页文档已被关闭，则应先打开该网页文档。 （1）在Dreamweaver CC 主窗口中，选择菜单【文件】【另存为模板】命令，弹出【另存模板】对话框。【提示】模板实际上也是文档，它的扩展名为“.dwt”，并存放

33、在指定站点的根目录的Templates 文件夹中。模板文件并不是Dreamweaver 默认就有的， 是在制作模板时由Dreamweaver CC 生成的。【任务6-2-1】基于网页0601.html创建网页模板0602.dwt1创建与编辑网页模板 （2）在【另存模板】对话框中的“站点”下拉列表框选择模板保存的站点，本项目选择“易购网”。在“现存的模板”列表框中显示了当前站点中的所有模板，由于本站点暂时没有创建模板，所以显示“（没有模板）”。在“描述”文本框中输入对模板的说明文字。在“另存为”文本框中输入模板的名称，这里输入“0601”，如图6-6 所示。图6-6【另存模板】对话框【任务6-2

34、-1】基于网页0601.html创建网页模板0602.dwt （3）设置完毕后，在【另存为模板】对话框中，单击【保存】按钮，弹出一个图6-7 所示的“要更新链接吗”提示信息对话框。如果在该对话框中单击【是】按钮，则当前网页会被转换成模板，同时系统将自动在所选择站点的根目录下创建“Templates”文件夹，并将创建的模板文件保存在该文件夹中，如图6-8 所示。图6-7“要更新链接吗”提示信息对话框图6-8站点中创建的“Templates”文本夹【任务6-2-1】基于网页0601.html创建网页模板0602.dwt 模板创建好后，系统默认所有区域都是不可编辑的，也就是说不可对用模板生成的网页做

35、任何编辑操作，所以将模板中的某些区域设置为可编辑区域是非常必要的。设置可编辑区域，需要在制作模板的时候完成。 打开当前站点文件夹“Templates”中模板文件“0601.dwt”。2定义可编辑区域（1）定义文字为可编辑区域 选中标签“”与“”之间的文字“手机通讯”，在Dreamweaver CC 主界面，选择菜单命令【插入】【模板】【可编辑区域】，如图6-9 所示，弹出【新建可编辑区域】对话框。图6-9“可编辑区域”菜单项【任务6-2-1】基于网页0601.html创建网页模板0602.dwt2定义可编辑区域（1）定义文字为可编辑区域 在【新建可编辑区域】对话框中的“名称”文本框中输入可编辑

36、区域的名称“EditRegion1”，如图6-10 所示。然后单击【确定】按钮，完成可编辑区域的创建。图6-10【新建可编辑区域】对话框 可编辑区域创建完成后，该页面中的可编辑区域有蓝色标签，标签上有可编辑区域的名称。【任务6-2-1】基于网页0601.html创建网页模板0602.dwt2定义可编辑区域（2）定义图像为可编辑区域 选中区块“”中的图像“t01b.jpg”，在“插入”工具栏“模板”选项卡中单击【可编辑区域】按钮，如图6-11 所示，在弹出的【新建可编辑区域】对话框中的“名称”文本框中输入第2 个可编辑区域的名称“EditRegion2”。图6-11常用“插入”工具栏中的【模板】

37、下拉菜单【任务6-2-1】基于网页0601.html创建网页模板0602.dwt2定义可编辑区域（3）定义区域“”为可编辑区域 选中区域“”，在图6-11 所示的【模板】下拉菜单中选择【可编辑区域】选项，在弹出的【新建可编辑区域】对话框中的“名称”文本框中输入第3 个可编辑区域的名称“EditRegion3”。 按照类似的方法，将另外2 个区域“”分别定义为可编辑区域，且将该可编辑区域分别命名为“EditRegion4”“EditRegion5”。（4）定义区域“”中文字“手机通讯”为可编辑区域 选中区域“”中的文字“手机通讯”，在图6-11 所示的【模板】下拉菜单中选择【可编辑区域】选项，在

38、弹出的【新建可编辑区域】对话框中的“名称”文本框中输入第6 个可编辑区域的名称“EditRegion6”。【任务6-2-1】基于网页0601.html创建网页模板0602.dwt2定义可编辑区域（5）定义区域“”为可编辑区域 选中区域“”，在图6-11 所示的【模板】下拉菜单中选择【可编辑区域】选项，在弹出的【新建可编辑区域】对话框中的“名称”文本框中输入第7 个可编辑区域的名称“EditRegion7”。（6）定义区域“”为可编辑区域 选中区域“”，在图6-11 所示的【模板】下拉菜单中选择【可编辑区域】选项，在弹出的【新建可编辑区域】对话框中的“名称”文本框中输入第8 个可编辑区域的名称“

39、EditRegion8”。【任务6-2-1】基于网页0601.html创建网页模板0602.dwt2定义可编辑区域（7）将区域“”的属性“background”定义为可编辑的标签属性 对于基于模板的网页，如果需要修改某些页面元素的属性，如背景图像、背景颜色等，则可以在创建模板时，将这些属性定义为可编辑标签属性。 选择想要设置可编辑标签属性的区域“”。 在Dreamweaver CC 主界面中，选择菜单命令【修改】【模板】【令属性可编辑】，如图6-12 所示，此时弹出【可编辑标签属性】对话框。图6-12【令属性可编辑】菜单【任务6-2-1】基于网页0601.html创建网页模板0602.dwt2

40、定义可编辑区域（7）将区域“”的属性“background”定义为可编辑的标签属性 在【可编辑标签属性】对话框的“属性”下拉列表框中选择“BACKGROUND”选项。如果需要设置的标签没有出现在下拉列表框，可以单击列表框右侧的【添加】按钮，弹出一个添加属性标签的对话框，如图6-13 所示，在该对话框中添加一个新的可编辑标签名称。图6-13“添加新的可编辑标签”对话框【任务6-2-1】基于网页0601.html创建网页模板0602.dwt2定义可编辑区域（7）将区域“”的属性“background”定义为可编辑的标签属性 然后在此对话框中单击选中“令属性可编辑”复选框，在“标签”文本框中输入该属

41、性的标签“background”，在“类型”下拉列表框中选择“URL”，即链接地址，在“默认”文本框设置该属性的默认值为“./06 模板应用与制作商品推荐页面/0601/images/t01b.jpg”，如图6-14 所示。图6-14在【可编辑标签属性】对话框设置“background”为可编辑属性【任务6-2-1】基于网页0601.html创建网页模板0602.dwt2定义可编辑区域（7）将区域“”的属性“background”定义为可编辑的标签属性 设置完成后，单击【可编辑标签属性】对话框中的【确定】按钮，将区域“”的“背景图像”设置为可编辑的标签属性。 页面元素的标签属性backgrou

42、nd 设置完成后，Div 标签“”中会出现“background=(background)”代码。【提示】如果在【可编辑标签属性】对话框中，取消选中“令属性可编辑”复选框，则选中的属性将不能被编辑。【任务6-2-1】基于网页0601.html创建网页模板0602.dwt2定义可编辑区域（8）将HTML 标签 的属性“bgcolor”定义为可编辑的标签属性 选择想要设置可编辑标签属性的HTML 标签，在Dreamweaver CC 主界面中，选择菜单命令【修改】【模板】【令属性可编辑】，此时弹出【可编辑标签属性】对话框。在【可编辑标签属性】对话框的“属性”下拉列表框中选择“BGCOLOR”。然后

43、在此对话框中单击选中“令属性可编辑”复选框，在“标签”文本框中输入该属性的标签“bgcolor”，在“类型”下拉列表框中选择“颜色”，在“默认”文本框输入该属性的默认值“#FFF”，如图6-15 所示。图6-15在【可编辑标签属性】对话框设置“bgcolor”为可编辑属性【任务6-2-1】基于网页0601.html创建网页模板0602.dwt2定义可编辑区域（8）将HTML 标签 的属性“bgcolor”定义为可编辑的标签属性 设置完成后，单击【可编辑标签属性】对话框中的【确定】按钮，将标签 的“背景颜色”设置为可编辑的标签属性。 页面元素的标签属性bgcolor 设置完成后，标签 中会出现“

44、bgcolor=(bgcolor)”代码。【任务6-2-1】基于网页0601.html创建网页模板0602.dwt3定义可编辑的可选区域 对于基于模板创建的网页，如果有些区域允许用户编辑该区域中的内容，同时根据事先设置的条件控制该区域显示或隐藏，则可以设置为可编辑的可选区域。 （1）选择要设置为可编辑的可选区域的区域“”。 （2）在Dreamweaver CC 主界面中，选择菜单命令【插入】【模板】【可编辑的可选区域】。或者在“插入”工具栏“常用”选项卡中，选择【模板】下拉菜单中的【可选区域】选项。弹出【新建可选区域】对话框，如图6-16 所示。图6-16 新建可选区域 对话框【任务6-2-1

45、】基于网页0601.html创建网页模板0602.dwt3定义可编辑的可选区域 （3）在【新建可选区域】对话框“基本”选项卡的“名称”文本框中输入该可编辑的可选区域的名称。如果选中“默认显示”复选框，则该可编辑的可选区域在默认情况下将在基于模板的网页中显示。 切换到“高级”选项卡，选择现有参数或输入一个表达式，确定该区域是否可见。 （4）切换到“基本”选项卡，然后单击【确定】按钮，即可定义一个可编辑的可选区域。设置完成后，页面中可编辑的可选区域有蓝色标签，标签上是可选区域的名称“IfOptionalRegion1”。 多个可编辑区域完成后，网页模板中所有的可编辑区域的名称都被显示在【修改】菜单

46、中【模板】级联菜单中，利用这些可编辑区域的名称可以快速选择可编辑区域，名称前带有标记“”的表示当前选中的可编辑区域。【任务6-2-1】基于网页0601.html创建网页模板0602.dwt4修改可编辑区域 （1）单击网页模板中可编辑区域左上角的标签，如“EditRegion1”，选中该可编辑区域。 （2）在“可编辑区域”属性面板中输入一个新的名称，按回车键确认，如图6-17 所示。图6-17“可编辑区域”的属性面板 如果想要删除可编辑区域，先单击可编辑区域的标签，选中要删除的可编辑区域，然后选择菜单命令【修改】【模板】【删除模板标记】，被选中的可编辑区域即可被删除。【任务6-2-1】基于网页0

47、601.html创建网页模板0602.dwt5修改可选区域 可选区域设置完成后，如果需要对可选区域的名称及其他参数进行修改，可以先选中可选区域，然后单击图6-18 所示的可选区域【属性】面板中的【编辑】按钮，弹出图6-16 所示的对话框，重新修改其名称或设置其参数即可。图6-17“可编辑区域”的属性面板 取消可选区域与取消可编辑区域的方法相同。保存所创建的模板文档0602.dwt。【任务6-2-2】创建基本模板的网页0602.html任 务 描 述创建基于网页模板“0602.dwt”的网页“0602.html”。修改和更新模板“0602.dwt”的属性。编辑与更新网页“0602.html”的内

48、容。对网页模板“0602.dwt”进行必要的修改，然后更新由该模板生成的网页文档“0602.html”。网页“0602.html”的浏览效果如图6-5 所示。【任务6-2-2】创建基本模板的网页0602.html1应用网页模板创建网页文档任 务 实 施 （1）在Dreamweaver CC 主界面中，选择菜单命令【文件】【新建】，弹出【新建文档】对话框，在【新建文档】对话框中依次单击选择【网站模板】【易购网】【0601】选项，如图6-19 所示。 （2）单击【创建】按钮，这样将基于该模板创建一个新的网页。 （3）将新创建的基于此模板的网页保存在文件夹“0601”中，命名为“0602.html”

49、，然后预览其效果。图6-19【新建文档】对话框中选择“网站模板”【任务6-2-2】创建基本模板的网页0602.html2修改和更新网页模板属性（1）显示或隐藏可选区域图6-20【模板属性】对话框 打开基于模板创建的网页0602.html，选择菜单命令【修改】【模板属性】，弹出图6-20所示的【模板属性】对话框，该对话框中列出了可选区域的名称和可编辑标签属性的标签名称。 在【模板属性】对话框中，单击选中一个可选区域的名称“OptionalRegion1”，并取消复选框“显示OptionalRegion1”的选中状态，单击【确定】按钮即可。即在网页0602.html不显示可选区域OptionalR

50、egion1。【任务6-2-2】创建基本模板的网页0602.html2修改和更新网页模板属性（2）设置可编辑标签属性的属性值图6-21在【模板属性】对话框中修改背景图像标签属性 打开图6-21 所示的【模板属性】对话框，在该对话框中选中可编辑标签属性的名称“background”，这时【模板属性】对话框有所变化。在“background”文本框中修改背景图像的路径和文件名为“images/title_bg.gif”，然后单击【确定】按钮即可。【任务6-2-2】创建基本模板的网页0602.html3编辑与更新基于网页模板创建的网页0602.html（1）在【文档】工具栏中将网页标题修改为“电脑产