《网页设计与制作实用教程》-第8章

《网页设计与制作实用教程》-第8章

ID:43160279

大小:2.26 MB

页数:46页

时间:2019-10-01

《网页设计与制作实用教程》-第8章_第1页
《网页设计与制作实用教程》-第8章_第2页
《网页设计与制作实用教程》-第8章_第3页
《网页设计与制作实用教程》-第8章_第4页
《网页设计与制作实用教程》-第8章_第5页
资源描述:

《《网页设计与制作实用教程》-第8章》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、第八章Dreamweaver辅助工具本章学习目标掌握摸板的基本操作及应用掌握库的基本操作及应用了解插件的含义掌握插件的使用方法1.模板的使用模板最强大的用途是:可以设计出风格一致的页面,省去重复劳动部分。一次更新多个页面。从模板创建的文档与该模板保持连接状态(除非您以后分离该文档)。可以修改模板并立即更新基于该模板的所有文档中的设计。创建模板创建可编辑区域模板的使用1.1创建模板通过DreamweaverMX2004的新建模板页来全新的创建一个模板页面把现有HTML文档通过适当的修改另存为一个模板,以使其应用

2、于其它WEB文档。建完模板后,DreamweaverMX2004会自动在站点的根目录下创建一个名为“Templates”的子目录,所有创建的模板文件都放在该目录下。返回该节选择菜单“【文件】→【新建】”,弹出“新建文档”对话框,选择“模板页”→“HTML模板”,单击“创建”按钮生成一个空的模板页面。编辑该模板页面,加入图片、文字等元素。选择菜单“【文件】→【保存】/【另存为】”,在弹出“另存为模板”对话框中输入english。返回该节注意内容的改变返回该节资源面板资源面板中直接创建模板返回该节1.2添加可编辑

3、区域定义“D:8-1-1”目录为站点根目录,打开Templates目录下的english.dwt在表格中单击鼠标右键,选择“【模板】→【新建可编辑区 域】”菜单命令返回该节在弹出的“新建可编辑区域”对话框中,输入名称“EditRegion”即可可编辑区域新建后,DreamweaverMX2004设计视图中会以蓝色边框突出显示返回该节1.3模板的使用使用模板创建页面使用模板更新网站返回该节创建页面1.【文件】→【新建】2.【资源】面板返回该节更新页面打开应用了“english”模板的页面,在【资源】面板中选择

4、“English”模板,在该模板上单击鼠标右键,在弹出的菜单中选择“更新当前页(U)”即可。返回该节在【资源】面板中选择“english”模板,在该模板上单击鼠标右键,在弹出的菜单中选择“更新站点(P)”。返回该节更新页面2.库的使用库保存了页面中的某一HTML代码片断代码复用一般把页脚的版权信息、导航条、栏目信息等做成库,同步更新所有页面库的使用创建库项目引用库项目编辑库项目重命名库项目删除库项目重新创建丢失或已删除的库项目利用库项目更新网页2.1创建库项目文档body部分中的任意元素都可创建库项目,这些元

5、素包括文本、表格、表单、Javaapplet、插件、ActiveX元素、导航条和图像等。创建方法:利用选定的内容创建库项目创建一个空白库项目利用选定的内容创建库项目打开“index.htm”文档,选择“设计”视图中的“登录”表格部分,打开[资源]面板下的[库]类,单击按钮,或单击鼠标右键,选择“新建库项(W)”,或者直接将所选的表格部分拖动到[资源]面板下的[库]类。库项目都保存为一个单独的文件(文件扩展名为.lbi)创建一个空白库项目确保没有在“文档”窗口中选择任何内容。在【资源】面板中,选择面板左侧的【库

6、】类别。单击【资源】底部的“新建库项目”按钮。一个新的、无标题的库项目将被添加到面板中的列表。为库项目取名。2.2引用库项目将鼠标光标插入点定位在“文档”窗口中。在【资源】面板中,选择面板左侧的【库】类别。选择一个库项目从【资源】面板直接拖曳到“文档”窗口中即可。或者选择一个库项目,然后单击面板底部的按钮。在从【资源】面板向外拖动该项目的同时按住Ctrl键,则插入的内容会从库项目中脱离。2.3编辑库项目在资源面板的库类别中选择库项目,单击面板底部的“编辑”按钮或双击库项目,进入库项目编辑状态编辑库项目然后保存

7、。更新库项目对话框,选择更新或 不更新使用库项 目的文档2.4重命名、删除、重建库项目在【资源】面板中,选择面板左侧的【库】类别。选择要重命名的库项目,按F2键,或单击鼠标右键,在弹出菜单中选择“编辑”,再选择“重命名”。单击面板底部的“删除”按钮,然后确认要删除该项目。或按键盘“delete”键删除该项目。打开使用了库项目的页面文档,并在页面中选择该项目。在【属性】面板中单击“重新创建”按钮2.5利用库更新网页在库面板中选择库项目,点击右键,选择“更新当前页”或者“更新站点”,更新应用该库项目的单个或所有页

8、面。3.代码清理删除一些对页面显示无效的代码或者其他文本编辑工具转换成网页生成的冗余代码。清除多余的HTML代码清除word代码实例:Word文档转化为网页3.1清除多余的HTML代码DreamweaverMX2004可以自动删除空标签,也可以改善杂乱或不可读的HTML和XHTML代码。打开一个页面文档,选择主菜单“【命令】→【清理HTML】”,弹出“清理HTML/XHTML”对话框。例如,