网页制作基础课件

第5章网页制作基础第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础2主要内容概述设计站点编辑网页页面布局建立超链接使用CSS样式层、行为和时间轴模板管理和发布站点《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础35.8模板创建和保存模板编辑和使用模板应用模板创建网页《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础45.8.1创建和保存模板选择“文件”/“新建”命令，打开“新建文档”对话框，在“类别”列表中选中“基本页”选项，并在“基本页”列表中选择“HTML模板”选项，单击“创建”按钮。单击“标准”工具栏上的“保存”按钮，保存在站点的Templates文件夹中。《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础55.8.1创建和保存模板选择“窗口”/“资源”命令或按F11键，打开“资源”面板。《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础65.8.2编辑和使用模板模板定义了网页的布局结构，在模板中可以进行网页编辑的各种操作，如输入文本、插入图像、设置属性等。在模板中通常只是制作出标题栏等各个网页的公共部分，把这些内容放在锁定区域中，一般放在网页的四周，而把中间部分留给各个网页安排具体的内容。一般在模板中定义可编辑区域，编辑使用模板创建的网页时，只有可编辑区域才能输入网页的内容。创建模板时，可编辑区域和锁定区域都可以更改。但是，在基于模板的文档中，模板用户只能在可编辑区域中进行更改；无法修改锁定区域。《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础75.8.2编辑和使用模板有四种类型的模板区域：可编辑区域重复区域可选区域可编辑标签属性。可选区域可编辑区域锁定区域《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础85.8.2编辑和使用模板可编辑区域可编辑区域是基于模板的文档中的未锁定区域，它是模板用户可以编辑的部分。在编辑模板时可以将模板的任何区域指定为可编辑的。如果要使模板生效，在模板中至少要包含一个可编辑区域，否则将无法编辑基于该模板的页面。《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础95.8.2编辑和使用模板选择“插入”/“模板对象”/“可编辑区域”命令，或者单击“插入”工具栏的“常用”选项卡中的“模板”按钮旁的下拉箭头，选择“可编辑区域”命令。在编辑基于模板创建的网页时，单击可编辑区域，可以将插入点定位在该区域中，输入和编辑网页内容。《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础105.8.2编辑和使用模板可选区域和可编辑的可选区域可选区域是在模板中指定为可选的部分，用于保存有可能在基于模板的文档中出现的内容（如可选文本或图像）。在基于模板的页面上，通常控制是否显示内容。有两种可选区域对象，它们是可选区域和可编辑的可选区域。在基于模板的网页中，可选区域中无法编辑内容，但可以控制显示和隐藏这个区域。在可编辑的可选区域中，可以设置是否显示或隐藏该区域，并可以编辑该区域中的内容。《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础115.8.2编辑和使用模板选择“插入”/“模板对象”/“可选区域”命令，或者单击“插入”工具栏的“常用”选项卡中的“模板”按钮旁的下拉箭头，选择“可选区域”命令。《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础125.8.2编辑和使用模板在编辑基于模板创建的网页时，默认状态下网页中将显示可选区域中的内容。如果不希望显示可选区域中的内容，可以选择“修改”/“模板属性”命令，打开“模板属性”对话框。在列表框中选中要修改属性的可选区域名称，取消选中“显示ptionalRegion”复选框，使得列表框中对应的值为“假”。单击“确定”按钮后，可选区域中的内容被隐藏。《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础135.8.2编辑和使用模板选择“插入”/“模板对象”/“可编辑的可选区域”命令，或者单击“插入”工具栏的“常用”选项卡中的“模板”按钮旁的下拉箭头，选择“可编辑的可选区域”命令。在基于模板的网页中，在可编辑的可选区域中既可以像可编辑区域那样输入和修改内容，又可以像可选区域那样选择是否显示。《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础145.8.2编辑和使用模板重复区域和重复表格重复区域是文档中设置为重复的布局部分。在模板中插入两种类型的重复区域：重复区域和重复表格。在基于模板的网页中，可以使用重复区域在网页中复制任意次数的指定区域。重复区域不是可编辑的区域，若要使得重复区域中的内容可编辑，必须在重复区域内插入可编辑区域。《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础155.8.2编辑和使用模板选择“插入”/“模板对象”/“重复区域”命令，或者单击“插入”工具栏的“常用”选项卡中的“模板”按钮旁的下拉箭头，选择“重复区域”命令。《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础165.8.2编辑和使用模板重复区域中包含了一个可编辑区域。在可编辑区域中可以输入内容，单击按钮，将在当前所选项下面添加一个重复区域项，单击按钮删除所选重复区域项。单击按钮将所选项向下移动一个位置，单击按钮将所选项向上移动一个位置。

