网页制作实验指导书-全稿.doc

1、网页制作实验指导书第 1 页第一章 网页制作开发工具的基本操作实验 1.1 Dreamweaver 8 软件的基本操作【相关知识】1. Dreamweaver8 相对于其他以前的版本增加和增强的功能有：支持 XML 数据、增加样式呈现工具栏、增强 CSS 设计、增加代码折叠功能 。2. Dreamwaver 8 支持 Windows 和 Macintosh 两种操作系统。3. 在 Dreamweaver 8 中可以使用 HTML、CSS、XML 等多种文件类型，主要的文件类型是 HTML 文件，可以使用.html 或.htm 扩展名保存 HTML 文件。一、实验目的和要求 学会 Dreamwe

2、aver 8 的安装和卸载的方法。二、实验步骤1. 安装 Dreamwaver 8（1）运行 ，打开安装向导对话框。（2）单击下一步按钮，打开安装向导的许可证协议页面。（3）选中我接受该许可证协议中的条款，单击下一步按钮，打开选择安装路径的对话框。（4）可以通过选中创建快速启动栏快捷方式或在桌面上创建快捷方式复选框来创建快速启动栏快捷图标或桌面快捷图标，单击更改按钮，打开更改当前目的地文件夹页面。（5）在文件夹名称文本框中输入新的文件夹路径，单击确定按钮，返回安装路径对话框，单击下一步，打开默认的文件类型对话框。（6）单击下一步按钮，打开已做好安装程序的准备对话框。（7）单击安装按钮，开始安装

3、 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.

4、Fireworks 8 是一款专门针对 Web 图像设计而开发的软件，可以用来创建和编辑网页图形，对其进行动画处理，添加高级交互功能以及优化图像等。2. Fireworks 8 是一个将矢量图像处理和位图图像处理合二为一的应用程序，可以直接在位图图像状态和矢量图像状态之间进行切换，避免了图像在多个应用程序之间的来回迁移。3. Fireworks 8 相对以前版本，增加了许多友好、高效的新特性，主要体现在优化、集成的工作流程、简而不繁的创作过程以及工作流程的改进等方面。网页制作实验指导书第 2 页一、实验目的和要求 学习 Fireworks 8 的安装和卸载方法。二、实验步骤1. 安装 Fire

5、works 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

6、. 通常一个 Flash 动画只应用一个场景，但若动画长度过于庞大或者动画的图层和要素过多，则可创建多个场景，并在场景中分别制作动画的不同部分，便于动画的制作和管理。一、实验目的和要求 学习 Flash 8 的安装与卸载方法。二、实验步骤1. 安装 Flash 8（1）运行 ，打开安装向导对话框。（2）其余步骤与安装 Dreamweaver 类似，只是在第（3）步后会打开是否安装 Macromedia Flash Player 对话框，选择下一步即可。2. 卸载 Flash 8步骤与卸载 Dreamweaver 类似，略。第二章 HTML 基础实验 2.1 HTML 中的结构标记【相关知识】1

7、. HTML 即超文本标记语言，是一种用来制作超文本文档的简单标记语言，是 WWW 的描述语言。2. HTML 超文本文档分为头和主体两部分。文档头是对该文档进行的必要定义，文档体是要显示的信息。网页制作实验指导书第 3 页3. 几乎任何的文字编辑器都可以用来编写 HTML 文件，如记事本、写字板等，只要将文件存成 ASCII 纯文本格式，并以.htm 或.html 为扩展名即可。4. HTML 语言是在 Dreamweaver 8 的代码窗口中编写的。一、实验目的和要求 1. 掌握 Dreamweaver 8 中编写代码的方法。2. 掌握 HTML 超文本文档的基本结构和编写方法。二、实验步

8、骤1. HTML 的基本结构在 Dreamweaver 8 的代码窗口中， 写入 HTML 的基本结构代码，如下所示。选择文档工具栏中的 图表后单击预览在 IEexplore 6.0或者直接单击 F12 命令，可预览效果。2. 网页头部标记在 Dreamweaver 8 的代码窗口中 ，增加网页头部代码，由、标识，如下所示，预览效果。网页头部信息 3. 网页主体标记在 Dreamweaver 8 的代码窗口中 ，增加网页主体代码，由、标识，如下所示。网页头部信息 网页主体信息单击 F12 命令，可在浏览器中预览效果。【操作技巧与注意事项】1. HTML 的两大结构部分都要方在 之间。2. 编写

