电子政务实验总结.doc

电子政务实验指导书成贤学院2011年9月目录实验一 熟悉HTML（2学时）3实验二 使用 Dreamweaver 站点（2学时）12实验三 创建和管理文件（2学时）17实验四 使用 HTML 对页面进行布局（2学时）23实验五 Dreamweaver综合练习（2学时）35实验六 Flash综合练习（2学时）37实验七 Fireworks综合练习（2学时）38实验一 熟悉HTML（2学时）实验目的基本要求：掌握HTML的基本结构，了解几类重要的HTML元素重 点：标记文本。难 点：对内联文本元素和泛型元素的认识，能够根据需要综合使用各种HTML元素。实验内容 一、 综合演练熟悉HTML1. 创建简单网页2. 标记文本3. 使用链接4. 加入图片5. 基本表格标记6. 表单7. 验证文档综合演练1实验步骤 熟悉HTML创建简单网页输入内容1 在文本编辑器输入如图0-1所示的文本，请保持一样的格式。图0-12 创建一个文件夹命名为“bistro”，将上述文件保存在“bistro”中并命名为“index.html”。3 在浏览器中打开“index.html”，并使用截图软件将页面保存到一个word文档中命名为“HTML文档的变化.doc”。添加基本结构1 在文本编辑器中打开index.html.2 在开头添加开始标签，在结尾添加结束标签3 创建文档的，并在元素内添加标题文字“Black Goose Bistro”，用元素包围该文字4 将原文档中的文字内容全部装入元素中5 保存文档并在浏览器中打开观察文档的变化，并使用截图软件将页面同样保存到 “HTML文档的变化.doc”中。定义文本元素1 打开index.html.2 将文本第一行“Black Goose Bistro”标记为一级标题元素h1。方法是将其置于之间，即 Black Goose Bistro 3 用同样的方法将“The Restaurant”、“Catering Services”、“Location and Hours”标记为二级标题元素h2。4 将每个h2元素后面的一小段文字标记为段落p元素5 在“Catering Services”的文字部分中，用强调文本元素em标记“well do the cooking.”这一句话形成强调效果。6 保存文档并在浏览器中打开观察文档的变化，并使用截图软件将页面同样保存到 “HTML文档的变化.doc”中。请思考：什么是HTML中的块元素，什么是内联元素？以上使用的元素中哪些是块元素，哪些是内联元素？什么元素是泛型元素？添加图像1 将图片文件“blackgoose.gif”保存到“bistro”文件夹中。2 将图像元素插入一级标题元素的开头标记之后，如下所示 Black Goose Bistro 3 保存文档并在浏览器中打开观察文档的变化，并使用截图软件将页面同样保存到 “HTML文档的变化.doc”中。使用样式表改变外观1 打开index.html.2 将style元素插入文档的head部分，如下图所示。保存文档并在浏览器中打开观察文档的变化，并使用截图软件将页面同样保存到 “HTML文档的变化.doc”中。请注意此处无空格标记文本构建块1 请向具有基本文档结构元素网页文本（标记文本-构建块.txt）中添加块元素，使其浏览效果如图0-2所示。可能会用到的文本块元素可参考表0-1。表0-1 文本块元素参考标题h1-h6段p长引用blockquote预格式化pre作者联系信息address无序列表ul有序列表ol列表项li定义列表dl术语dt定义dd图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的链接要求写出相对链接和绝对链接两种方式。About.htmlindex.htmlImage1.gifImage2.gifSalmon.htmltapenade.htmlcouscous.htmllinguine.html我的厨房Images/Recipes/pasta/图0-4为文档添加链接1 创建外部链接打开jenskitchen文件夹中的文件index.html。将列表项“Epicurious”指向网页www. epicurious.com，例如， The Food Network epicurious完成后保存index.html并在浏览器中打开，点击链接观察变化。2 相同目录中的链接打开jenskitchen文件夹中的文件about.html。创建网页底部的段落“Back to the home page”指回主页的链接。记住锚元素一定要包含在p元素中。 Back to the home page保存about.html并在浏览器中点击链接查看变化。3 链接到低层目录打开jenskitchen文件夹中的文件index.html。创建列表项“Tapenade(Olive Spread)”到recipes目录中文件tapenade.html的链接。 tapenade完成后保存index.html并在浏览器中打开，点击链接观察变化。4 链接到低层目录打开jenskitchen文件夹中的文件index.html。创建列表项“Linguine with Clam Sauce”到pasta目录中文件linguine.html的链接。 linguine 完成后保存index.html并在浏览器中打开，点击链接观察变化。5 链接到高层目录打开recipes目录中的文件tapenade.html。在网页底部可以看到下面段落。 Back to the home page， 使用相对路径使文本链接到主页index.html。完成后保存tapenade.html并在 浏览器中打开，点击链接观察变化。6 链接到上两层目录。打开linguine.html。在网页底部可以看到下面段落。 Back to the home page使用相对路径使文本链接到主页index.html。完成后保存tapenade.html并在浏览器中打开，点击链接观察变化。7 链接到网页中的指定点打开glossary.html，完成以下步骤：（1） 通过使用id属性将h2标题“A”命名为“startA”，将其确定为链接的目的地即命名锚A（2） 将网页顶部的字母“A”链接到命名锚，注意一定要加“#”号。A（3） 对网页顶部的字母和对应的段落重复上述步骤直至全部完成（4） 将标题“Glossary”设置成名为“top”的目的地。 Glossary （5） 在每个字母部分（含字母标题和所跟的段落）的最后添加包含“TOP”的段落元素，使TOP链接到标题“Glossary”。8 对于在新窗口打开链接文档和通过链接打开指定的邮件程序请自行练习。插入图片添加并链接图片1 请使用准备好的tuscany网站文件夹完成下列练习。打开文件夹中的index.html，将缩略图及附加文字添加到其中。示例如下：Pozzarello仿照示例在新的p元素中添加图片country-side_100.jpg，设置h2标题为“On the Road”，确定路径、描述、像素大小（宽100，高75）在新的p元素中添加图片sienna_100.jpg和duomo_100.jpg，设置h2标题为“Sienna”，确定路径、描述、像素大小（宽100，高75）设置完成后在浏览器中查看。2 将图片放在单独的网页文件中，示例如下：The View Through My Window仿照示例将剩余图片分别添加到countyr-side.html、sienna.html、duomo.html中。照片都是长边500，短边3753 打开index.html，将缩略图链接到各自的大图网页文件。示例如下：Pozzarello仿照示例完成其他缩略图的链接。表格设计表格1 创建一个新的html文档，设置其基本文档结构（html元素、head元素、title元素和body元素）2 在head部分添加如下的样式表定义。 Table td,th border :1px solid #CCCtable border :1px solid black3 在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属性。结果如下：3 下面我们操作“Contest Entry Information”部分。首先创建一个字段集元素fieldset，将Name:City:State:My shoes are SO old.标签都放在fieldset元素内。使用标题“Contest Entry Information”作为字段集的legend。另外将表单各区域标记为有序列表。标记结果如下：Contest Entry Information Name: City: State: My shoes are SO old. 4 现在在前三个列表项中添加三个文本输入表单控件。如下示例： Name:5 对最后一个列表项，添加一个文本区域表单控件 My shoes are SO old.(你的输入不能超过300个字)6 下面将表单控件和它前面的文字标注关联起来，示例如下： Name:7 添加结尾部分的提交和重设按钮。这两个控件也要包括在元素中，位于标签之前。 8 保存文档并在浏览器中查看页面效果，点击提交和重设按钮观察页面变化。9 下面练习在表单中添加单选按钮和复选框。用和步骤3中相同的方法将Color:Feature:Size标签放在一个fieldset中并将“Custom Shoe Design”设为fieldset的legend。10 为Color选项专门创建另一个字段集，将介绍信息用作legend。另外将颜色选项标记为无序列表。示例如下：Color (choose one) : red blue black silver 11 结构布置好后向其中插入表单控件。这里使用单选按钮。示例如下： red12 下面仿照Color标记Feature，但这一次使用复选框，将type属性值改为“checkbox”，所有的列表项中的name值都是“feature”13 保存文档并在浏览器中查看页面效果14 现在处理“Size”部分，首先将文字部分标记为段。Size ( Sizes reflect standard mens sizes): 15 将显示鞋子尺码（5到13）的下拉菜单元素插入表单中，并与它得标签显示关联。(Sizes reflect standard mens sizes): 5 16 保存文档并在浏览器中查看页面效果验证文档使用W3C验证服务1 打开浏览器访问validator.w3.org。使用“Validate by File Upload”将提供的blackgoose.html文档上传并点击“Check”按钮。2 对照列出来的错误列表修改原文件。3 使用同样的方式验证提供的文档“x-blackgoose.html”并修改错误。实验二 使用 Dreamweaver 站点（2学时）实验目的基本要求：掌握网站建立的步骤，熟悉可视化地图的使用重 点：了解网站创建的完整过程。难 点：可视化地图的特殊用法。实验内容 一、 综合演练1. 使用 Dreamweaver 站点2. 使用站点的可视化地图综合演练1实验步骤 使用 Dreamweaver 站点设置 Dreamweaver 站点 Dreamweaver 站点由三个部分（或文件夹）组成，具体取决于开发环境和所开发的 Web 站点类型：l 本地根文件夹存储您正在处理的文件。Dreamweaver 将此文件夹称为“ 本地站点”。此文件夹可以位于本地计算机上，也可以位于网络服务器上。如果您直接在服务器上工作，每次您保存文件时 Dreamweaver 都会将文件上传到服务器。l 远程文件夹存储用于测试、生产和协作等用途的文件。Dreamweaver 在“ 文件” 面板中将此文件夹称为“ 远程站点”。远程文件夹通常位于运行 Web 服务器的计算机上。本地文件夹和远程文件夹使您能够在本地硬盘和 Web 服务器之间传输文件；这使您可以轻松管理 Dreamweaver 站点中的文件。l 测试服务器文件夹Dreamweaver 在其中处理动态页的文件夹。使用管理站点对话框 使用“ 管理站点” 对话框创建新站点、编辑站点、重制站点、删除站点或者导入或导出站点设置。1 选择“ 站点”“ 管理站点”，从左侧的列表中选择一个站点。2 单击一个按钮选择以下选项之一，并单击“ 完成”。l 新建使您可以创建新站点。l 编辑使您可以编辑现有站点。l 复制创建所选站点的副本。副本将出现在站点列表窗口中。l 删除删除所选站点；此操作无法撤消。l 导出使您可以将站点设置导出为 XML 文件 (*.ste)。l 导入使您可以选择要导入的站点设置文件 (*.ste)。设置和编辑本地根文件夹 规划站点结构后，在 Dreamweaver 中设置（定义）站点。您还应定义一个站点，以便编辑不是由 Dreamweaver 创建的Web 站点。设置 Dreamweaver 站点是一种组织所有与 Web 站点关联的文档的方法。 本地根文件夹是 Dreamweaver 站点的工作目录。此文件夹可以位于本地计算机上，也可以位于网络服务器上。如果要开始在计算机上编辑文件（而不进行发布），只需设置一个本地文件夹，以后再添加远程和测试信息。 即使没有使用 Dreamweaver 创建原始站点，也可以使用 Dreamweaver 编辑本地磁盘上的现有 Web 站点或编辑远程站点（或远程站点的分支）。 注：如果本地根文件夹位于运行 Web 服务器的系统中，则无需指定远程文件夹。这意味着该 Web 服务器正在您的本地计算机上运行。1 选择以下项之一：l 若要设置新站点，请选择“ 站点”“ 新建站点”。l 若要编辑本地磁盘上的现有站点或远程站点（或远程站点的分支）的设置，无论该站点是否在 Dreamweaver 中创建，都可选择“ 站点”“ 管理站点”，然后单击“ 编辑”。 注：如果未定义任何 Dreamweaver 站点，将会出现“ 站点定义” 对话框，而无需您单击“ 新建”。2 输入设置信息：l 若要使用站点设置向导设置站点，请单击“ 基本” 选项卡，然后按照提示进行操作。l 若要直接设置本地文件夹、远程文件夹和测试文件夹（用于处理动态页），请单击“ 高级” 选项卡，选择“ 本地信息” 类别并设置各个选项。3 单击“ 确定” 和“ 完成” 以创建站点（在“ 文件” 面板中显示）。设置测试服务器 如果计划开发动态页， Dreamweaver 需要测试服务器的服务以便在您进行操作时生成和显示动态内容。测试服务器可以是本地计算机、开发服务器、中间服务器或生产服务器。在设置测试服务器文件夹之前，必须定义本地和远程文件夹。您可能经常将您的远程文件夹的设置用于您的测试服务器，因为在远程文件夹中上传的动态页通常可能是由应用程序服务器处理的。1 选择以下项之一：l 若要设置新站点，请选择“ 站点”“ 新建站点”。l 若要编辑本地磁盘上现有站点或远程站点（或远程站点的分支）的设置，无论该站点是否使用 Dreamweaver 创建，都可选择“ 站点”“ 管理站点”，然后从列表中选择站点并单击“ 编辑”。 注：如果未定义任何 Dreamweaver 站点，将会出现“ 站点定义” 对话框，而无需您单击“ 新建”。2 在“ 站点定义” 对话框的“ 高级” 选项卡中选择“ 测试服务器”。3 选择要用于 Web 应用程序的服务器技术。4 接受默认的“ 测试服务器” 设置，或者输入不同的设置。 注：默认情况下，Dreamweaver 会假定应用程序服务器运行在与您的Web 服务器相同的系统上。如果您在“ 站点定义” 对话框的“ 远程信息” 类别中定义了远程文件夹，并且如果应用程序服务器运行在与远程文件夹相同的系统上（包括您的本地计算机），则接受“ 测试服务器” 类别中的默认设置。5 在“URL 前缀” 文本框中，输入用户在其浏览器中打开您的 Web 应用程序时需要键入的 URL，但不包括任何文件名。 注：URL 前缀由域名和 Web 站点主目录的任何一个子目录或虚拟目录（而不是文件名）组成。例如，如果应用程序的 URL 是www.adobe.com/mycoolapp/start.jsp，则应输入以下 URL 前缀：www.adobe.com/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 在“ 文件” 面板（“ 窗口”“ 文件”）中，执行下列操作之一：l 在折叠的“ 文件” 面板中，选择“ 站点视图” 菜单中的“ 地图视图”。l 在展开的“ 文件” 面板中，单击工具栏中的“ 站点地图” 按钮，然后选择“ 仅地图”（不包含本地文件结构的站点地图）或“ 地图和文件” （包含本地文件结构）。 注：如果尚未定义主页或者 Dreamweaver 在当前站点中找不到要用作主页的 index.html 或 index.htm 页面，Dreamweaver 将提示您选择一个主页。2 单击文件名旁的加号 (+) 或减号 (-) 可显示或隐藏链接在第二级之下的页面：l 以红色显示的文本指示断开的链接。l 以蓝色显示并且标有地球图标的文本表示其它站点上的文件或特殊链接（如电子邮件或脚本链接）。l 绿色选中标记指示您已取出的文件。l 红色选中标记指示他人取出的文件。l 锁形图标指示只读 (Windows) 或锁定 (Macintosh) 的文件。修改站点地图布局 使用“ 站点地图布局” 选项可自定义站点地图的外观。1 通过下列操作之一打开“ 站点定义” 对话框：l 选择“ 站点”“ 管理站点”，选择站点，然后单击“ 编辑”。l 在“ 文件” 面板中，从显示当前站点、服务器或驱动器的菜单中选择“ 管理站点”，然后单击“ 编辑”。2 在“ 站点定义” 对话框中，从左侧的“ 分类” 列表中选择“ 站点地图布局” 并设置各个选项：l 列数设置在站点地图窗口中每行要显示的列数。l 列宽设置站点地图的列宽（以像素为单位）。l 图标标签选择在站点地图中与文档图标一起显示的名称是表示为文件名还是页标题。l 显示标记为隐藏的文件显示站点地图中已标记为隐藏的 HTML 文件。l 显示相关文件在站点层次结构中显示所有相关文件。3 单击“ 确定”，然后单击“ 完成”。查看站点地图中的不同分支 通过使某个分支成为站点地图的焦点，可以查看站点特定部分的详细信息。1 选择您要查看的页。2 请执行下列操作之一：l 在站点地图中右键单击 (Windows) 或按住 Control 单击 (Macintosh)，然后选择“ 作为根查看”。l 在默认的“文件”面板（“窗口”“文件”）中，单击右上角的选项菜单，然后选择“查看”“站点地图选项”“作为根查看”。 站点地图在窗口中重新绘制，就象指定页位于站点的根目录一样。站点地图之上的“ 站点导航” 文本框显示从主页到指定页的路径。通过一次单击选择路径中的任意项，从该级别开始查看站点地图。3 若要展开和收缩站点地图中的分支，请单击分支的加号 (+) 或减号 (-) 按钮。在站点地图中选择若干个页面 请执行下列操作之一：l 从视图的空白部分开始在一组文件周围拖动，以选择这些文件。l 按住 Ctrl 单击 (Windows) 或按住 Command 单击 (Macintosh)，以选择不相邻的页。l 按住 Shift 单击以选择某一范围的相邻页。在站点地图中打开某页进行编辑 双击文件，或者右键单击 (Windows) 或按住 Control 单击 (Macintosh) 文件，然后选择“ 打开”。向站点中添加现有文件 将文件从 Windows 资源管理器或 Macintosh Finder 中拖动到站点地图中的一个文件，或者在站点地图中右键单击(Windows) 或按住 Control 键单击 (Macintosh) 该文件，然后选择“ 链接到已有文件” 并浏览到该文件。创建新文件并在站点地图中添加链接1 在站点地图中选择一个文件，或者右键单击 (Windows) 或按住 Control 键单击 (Macintosh)，然后选择“ 链接到新文件”。2 输入该链接的名称、标题和文本，然后单击“ 确定”。 Dreamweaver 将该文件保存在与选定文件相同的文件夹中。如果向隐藏的分支目录中添加一个新文件，则该新文件也会被设置为隐藏。在站点地图中修改页的标题1 单击折叠的“ 文件” 面板右上角的选项菜单，然后选择“ 文件”“ 重命名视图”“ 显示页面标题”，以显示页面标题。2 从站点地图中选择一个文件，然后执行下列操作之一：l 单击标题，然后输入新的标题。l 单击右上角的选项菜单，然后选择“ 文件”“ 重命名”。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 时可能会用到的其它一些常见文件类型：l CSS 层叠样式表文件的扩展名为 .css。它们用于设置 HTML 内容的格式并控制各个页面元素的位置。l GIF 图形交换格式文件的扩展名为 .gif。GIF 格式是用于卡通、徽标、具有透明区域的图形、动画的常用 Web 图形格式。GIF 最多包含 256 种颜色。l JPEG 联合图像专家组文件（根据创建该格式的组织命名）的扩展名为 .jpg，通常是照片或色彩较鲜明的图像。JPEG 格式最适合用于数码照片或扫描的照片、使用纹理的图像、具有渐变色过渡的图像以及需要 256 种以上颜色的任何图像。l XML 可扩展标记语言文件的扩展名为 .xml。它们包含原始形式的数据，可使用 XSL （Extensible Stylesheet Language：可扩展样式表语言）设置这些数据的格式。l XSL 可扩展样式表语言文件的扩展名为 .xsl 或 .xslt。它们用于设置要在 Web 页中显示的 XML 数据的样式。l CFML ColdFusion 标记语言文件的扩展名为 .cfm。它们用于处理动态页面。l ASPX ASP.NET 文件的扩展名为 .aspx，用于处理动态页。l PHP 超文本预处理器文件的扩展名为 .php，可用于处理动态页。创建空白页 可以创建包含预设计 CSS 布局的页面，或者先创建一个完全空白的页，然后创建自己的布局。1 选择“ 文件”“ 新建”。2 在“ 新建文档” 对话框的“ 空白页” 类别中，从“ 页面类型” 列选择要创建的页面类型。例如，选择HTML来创建一个纯HTML 页，选择 ColdFusion 来创建一个 ColdFusion 页，等等。3 如果希望新页面包含CSS 布局，请从“布局”列中选择一个预设计的CSS 布局；否则，选择“无”。基于您的选择，在对话框的右侧将显示选定布局的预览和说明。 注：预设计的 CSS 布局提供了下列类型的列：l 固定列宽是以像素指定的。列的大小不会根据浏览器的大小或站点访问者的文本设置来调整。l 弹性列宽是以相对于文本大小的度量单位（全方）指定的。如果站点访问者更改了文本设置，该设计将会进行调整，但不会基于浏览器窗口的大小来更改列宽度。l 液态列宽是以站点访问者的浏览器宽度的百分比形式指定的。如果站点访问者将浏览器变宽或变窄，该设计将会进行调整，但不会基于站点访问者的文本设置来更改列宽度。 混合用上述三个选项的任意组合来指定列类型。例如，两列混合，右侧栏布局具有可缩放至浏览器大小的液态主列，而右侧的弹性列可缩放至站点访问者的文本设置的大小。4 从“ 文档类型” 弹出菜单中选择文档类型。大多数情况下，可以使用默认选择，即 XHTML 1.0 Transitional。 从“ 文档类型” 菜单中选择一种 XHTML 文档类型定义使页面符合 XHTML。例如，可从菜单中选择“XHTML 1.0Transitional” 或“XHTML 1.0 Strict”，使 HTML 文档符合 XHTML 规范。XHTML （可扩展超文本标记语言）是以XML 应用的形式重新组织的 HTML。通常，利用 XHTML，可以获得 XML 的优点，同时还能确保 Web 文档的向后和向前兼容性。5 如果在“ 布局” 列中选择了 CSS 布局，则从“ 布局 CSS 位置” 弹出菜单中为布局的 CSS 选择一个位置。l 添加到文档头将布局的 CSS 添加到要创建的页面头中。l 新建文件将布局的 CSS 添加到新的外部 CSS 文件并将新的样式表附加到要创建的页面中。l 链接到现有文件可以通过此选项指定已包含布局所需的CSS 规则的现有CSS 文件。为此，请单击“ 附加CSS 文件” 窗格上方的“ 附加样式表” 图标并选择一个现有CSS 样式表。当您希望在多个文档上使用相同的CSS 布局（CSS 布局的CSS 规则包含在一个文件中）时，此选项特别有用。6 （可选）创建页面时，还可以将 CSS 样式表附加到新页面（与 CSS 布局无关）。为此，请单击“ 附加 CSS 文件” 窗格上方的“ 附加样式表” 图标并选择一个 CSS 样式表。7 如果要设置文档的默认首选参数（如文档类型、编码和文件扩展名），请单击“ 首选参数”。8 如果要打开可在其中下载更多页面设计内容的 Dreamweaver Exchange，请单击“ 获取更多内容”。9 单击“ 创建” 按钮。10 保存新文档（“ 文件”“ 保存”）。11 在出现的对话框中，浏览到要用来保存文件的文件夹。 注：最好将文件保存在 Dreamweaver 站点中。12 在“ 文件名” 框中，键入文件名。 注：请不要在文件名和文件夹名中使用空格和特殊字符，文件名也不要以数字开头。具体说来就是不要在打算放到远程服务器上的文件名中使用特殊字符（如 、 或 ）或标点符号（如冒号、斜杠或句号）；很多服务器在上传时会更改这些字符，这会导致与这些文件的链接中断。创建基于现有模板的页面 可以选择、预览文档并通过现有模板创建新的文档。可以使用“ 新建文档”对话框从Dreamweaver 定义的任何站点中选择模板，也可以使用“资源”面板从现有模板创建新的文档。创建基于模板的文档1 选择“ 文件”“ 新建”。2 在“ 新建文档” 对话框中，选择“ 模板中的页” 类别。3 在“ 站点” 列中，选择包含要使用的模板的 Dreamweaver 站点，然后从右侧的列表中选择一个模板。4 如果您不希望在每次更改该页面所基于的模板后都更新此页面，请取消选择“ 当模板改变时更新页面”。5 如果要设置文档的默认首选参数（如文档类型、编码和文件扩展名），请单击“ 首选参数”。6 如果要打开可在其中下载更多页面设计内容的 Dreamweaver Exchange，请单击“ 获取更多内容”。7 单击“ 创建” 并保存文档（“ 文件”“ 保存”）。在资源面板中从模板创建文档1 如果“ 资源” 面板尚未打开，请将其打开（“ 窗口”“ 资源”）。2 在“ 资源” 面板中，单击左侧的“ 模板” 图标以查看当前站点中的模板列表。3 右键单击 (Windows) 或按住 Control 单击 (Macintosh) 要应用的模板，然后选择“ 从模板新建”。将在“ 文档” 窗口中打开文档。4 保存文档。创建基于 Dreamweaver 示例文件的页面 Dreamweaver 附带了几种以专业水准开发的页面布局和设计元素文件。可以基于这些示例文件开始设计站点页面。当创建基于示例文件的文档时，Dreamweaver 会创建文件的副本。 可以在“新建文档”对话框中预览示例文件并阅读文档的设计元素的简要说明。如果选择了“CSS 样式表”类别，可以复制预先设计的样式表，然后将其应用于您的文档。 注：如果创建基于预定义框架集的文档，则仅复制框架集结构，而不复制框架内容。另外，必须分别保存每个框架文件。1 选择“ 文件”“ 新建”。2 在“ 新建文档” 对话框中，选择“ 示例中的页” 类别。3 在“ 示例文件夹” 列中，选择“CSS 样式表”、“ 框架集”、“ 起始页（主题）” 或“ 起始页（基本）” ；然后从右侧的列表中选择一个示例文件。4 单击“ 创建” 按钮。新文档在“ 文档” 窗口中打开（“ 设计” 视图）。如果选择了“CSS 样式表”，则 CSS 样式表将在“ 代码” 视图中打开5 保存该文档（“ 文件”“ 保存”）。6 如果出现“ 复制相关文件” 对话框，请设置该选项，然后单击“ 复制”，将资源复制到所选的文件夹中。在文件面板中处理文件打开文件1 在“ 文件” 面板（“ 窗口”“ 文件”）中，从弹出菜单（其中显示当前站点、服务器或驱动器）中选择站点、服务器或驱动器。2 定位到要打开的文件。3 请执行下列操作之一：l 双击该文件的图标。l 右键单击 (Windows) 或按住 Control 单击 (Macintosh) 该文件的图标，然后选择“ 打开”。Dreamweaver 会在“ 文档” 窗口中打开该文件。创建文件或文件夹1 在“ 文件” 面板（“ 窗口”“ 文件”）中，选择一个文件或文件夹。Dreamweaver 将在当前选定的文件夹中（或者在与当前选定文件所在的同一个文件夹中）新建文件或文件夹。2 右键单击 (Windows) 或按住 Control 单击 (Macintosh)，然后选择“ 新建文件” 或“ 新建文件夹”。3 输入新文件或新文件夹的名称。4 按 Enter (Windows) 或 Return (Macintosh)。删除文件或文件夹1 在“ 文件” 面板（“ 窗口”“ 文件”）中，选择要删除的文件或文件夹。2 右键单击 (Windows) 或按住 Control 并单击 (Macintosh)，然后选择“ 删除”。重命名文件或文件夹1 在“ 文件” 面板（“ 窗口”“ 文件”）中，选择要重命名的文件或文件夹。2 执行下列操作之一，激活文件或文件夹的名称：l 单击文件名，稍停片刻，然后再次单击。l 右键单击 (Windows) 或按住 Control 单击 (Macintosh) 该文件的图标，然后选择“ 重命名”。3 键入新名称，覆盖现有名称。4 按 Enter (Windows) 或 Return (Macintosh)。移动文件或文件夹1 在“ 文件” 面板（“ 窗口”“ 文件”）中，选择要移动的文件或文件夹。2 请执行下列操作之一：l 复制该文件或文件夹，然后粘贴在新位置。l 将该文件或文件夹拖到新位置。3 刷新“ 文件” 面板可以看到该文件或文件夹在新位置上。刷新文件面板 请执行下列操作之一：l 右键单击 (Windows) 或按住 Control 单击 (Macintosh) 该文件和文件夹，然后选择“ 刷新”。l ( 仅对 Dreamweaver 站点）单击“ 文件” 面板工具栏上的“ 刷新” 按钮（此选项刷新两个窗格）。 注：当在另一个应用程序中进行了更改并返回到 Dreamweaver 时，Dreamweaver 会刷新“ 文件” 面板。标识和删除未使用的文件1 选择“ 站点”“ 检查站点范围的链接”。 注：Dreamweaver 检查站点中的所有链接，并在“ 结果” 面板中显示断开的链接。2 在“ 链接检查器” 面板上的菜单中选择“ 孤立的文件”。 注：Dreamweaver 将显示没有入站链接的所有文件。这意味着站点中没有链接到这些文件的文件。3 选择要删除的文件，按Delete(Windows)或Command+Delete (Macintosh)。 注：尽管站点中没有其它文件引用列出的文件，但列出的某些文件可能链接到了其它文件。因此删除这些文件时要谨慎。使用报告测试站点运行报告以测试站点1 选择“ 站点”“ 报告”。 注：若要仅为站点运行辅助功能报告，可以选择“文件”“检查页”“检查辅助功能”，报告将出现在“结果”面板组的“站点报告” 面板中。2 从“ 报告在” 弹出菜单中选择要报告的内容，并设置要运行的任意一种报告类型（工作流程或 HTML）。只有在“ 文件” 面板中已经有选定文件的情况下，才能运行“ 站点中的已选文件” 报告。3 如果您选择了工作流程报告，请单击“ 报告设置”。否则，跳过这一步。 注：如果选择不止一个工作流程报告，则对每个报告都需要单击“ 报告设置” 按钮进行设置。选择一个报告，单击“ 报告设置”，输入设置，然后对任何其它工作流程报告重复该过程。l 取出者创建一个报告，列出某特定小组成员取出的所有文档。输入小组成员的名称，然后单击“ 确定”，返回到“ 报告” 对话框。l 设计备注创建一个报告，列出选定文档或站点的所有设计备注。输入一对或多对名称和值，然后从相应的弹出菜单中选择对比值。单击“ 确定”，返回到“ 报告” 对话框。l 最近修改创建一个报告，列出在指定时间段内发生更改的文件。输入要查看文件的日期范围和所在位置。4 如果选择 HTML 报告，则从以下报告中选择：l 可合并嵌套字体标签创建一个报告，列出所有可以合并的嵌套字体标签以便清理代码。例如，将报告STOP! 。l 没有替换文本会创建一个报告，列出所有没有替换文本的img 标签。 注：在纯文本浏览器或设为手动下载图像的浏览器中，替换文本将替代图像出现在应显示图像的位置。屏幕阅读器将读出替换文本，而且有些浏览器可在用户鼠标经过图像时显示替换文本。l 取出者创建一个报告，列出某特定小组成员取出的所有文档。l 辅助功能创建一个报告，详细列出您的内容与 1998 年康复法案的第 508 款辅助功能准则之间的冲突。l 多余的嵌套标签建一个报告，详细列出应该清理的嵌套标签。l 例如，将报告 The rain in Spain stays mainly in the plain 。l 可移除的空标签创建一个报告，详细列出所有可以移除的空标签以便清理 HTML 代码。例如，可能在“ 代码” 视图中已删除了某项或某个图像，却留下了应用于该项的标签。l 无标题文档创建一个报告，列出在选定参数中找到的所有无标题的文档。5 单击“ 运行”，创建报告。 根据运行的报告的类型，可能会提示保存文件、定义站点或选择文件夹（如果尚未执行这些操作）。“ 站点报告” 面板（在“ 结果” 面板组中）中将显示一个结果列表。使用和保存报告1 运行报告（请参阅前面的步骤）。2 在“ 站点报告” 面板中，执行以下任一操作来查看报告：l 单击要按其排序的列标题以对结果进行排序。 注：可以按文件名、行号或说明进行排序。还可以运行若干不同的报告并让不同的报告保持打开状态。l 选择报告中的任一行，然后单击“ 站点报告” 面板左侧的“ 更多信息” 按钮可以了解问题说明。信息即会出现在“ 参考” 面板中。l 双击报告中的任一行可以在“ 文档” 窗口中查看相应的代码。 注：如果您正在使用“ 设计” 视图， Dreamweaver 将更改显示以拆分视图，以显示代码中报告的问题。3 单击“ 保存报告”