网页制作实验指导书 教学专用.doc

网页制作实验指导书第一章 网页制作开发工具的基本操作实验1.1 Dreamweaver 8软件的基本操作【相关知识】1. Dreamweaver8相对于其他以前的版本增加和增强的功能有：支持XML数据、增加样式呈现工具栏、增强CSS设计、增加代码折叠功能。2. Dreamwaver 8支持Windows和Macintosh两种操作系统。3. 在Dreamweaver 8中可以使用HTML、CSS、XML等多种文件类型，主要的文件类型是HTML文件，可以使用.html或.htm扩展名保存HTML文件。一、实验目的和要求 学会Dreamweaver 8的安装和卸载的方法。二、实验步骤1. 安装Dreamwaver 8（1）运行，打开安装向导对话框。（2）单击下一步按钮，打开安装向导的许可证协议页面。（3）选中我接受该许可证协议中的条款，单击下一步按钮，打开选择安装路径的对话框。（4）可以通过选中创建快速启动栏快捷方式或在桌面上创建快捷方式复选框来创建快速启动栏快捷图标或桌面快捷图标，单击更改按钮，打开更改当前目的地文件夹页面。（5）在文件夹名称文本框中输入新的文件夹路径，单击确定按钮，返回安装路径对话框，单击下一步，打开默认的文件类型对话框。（6）单击下一步按钮，打开已做好安装程序的准备对话框。（7）单击安装按钮，开始安装Dreamweaver 8，安装过程会持续几分钟，然后显示完成Dreamweaver 8 安装工作对话框，如图1-1所示。（8）单击完成按钮，完成Dreamweaver 8的安装工作。2. 卸载Dreamwaver 8（1）在开始菜单中选择控制面板命令后，打开相应面板。（2）选择添加/删除程序命令后，打开相应面板。（3）在添加或删除程序对话框的当前安装的程序列表中选择Micromedia Dreamweaver 8一项，单击删除按钮。（4）询问是否确认删除，选择“是”后，开始卸载Dreamweaver 8。实验1.2 Fireworks 8软件的基本操作【相关知识】1. Fireworks 8是一款专门针对Web图像设计而开发的软件，可以用来创建和编辑网页图形，对其进行动画处理，添加高级交互功能以及优化图像等。2. Fireworks 8是一个将矢量图像处理和位图图像处理合二为一的应用程序，可以直接在位图图像状态和矢量图像状态之间进行切换，避免了图像在多个应用程序之间的来回迁移。3. Fireworks 8相对以前版本，增加了许多友好、高效的新特性，主要体现在优化、集成的工作流程、简而不繁的创作过程以及工作流程的改进等方面。一、实验目的和要求 学习Fireworks 8的安装和卸载方法。二、实验步骤1. 安装Fireworks 8（1）运行，打开安装向导对话框。（2）其余步骤与安装Dreamweaver类似，略。2. 卸载Fireworks 8步骤与卸载Dreamweaver类似，略。实验1.3 Flash 8软件的基本操作【相关知识】1. Flash 8适合于制作图像质量高、体积小、适合网络传输的动画，而且还可以利用其独特的动作脚本创作复杂的应用程序。2. Flash 8相对以前的版本增加的功能有：自定义缓动控制、图形效果滤镜、混合模式、位图平滑、改进的文本消除锯齿功能、新的视频编码器 、视频Alpha通道支持。3. Flash 8要求显示器的分辨率在800*600以上。4. 通常一个Flash动画只应用一个场景，但若动画长度过于庞大或者动画的图层和要素过多，则可创建多个场景，并在场景中分别制作动画的不同部分，便于动画的制作和管理。一、实验目的和要求 学习Flash 8的安装与卸载方法。二、实验步骤1. 安装Flash 8（1）运行，打开安装向导对话框。（2）其余步骤与安装Dreamweaver类似，只是在第（3）步后会打开是否安装Macromedia Flash Player对话框，选择下一步即可。2. 卸载Flash 8步骤与卸载Dreamweaver类似，略。第二章 HTML基础实验2.1 HTML中的结构标记【相关知识】1. HTML即超文本标记语言，是一种用来制作超文本文档的简单标记语言，是WWW的描述语言。2. HTML超文本文档分为头和主体两部分。文档头是对该文档进行的必要定义，文档体是要显示的信息。3. 几乎任何的文字编辑器都可以用来编写HTML文件，如记事本、写字板等，只要将文件存成ASCII纯文本格式，并以.htm或.html为扩展名即可。4. HTML语言是在Dreamweaver 8的代码窗口中编写的。一、实验目的和要求 1. 掌握Dreamweaver 8中编写代码的方法。2. 掌握HTML超文本文档的基本结构和编写方法。二、实验步骤1. HTML的基本结构在Dreamweaver 8的代码窗口中，写入HTML的基本结构代码，如下所示。 选择文档工具栏中的图表后单击预览在IEexplore 6.0或者直接单击F12命令，可预览效果。2. 网页头部标记在Dreamweaver 8的代码窗口中，增加网页头部代码，由、标识，如下所示，预览效果。 网页头部信息 3. 网页主体标记在Dreamweaver 8的代码窗口中，增加网页主体代码，由、标识，如下所示。 网页头部信息 网页主体信息 单击F12命令，可在浏览器中预览效果。【操作技巧与注意事项】1. HTML的两大结构部分都要方在 之间。2. 编写HTML代码时大小写的效果是一样的。实验2.2 HTML中的格式标记【相关知识】1. HTML提供了6个等级的标题标记，n越小，标题字号就越大。2. 换行标记是一个单标记，表示换行。3. 段落标记有一个ALIGN属性，用来指明字符显示的对齐方式，一般值有CENTER、LEFT、RIGHT三种。4. 水平线标记有四个属性：size表示水平线的宽度；width表示水平线的长；align表示水平线的对齐方式，有center、left、right三种；noshade表示线段无阴影，为实心线段。一、实验目的和要求 1. 掌握标题、换行、段落标记的HTML编写方法。2. 掌握水平线标记的HTML编写方法。二、实验步骤1. 标题标记在Dreamweaver 8的代码窗口中，在、中增加HTML的标题标记代码，如下所示。 网页头部信息 网页主体信息 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 单击F12命令，可在浏览器中预览效果。2. 换行标记在Dreamweaver 8的代码窗口中，在、中增加换行标记的代码，如下所示。第一阶段： 2008年6月2008年9月 第二阶段： 2008年10月2008年12月 第三阶段： 2009年1月2009年4月单击F12命令，可在浏览器中无换行标记和有换行标记的预览效果。3. 段落标记在Dreamweaver 8的代码窗口中，在、中增加段落标记的代码，如下所示。 第一阶段： 2008年6月2008年9月 第二阶段： 2008年10月2008年12月 第三阶段： 2009年1月2009年4月单击F12命令，可在浏览器中预览效果。4. 段落标记属性在Dreamweaver 8的代码窗口中，在、中增加段落标记属性的代码，如下所示。 第一阶段： 2008年6月2008年9月 第二阶段： 2008年10月2008年12月 第三阶段： 2009年1月2009年4月单击F12命令，可在浏览器中预览效果。5. 水平线标记在Dreamweaver 8的代码窗口中，在、中增加水平线标记代码，如下所示。 网页头部信息 网页主体信息 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 第一阶段： 2008年6月2008年9月 第二阶段： 2008年10月2008年12月 第三阶段： 2009年1月2009年4月 单击F12命令，可在浏览器中预览效果。6. 水平线标记属性在Dreamweaver 8的代码窗口中，在、中增加水平线标记属性代码，如下所示。 第一阶段： 2008年6月2008年9月 第二阶段： 2008年10月2008年12月 第三阶段： 2009年1月2009年4月 单击F12命令，可在浏览器中预览效果。【操作技巧与注意事项】1. 在编写HTML时不必担心段落过长的部分会被浏览器遮住，因为每当浏览器缩小时，浏览器会自动将右边的文字转移到下一行。2. HTML标记属性需要写在标记字符的后面，的里面。3. HTML格式标记应写在网页主体标记 中。实验2.3 HTML中的超级链接标记与图像标记【相关知识】1. HTML中的超级链接标记分为三种：URL链接、本地链接、目录链接。2. 一个超级链接的基本格式是： 链接文字 3. 插入图像链接的格式为：一、实验目的和要求 1. 掌握超级链接标记中的URL链接、本地链接、目录链接的方法。2. 掌握插入图像标记方法。二、实验步骤1. 超级链接标记中的URL链接在Dreamweaver 8的代码窗口中，在HTML代码中插入超级链接标记，如下所示。 新浪 F12命令，可在浏览器中预览效果。点击“新浪”即可打开网页。2. 超级链接标记中的本地链接在Dreamweaver 8的代码窗口中，在HTML代码中插入超级链接标记，如下所示。 相对路径 绝对路径 F12可在浏览器中预览效果。点击“相对路径”和“绝对路径”都可打开E:mysiteindex.html网页。3. 超级链接标记中的目录链接在Dreamweaver 8的代码窗口中，在HTML代码中插入超级链接标记，如下所示。 游戏 单击F12命令，可在浏览器中预览效果。点击“游戏”即可打开D:游戏。4. 插入图像标记在Dreamweaver 8的代码窗口中，在HTML代码中插入超级链接标记，如下所示，F12可预览效果。 【操作技巧与注意事项】1. 超级链接中的目录链接只能打开目录文件夹，而无法打开其中的相关文件。2. 超级链接中的本地链接中只能打开网页，并且在网页名称后面要加上后缀.htm或.html。3. 图像标记中src后面的图像路径要写清楚，特别是该图像不是在默认文件夹下的时候。4. 在链接的各个要素中，链接地址最重要，一旦路径出错，该链接就无法从用户端取得。第三章 Dreamweaver网页设计实验3.1 本地站点管理【相关知识】1. 站点是构建在网络上、具有独立名称的逻辑上的独立体。大到一个网站，小到一个网页。2. 通常将存储于Internet服务器上的站点和相关文档称为远程站点。将存储于本地计算机上的站点和相关文档称为本地站点。在网站建设中，一般的步骤是：先在本地计算机上创建本地站点，然后再将本地站点的相关文档通过FTP等方式上传到服务器上。3. 为了有效地管理站点中的文件，在制作网页之前应先规划站点的目录结构，然后定义一个站点，将站点中的全部文件分门别类地放在不同的文件夹下。一、实验目的和要求1. 掌握创建本地站点的方法。2. 掌握编辑和删除本地站点的方法。3. 掌握在本地站点中新建、复制、粘贴、删除和重命名文件夹方法。4. 掌握在本地站点中新建、复制、粘贴、删除和重命名文件的方法。二、实验步骤1. 创建本地站点（1）单击【站点】【新建站点】菜单命令，打开站点定义向导。切换到【基本】选项卡下，输入站点名称为“NewSite”。单击【下一步】按钮。（2）选中【否，我不想使用服务器技术】选项。单击【下一步】按钮。（3）选中【编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）】选项。单击【浏览】按钮设置将文件存储在计算机上的位置。单击【下一步】按钮。（4）在【您如何连接到远程服务器】下拉列表中选择“无”。单击【下一步】按钮。（5）检查对话框中所设置的信息是否正确。如果有错误，可以单击【上一步】按钮，修改本地站点设置信息。如果正确，则单击【完成】按钮。2. 管理本地站点（1）单击【站点】【管理站点】菜单命令，打开【管理站点】对话框。单击【编辑】按钮可以对已有站点重新进行编辑。（2）打开【站点定义】对话框，切换到【高级】选项卡下。在【分类】列表框中选择【本地信息】选项。可以设置默认图像文件夹、链接相对于文档还是站点根目录、HTTP地址等内容。在【分类】列表框中选择【远程信息】选项。在【访问】下拉列表中选择“FTP”，可以设置FTP主机名、主机目录、登录用户名、密码等内容。单击【测试】按钮，可以检查是否能登录到指定主机。在【分类】列表框中选择【测试服务器】选项。可以设置服务器模型、访问方式并进行测试。（3）在【管理站点】对话框中，单击【复制】、【删除】、【导入】、【导出】按钮可以对已有站点进行管理。单击【完成】按钮可以关闭【管理站点】对话框。3. 创建文件夹（1）打开【文件】浮动面板，选中“NewSite”本地站点。（2）在面板的空白处单击鼠标右键，在弹出的快捷菜单中选择【新建文件夹】菜单命令，输入文件夹名称“web”。（3）按照同样的方法，新建文件夹“image”。4. 创建文件（1）打开【文件】浮动面板。选中文件夹“web”，单击鼠标右键，在弹出的快捷菜单中选择【新建文件】菜单命令，输入文件名“index.html”。（2）按照同样的方法，新建文件“main.html”。5. 编辑文件夹和文件打开【文件】浮动面板，选中文件夹或文件，单击鼠标右键，在弹出的快捷菜单中选择【编辑】菜单命令，可以对文件夹或文件进行剪切、复制、粘贴、删除、重命名操作。6. 显示站点地图一旦对站点中的文件建立超链接，就可以非常直观地在站点地图中看到各网页的链接关系。打开【文件】浮动面板，单击【展开以显示本地和远端站点】按钮可以展开或折叠站点地图。打开的窗口中左边是站点地图。右边是站点文件的目录结构。【操作技巧与注意事项】1. 尽量使用小写英文字母给站点、站点中的文件夹、文件命名。2. 应将网页文件按照类型、用途等保存在不同的文件夹中。实验3.2 制作简单网页【相关知识】1. 网页就是在浏览器上看到的一个一个的页面。它们都是用HTML的文件格式来表示的。2. 在页面属性中，可以对网页的标题、背景颜色等进行设置。3. 在HTML文档中，文件头和标签之间的内容在网页中是看不到的。可以在文件头信息中插入META、关键字、说明等。META元素用于描述网页文件自身的信息。在搜索引擎中，检索信息都是通过输入关键字来实现的。4. 在历史面板中，按照操作的顺序记录了使用者在文档窗口中的所有操作。使用历史面板可以非常方便地撤销以前的操作或再次执行某些操作。一、实验目的和要求1. 熟悉Dreamweaver工作环境。2. 掌握创建网页文档的方法。3. 掌握页面属性设置的方法。4. 掌握在页面中插入和编辑文本的方法。5. 掌握在页面中创建项目列表的方法。二、实验步骤1. 新建一个网页文档启动Dreamweaver。单击【文件】【新建】菜单命令，新建一个网页文档。2. 设置页面属性（1）单击【修改】【页面属性】菜单命令，打开【页面属性】对话框。（2）在【分类】列表框中选择【外观】，设置页面【字体】为“宋体”；字体【大小】为“中”；【文本颜色】为“#0033FF”；【背景颜色】为“#FFFFCC”。（3）在【分类】列表框中选择【标题/编码】选项，设置【标题】为“我的第一个网页”。（4）单击【确定】按钮。3. 格式化文本（1）在文档的第1行输入“网页制作课程介绍”。（2）选中所有文字，在属性面板的【字体】下拉列表中选择“黑体”；在【大小】下拉列表中选择“大”；单击【居中对齐】按钮。（3）如果字体下拉列表中没有“黑体”，则单击【字体】下拉列表中的【编辑字体列表】选项，打开【编辑字体列表】对话框。（4）在对话框的【可用字体】列表中选中“黑体”，单击按钮，将“黑体”添加到【选择的字体】列表中。单击【确定】按钮，将“黑体”添加到字体下拉列表中。4. 创建项目列表（1）在文档的第2行输入“网页布局软件Dreamweaver”。第3行输入“图像处理软件Fireworks”。第4行输入“动画制作软件Flash”（2）选中第2-4行所有文字，在属性面板中单击【项目列表】按钮。创建项目列表。5. 添加特殊网页元素（1）将光标放在第1行末尾处，单击【插入】【日期】菜单命令，打开【插入日期】对话框。在对话框的【星期格式】下拉列表中选择“星期四，”；在【日期格式】列表中选择“1974年3月7日”；在【时间格式】下拉列表中选择“10:18 PM”；选中【储存时自动更新】复选项。单击【确定】按钮。插入当前系统日期和时间，并且在文档每次修改后都会自动更新插入的日期和时间。（2）将光标放在第1行末尾处，单击回车键，将光标放在第2行起始处。（3）单击【插入】【HTML】【水平线】菜单命令，在文档中插入一条水平线。（4）选中该水平线，在属性面板中，设置水平线的【宽】为“700像素”；【高】为“5像素”；在【对齐】下拉列表中选择“居中对齐”；设置【阴影】复选项为不选中。6. 使用颜色面板在网页设计中，很多场合都需要使用颜色面板设置颜色，对颜色面板的操作方法是相同的。这里以设置文本的颜色为例进行说明。（1）选中文本，在属性面板中，单击【文本颜色】按钮，打开颜色面板，如图3-1所示。图3-1 颜色面板（2）选取一种颜色。如果颜色面板中没有符合需要的颜色，可以单击颜色面板上的【系统颜色拾取器】按钮，打开【颜色拾取器】面板，自己拾取一种颜色。7. 插入文件头信息（1）单击【插入】【HTML】【文件头标签】【META】菜单命令，打开【META】对话框。在对话框的【属性】下拉列表中选择“名称”；设置【值】为“Content-Type”；设置【内容】为“text/html;charset=gb2312”。单击【确定】按钮，即可设置META元素。（2）单击【插入】【HTML】【文件头标签】【关键字】菜单命令，打开【关键字】对话框。在文本框中输入关键字。多个关键字之间用逗号分隔。单击【确定】按钮，即可插入关键字，实现按关键字对网站信息的搜索。（3）单击【插入】【HTML】【文件头标签】【说明】菜单命令，打开【说明】对话框。在文本框中输入说明文字。单击【确定】按钮，即可插入说明。（4）单击【插入】【HTML】【文件头标签】【刷新】菜单命令，打开【刷新】对话框。设置【延迟】为“500秒”；在【操作】处选中“刷新此文档”。单击【确定】按钮，即可实现对页面的自动定时刷新。8. 使用历史面板（1）单击【窗口】【历史记录】菜单命令，打开【历史记录】面板。拖动【历史记录】面板上的滑块，可以撤销若干操作。回到操作前的状态。（2）按住【Shift】键，单击【历史记录】面板上的多个记录。单击【历史记录】面板右上角的按钮，弹出快捷菜单。选择【重播步骤】菜单命令，可以再次执行这些操作。（3）单击【历史记录】面板右上角的按钮，弹出快捷菜单。选择【清空历史记录】菜单命令，可以清空所有历史记录。9. 保存网页文档单击【查看】【工具栏】【标准】菜单命令，添加标准工具栏。在标准工具栏上单击【保存】按钮。文件命名为index.html，将网页文档保存。10. 预览网页单击【F12】，或者单击【文件】【在浏览器中预览】【IExplore 6.0】菜单命令，在浏览器中打开网页，可以预览设计效果。【操作技巧与注意事项】1. 在设置页面属性时，一般将左右边距都设置为“0”。使得页面不会有太多空白区。2. 文件头信息还包括基础和链接等。它们在网页中是不可见的。实验3.3 超链接和导航条【相关知识】1. URL（Uniform Resource Locators）的中文全称是“统一资源定位器”。它的功能是提供一种在Internet上查找任何信息的标准方法。2. 超链接是网页中由一个地方跳转到另一个地方、网页、网站或文件的指针。3. 绝对路径提供链接目标端点所需的完整的URL地址，包括使用的协议类型。4. 相对路径是目标端点与源端点之间的相对位置，它的参考点是源端点，与协议类型、网址和根目录的位置无关。5. 基于根目录的路径可以看作是一个基于本网站的根目录的相对路径，通常用一个“/”表示根目录。不管源端点在哪个文件中，都可以使用正确的路径链接到指定的位置。【实验3.3-1】一、实验目的和要求1. 掌握创建文本超链接的方法。2. 掌握创建图像超链接的方法。3. 掌握创建电子邮件超链接的方法。4. 掌握创建锚记超链接的方法。5. 掌握设置超链接属性的方法。二、实验步骤1. 新建一个网页文档启动Dreamweaver。单击【文件】【新建】菜单命令，新建一个网页文档。2. 创建文本超链接（1）在网页中输入“文本超链接”。选中这些文字。（2）打开属性面板，执行以下操作之一： 在【链接】选项处直接输入链接的URL。 单击【链接】选项后面的【浏览】按钮，打开【选择文件】对话框，选中要链接的文件。 直接拖动【链接】选项后面的【指向文件】按钮 到站点中要链接的文件上。（3）在属性面板的【目标】下拉列表中选择“_blank”，在新的浏览器窗口中打开目标网页。3. 创建图像超链接（1）在网页中单击【插入】【图像】菜单命令，选择一幅图像，插入到网页中，并将其选中。（2）打开属性面板，执行以下操作之一： 在【链接】选项处直接输入链接的URL。 单击【链接】选项后面的【浏览】按钮，打开【选择文件】对话框，选中要链接的文件。 直接拖动【链接】选项后面的【指向文件】按钮 到站点中要链接的文件上。（3）在属性面板的【目标】下拉列表中选择“_blank”；在【替换文本】处输入“图像超链接”。4. 创建电子邮件超链接（1）单击工具栏中的【电子邮件链接】按钮，或者单击【插入】【电子邮件链接】菜单命令。打开【电子邮件链接】对话框。（2）在对话框的【文本】处输入链接提示文字“联系我们”；在【E-Mail】文本框中输入E-Mail地址“”。（3）在属性面板的【目标】下拉列表中选择“_blank”。5. 创建锚记超链接（1）在网页中，将插入点放置到要创建锚记的位置上。（2）单击工具栏中的【命名锚记】按钮，或者单击【插入】【命名锚记】菜单命令。打开【命名锚记】对话框。在【锚记名称】文本框中输入锚记名称“anchor”。单击【确定】按钮，在文档中出现一个锚标记。（3）选中要创建链接的文本，在属性面板的【链接】文本框中输入锚记的超链接地址。如果锚记在当前文档中，则输入“#anchor”；如果锚记不在当前文档中，则输入链接文档的URL+“#anchor”。6. 设置超链接的属性（1）单击【修改】【页面属性】菜单命令，打开【页面属性】对话框。（2）在【分类】列表中选中【链接】选项。在【链接字体】下拉列表中选择“黑体”；在【大小】下拉列表中选择“中”；设置【链接颜色】为“#0033FF”；设置【已访问链接】颜色为“#999999”；在【下划线样式】下拉列表中选择“始终无下划线”。【实验3.3-2】一、实验目的和要求掌握检查链接的方法。二、实验步骤1. 打开网页单击【文件】【打开】菜单命令，打开实验3.3-1制作的网页“link.html”。2. 检查链接（1）执行以下操作之一，打开【链接检查器】面板。 单击【站点】【检查站点范围的链接】菜单命令。 打开【文件】浮动面板，选中站点。单击鼠标右键，弹出快捷菜单，选择【检查链接】【整个本地站点】菜单命令。（2）在【链接检查器】面板上单击【检查链接】按钮，在弹出的快捷菜单中选择“检查整个当前本地站点的链接”。如图3-2所示。图3-2 【检查链接】按钮的快捷菜单（3）在【链接检查器】面板上，选中【显示】下拉列表中的【断掉的链接】选项，在【链接检查器】面板上立刻可以显示检查结果。如图3-3所示。双击【断掉的链接】列表中的文件，立刻将该文件打开，这时可以直接修改链接URL地址。图3-3 【链接检查器】面板【实验3.3-3】一、实验目的和要求掌握制作导航条的方法。二、实验步骤1. 新建一个网页文档启动Dreamweaver。单击【文件】【新建】菜单命令，新建一个网页文档。2. 插入导航条（1）制作5个大小、风格相同的关于“新闻资讯”、“公司简介”、“产品项目”、“合作伙伴”、“招聘信息”的图片。每个图片还要制作出四种不同的效果，为原始图像、鼠标经过图像、按下图像和按下时鼠标经过图像四种状态服务。（2）将光标放在网页上要插入导航条的位置上，单击【插入】【图像对象】【导航条】菜单命令，或者单击工具栏中的【图像】按钮，在弹出的快捷菜单中选择【导航条】菜单命令，打开【插入导航条】对话框。（3）单击【确定】按钮，添加导航条项目，输入如表3-1所示的导航条数据。其中图像文件可以单击【浏览】按钮进行选择。表3-1 导航条项目数据项目名称状态图像按下图像替换文本按下时，前往的URL新闻资讯Image1.jpgdownImage1.jpg新闻资讯dh1.html公司简介Image2.jpgdownImage2.jpg公司简介dh2.html产品项目Image3.jpgdownImage3.jpg产品项目dh3.html合作伙伴Image4.jpgdownImage4.jpg合作伙伴dh4.html招聘信息Image5.jpgdownImage5.jpg招聘信息dh5.html（4）单击【确定】按钮，在网页上插入一个导航条。3. 修改导航条（1）选中导航条，单击【修改】【导航条】菜单命令，打开【修改导航条】对话框。（2）对导航条的内容进行编辑。【操作技巧与注意事项】1. 创建超链接最重要的是正确地设置其URL。设置时注意选择合适的路径类型。2. 在插入导航条时，必须输入【状态图像】。3. 在属性面板中，【目标】选项决定目标网页在哪个浏览器窗口中打开。选项的含义如下： “_blank”表示在新的未命名浏览器窗口中打开目标网页。 “_parent”表示在父框架集或包含该链接的框架窗口中打开目标网页。 “_self”表示在与该链接相同的浏览器窗口中打开目标网页。 “_top”表示在整个浏览器窗口中打开目标网页，并删除所有框架。实验3.4 模板的使用【相关知识】1. 模板是一种特殊的文档。可以按照模板创建新的网页。模板可以反复使用，减少了一些重复的工作，大大提高了网页制作的效率。而且使网页具有统一的风格。2. 模板中应包含一个或多个可编辑区域。使用模板创建网页后，模板部分不能编辑，只能在可编辑区域中添加网页元素。一、实验目的和要求1. 掌握创建模板的方法。2. 掌握使用模板创建新文档的方法。3. 掌握在现有文档上应用模板的方法。二、实验步骤1. 创建新模板（1）单击【文件】【新建】菜单命令，打开【新建文档】对话框。切换到【常规】选项卡下。（2）在【类别】列表框中选择“模板页”；在【基本页】列表框中选择“HTML模板”。（3）单击【创建】按钮，新建一个模板。2. 编辑模板（1）单击【常用插入栏】上的【表格】按钮，打开【表格】对话框。设置【行数】为“1”；【列数】为“1”；【表格宽度】为“700像素”。单击【确定】按钮，在网页上插入一个表格。（2）选中表格，在属性面板中设置【背景颜色】为“#00CCFF”；在【对齐】下拉列表中选择“居中对齐”。（3）将光标放在网页上要插入可编辑区域的位置上。单击【插入】【模板对象】【可编辑区域】菜单命令，打开【新建可编辑区域】对话框。在【名称】文本框中输入可编辑区域的名称为“EditRegion1”。单击【确定】按钮，在网页上插入一个可编辑区域。（4）单击【标准工具栏】上的【保存】按钮，打开【另存为模板】对话框。在【站点】下拉列表中选择站点名称；在【另存为】文本框中输入模板的名称为“master”。单击【确定】按钮，保存模板。3. 使用模板创建新文档（1）单击【文件】【新建】菜单命令，切换到【模板】选项卡下。打开【从模板新建】对话框。（2）在【模板用于】列表中选择包含模板的站点；在【站点】列表中选择站点中的模板文件。如果选中【当模板改变时更新页面】复选项，则保存修改后的模板时，将自动提示更新使用该模板创建的页面。（3）单击【创建】按钮，创建一个基于模板的新文档。4. 在现有文档上应用模板打开要应用模板的已有文档。执行以下操作之一： 单击【修改】【模板】【套用模板到页】菜单命令，打开【选择模板】对话框。在【站点】下拉列表中选择站点名称；在【模板】列表中选择需要的模板。单击【选定】按钮。即可将该模板应用到打开的文档。 打开【文件】浮动面板，切换到【资源】选项卡下。单击【模板】图标，打开模板列表，选中需要的模板。单击【应用】按钮，或者将模板直接拖动到文档窗口中即可。【操作技巧与注意事项】 模板应包含可编辑区域。基于模板创建的网页可以在这些区域中进行编辑。实验3.5 图像的使用【相关知识】1. Internet上常见的图像文件格式有：JPG/JPEG、GIF、PNG。2. 图像占位符是在准备好将最终图像添加到Web页面之前使用的图形。3. 利用Dreamweaver8提供的自动创建网站相册的功能可以很方便地建立一个包含相册缩略图的网页。【实验3.5-1】一、实验目的和要求1. 掌握插入普通图像的方法。2. 掌握编辑图像的方法。3. 掌握插入图像占位符的方法。二、实验步骤1. 新建一个网页文档启动Dreamweaver。单击【文件】【新建】菜单命令，新建一个网页文档。2. 插入图像（1）将光标放在网页中要插入图像的位置上。单击【插入】【图像】菜单命令，或者单击工具栏中的【图像】按钮，在弹出的快捷菜单中选择【图像】菜单命令，打开【选择图像源文件】对话框。（2）在对话框中，选择要插入的图像。单击【确定】按钮。3. 编辑图像（1）选中图像，在属性面板中，设置【宽】、【高】均为“100”；设置【垂直边距】、【水平边距】均为“20”；设置【对齐】为“左对齐”；设置【边框】为“2”。（2）单击属性面板中的【亮度和对比度】按钮，打开【亮度/对比度】对话框，如图3-4所示。在对话框中，分别拖动亮度和对比度的滑块可以设置图像的亮度和对比度。图3-4 【亮度/对比度】对话框（3）单击属性面板中的【锐化】按钮，弹出【锐化】对话框，拖动滑块可以设置图像的锐化程度。4. 建立图像超链接选中图像，在属性面板的【链接】处单击【浏览】按钮，设置图像的URL地址；在【替换】处输入提示文字“图像超链接”；在【目标】下拉列表中选择“_blank”。5. 插入图像占位符（1）单击【插入】【图像占位符】菜单命令，或者单击工具栏中的【图像】按钮，在弹出的快捷菜单中选择【图像占位符】菜单命令，打开【图像占位符】对话框。（2）在对话框的【名称】处输入图像占位符的名称；设置【宽】、【高】均为“30”；在【替换文本】处输入图像的提示文字“图像占位符”。（3）单击【确定】按钮，在网页文档中插入一个图像占位符。6. 裁剪图像（1）选中图像，在属性面板中单击【裁剪】按钮，在图像四周出现控制手柄。（2）拖动控制手柄，调整裁剪区域。（3）单击【回车键】，或者在裁剪好区域中双击鼠标，即可完成图像裁剪。【实验3.5-2】一、实验目的和要求掌握创建鼠标经过图像的方法。二、实验步骤1. 新建一个网页文档启动Dreamweaver。单击【文件】【新建】菜单命令，新建一个网页文档。2. 创建鼠标经过图像（1）准备2个大小相同的图片。将光标放在网页中要插入鼠标经过图像的位置上。单击【插入】【图像对象】【鼠标经过图像】菜单命令，或者单击工具栏中的【图像】按钮，在弹出的快捷菜单中选择【鼠标经过图像】菜单命令，打开【鼠标经过图像】对话框。（2）在对话框中，单击【原始图像】后面的【浏览】按钮，选择鼠标经过前的图像；单击【鼠标经过图像】后面的【浏览】按钮，选择鼠标经过后的图像；在【替换文本】中输入鼠标经过图像的提示文字；单击【按下时，前往的URL】后面的【浏览】按钮，选择单击图像后目标网页的URL地址。【实验3.5-3】一、实验目的和要求掌握创建网站相册的方法。二、实验步骤1. 新建一个网页文档启动Dreamweaver。单击【文件】【新建】菜单命令，新建一个网页文档。2. 创建网站相册（1）将创建网站相册所需的图像文件拷贝到“image”文件夹中。在站点上新建一个空文件夹“picture”。（2）单击【命令】【创建网站相册】菜单命令，打开【创建网站相册】对话框。（3）在对话框的【相册标题】文本框中输入“我的网站相册”；单击【源图像文件夹】后面的【浏览】按钮，选择存放相册图像的“image”文件夹；单击【目标文件夹】后面的【浏览】按钮，选择新建的“picture”空文件夹；设置【缩略图大小】为“100*100”；设置【列】为“5”；设置【缩略图格式】和【相片格式】为“JPEG-较高品质”。（4）单击【确定】按钮，系统自动启动Fireworks软件来创建每个相片的缩略图。（5）创建完毕，弹出【相册已建立】提示框。单击【确定】按钮，在Dreamweaver8上自动创建一个相册首页。【操作技巧与注意事项】1. 如果图像存放在站点之外，插入图像时会提示是否将其复制到站点内。最好将网站中使用的图像都保存在站点内，以确保发布站点后图像能够在网页上正确显示。2. 图像的名称用于脚本语言（如JavaScript）对该图像的引用。最好用英文小写字母为其命名。3. 在将图像设置为背景图像时，无论源图像文件多大，Dreamweaver会将其自动平铺在整个背景区。4. 使用图像裁剪功能，将会更改源图像文件的大小。5. 将图像的边框设置为“0”表示不带边框。6. 在创建网站相册前，要求先安装Fireworks软件。因为系统会自动启动Fireworks软件创建缩略图。实验3.6 表格的应用【相关知识】1. 表格是简明、快捷地展示数据的常用方式。2. 利用Dreamweaver提供的导入、导出功能，可以使网页中的表格与其他软件（例如Word、Excel）中的表格式数据相互转换。3. 利用表格对网页布局是网页制作中的常用手段。【实验3.6-1】一、实验目的和要求1. 掌握创建和编辑表格的方法。2. 掌握对表格进行格式化的方法。3. 掌握排序表格的方法。二、实验步骤1. 新建一个网页文档启动Dreamweaver。单击【文件】【新建】菜单命令，新建一个网页文档。2. 插入表格（1）将光标放在网页中要插入表格的位置上。单击【插入】【表格】菜单命令，或单击【常用插入栏】上的【表格】按钮，打开【表格】对话框。（2）在对话框中，设置【行数】为“2”；设置【列数】为“3”；设置【表格宽度】为“600像素”；设置【边框粗细】为“2”。（3）单击【确定】按钮，插入一个2行3列的表格。3. 在单元格插入内容（1）将光标放在第2行第1列的单元格中，输入“轿车”。（2）将光标放在第2行第3列的单元格中，单击【插入】【图像】菜单命令，插入一幅轿车的图片。4. 编辑表格（1）将光标放在第1列单元格的上方。当鼠标变成箭头形状时，单击鼠标，选中第1列所有的单元格。在属性面板的【宽】处输入“100像素”。用同样的方法将第3列所有单元格的宽度设置为“70像素”。（2）将光标放在第2行第2列的单元格中，单击鼠标右键，在弹出的快捷菜单中选择【表格】【拆分单元格】菜单命令，打开【拆分单元格】对话框。在【把单元格拆分】处选中“行”；设置【行数】为“2”。（3）选中拆分后的2个单元格，在属性面板的【高】处输入“50像素”。并分别在单元格中输入“通用”、“大众”。（4）将光标放在第2列的单元格中，单击鼠标右键，在弹出的快捷菜单中选择【表格】【插入列】菜单命令，在表格中插入一列。在该列第2行、第3行单元格中分别输入“100”、“200”。（5）将光标放在第1行单元格的左侧。当鼠标变成箭头形状时，单击鼠标，选中第1行所有的单元格。单击鼠标右键，在弹出的快捷菜单中选择【表格】【合并单元格】菜单命令，将第1行单元格合并。将光标放在第1行合并后的单元格中，输入“汽车分类”。（6）选中表格中的所有单元格，单击属性面板中的【居中】按钮，使单元格中的文字居中对齐。5. 设置表格属性（1）选中表格，在属性面板中设置【边框颜色】为“#0033FF”；设置【背景颜色】为“#FFFFCC”。（2）选中第1行的单元格，在属性面板中单击【背景】后面的【浏览】按钮，选择一幅背景图片。6. 自动套用表格样式（1）单击【插入】【表格】菜单命令，或单击【常用插入栏】上的【表格】按钮，打开【表格】对话框。（2）在【表格】对话框中，设置【行数】为“4”；设置【列数】为“2”；设置【表格宽度】为“200像素”；设置【边框粗细】为“0”。（3）单击【确定】按钮，插入一个4行2列的表格。（4）在第1列的第1-4行的单元格中分别输入“专业”、“英语”、“会计”、“计算机”。在第2列第1-4行的单元格中分别输入“招生人数”、“50”、“20”、“60”。（5）单击【命令】【格式化表格】菜单命令，打开【格式化表格】对话框。从列表中选择一种表格样式。单击【确定】按钮，将该样式应用到表格上。7. 排序表格（1）选中表格，单击【命令】【排序表格】菜单命令，打开【排序表格】对话框。（2）在【排序按】下拉列表中选择“列2”；在【顺序】下拉列表中选择“按数字顺序”，并在后面的下拉列表中选择“降序”。