实验指导书.docx
- 文档编号:5891220
- 上传时间:2023-01-01
- 格式:DOCX
- 页数:20
- 大小:39.03KB
实验指导书.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,切换到代码视图,注意刚才的操作在代码中(特别是
标记中的copyright@ 2008-2022 冰点文档网站版权所有
经营许可证编号:鄂ICP备2022015515号-1