电子政务实验总结
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
电子政务实验指导书
成贤学院
2011年9月
目录
实验一熟悉HTML（2学时） (3)
实验二使用 Dreamweaver 站点（2学时） (11)
实验三创建和管理文件（2学时） (16)
实验四使用 HTML 对页面进行布局（2学时） (23)
实验五 Dreamweaver综合练习（2学时） (34)
实验六 Flash综合练习（2学时） (36)
实验七 Fireworks综合练习（2学时） (37)
实验一熟悉HTML（2学时）
[实验目的]
基本要求：
掌握HTML的基本结构，了解几类重要的HTML元素
重点：
标记文本。
难点：
对内联文本元素和泛型元素的认识，能够根据需要综合使用各种HTML元素。
[实验内容]
一、综合演练——熟悉HTML
1.创建简单网页
2.标记文本
3.使用链接
4.加入图片
5.基本表格标记
6.表单
7.验证文档
[综合演练1实验步骤] ——熟悉HTML
创建简单网页
输入内容
1．在文本编辑器输入如图0-1所示的文本，请保持一样的格式。
图0-1
2．创建一个文件夹命名为“bistro”，将上述文件保存在“bistro”中并命名为“index.html”。
3．在浏览器中打开“index.html”，并使用截图软件将页面保存到一个word文档中命名为“HTML文档的变化.doc”。
添加基本结构
1．在文本编辑器中打开index.html.
2．在开头添加<html>开始标签，在结尾添加</html>结束标签
3．创建文档的<head>，并在<head>元素内添加标题文字“Black Goose Bistro”，用<title>元素包围该文字
4．将原文档中的文字内容全部装入<body>元素中
5．保存文档并在浏览器中打开观察文档的变化，并使用截图软件将页面同样保存到“HTML文档的变化.doc”中。
定义文本元素
1．打开index.html.
2．将文本第一行“Black Goose Bistro”标记为一级标题元素h1。
方法是将其置于<h1>…</h1>之间，即<h1> Black Goose Bistro </h1>
3．用同样的方法将“The Restaurant”、“Catering Services”、“Location and Hours”标记为二级标题元素h2。
4．将每个h2元素后面的一小段文字标记为段落p元素
5．在“Catering Services”的文字部分中，用强调文本元素em标记“we'll do the cooking.”这一句话形成强调效果。
6．保存文档并在浏览器中打开观察文档的变化，并使用截图软件将页面同样保存到“HTML文档的变化.doc”中。
请思考：什么是HTML中的块元素，什么是内联元素？以上使用的元素中哪些是块元素，哪些是内联元素？什么元素是泛型元素？
添加图像
1．将图片文件“blackgoose.gif”保存到“bistro”文件夹中。
2．将图像元素插入一级标题元素的开头标记之后，如下所示
<h1> <img src=”blackgoose.gif” alt=”blackgoose.logo” />Black Goose Bistro </h1>
3．保存文档并在浏览器中打开观察文档的变化，并使用截图软件将页面同样保存到“HTML文档的变化.doc”中。
使用样式表改变外观
1．打开index.html.
2．将style元素插入文档的head部分，如下图所示。
保存文档并在浏览器中打开观察文档的变化，并使用截图软件将页面同样保存到“HTML文档的变
化.doc”中。
标记文本
构建块
1． 请向具有基本文档结构元素网页文本（标记文本-构建块.txt ）中添加块元素，使其浏览效果如图0-2所示。
可能会用到的文本块元素可参考表0-1。
表0-1 文本块元素参考
图0-2 网页效果示意图
请注意此处无空格
综合应用
1． 请向具有基本文档结构元素网页文本（标记文本-综合练习.txt ）中添加块元素，使其浏览效果如图0-3所示。
基本步骤如下：
（1） 首先输入文档结构元素。
给文档赋予标题“Black Goose Bistro Summer
Menu ”。
（2） 使用div 元素将网页分为四个独立的部分，以此命名为“header ”、
“appetizers ”、“main ”和“warning ”。
（3） 确定一级标题和二级标题。
在一级标题中将直条字符改为项目符号字
符。
（4） 使餐馆信息独立成段。
删除“Massachusetts ”后的冒号，使用br 元素
在新行开始“hours ”。
图0-3 页面效果图
链接
相对路径和绝对路径
注意：绝对路径是指在链接路径中使用绝对URL 地址，即包括协议、域名和文件路径。
相对路径描述了链接网页相对于当前文档的路径名，不需要协议或域名，只需要网页路径。
网页路径遵循Unix 习惯，使用正斜线（/）隔开目录和文件名，相对路径名描述了从当前文档的位置开始，如何获取链接文档。
当要链接到高层文件时，使用专用的点点斜（../）约定代表向上一层，向上两层就用两个点点斜（../../），以此类推。
相对网站根路径名则在路径开头用“/”代表根目录，然后按照需要书写后面的路径。
1． 请在如图0-4所示的网站结构中，按要求写出链接的路径。
链接到低层：index.html 指向 salmon.html 的链接; index.html 指向 couscous.html 的链接 链接到高层：salmon.html 指向index.html 的链接; couscous.html 指向index.html 的链接 要求写出相对链接和绝对链接两种方式。
图0-4
为文档添加链接
1．创建外部链接
打开jenskitchen文件夹中的文件index.html。
将列表项“Epicurious”指向网页www.
，例如，
<ul>
<li><a href=”/”>The Food Network</a></li>
<li> epicurious</li>
</ul>
完成后保存index.html并在浏览器中打开，点击链接观察变化。
2．相同目录中的链接
打开jenskitchen文件夹中的文件about.html。
创建网页底部的段落“Back to the home page”指回主页的链接。
记住锚元素一定要包含在p元素中。
<p> Back to the home page</p>
保存about.html并在浏览器中点击链接查看变化。
3．链接到低层目录
打开jenskitchen文件夹中的文件index.html。
创建列表项“Tapenade(Olive Spread)”
到recipes目录中文件tapenade.html的链接。
<li> tapenade</li>
完成后保存index.html并在浏览器中打开，点击链接观察变化。
4．链接到低层目录
打开jenskitchen文件夹中的文件index.html。
创建列表项“Linguine with Clam Sauce”
到pasta目录中文件linguine.html的链接。
<li> linguine </li>
完成后保存index.html并在浏览器中打开，点击链接观察变化。
5．链接到高层目录
打开recipes目录中的文件tapenade.html。
在网页底部可以看到下面段落。
<p> Back to the home page</p>，
使用相对路径使文本链接到主页index.html。
完成后保存tapenade.html并在浏览器中打开，点击链接观察变化。
6．链接到上两层目录。
打开linguine.html。
在网页底部可以看到下面段落。
<p> Back to the home page</p>
使用相对路径使文本链接到主页index.html。
完成后保存tapenade.html并在浏览器中打开，点击链接观察变化。
7．链接到网页中的指定点
打开glossary.html，完成以下步骤：
（1）通过使用id属性将h2标题“A”命名为“startA”，将其确定为链接的目的地——即命名锚
<h2 id=”startA”>A</h2>
（2）将网页顶部的字母“A”链接到命名锚，注意一定要加“#”号。
<a href=”#startA”>A</a>
（3）对网页顶部的字母和对应的段落重复上述步骤直至全部完成
（4）将标题“Glossary”设置成名为“top”的目的地。
<h1 id=”top”> Glossary </h1>
（5）在每个字母部分（含字母标题和所跟的段落）的最后添加包含“TOP”的段落元素，使TOP链接到标题“Glossary”。
8．对于在新窗口打开链接文档和通过链接打开指定的邮件程序请自行练习。
插入图片
添加并链接图片
1．请使用准备好的tuscany网站文件夹完成下列练习。
打开文件夹中的index.html，将缩略图及附加文字添加到其中。
示例如下：
<h2>Pozzarello</h2>
<p><img src=”thumbnails/window_100.jpg”alt=”viewfrom the bedroom
window” width=”75” height=”100” /></p>
仿照示例在新的p元素中添加图片country-side_100.jpg，设置h2标题为“On the Road”，确定路径、描述、像素大小（宽100，高75）
在新的p元素中添加图片sienna_100.jpg和duomo_100.jpg，设置h2标题为“Sienna”，确定路径、描述、像素大小（宽100，高75）
设置完成后在浏览器中查看。
2．将图片放在单独的网页文件中，示例如下：
<h1>The View Through My Window</h1>
<p><img src=”photos/window.jpg”alt=”view out the window of the rolling
Tuscan hills” width=”375” height=”500” /></p>
仿照示例将剩余图片分别添加到countyr-side.html、sienna.html、duomo.html 中。
照片都是长边500，短边375
3．打开index.html，将缩略图链接到各自的大图网页文件。
示例如下：<h2>Pozzarello</h2>
<p><a href=”window.html”><img
src=”thumbnails/window_100.jpg”alt=”viewfrom the bedroom window”
width=”75” height=”100” /></a></p>
仿照示例完成其他缩略图的链接。
表格
设计表格
1．创建一个新的html文档，设置其基本文档结构（html元素、head元素、title 元素和body元素）
2．在head部分添加如下的样式表定义。
<head>
<title>Table</title>
<style type=”text/css”>
td,th { border :1px solid #CCC}
table { border :1px solid black}
</style>
</head>
3．在body元素中添加表格元素。
设置一个五行的表格如下：
<body>
<table>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
</table>
</body>
表格最终显示样式如图0-5所示。
可能用到的表格元素包括caption（主标题）th（标题）、tr（行）、td（单元格），可能用到的属性包括border、cellspacing、rowspan、colspan。
图0-5 表格显示示例
制作表单
表单设计
1．在文本编辑器中打开contest_entry.html。
2．首先将intro段（Want to trade …… winners.）后面的所有内容放到一个form 元素中，按照注释，指定用于form的action和method属性。
结果如下：
<form action=/contest.php
method=”post”>
…
</form>
3．下面我们操作“Contest Entry Information”部分。
首先创建一个字段集元素fieldset，将Name:City:State:My shoes are SO old...标签都放在fieldset元素内。
使用标题“Contest Entry Information”作为字段集的legend。
另外将表单各区域标记为有序列表。
标记结果如下：
<fieldset>
<legend>Contest Entry Information</legend>
<ol>
<li> Name:</li>
<li> City:</li>
<li> State:</li>
<li> My shoes are SO old...</li>
</ol>
</fieldset>
4．现在在前三个列表项中添加三个文本输入表单控件。
如下示例：<li> Name:<input type=”text” name=”name”/></li>
5．对最后一个列表项，添加一个文本区域表单控件
<li> My shoes are SO old...<br />
<textarea name=”story” rows=”4”cols=”60”maxlength=”300”>(你的输入不能超过300个字)</ textarea ></li>
6．下面将表单控件和它前面的文字标注关联起来，示例如下：
<li> <label for=”form-name”>Name:</label><input type=”text” name=”name”
id=”form-name”/></li>
7．添加结尾部分的提交和重设按钮。
这两个控件也要包括在<form>元素中，位于</form>标签之前。
<p><input type=”submit” value=”提交”/>
<input type=”reset” value=”重设”/>
</p>
8．保存文档并在浏览器中查看页面效果，点击提交和重设按钮观察页面变化。
9．下面练习在表单中添加单选按钮和复选框。
用和步骤3中相同的方法将Color:Feature:Size标签放在一个fieldset中并将“Custom Shoe Design”设为fieldset的legend。
10．为Color选项专门创建另一个字段集，将介绍信息用作legend。
另外将颜色选项标记为无序列表。
示例如下：
<fieldset>
<legend>Color <em> (choose one) </em>: </legend>
<ul>
<li> red</li>
<li> blue</li>
<li> black</li>
<li> silver</li>
</ul>
</fieldset>
11．结构布置好后向其中插入表单控件。
这里使用单选按钮。
示例如下：<li> <label><input type=”radio” name=”color” value=”red”/>red</label></li>
12．下面仿照Color标记Feature，但这一次使用复选框，将type属性值改为“checkbox”，所有的列表项中的name值都是“feature”
13．保存文档并在浏览器中查看页面效果
14．现在处理“Size”部分，首先将文字部分标记为段。
<fieldset>
<legend>Size</legend>
<p>( Sizes reflect standard men's sizes): </p>
</fieldset>
15．将显示鞋子尺码（5到13）的下拉菜单元素插入表单中，并与它得标签显示关联。
<p><label for=”size”>(Sizes reflect standard men's sizes): </label>
<select name=”size”id=”size”>
<option>5</option>
……
</select>
</p>
16．保存文档并在浏览器中查看页面效果
验证文档
使用W3C验证服务
1．打开浏览器访问。
使用“Validate by File Upload”将提供的blackgoose.html文档上传并点击“Check”按钮。
2．对照列出来的错误列表修改原文件。
3．使用同样的方式验证提供的文档“x-blackgoose.html”并修改错误。
实验二使用 Dreamweaver 站点（2学时）[实验目的]
基本要求：
掌握网站建立的步骤，熟悉可视化地图的使用
重点：
了解网站创建的完整过程。
难点：
可视化地图的特殊用法。
[实验内容]
一、综合演练
1.使用Dreamweaver 站点
2.使用站点的可视化地图
[综合演练1实验步骤] ——使用Dreamweaver 站点
设置 Dreamweaver 站点
Dreamweaver 站点由三个部分（或文件夹）组成，具体取决于开发环境和所开发的 Web 站点类型：
●本地根文件夹存储您正在处理的文件。
Dreamweaver 将此文件夹称为“ 本
地站点”。
此文件夹可以位于本地计算机上，也可以位于网络服务器上。
如果您直接在服务器上工作，每次您保存文件时 Dreamweaver 都会将文件上传到服务器。
●远程文件夹存储用于测试、生产和协作等用途的文件。
Dreamweaver 在“ 文
件” 面板中将此文件夹称为“ 远程站点”。
远程文件夹通常位于运行 Web 服务器的计算机上。
本地文件夹和远程文件夹使您能够在本地硬盘和 Web 服务器之间传输文件；这使您可以轻松管理 Dreamweaver 站点中的文件。
●测试服务器文件夹Dreamweaver 在其中处理动态页的文件夹。
使用管理站点对话框
使用“ 管理站点” 对话框创建新站点、编辑站点、重制站点、删除站点或者导入或导出站点设置。
1 选择“ 站点”>“ 管理站点”，从左侧的列表中选择一个站点。
2 单击一个按钮选择以下选项之一，并单击“ 完成”。
●新建使您可以创建新站点。
●编辑使您可以编辑现有站点。
●复制创建所选站点的副本。
副本将出现在站点列表窗口中。
●删除删除所选站点；此操作无法撤消。
●导出使您可以将站点设置导出为 XML 文件 (*.ste)。
●导入使您可以选择要导入的站点设置文件 (*.ste)。
设置和编辑本地根文件夹
规划站点结构后，在 Dreamweaver 中设置（定义）站点。
您还应定义一个站点，以便编辑不是由 Dreamweaver 创建的Web 站点。
设置 Dreamweaver 站点是一种组织所有与 Web 站点关联的文档的方法。
本地根文件夹是 Dreamweaver 站点的工作目录。
此文件夹可以位于本地计算机上，也可以位于网络服务器上。
如果要开始在计算机上编辑文件（而不进行发布），只需设置一个本地文件夹，以后再添加远程和测试信息。
即使没有使用 Dreamweaver 创建原始站点，也可以使用 Dreamweaver 编辑本地磁盘上的现有 Web 站点或编辑远程站点（或远程站点的分支）。
注：如果本地根文件夹位于运行 Web 服务器的系统中，则无需指定远程文件夹。
这意味着该 Web 服务器正在您的本地计算机上运行。
1 选择以下项之一：
●若要设置新站点，请选择“ 站点”>“ 新建站点”。
●若要编辑本地磁盘上的现有站点或远程站点（或远程站点的分支）的设置，
无论该站点是否在 Dreamweaver 中创建，都可选择“ 站点”>“ 管理站点”，然后单击“ 编辑”。
注：如果未定义任何 Dreamweaver 站点，将会出现“ 站点定义” 对话框，而无需您单击“ 新建”。
2 输入设置信息：
●若要使用站点设置向导设置站点，请单击“ 基本” 选项卡，然后按照提示
进行操作。
●若要直接设置本地文件夹、远程文件夹和测试文件夹（用于处理动态页），
请单击“ 高级” 选项卡，选择“ 本地信息” 类别并设置各个选项。
3 单击“ 确定” 和“ 完成” 以创建站点（在“ 文件” 面板中显示）。
设置测试服务器
如果计划开发动态页， Dreamweaver 需要测试服务器的服务以便在您进行操作时生成和显示动态内容。
测试服务器可以是本地计算机、开发服务器、中间服务器或生产服务器。
在设置测试服务器文件夹之前，必须定义本地和远程文件夹。
您可能经常将您的远程文件夹的设置用于您的测试服务器，因为在远程文件夹中上传的动态页通常可能是由应用程序服务器处理的。
1 选择以下项之一：
●若要设置新站点，请选择“ 站点”>“ 新建站点”。
●若要编辑本地磁盘上现有站点或远程站点（或远程站点的分支）的设置，无
论该站点是否使用 Dreamweaver 创建，都可选择“ 站点”>“ 管理站
点”，然后从列表中选择站点并单击“ 编辑”。
注：如果未定义任何 Dreamweaver 站点，将会出现“ 站点定义” 对话框，而无需您单击“ 新建”。
2 在“ 站点定义” 对话框的“ 高级” 选项卡中选择“ 测试服务器”。
3 选择要用于 Web 应用程序的服务器技术。
4 接受默认的“ 测试服务器” 设置，或者输入不同的设置。
注：默认情况下，Dreamweaver 会假定应用程序服务器运行在与您的Web 服务器相同的系统上。
如果您在“ 站点定义” 对话框的“ 远程信息” 类别中定义了远程文件夹，并且如果应用程序服务器运行在与远程文件夹相同的系统上（包括您的本地计算机），则接受“ 测试服务器” 类别中的默认设置。
5 在“URL 前缀” 文本框中，输入用户在其浏览器中打开您的 Web 应用程序时需要键入的URL，但不包括任何文件名。
注：URL 前缀由域名和 Web 站点主目录的任何一个子目录或虚拟目录（而不是文件名）组成。
例如，如果应用程序的 URL 是
/mycoolapp/start.jsp，则应输入以下 URL 前缀：
/mycoolapp/。
注：如果 Dreamweaver 与 Web 服务器在同一系统上运行，则可以使用localhost 选项之一作为域名的占位符。
例如，如果运行的是 IIS，而应用程序的 URL 是 http://buttercup_pc/mycoolapp/start.jsp，请输入以下URL 前缀：http://localhost/mycoolapp/
6 单击“ 确定”，然后单击“ 完成” 以将新站点添加到站点列表中。
[综合演练2实验步骤] ——使用站点的可视化地图
可以将 Dreamweaver 站点的本地文件夹视作链接的图标的视觉地图，此视觉地图称为站点地图。
可以使用站点地图将新文件添加到 Dreamweaver 站点，或者添加、修改或删除链接。
站点地图从主页开始显示两个级别深度的站点结构。
站点地图将页面显示为图标，并按在源代码中出现的顺序来显示链接。
必须先定义站点的主页才能显示站点地图。
站点的主页是地图的起点，可以是站点中的任何页面。
可以更改主页、显示的列数、图标标签显示文件名还是显示页标题以及是否显示隐藏文件和相关文件。
（相关文件是浏览器在加载主页时加载的图像或其它非 HTML 内容。
）
定义或更改站点的主页
1 在“ 文件” 面板（“ 窗口”>“ 文件”）中，从显示当前站点、服务器或驱动器的弹出菜单中选择一个站点。
2 右键单击 (Windows) 或按住 Control 键单击 (Macintosh) 要设为主页的文件，然后选择“ 设成首页”。
注：还可以在“ 站点定义” 对话框的“ 站点地图布局” 选项中设置主页。
3 若要更改主页，请重复第 2 步。
查看站点地图
1 在“ 文件” 面板（“ 窗口”>“ 文件”）中，执行下列操作之一：
●在折叠的“ 文件” 面板中，选择“ 站点视图” 菜单中的“ 地图视图”。
●在展开的“ 文件” 面板中，单击工具栏中的“ 站点地图” 按钮，然后选择“ 仅地图”（不包含本地文件结构的站点地图）或“ 地图和文件” （包含本地文件结构）。
注：如果尚未定义主页或者 Dreamweaver 在当前站点中找不到要用作主页的 index.html 或 index.htm 页面，Dreamweaver 将提示您选择一个主页。
2 单击文件名旁的加号 (+) 或减号 (-) 可显示或隐藏链接在第二级之下的页面：
●以红色显示的文本指示断开的链接。
●以蓝色显示并且标有地球图标的文本表示其它站点上的文件或特殊链接（如
电子邮件或脚本链接）。
●绿色选中标记指示您已取出的文件。
●红色选中标记指示他人取出的文件。
●锁形图标指示只读 (Windows) 或锁定 (Macintosh) 的文件。
修改站点地图布局
使用“ 站点地图布局” 选项可自定义站点地图的外观。
1 通过下列操作之一打开“ 站点定义” 对话框：
●选择“ 站点”>“ 管理站点”，选择站点，然后单击“ 编辑”。
●在“ 文件” 面板中，从显示当前站点、服务器或驱动器的菜单中选择“ 管
理站点”，然后单击“ 编辑”。
2 在“ 站点定义” 对话框中，从左侧的“ 分类” 列表中选择“ 站点地图布局” 并设置各个选项：
●列数设置在站点地图窗口中每行要显示的列数。
●列宽设置站点地图的列宽（以像素为单位）。
●图标标签选择在站点地图中与文档图标一起显示的名称是表示为文件名还
是页标题。
●显示标记为隐藏的文件显示站点地图中已标记为隐藏的 HTML 文件。
●显示相关文件在站点层次结构中显示所有相关文件。
3 单击“ 确定”，然后单击“ 完成”。
查看站点地图中的不同分支
通过使某个分支成为站点地图的焦点，可以查看站点特定部分的详细信息。
1 选择您要查看的页。
2 请执行下列操作之一：
●在站点地图中右键单击 (Windows) 或按住 Control 单击 (Macintosh)，然
后选择“ 作为根查看”。
●在默认的“文件”面板（“窗口”>“文件”）中，单击右上角的选项菜单，
然后选择“查看”>“站点地图选项”>“作为根查看”。
站点地图在窗口中重新绘制，就象指定页位于站点的根目录一样。
站点地图之上的“ 站点导航” 文本框显示从主页到指定页的路径。
通过一次单击选择路径中的任意项，从该级别开始查看站点地图。
3 若要展开和收缩站点地图中的分支，请单击分支的加号 (+) 或减号 (-) 按钮。
在站点地图中选择若干个页面
请执行下列操作之一：
●从视图的空白部分开始在一组文件周围拖动，以选择这些文件。
●按住 Ctrl 单击 (Windows) 或按住 Command 单击 (Macintosh)，以选择不
相邻的页。
●按住 Shift 单击以选择某一范围的相邻页。
在站点地图中打开某页进行编辑
❖双击文件，或者右键单击 (Windows) 或按住 Control 单击 (Macintosh) 文件，然后选择“ 打开”。
向站点中添加现有文件
❖将文件从 Windows 资源管理器或 Macintosh Finder 中拖动到站点地图中的一个文件，或者在站点地图中右键单击(Windows) 或按住 Control 键单击 (Macintosh) 该文件，然后选择“ 链接到已有文件” 并浏览到该文件。
创建新文件并在站点地图中添加链接
1 在站点地图中选择一个文件，或者右键单击(Windows) 或按住Control 键单击(Macintosh)，然后选择“ 链接到新文件”。
2 输入该链接的名称、标题和文本，然后单击“ 确定”。
Dreamweaver 将该文件保存在与选定文件相同的文件夹中。
如果向隐藏的分支目录中添加一个新文件，则该新文件也会被设置为隐藏。
在站点地图中修改页的标题
1 单击折叠的“ 文件” 面板右上角的选项菜单，然后选择“ 文件”>“ 重命名视图”>“ 显示页面标题”，以显示页面标题。
2 从站点地图中选择一个文件，然后执行下列操作之一：
●单击标题，然后输入新的标题。
●单击右上角的选项菜单，然后选择“ 文件”>“ 重命名”。
3 键入新名称，然后按 Enter (Windows) 或 Return (Macintosh)。
注：当您在“ 文件” 面板中进行操作时， Dreamweaver 会更新所有指向更改了名称的文件的链接。
在进行更改后更新站点地图显示
❖单击站点地图中的任意位置，以取消选择任何文件，然后单击“ 文件” 面板工具栏中的“ 刷新”。
[实验报告]（请按照要求提交实验报告电子版）
1．实验报告由课堂回顾和综合演练两部分内容组成，课堂回顾部分答案用word 文档保存，演练部分将站点文件夹整体提交。
然后将这两部分放在一个文件夹下，统一命名为“学号+时间”，例如：信管三班十四号同学第一次实验报告保存在名为“信管070314-100331”的文件夹中，以此类推。
2．到最后一周上机后，将个人所有上机作业文件夹汇总到一个文件夹中，统一命名为“学号+网页设计上机作业汇总”，例如：信管三班十四号同学所有上机作业文件夹汇总保存在名为“信管070314网页设计上机作业汇总”的文件夹中，并将其做成压缩文件包，以此类推。
3．课程结束时，各班同学将各自的上机作业压缩文件包交给各班班长统一收齐刻成光盘上交指导教师。
实验三创建和管理文件（2学时）[实验目的]
基本要求：
掌握Dreamweaver中创建、处理和测试页面的方法和步骤。
重点：
Dreamweaver常见的文件类型，操作文件的基本方法。
难点：
灵活使用测试报告查找文件中存在的错误。
[实验内容]
一、综合演练
创建和管理文件
[综合演练实验步骤] ——创建和管理文件
在 Dreamweaver 中可以使用多种文件类型。
使用的主要文件类型是HTML文件。
HTML文件（或超文本标记语言文件）包含基于标签的语言，负责在浏览器中显示Web页面。
可以使用.html或.htm扩展名保存HTML文件。
Dreamweaver默认情况下使用.html扩展名保存文件。
以下是使用 Dreamweaver 时可能会用到的其它一些常见文件类型：
●CSS 层叠样式表文件的扩展名为 .css。
它们用于设置 HTML 内容的格式并
控制各个页面元素的位置。
●GIF图形交换格式文件的扩展名为 .gif。
GIF 格式是用于卡通、徽标、具
有透明区域的图形、动画的常用 Web 图形格式。
GIF 最多包含 256 种颜色。
●JPEG 联合图像专家组文件（根据创建该格式的组织命名）的扩展名为 .jpg，
通常是照片或色彩较鲜明的图像。
JPEG 格式最适合用于数码照片或扫描的照片、使用纹理的图像、具有渐变色过渡的图像以及需要 256 种以上颜色的任何图像。
●XML 可扩展标记语言文件的扩展名为 .xml。
它们包含原始形式的数据，可
使用 XSL （Extensible Stylesheet Language：可扩展样式表语言）设置这些数据的格式。
●XSL 可扩展样式表语言文件的扩展名为 .xsl 或 .xslt。
它们用于设置要在
Web 页中显示的 XML 数据的样式。
●CFML ColdFusion 标记语言文件的扩展名为 .cfm。
它们用于处理动态页面。
●ASPX 文件的扩展名为 .aspx，用于处理动态页。
●PHP 超文本预处理器文件的扩展名为 .php，可用于处理动态页。
创建空白页
可以创建包含预设计 CSS 布局的页面，或者先创建一个完全空白的页，然后创建自己的布局。
1 选择“ 文件”>“ 新建”。
2 在“ 新建文档” 对话框的“ 空白页” 类别中，从“ 页面类型” 列选择要创建的页面类型。
例如，选择HTML来创建一个纯HTML 页，选择 ColdFusion 来创建一个 ColdFusion 页，等等。
3 如果希望新页面包含CSS 布局，请从“布局”列中选择一个预设计的CSS 布局；否则，选择“无”。
基于您的选择，在对话框的右侧将显示选定布局的预览和说明。
注：预设计的 CSS 布局提供了下列类型的列：。