网页制作基础课件.ppt
第5章 网页制作基础,大学计算机信息科技教程（第二版）第5章 网页制作基础,2,主要内容,概述设计站点编辑网页页面布局建立超链接使用CSS样式层、行为和时间轴模板管理和发布站点,大学计算机信息科技教程（第二版）第5章 网页制作基础,3,5.8 模板,创建和保存模板编辑和使用模板应用模板创建网页,大学计算机信息科技教程（第二版）第5章 网页制作基础,4,5.8.1 创建和保存模板,选择“文件”/“新建”命令，打开“新建文档”对话框，在“类别”列表中选中“基本页”选项，并在“基本页”列表中选择“HTML模板”选项，单击“创建”按钮。单击“标准”工具栏上的“保存”按钮，保存在站点的Templates文件夹中。,大学计算机信息科技教程（第二版）第5章 网页制作基础,5,5.8.1 创建和保存模板,选择“窗口”/“资源”命令或按F11键，打开“资源”面板。,大学计算机信息科技教程（第二版）第5章 网页制作基础,6,5.8.2 编辑和使用模板,模板定义了网页的布局结构，在模板中可以进行网页编辑的各种操作，如输入文本、插入图像、设置属性等。在模板中通常只是制作出标题栏等各个网页的公共部分，把这些内容放在锁定区域中，一般放在网页的四周，而把中间部分留给各个网页安排具体的内容。一般在模板中定义可编辑区域，编辑使用模板创建的网页时，只有可编辑区域才能输入网页的内容。创建模板时，可编辑区域和锁定区域都可以更改。但是，在基于模板的文档中，模板用户只能在可编辑区域中进行更改；无法修改锁定区域。,大学计算机信息科技教程（第二版）第5章 网页制作基础,7,5.8.2 编辑和使用模板,有四种类型的模板区域：可编辑区域重复区域可选区域可编辑标签属性。,可选区域,可编辑区域,锁定区域,大学计算机信息科技教程（第二版）第5章 网页制作基础,8,5.8.2 编辑和使用模板,可编辑区域可编辑区域是基于模板的文档中的未锁定区域，它是模板用户可以编辑的部分。在编辑模板时可以将模板的任何区域指定为可编辑的。如果要使模板生效，在模板中至少要包含一个可编辑区域，否则将无法编辑基于该模板的页面。,大学计算机信息科技教程（第二版）第5章 网页制作基础,9,5.8.2 编辑和使用模板,选择“插入”/“模板对象”/“可编辑区域”命令，或者单击“插入”工具栏的“常用”选项卡中的“模板”按钮旁的下拉箭头，选择“可编辑区域”命令。在编辑基于模板创建的网页时，单击可编辑区域，可以将插入点定位在该区域中，输入和编辑网页内容。,大学计算机信息科技教程（第二版）第5章 网页制作基础,10,5.8.2 编辑和使用模板,可选区域和可编辑的可选区域可选区域是在模板中指定为可选的部分，用于保存有可能在基于模板的文档中出现的内容（如可选文本或图像）。在基于模板的页面上，通常控制是否显示内容。有两种可选区域对象，它们是可选区域和可编辑的可选区域。在基于模板的网页中，可选区域中无法编辑内容，但可以控制显示和隐藏这个区域。在可编辑的可选区域中，可以设置是否显示或隐藏该区域，并可以编辑该区域中的内容。,大学计算机信息科技教程（第二版）第5章 网页制作基础,11,5.8.2 编辑和使用模板,选择“插入”/“模板对象”/“可选区域”命令，或者单击“插入”工具栏的“常用”选项卡中的“模板”按钮旁的下拉箭头，选择“可选区域”命令。,大学计算机信息科技教程（第二版）第5章 网页制作基础,12,5.8.2 编辑和使用模板,在编辑基于模板创建的网页时，默认状态下网页中将显示可选区域中的内容。如果不希望显示可选区域中的内容，可以选择“修改”/“模板属性”命令，打开“模板属性”对话框。在列表框中选中要修改属性的可选区域名称，取消选中“显示ptionalRegion”复选框，使得列表框中对应的值为“假”。单击“确定”按钮后，可选区域中的内容被隐藏。,大学计算机信息科技教程（第二版）第5章 网页制作基础,13,5.8.2 编辑和使用模板,选择“插入”/“模板对象”/“可编辑的可选区域”命令，或者单击“插入”工具栏的“常用”选项卡中的“模板”按钮旁的下拉箭头，选择“可编辑的可选区域”命令。在基于模板的网页中，在可编辑的可选区域中既可以像可编辑区域那样输入和修改内容，又可以像可选区域那样选择是否显示。,大学计算机信息科技教程（第二版）第5章 网页制作基础,14,5.8.2 编辑和使用模板,重复区域和重复表格重复区域是文档中设置为重复的布局部分。在模板中插入两种类型的重复区域：重复区域和重复表格。在基于模板的网页中，可以使用重复区域在网页中复制任意次数的指定区域。重复区域不是可编辑的区域，若要使得重复区域中的内容可编辑，必须在重复区域内插入可编辑区域。,大学计算机信息科技教程（第二版）第5章 网页制作基础,15,5.8.2 编辑和使用模板,选择“插入”/“模板对象”/“重复区域”命令，或者单击“插入”工具栏的“常用”选项卡中的“模板”按钮旁的下拉箭头，选择“重复区域”命令。,大学计算机信息科技教程（第二版）第5章 网页制作基础,16,5.8.2 编辑和使用模板,重复区域中包含了一个可编辑区域。在可编辑区域中可以输入内容，单击 按钮，将在当前所选项下面添加一个重复区域项，单击 按钮删除所选重复区域项。单击 按钮将所选项向下移动一个位置，单击 按钮将所选项向上移动一个位置。若要剪切、复制和删除重复区域项，可以先将插入点放在重复区域中，然后选择“编辑”/“重复项”/“剪切重复项”、“复制重复项”和“删除重复项”命令。若要粘贴重复区域项，可选择“编辑”/“粘贴”命令。,大学计算机信息科技教程（第二版）第5章 网页制作基础,17,5.8.2 编辑和使用模板,选择“插入”/“模板对象”/“重复表格”命令，或者单击“插入”工具栏的“常用”选项卡中的“模板”按钮旁的下拉箭头，选择“重复表格”命令。,大学计算机信息科技教程（第二版）第5章 网页制作基础,18,5.8.3 应用模板创建网页,创建基于模板的网页选择“文件”/“新建”命令，打开“新建文档”对话框，单击“模板”选项卡，显示“从模板新建”对话框。,大学计算机信息科技教程（第二版）第5章 网页制作基础,19,5.8.3 应用模板创建网页,在现有网页上应用模板首先在文档窗口中打开需要应用模板的网页，然后在“资源”面板中选中要应用的模板名称，将模板从“资源”面板中拖到文档窗口，或者单击“应用”按钮。此时会出现以下两种情况：如果现有的网页曾经应用过模板，则会对两个模板的可编辑区域进行比较，应用新的模板时将原先网页中的内容放入匹配的可编辑区域中。,大学计算机信息科技教程（第二版）第5章 网页制作基础,20,5.8.3 应用模板创建网页,如果现有的网页是一个尚未应用模板的网页，则没有可编辑区域以进行比较，于是会出现不匹配的情况。此时将打开“不一致的区域名称”对话框。如果要继续应用新的模板，可以选择未解析的内容，然后再“将内容移到新区域”下拉列表中选择要未解析的内容移动到哪些区域，并单击“确定”按钮。,大学计算机信息科技教程（第二版）第5章 网页制作基础,21,5.8.3 应用模板创建网页,尚未应用模板的网页应用模板后的网页,大学计算机信息科技教程（第二版）第5章 网页制作基础,22,5.8.3 应用模板创建网页,在现有的网页上应用模板的另一个方法是选择“修改”/“模板”/“套用模板到页”命令。,大学计算机信息科技教程（第二版）第5章 网页制作基础,23,5.8.3 应用模板创建网页,从模板中分离网页用模板设计网页时，模板中不可编辑区域被锁定，不能修改其中的内容。为了能够更改这部分内容，必须将该文档从模板中分离出来。选择“修改”/“模板”/“从模板中分离”命令。,大学计算机信息科技教程（第二版）第5章 网页制作基础,24,5.8.3 应用模板创建网页,更新基于模板的网页更改模板并保存文件后，系统打开“更新模板文件”对话框，提示是否更新基于该模板的网页。,大学计算机信息科技教程（第二版）第5章 网页制作基础,25,5.8.3 应用模板创建网页,选择“修改”/“模板”/“更新当前页”命令 选择“修改”/“模板”/“更新页面”命令 右单击模板列表，选择“更新站点”命令,作业,大学计算机信息科技实验指导（第二版）P142P150，配套光盘的素材可从elearning下载”教材配套光盘-本课程部分.rar”。实验1：创建和应用模板实验内容A、B、C、D实验2：编辑和制作站点实验内容,大学计算机信息科技教程（第二版）第5章 网页制作基础,26,大学计算机信息科技教程（第二版）第5章 网页制作基础,27,5.9 管理和发布站点,管理站点地图维护与发布站点,大学计算机信息科技教程（第二版）第5章 网页制作基础,28,5.9.1 管理站点地图,要显示站点地图，必须在此之前为站点地图定义一个主页，作为站点地图的开始端。选择“站点”/“管理站点”命令。,大学计算机信息科技教程（第二版）第5章 网页制作基础,29,5.9.1 管理站点地图,选择“窗口”/“文件”命令，显示“文件”面板，在“文件”面板上单击 按钮 单击“站点地图”按钮右下角的箭头，可以选择“仅地图”或“地图和文件”选项。,大学计算机信息科技教程（第二版）第5章 网页制作基础,30,5.9.1 管理站点地图,选中“查看”/“站点地图选项”/“显示标记为隐藏的文件”命令选择“查看”/“站点地图选项”/“显示/隐藏链接”命令 选中“查看”/“站点地图选项”/“显示附属文件”命令选中“查看”/“站点地图选项”/“显示网页标题”命令,大学计算机信息科技教程（第二版）第5章 网页制作基础,31,5.9.1 管理站点地图,选择“查看”/“站点地图选项”/“作为根查看”命令,大学计算机信息科技教程（第二版）第5章 网页制作基础,32,5.9.2 维护与发布站点,检查与修正站点链接 选择“站点”/“检查站点范围的链接”命令按Ctrl+F8键,大学计算机信息科技教程（第二版）第5章 网页制作基础,33,5.9.2 维护与发布站点,设置远程服务器本地和远程站点结构,大学计算机信息科技教程（第二版）第5章 网页制作基础,34,5.9.2 维护与发布站点,选择“站点”/“管理站点”命令,大学计算机信息科技教程（第二版）第5章 网页制作基础,35,5.9.2 维护与发布站点,上传和下载文件 上传文件就是将本地站点中的文件复制到远程站点上，下载文件则将远程站点上的文件复制到本地站点。打开站点窗口，在本地站点中选中文件，单击“上传文件”按钮，当出现提示上传任何从属文件时单击“确定”按钮即可。与此相反，在远程站点中选定要下载的文件，单击“获取文件”按钮，便可以将远程站点中的文件下载到本地站点。,大学计算机信息科技教程（第二版）第5章 网页制作基础,36,5.9.2 维护与发布站点,对于一些规模较大的站点，往往需要多人共同协作完成维护工作。借助于Dreamweaver的“存回”和“取出”功能，能够确保一个文件在同一时刻只能由一个人对其进行修改和编辑。在使用存回/取出系统之前，必须激活存回/取出系统。在“定义站点”对话框中，选中“启用存回和取出”复选框，下方显示“取出名称”和“电子邮件地址”文本框。当文件被取出时，站点窗口中被取出的文件名旁将显示“取出名称”文本框中输入的名称，用于识别该文件的最终版本所在位置，以便于其他成员了解和使用。,大学计算机信息科技教程（第二版）第5章 网页制作基础,37,5.9.2 维护与发布站点,选中文件，单击“取出”按钮，出现“相关文件”对话框，单击“是”按钮将相关文件随选定文件一起下载，单击“否”按钮则禁止下载相关文件。当文件图标后面显示一个绿色标记，表示文件被取出，小组其他成员只能读该文件，不能对其修改。若显示一个绿色标记，则表示文件被小组其他成员取出，不能修改。对取出的文件进行编辑和修改以后，单击“存回文件”按钮，将文件存回服务器。此时，文件又可以被其他成员取出和编辑。在本地站点中，存回的文件变成只读文件，以免他人在取出文件时本人去修改该文件。,大学计算机信息科技教程（第二版）第5章 网页制作基础,38,5.9.2 维护与发布站点,除了使用Dreamweaver发布站点，也可以使用专业的FTP 软件将本地站点的文件上传到远程站点，以实现发布站点的目的。,作业,从elearning网站下载“网络14作业-素材.rar”,内含题目要求。,大学计算机信息科技教程（第二版）第5章 网页制作基础,39,
