网页制作实验大纲

2023-12-13 来源：易榕旅网

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

焦鸿斌主编

吉林农业大学发展学院计算机分院

2009年3月

前言

《网页设计与制作》是我院根据现今社会需求开设的一门重要的计算机公共基础课。授课对象为非计算机专业本科学生。通过本课程的学习，使学生了解网页设计技术的起源和发展、常用的网页制作软件及HTML语言和JavaScript程序，掌握运用Dreamweaver网页制作软件制作网页，掌握运用Photoshop图像处理软件进行网页中图形制作和运用flash动画制作软件设计网页中动画的方法，进而掌握将这三个软件互相配合，完成网页设计与制作任务的方法。为今后从事网页设计与制作、网站开发和管理奠定基础。

本课程的基本目标是：使学生通过本课程的学习，掌握Dreamweaver 的使用方法，学会使用Dreamweaver 制作Web网页的技术。

本课程学习结束后，学生应能自行设计各种网页、开发一定规模的网站，使学生通过本课程的学习，熟练掌握其基本制作方法和技巧，并最终设计一个综合性的网站并且编制简单的脚本上传到互联网上。

理论教材使用：

《网页设计与制作》马占颀中国水利水电出版社实验学时安排：

本课程有10个实验，实验学时共计20学时。

实验要求

在课程实验过程中，要求学生做到：

（1）预习实验指导书有关部分，认真做好实验内容的准备，就实验可能出现的情况提前作出思考和分析。

（2）认真书写实验报告。实验报告包括实验目的和要求，实验情况及其分析。（3）遵守机房纪律，服从辅导教师指挥，爱护实验设备，杜绝玩游戏现象。（4）实验课程不迟到，认真练习。

（5）实验结束后认真思考对本次实验中所对应实验思考。

本课程实验内容要求如下：掌握HTML语言

掌握Dreamweaver的使用（一站点和文字编辑）掌握Dreamweaver的使用（二表单和超级链接）掌握Dreamweaver的使用（三表格布局）掌握Dreamweaver的使用（五框架和行为）掌握Dreamweaver的使用（六模版和CSS）掌握网站综合设计

实验一：HTML语言 ...........................................................................................................5 实验二：Dreamweaver的使用（站点和文字编辑） ............................................................7 实验三：表格布局一 ...........................................................................................................9 实验四：布局表格二 ......................................................................................................... 11 实验五：超级链接............................................................................................................. 14 实验六：Dreamweaver的使用—框架 ................................................................................. 17 实验七：Dreamweaver的使用—CSS .................................................................................. 20 实验八：Dreamweaver的使用—层..................................................................................... 23 实验九行为 ..................................................................................................................... 28 实验十表单 ..................................................................................................................... 29

实验一：HTML语言

一、实验目的：