9、 HTML 代码时大小写的效果是一样的。网页制作实验指导书第 4 页实验 2.2 HTML 中的格式标记【相关知识】1. HTML 提供了 6 个等级的标题标记 ，n 越小，标题字号就越大。2. 换行标记是一个单标记，表示换行。3. 段落标记有一个 ALIGN 属性，用来指明字符显示的对齐方式，一般值有CENTER、LEFT、RIGHT 三种。4. 水平线标记有四个属性：size 表示水平线的宽度；width 表示水平线的长；align 表示水平线的对齐方式，有 center、left 、right 三种； noshade 表示线段无阴影，为实心线段。一、实验目的和要求 1. 掌握标题、换行、

10、段落标记的 HTML 编写方法。2. 掌握水平线标记的 HTML 编写方法。二、实验步骤1. 标题标记在 Dreamweaver 8 的代码窗口中 ，在、中增加 HTML 的标题标记代码，如下所示。网页头部信息 网页主体信息一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 单击 F12 命令，可在浏览器中预览效果。2. 换行标记在 Dreamweaver 8 的代码窗口中 ，在、中增加换行标记的代码，如下所示。第一阶段：2008 年 6 月2008 年 9 月第二阶段：2008 年 10 月2008 年 12 月第三阶段：2009 年 1 月2009 年 4 月单击 F12 命令，可

11、在浏览器中无换行标记和有换行标记的预览效果。3. 段落标记在 Dreamweaver 8 的代码窗口中 ，在、中增加段落标记的代码，如下所示。网页制作实验指导书第 5 页第一阶段：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 年

12、1 月2009 年 4 月单击 F12 命令，可在浏览器中预览效果。5. 水平线标记在 Dreamweaver 8 的代码窗口中 ，在、中增加水平线标记代码，如下所示。网页头部信息 网页主体信息一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 第一阶段：2008 年 6 月2008 年 9 月第二阶段：2008 年 10 月2008 年 12 月第三阶段：2009 年 1 月2009 年 4 月单击 F12 命令，可在浏览器中预览效果。6. 水平线标记属性在 Dreamweaver 8 的代码窗口中 ，在、中增加水平线标记属性代码，如下所示。第一阶段：网页制作实验指导书第 6 页20

13、08 年 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. 一个超级链接的基本格

14、式是： 链接文字 3. 插入图像链接的格式为：一、实验目的和要求 1. 掌握超级链接标记中的 URL 链接、本地链接、目录链接的方法。2. 掌握插入图像标记方法。二、实验步骤1. 超级链接标记中的 URL 链接在 Dreamweaver 8 的代码窗口中 ，在 HTML 代码中插入超级链接标记，如下所示。新浪 F12 命令，可在浏览器中预览效果。点击“新浪”即可打开 http:/ 网页。2. 超级链接标记中的本地链接在 Dreamweaver 8 的代码窗口中 ，在 HTML 代码中插入超级链接标记，如下所示。相对路径 绝对路径 F12 可在浏览器中预览效果。点击“相对路径”和“绝对路径”都可

15、打开 E:mysiteindex.html 网页。3. 超级链接标记中的目录链接在 Dreamweaver 8 的代码窗口中 ，在 HTML 代码中插入超级链接标记，如下所示。网页制作实验指导书第 7 页游戏 单击 F12 命令，可在浏览器中预览效果。点击“游戏”即可打开 D:游戏。4. 插入图像标记在 Dreamweaver 8 的代码窗口中 ，在 HTML 代码中插入超级链接标记，如下所示，F12 可预览效果。【操作技巧与注意事项】1. 超级链接中的目录链接只能打开目录文件夹，而无法打开其中的相关文件。2. 超级链接中的本地链接中只能打开网页，并且在网页名称后面要加上后缀.htm 或.ht

16、ml。3. 图像标记中 src 后面的图像路径要写清楚，特别是该图像不是在默认文件夹下的时候。4. 在链接的各个要素中，链接地址最重要，一旦路径出错，该链接就无法从用户端取得。第三章 Dreamweaver 网页设计实验 3.1 本地站点管理【相关知识】1. 站点是构建在网络上、具有独立名称的逻辑上的独立体。大到一个网站，小到一个网页。2. 通常将存储于 Internet 服务器上的站点和相关文档称为远程站点。将存储于本地计算机上的站点和相关文档称为本地站点。在网站建设中，一般的步骤是：先在本地计算机上创建本地站点，然后再将本地站点的相关文档通过 FTP 等方式上传到服务器上。3. 为了有效地

