网页设计与制作实验指导书.doc

1、1网页设计与制作实验指导书黄石理工学院计算机学院二八年八月二十月2目 录实验一 HTML 的基本标志的使用 4 学时实验二 HTML 表格、表单与框架标志使用 6 学时实验三 CSS 层叠样式表的使用 4 学时实验四 网页图像处理与动画制作 6 学时实验五 使用 Dreamweaver 编辑网站 4 学时实验六 网站设计与制作 6 学时3实验一 HTML 的基本标志的使用【 实验目的 】 1、 使学生掌握 HTML的基本标志的使用方法2、 掌握 Dreamweaver 的基本使用方法，并利用 Dreamweaver 工具制作一个比较完整的网页。 【 实验器材 】安装有 Windows 98/2

2、000/xp；Dreamweaver MX，Flash MX，Fireworks MX；IE 浏览器，NetScape 浏览器，IIS5.0 等软件的计算机。【 实验内容 】 基本 HTML标记符的使用； Dreamweaver 的使用； 本地站点的创建； 网页页面属性设置；【 实验步骤 】一、使用 Windows操作系统自带的记事本程序编写一个网页。要求窗体标题为“这是我的第一个网页”，使用*。HTML 文档由 head和 body两部分组成，使用*和*。用浏览器阅读时要看见 4段文字，每段文字的 size分别是 8、6、4、2，使用*，其中要求每段文字的颜色不同，分别为#00ffff、#8

3、82299、#ff0088、#55ccaa，使用*，每段文字要求居中排列，使用*。编写完成后用 HTML为文件扩展名存盘。使用浏览器浏览编写的 HTML文档。二、在 Dreamweaver中建立本地站点1、在 Dreamweaver文档窗口中，依次单击“站点”菜单“新建站点”命令或者是在“站点”面板中单击“站点”菜单“新建站点”命令，打开“站点定义”对话框。如图所示。选择“高级”选项卡建立站点(也可以按“基本”选项卡中的向导进行操作，但不如用“高级”选项卡方便)。4“站点定义”对话框2、管理本地站点选择“站点”面板“文件”菜单中对应命令，即可对选取文件进行编辑操作。例如，选择文件后，在“站点”

4、面板中选择“文件”菜单中的“打开”命令，则 Dreamweaver在文档窗口中打开该文件(当然最简单的方法是在站点中双击相应的文件图标)。在对站点中的文件或文件夹进行操作时，合理地使用右键快捷菜单能大大加快操作速度。例如，在选中的文件夹上单击鼠标右键，然后选择“新建文件夹”命令，可以在相应文件夹中新建一个文件夹。3、编辑站点具体操作步骤如下：在站点面板中单击“站点名称”框右边的下拉列表按钮，在下拉列表中选择“编辑站点”命令，打开“编辑站点”对话框，如图所示。“编辑站点”对话框三、使用超级链接实现站内网页的跳转。使用 Dreamweaver建立一个 Web站点，在站点内部新建 5个 HTML页面

5、，分别为首页（index.html）、汽车（auto.html）房产（house.html）、运动(sport.html)、游戏（game.html）。要求在每个页面里分别添加对其它四个页面的链接，保证用户能够在五个页面中正常的跳转。切换到代码视图认真观察超链接标记的使用方法，在浏览器中测试链接的有效性。四、图像映射超链接选中网页中插入的图片，打开属性控制面板，其面板的左下角区域即用于设置图片映像的区域。如图所示。属性控制面板热区设置工具选中图中绘制工具： 矩形热区绘制工具 圆形热区绘制工具 多边形热区绘制5工具，其中一种，就可以在图片上绘制热区了。当绘制完热区后，属性控制面板中显示出热区的属

