实验指导书.docx

1、实验指导书实验1网页欣赏与浏览器常规控制一、特色网页的浏览1. 浏览课件中曾演示的特色网页；看它们有哪些特色。2. 浏览以下链接中的网页（图片），看它们有哪些特色： 二、动态网页与静态网页的浏览与辩识1. 分别打开河北科技师范学院和数信学院主页浏览。看有哪些动态网页和静态网页。2. 打开任课教师发到班级公共邮箱中的那些网页，看是动态网页还是静态网页。为什么？体会动态网页的本质。三、IE浏览器界面控制3. 在Dreamweaver中打开班级公共邮箱中“恋爱成功率调查”、“计算器”等网页。（按下F12键）分别预览之。4. 如果不能看到交互效果，是什么原因？如何设置才能看到？5. 打开河北科技师范学

2、院主页，浏览之，如果不想浏览其中的图片、动画如何设置。设置后，刷新页面，观察效果。6. 如果又想浏览图片和动画，如何操作？实验2 DreamWeaver界面控制、文件操作、站点操作一、DreamWeaver界面控制1. 文档、标准工具栏的显示与隐藏2. 文件面板的显示、移动、隐藏。3. 串口右侧面板的折叠4. 属性工具栏、插入工具栏的显示与隐藏5. 属性工具栏的移动与折叠6. 插入工具栏的几种形式7. 代码视图、设计视图、拆分视图模式的意义与相互转换8. 标尺的显示、隐藏与属性设置9. 辅助线的显示、隐藏与属性设置10. 网格线的显示、隐藏与属性设置11. DreamWeaver工作参数的设置

3、 是否显示起始页：设为不显示起始页，退出，重新启动Dreamweaver，观察变化。 是否可使用连续空格：首先在编辑页面输入两个字母，尝试在这两个字母之间插入两个以上的空格，看能否达到目的。而后选中该项设置，做第二次尝试，结果如何？ HTML代码字号设置：在默认设置下，代码视图中的代码能看清吗？将代码字号设为18磅。观察变化。 浏览器预览设置（主次浏览器、是否用临时文件预览）。二、文件操作1. 新建网页文件（page1.htm）；2. 保存网页文件（page2.htm）；3. 打开网页文件（page3.htm）；4. 关闭网页文件（page4.htm）。三、新建站点操作1. 新建一个站点（名称

4、自定），将所对应的根文件夹设在自己的U盘，在其中建几个子文件夹（应包括专门防止图片的文件夹）备用。2. 在网上搜索一些小幅、字节数较小的图片，复制到你的图片文件夹中备用。实验 3 站点管理与页面属性1. 按照站点规划要求完善你的站点可新建几个站点，在几个站点之间跳转。 在已有站点建立几个文件夹（例如page、text、img、doc、data、musi、mov、else等）。 在个文件夹中放入一些基础文件（如在img文件夹放入一些图片）等。 在主要文件夹（如page）中放入一些网页，按一定规则命名。 必要时调整文件或文件夹所在的位置（路径）。注意有更新链接提示。2. 站点的视图管理 新建一个网

5、页文件，命名（保存）为index.htm。 找到文件面板，切换到地图视图，系统显示怎样的信息，为什么？ 切换到本地视图，将index.htm设为“首页/主页”。 重新切换到地图视图，系统显示怎样的信息。3、页面属性设置 新建一个网页，设置默认字体、字号、网页背景色、背景图片，页边距。 设置背景音乐（例如：溜冰圆舞曲.mp3或：渔舟唱晚.mp3）。 预览网页，试听背景音乐。 设置网页标题。例如：欢迎光顾本网页。实验4 文本及其属性1、网页中字体属性属性设置 在网页中输入文字，为其选择字体、字号、颜色等。注意对于同一批文字设置多种字体（编辑字体列表）的意义。 预定义格式（预格式化）操作2、文字列表

6、的编辑 有序（编号）列表的输入及其序号级别、样式的改变。 无序（项目）列表的输入及其序号级别、样式的改变。 定义列表的建立3、普通文本超链接的建立 输入下表中的基础文字，用菜单、快捷菜单、属性工具栏等多种方法建立相应的超链接。基础文字链接目标网址北京大学清华大学牛津大学http:/www.ox.au.uk哈佛大学http:/www.harvard.edu莫斯科大学http:/www.msu.ru东京大学http:/www.u-tokyo.ac.jp人民网淘宝网土豆网中国银行4、文本超链接的其他形式 文字链接到图片 文字链接到声音（音乐）文件 文字链接到视频 文字链接到动画 文字链接到word文

