实验指导书Word文件下载.docx
《实验指导书Word文件下载.docx》由会员分享，可在线阅读，更多相关《实验指导书Word文件下载.docx（20页珍藏版）》请在冰豆网上搜索。
∙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
哈佛大学
//www.harvard.edu
莫斯科大学
//www.msu.ru
东京大学
//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，看一下扩展名是什么，打开该文件，查看其内容，比较和页面有何不同？
导出到桌面上，命名为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中的层标记是什么？
除了在<
body>
标记内增加了层标记一行外，在文件头标记<
head>
内还增加了什么内容？
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，切换到代码视图，注意刚才的操作在代码中（特别是<
标记中的<
script>
标记）添加了哪些代码？
∙总结：
网页设计中行为的实质是什么。
∙在设计视图删除这两个层，再次切换到代码视图，其HTML代码有和改变？
∙利用行为面板，删除以上行为。
二、添加“交换图像/恢复交换图像”行为
∙在页面插入一个图像，选中，在属性面板为其命名，如“imag01”，直接在行为面板为其添加“交换图像”行为，在下面产生的对话框中，选择“预先载入图像”而不选中“鼠标花开时恢复图像”，按下“确定”按钮，在IE浏览器预览之。
测试鼠标移入移出时的效果。
∙删除该行为，重新添加“交换图像”行为，这一次选中“鼠标花开时恢复图像”。
预览，观察效果与上次有何不同。
三、添加“弹出信息”行为
∙不选中任何网页对象，直接添加“弹出信息”行为，在“弹出信息”对话框中输入“近期本网站发现一些病毒，给用户造成一些损失和不便，敬请谅解。
”确定，观察行为面板的变化。
在默认情况下，浏览此页面时，什么事件触发“弹出信息”动作？
浏览该网页，验证你的判断。
该事件一般应改作什么？
∙欲修改弹出信息的内容，在原有信息尾部增加“本网站正在尽快处理。
”如何操作？
四、打开浏览器窗口行为
∙首先编辑一个网页，如为其添加内容“重要通知：
…………”，保存命名为no1.htm，关闭，而后为当前网页添加“打开浏览器窗口”行为，使得打开本网页时，首先在浏览器窗口自动显示no1.htm的内容，要求窗口宽、高各为350像素，一般不显示工具栏，只在必要时显示滚动条。
窗口名称为“重要通知”。
试实现之。
五、改变属性行为
∙在页面添加以图片，在浏览器窗口浏览时，单击可使其宽度、高度各增加一倍。
∙在页面输入蓝色文字，在浏览器窗口浏览时，单击可使其变为红色。
六、设置状态条文本
∙浏览网页时，在其状态栏显示“欢迎光顾本网站”字样。
七、显示弹出式菜单
在网页中插入图片，仿照讲义96页，为其添加弹出式（垂直式或水平式）菜单。
实验11CSS样式的概念
一、CSS样式的生成与选用
∙在页面输入文字，设置其字体、大小、颜色、粗体，观察属性面板“样式”下拉列表框的变化。
其中是否出现了“style1”字样？
∙选中刚才输入的文字，切换到代码视图，阅读关于“style1”样式的有关代码（<
style>
标记中“.style{……}”
升级会员 