计算机网络与网页制作Chapter15：使用模块化技术PPT课件VIP

1、计算机网络与网页制作Chapter 15：使用模块化技术复旦大学计算机学院肖川1目标添加代码片断使用库重用一些常用项新建和修改页面模板新建和复制模板内可编辑区2效果31. 代码片断的介绍代码片断库页面内任何元素(即代码片断)可存储为库元件库是DW软件的一部分，不限于某个站点任何站点都可使用库里的代码片断通过“代码片断”面板管理库元件修改库元件不会影响已经在页面内使用的此元件实例4代码片断库类似于超级剪贴板2. 使用代码片断“代码片断”面板添加、编辑代码片断选中代码片断并拖至页面内很多现成的代码片断5代码片断库示例在面板内选中某个代码片断时，在面板的上半部显示的是当前代码片断的预览（设计或代码）

2、把代码片段拖至页面的特定位置63. 新建代码片断从“代码片断”面板直接创建新的代码片断用页面上被选中的页面元素创建代码片断7把phonetips.html的表格做成代码片断选中表格，再单击“代码片断”面板右下角的“新建代码片断”图标8自动生成“插入代码”的内容。在面板内可以改变代码片断所在文件夹。注意，库里的表格没有呈现样式。在main.html中使用新建的代码片断在页面内定位光标，再双击面板内的代码片断。9库里的代码片断并不包含CSS代码，此表格之所以有样式，是因为main.html引用了外部样式文件。修改面板里的代码不会影响页面上已经使用的代码片断104. 库和库项库是Dreamweave

3、r的另一种模块化技术，每个站点有自己的库(即站点内Library文件夹)，站点之间不能共享库。可以把任何页面元素放入库成为库项。每个库项单独地保存为一个文件，后缀名为.lbi。 (library item)添加至网页的库项称为实例。库项与其多个实例始终保持关联，修改库项会自动更新该库项的所有实例。通过面板 资源库 进行管理。11新建库项选中页面元素，面板 资源库新建库项。12Div呈现高亮黄色，表明它是库项的一个实例。插入库项1) 把库项拖至页面内2) 定位光标，在“资源”面板内选中库项，再单击“插入”按钮。若库项是AP Div则无需定位光标。13演示：分别在phonetips.html 和r

4、ecommend.html 页面内插入 GNav 库项修改库项1) 在“资源”面板内双击库项2) 在页面内选中库项的一个实例，之后在“属性”面板单击“打开”按钮来编辑库项14打开库项，不包含样式添加超链接保存时弹出“更新库项目”对话框，决定是否要把库项的改动反映到该库项的实例15了解更新时是否发生错误库项对应的全部实例自动更新16注意导航超链接路径的自动变化，因此库项对超链接导航尤其有用。把被链接的网页移到新文件夹新建文件夹GlobalNavigation把login.html拖至新文件夹后，自动弹出“更新文件”对话框。17列出了由于login.html的移动而受到影响的页面这些页面包含指向l

5、ogin.html的超链接。解除某个实例与库项的关联在页面内选中库项实例，之后在“属性”面板单击“从源文件中分离”按钮。分离后库项的更改不会影响到这个实例。18删除库项在“资源”面板内选中库项，再单击底部的“删除”图标。在面板内删除库项将自动删除Library文件夹下对应的lbi文件。删除库项不会影响页面中已有的该库项实例。195. 模板的介绍Dreamweaver的模板是用于创建其他网页的母版。当你创建一个模板时，你需要指定页面内只读区域和可编辑区域。用模板创建的网页继承了模板的全部元素，你可以修改网页的可编辑区使之包含特有的内容和元素。与库项相同，当你修改一个模板后，所有基于此模板的网页会

6、自动更新以反映模板的改动。每个站点有自己的模板库(即站点内Templates文件夹)，站点之间不能共享模板。可以把任何页面转成模板。每个模板单独地保存为一个文件，后缀名为.dwt。 (dreamweaver template)通过面板 资源模板 进行管理。20新建模板分别从category.html和phone_detail.html创建模板。先把GNav库项添加至phone_detail.html，这一步不是创建模板所必需的。打开页面文件，菜单 文件另存为模板。21模板文件将保存于Templates文件夹内，故文件中链接的相对路径需要更新。设置模板的可编辑区在“文件”面板双击模板文件或者在“

7、资源”面板双击模板均可打开模板。选中模板内页面元素，菜单 插入模板对象可编辑区域，再输入区域名称。22插入三个可编辑区域。用此模板创建的网页只有这三个区域是可修改内容的。用模板新建网页1) 在“资源”面板选中模板，再从右键快捷菜单选择“从模板新建”2) 菜单 文件新建模板中的页，再从模板列表选中模板，之后单击“创建”按钮。23保存网页24如此形状的光标表示不可编辑。这是可编辑区域表示这个网页与模板phone_detail关联。2个实例25phone1.htmlphone2.html26修改模板打开模板phone_detail，菜单 插入模板对象可编辑区域。插入重复区域用模板创建网页时，你可以多

8、次添加或重复模板的“重复区域”来显示信息。一个重复区域并非自动就是可编辑的，因此，为了在网页中可以添加或编辑重复区域的内容，你需要在重复区域内设置可编辑区域。27往category模板插入重复区域打开模板，选中表格，再菜单 插入模板对象重复区域，28在重复区域内插入可编辑区域在模板内选中页面元素，菜单 插入模板对象可编辑区域，则所选内容位于可编辑区域内。29一个模板内区域名称不能重复。在网页中编辑重复区域用category模板新建网页category_phone.html。在新建的网页中通过单击“+”按钮把重复区域Phones增加一次。30表示这个网页是用模板category创建的。用于添加、删除或者上下移动重复区域。修改页面的可编辑区域31调整重复项的上下位置32上下移动光标