7、档 文字的电子邮件超链接（参见讲义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 表格与布局表

8、格1. 表格的插入 在网页中插入表格，其参数如下，输入表头文字。行数4，列数5，宽度450像素，边框8，边距4，间距6，无页眉，标题：学生情况调查表姓名性别是否团员年龄籍贯2. 表格的一般编辑 将以上表格参数做如下修改，注意观察表格外观的变化，理解个参数的意义。宽度70%，边框3，边距1，间距2。 将表格边框设为0，在浏览器中观察效果。再撤销本操作。 在各单元个输入相应信息，观察表格各单元格宽度的变化。 为表格设置背景色为浅蓝色。 为表格设置绿色边框。 为表格设置背景图像（自选），观察图片尺寸不同时效果的变化。 选中整个表格，选择相应按钮，清除行高，清除列宽。3. 表格特殊属性的设置 Fram

9、e属性：将上述表格改为左右（或上下）开口（不显示边线）的表格。 Rules属性：将上述表格改为只显示表格横线。 Bordercolorlight/Bordercolordark属性：设置左上角为浅蓝色、右下角为深蓝色，有立体感的表格。4. 表格行列编辑 在尾部增加3行 在右侧增加2列 删除刚增加的两列 选中表头那一行，将文字改为蓝色、黑体 选择几个不连续的单元格，添上相同的背景色。5. 表格数据的排序 对以上表格输入相应内容，分别按姓名、年龄排序，观察数据的变化情况。6. 表格的格式化 将上述表格套用为Simple4格式，各行的颜色、字体等属性自定；观察显示效果后，撤销操作。 将上述表格套用为

10、Altrows：earth colors格式，各行的颜色、字体等属性自定；观察显示效果后，撤销操作。 将上述表格套用为Dblrows: Light green格式，各行的颜色、字体等属性自定；观察显示效果后，撤销操作。总结：Dreamweaver中的套用格式分哪几类，各有何特点？7. 表格数据的导入与导出 导出上表数据，定界符选tab，换行符为windows。导出到桌面上，主名命名为ex1，看一下扩展名是什么，打开干文件，查看其内容，比较和页面有何不同？ 再次导出上表数据，定界符选“空白键”，换行符为windows。导出到桌面上，主名命名为ex2，看一下扩展名是什么，打开该文件，查看其内容，比

11、较和页面有何不同？ 再次导出上表数据，定界符选“空白键”，换行符为windows。导出到桌面上，命名为ex3.txt,打开干文件，查看其内容，比较和页面有何不同？和以上两种有何不同？ 尝试，可以将表格数据导出为Word（doc）格式吗？ 将以上三种格式文件分别倒入网页，注意定界符要与导出时相一致。观察导入后的效果。总结：表格数据可以导出为哪些格式？导出数据有何意义？8. 表格在布局方面的应用 长篇文本的分栏：输入或复制粘贴任意字符20行以上，并在最上面给出标题。通过表格将标题左右通栏对中显示，正文分成左右两栏，而后使表格处在页面中部。注意表格的合并、拆分，不显示表格线。 图片和文字的混排：删除

12、以上表格，在网页中插入图片，而后在图片右侧输入文字，观察对齐情况。继续输入大量文字，注意：图片能和多行文字对齐吗？如果不是用表格，图片只能和几行文字对齐？插入3行2列的表格，左侧单元格放置若干行字符，右侧单元格放置图片。可以彼此对齐吗？尝试一下，拖动文字或图片到其他单元格，可以吗？ 装饰绘制类似以下表格，注意左上、右下角色块的使用效果。当页面内容较少时，在表格边缘一角（如左下角或右上角）插入尺寸很小的图片，注意其装饰作用。总结：表格在布局方面的意义。9. 布局表格操作 插入普通表格，进行单元格的拆分与合并操作。体会一下，拆分和合并可以做到随心所欲吗？ 将页面切换到布局模式。注意观看提示信息。

