电子教案《Dreamweaver网页设计与制作第二版》A063954示例项目三Word文档下载推荐.docx
- 文档编号:20964433
- 上传时间:2023-01-26
- 格式:DOCX
- 页数:18
- 大小:3.38MB
电子教案《Dreamweaver网页设计与制作第二版》A063954示例项目三Word文档下载推荐.docx
《电子教案《Dreamweaver网页设计与制作第二版》A063954示例项目三Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《电子教案《Dreamweaver网页设计与制作第二版》A063954示例项目三Word文档下载推荐.docx(18页珍藏版)》请在冰豆网上搜索。
将插入点置于需要设置段落缩进的任意段落中,在“属性”面板上“格式”下拉列表中选择“段落”选项,单击“文本凸出”按钮可使段落凸出,单击“文本缩进”按钮可使段落缩进。
4.设置列表项列表分为项目列表和编号列表,项目列表常应用在“列举”类型的文本中,编号列表常应用在“条款”类型的文本中,这种方式使得文本更加直观、明了。
选中所要设置的文本,然后单击“属性”面板上的“项目列表”按钮。
小提示:
在对文本应用列表项之前,必须用Enter键把文本中的各项分为不同的段落。
(三)插入水平线和特殊字符如果网页文档由很长的内容构成,可在内容中间插入水平线,从而使网页内容更容易理解,阅读起来也更轻松。
另外,网页中还经常包含一些特殊字符,如版本符号、货币符号等。
此处介绍如何在网页中插入水平线和特殊字符。
1.插入水平线水平线对于组织信息和区分版块很有帮助,如图所示。
要插入水平线,可在定位插入点后,选择“插入记录”“HTML”“水平线”菜单。
水平线“属性”面板中各常用项的意义:
水平线:
设置水平线名称,主要用于脚本程序。
宽:
设置水平线的宽度,以像素或百分比为单位。
缺省为空,表示采用默认值(100)。
高:
设置水平线的粗细,以像素为单位。
缺省为空,表示采用默认值(2像素)。
对齐:
设置水平线的对齐方式。
阴影:
是否为水平线添加阴影效果。
类(C):
为水平线设置类样式(3种样式之一,将在项目七中做详细介绍)。
2.插入特殊字符要插入特殊字符,可在定位插入点后,选择“插入记录”“HTML”“特殊字符”菜单,然后在弹出的菜单中选择相应的特殊字符,如左图所示。
如果在“特殊字符”菜单下没有找到需要的特殊字符,可以通过选择该菜单中最下面的“其他字符”命令打开“插入其他字符”对话框,这样可以获取更多的特殊字符。
如右图所示。
在该对话框中选中要插入的字符后,单击“确定”按钮即可插入。
使用“插入”栏可以非常快捷地插入特殊字符。
具体方法为,将插入栏切换至“文本”插入栏,单击最右侧“换行符”按钮后的小三角图标,在打开的下拉列表中选择要插入的特殊字符。
【任务实施】在学习了文本的输入与编辑方法后,请同学们为汽车网站中的“关于福特汽车”网页输入文本并设置格式。
【任务二】在主页中插入导航条和图像应用图像
(一)网页中常见的图像文件格式目前在网页中可以使用的图像包括JPEG、GIF和PNG格式,下面分别列出了它们各自的特点。
JPEG(联合图像专家组标准)格式:
该格式适于表现色彩丰富,具有连续色调的图像,如各种照片。
其优点是图像质量高,缺点是文件尺寸稍大(相对于其他格式),且不能包含透明区。
GIF(图形交换格式)格式:
由于它最多只能包含256种颜色,因而适合表现色调不连续或具有大面积单一颜色的图像,如卡通画、按钮、图标、徽标等。
其优点是图像尺寸小,可包含透明区,且可制成包含多幅画面的简单动画,缺点是图像质量稍差。
PNG(便携网络图像)格式:
该格式集JPEG和GIF格式的优点于一身,图像质量高且可包含透明区。
(二)插入与编辑图像在Dreamweaver中插入图像的方法非常简单,下面介绍具体操作。
步骤1首先在要插入图像的位置单击确定插入点,然后单击“常用”插入栏中的“图像”按钮。
步骤2打开“选择图像源文件”对话框,在“查找范围”下拉列表中选择图像文件夹,在文件列表中选择要插入的图像文件,然后单击“确定”按钮插入图像。
同网页的背景图像的设置一样,如果此时所选图像不在站点根文件夹中,Dreamweaver会弹出提示框,询问是否将图像复制到站点根文件夹中。
单击“是”按钮,系统会自动复制图像文件到站点根文件夹中。
否则,在发布网页后,会因找不到图像而无法显示。
步骤3选中插入的图像,可利用“属性”面板对该图像的各项属性进行修改。
下面列出图像“属性”面板中各常用项的意义。
图像:
设置图像名称,主要用于通过脚本控制图像。
宽和高:
图像的宽度和高度(单位为像素),当改变了图像的尺寸后,该数值将加粗显示。
源文件:
显示图像文件的路径。
链接:
用于创建从图像到其他文件的链接。
替换:
在浏览器无法显示图像文件时,在图像位置显示的说明性文字。
垂直边距和水平边距:
指定图像上、下、左、右空白的像素值。
目标:
设置在何处打开链接文档,_blank表示新窗口,_self表示当前窗口,_parent表示当前窗口的父窗口,_top表示当前窗口的顶级窗口。
边框:
设置图像边框的粗细,以像素为单位。
有时在为图像设置链接后,图像的周围会多出一个蓝色的边框,此时只需将图像的边框值设置为“0”,即可将该边框去掉。
确定图像在单元格或页面中的对齐方式。
(三)使用图像占位符图像占位符相当于图像的临时替代对象。
如果网页中的某个图像尚未制作好,可暂时用图像占位符代替。
步骤1图像占位符的用法非常简单。
确定插入点后,选择“插入记录”“图像对象”“图像占位符”菜单,打开“图像占位符”对话框,然后设置其名称、宽度、高度、颜色和替换文本。
步骤2单击“确定”按钮,在指定位置插入一个图像占位符。
步骤3要用制作好的图像替换图像占位符,可首先单击选择图像占位符,然后在“属性”面板的“源文件”编辑框中输入带路径的文件名,或者单击该编辑框后面的“浏览文件”按钮,在打开的“选择图像源文件”对话框中选择要替换的图像,单击“确定”按钮,Dreamweaver会自动将图像占位符替换为所选择的图像。
(四)制作鼠标经过图像在网页中经常可以看到这种情况,当鼠标移动到某一图像上时,图像变成了另一幅图像,而当鼠标移开时,又恢复成原来的图像,这就是通常所说的鼠标经过图像。
要制作鼠标经过图像,需要用到两张大小相同,而内容不同的图像。
其中一张作为原始图像,在页面打开的时候显示;
另一张则作为鼠标经过图像,在鼠标经过的时候替换原始图像显示出来。
以下示例采用了本项目素材中“image”文件夹中的两张图片“EAR_1.jpg”和“EAR_2.jpg”,在开始操作之前,先将这两张图片拷贝到本地站点的图像文件夹中。
步骤1在本地站点中新建文档,并重命名为“image.html”。
双击打开该文档,在文档窗口中单击定位插入点,然后选择“插入记录”“图像对象”“鼠标经过图像”菜单。
步骤2弹出“插入鼠标经过图像”对话框,在“图像名称”编辑框中为图像输入一个名称(此处为“ear”),然后单击“原始图像”编辑框右侧的“浏览”按钮,弹出“原始图像:
”对话框,在“查找范围”下拉列表中选择图像所在文件夹,在文件列表中选择原始图像(此处为EAR_1.jpg),然后单击“确定”按钮。
步骤3按照同样的方法设置“鼠标经过图像”为“EAR_2.jpg”,在“替换文本”编辑框中输入替换文本(此处为“耳钉”),在“按下时,前往的URL”编辑框中输入单击图像时将打开的网页文档名称(或单击编辑框右侧的“浏览”按钮选择网页),最后单击“确定”按钮,插入鼠标经过图像。
步骤4按【CtrlS】组合键保存文档,然后按F12键预览网页,将光标放在设置为鼠标经过图像上方时,可以看到原始图像变为鼠标经过图像。
(五)制作导航条导航条在网站中起着不可替代的作用,它把网站中的各个页面连接起来。
每一个网站都有自己的导航条。
利用与制作鼠标经过图像类似的方法,可制作具有可变效果的导航条。
制作导航条需要用到两组大小相同而内容不同的图片,本项目素材“image”文件夹中准备了两组图片“dha1dha6”和“dhb1dhb6”,在开始操作之前应先将这两组图片拷贝到本地站点的图像文件夹中。
步骤1在本地站点中新建文档,保存并重命名为“dh.html”。
双击打开该文档,在文档窗口中单击定位插入点,然后选择“插入记录”“图像对象”“导航条”菜单。
步骤2打开“插入导航条”对话框,在“项目名称”编辑框中输入项目名(此处为“dh1”,也可以不输);
单击“状态图像”编辑框后的“浏览”按钮,在打开的“选择图像源文件”对话框中选择要作为状态图像的文件(此处为“dha1.gif”),然后单击“确定”按钮。
步骤3按照同样的方法,设置“鼠标经过图像”为“dhb1.gif”。
如有必要,可设置其他选项。
步骤4单击编辑框左上方的“添加项”按钮,添加新项。
参照前面的方法设置项目名称、状态图像和鼠标经过图像。
“插入导航条”对话框中各主要选项的意义如下:
状态图像:
表示网页中初始显示的图像。
鼠标经过图像:
鼠标滑过时显示的图像。
按下图像:
按下按钮时显示的图像,一般不设置。
按下时鼠标经过图像:
按钮处于按下状态时的鼠标经过图像,一般不设置。
替换文本:
导航图片不能正常显示时,在图片位置显示的文字。
插入:
“插入”下拉列表中有两个选项,其中“水平”表示插入水平的导航条,“垂直”表示插入垂直的导航条,默认为“水平”。
步骤5重复执行上面的操作,添加并设置新项,最后单击“确定”按钮插入导航条。
步骤6按【Ctrl+S】组合键保存文档,然后按F12键预览网页,将光标置于导航条上方时,其背景颜色变深。
要修改、增加导航条项目,可在选中导航条后,选择“修改”“导航条”菜单,打开“修改导航条”对话框进行修改。
可单击并拖动导航条改变其在网页中的位置;
可以复制导航条到别的网页;
也可以对导航条附加行为。
另外,一个网页中只允许有一个导航条。
【任务实施】在学习了图像的应用后,请同学们动手在“福特汽车”网站主页中插入图像和导航条。
【任务三】为主页设置动画和背景音乐应用动画和多媒体
(一)插入Flash动画Flash动画是目前最流行的矢量动画,它具有文件尺寸小、变化丰富的优点,因而很多网页中都会使用。
步骤1与插入图像的方法类似,在网页中插入Flash动画的方法也非常简单。
确定插入点后,单击“常用”插入栏中的“媒体”“Flash”按钮。
步骤2弹出“选择文件”对话框,在“查找范围”下拉列表中选择动画所在文件夹,在文件夹列表中选择一个扩展名为“.swf”的Flash动画。
步骤3单击“确定”按钮,弹出“对象标签辅助功能属性”对话框,再次单击“确定”按钮,Flash动画就插入到网页中了。
步骤4单击选中网页中的Flash动画,可以在“属性”面板中对该动画的各项属性进行修改。
“属性”面板中部分常用设置项的意义如下。
循环:
选中该选项后,Flash动画将连续播放。
如果没有选中该选项,则Flash动画在播放一次后停止播放。
自动播放:
如果选中该选项,则在打开页面时自动播放Flash动画。
指定Flash动画周围的空白像素值。
以像素为单位指定Flash动画的宽度和高度。
文件:
指向Flash动画文件的路径。
重设大小:
将Flash动画恢复到实际大小。
品质:
设置Flash动画的播放品质。
比例:
确定Flash动画如何适应在其“宽”和“高”编辑框中设置的尺寸。
缺省为“默认(全部显示)”,表示显示整个Flash动画;
“无边框”表示使影片适合设定的尺寸,维持原始的纵横比;
“严格匹配”表示对影片进行缩放以适合设定的尺寸,忽略纵横比。
确定影片在页面上的对齐方式。
背景颜色:
指定Flash动画区域的背景颜色。
在不播放Flash动画时(在加载时和播放后)也显示此颜色。
参数:
单击此按钮打开一个对话框,可在其中输入传递给Flash动画的附加参数。
(二)应用透明Flash动画假如已为网页、某个表格或某个单元格设置了一张背景图像,当在单元格中插入一个Flash动画的时候,由于Flash动画的背景颜色会遮盖掉背景图像,这样就看不到背景图像了。
为使背景图像能够正常显示,只需将Flash动画的背景颜色改成透明即可。
步骤1在Dreamweaver中打开本项目素材“shop”文件夹中“index.html”文档。
在网站标志所在单元格右侧的单元格中插入“shopimages”文件夹中的动画文件“nihong.swf”。
步骤2保存文档,单击“文档”工具栏中的“在浏览器中预览/调试”按钮,在弹出的菜单中选择“预览在IExplore”菜单项,在浏览器中预览效果,可以发现Flash动画遮挡了表格的背景图像。
步骤3回到Dreamweaver操作界面。
选中Flash动画,单击“属性”面板中的“参数”按钮,打开“参数”对话框。
在“参数”列第一行单击,输入“wmode”,在对应的“值”列输入“transparent”,单击“确定”按钮,关闭“参数”对话框。
步骤4再次保存文档,并在浏览器中预览,可以看到动画后面的背景图像出现了。
(三)插入Flash按钮Flash按钮包括两类,一类是用Flash软件制作的按钮,另一类是Dreamweaver中集成的Flash按钮。
前者的插入方法与Flash动画类似,此处主要讲解后者的插入。
步骤1将插入点置于要插入Flash按钮的位置,选择“插入记录”“媒体”“Flash按钮”菜单,打开“插入Flash按钮”对话框。
步骤2在“样式”列表框中选择一种样式,其效果将显示在“范例”栏中,这里选择“Slider”;
在“按钮文本”编辑框中输入要在按钮上显示的文本内容,此处为“company”;
在“字体”下拉列表中选择一种字体,作为按钮文本的字体;
在“大小”编辑框中设置按钮文本的大小;
在“链接”编辑框中设置按钮的链接目标;
在“目标”下拉列表中选择打开链接文档的方式,此处设置为“_self”。
单击“确定”按钮,即可插入Flash按钮。
(四)插入音频文件步骤1打开本项目素材“music”文件夹中的“wma.html”文档。
将插入点置于网页中要插入音频文件的位置(此处为表格最下方的空白单元格),选择“插入记录”“媒体”“插件”菜单,打开“选择文件”对话框。
步骤2在“查找范围”下拉列表中选择文件所在位置(此处为“项目三musicmusic”文件夹),在文件列表中选择要插入的文件(此处为“ybzdgd.wma”),单击“确定”按钮,插入音频文件。
步骤3选中插入的音频文件,在“属性”面板中将“宽”和“高”分别改为“280”和“45”,将“对齐方式”改为“居中”。
步骤4保存文档并在IE浏览器中预览。
在音乐传来的同时,可以看到白色单元格中出现了WindowsMediaPlayer播放器的控制面板。
(五)插入视频文件除音频文件外,在Dreamweaver中还可以插入视频文件、Shockwave影片和Applet等其他媒体元素。
步骤1打开本项目素材“video”站点中的“cat_a.html”文档。
在“影片介绍”左侧的空白单元格中单击,然后选择“插入记录”“媒体”“插件”菜单,打开“选择文件”对话框。
步骤2选择要插入的视频文件(此处为“项目三videoimages”文件夹中的“cat.mpeg”),单击“确定”按钮,即可插入视频。
步骤3选中视频文件,在“属性”面板上“宽”和“高”编辑框中分别输入“320”和“240”,重新设置视频文件大小。
步骤4按【Ctrl+S】组合键保存文档,然后按F12键预览网页。
【任务实施】学习了动画应用与多媒体设置后,请同学们继续任务2“任务实施”中对“index.html”的操作,为网站主页插入动画和设置背景音乐。
【知识拓展】网页中图像不显示问题的处理初学者可能会遇到本来插入成功的图像,在预览网页时却不能正常显示的情况。
这是什么原因呢?
一般情况下,网页中的图像不显示是因为路径设置有误或图像名称输入有误。
如要确认图像的路径,可在文档窗口中选定图像,在“属性”面板中查看显示图像路径的“源文件”编辑框,要确认该编辑框中显示的路径同图像的实际路径相同。
另外,实际的图像名称与路径中的图像名称也必须相同。
因此,要仔细查看是否正确输入大小写字母。
多数情况下,在网上看不到图像是因为图像的路径被设定为绝对路径。
简单来说,就是图像路径以“file:
/”开头,这种情况下只有在自己的电脑上能看到图像,网络上的其他用户均看不到图像。
下面介绍在不同情况下该如何正确设定图像路径。
1.网页文档和图像在一个文件夹内时当插入图像的网页文档和图像在同一个文件夹内时,图像“属性”面板上的“源文件”编辑框中应该直接显示图像名称。
在上传网页时,一定要同时上传图像。
2.图像在网页文档的下一级文件夹中时一般情况下,都会把图像放在专门的文件夹里,存放图像的文件夹一般命名为“images”,此时图像“属性”面板上的“源文件”编辑框中应该显示为“images/图像名称”,在上传网页文档时,一定要同时上传保存图像的文件夹。
作业:
1请简述如何修改、增加导航条项目。
2网页中常见的图像文件格式有哪几种?
分别有什么特点?
3如何为Flash动画设置透明背景?
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Dreamweaver网页设计与制作第二版 电子 教案 Dreamweaver 网页 设计 制作 第二 A063954 示例 项目
链接地址:https://www.bdocx.com/doc/20964433.html