17、管理站点中的文件，在制作网页之前应先规划站点的目录结构，然后定义一个站点，将站点中的全部文件分门别类地放在不同的文件夹下。一、实验目的和要求1. 掌握创建本地站点的方法。2. 掌握编辑和删除本地站点的方法。3. 掌握在本地站点中新建、复制、粘贴、删除和重命名文件夹方法。4. 掌握在本地站点中新建、复制、粘贴、删除和重命名文件的方法。二、实验步骤1. 创建本地站点（1）单击【站点】【新建站点】菜单命令，打开站点定义向导。切换到【基本】选项卡下，输入站点名称为“NewSite” 。单击【下一步】按钮。（2）选中【否，我不想使用服务器技术】选项。单击【下一步】按钮。（3）选中【编辑我的计算机上的本地

18、副本，完成后再上传到服务器（推荐） 】选项。单击【浏览】按钮设置将文件存储在计算机上的位置。单击【下一步】按钮。（4）在【您如何连接到远程服务器】下拉列表中选择“无” 。单击【下一步】按钮。（5）检查对话框中所设置的信息是否正确。如果有错误，可以单击【上一步】按钮，修改本地站点设网页制作实验指导书第 8 页置信息。如果正确，则单击【完成】按钮。2. 管理本地站点（1）单击【站点】【管理站点】菜单命令，打开【管理站点】对话框。单击【编辑】按钮可以对已有站点重新进行编辑。（2）打开【站点定义】对话框，切换到【高级】选项卡下。在【分类】列表框中选择【本地信息】选项。可以设置默认图像文件夹、链接相对于

19、文档还是站点根目录、HTTP 地址等内容。在【分类】列表框中选择【远程信息】选项。在【访问】下拉列表中选择“FTP” ，可以设置 FTP 主机名、主机目录、登录用户名、密码等内容。单击【测试】按钮，可以检查是否能登录到指定主机。在【分类】列表框中选择【测试服务器】选项。可以设置服务器模型、访问方式并进行测试。（3）在【管理站点】对话框中，单击【复制】 、 【删除】 、 【导入】 、 【导出】按钮可以对已有站点进行管理。单击【完成】按钮可以关闭【管理站点】对话框。3. 创建文件夹（1）打开【文件】浮动面板，选中“NewSite”本地站点。（2）在面板的空白处单击鼠标右键，在弹出的快捷菜单中选择【

20、新建文件夹】菜单命令，输入文件夹名称“web” 。（3）按照同样的方法，新建文件夹“image” 。4. 创建文件（1）打开【文件】浮动面板。选中文件夹“web” ，单击鼠标右键，在弹出的快捷菜单中选择【新建文件】菜单命令，输入文件名“index.html” 。（2）按照同样的方法，新建文件“main.html” 。5. 编辑文件夹和文件打开【文件】浮动面板，选中文件夹或文件，单击鼠标右键，在弹出的快捷菜单中选择【编辑】菜单命令，可以对文件夹或文件进行剪切、复制、粘贴、删除、重命名操作。6. 显示站点地图一旦对站点中的文件建立超链接，就可以非常直观地在站点地图中看到各网页的链接关系。打开【文件

21、】浮动面板，单击【展开以显示本地和远端站点】按钮 可以展开或折叠站点地图。打开的窗口中左边是站点地图。右边是站点文件的目录结构。【操作技巧与注意事项】1. 尽量使用小写英文字母给站点、站点中的文件夹、文件命名。2. 应将网页文件按照类型、用途等保存在不同的文件夹中。实验 3.2 制作简单网页【相关知识】1. 网页就是在浏览器上看到的一个一个的页面。它们都是用 HTML 的文件格式来表示的。2. 在页面属性中，可以对网页的标题、背景颜色等进行设置。3. 在 HTML 文档中，文件头 和标签之间的内容在网页中是看不到的。可以在文件头信息中插入 META、关键字、说明等。 META 元素用于描述网页

22、文件自身的信息。在搜索引擎中，检索信息都是通过输入关键字来实现的。网页制作实验指导书第 9 页4. 在历史面板中，按照操作的顺序记录了使用者在文档窗口中的所有操作。使用历史面板可以非常方便地撤销以前的操作或再次执行某些操作。一、实验目的和要求1. 熟悉 Dreamweaver 工作环境。2. 掌握创建网页文档的方法。3. 掌握页面属性设置的方法。4. 掌握在页面中插入和编辑文本的方法。5. 掌握在页面中创建项目列表的方法。二、实验步骤1. 新建一个网页文档启动 Dreamweaver。单击【文件 】【新建】菜单命令，新建一个网页文档。2. 设置页面属性（1）单击【修改】【页面属性】菜单命令，打