13、插入布局表格，注意其横向尺寸不宜超过屏幕宽度。 绘制布局单元格，用鼠标或光标移动键调整其位置和尺寸。 当两个布局单元格距离很近时，绘制第二个布局单元格会发生什么现象？如何防止该现象的发生？ 调整各单元个的位置尺寸，为其插入适当内容。如网页Logo、标题、图片、正文等。 切换到标准模式，分析布局表格的实质。 怎样使布局表格在页面居中？总结：与普通表格相比，布局表格有哪些优势？在网页布局中因该大量使用普通表格还是布局表格？实验7 框架1. 浏览实例浏览教师发送到公共邮箱中的框架网页kuangjiashili.html，分析体会它们有几个网页、哪些文件组成。搞清框架数量与网页数量的关系。2. 新建框

14、架利用插入面板新建框架集，增减框架数量。利用框架面板定义各个框架的名称（如top、left、right、main等）。利用修改菜单新建框架集，增减框架数量。3. 框架集框架集属性的设置 设置是否显示框架边框 设置框架边框的颜色和粗细 设置边界是否可调整 设置是否显示滚动条4. 编辑无框架内容5. 网页的保存在每个框架网页中添加适当内容，并设置各网页的属性（背景色、默认字体、边距等），而后在文件菜单选择“保存全部”，为各个框架（集）网页命名。6. 指定超链接的目标框架在自己设计的框架集的某个框架网页中，建立多个文本或图片超链接（可链接到一些著名网站），分别指定目标框架为_blank，_self，

15、_top，_parent和自己定义的框架名称（如上述main等），按下F12浏览各个超链接的效果。7. 总结 与表格（布局表格）相比，网页布局有哪些特点，有哪些优势？有哪些局限性？ 你认为利用框架布局如何扬长避短？8. 实例练习建立上下两个框架（上窄下宽），上边只放Logo、图片式条幅（长度很大、高度很小的图片）和导航文字（一个表格内有若干行超链接文本），两框架的属性及其名称可自定。下框架最初只显示一些网站介绍之类的文字，用户单击超链接目标时，则用于显示被连接目标的内容。试完成这个小型网站。实验8 层操作1. 新建层 利用“插入”菜单，新建一个层。注意建立后的位置和长宽尺寸。 利用“插入”面板

16、（布局）的“绘制层”按钮，在页面拖动鼠标，绘制一个层。 两操作结果有何不同？2. 层的HTML代码选中刚刚绘制的某一个层，切换到代码视图，观察新增加了哪些代码。HTML中的层标记是什么？除了在标记内增加了层标记一行外，在文件头标记内还增加了什么内容？3. 认识和编辑层的属性 新绘制三个层，分别命名为layer1、layer2、layer3，注意上下顺序。 分别设置其长、高尺寸、修改各自名称。 如何利用属性面板修改层的层位（上下层）顺序？ 利用“层”面板，修改层的层位（上下层）顺序。 设置层的背景色。 如何取消刚设置的层的背景色？ 修改编辑参数，重新设置默认的层的大小和背景色。而后用插入菜单和“

17、插入”面板（布局）的“绘制层”按钮绘制层，与伪作此设置前有何变化？ 在层中输入任意字符，分别设置其可见性属性是“default, visible, inherit, hidden”观察该层的显示有何变化。 绘制一个新层layer10，再按下ALT件在绘制一个新层layer11，注意这两层在“层”面板上显示的情况父层与子层的关系。 继承（inherit）属性的意义：分别设置layer10层的可见性属性是“default, visible, hidden”，而后设置layer11层的可见性属性是“inherit”，观察两个层层的显示情况是否一致，为什么？4. 两个特殊属性 绘制一个层，在其中插入图

18、片，减小该层的宽度尺寸，使之小于图片宽度，在编辑窗口图片被裁掉了吗？是否仍然完整显示？ 进一步分别设置该层的“溢出”属性为“visible, hidden, scroll, auto”，在编辑窗口图片的显示情况有变化吗？ 按下F12，浏览网页，图片的显示情况有变化吗？ 设置层的剪辑属性：注意，上下左右四个值的关系（右左，下上），注意图片的显示情况有变化。5. 多个层的编辑 绘制多个层，进行激活、单选、移动、多选、删除练习。 选择多个层，利用修改菜单操作，使它们的宽、高尺寸相同。 选择多个层，利用修改菜单操作，使它们重叠（先左对齐、再沿上沿对齐）。6. 利用层制作以下实例：1 立体效果的文字，如