6、性，在 link栏内输入网址或网页文件名，或点击 link栏右侧的文件夹按钮，在打开的对话框中选择一个网页文件作为链接地址。五、利用 Dreamweaver为修改网页的页面属性打开 Dreamweaver，新建一个网页。打开页面属性面板，修改网页的字体、文本颜色、和背景颜色，修改超级链接的颜色和样式，添加网页标题，设置网页跟踪图像。预览修改后的页面。【 问题讨论 】1、 如果超链接的对象不是某个文件，而是同一个文件中的某个段落区域，该如何编写HTML代码。2、 如何给网页添加水印效果。3、 如何给网站添加虚拟目录。6实验二 HTML 表格、表单与框架标志使用【 实验目的 】 使学生掌握表格插入

7、、修改、删除及应用，表单的制作和框架的建立及实际应用。 【 实验器材 】安装有 Windows 98/2000/xp；Dreamweaver MX，Flash MX，Fireworks MX；IE 浏览器， NetScape 浏览器，IIS5.0 等软件的计算机。【 实验内容 】 利用表格布局网页 利用表单制作注册页面 建立 1个框架网页； 层的使用【 实验步骤 】一、利用表格布局网页用 Dreamweaver 创建一个 HTML 文件，在设计视图中用表格来进行一个“三字型”页面布局，要求表格的宽度设置为 800px，高度为 600px。表格内三个单元格的高度依次为100px、400px、10

8、0px，三个表格的背景使用不同的颜色（必须注意颜色的搭配） 。表格的对齐方式均为水平垂直居中，表格的边框大小设置为 1，颜色设置为黑色。在表格里面输入适当的文本内容，并对文本内容进行修饰。切换到代码视图认真观察文本标记和表格标记的使用方法，使用浏览器浏览设计的HTML 文档结果。二、制作一个用户注册页面图 21 新用户注册页面7使用 Dreamweaver 制作一个用户注册页面，要求使用表格布局，页面中必须包含、 、等标记。页面制作效果如图 11 所示。切换到代码视图认真观察表单标记的使用方法，使用浏览器浏览设计的 HTML 文档结果。三、创建一个框架网页创建框架结构一般有两种方法：一是使用“

9、新建文档”对话框中的“框架集”选项新建一个框架结构的页面文档；二是利用“插入栏”中的“框架 ”选项中提供了框架结构创建。使用“新建文档”命令创建框架结构操作方法如下： 单击“文件”菜单，选择“新建”命令，弹出“新建文件”对话框。在“新建文件”对话框中，选择“框架集”类别，四、层的运用制作下拉选单（1）现在开始制作下拉出现的菜单，同样用层来制作。再次从 Objects面板的布局栏中插入一个层到前面我们做好的导航条的下方，各项参数填为：“层编号”框填入menu1，左、上、宽、高框分别填入 8、34、120、80，其中 L和 T两个参数是设置这个层距离窗口左边框和上边框的距离，一定不能填错，不然菜单

10、将会错位，也将影响完成后的可用性。层属性设置如图 2-2所示。图 2-2 设置后层 memu1的“属性检查器”这时候，我们便可以在 menu1这个层中输入我们所要的菜单内容。为了排版方便，我在这还是使用表格来做菜单。这个层将作为“经典论坛”的下拉选单出现，填入你所需要的菜单链接。最终效果如图 2-3所示。图 2-3 层 memu1的设计效果（2）同样的方法，再为“天极网”也做一个下拉选单（层 menu2）。其层的属性设置和最终效果如图 2-4和图 2-5所示。图 2-4 设置后层 memu2的“属性检查器”8图 2-5 层 memu2的设计效果（3）按 F2打开 LAYER（层）面板，其中列出

11、了网页中的三个层，点 menu1和 menu2的前面一格，出现闭着的眼睛图标，这两个层便隐藏起来了。操作这一步是因为下拉菜单的初始状态是不可见的。如图 2-6所示。图 2-6“层”面板下面为下拉菜单添加显示和隐藏效果本步骤分为两部分：第一，对导航条中的主菜单添加控制显示隐藏的命令；第二，给下拉选单本身添加显示隐藏的命令。（4）选择第一个单元格中的文字部分，再按 Shift+F4或选择“窗口”-“行为”命令打开行为面析，点 按钮，在下拉选项中选中“显示-隐藏层”（如图 2-7所示）。如果选项中没有这一项或这一项不可用，则选择“显示事件”下的 IE 5.0（如图 2-8所示）后，图 2-7“显示-