1．掌握的标记，和<meta>标记；2．掌握使用<body>标记设置网页背景颜色和文本颜色。学习使用分段标记； 3．掌握使用标记设置文字的属性；4．掌握在网页中插入背景图片；5．掌握在网页中插入水平线，并设置水平线的属性；6．掌握给文字添加绝对超级链接，例如：<a href=http://www.baidu.com></a>和相对超级链接，例如：<a href=/images/1.jpg></a>。二、实验要求：掌握字体、水平线、超级链接等常用标记。三、实验设备:1.机器配置最小为:X86处理器主频133MHz以上，Itannium处理器主频733MHz以上；内存最小128M；硬盘最小10G；配置网卡。2.实验环境：Windows XP简体中文版、Dreamweaver 8.0。 3.各个机器之间能够实现对等网，且能够互相访问、共享资源。四、实验步骤：1．制作一个简单的网页sy2-1.htm，用记事本编辑，内容为个人简介信息。要求： 搜索关键字为“个人”“主页”“简介”，标题为我的个人简介。  背景为#33ccff,文本颜色为黑色，文本需分段表示。 2．过记事本编辑网页sy2-2.htm，内容为李白的诗“静夜思”。要求：每行诗为一个段落，四行文字颜色不同，字体不同。 3．通过记事本编辑网页sy2-3.htm，实现如图页面。54．通过记事本编辑网页sy2-4.htm，实现如下页面。图片自选，插入背景音乐“浮云.mp3”。5．通过记事本编辑网页sy2-5.htm，实现如下页面。五、实验预习要求：结合本节理论课内容复习。6实验二：Dreamweaver的使用（站点和文字编辑）一、实验目的：1．掌握建立站点和站点内的文件，文件夹；2．掌握在Dreamweaver中输入文字并设置文字属性；3．掌握在Dreamweaver中插入水平线，和设置有序列表，无序列表；二、实验要求：掌握Dreamweaver的基本操作，包括建立站点、设置文字属性、插入水平线、列表和相册等。三、实验设备:1.机器配置最小为:X86处理器主频133MHz以上，Itannium处理器主频733MHz以上；内存最小128M；硬盘最小10G；配置网卡。2.实验环境：Windows XP简体中文版、Dreamweaver 8.0。 3.各个机器之间能够实现对等网，且能够互相访问、共享资源。四、实验步骤：1．建一个站点，放在磁盘最后一个盘符里。命名为“我的第一个网站”，包含以下几个文件和文件夹：主页（index.htm）,huangshan.Htm,tu.htm；图片文件夹(images)；音乐文件夹(sound)等。2. 在“我的第一个网站”站点中，使用Dreamweaver建立如下网页，对文字信息进行如下格式设置：3．任意插入图片和文字介绍，建立一个名为huangshan.htm的网页，内容为黄山简介，合理设置图片和文字，页面要求有过渡效果。74．制作如下页面：页面名字tu.htm五、实验预习要求：结合本节理论课内容复习。8实验三：表格布局一一、实验目的：1．掌握表格插入方法；2．掌握使用表格属性面板进行参数设置；3．掌握表格及单元格的基本操作，如选取，修改等； 4．掌握在单元格中插入图片； 5．掌握表格的嵌套使用方法；二、实验要求：掌握表格和单元格的使用及其属性的设置。三、实验设备:1.机器配置最小为:X86处理器主频133MHz以上，Itannium处理器主频733MHz以上；内存最小128M；硬盘最小10G；配置网卡。2.实验环境：Windows XP简体中文版、Dreamweaver 8.0。3.各个机器之间能够实现对等网，且能够互相访问、共享资源。四、实验步骤：1．在Dreamweaver窗口中新建一个站点，并将站点的路径指向“D：\\biaoge”的文件夹 2.在站点中创建一个名为image的文件夹用来存放网页中的所有图片素材。3.在站点中创建一个名为index.html的网页文件，作为站点的主页，并把它打开。 4.把index.html文件设计视图下，窗口中插入一个表格，行：19 列：6宽：80百分比。在属性面板的对齐中选择：居中对齐5.使用合并单元格将表格进行修改，如图1所示图16.设置第一个单元格，背景：#FF9933，字体：隶书；第一列其余单元格背景:FFFFCC9字体颜色为，黑色和#FF3300；将单元格2和7背景颜色设为#CCFF99；单元格4所在区域背景颜色设为#339900，字体颜色：#FFFFFF；单元格5所在区域背景颜色设为#CCCCCC，字体颜色：#00CC00；单元格6所在区域背景颜色设为#FFCC00，字体颜色：#FF6633；效果如图2所示图27.在各单元格中输入相应的文字8.将单元格8的垂直对齐方式设为顶端，在单元格8中插入1个3行3列，粗细为0的表格，表格的背景颜色为#99FFFF，将第二、三行，合并单元格，单元格背景颜色为#CCFF99。在单元格中插图相应图片，并调整单元格及图片的大小至合适的位置，完成后的效果图如图3所示。图3五、实验预习要求：结合本节理论课内容复习。10实验四：布局表格二一、实验目的：1．掌握布局表格和布局单元格的添加；2．掌握布局视图和标准视图的切换；3．掌握布局表格及布局单元格的属性设置，如边框颜色，粗细等； 4．掌握在布局单元格中插入图片；5．掌握在网页中插入水平线，并设置水平线的属性；二、实验要求：掌握布局表格和布局单元格的使用及其属性的设置。三、实验设备:1.机器配置最小为:X86处理器主频133MHz以上，Itannium处理器主频733MHz以上；内存最小128M；硬盘最小10G；配置网卡。2.实验环境：Windows XP简体中文版、Dreamweaver 8.0。3.各个机器之间能够实现对等网，且能够互相访问、共享资源。四、实验步骤：1．在Dreamweaver窗口中新建一个站点，并将站点的路径指向“D：\\bujubiaoge”的文件夹2.在站点中创建一个名为image的文件夹用来存放网页中的所有图片素材。3.在站点中创建一个名为index.html的网页文件，并把它打开。4.把index.html文件切换到布局视图下，在布局窗口上绘制布局表格，宽：800像素，高：450像素。5.在布局表格中嵌套3个小布局表格，其中左右表格的宽都是150像素，中间表格的宽度为300像素，它们的高都是450像素，如图1所示。6.利用布局单元格按钮，在左侧的嵌套单元格中拖动出两个布局单元格，上面单元格的宽度为150像素，高为120像素，下面单元格的宽度为150像素，高为330像素，对应地在右侧表格中同样插入与左侧单元格大小一致的两个小单元格。7.在中间的表格中插入3个布局单元格，其中偏左的连个单元格的宽为145像素，高为120像素。8.单元格1、3、4、6位置放图像，2、5、7位置写文字，如图2所示。 9.切换到标准视图，利用属性面板把内嵌的3个小表格的边框宽度都设为3，边框颜色为#339966，外围大表格的边框宽度为2，边框颜色为#6699ff，各表格的间距都设为2个像素。10.左右侧表格的背景色为#99FFFF，外围大表格的背景颜色为#FFFFCC。完成后的效果图如图3所示。11图1图212图3五、实验预习要求：结合本节理论课内容复习。13实验五：超级链接一、实验目的：1．掌握网页中图片背景及背景颜色的设置； 2．掌握文字超链接的设置；3．掌握布局表格及布局单元格的属性设置；4．掌握导航条的插入；5．掌握在网页中插入水平线，并设置水平线的属性； 6.掌握新定义CSS规则以实现链接文字的变化。二、实验要求：掌握文字超链接、导航条、创建新的CSS样式以实现超链接的设置。三、实验设备:1.机器配置最小为:X86处理器主频133MHz以上，Itannium处理器主频733MHz以上；内存最小128M；硬盘最小10G；配置网卡。2.实验环境：Windows XP简体中文版、Dreamweaver 8.0。3.各个机器之间能够实现对等网，且能够互相访问、共享资源。四、实验步骤：1．在Dreamweaver窗口中新建一个站点，并将站点的路径指向“D：\\chalj”的文件夹. 2.在站点中创建一个名为image的文件夹用来存放网页中的所有图片素材。3.在站点中创建一个名为index.html的网页文件，并把它打开。4.在index页中设置一张背景图片，并用布局表格进行布局，如图1所示。其中“进入我的主页”设置为超链接，链接到net1网页。5.在net1网页中为网页设置一种背景颜色，并利用布局表格和布局单元格对net1进行布局设置，如图2所示。6.在net1中左侧的文字为链接文字，通过创建新的CSS样式设置。 在面板组中打开CSS面板，单击“CSS样式”选项卡，在该面板的右下角单击“新建CSS样式”图标，打开新建CSS规则对话框。在对话框中选中“高级（ID、伪类选择器等）”单选按钮，和“仅对该文档”单选按钮，在选择器下拉类表中可以看到四个选项  a:link。正常的被访问过的超链接的文本显示样式。  a:visited。被访问过的超级链接文本的显示样式。  a:hover。光标移到链接文本上时的显示样式。  a:active。超级链接文本被激活的显示样式。利用定义以上四个选项来确定超链接文字的效果。7. 在net1中插入了水平线和导航条。水平线的颜色自行设置；导航条样式和内容可利用Photoshop设置，net1中最终在浏览器中的效果如图3所示。8.在net2网页中添加表格背景图片，并利用表格进行布局，表格中插入了水平线，表格中间位置可放置图片，通过“返回”二字可以回到index页，如图4所示。14图1图215图3图4五、实验预习要求：结合本节理论课内容复习。16实验六：Dreamweaver的使用—框架一、实验目的：1. 能够理解框架的作用2. 能够合理使用框架划分窗口布局 3. 能够明白框架和框架集的关系 4. 能在框架中创建编辑网页5. 能在框架中打开已有的网页进行编辑 6. 能够正确保存框架和框架集 7. 能够理解和编辑框架的属性二、实验要求：掌握合理使用框架划分窗口布局、正确保存框架和框架集、编辑框架的属性。三、实验设备:1.机器配置最小为:X86处理器主频133MHz以上，Itannium处理器主频733MHz以上；内存最小128M；硬盘最小10G；配置网卡。2.实验环境：Windows XP简体中文版、Dreamweaver 8.0。3.各个机器之间能够实现对等网，且能够互相访问、共享资源。四、实验步骤：1.建立网页的框架（1）单击“文件”－“新建”－“框架集”－“左侧固定，上方嵌套”，确定。（2）按住shift键，单击选中整个框架，在框架集属性栏内“边框”下拉列表框内选择“是”；边框颜色为“蓝色”，边框宽度值为3。再适当调整各个分栏的大小。（3）按住Alt键，单击框架分栏，调出“属性”栏，定义分栏的名字，左分栏：Frame-L，右下分栏：Frame-R，右上分栏：Frame-T。同时在右下和左分栏内的“滚动”下拉列表中选择“是”。172.在网页右边的分栏内插入对象（1）设置右上分栏的背景颜色为黄色。（2）插入“标题.jpg”图片。3.在网页左边的分栏插入对象（1）调出“层”面板，不选中“防止重叠”复选框，在网页左边的分栏内，从上到下插入12个层，并调整它们的大小与位置。（2）在第一个层中插入“标题1A.jpg”图像，该图的宽度100像素，高为80像素。（3）在其他各层中依次插入11幅小香山图像“香山1A.jpg” 到“香山11A.jpg”,宽度都为100像素，高都为80像素。4.用链接控制网页右下分栏的对象（1）制作一个名字为XSWZ.html的网页文件，其内容为介绍香山的文字。18（2）在框架左分栏内，用鼠标单击选中“标题1A.jpg”图像，然后，单击链接对话框，选择XSWZ.html的网页文件，目标设置为Frame-R，单击确定退出。（3）同（2）方法，设置左侧其他十一个图片，分别链接到对应的图片上，目标均为Frame－R。5.保存全部页面。五、实验预习要求：结合本节理论课内容复习。19实验七：Dreamweaver的使用—CSS一、实验目的：1. CSS的概念和作用； 2. 创建和应用类样式； 3. 创建和应用标签样式； 4. 创建和应用高级样式； 5. 外部样式表； 6. CSS特效。二、实验要求：掌握创建和应用类样式、标签样式、高级样式。三、实验设备:1.机器配置最小为:X86处理器主频133MHz以上，Itannium处理器主频733MHz以上；内存最小128M；硬盘最小10G；配置网卡。2.实验环境：Windows XP简体中文版、Dreamweaver 8.0。3.各个机器之间能够实现对等网，且能够互相访问、共享资源。四、实验步骤：1、自定义CSS样式表。要求：定义一种网页中常用的正文样式，效果为“字体为楷体，文字大小为20PX，文字颜色为蓝色”，并应用于文档，预览页面效果。实验步骤：（1）打开一个包含段落文本的文档，打开“CSS样式”面版，然后单击“新建CSS样式”按钮，在弹出的对话框中输入样式名称.body，在“类型”中选择“创建自定义样式”，选择“仅对该文档”，完成后单击“确定”；（2）在打开的对话框中设置“字体为楷体，文字大小为20PX，文字颜色为蓝色”，单击“确定”；（3）在文档窗口中选取要应用样式的文本，在“CSS样式” 面版中选择“应用样式”单选按钮，最后在“CSS样式”列表中单击要应用在样式，并按F12键预览页面效果。202、重新定义HTML标签样式。要求：重新定义BODY的标签样式属性，效果为“华文行楷，大小为20PX，文字颜色为白色，背景为深蓝色”，并应用于文档，预览页面效果。实验步骤：（1）打开一个包含段落文本的文档，打开“CSS样式”面版，然后单击“新建CSS样式”按钮，在“类型”中选择“重定义HTML标签”，在“标签”下拉列表中选择BODY，选择“仅对该文档”，完成后单击“确定”；（2）在打开的对话框中设置“字体为华文行楷，文字大小为20PX，文字颜色为白菜色”，在“背景”选取项，设“背景颜色”蓝色，单击“确定”；（3）按F12键预览页面效果。3、 CSS选择器样式的定义。要求：通过CSS选择器样式的设置，实现基于文字超链接的动态效果，链接正常显示（a:link）效果为“字体为楷体，文字大小为18PX，文字颜色为黑色”；鼠标停留在链接文字上的样式（a:hover）效果为“字体为隶书，文字大小为18PX，文字颜色为红色”，并预览页面效果。实验步骤：21（1）打开一个包含段落文本的文档，打开“CSS样式”面版，然后单击“新建CSS样式”按钮，在“类型”中选择“高级”，在“选择器”下拉列表中选择“a:link”，选择“仅对该文档”，完成后单击“确定”；（2）在打开的对话框中设置“字体为楷体，文字大小为18PX，在“修饰”选项区中选择“无”，文字颜色文本框中输入“#000000””，单击“确定”；（3）再次单击“新建CSS样式”按钮，在“类型”中选择“使用CSS选择器”，在“选择器”下拉列表中选择“a: hover”，选择“仅对该文档”，完成后单击“确定”；（4）在打开的对话框中设置“字体为隶书，文字大小为18PX，在“修饰”选项区中选择“下划线”，文字颜色文本框中输入“#0000FF””，单击“确定”；保存文件后，按F12键预览页面效果。五、实验预习要求：结合本节理论课内容复习。22实验八：Dreamweaver的使用—层一、实验目的：1.熟悉层的插入、属性的设置。 2.了解用样式表建立新层。 3.建立嵌套的层、重叠的层。4.用\"Z轴\"改变层的顺序。5.设置层的溢出、可见性、层的剪辑。 6.使用层面板。二、实验要求：掌握正确插入层、能对层进行编辑、能在层中插入个中网页元素、知道层在布局中的特点。三、实验设备:1.机器配置最小为:X86处理器主频133MHz以上，Itannium处理器主频733MHz以上；内存最小128M；硬盘最小10G；配置网卡。2.实验环境：Windows XP简体中文版、Dreamweaver 8.0。 3.各个机器之间能够实现对等网，且能够互相访问、共享资源。四、实验步骤：1、在“文档”窗口中创建框架结构创建框架结构一般有两种方法：一是使用“新建文档”对话框中的“框架集”选项新建一个框架结构的页面文档；二是利用“插入栏”中的“框架”选项中提供了框架结构创建。使用“新建文档”命令创建框架结构操作方法如下：① 单击“文件”菜单，选择“新建”命令，弹出“新建文件”对话框。 ②在“新建文件”对话框中，选择“框架集”类别，2、导航条的制作：（1）首先进行一些必要的前期工作，按CTRL+J，打开Page Properties（页面属性）窗口，参数设置如图所示，这一设置对菜单的位置将有影响，所以请如图设置。 “页面属性”对话框中的外观设置（2）按CTRL+F2打开Objects面板，在布局栏中点击层按钮后在页面中按住鼠标不23放拖出一个层，然后在层的属性面板中设置各参数，“层编号”框填入title，左、上、宽、高框分别填入8、15、500、15，背景色填入#3366CC，如图2-36所示。图2-36 设置后层title的“属性检查器”（3）将光标移至层内，点击Objects面板上布局栏中的表格按钮列的表格，设置如图2-37所示。，插入一个一行四图2-37 设置后的“表格”对话框（4）在前两个单元格中输入文字“经典论坛”和“天极网”，并调整这两个单元格的宽度，最终效果如图2-38所示。图2-38 导航条设计效果3、制作下拉选单（1）现在开始制作下拉出现的菜单，同样用层来制作。再次从Objects面板的布局栏中插入一个层到前面我们做好的导航条的下方，各项参数填为：“层编号”框填入menu1，左、上、宽、高框分别填入8、34、120、80，其中L和T两个参数是设置这个层距离窗口左边框和上边框的距离，一定不能填错，不然菜单将会错位，也将影响完成后的可用性。层属性设置如图2-39所示。图2-39 设置后层memu1的“属性检查器”这时候，我们便可以在menu1这个层中输入我们所要的菜单内容。为了排版方便，我在这还是使用表格来做菜单。这个层将作为“经典论坛”的下拉选单出现，填入你所需要的菜单链接。最终效果如图2-40所示。图2-40 层memu1的设计效果24（2）同样的方法，再为“天极网”也做一个下拉选单（层menu2）。其层的属性设置和最终效果如图2-41和图2-42所示。图2-41 设置后层memu2的“属性检查器”图2-42 层memu2的设计效果（3）按F2打开LAYER（层）面板，其中列出了网页中的三个层，点menu1和menu2的前面一格，出现闭着的眼睛图标，这两个层便隐藏起来了。操作这一步是因为下拉菜单的初始状态是不可见的。如图2-43所示。图2-43 “层”面板下面为下拉菜单添加显示和隐藏效果本步骤分为两部分：第一，对导航条中的主菜单添加控制显示隐藏的命令；第二，给下拉选单本身添加显示隐藏的命令。（4）选择第一个单元格中的文字部分，再按Shift+F4或选择“窗口”->“行为”命令打开行为面析，点按钮，在下拉选项中选中“显示-隐藏层”（如图2-44所示）。如果选项中没有这一项或这一项不可用，则选择“显示事件”下的IE 5.0（如图2-45所示）后，重新点击按钮，此时“显示-隐藏层”将出现或变为可用。25图2-44 “显示-隐藏层”菜单图2-45 “显示事件”菜单（5）这时将会弹出“显示-隐藏层”对话框。在“命名的层”框中会列出当前网页所有的层，选中“层 \"menu1\" ”，因为我们想要menu1这个层对“经典论坛”响应。然后点下面的“显示”按钮，选中“层 \"menu2\" ”，然后点击下面的“隐藏”按钮，然后单击“确定”即可。如图2-46所示。图2-46 “显示-隐藏层”对话框（6）这时会回到行为面板中，面板中出现如图2-47所示字样，点击文字“onClick”，会出现一个向下的小箭头，点击它，在下拉选项中选中onMouseOver如图2-48所示。这一步的作用是实现当鼠标移至第一个单元格时，下拉选单menu1的状态变为显示（Show）。图2-47 “行为”面板图2-48 下拉选项中的行为动作（7）用同样的方法设置下拉选单menu2在鼠标移至第二个单元格的文字上时变为显示状态。只是选中“层 \"menu2\" ”，然后点下面的“显示”按钮，选中“层 \"menu1\" ”，然后点击下面的“隐藏”按钮，如图2-49所示。回到行为面板中，点击onClick向下的小箭头，在下拉选项中选中onMouseOut。图2-49 “显示-隐藏层”对话框（8）选中层menu1，用与导航条部分同样的方法在行为面板中为它添加显示与隐藏自己的命令。这样做的效果是当鼠标移出层menu1时，层menu1就自动隐藏。最后层menu1的onMouseOut行为的设置如图2-50所示，onMouseOver行为的设置如图2-51所示。图2-50 层memu1的onMouseOut行为设置26图2-51 层memu1的onMouseOver行为设置（9）用同样的方法为层memu2添加显示与隐藏自己的命令。到此为止，这个下拉菜单已经制作完成，保存后我们按F12键测试。五、实验预习要求：结合本节理论课内容复习。27实验九行为一、实验目的1. 掌握“交换图像”“恢复图像”行为的使用。 2. 掌握“弹出信息”行为的使用。3. 掌握“打开浏览器窗口”行为的使用。4. 掌握“控制Shockwave或Flash”行为的使用。 5. 掌握“播放生声音”行为的使用。 6. 掌握“显示隐藏层”行为的使用。 7. 掌握“预先载入图像”行为的使用。 8. 掌握“设置状态栏文本行为”的使用。二、实验要求理解行为的概念，掌握常用的行为事件的触发条件。熟练掌握“交换图像”、“弹出信息”、“播放声音”等常用行为的使用方法。三、实验设备1. 机器配置最小为:X86处理器主频133MHz以上，Itannium处理器主频733MHz以上；内存最小128M；硬盘最小10G；配置网卡。2. 实验环境：Windows XP简体中文版、Dreamweaver 8.0。 3. 各个机器之间能够实现对等网，且能够互相访问、共享资源。四、实验步骤1. 打开素材文件夹中的页面“tuzhuanhuan.html”。2. 在页面中的花朵背景标题栏中的第一个单元格中插入图像“Pic.jpg”,为其命名，设置图片大小为150×213像素大小，然后添加“交换图像行为”，设定原始档为“Pic1.jpg”（参考书中143页）。 3. 在页面中的花朵背景标题栏中的层“tutu”（脑筋后面的单元格）中，插入图像“tutu.jpg”,调整图片大小为261×211像素，选中层添加“显示隐藏层”行为（参考书中150页），onMouseOut显示层，onMouseOn隐藏层。4. 为第一个“答案”添加“弹出信息”行为，触发事件为on click。 5. 为第二个“答案”添加“弹出信息”，“显示状态栏文字”行为。6. 为第三个“答案”添加“弹出信息”，“播放声音”行为。7. 为第四个“答案”添加“打开浏览器窗口”行为，链接页面为“bing.html”。8. 在页面中的Flash下面的表格中，第一个单元格插入图片“1.png”为其添加“控制shockwave或flash”行为中的播放行为，第二个单元格插入图片“2.png”为其添加“控制shockwave或flash”行为中的停止播放行为。五、实验预习要求：要求熟记几种常用的行为触发事件。28实验十表单一、实验目的1. 掌握在页面中插入表单的方法。2. 掌握文本字段的使用方法及其分类。 3. 掌握列表/菜单的使用方法。 4. 掌握文件域的使用方法。 5. 掌握单选按钮的使用方法。 6. 掌握按钮的使用方法。二、实验要求理解表单的概念，熟悉表单中各对象如：文本域，单选按钮，多选按钮，列表/菜单，文件域，按钮等的使用方法和属性值设置。三、实验设备1. 机器配置最小为:X86处理器主频133MHz以上，Itannium处理器主频733MHz以上；内存最小128M；硬盘最小10G；配置网卡。2. 实验环境：Windows XP简体中文版、Dreamweaver 8.0。 3. 各个机器之间能够实现对等网，且能够互相访问、共享资源。四、实验步骤1. 打开素材文件夹里的“zhuce.htm”页面。 2. 依照下图在页面相应的位置插入“文本域”，并在相应位置上填入注解文字。3. 依照下图在页面中相应位置插入列表/菜单、文本域。为列表设置列表值，“项目标签”和“值”设置相同的值即可。（参见书174页）。294. 依照下图在页面形影位置插入文件域、单选按钮、按钮（提交、重填）五、实验预习要求：要求熟记几种常用的表单样式。30 <div class="preview-ft"> <div class="preview-title"> 因篇幅问题不能全部显示，请点此查看更多更全内容 <div class="model-fold-cover-bd"><a href="https://m.tang5.com/mluxoo/nreoskgvgxv/" target="_blank">查看全文</a></div> </div> </div> <script type="text/javascript" src="https://jss.yrrd.cn/mobile/detail_left.js"></script> <script type="text/javascript" src="https://jss.yrrd.cn/mobile/detail_gg2.js"></script> </div> <div class="tyy_prev"> </div> </div> <script type="text/javascript" src="https://jss.yrrd.cn/mobile/detail_foot.js"></script> <script type="text/javascript" src="https://jss.yrrd.cn/mobile/share_cebian_gg1.js"></script> <script type="text/javascript" src="https://jss.huatuo6.com/mobile/share_cebian_xgyd.js"></script> <script type="text/javascript" src="https://jss.yrrd.cn/mobile/share_cebian_gg2.js"></script> <script type="text/javascript" src="https://jss.huatuo6.com/mobile/share_cebian_rmtj.js"></script> <footer class="footer"> Copyright © 2019- 版权所有 </footer> <script> var swiper = new Swiper('.i_banner .swiper-container', { pagination: '.i_banner .swiper-pagination', paginationClickable: true, spaceBetween: 30, centeredSlides: true, autoplay: 2500, autoplayDisableOnInteraction: false, loop: true, }); </script>  <script type="text/javascript"> $(function () { //弹窗2 $('.menu_icon').click(function () { $('.tbox').show(); }) //关闭 $('.close').click(function () { $('.tbox').hide(); }) }) </script>  <script type="text/javascript" src="https://jss.yrrd.cn/mobile/foot_foot.js"></script> <script type="text/javascript"> const currentYear = new Date().getFullYear(); $('.currentYear').html(currentYear) </script> <script type="text/javascript" src="https://jss.huatuo6.com/pc/tj_foot.js"></script> </body> </html>

全部栏目

网页制作实验大纲