19、“立体效果”四个字，使之以立体效果显示。2 多个长宽尺寸相同的图片（见邮箱附件），单击上一张即显示下一张。3 在网页中插入一个图片，鼠标移入时即在图片右侧自动显示该图片的说明信息，移出后该信息又会自动隐藏起来。4 多级菜单效果（做第一级菜单要有超链接），参见讲义84页第12题。实验9 时间轴一、 认识时间轴面板打开时间轴面板，认识行为通道、帧标尺、动画通道，认识当前帧指针、播放进程控制按钮（前进、后退、退到开始），播放参数设置选项。二、 时间轴动画的创建和基本控制 在页面绘制一个层，里面插入图片，调整层的长度、高度尺寸，使之恰好放入图片。 分别利用右键菜单、鼠标拖动、“修改”主菜单操作将该层添

20、加到时间轴。 此时在时间轴timeline1的动画通道上，增加了多少帧？哪些帧是关键帧？哪些帧是普通帧？ 选第一帧为当前帧，按下播放进程控制按钮“前进”，观察当前帧的变化，此时图片有移动吗？为什么？ 选第15帧，按住左键向右拖动到第30帧松开，而后选中层，将其移动较大距离到一个新位置。而后再选第一帧为当前帧，按下播放进程控制按钮“前进”，观察当前帧的变化，此时图片有移动吗？判断一下，这一段动画可播放几秒钟？ 按下F12，在浏览器中预览，可以看到动画效果吗？为什么？ 要想在浏览器中看到刚才的动画效果，应该设置哪一个播放参数？设置后再次预览。测试一下自己当初预计的播放时间是否正确。 对刚才这一段动

21、画，要加快 / 减慢动画播放速度，或减少 / 延长播放时间，怎么办？有几种做法？三、 帧、通道的编辑 删除普通帧：右键单击动画通道中某普通帧（选中），在菜单中选择“移除帧”， 观察该动画总帧数的变化。 添加普通帧：右键单击动画通道中某普通帧（选中），在菜单中选择“添加帧”， 观察该动画总帧数的变化。 将普通帧转化为关键帧：将播放指针移到中间某普通帧，右键单击，在菜单中选择“增加关键帧”， 观察该动画通道上的标志有何变化。总帧数增加了吗？ 将关键帧转化为普通帧：右键单击上面的关键帧，在菜单中选择“移除关键帧”， 观察该动画通道上的标志有何变化。总帧数减少了吗？ 复制动画：右键单击动画通道中中间某

22、普通帧，在菜单中选择“拷贝”。 粘贴动画：左键单击本通道右侧某空白帧，再用右键单击，在菜单中选择“粘贴”，观察该动画通道上的标志有何变化。再将第一帧设为当前帧，播放该动画，观察效果。复制的这一段，可以用左键拖动到其它动画通道吗？尝试一下，可以粘贴到（或拖动到）低于原动画最末帧之前的空白帧吗？为什么？ 删除动画：左键单击动画通道上的动画片段，再右键单击之，在菜单中选择“剪切”或“删除”，该动画片段在动画通道中还存在吗？四、 动画的重复播放及其参数设置 绘制一段直线移动动画，选中“自动”和“循环”复选框，观察在时间轴面板的行为通道有何变化在哪一帧添加了“重复播放”行为标志？ 在IE浏览器中播放，观

23、察可重复播放多少次，从哪一帧开始重复的？ 改变重复播放参数：打开行为面板，单击行为通道中的“重复播放”标志，观察行为面板的变化。 双击行为面板中“转到时间轴帧”，在新出现的对话框中前往帧、循环文本框输入相应数字，单击“确定”按钮，再次浏览该网页，观察效果是否与自己的意愿相符。五、 各种动画的编辑在层中插入文字或图片，完成以下相应动画。1. 绘制直线动画2. 将以上动画修改为曲线动画。提示：需要增加关键帧并修改这些关键帧在页面中的位置。3. 绘制任意路径动画化4. 绘制折线动画提示：若干个直线动画的组合。5. 绘制显隐动画提示：需要增加关键帧并修改这些关键帧的“可见性”属性。6. 绘制图片缩放动