12、隐藏层”菜单图 2-8 “显示事件”菜9单重新点击按钮，此时“显示-隐藏层”将出现或变为可用。（5）这时将会弹出“显示-隐藏层”对话框。在“命名的层”框中会列出当前网页所有的层，选中“层 “menu1“ ”，因为我们想要 menu1这个层对“经典论坛”响应。然后点下面的“显示”按钮，选中“层 “menu2“ ”，然后点击下面的“隐藏”按钮，然后单击“确定”即可。如图 2-9所示。图 2-9 “显示-隐藏层”对话框（6）这时会回到行为面板中，面板中出现如图 2-47所示字样，点击文字“onClick”，会出现一个向下的小箭头，点击它，在下拉选项中选中 onMouseOver如图 2-10所示。这

13、一步的作用是实现当鼠标移至第一个单元格时，下拉选单 menu1的状态变为显示（Show）。图 2-10 “行为”面板 图 2-11 下拉选项中的行为动作（7）用同样的方法设置下拉选单 menu2在鼠标移至第二个单元格的文字上时变为显示状态。只是选中“层 “menu2“ ”，然后点下面的“显示”按钮，选中“层 “menu1“ ”，然后点击下面的“隐藏”按钮，如图 2-12所示。回到行为面板中，点击 onClick向下的小箭头，在下拉选项中选中 onMouseOut。图 2-12 “显示-隐藏层”对话框（8）选中层 menu1，用与导航条部分同样的方法在行为面板中为它添加显示与隐藏自己的命令。这样

14、做的效果是当鼠标移出层 menu1时，层 menu1就自动隐藏。最后层 menu1的 onMouseOut行为的设置如图 2-13所示，onMouseOver 行为的设置如图 2-14所示。10图 2-13 层 memu1的 onMouseOut行为设置图 2-14 层 memu1的 onMouseOver行为设置（9）用同样的方法为层 memu2添加显示与隐藏自己的命令。到此为止，这个下拉菜单已经制作完成，保存后我们按 F12键测试。11实验三 CSS 层叠样式表的使用【 实验目的 】熟悉 CSS样式表的创建和应用。 【 实验器材 】安装有 Windows 98/2000/xp；Dreamw

15、eaver MX，Flash MX，Fireworks MX；IE 浏览器，NetScape 浏览器，IIS5.0 等软件的计算机。【 实验内容 】 自定义 CSS样式表。要求：定义一种网页中常用的正文样式，效果为“字体为楷体，文字大小为 20PX，文字颜色为蓝色” ，并应用于文档，预览页面效果； 重新定义 HTML标签样式。要求：重新定义 BODY的标签样式属性，效果为“华文行楷，大小为 20PX，文字颜色为白色，悲景为深蓝色” ，并应用于文档，预览页面效果； CSS选择器样式的定义。要求：通过 CSS选择器样式的设置，实现基于文字超链接的动态效果，链接正常显示（a:link）效果为“字体为

16、楷体，文字大小为 18PX，文字颜色为黑色” ；鼠标停留在链接文字上的样式（a:hover）效果为“字体为隶书，文字大小为 18PX，文字颜色为红色” ，并预览页面效果； 【 实验步骤 】1、 自定义 CSS样式表。要求：定义一种网页中常用的正文样式，效果为“字体为楷体，文字大小为 20PX，文字颜色为蓝色” ，并应用于文档，预览页面效果。实验步骤：（1） 打开一个包含段落文本的文档，打开“CSS 样式”面版，然后单击“新建CSS样式”按钮，在弹出的对话框中输入样式名称，在“类型”中选择“创建自定义样式” ，选择“仅对该文档” ，完成后单击“确定” ；（2） 在打开的对话框中设置“字体为楷体，

