网页设计与制作项目教程（第四版） 模块07高效制作风格一致的网页

网页设计与制作项目教程（第四版）模块07高效制作风格一致的网页教学课件教学目标：学习目标•理解使用模板布局网页的基本原理及优势。•熟悉并掌握库项目的创建与资产复用。•掌握利用模板进行网页批量修改的方法。模块核心本模块旨在解决大型网站开发中“风格统一”与“维护效率”两大难题。通过模板（dwt）与库（lbi），实现从“手工单页”向“工程化协作”的转型。教学要求：知识要点预览知识要点能力要求关联知识模板(Template)理解.dwt文件结构、可编辑区域原理库(Library)理解.lbi文件特征、资产重复调用具体应用掌握模板建立、库建立、批量更新网页任务引领一：散文在线站点制作任务描述：通过“库”和“模板”功能制作两个网页index.html和other.html。要求拥有一致的页头页脚，仅中部内容差异，且支持一键同步修改页头内容。核心逻辑1.提取公用模块为库项目

2.整合库项目为总模板

3.基于模板衍生内容页制作库项目：新建库项目为什么要用库？库项目是网页中的“零件”。当页头Logo需要更换时，只需修改lbi文件，全站几百个页面都能自动同步更新。菜单：“窗口”->“资源”展开资源面板。点击面板左侧“库”按钮图标。点击底部“新建库项目”按钮。命名为logo，扩展名为.lbi。新建库项目编辑按钮库项目库按钮制作库项目：设计“零件”内容双击进入logo.lbi编辑页面。插入表格，宽度。分别插入和。同理新建库项目放置版权信息。制作模板：新建HTML模板选择“文件”→“新建”菜单。类别选择“HTML模板”。保存模板：系统会自动在站点根目录创建子文件夹。文件后缀名为。警告说明保存时若提示“不含可编辑区域”，点击确定即可。这是因为目前模板是全锁定的，后续需要手动开启编辑口。专家提示：严禁随意移动模板文件严禁将.dwt文件移动到子目录之外！•Dreamweaver严格依赖文件夹管理路径。•如果将模板移动到根目录或其他位置，基于模板创建的所有网页的图片路径、超链接路径都会发生灾难性偏移。•标准规范：保持.dwt文件在Templates文件夹内，不要手动修改该目录名称。制作模板：装配库项目在模板中插入3行1列表格（860px）。光标定位第1行：点击资源面板“库”按钮->插入。光标定位第3行：插入库项目。装配原理此时模板的头和尾已经由“零件”构成。修改零件，模板会自动更新；模板更新，基于模板的页面也会随之更新。形成零件>模板>页面的层级联动。插入库项目“库”按钮制作模板：指定可编辑区域选中表格第2行单元格。菜单：“插入”→“模板”→“可编辑区域”。命名为。什么是可编辑区域？模板默认是“全保护”的。如果不设定可编辑区域，基于此模板生成的页面将无法输入任何文字。content区域就是留给内容页填写的“空白窗口”。批量生产：通过模板生成新网页菜单：“文件”→“新建”。切换至“网站模板”选项卡。选择当前站点下的现有模板。在生成的index.html的content区域插入图片和文字。深度解析：库(Library)vs模板(Template)特性库项目(.lbi)模板(.dwt)本质网页的一个局部组件（零件）网页的完整布局框架（模具）作用范围可以跨页面多次插入控制整个页面的基本结构可控性插入后不可局部修改（需改源码）预留“可编辑区域”供内容页使用存储Library文件夹Templates文件夹高效维护：库项目的修改与全局更新在资源面板双击logo.lbi进行编辑。更换Logo图片并保存。系统弹出“更新库项目”对话框。点击“更新”按钮。联动效应点击“更新”后，DW会自动检索站点中所有调用该库的HTML文件，并批量替换其内容。实现了“改一次，全站变”。快捷技巧：基于现有HTML创建模板如果已经做好了一个精美的HTML页面：打开该文档。菜单：“插入”→“模板”→“创建模板”。输入名称并保存。补做：务必为该模板添加至少一个“可编辑区域”。专家提示这种方法适合将成熟的设计方案快速固化为生产模板，避免从零开始搭建框架。项目渐近：高效制作“我心飞扬”各页任务挑战：利用Bootstrap布局创建通用模板common.dwt，并套用之前创建的所有子页面，实现全站风格统一且具备响应式特性。关键步骤•新建Bootstrap布局网页•创建响应式导航菜单•应用模板套用旧文件•解决BootstrapJS冲突步骤1：新建Bootstrap布局基础新建文档：HTML->BOOTSTRAP->使用现有文件。保存为。插入4行1列Bootstrap栅格布局。第一行：插入页头背景图bg_01.jpg。第二行：插入响应式导航组件。步骤2：转化模板与区域设定菜单：“插入”→“模板”→“创建模板”。切换至“设计视图”。选中第3行提示文本“此处为内容”。菜单：“插入”→“模板”→“可编辑区域”。命名为。视图限制注意：在“实时视图”下无法使用模板功能。必须切回传统的“设计视图”才能看到并操作模板标签。步骤3：旧文件的模板化转化打开旧的。在资源面板右击模板common->“应用”。弹出“不一致的区域名称”对话框。将原有内容精准关联到新的“自定义区域”。逻辑映射当旧页面的结构与新模板不匹配时，DW会询问原来的内容该放哪。这个过程就是“数据迁移”。专家提示：处理BootstrapJS重复引用应用模板后功能失效（如下拉菜单点不开）？•根本原因：模板中已经包含了Bootstrap的JS引用，而旧页面中也包含。重复加载会导致JS逻辑混乱。•操作规范：转化后进入代码视图，检查并删除内容页中重复的标签。•标准：全页面只应保留一套Bootstrap核心资源库。拓展训练：流行文学作品荟萃任务要求：使用表格布局，并在顶部与底部精确插入预先准备好的“库项目”。中间位置放入具体内容，实测“库修改”后的全站同步效果。回味思考：客观题检测(1)1.Dreamweaver模板文件的扩展名是？答案：C..dwt2.库项目文件的扩展名是？答案：D..lbi3.模板中的“可编辑区域”用于什么目的？答案：B.定义网页中用户可以自定义内容的部分回味思考：客观题检测(2)4.使用模板批量修改网页时，哪些网页会被更新？答案：B.所有基于该模板创建的网页5.库项目中可以保存哪些网页元素？答案：A.图像、表格、声音等常见元素回味思考：思考题深度分析Q：如何将已存在的旧网页转化为模板化页面？逻辑解析：

1.新建网页转化：可以在“新建文档”时直接选择“网站模板”新建。

2.已存网页转化：打开该网页，在“资源”面板的“模板”列表中，右击目标模板并选择“应用”。随后通过区域映射（不一致区域名称）将旧内容导入新模板