24、画提示：用背景图片，或在层中插入图片后，正确设置其“溢出”属性。7. 制作幻灯片图片依次自动播放效果绘制多个层，里面插入尺寸相同的图片（如若干个邮票），而后使这些层长宽尺寸相同，并重叠放置，而后自上而下依次选择这些层，分别放入动画通道，是每一个动画片段的帧数相同，并使每一个（最后一个除外）片段的最后一阵的“可见性”属性设为“hidden”。六、 改变时间轴动画中的角色层对象1. 在页面插入一个层，里面插入一幅图片。2. 插入另一个层，里面插入另一幅图片。3. 将前一个层制作成时间轴动画（如直线移动动画）。播放之。4. 将该段动画中的层，改为前一个层的内容，要求动画效果不变。播放之。观察与原动画

25、的异同。七、时间轴的编辑1. 增加时间轴新设置一个时间轴，自动命名为timeline2。2. 改名时间轴将以上新设置的时间轴改名为zhixian。将timeline1时间轴改名为yuanyou。3. 删除时间轴删除新增的时间轴zhixian。实验10 行为一、 认识行为面板与行为实质 利用“窗口”菜单或同时按下Shift和F4键，打开行为面板。 单击“显示所有事件”、 “显示设置事件”按钮，注意观察分别显示哪些内容。 单击“添加行为”按钮，在菜单中找到“显示事件”命令行，从下级菜单中选择“IE6.0”，重新单击“显示所有事件”、“显示设置事件”按钮，注意观察显示内容与前一次操作显示结果有何差异

26、。 在页面分别添加层layer1和layer2，非别向层中添加内容（文字或图片），利用前面所学知识，制作鼠标移入layer1就自动隐藏layer2的效果。 选中layer1，注意层面板，重新单击“显示所有事件”、“显示设置事件”按钮是否有变化？ 选中layer1，切换到代码视图，注意刚才的操作在代码中（特别是标记中的标记）添加了哪些代码？ 总结：网页设计中行为的实质是什么。 在设计视图删除这两个层，再次切换到代码视图，其HTML代码有和改变？ 利用行为面板，删除以上行为。二、 添加“交换图像 / 恢复交换图像”行为 在页面插入一个图像，选中，在属性面板为其命名，如“imag01”，直接在行为面

27、板为其添加“交换图像”行为，在下面产生的对话框中，选择“预先载入图像”而不选中“鼠标花开时恢复图像”，按下“确定”按钮，在IE浏览器预览之。测试鼠标移入移出时的效果。 删除该行为，重新添加“交换图像”行为，这一次选中“鼠标花开时恢复图像”。预览，观察效果与上次有何不同。三、 添加“弹出信息”行为 不选中任何网页对象，直接添加“弹出信息”行为，在“弹出信息”对话框中输入“近期本网站发现一些病毒，给用户造成一些损失和不便，敬请谅解。”确定，观察行为面板的变化。在默认情况下，浏览此页面时，什么事件触发“弹出信息”动作？浏览该网页，验证你的判断。该事件一般应改作什么？ 欲修改弹出信息的内容，在原有信息

28、尾部增加“本网站正在尽快处理。”如何操作？四、 打开浏览器窗口行为 首先编辑一个网页，如为其添加内容“重要通知：”，保存命名为no1.htm，关闭，而后为当前网页添加“打开浏览器窗口”行为，使得打开本网页时，首先在浏览器窗口自动显示no1.htm的内容，要求窗口宽、高各为350像素，一般不显示工具栏，只在必要时显示滚动条。窗口名称为“重要通知”。试实现之。五、 改变属性行为 在页面添加以图片，在浏览器窗口浏览时，单击可使其宽度、高度各增加一倍。试实现之。 在页面输入蓝色文字，在浏览器窗口浏览时，单击可使其变为红色。试实现之。六、 设置状态条文本 浏览网页时，在其状态栏显示“欢迎光顾本网站”字样。试实现之。七、 显示弹出式菜单在网页中插入图片，仿照讲义96页，为其添加弹出式（垂直式或水平式）菜单。实验11 CSS样式的概念一、 CSS样式的生成与选用 在页面输入文字，设置其字体、大小、颜色、粗体，观察属性面板“样式”下拉列表框的变化。其中是否出现了“style1”字样？ 选中刚才输入的文字，切换到代码视图，阅读关于“style1”样式的有关代码（标记中“.style”