17、文字大小为 20PX，文字颜色为蓝色” ，单击“确定” ；（3） 在文档窗口中选取要应用样式的文本，在“CSS 样式” 面版中选择“应用样式”单选按钮，最后在“CSS 样式”列表中单击要应用在样式，并按F12键预览页面效果。2、 重新定义 HTML标签样式。要求：重新定义 BODY的标签样式属性，效果为“华文行楷，大小为 20PX，文字颜色为白色，背景为深蓝色” ，并应用于文档，预览页面效果。实验步骤：（1） 打开一个包含段落文本的文档，打开“CSS 样式”面版，然后单击“新建CSS样式”按钮，在“类型”中选择“重定义 HTML标签” ，在“标签”下拉列表中选择 BODY，选择“仅对该文档”

18、，完成后单击“确定” ；（2） 在打开的对话框中设置“字体为华文行楷，文字大小为 20PX，文字颜色为白菜色” ，在“分类”列表框中选择“背景”选取项，在“背景颜色”文本框中输入“#333366” ，单击“确定” ；（3） 在文档窗口中选取要应用样式的文本，在“CSS 样式” 面版中选择“应用样式”单选按钮，最后在“CSS 样式”列表中单击要应用在样式，并按F12键预览页面效果。3、 CSS选择器样式的定义。要求：通过 CSS选择器样式的设置，实现基于文字超链接的动态效果，链接正常显示（a:link）效果为“字体为楷体，文字大小为 18PX，文字颜色为黑色” ；鼠标停留在链接文字上的样式（a:

19、hover）效果为“字体为隶书，文字大小为 18PX，文字颜色为红色” ，并预览页面效果。实验步骤：12（1） 打开一个包含段落文本的文档，打开“CSS 样式”面版，然后单击“新建CSS样式”按钮，在“类型”中选择“使用 CSS选择器” ，在“选择器”下拉列表中选择“a:link” ，选择“仅对该文档” ，完成后单击“确定” ；（2） 在打开的对话框中设置“字体为楷体，文字大小为 18PX，在“修饰”选项区中选择“无” ，文字颜色文本框中输入“#000000” ”，单击“确定” ；（3） 再次单击“新建 CSS样式”按钮，在“类型”中选择“使用 CSS选择器” ，在“选择器”下拉列表中选择“a

20、: hover”，选择“仅对该文档” ，完成后单击“确定” ；（4） 在打开的对话框中设置“字体为隶书，文字大小为 18PX，在“修饰”选项区中选择“下划线” ，文字颜色文本框中输入“#0000FF” ”，单击“确定”；（5） 保存文件后，按 F12键预览页面效果。13实验四 网页图像处理与动画制作【 实验目的 】1.使学生熟练掌握 Fireworks 图像文档的设置、文档的导入和输出；绘图工具和图像处理工具的使用；掌握图像优化及按指定格式（GIF、JPEG）的导出、掌握按钮、导航条的创建；掌握切片和热点的使用；掌握弹出菜单的制作；掌握图层操作，文字处理，蒙版的创建与编辑，GIF 动画的制作。

21、2.使学生熟练掌握 FLASH MX的基本操作，逐帧动画的创建过程， 补间动画和形状补间的创建，交互动画的创建。【 实验器材 】安装有 Windows 98/2000/xp；Dreamweaver MX，Flash MX，Fireworks MX；IE 浏览器，NetScape 浏览器，IIS5.0 等软件的计算机。【 实验内容 】 Fireworks MX的基本应用； 利用 Fireworks制作 GIF动画； 利用 Flash制作网页动画； 【 实验步骤 】一、Fireworks MX 的基本应用1导入和导出文档（1）导入文档。在编辑文档时，可以调入其他相应格式的文档。单击“文件”“导入”

22、菜单命令，可弹出“导入”对话框。利用该对话框，可以导入 BMP、WMF、TIFF、JPEG和 GIF等格式的图像文件，以及 HTML、ASCII 和 RTF文本等格式的文件。（2）导出文档。单击“文件”“导出”菜单命令或单击主要工具栏中的“导出”按钮，弹出“导出”对话框。利用该对话框，可以选择文件夹、要保存的文件类型（可以保存为 JPEG、GIF 和 HTML等格式文件）和输入文件名，单击“保存”按钮即可。 2优化文档在导出文档前要对文档进行优化处理，可以单击“窗口”“优化”菜单命令，打开“优化”面板，然后利用该面板设置文档格式、调色板类型和设置类型等参数。单击“文件”“导出预览”菜单命令，弹