23、开【页面属性】对话框。（2）在【分类】列表框中选择【外观】 ，设置页面【字体】为“宋体” ；字体【大小】为“中” ；【文本颜色】为“#0033FF” ；【背景颜色】为“#FFFFCC” 。（3）在【分类】列表框中选择【标题/编码】选项，设置【标题】为“我的第一个网页” 。（4）单击【确定】按钮。3. 格式化文本（1）在文档的第 1 行输入“网页制作课程介绍” 。（2）选中所有文字，在属性面板的【字体】下拉列表中选择“黑体” ；在【大小】下拉列表中选择“大”；单击【居中对齐】按钮。（3）如果字体下拉列表中没有“黑体” ，则单击【字体】下拉列表中的【编辑字体列表】选项，打开【编辑字体列表】对话框。

24、（4）在对话框的【可用字体】列表中选中“黑体” ，单击 按钮，将“黑体”添加到【选择的字体】列表中。单击【确定】按钮，将“黑体”添加到字体下拉列表中。4. 创建项目列表（1）在文档的第 2 行输入“网页布局软件 Dreamweaver”。第 3 行输入“图像处理软件 Fireworks”。第4 行输入“动画制作软件 Flash”（2）选中第 2-4 行所有文字，在属性面板中单击 【项目列表】按钮。创建项目列表。5. 添加特殊网页元素（1）将光标放在第 1 行末尾处，单击【插入】【日期】菜单命令，打开【插入日期】对话框。在对话框的【星期格式】下拉列表中选择“星期四， ”；在【日期格式】列表中选择

25、“1974 年 3 月 7 日” ；在【时间格式】下拉列表中选择“10:18 PM”；选中【储存时自动更新】复选项。单击【确定】按钮。插入当前系统日期和时间，并且在文档每次修改后都会自动更新插入的日期和时间。（2）将光标放在第 1 行末尾处，单击回车键，将光标放在第 2 行起始处。（3）单击【插入】【HTML】【水平线】菜单命令，在文档中插入一条水平线。（4）选中该水平线，在属性面板中，设置水平线的【宽】为“700 像素” ；【高】为“5 像素” ；在【对齐】下拉列表中选择“居中对齐” ；设置【阴影】复选项为不选中。6. 使用颜色面板在网页设计中，很多场合都需要使用颜色面板设置颜色，对颜色面板

26、的操作方法是相同的。这里以设置网页制作实验指导书第 10 页文本的颜色为例进行说明。（1）选中文本，在属性面板中，单击【文本颜色】按钮，打开颜色面板，如图 3-1 所示。图 3-1 颜色面板（2）选取一种颜色。如果颜色面板中没有符合需要的颜色，可以单击颜色面板上的【系统颜色拾取器】按钮 ，打开【颜色拾取器】面板，自己拾取一种颜色。7. 插入文件头信息（1）单击【插入】【HTML】【文件头标签】【META】菜单命令，打开【META】对话框。在对话框的【属性】下拉列表中选择“名称” ；设置【值】为“Content-Type” ；设置【内容】为“text/html;charset=gb2312”。

27、单击【确定】按钮，即可设置 META 元素。（2）单击【插入】【HTML】【文件头标签】【关键字】菜单命令，打开【关键字】对话框。在文本框中输入关键字。多个关键字之间用逗号分隔。单击【确定】按钮，即可插入关键字，实现按关键字对网站信息的搜索。（3）单击【插入】【HTML】【文件头标签】【说明】菜单命令，打开【说明】对话框。在文本框中输入说明文字。单击【确定】按钮，即可插入说明。（4）单击【插入】【HTML】【文件头标签】【刷新】菜单命令，打开【刷新】对话框。设置【延迟】为“500 秒” ；在【操作】处选中“刷新此文档” 。单击【确定】按钮，即可实现对页面的自动定时刷新。8. 使用历史面板（1）

28、单击【窗口】【历史记录】菜单命令，打开【历史记录】面板。拖动【历史记录】面板上的滑块，可以撤销若干操作。回到操作前的状态。（2）按住【Shift】键，单击【历史记录】面板上的多个记录。单击【历史记录】面板右上角的 按钮，弹出快捷菜单。选择【重播步骤】菜单命令，可以再次执行这些操作。（3）单击【历史记录】面板右上角的 按钮，弹出快捷菜单。选择【清空历史记录】菜单命令，可以清空所有历史记录。9. 保存网页文档单击【查看】【工具栏】【标准】菜单命令，添加标准工具栏。在标准工具栏上单击【保存】按钮。文件命名为 index.html，将网页文档保存。10. 预览网页单击【F12】 ，或者单击【文件】【在浏览器中预览】【IExplore 6.0】菜单命令，在浏览器中打开网页，可以预览设计效果。【操作技巧与注意事项】1. 在设置页面属性时，一般将左右边距都设置为“0”。使得页面不会有太多空白区。