若要剪切、复制和删除重复区域项，可以先将插入点放在重复区域中，然后选择“编辑”/“重复项”/“剪切重复项”、“复制重复项”和“删除重复项”命令。若要粘贴重复区域项，可选择“编辑”/“粘贴”命令。《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础175.8.2编辑和使用模板选择“插入”/“模板对象”/“重复表格”命令，或者单击“插入”工具栏的“常用”选项卡中的“模板”按钮旁的下拉箭头，选择“重复表格”命令。《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础185.8.3应用模板创建网页创建基于模板的网页选择“文件”/“新建”命令，打开“新建文档”对话框，单击“模板”选项卡，显示“从模板新建”对话框。《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础195.8.3应用模板创建网页在现有网页上应用模板首先在文档窗口中打开需要应用模板的网页，然后在“资源”面板中选中要应用的模板名称，将模板从“资源”面板中拖到文档窗口，或者单击“应用”按钮。此时会出现以下两种情况：如果现有的网页曾经应用过模板，则会对两个模板的可编辑区域进行比较，应用新的模板时将原先网页中的内容放入匹配的可编辑区域中。《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础205.8.3应用模板创建网页如果现有的网页是一个尚未应用模板的网页，则没有可编辑区域以进行比较，于是会出现不匹配的情况。此时将打开“不一致的区域名称”对话框。如果要继续应用新的模板，可以选择未解析的内容，然后再“将内容移到新区域”下拉列表中选择要未解析的内容移动到哪些区域，并单击“确定”按钮。

《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础215.8.3应用模板创建网页尚未应用模板的网页 应用模板后的网页《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础225.8.3应用模板创建网页在现有的网页上应用模板的另一个方法是选择“修改”/“模板”/“套用模板到页”命令。《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础235.8.3应用模板创建网页从模板中分离网页用模板设计网页时，模板中不可编辑区域被锁定，不能修改其中的内容。为了能够更改这部分内容，必须将该文档从模板中分离出来。选择“修改”/“模板”/“从模板中分离”命令。《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础245.8.3应用模板创建网页更新基于模板的网页更改模板并保存文件后，系统打开“更新模板文件”对话框，提示是否更新基于该模板的网页。《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础255.8.3应用模板创建网页选择“修改”/“模板”/“更新当前页”命令选择“修改”/“模板”/“更新页面”命令右单击模板列表，选择“更新站点”命令《大学计算机信息科技教程（第二版）》——第5章网页制作基础作业《大学计算机信息科技实验指导（第二版）》P142～P150，配套光盘的素材可从elearning下载”教材配套光盘-本课程部分.rar”。实验1：创建和应用模板实验内容A、B、C、D实验2：编辑和制作站点实验内容《大学计算机信息科技教程（第二版）》——第5章网页制作基础26作业《大学计算机信息科技实验指导（第二版）》P142～P15《大学计算机信息科技教程（第二版）》——第5章网页制作基础275.9管理和发布站点管理站点地图维护与发布站点《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础285.9.1管理站点地图要显示站点地图，必须在此之前为站点地图定义一个主页，作为站点地图的开始端。选择“站点”/“管理站点”命令。《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础295.9.1管理站点地图选择“窗口”/“文件”命令，显示“文件”面板，在“文件”面板上单击按钮单击“站点地图”按钮右下角的箭头，可以选择“仅地图”或“地图和文件”选项。《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础305.9.1管理站点地图选中“查看”/“站点地图选项”/“显示标记为隐藏的文件”命令选择“查看”/“站点地图选项”/“显示/隐藏链接”命令选中“查看”/“站点地图选项”/“显示附属文件”命令选中“查看”/“站点地图选项”/“显示网页标题”命令《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础315.9.1管理站点地图选择“查看”/“站点地图选项”/“作为根查看”命令《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础325.9.2维护与发布站点检查与修正站点链接选择“站点”/“检查站点范围的链接”命令按Ctrl+F8键《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础335.9.2维护与发布站点设置远程服务器本地和远程站点结构本地站点远程站点《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础345.9.2维护与发布站点选择“站点”/“管理站点”命令《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础355.9.2维护与发布站点上传和下载文件上传文件就是将本地站点中的文件复制到远程站点上，下载文件则将远程站点上的文件复制到本地站点。打开站点窗口，在本地站点中选中文件，单击“上传文件”按钮，当出现提示上传任何从属文件时单击“确定”按钮即可。与此相反，在远程站点中选定要下载的文件，单击“获取文件”按钮，便可以将远程站点中的文件下载到本地站点。《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础365.9.2维护与发布站点对于一些规模较大的站点，往往需要多人共同协作完成维护工作。借助于Dreamweaver的“存回”和“取出”功能，能够确保一个文件在同一时刻只能由一个人对其进行修改和编辑。在使用存回/取出系统之前，必须激活存回/取出系统。在“定义站点”对话框中，选中“启用存回和取出”复选框，