23、出“导出预览”对话框。利用该对话框可以对文档进行优化设置。 3几何图形和填充属性工具箱中的几何绘图工具（绘制矩形、圆角矩形、椭圆和多边形）的使用方法基本一样。单击工具箱中的几何绘图工具按钮，在其属性栏中设置相应的属性，然后用鼠标在画布中拖曳，即可绘制出相应的几何图形。几何绘图工具的属性栏的特点如下。1） 矩形“矩形”工具和“圆角矩形”工具的属性栏与图 6-1基本相同。圆角矩形工具的“属性”栏增加了一个“矩形圆度”文本框，减少了“效果”栏。它们的属性栏中的第 2栏用来设置选中对象的填充属性。（1） “矩形圆度”文本框：用来设置圆角矩形四角的角度值。（2） “填充类别”下拉列表框：用来选择各种填充

24、方式，例如实心填充、图案填充、线性填充、放射状填充、椭圆形填充和无填充等。如果选择“填充选项”选项，会弹出“填充选项”面板，如图 6-2所示，利用它可以设置填充属性。4-1 “路径”的属性栏4-2 “填充选项”面板14（3）填充颜色按钮：在“填充类别”下拉列表框中选择“实心”选项后，单击它可弹出“颜色”面板，它没有下边的列表框和复选框。利用该面板可以设置对象的填充属性。如果“填充类别”下拉列表框选择的是其他选项，则会弹出相应的面板，利用这些面板可以调整填充属性。在给对象进行非单色的填充后，通常还可以进行填充效果的调整，只要用鼠标拖曳填充物中出现的控制柄，即可进行填充的中心点和填充方向调整，如图

25、 6-3中的第一个图形。“多边形”工具、 “椭圆”工具和其他形状工具的属性栏与图 6-1所示基本相同，设置的方法也基本一样。4增加切点单击“滤镜”“切点”“新增切点”菜单命令，弹出“新增切点”对话框。在该对话框内的“数量”文本框中输入一个数值，或者单击按钮，调出一个滑杆，用拖曳的方法设置切点的数量。然后，单击“确定”按钮，即可给图像添加切点。5图像的负片效果单击“滤镜”“调整颜色”“反转”菜单命令，即可将图像反相，获得图像的负片效果（像照片的底版） ，即对图像中的像素颜色值取其相反的值。6模糊图像Fireworks MX 2004系统对图像的模糊处理是使用“滤镜”“模糊”“”菜单命令实现的。模

26、糊图像有 6种：“放射状模糊” 、 “高斯模糊” 、 “进一步模糊” 、 “缩放模糊” 、 “运动模糊”和“模糊” 。例如，单击“高斯模糊”菜单命令，可弹出“高斯模糊”对话框。调整该对话框中的“模糊范围”数值的大小，单击“确定”按钮，即可使图像模糊。7锐化图像Fireworks MX 2004系统对图像的锐化处理是使用“滤镜”“锐化”“”菜单命令实现的，系统会自动将所选对象进行锐化滤镜处理。Fireworks MX 2004系统对图像的锐化处理有“钝化蒙版” 、 “进一步锐化”和“锐化”3 种方式。如果要设置图像的锐化程度，可单击“锐化蒙版”菜单命令，弹出“钝化蒙版”对话框，利用该对话框即可使

