Download
1 / 38
380 likes | 521 Vues
单元 6 创建与应用模板和库. 6.4. 1.4. 1.1. 1.3. 1.2. 1.1. 1.2. 1.1. 1.1. 1.1. 1.2. 1.2. 1.2. 1.2. 6.2. 1.3. 1.3. 6.3. 1.4. 6.1. 操作准备. 操作准备. 考核评价. 操作演练. 操作演练. 操作准备. 操作演练. 操作演练. 操作准备. 技术提升. 操作准备. 技术提升. 技术提升. 操作准备. 考核评价. 操作演练. 考核评价. 操作演练. 技术提升. 操作演练.
E N D
单元6 创建与应用模板和库 6.4 1.4 1.1 1.3 1.2 1.1 1.2 1.1 1.1 1.1 1.2 1.2 1.2 1.2 6.2 1.3 1.3 6.3 1.4 6.1 操作准备 操作准备 考核评价 操作演练 操作演练 操作准备 操作演练 操作演练 操作准备 技术提升 操作准备 技术提升 技术提升 操作准备 考核评价 操作演练 考核评价 操作演练 技术提升 操作演练
使用Dreamweaver CS4提供的模板和库功能，将具有相同版面结构的页面制作成模板，再通过模板来创建其他页面。 也可以将相同的页面元素制作成库项目，并存储在库文件中以便随时调用。
【6.1 操作准备】 1．准备素材 在本地硬盘（例如D盘）中创建一个文件夹“网页设计与制作案例”，将光盘中的“单元6”（包括所有子文件夹以及文件）拷贝到该文件夹中。 2．创建站点 使用创建站点向导创建名称为“单元6”的本地站点。
3．制作用来生成网页模板的网页 创建网页文档060101.html，保存在文件夹“6-1”中，该网页主体结构主要应用Div+CSS进行布局，局部结构应用了项目列表和定义列表进行布局。 网页060101.html还应用了CSS样式对文字、标题、图片和超链接进行美化。 该网页为左右结构，通过浮动方式实现左右布局，网页的左侧版块为左浮动，右侧版块为右浮动。 CSS样式文件中的样式定义详见教材配套光盘对应的样式文件。
【6.2 操作演练】 【任务6-1】创建网页模板和基本模板的网页 【任务描述】 （1）利用网页“060101.html”创建网页模板“060101.dwt”。 （2）将网页模板“060101.dwt”中的标题文字“办公设备” 定义为可编辑区域。 （3）将网页模板“060101.dwt”中的图像“2010060901.jpg” 定义为可编辑区域。
（4）将网页模板“060101.dwt”中的区域“<div class="content_box"></div>”、“<div class= "tjcontent"></div>”、“<div class="content"> </div>”定义为可编辑区域。 （5）将区域“<div class="picrecommend"> </div>”的标签“background”和区域“<div class="pages_nav"></div>”的标签“bgcolor” 定义为可编辑的标签属性。 （6）将区域“<div class="pages_nav"></div>” 定义为可编辑的可选区域。 （7）创建基于网页模板“060101.dwt”的网页“060102.html”。
（8）修改和更新模板“060101.dwt”的属性。 （9）编辑与更新网页“060102.html”的内容。 （10）对网页模板“060101.dwt”进行必要的修改，然后更新由该模板生成的网页文档“060102.html”。 网页“060102.html”的浏览效果如图6-3所示。
【任务实施】 6.2.1 创建与编辑网页模板 （1）在Dreamweaver CS4主窗口中，单击菜单【文 件】→【另存为模板】，弹出【另存模板】对话框。 （2）在【另存模板】对话框中的“站点”下拉列表 框选择模板保存的站点，本项目选择“单元6”。 在“现存的模板”列表框中显示了当前站点中的所有模板，由于本站点暂时没有创建模板，所以显示“（没有模板）”。
在“描述”文本框中输入对模板的说明文字。 在“另存为”文本框中输入模板的名称，这里输入“0601”。 （3）设置完毕后，在【另存为模板】对话框中，单击【保存】按钮，弹出一个如图6-5所示的“要更新链接吗”提示信息对话框。 如果在该对话框中单击【是】按钮，则当前网页会被转换成模板，同时系统将自动在所选择站点的根目录下创建“Templates”文件夹，并将创建的模板文件保存在该文件夹中。
6.2.2 定义与修改可编辑区域和可选区域 1．打开网页模板文件 打开当前站点文件夹“Templates”中模板文件“060101.dwt”。 2．定义可编辑区域 （1）定义文字为可编辑区域 （2）定义图像为可编辑区域 （3）定义区域“<div class="content_box"> </div>”为可编辑区域
（4）定义区域“<div class="tjcontent"></div>”为可编辑区域 （5）定义区域“<div class="content"></div>”为可编辑区域 （6）将区域“<div class="picrecommend"></div>”的标签“background”定义为可编辑的标签属性 （7）将区域“<div class="pages_nav"></div>”的标签“bgcolor”定义为可编辑的标签属性
3．定义可编辑的可选区域 （1）选择要设置为可编辑的可选区域的区域“<div class="pages_nav"></div>”。 （2）在Dreamweaver CS4主界面中，单击菜单命令【插入】→【模板对象】→【可编辑的可选区域】。 （3）在【新建可选区域】对话框“基本”选项卡的“名称”文本框中输入该可编辑的可选区域的名称。 （4）切换到“基本”选项卡，然后单击【确定】按钮，即可定义一个可编辑的可选区域。 设置完成后，页面中可编辑的可选区域有蓝色标签，标签上是可选区域的名称“If OptionalRegion1”。
4．修改可编辑区域 （1）单击网页模板中可编辑区域左上角的标签，如“EditRegion1”，选中该可编辑区域。 （2）在“可编辑区域”属性面板中输入一个新的名称，按回车键确认。 5．修改可选区域 可选区域设置完成后，如果需要对可选区域的名称及其他参数进行修改，可以先选中可选区域，然后单击如图6-16所示的可选区域“属性”面板中的【编辑】按钮，弹出如图6-14所示的对话框，重新修改其名称或设置其参数即可。
6.2.3 基本网页模板创建网页 1．应用网页模板创建网页文档 （1）在Dreamweaver CS4主界面中，单击菜单【文 件】→【新建】，弹出【新建文档】对话框，在【新建文档】对话框中依次单击选择【模板中的页】→【单元6】→【0601】选项。 （2）单击【创建】按钮，这样将基于该模板创建一 个新的网页。 （3）将新创建的基于此模板的网页保存在站点根文件夹下的文件夹“6-1”中，命名为“060102.html”，然后预览其效果。
2．修改和更新网页模板属性 （1）显示或隐藏可选区域 （2）设置可编辑标签属性的属性值 3、编辑与更新基于网页模板创建的网页060102.html （1）在“文档”工具栏中将网页标题修改为“手机通讯 - 易购网”。 （2）将网页中的标题文字“办公设备”修改为“手机通讯”。
（3）将网页中的图像“images/img01/ 2010060901.jpg”修改为 “images/img02/ 2010060902.jpg”。 （4）在网页060102.html的区域“<div class="content_box"> </div>”、“<div class="tjcontent"></div>”、“<div class= "content"></div>”分别输入文字、插入图像和设置超链接。 保存网页060102.html，其浏览效果如图6-3所示。
6.2.4 修改网页模板并更新网页 （1）删除区域“<div class="pages_nav"></div>”的可编辑的可选区域模板标记。 （2）定义区域“<div class="pages_nav"></div>”为可选区域。 （3）单击“标准”工具栏中的【保存】按钮 ，弹出如图6-20所示的【更新模板文件】对话框，在该对话框中单击【更新】按钮，系统开始更新模板文件，并且会弹出如图6-21所示的【更新页面】对话框。
（4）在【更新页面】对话框中选中复选框“显示记录”，该对话框变成如图6-22示的形式，在其下方“状态”列表框中显示检查文件数、更新文件数等详细的更新信息。 （4）在【更新页面】对话框中选中复选框“显示记录”，该对话框变成如图6-22示的形式，在其下方“状态”列表框中显示检查文件数、更新文件数等详细的更新信息。 （5）在【更新页面】对话框中设置相应的参数，在“查看”下拉列表框中如果选择“整个站点”，则要选择需要更新的站点（如“单元6”），然后单击【完成】按钮，对基于模板创建的网页进行更新，如图6-23所示。 （6）更新完成后，单击该对话框中的【关闭】按钮，更新页面操作结束。
【6.3 技术提升】 【任务6-2】创建包含库项目和代码片断的网页060202.html 【任务描述】 （1）将网页中的版权信息区域定义为库项目footer060201.lbi。 （2）将网页060201.html中的友情链接区域转 换为库项目friend-link060201.lbi。 （3）在网页060202.html中对应位置插入库项 目footer060201.lbi和friend-link060201.lbi。
（4）将网页060201.html中顶部导航栏分别定义为代码片断topmenu和topnav。 （4）将网页060201.html中顶部导航栏分别定义为代码片断topmenu和topnav。 （5）在网页060202.html中对应位置，分别插入代码片码topmenu和topnav。 网页060202.html的浏览效果如图6-24所示。
【任务实施】 6.3.1 创建库项目 1．使用【新建文档】对话框创建库 （1）在Dreamweaver CS4主界面中，单击菜单命令【文件】→【新建】，在弹出的【新建文档】对话 框中选择“空白页”→“库项目”，如图6-25所示。然后单击【创建】按钮，创建一个空白网页。 （2）保存库项目文件。 （3）链接外部样式文件。 （4）在库项目中插入Div标签与输入文字内容。 （5）保存库文件。
2．将现有网页内容转换为库项目 （1）打开文件夹“6-2”中网页文档“060201.html”。 （2）选中该网页文档中的友情链接区域“<div id=“ friend-link"></div>”。 （3）在Dreamweaver CS4主界面中，单击菜单命令 【修改】→【库】→【增加对象到库】，如图6-27所 示，将选中的Div区域转化为库文件。 此时会出现如图6-28所示“提示信息”对话框，在该对话框中单击【确定】按钮，库项目的内容随 即会出现在“资源”面板中，等待输入新的库文件 名称。
（4）Dreamweaver CS4会把库项目文件保存在本地站点根文件夹下的“Library”子文件夹中，如果本地站点没有该文件夹，Dreamweaver CS4会自动生成这个子文件夹。
6.3.2 在网页060202.html中插入库项目 1．在网页060202.html中对应位置插入库项目footer060201.lbi （1）打开网页文档060202.html，将光标置于“</body>”之前。 （2）在Dreamweaver CS4主界面，单击菜单命令【窗口】→ 【资源】，切换到“资源”面板，也可以在“文件”面板中 直接单击“资源”选项卡切换到“资源”面板。 （3）在“资源”面板中单击左侧的【库】按钮，显示本站点所 有的库项目文件，选中要插入的库项目“friend-link060201”， 单击该面板中左下角的【插入】按钮，即可插入一个库项目。
2．在网页060202.html中对应位置插入库项目friend-link060201.lbi 将光标置于前面所插入的“友情链接”之后，在“资源”面板中选中要插入的库项目“footer060201”，然后单击该面板中左下角的【插入】按钮，即可在网页中060202.html插入另一个库项目。 保存网页060202.html，预览网页所插入的2个库项目的效果。
6.3.3 新建代码片断 （1）打开【代码片断】面板 在Dreamweaver CS4主界面中，单击菜单命令【窗口】→【代码片断】，打开如图6-35所示 的【代码片断】面板。 （2）新建代码片断文件夹 （3）创建代码片断
6.3.4 在网页060202.html中插入代码片断 1．在网页060202.html中对应位置插入代码片码topmenu 打开网页文档060202.html，切换到【代码】视 图，将光标置于Div标签“<div id="header">”的之 后，然后在【代码片断】面板选择文件夹“06”中的“topmenu”，单击【代码片断】面板左下角的【插 入】按钮，这样代码片断“topmenu”便插入到光标 所在位置。
2．在网页060202.html中对应位置插入代码片码topnav 在网页文档060202.html的【代码】视图中，将光标置于Div标签“<div class="clear"></div>”与“<div class="clear"></div>”之间，然后在【代码片断】面板文件夹“06”中的“topnav”位置单击右键，在弹出的快捷菜单中单击菜单命令【插入】，如图6-39所示，这样代码片断“topnav”便插入到光标所在位置。 保存网页文档060202.html，其浏览效果如图6-24所示。
【6.4 考核评价】 【考核任务描述】 教材配套光盘中已提供了考核评价项目所需的 起点网页文件0603.html、CSS样式表文件0603.css 和网页素材，请完成以下操作。 （1）将网页0603.html中的区域“<div id=”btm1“> </div>”和“<div id=”btm2“></div>”定义为库项目，名称分别为： “nav_bottom060301.lbi” “nav_bottom060302.lbi”
（2）将网页0603.html另存为网页模板，名称为“0603.dwt”，（2）将网页0603.html另存为网页模板，名称为“0603.dwt”， • 该模板中不包括库项目“nav_bottom060301.lbi”和“nav_bottom060302.lbi”中的内容。 • （3）在网页模板0603.dwt中将当前位置导航栏的文字“湖 • 南”、区域“<div class="b_left2 height02"> </div>”和区 • “<div class="b_right2 height02"> </div>”定义为可编辑 • 区域，名称分别为： • “EditRegion060301” • “EditRegion060302” • “EditRegion060303”
（4）在网页模板0603.dwt中将区域“<div id="bottom"> </div>”定义为可编辑的可选区域，名称为“OptionalRegion060301”。 （5）在网页模板0603.dwt中将区域“<divclass="clsname"></div>”的背景颜色定义为可编辑的标签属性。 （6）创建基于网页模板0603.dwt的网页060301.html，设置网页区域“<div class="clsname"></div>”的背景颜色为“#f2f2f2”，在该网页的区域中“<div id="bottom"> </div>”分别插入库项目“nav_bottom060301.lbi”和“nav_bottom060302.lbi”，可编辑的可选区域OptionalRegion060301设置为隐藏，其最终浏览效果如图6-40所示。
（7）创建基于网页模板0603.dwt的网页060302.html，设置网页区域“<div class="clsname"></div>”的 背景颜色为“#f2f2f2”，在该网页的区域中“<div id="bottom"> </div>”分别插入库项目“nav _bottom060301.lbi”和“nav_bottom060302.lbi”， 可编辑的可选区域OptionalRegion060301设置为 显示，在3个可编辑区域中输入新的内容，其最 终浏览效果如图6-41所示。
【评价要点】 本单元的考核评价表如表6-4所示。 【单元小结】 本单元主要使用模板和库制作网页，使用模板和库的组合可以使网站维护变得很轻松，尤其是在对一个规模较大的网站进行维护时，就更能体会使用模板的优点。 另外，通过修改库项目，可以方便地对远程网站进行更新，而不用将每一个网页文件上传到远程网站中。
