实验指导书.docx
《实验指导书.docx》由会员分享，可在线阅读，更多相关《实验指导书.docx（20页珍藏版）》请在冰豆网上搜索。
实验指导书
实验1网页欣赏与浏览器常规控制
一、特色网页的浏览
1.浏览课件中曾演示的特色网页；看它们有哪些特色。
2.浏览以下链接中的网页（图片），看它们有哪些特色：
∙
∙
∙
∙
∙
∙
∙
二、动态网页与静态网页的浏览与辩识
1.分别打开河北科技师范学院和数信学院主页浏览。
看有哪些动态网页和静态网页。
2.打开任课教师发到班级公共邮箱中的那些网页，看是动态网页还是静态网页。
为什么？
体会动态网页的本质。
三、IE浏览器界面控制
3.在Dreamweaver中打开班级公共邮箱中“恋爱成功率调查”、“计算器”等网页。
（按下F12键）分别预览之。
4.如果不能看到交互效果，是什么原因？
如何设置才能看到？
5.打开河北科技师范学院主页，浏览之，如果不想浏览其中的图片、动画如何设置。
设置后，刷新页面，观察效果。
6.如果又想浏览图片和动画，如何操作？
实验2DreamWeaver界面控制、文件操作、站点操作
一、DreamWeaver界面控制
1.文档、标准工具栏的显示与隐藏
2.文件面板的显示、移动、隐藏。
3.串口右侧面板的折叠
4.属性工具栏、插入工具栏的显示与隐藏
5.属性工具栏的移动与折叠
6.插入工具栏的几种形式
7.代码视图、设计视图、拆分视图模式的意义与相互转换
8.标尺的显示、隐藏与属性设置
9.辅助线的显示、隐藏与属性设置
10.网格线的显示、隐藏与属性设置
11.DreamWeaver工作参数的设置
∙是否显示起始页：
设为不显示起始页，退出，重新启动Dreamweaver，观察变化。
∙是否可使用连续空格：
首先在编辑页面输入两个字母，尝试在这两个字母之间插入两个以上的空格，看能否达到目的。
而后选中该项设置，做第二次尝试，结果如何？
∙HTML代码字号设置：
在默认设置下，代码视图中的代码能看清吗？
将代码字号设为18磅。
观察变化。
∙浏览器预览设置（主次浏览器、是否用临时文件预览）。
二、文件操作
1.新建网页文件（page1.htm）；
2.保存网页文件（page2.htm）；
3.打开网页文件（page3.htm）；
4.关闭网页文件（page4.htm）。
三、新建站点操作
1.新建一个站点（名称自定），将所对应的根文件夹设在自己的U盘，在其中建几个子文件夹（应包括专门防止图片的文件夹）备用。
2.在网上搜索一些小幅、字节数较小的图片，复制到你的图片文件夹中备用。
实验3站点管理与页面属性
1.按照站点规划要求完善你的站点
可新建几个站点，在几个站点之间跳转。
∙在已有站点建立几个文件夹（例如page、text、img、doc、data、musi、mov、else等）。
∙在个文件夹中放入一些基础文件（如在img文件夹放入一些图片）等。
∙在主要文件夹（如page）中放入一些网页，按一定规则命名。
∙必要时调整文件或文件夹所在的位置（路径）。
注意有更新链接提示。
2.站点的视图管理
∙新建一个网页文件，命名（保存）为index.htm。
∙找到文件面板，切换到地图视图，系统显示怎样的信息，为什么？
∙切换到本地视图，将index.htm设为“首页/主页”。
∙重新切换到地图视图，系统显示怎样的信息。
3、页面属性设置
∙新建一个网页，设置默认字体、字号、网页背景色、背景图片，页边距。
∙设置背景音乐（例如：
溜冰圆舞曲.mp3或：
渔舟唱晚.mp3）。
∙预览网页，试听背景音乐。
∙设置网页标题。
例如：
欢迎光顾本网页。
实验4文本及其属性
1、网页中字体属性属性设置
∙在网页中输入文字，为其选择字体、字号、颜色等。
注意对于同一批文字设置多种字体（编辑字体列表）的意义。
∙预定义格式（预格式化）操作
2、文字列表的编辑
∙有序（编号）列表的输入及其序号级别、样式的改变。
∙无序（项目）列表的输入及其序号级别、样式的改变。
∙定义列表的建立
3、普通文本超链接的建立
∙输入下表中的基础文字，用菜单、快捷菜单、属性工具栏等多种方法建立相应的超链接。
基础文字
链接目标网址
北京大学
清华大学
牛津大学
http:
//www.ox.au.uk
哈佛大学
http:
//www.harvard.edu
莫斯科大学
http:
//www.msu.ru
东京大学
http:
//www.u-tokyo.ac.jp
人民网
淘宝网
土豆网
中国银行
4、文本超链接的其他形式
∙文字链接到图片
∙文字链接到声音（音乐）文件
∙文字链接到视频
∙文字链接到动画
∙文字链接到word文档
∙文字的电子邮件超链接（参见讲义p.41第5题）
∙文字的书签超链接（参见讲义p.41第6、7题，另外链接到网页开头第一行）
∙文字的脚本超链接（链接到警示框、虚拟链接等，参见讲义p.41第8题）
实验5图片及其超链接
1、网页中图片的插入与编辑
∙在网页中插入几幅图片
∙调整图片的视觉尺寸
∙调整图片的对齐方式
∙调整图片的与其他对象的间距
∙裁剪图片，减小其实际尺寸
∙调整图片的对比度或亮度
∙图片的超链接
2、图像占位符设计
3、图像映射的建立（参见讲义p.53第8题）
4、制作鼠标经过图像效果（参见讲义p.53第9题）
5、制作导航条（至少5组图片，纵横排列均可）
6、在网页中插入swf动画。
实验6表格与布局表格
1.表格的插入
∙在网页中插入表格，其参数如下，输入表头文字。
行数4，列数5，宽度450像素，边框8，边距4，间距6，无页眉，标题：
学生情况调查表
姓名
性别
是否团员
年龄
籍贯
2.表格的一般编辑
∙将以上表格参数做如下修改，注意观察表格外观的变化，理解个参数的意义。
宽度70%，边框3，边距1，间距2。
∙将表格边框设为0，在浏览器中观察效果。
再撤销本操作。
∙在各单元个输入相应信息，观察表格各单元格宽度的变化。
∙为表格设置背景色为浅蓝色。
∙为表格设置绿色边框。
∙为表格设置背景图像（自选），观察图片尺寸不同时效果的变化。
∙选中整个表格，选择相应按钮，清除行高，清除列宽。
3.表格特殊属性的设置
∙Frame属性：
将上述表格改为左右（或上下）开口（不显示边线）的表格。
∙Rules属性：
将上述表格改为只显示表格横线。
∙Bordercolorlight/Bordercolordark属性：
设置左上角为浅蓝色、右下角为深蓝色，有立体感的表格。
4.表格行列编辑
∙在尾部增加3行
∙在右侧增加2列
∙删除刚增加的两列
∙选中表头那一行，将文字改为蓝色、黑体
∙选择几个不连续的单元格，添上相同的背景色。
5.表格数据的排序
∙对以上表格输入相应内容，分别按姓名、年龄排序，观察数据的变化情况。
6.表格的格式化
∙将上述表格套用为Simple4格式，各行的颜色、字体等属性自定；观察显示效果后，撤销操作。
∙将上述表格套用为Altrows：
earthcolors格式，各行的颜色、字体等属性自定；观察显示效果后，撤销操作。
∙将上述表格套用为Dblrows:
Lightgreen格式，各行的颜色、字体等属性自定；观察显示效果后，撤销操作。
总结：
Dreamweaver中的套用格式分哪几类，各有何特点？
7.表格数据的导入与导出
∙导出上表数据，定界符选tab，换行符为windows。
导出到桌面上，主名命名为ex1，看一下扩展名是什么，打开干文件，查看其内容，比较和页面有何不同？
∙再次导出上表数据，定界符选“空白键”，换行符为windows。
导出到桌面上，主名命名为ex2，看一下扩展名是什么，打开该文件，查看其内容，比较和页面有何不同？
∙再次导出上表数据，定界符选“空白键”，换行符为windows。
导出到桌面上，命名为ex3.txt,打开干文件，查看其内容，比较和页面有何不同？
和以上两种有何不同？
∙尝试，可以将表格数据导出为Word（doc）格式吗？
∙将以上三种格式文件分别倒入网页，注意定界符要与导出时相一致。
观察导入后的效果。
总结：
表格数据可以导出为哪些格式？
导出数据有何意义？
8.表格在布局方面的应用
∙长篇文本的分栏：
输入或复制粘贴任意字符20行以上，并在最上面给出标题。
通过表格将标题左右通栏对中显示，正文分成左右两栏，而后使表格处在页面中部。
注意表格的合并、拆分，不显示表格线。
∙图片和文字的混排：
删除以上表格，在网页中插入图片，而后在图片右侧输入文字，观察对齐情况。
继续输入大量文字，注意：
图片能和多行文字对齐吗？
如果不是用表格，图片只能和几行文字对齐？
插入3行2列的表格，左侧单元格放置若干行字符，右侧单元格放置图片。
可以彼此对齐吗？
尝试一下，拖动文字或图片到其他单元格，可以吗？
∙装饰
绘制类似以下表格，注意左上、右下角色块的使用效果。
当页面内容较少时，在表格边缘一角（如左下角或右上角）插入尺寸很小的图片，注意其装饰作用。
总结：
表格在布局方面的意义。
9.布局表格操作
∙插入普通表格，进行单元格的拆分与合并操作。
体会一下，拆分和合并可以做到随心所欲吗？
∙将页面切换到布局模式。
注意观看提示信息。
∙插入布局表格，注意其横向尺寸不宜超过屏幕宽度。
∙绘制布局单元格，用鼠标或光标移动键调整其位置和尺寸。
∙当两个布局单元格距离很近时，绘制第二个布局单元格会发生什么现象？
如何防止该现象的发生？
∙调整各单元个的位置尺寸，为其插入适当内容。
如网页Logo、标题、图片、正文等。
∙切换到标准模式，分析布局表格的实质。
∙怎样使布局表格在页面居中？
总结：
与普通表格相比，布局表格有哪些优势？
在网页布局中因该大量使用普通表格还是布局表格？
实验7框架
1.浏览实例
浏览教师发送到公共邮箱中的框架网页kuangjiashili.html，分析体会它们有几个网页、哪些文件组成。
搞清框架数量与网页数量的关系。
2.新建框架
利用插入面板新建框架集，增减框架数量。
利用框架面板定义各个框架的名称（如top、left、right、main等）。
利用修改菜单新建框架集，增减框架数量。
3.框架集框架集属性的设置
∙设置是否显示框架边框
∙设置框架边框的颜色和粗细
∙设置边界是否可调整
∙设置是否显示滚动条
4.编辑无框架内容
5.网页的保存
在每个框架网页中添加适当内容，并设置各网页的属性（背景色、默认字体、边距等），而后在文件菜单选择“保存全部”，为各个框架（集）网页命名。
6.指定超链接的目标框架
在自己设计的框架集的某个框架网页中，建立多个文本或图片超链接（可链接到一些著名网站），分别指定目标框架为_blank，_self，_top，_parent和自己定义的框架名称（如上述main等），按下F12浏览各个超链接的效果。
7.总结
∙与表格（布局表格）相比，网页布局有哪些特点，有哪些优势？
有哪些局限性？
∙你认为利用框架布局如何扬长避短？
8.实例练习
建立上下两个框架（上窄下宽），上边只放Logo、图片式条幅（长度很大、高度很小的图片）和导航文字（一个表格内有若干行超链接文本），两框架的属性及其名称可自定。
下框架最初只显示一些网站介绍之类的文字，用户单击超链接目标时，则用于显示被连接目标的内容。
试完成这个小型网站。
实验8层操作
1.新建层
∙利用“插入”菜单，新建一个层。
注意建立后的位置和长宽尺寸。
∙利用“插入”面板（布局）的“绘制层”按钮，在页面拖动鼠标，绘制一个层。
∙两操作结果有何不同？
2.层的HTML代码
选中刚刚绘制的某一个层，切换到代码视图，观察新增加了哪些代码。
HTML中的层标记是什么？
除了在
标记内增加了层标记一行外，在文件头标记内还增加了什么内容？
3.认识和编辑层的属性
∙新绘制三个层，分别命名为layer1、layer2、layer3，注意上下顺序。
∙分别设置其长、高尺寸、修改各自名称。
∙如何利用属性面板修改层的层位（上下层）顺序？
∙利用“层”面板，修改层的层位（上下层）顺序。
∙设置层的背景色。
∙如何取消刚设置的层的背景色？
∙修改编辑参数，重新设置默认的层的大小和背景色。
而后用插入菜单和“插入”面板（布局）的“绘制层”按钮绘制层，与伪作此设置前有何变化？
∙在层中输入任意字符，分别设置其可见性属性是“default,visible,inherit,hidden”观察该层的显示有何变化。
∙绘制一个新层layer10，再按下ALT件在绘制一个新层layer11，注意这两层在“层”面板上显示的情况——父层与子层的关系。
∙继承（inherit）属性的意义：
分别设置layer10层的可见性属性是“default,visible,hidden”，而后设置layer11层的可见性属性是“inherit”，观察两个层层的显示情况是否一致，为什么？
4.两个特殊属性
∙绘制一个层，在其中插入图片，减小该层的宽度尺寸，使之小于图片宽度，在编辑窗口图片被裁掉了吗？
是否仍然完整显示？
∙进一步分别设置该层的“溢出”属性为“visible,hidden,scroll,auto”，在编辑窗口图片的显示情况有变化吗？
∙按下F12，浏览网页，图片的显示情况有变化吗？
∙设置层的剪辑属性：
注意，上下左右四个值的关系（右>左，下>上），注意图片的显示情况有变化。
5.多个层的编辑
∙绘制多个层，进行激活、单选、移动、多选、删除练习。
∙选择多个层，利用修改菜单操作，使它们的宽、高尺寸相同。
∙选择多个层，利用修改菜单操作，使它们重叠（先左对齐、再沿上沿对齐）。
6.利用层制作以下实例：
[1]立体效果的文字，如“立体效果”四个字，使之以立体效果显示。
[2]多个长宽尺寸相同的图片（见邮箱附件），单击上一张即显示下一张。
[3]在网页中插入一个图片，鼠标移入时即在图片右侧自动显示该图片的说明信息，移出后该信息又会自动隐藏起来。
[4]多级菜单效果（做第一级菜单要有超链接），参见讲义84页第12题。
实验9时间轴
一、认识时间轴面板
打开时间轴面板，认识行为通道、帧标尺、动画通道，认识当前帧指针、播放进程控制按钮（前进、后退、退到开始），播放参数设置选项。
二、时间轴动画的创建和基本控制
∙在页面绘制一个层，里面插入图片，调整层的长度、高度尺寸，使之恰好放入图片。
∙分别利用右键菜单、鼠标拖动、“修改”主菜单操作将该层添加到时间轴。
∙此时在时间轴timeline1的动画通道上，增加了多少帧？
哪些帧是关键帧？
哪些帧是普通帧？
∙选第一帧为当前帧，按下播放进程控制按钮“前进”，观察当前帧的变化，此时图片有移动吗？
为什么？
∙选第15帧，按住左键向右拖动到第30帧松开，而后选中层，将其移动较大距离到一个新位置。
而后再选第一帧为当前帧，按下播放进程控制按钮“前进”，观察当前帧的变化，此时图片有移动吗？
判断一下，这一段动画可播放几秒钟？
∙按下F12，在浏览器中预览，可以看到动画效果吗？
为什么？
∙要想在浏览器中看到刚才的动画效果，应该设置哪一个播放参数？
设置后再次预览。
测试一下自己当初预计的播放时间是否正确。
∙对刚才这一段动画，要加快/减慢动画播放速度，或减少/延长播放时间，怎么办？
有几种做法？
三、帧、通道的编辑
∙删除普通帧：
右键单击动画通道中某普通帧（选中），在菜单中选择“移除帧”，观察该动画总帧数的变化。
∙添加普通帧：
右键单击动画通道中某普通帧（选中），在菜单中选择“添加帧”，观察该动画总帧数的变化。
∙将普通帧转化为关键帧：
将播放指针移到中间某普通帧，右键单击，在菜单中选择“增加关键帧”，观察该动画通道上的标志有何变化。
总帧数增加了吗？
∙将关键帧转化为普通帧：
右键单击上面的关键帧，在菜单中选择“移除关键帧”，观察该动画通道上的标志有何变化。
总帧数减少了吗？
∙复制动画：
右键单击动画通道中中间某普通帧，在菜单中选择“拷贝”。
∙粘贴动画：
左键单击本通道右侧某空白帧，再用右键单击，在菜单中选择“粘贴”，观察该动画通道上的标志有何变化。
再将第一帧设为当前帧，播放该动画，观察效果。
复制的这一段，可以用左键拖动到其它动画通道吗？
尝试一下，可以粘贴到（或拖动到）低于原动画最末帧之前的空白帧吗？
为什么？
∙删除动画：
左键单击动画通道上的动画片段，再右键单击之，在菜单中选择“剪切”或“删除”，该动画片段在动画通道中还存在吗？
四、动画的重复播放及其参数设置
∙绘制一段直线移动动画，选中“自动”和“循环”复选框，观察在时间轴面板的行为通道有何变化——在哪一帧添加了“重复播放”行为标志？
∙在IE浏览器中播放，观察可重复播放多少次，从哪一帧开始重复的？
∙改变重复播放参数：
打开行为面板，单击行为通道中的“重复播放”标志，观察行为面板的变化。
∙双击行为面板中“转到时间轴帧”，在新出现的对话框中前往帧、循环文本框输入相应数字，单击“确定”按钮，再次浏览该网页，观察效果是否与自己的意愿相符。
五、各种动画的编辑
在层中插入文字或图片，完成以下相应动画。
1.绘制直线动画
2.将以上动画修改为曲线动画。
提示：
需要增加关键帧并修改这些关键帧在页面中的位置。
3.绘制任意路径动画化
4.绘制折线动画
提示：
若干个直线动画的组合。
5.绘制显隐动画
提示：
需要增加关键帧并修改这些关键帧的“可见性”属性。
6.绘制图片缩放动画
提示：
用背景图片，或在层中插入图片后，正确设置其“溢出”属性。
7.制作幻灯片——图片依次自动播放效果
绘制多个层，里面插入尺寸相同的图片（如若干个邮票），而后使这些层长宽尺寸相同，并重叠放置，而后自上而下依次选择这些层，分别放入动画通道，是每一个动画片段的帧数相同，并使每一个（最后一个除外）片段的最后一阵的“可见性”属性设为“hidden”。
六、改变时间轴动画中的角色——层对象
1.在页面插入一个层，里面插入一幅图片。
2.插入另一个层，里面插入另一幅图片。
3.将前一个层制作成时间轴动画（如直线移动动画）。
播放之。
4.将该段动画中的层，改为前一个层的内容，要求动画效果不变。
播放之。
观察与原动画的异同。
七、时间轴的编辑
1.增加时间轴
新设置一个时间轴，自动命名为timeline2。
2.改名时间轴
将以上新设置的时间轴改名为zhixian。
将timeline1时间轴改名为yuanyou。
3.删除时间轴
删除新增的时间轴zhixian。
实验10行为
一、认识行为面板与行为实质
∙利用“窗口”菜单或同时按下Shift和F4键，打开行为面板。
∙单击“显示所有事件”、“显示设置事件”按钮，注意观察分别显示哪些内容。
∙单击“添加行为”按钮，在菜单中找到“显示事件”命令行，从下级菜单中选择“IE6.0”，重新单击“显示所有事件”、“显示设置事件”按钮，注意观察显示内容与前一次操作显示结果有何差异。
∙在页面分别添加层layer1和layer2，非别向层中添加内容（文字或图片），利用前面所学知识，制作鼠标移入layer1就自动隐藏layer2的效果。
∙选中layer1，注意层面板，重新单击“显示所有事件”、“显示设置事件”按钮是否有变化？
∙选中layer1，切换到代码视图，注意刚才的操作在代码中（特别是
标记中的