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

资源描述

网页设计与制作实验指导书 28 2020年4月19日文档仅供参考网页设计与制作实验指导书黄石理工学院计算机学院二○○八年八月二十月目录实验一 HTML的基本标志的使用 4学时实验二 HTML表格、表单与框架标志使用 6学时实验三 CSS层叠样式表的使用 4学时实验四网页图像处理与动画制作 6学时实验五使用Dreamweaver编辑网站 4学时实验六网站设计与制作 6学时实验一 HTML的基本标志的使用【实验目的】 1、使学生掌握HTML的基本标志的使用方法 2、掌握Dreamweaver 的基本使用方法，并利用 Dreamweaver 工具制作一个比较完整的网页。【实验器材】安装有Windows 98/ /xp；Dreamweaver MX，Flash MX，Fireworks MX；IE浏览器，NetScape浏览器，IIS5.0 等软件的计算机。【实验内容】 Ø 基本HTML标记符的使用； Ø Dreamweaver的使用； Ø 本地站点的创立； Ø 网页页面属性设置；【实验步骤】一、使用Windows操作系统自带的记事本程序编写一个网页。要求窗体标题为“这是我的第一个网页”，使用<title>********</title>。HTML文档由head和body两部分组成，使用<head>***</head>和<body>***</body>。用浏览器阅读时要看见4段文字，每段文字的size分别是8、6、4、2，使用<font size="6">***</font>，其中要求每段文字的颜色不同，分别为#00ffff、#882299、#ff0088、#55ccaa，使用<font color="#00ffff">*******</font>，每段文字要求居中排列，使用<p align="center">******</p>。编写完成后用HTML为文件扩展名存盘。使用浏览器浏览编写的HTML文档。二、在Dreamweaver中建立本地站点 1、在Dreamweaver文档窗口中，依次单击“站点”菜单→“新建站点”命令或者是在“站点”面板中单击“站点”菜单→“新建站点”命令，打开“站点定义”对话框。如图所示。选择“高级”选项卡建立站点(也能够按“基本”选项卡中的向导进行操作，但不如用“高级”选项卡方便)。 “站点定义”对话框 2、管理本地站点选择“站点”面板“文件”菜单中对应命令，即可对选取文件进行编辑操作。例如，选择文件后，在“站点”面板中选择“文件”菜单中的“打开”命令，则Dreamweaver在文档窗口中打开该文件(当然最简单的方法是在站点中双击相应的文件图标)。在对站点中的文件或文件夹进行操作时，合理地使用右键快捷菜单能大大加快操作速度。例如，在选中的文件夹上单击鼠标右键，然后选择“新建文件夹”命令，能够在相应文件夹中新建一个文件夹。 3、编辑站点具体操作步骤如下：在站点面板中单击“站点名称”框右边的下拉列表按钮，在下拉列表中选择“编辑站点”命令，打开“编辑站点”对话框，如图所示。 “编辑站点”对话框三、使用超级链接实现站内网页的跳转。使用Dreamweaver建立一个Web站点，在站点内部新建5个HTML页面，分别为首页（index.html）、汽车（auto.html）房产（house.html）、运动(sport.html)、游戏（game.html）。要求在每个页面里分别添加对其它四个页面的链接，保证用户能够在五个页面中正常的跳转。切换到代码视图认真观察超链接标记的使用方法，在浏览器中测试链接的有效性。四、图像映射超链接选中网页中插入的图片，打开属性控制面板，其面板的左下角区域即用于设置图片映像的区域。如图所示。属性控制面板热区设置工具选中图中绘制工具：矩形热区绘制工具圆形热区绘制工具多边形热区绘制工具，其中一种，就能够在图片上绘制热区了。当绘制完热区后，属性控制面板中显示出热区的属性，在link栏内输入网址或网页文件名，或点击link栏右侧的文件夹按钮，在打开的对话框中选择一个网页文件作为链接地址。五、利用Dreamweaver为修改网页的页面属性打开Dreamweaver，新建一个网页。打开页面属性面板，修改网页的字体、文本颜色、和背景颜色，修改超级链接的颜色和样式，添加网页标题，设置网页跟踪图像。预览修改后的页面。【问题讨论】 1、如果超链接的对象不是某个文件，而是同一个文件中的某个段落区域，该如何编写HTML代码。 2、如何给网页添加水印效果。 3、如何给网站添加虚拟目录。实验二 HTML表格、表单与框架标志使用【实验目的】使学生掌握表格插入、修改、删除及应用，表单的制作和框架的建立及实际应用。【实验器材】安装有Windows 98/ /xp；Dreamweaver MX，Flash MX，Fireworks MX；IE浏览器，NetScape浏览器，IIS5.0 等软件的计算机。【实验内容】 Ø 利用表格布局网页 Ø 利用表单制作注册页面 Ø 建立1个框架网页； Ø 层的使用【实验步骤】一、利用表格布局网页用Dreamweaver创立一个HTML文件，在设计视图中用表格来进行一个“三字型”页面布局，要求表格的宽度设置为800px，高度为600px。表格内三个单元格的高度依次为100px、400px、100px，三个表格的背景使用不同的颜色（必须注意颜色的搭配）。表格的对齐方式均为水平垂直居中，表格的边框大小设置为1，颜色设置为黑色。在表格里面输入适当的文本内容，并对文本内容进行修饰。切换到代码视图认真观察文本标记和表格标记的使用方法，使用浏览器浏览设计的HTML文档结果。二、制作一个用户注册页面图2－1新用户注册页面使用Dreamweaver制作一个用户注册页面，要求使用表格布局，页面中必须包含<input>、<select>、<textarea>等标记。页面制作效果如图1－1所示。切换到代码视图认真观察表单标记的使用方法，使用浏览器浏览设计的HTML文档结果。三、创立一个框架网页创立框架结构一般有两种方法：一是使用“新建文档”对话框中的“框架集”选项新建一个框架结构的页面文档；二是利用“插入栏”中的“框架”选项中提供了框架结构创立。使用“新建文档”命令创立框架结构操作方法如下： ① 单击“文件”菜单，选择“新建”命令，弹出“新建文件”对话框。 ②在“新建文件”对话框中，选择“框架集”类别，四、层的运用制作下拉选单（1）现在开始制作下拉出现的菜单，同样用层来制作。再次从Objects面板的布局栏中插入一个层到前面我们做好的导航条的下方，各项参数填为：“层编号”框填入menu1，左、上、宽、高框分别填入8、34、120、80，其中L和T两个参数是设置这个层距离窗口左边框和上边框的距离，一定不能填错，不然菜单将会错位，也将影响完成后的可用性。层属性设置如图2-2所示。图2-2　设置后层memu1的“属性检查器” 这时候，我们便能够在menu1这个层中输入我们所要的菜单内容。为了排版方便，我在这还是使用表格来做菜单。这个层将作为“经典论坛”的下拉选单出现，填入你所需要的菜单链接。最终效果如图2-3所示。图2-3　层memu1的设计效果（2）同样的方法，再为“天极网”也做一个下拉选单（层menu2）。其层的属性设置和最终效果如图2-4和图2-5所示。图2-4　设置后层memu2的“属性检查器” 图2-5　层memu2的设计效果（3）按F2打开LAYER（层）面板，其中列出了网页中的三个层，点menu1和menu2的前面一格，出现闭着的眼睛图标，这两个层便隐藏起来了。操作这一步是因为下拉菜单的初始状态是不可见的。如图2-6所示。图2-6“层”面板下面为下拉菜单添加显示和隐藏效果本步骤分为两部分：第一，对导航条中的主菜单添加控制显示隐藏的命令；第二，给下拉选单本身添加显示隐藏的命令。（4）选择第一个单元格中的文字部分，再按Shift+F4或选择“窗口”->“行为”命令打开行为面析，点按钮，在下拉选项中选中“显示-隐藏层”（如图2-7所示）。如果选项中没有这一项或这一项不可用，则选择“显示事件”下的IE 5.0（如图2-8所示）后，图2-7“显示-隐藏层”菜单图 2-8　“显示事件”菜单重新点击按钮，此时“显示-隐藏层”将出现或变为可用。　　　　　　　　　（5）这时将会弹出“显示-隐藏层”对话框。在“命名的层”框中会列出当前网页所有的层，选中“层 "menu1" ”，因为我们想要menu1这个层对“经典论坛”响应。然后点下面的“显示”按钮，选中“层 "menu2" ”，然后点击下面的“隐藏”按钮，然后单击“确定”即可。如图2-9所示。图2-9　“显示-隐藏层”对话框　　（6）这时会回到行为面板中，面板中出现如图2-47所示字样，点击文字“onClick”，会出现一个向下的小箭头，点击它，在下拉选项中选中onMouseOver如图2-10所示。这一步的作用是实现当鼠标移至第一个单元格时，下拉选单menu1的状态变为显示（Show）。　　　　　　图2-10　“行为”面板　　　图2-11　下拉选项中的行为动作（7）用同样的方法设置下拉选单menu2在鼠标移至第二个单元格的文字上时变为显示状态。只是选中“层 "menu2" ”，然后点下面的“显示”按钮，选中“层 "menu1" ”，然后点击下面的“隐藏”按钮，如图2-12所示。回到行为面板中，点击onClick向下的小箭头，在下拉选项中选中onMouseOut。图2-12　“显示-隐藏层”对话框（8）选中层menu1，用与导航条部分同样的方法在行为面板中为它添加显示与隐藏自己的命令。这样做的效果是当鼠标移出层menu1时，层menu1就自动隐藏。最后层menu1的onMouseOut行为的设置如图2-13所示，onMouseOver行为的设置如图2-14所示。图2-13　层memu1的onMouseOut行为设置图2-14　层memu1的onMouseOver行为设置　　（9）用同样的方法为层memu2添加显示与隐藏自己的命令。到此为止，这个下拉菜单已经制作完成，保存后我们按F12键测试。实验三 CSS层叠样式表的使用【实验目的】熟悉CSS样式表的创立和应用。【实验器材】安装有Windows 98/ /xp；Dreamweaver MX，Flash MX，Fireworks MX；IE浏览器，NetScape浏览器，IIS5.0 等软件的计算机。【实验内容】 Ø 自定义CSS样式表。要求：定义一种网页中常见的正文样式，效果为“字体为楷体，文字大小为20PX，文字颜色为蓝色”，并应用于文档，预览页面效果； Ø 重新定义HTML标签样式。要求：重新定义BODY的标签样式属性，效果为“华文行楷，大小为20PX，文字颜色为白色，悲景为深蓝色”，并应用于文档，预览页面效果； Ø CSS选择器样式的定义。要求：经过CSS选择器样式的设置，实现基于文字超链接的动态效果，链接正常显示（a:link）效果为“字体为楷体，文字大小为18PX，文字颜色为黑色”；鼠标停留在链接文字上的样式（a:hover）效果为“字体为隶书，文字大小为18PX，文字颜色为红色”，并预览页面效果；【实验步骤】 1、自定义CSS样式表。要求：定义一种网页中常见的正文样式，效果为“字体为楷体，文字大小为20PX，文字颜色为蓝色”，并应用于文档，预览页面效果。实验步骤：（1）打开一个包含段落文本的文档，打开“CSS样式”面版，然后单击“新建CSS样式”按钮，在弹出的对话框中输入样式名称，在“类型”中选择“创立自定义样式”，选择“仅对该文档”，完成后单击“确定”；（2）在打开的对话框中设置“字体为楷体，文字大小为20PX，文字颜色为蓝色”，单击“确定”；（3）在文档窗口中选取要应用样式的文本，在“CSS样式” 面版中选择“应用样式”单选按钮，最后在“CSS样式”列表中单击要应用在样式，并按F12键预览页面效果。 2、重新定义HTML标签样式。要求：重新定义BODY的标签样式属性，效果为“华文行楷，大小为20PX，文字颜色为白色，背景为深蓝色”，并应用于文档，预览页面效果。实验步骤：（1）打开一个包含段落文本的文档，打开“CSS样式”面版，然后单击“新建CSS样式”按钮，在“类型”中选择“重定义HTML标签”，在“标签”下拉列表中选择BODY，选择“仅对该文档”，完成后单击“确定”；（2）在打开的对话框中设置“字体为华文行楷，文字大小为20PX，文字颜色为白菜色”，在“分类”列表框中选择“背景”选取项，在“背景颜色”文本框中输入“#333366”，单击“确定”；（3）在文档窗口中选取要应用样式的文本，在“CSS样式” 面版中选择“应用样式”单选按钮，最后在“CSS样式”列表中单击要应用在样式，并按F12键预览页面效果。 3、 CSS选择器样式的定义。要求：经过CSS选择器样式的设置，实现基于文字超链接的动态效果，链接正常显示（a:link）效果为“字体为楷体，文字大小为18PX，文字颜色为黑色”；鼠标停留在链接文字上的样式（a:hover）效果为“字体为隶书，文字大小为18PX，文字颜色为红色”，并预览页面效果。实验步骤：（1）打开一个包含段落文本的文档，打开“CSS样式”面版，然后单击“新建CSS样式”按钮，在“类型”中选择“使用CSS选择器”，在“选择器”下拉列表中选择“a:link”，选择“仅对该文档”，完成后单击“确定”；（2）在打开的对话框中设置“字体为楷体，文字大小为18PX，在“修饰”选项区中选择“无”，文字颜色文本框中输入“#000000””，单击“确定”；（3）再次单击“新建CSS样式”按钮，在“类型”中选择“使用CSS选择器”，在“选择器”下拉列表中选择“a: hover”，选择“仅对该文档”，完成后单击“确定”；（4）在打开的对话框中设置“字体为隶书，文字大小为18PX，在“修饰”选项区中选择“下划线”，文字颜色文本框中输入“#0000FF””，单击“确定”；（5）保存文件后，按F12键预览页面效果。实验四网页图像处理与动画制作【实验目的】 1.使学生熟练掌握Fireworks 图像文档的设置、文档的导入和输出；绘图工具和图像处理工具的使用；掌握图像优化及按指定格式（GIF、JPEG）的导出、掌握按钮、导航条的创立；掌握切片和热点的使用；掌握弹出菜单的制作；掌握图层操作，文字处理，蒙版的创立与编辑，GIF动画的制作。 2.使学生熟练掌握FLASH MX的基本操作，逐帧动画的创立过程，补间动画和形状补间的创立，交互动画的创立。【实验器材】安装有Windows 98/ /xp；Dreamweaver MX，Flash MX，Fireworks MX；IE浏览器，NetScape浏览器，IIS5.0 等软件的计算机。【实验内容】 Ø Fireworks MX的基本应用； Ø 利用Fireworks制作GIF动画； Ø 利用Flash制作网页动画；【实验步骤】一、Fireworks MX的基本应用 1．导入和导出文档（1）导入文档。在编辑文档时，能够调入其它相应格式的文档。单击“文件”→“导入”菜单命令，可弹出“导入”对话框。利用该对话框，能够导入BMP、WMF、TIFF、JPEG和GIF等格式的图像文件，以及HTML、ASCII和RTF文本等格式的文件。（2）导出文档。单击“文件”→“导出”菜单命令或单击主要工具栏中的“导出”按钮，弹出“导出”对话框。利用该对话框，能够选择文件夹、要保存的文件类型（能够保存为JPEG、GIF和HTML等格式文件）和输入文件名，单击“保存”按钮即可。 2．优化文档在导出文档前要对文档进行优化处理，能够单击“窗口”→“优化”菜单命令，打开“优化”面板，然后利用该面板设置文档格式、调色板类型和设置类型等参数。单击“文件”→“导出预览”菜单命令，弹出“导出预览”对话框。利用该对话框能够对文档进行优化设置。 3．几何图形和填充属性工具箱中的几何绘图工具（绘制矩形、圆角矩形、椭圆和多边形）的使用方法基本一样。单击工具箱中的几何绘图工具按钮，在其属性栏中设置相应的属性，然后用鼠标在画布中拖曳，即可绘制出相应的几何图形。几何绘图工具的属性栏的特点如下。 1）．矩形 “矩形”工具和“圆角矩形”工具的属性栏与图6-1基本相同。圆角矩形工具的“属性”栏增加了一个“矩形圆度”文本框，减少了“效果”栏。它们的属性栏中的第2栏用来设置选中对象的填充属性。（1）“矩形圆度”文本框：用来设置圆角矩形四角的角度值。（2）“填充类别”下拉列表框：用来选择各种填充方式，例如实心填充、图案填充、线性填充、放射状填充、椭圆形填充和无填充等。如果选择“填充选项”选项，会弹出“填充选项”面板，如图6-2所示，利用它能够设置填充属性。 4-2 “填充选项”面板 4-1 “路径”的属性栏（3）填充颜色按钮：在“填充类别”下拉列表框中选择“实心”选项后，单击它可弹出“颜色”面板，它没有下边的列表框和复选框。利用该面板能够设置对象的填充属性。如果“填充类别”下拉列表框选择的是其它选项，则会弹出相应的面板，利用这些面板能够调整填充属性。在给对象进行非单色的填充后，一般还能够进行填充效果的调整，只要用鼠标拖曳填充物中出现的控制柄，即可进行填充的中心点和填充方向调整，如图6-3中的第一个图形。 “多边形”工具、“椭圆”工具和其它形状工具的属性栏与图6-1所示基本相同，设置的方法也基本一样。 4-3 绘制的图形例子 4．增加切点单击“滤镜”→“切点”→“新增切点”菜单命令，弹出“新增切点”对话框。在该对话框内的“数量”文本框中输入一个数值，或者单击按钮，调出一个滑杆，用拖曳的方法设置切点的数量。然后，单击“确定”按钮，即可给图像添加切点。 5．图像的负片效果单击“滤镜”→“调整颜色”→“反转”菜单命令，即可将图像反相，获得图像的负片效果（像照片的底版），即对图像中的像素颜色值取其相反的值。 6．模糊图像 Fireworks MX 系统对图像的模糊处理是使用“滤镜”→“模糊”→“××××”菜单命令实现的。模糊图像有6种：“放射状模糊”、“高斯模糊”、“进一步模糊”、“缩放模糊”、“运动模糊”和“模糊”。例如，单击“高斯模糊”菜单命令，可弹出“高斯模糊”对话框。调整该对话框中的“模糊范围”数值的大小，单击“确定”按钮，即可使图像模糊。 7．锐化图像 Fireworks MX 系统对图像的锐化处理是使用“滤镜”→“锐化”→“××××”菜单命令实现的，系统会自动将所选对象进行锐化滤镜处理。Fireworks MX 系统对图像的锐化处理有“钝化蒙版”、“进一步锐化”和“锐化”3种方式。如果要设置图像的锐化程度，可单击“锐化蒙版”菜单命令，弹出“钝化蒙版”对话框，利用该对话框即可使图像锐化。在“钝化蒙版”对话框中，“锐化量”用来设置锐化效果的强度；“像素半径”用来设置锐化过程中像素的半径值，半径值越大，锐化程度越强，半径值越小，锐化程度越弱；“阈值”用来设置对什么对比度以上的像素进行锐化，如果设置为0，表示所有的像素都被锐化。经过“锐化”滤镜能够处理那些不太清晰的图像，这样能够增大图像区域中像素边缘两侧之间的对比度，从而达到增强图像色彩及局部细节的效果。 8．“转化为Alpha”滤镜效果 “Alpha”通道是一种特殊的通道，它能够将图像中选中的区域转换成8位灰度图像并存放。利用Fireworks MX 的“转化为Alpha”滤镜能够使图像透明。单击“滤镜”→“其它”→“转换为Alpha”菜单命令，系统会自动地将所选对象进行滤镜处理。如果再绘制一个图形，放在经过该滤镜处理过的图像的后面，会看到经过滤镜处理的图像具有透明的效果。 9．查找图像的边界单击“滤镜”→“其它”→“查找边缘”菜单命令，能够取出一些颜色反差比较大的图像边界。另外，Fireworks MX 系统也能够挂接其它应用软件中的滤镜程序。单击“编辑”→“首选参数”菜单命令，可弹出“首选参数”对话框，在“文件夹”选项卡中设置相关的参数，能够完成Photoshop滤镜的插入与安装。二、运用Flash制作网页动画（1）新建一个FLASH文挡，在“文挡属性”对话框中，设置场景的“尺寸”为500px ×400px，背景色为白色。（2）选择工具面板中的铅笔工具，在场景中的第一层第一帧中绘制出幼苗的形状，选择工具面板中的颜料桶工具，将其填充为绿色。（3）选中当前层中的第二帧，单击鼠标右键，在弹出的快捷菜单中选择“插入关键帧”命令（或按F6键），插入关键帧，其内容和第一个关键帧一样。（4）在舞台上对该帧的内容稍作修改，使幼苗看起来长大一些。（5）重复步骤3和步骤4继续创立动画后面的帧，直到第10帧开出花朵。（6）单击“时间轴”窗口中的“插入图层”按钮，插入图层2。在第1帧中利用铅笔工具绘制一个花盆，然后选择颜料桶工具，将其填充。（7）按F5键在“图层2”的第10帧插入一帧，以延长第1帧的效果。（8）（按CTRL+ENTER组合键，测试影片效果。（9）按CTRL+S组合键，保存文件。制作一个小球从桌子的一端滚到另一端并落下来要求经过在关键帧中改变小球的位置来创立补间动画。实验步骤：（1）新建一个FLASH文档，在“文档属性”对话框中，设置场景的尺寸为500px ×400px，背景色为白色。（2）选择“工具”面板中的矩形工具，在场景中的第1层第1帧中绘制一张桌子。（3）选择“工具”面板中的颜料桶工具，将其填充。（4）选择“插入”→“新建元件”命令，打开“创立新元件”对话框，在“名称”文本框中输入“小球”，在“行为”选项区中选择“图形”单选按钮。（5）进入“小球”编辑区，选择“工具”面板中的椭圆工具，在“属性”面板中设置“填充颜色”为黑白放射渐变，无边线。然后在场景中描绘一个圆。（6）回到主场景，单击“时间轴”窗口中的“插入图层”按钮，插入“图层2”。选择“窗口”→“库”命令（或按F11键），打开“库”面板，从中拖动“小球”元件到工作区中。（7）选中“小球”，调整好它的位置，拖动它到桌子的一端。（8）选中“图层1”中的第30帧，单击鼠标右键，在弹出的快捷菜单中选择“插入帧”命令（或按F5键），插入帧以延长桌子的效果。（9）选中“图层2”中的第30帧，单击鼠标右键，在弹出的快捷菜单中选择“插入关键帧”命令，插入关键帧，然后将小球拖动到桌子的另一端，调整好位置。（10）选中“图层2”中的第1帧，单击鼠标右键，在弹出的快捷菜单中选择“创立补间动画”命令。（11）按CTRL+ENTER组合键，测试影片效果。

展开阅读全文