dreamweaver实验指导.docx
- 文档编号:17763589
- 上传时间:2023-08-03
- 格式:DOCX
- 页数:19
- 大小:406.24KB
dreamweaver实验指导.docx
《dreamweaver实验指导.docx》由会员分享,可在线阅读,更多相关《dreamweaver实验指导.docx(19页珍藏版)》请在冰点文库上搜索。
dreamweaver实验指导
网页设计与制作
实验指导书
实验一 Dreamweaver站点管理和建立简单的网站
【实验目的】使学生掌握Dreamweaver的基本使用方法,并利用Dreamweaver工具制作一个比较完整的网页。
【实验器材】安装有Windows98/2000/xp;Dreamweaver的计算机
【实验内容】利用Dreamweaver制作一个简单网站,要求满足以下条件:
Ø至少有4个网页,网页之间用超链接相连;反映一中心主题;
Ø网页中尽量图文并茂,即有文字,也配以一定的展示图片;
Ø某网页中要包含图像映射超链接,链接目标是一副图像;
Ø制作鼠标经过图像效果作为网站的导航系统;
Ø制作图像翻转效果及网站相册效果;
【实验步骤】
一、在Dreamweaver中建立本地站点的操作步骤如下:
1、在Dreamweaver文档窗口中,依次单击“站点”菜单→“新建站点”命令或者是在“站点”面板中单击“站点”菜单→“新建站点”命令,打开“站点定义”对话框。
如图所示。
选择“高级”选项卡建立站点(也可以按“基本”选项卡中的向导进行操作,但不如用“高级”选项卡方便)。
“站点定义”对话框
2、管理本地站点
选择“站点”面板“文件”菜单中对应命令,即可对选取文件进行编辑操作。
例如,选择文件后,在“站点”面板中选择“文件”菜单中的“打开”命令,则Dreamweaver在文档窗口中打开该文件(当然最简单的方法是在站点中双击相应的文件图标)。
在对站点中的文件或文件夹进行操作时,合理地使用右键快捷菜单能大大加快操作速度。
例如,在选中的文件夹上单击鼠标右键,然后选择“新建文件夹”命令,可以在相应文件夹中新建一个文件夹。
3、编辑站点具体操作步骤如下:
在站点面板中单击“站点名称”框右边的下拉列表按钮,在下拉列表中选择“编辑站点”命令,打开“编辑站点”对话框,如图所示。
“编辑站点”对话框
二、图像映射超链接
选中网页中插入的图片,打开属性控制面板,其面板的左下角区域即用于设置图片映像的区域。
如图所示。
属性控制面板热区设置工具
选中图中绘制工具:
矩形热区绘制工具
圆形热区绘制工具
多边形热区绘制工具,其中一种,就可以在图片上绘制热区了。
当绘制完热区后,属性控制面板中显示出热区的属性,在link栏内输入网址或网页文件名,或点击link栏右侧的文件夹按钮,在打开的对话框中选择一个网页文件作为链接地址。
三、插入翻转图像
准备好两幅大小相同的图片文件。
并将其保存在网页文件所在的文件夹之下。
单击“插入”面板中的“鼠标经过图像”按钮→弹出如图所示对话框。
“插入鼠标经过图像”对话框
在对话框中单击“原始图像”右边的“浏览”按钮→选择打开网页时的原始图片文件→单击“鼠标经过图像”右边的“浏览”按钮→选择打开网页时的鼠标经过图片文件→在“替换文本”中输入“鼠标经过图片”→在“按下前往…”中输入超链接的网页文件→单击“确定”。
保存文件并按F12预览效果。
四、插入导航栏翻转图像
1.打开Fireworks,新建文件,并设置画布大小为120*50象素→选定文字工具→并输入文字(如“指导思想”)→设置文字大小与颜色→保存文件名为01-1.png。
2.在第一步的基础上改变文字颜色,另存为01-2.png。
3.重复步骤第1步、第2步,修改输入的文字,分别制作大小相同的图片文件02-1.png~05-2.png共10张大小相同的图片。
4.打开Dreamweaver→新建一个网页文件,并保存文件名为3.htm.
5.单击“插入”面板中的“导航条”按钮→弹出如图1-25所示的对话框→在“项目名称”中输入导航按钮的名称→在“状态图像”中选择一个准备好的图片→在“鼠标经过图像”中选择其中一个图片→在“按下前往…”选择一个超链接的网页文件。
6.单击对话框中的“+”号→重复第5步操作,添加多个导航条按钮→在“插入”中选择“垂直”→单击“确定”。
“插入导航条”对话框
五、制作网站相册
1.在Dreamweaver中新建一个文档,单击“命令”菜单,选择“创建网站相册”命令。
打开“创建网站相册”对话框。
如图1-27所示。
在“相册标题”文本框中输入标题;在“源图像文件夹”文本框中单击右边的“浏览”按钮选择保存原始图片文件的文件夹;在“目标文件夹”文本框中单击右边的“浏览”按钮选择保存存放相册的目标文件夹;在“缩略图大小”框内选择相册中小图像的尺寸;在“相册格式”框内设置原始图像的显示格式;在“小数位数”文本框内设置图像的显示比例;选中“为每张相片建立导览页面”复选框。
“创建网站相册”对话框
2.单击“确定”按钮后,系统将自动启动Fireworks软件,开始执行创建网站相册的过程。
3.创建网站相册完成后,系统会弹出如图所示的提示框,单击“确定”按钮。
提示对话框
4.此时在站点窗口中,Dreamweaver自动在指定的文件夹下制作出网站相册网页文件和文件夹,在文档窗口中,自动创建出网站相册的文档。
实验二 表格、层和框架
【实验目的】使学生掌握表格插入、修改、删除及应用,层和框架的建立及实际应用。
【实验器材】安装有Windows98/2000/xp;Dreamweaver软件的计算机。
【实验内容】
Ø建立1个框架网页;
Ø在网页中利用层制作动态页面与下拉菜单;
【实验步骤】
1、在“文档”窗口中创建框架结构
创建框架结构一般有两种方法:
一是使用“新建文档”对话框中的“框架集”选项新建一个框架结构的页面文档;二是利用“插入栏”中的“框架”选项中提供了框架结构创建。
使用“新建文档”命令创建框架结构操作方法如下:
①单击“文件”菜单,选择“新建”命令,弹出“新建文件”对话框。
②在“新建文件”对话框中,选择“框架集”类别,
2、导航条的制作:
(1)首先进行一些必要的前期工作,按CTRL+J,打开PageProperties(页面属性)窗口,参数设置如图所示,这一设置对菜单的位置将有影响,所以请如图设置。
“页面属性”对话框中的外观设置
(2)按CTRL+F2打开Objects面板,在布局栏中点击层按钮
后在页面中按住鼠标不放拖出一个层,然后在层的属性面板中设置各参数,“层编号”框填入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的设计效果
(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所示)。
如果选项中没有这一项或这一项不可用,则选择“显示事件”下的IE5.0(如图2-45所示)后,重新点击按钮,此时“显示-隐藏层”将出现或变为可用。
图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行为设置
图2-51 层memu1的onMouseOver行为设置
(9)用同样的方法为层memu2添加显示与隐藏自己的命令。
到此为止,这个下拉菜单已经制作完成,保存后我们按F12键测试。
实验三 CSS样式表的使用
【实验目的】熟悉CSS样式表的创建和应用。
【实验器材】安装有Windows98/2000/xp;Dreamweaver软件的计算机。
【实验内容】
Ø自定义CSS样式表。
要求:
定义一种网页中常用的正文样式,效果为“字体为楷体,文字大小为20PX,文字颜色为蓝色”,并应用于文档,预览页面效果;
Ø重新定义HTML标签样式。
要求:
重新定义BODY的标签样式属性,效果为“华文行楷,大小为20PX,文字颜色为白色,悲景为深蓝色”,并应用于文档,预览页面效果;
ØCSS选择器样式的定义。
要求:
通过CSS选择器样式的设置,实现基于文字超链接的动态效果,链接正常显示(a:
link)效果为“字体为楷体,文字大小为18PX,文字颜色为黑色”;鼠标停留在链接文字上的样式(a:
hover)效果为“字体为隶书,文字大小为18PX,文字颜色为红色”,并预览页面效果;
【实验步骤】
1、自定义CSS样式表。
要求:
定义一种网页中常用的正文样式,效果为“字体为楷体,文字大小为20PX,文字颜色为蓝色”,并应用于文档,预览页面效果。
实验步骤:
(1)打开一个包含段落文本的文档,打开“CSS样式”面版,然后单击“新建CSS样式”按钮,在弹出的对话框中输入样式名称,在“类型”中选择“创建自定义样式”,选择“仅对该文档”,完成后单击“确定”;
(2)在打开的对话框中设置“字体为楷体,文字大小为20PX,文字颜色为蓝色”,单击“确定”;
(3)在文档窗口中选取要应用样式的文本,在“CSS样式”面版中选择“应用样式”单选按钮,最后在“CSS样式”列表中单击要应用在样式,并按F12键预览页面效果。
2、重新定义HTML标签样式。
要求:
重新定义BODY的标签样式属性,效果为“华文行楷,大小为20PX,文字颜色为白色,悲景为深蓝色”,并应用于文档,预览页面效果。
实验步骤:
(1)打开一个包含段落文本的文档,打开“CSS样式”面版,然后单击“新建CSS样式”按钮,在“类型”中选择“重定义HTML标签”,在“标签”下拉列表中选择BODY,选择“仅对该文档”,完成后单击“确定”;
(2)在打开的对话框中设置“字体为华文行楷,文字大小为20PX,文字颜色为白菜色”,在“分类”列表框中选择“背景”选取项,在“背景颜色”文本框中输入“#333366”,单击“确定”;
(3)在文档窗口中选取要应用样式的文本,在“CSS样式”面版中选择“应用样式”单选按钮,最后在“CSS样式”列表中单击要应用在样式,并按F12键预览页面效果。
3、CSS选择器样式的定义。
要求:
通过CSS选择器样式的设置,实现基于文字超链接的动态效果,链接正常显示(a:
link)效果为“字体为楷体,文字大小为18PX,文字颜色为黑色”;鼠标停留在链接文字上的样式(a:
hover)效果为“字体为隶书,文字大小为18PX,文字颜色为红色”,并预览页面效果。
实验步骤:
(1)打开一个包含段落文本的文档,打开“CSS样式”面版,然后单击“新建CSS样式”按钮,在“类型”中选择“使用CSS选择器”,在“选择器”下拉列表中选择“a:
link”,选择“仅对该文档”,完成后单击“确定”;
(2)在打开的对话框中设置“字体为楷体,文字大小为18PX,在“修饰”选项区中选择“无”,文字颜色文本框中输入“#000000””,单击“确定”;
(3)再次单击“新建CSS样式”按钮,在“类型”中选择“使用CSS选择器”,在“选择器”下拉列表中选择“a:
hover”,选择“仅对该文档”,完成后单击“确定”;
(4)在打开的对话框中设置“字体为隶书,文字大小为18PX,在“修饰”选项区中选择“下划线”,文字颜色文本框中输入“#0000FF””,单击“确定”;
(5)保存文件后,按F12键预览页面效果。
实验四 表单的使用
【实验目的】熟悉表单的创建和使用。
【实验器材】安装有Windows98/2000/xp;Dreamweaver软件的计算机。
【实验内容】
Ø留言板静态界面的设计。
要求:
内容包括留言人、性别、主题、话题、留言内容等,主要应用单行文本域、多行文本域、单选按钮、下拉菜单和图片按钮等对象,可参照教材102页的格式及步骤;
Ø投票站静态界面的设计。
要求:
内容包括一个简单的投票站界面,主要应用单选按钮以用提交、恢复按钮等;
【实验步骤】
1、留言板静态界面的设计。
要求:
内容包括留言人、性别、主题、话题、留言内容等,主要应用单行文本域、多行文本域、单选按钮、下拉菜单和图片按钮等对象,可参照教材102页的格式及步骤。
实验步骤:
(1)新建一个文档并保存,并创建一个空白表单,将光标定位于空白表单内,在第一列上创建留言板初步界面,内容包括留言人、性别、主题、话题、留言内容等;
(2)在第二列上分别设定单行文本域、多行文本域、单选按钮、下拉菜单和图片按钮等;具体步骤可参照教材100页的格式及步骤。
(3)保存文件后,按F12键预览页面效果。
2、投票站静态界面的设计。
要求:
内容包括一个简单的投票站界面,主要应用单选按钮以用提交、恢复按钮等。
实验步骤:
(1)建一个文档并保存,并创建一个空白表单,将光标定位于空白表单内,插入“单选按钮组”,在“标签”列中输入文本“略高”、“合理”、“略低”;
(2)将光标表格下面,插入“按钮”,设置有关属性。
具体步骤可参照教材105页的格式及步骤
(3)保存文件后,按F12键预览页面效果。
实验五 多媒体对象的使用
【实验目的】使学生熟练掌握在网页中使用声音和视频、使用Flash动画、使用Java特效、使用Shockwave电影、使用其他多媒体对象。
【实验器材】安装有Windows98/2000/xp;Dreamweaver软件的计算机。
【实验内容】
Ø为某一图像链接声音文件,在网页中嵌入某一声音文件,在网页中插入Flash动画,在网页中插入shockwave影片;
Ø利用Java特效制作“雪花”效果,利用ActiveX控件播放视频,在网页中插入Java小程序;
Ø制作一个简单的个人主页,使其符合以下条件:
(1)为网页添加背景音乐;
(2)分别用嵌入和链接的方式在网页中使用音频和视频文件;
(3)在网页中插入用Dreamweaver制作的Flash按钮或文本,要求能实现超链接跳转;
(4)制作图像翻转效果及网站相册效果;
(5)网页中插入Shockwave电影。
【实验步骤】
丰富多彩的媒体给网页带来了非凡的效果,这些媒体的来源主要有系统集成、网络下载、从素材库导入以及自己制作等。
大多数的媒体在DreamweaverMX2004中并没有集成,这时可以通过网络来下载。
提供各种媒体下载的网站非常多,如果不知道具体的网址,可通过google、XX等搜索引擎搜索,在此提供几个网址以供参考。
虽然网络上的媒体异彩纷呈,下载后便可使用,非常方便,但如需作商业用途,则请参照相关的版权信息,以免引发版权纠纷。
通过插入插件来添加背景音乐具体操作如下:
(1)将光标定位到要插入背景音乐的网页的空白处。
(2)同插入其他插件的方法一样,打开“选择文件”对话框。
(3)在打开的对话框中选择音乐文件,如F6.mid。
(4)设置完毕后,单击按钮即可将音乐文件插入到页面中,音乐文件同样以一般插件的图标形式显示在页面中。
(5)单击音乐文件图标,在属性面板中,将高度和宽度都设置为0,这样就不会显示播放器。
(6)在插件URL的文本框中可以输入下载插件的完整URL。
如果在浏览页面时没有该插件,则InternetExplorer将从这里提供的URL上下载。
链接声音的具体操作如下:
(1)在页面中单击要链接声音文件的网页元素,例如:
文本或图像等。
(2)在属性面板中的Link文本框中输入声音文件即可,这里输入ZR1942.WAV。
嵌入声音到网页也是通过插入插件的方法实现的,这里不再赘述。
另外,也可以通过添加行为的方法来实现声音的链接和嵌入。
插入Flash影片的具体操作如下:
(1)将光标定位到页面中要插入Flash影片的位置。
(2)在插入栏的“常用”选项卡中单击媒体右侧的按钮,在弹出的列表框中选择“Flash”选项,如图5-1所示,或选择[插入][媒体][Flash]菜单命令打开如图5-2所示的“选择文件”对话框。
(3)在“查找范围”下拉列表框中查找要插入的Flash播放文件(格式为:
*.swf)所在的位置。
(4)从文件列表框中选择需要的Flash文件,如选择banner文件。
(5)单击“确定”按钮,如果所选文件不在当前文档的站点中,系统会打开如图5-3所示的“询问”对话框。
(6)单击“是”按钮,在打开的“复制文件为”对话框中保存选择的Flash文件,如图5-4所示。
(7)单击按钮后即可将Flash影片插入到页面中,如图5-5所示。
(8)单击插入的Flash影片,“Flash影片”属性面板如图5-6所示。
插入Flash按钮的具体操作如下:
(1)将光标定位到页面中要插入Flash按钮的位置上。
(2)在如图5-1所示的列表中选择“Flash按钮”选项,打开“插入Flash按钮”对话框。
(3)在“样式”下拉列表框中选择需要的按钮样式后在“范例”栏中将显示出所选样式的效果。
如在列表中选择BlipArrow选项。
(4)在“按钮文本”文本框中输入要在按钮上显示的文本,如“进入”。
(5)在“字体”下拉列表框中选择按钮文本的字体,在“大小”数值框中输入字号。
(6)在“链接”文本框中指定按钮所要链接文档的URL地址。
(7)在“目标”下拉列表框中选择所链接文件的打开方式。
(8)在“背景色”下拉列表中设置Flash按钮的背景色。
(9)在“另存为”文本框中输入保存的路径,最好保存到当前页面站点的图像文件夹中,到此设置就完成了。
(10)单击“确定”按钮将设置的Flash按钮插入到当前位置。
(11)单击插入的Flash按钮,在其属性面板中编辑相关的属性。
如果要修改Flash按钮的名称、外观等参数时,可双击插入的Flash按钮或单击其属性面板中的“编辑…”按钮打开“插入Flash按钮”对话框,更改其设置即可。
(12)如果在页面中调整了Flash按钮的大小,又想恢复原大小时,可单击属性面板中的按钮“重设大小”。
(13)单击“播放”按钮播放,当鼠标移到按钮上时就会看按钮的动态效果。
插入Flash文本与插入Flash按钮一样,是指DreamweaverMX2004中集成的文本动画。
插入Flash文本的具体操作与插入Flash按钮类似。
Shockwave是Macromedia公司制定的一种网上媒体交互压缩格式的标准,其生成的压缩格式可以被快速下载,并且被目前的主流浏览器所支持。
在DreamweaverMX2004中插入Shockwave影片的具体操作如下:
(1)将光标置于页面中要插入Shockwave影片的位置上。
(2)选择[插入]|[媒体]|[Shockwave]菜单命令,也可以在插入栏的“常用”选项卡中单击媒体右侧的按钮,在弹出的列表框中选择“Shockwave”选项,打开“选择文件”对话框。
(3)选择要插入的Shockwave影片文件,同时在对话框中可以设置URL的类型。
(4)单击“确定”按钮,即可将影片插入到页面中,Shockwave影片插入到页面中将以一个图标的形式显示
ActiveX控件是Microsoft对浏览器的能力扩展,ActiveX控件的作用和插件是相同的,但两者也存在着差异,载入网页时,如果浏览器不支持ActiveX控件,浏览器会自动安装所需软件,如果是插件,则需用户找到相关的软件进行安装。
插入Applet的具体操作如下:
(1)将光标定位到页面中要插入ActiveX的位置。
(2)选择[插入]|[媒体]|[ActiveX]菜单命令,也可以在插入栏的“常用”选项卡中单击媒体右侧的按钮,在弹出的列表框中选择ActiveX选项,即可将ActiveX插入到页面中。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- dreamweaver 实验 指导