27、图像锐化。 在“钝化蒙版”对话框中， “锐化量”用来设置锐化效果的强度；“像素半径”用来设置锐化过程中像素的半径值，半径值越大，锐化程度越强，半径值越小，锐化程度越弱；“阈值”用来设置对什么对比度以上的像素进行锐化，如果设置为 0，表示所有的像素都被锐化。通过“锐化”滤镜可以处理那些不太清晰的图像，这样可以增大图像区域中像素边缘两侧之间的对比度，从而达到增强图像色彩及局部细节的效果。 8 “转化为 Alpha”滤镜效果“Alpha”通道是一种特殊的通道，它可以将图像中选中的区域转换成 8位灰度图像并存放。利用 Fireworks MX 2004的“转化为 Alpha”滤镜可以使图像透明。单击“

28、滤镜”“其他”“转换为 Alpha”菜单命令，系统会自动地将所选对象进行滤镜处理。如果4-3 绘制的图形例子15再绘制一个图形，放在经过该滤镜处理过的图像的后面，会看到经过滤镜处理的图像具有透明的效果。9查找图像的边界单击“滤镜”“其他”“查找边缘”菜单命令，可以取出一些颜色反差比较大的图像边界。另外，Fireworks MX 2004 系统也可以挂接其他应用软件中的滤镜程序。单击“编辑”“首选参数”菜单命令，可弹出“首选参数”对话框，在“文件夹”选项卡中设置相关的参数，可以完成 Photoshop滤镜的插入与安装。 二、运用 Flash制作网页动画（1） 新建一个 FLASH文挡，在“文挡属

29、性”对话框中，设置场景的“尺寸”为 500px 400px，背景色为白色。（2） 选择工具面板中的铅笔工具，在场景中的第一层第一帧中绘制出幼苗的形状，选择工具面板中的颜料桶工具，将其填充为绿色。（3） 选中当前层中的第二帧，单击鼠标右键，在弹出的快捷菜单中选择“插入关键帧”命令（或按 F6键） ，插入关键帧，其内容和第一个关键帧一样。（4） 在舞台上对该帧的内容稍作修改，使幼苗看起来长大一些。（5） 重复步骤 3和步骤 4继续创建动画后面的帧，直到第 10帧开出花朵。（6） 单击“时间轴”窗口中的“插入图层”按钮，插入图层 2。在第 1帧中利用铅笔工具绘制一个花盆，然后选择颜料桶工具，将其填充

30、。（7） 按 F5键在“图层 2”的第 10帧插入一帧，以延长第 1帧的效果。（8） （按 CTRL+ENTER组合键，测试影片效果。（9） 按 CTRL+S组合键，保存文件。制作一个小球从桌子的一端滚到另一端并落下来要求 通过在关键帧中改变小球的位置来创建补间动画。实验步骤：（1） 新建一个 FLASH文档，在“文档属性”对话框中，设置场景的尺寸为 500px 400px，背景色为白色。（2） 选择“工具”面板中的矩形工具，在场景中的第 1层第 1帧中绘制一张桌子。（3） 选择“工具”面板中的颜料桶工具，将其填充。（4） 选择“插入”“新建元件”命令，打开“创建新元件”对话框，在“名称”文本

31、框中输入“小球”，在“行为”选项区中选择“图形”单选按钮。（5） 进入“小球”编辑区，选择“工具”面板中的椭圆工具，在“属性”面板中设置“填充颜色”为黑白放射渐变，无边线。然后在场景中描绘一个圆。（6） 回到主场景，单击“时间轴”窗口中的“插入图层”按钮，插入“图层 2”。选择“窗口”“库”命令（或按 F11键），打开“库”面板，从中拖动“小球”元件到工作区中。（7） 选中“小球”，调整好它的位置，拖动它到桌子的一端。（8） 选中“图层 1”中的第 30帧，单击鼠标右键，在弹出的快捷菜单中选择“插入帧”命令（或按 F5键） ，插入帧以延长桌子的效果。（9） 选中“图层 2”中的第 30帧，单击鼠标右键，在弹出的快捷菜单中选择“插入关键帧”命令，插入关键帧，然后将小球拖动到桌子的另一端，调整好位置。16（10） 选中“图层 2”中的第 1帧，单击鼠标右键，在弹出的快捷菜单中选择“创建补间动画”命令。（11） 按 CTRL+ENTER组合键，测试影片效果。