授课内容 | 项目三 制作汽车网站 | ||
授课班级 | 授课学时 | 8课时 | |
教学方法与手段 | 讲授法、演示法、讨论法。多媒体教学 | ||
项目内容宠物清洗机 | 某以经营福特公司生产的汽车产品为主的汽车贸易公司目前正在建设其门户网站，本项目的内容就是完成该项目中的产品展示与营销部分的设计制作。这部分是整个网站的核心，根据公司的要求，应建立完善的产品展示平台和信息发布系统。 | ||
教学目标 | 学生通过本项目的学习，能： 3、 掌握导航条的制作 4、 掌握插入Flash动画的方法 5、 掌握插入音频和视频的方法 | ||
教学重点与难点 | 教学重点： 1、熟练掌握文本的输入与格式设置 2、掌握编辑图像的方法及各种特效的制作方法 教学难点： 1、 掌握导航条的制作 2、 应用动画及多媒体。 | ||
教学过程设计 | 项目效果 【任务一】输入并设置网站子页文本 文本是网页中不可缺少的组成元素，它能将各种信息有效地传达给浏览者。本任务介绍文本的输入与编辑方法，主要包括文本的输入、文本段落格式和字符格式的设置，以及水平线和特殊字符的插入。 （一）输入文本 步骤2 按【Ctrl+A】组合键全选文本，然后按【Ctrl+C】组合键复制选中的文本。 步骤 3 切换至Dreamweaver操作界面，将插入点置于网页中要输入文本的位置，按【Ctrl+V】组合键即可将文本粘贴到网页中。 （二）设置文本段落格式和字符格式 1. 设置字体列表 Dreamweaver中自带的字体有限，一般满足不了大多数网页设计者的需求。可以通过设置字体列表解决这一问题。选中“属性”面板的“字体”选项，弹出“编辑字体列表”对话框。然后可参照项目二任务 3“设置页面属性”中的操作设置字体列表。 2. 设置文本字体及大小 设置好需要的字体列表后，就可以为网页中的文本设置字体了。下面介绍在“属性”面板中设置文本字体及大小的方法。 步骤 1 在文档中选中文本，如“最新商品”，在“属性”面板上“字体”下拉列表中选择所需字体，如“方正准圆_GBK”，单击“B”按钮使文字加粗显示。 步骤 2 在“大小”下拉列表中选择“16”，设置文本大小。 3. 设置段落缩进 通过设置段落缩进格式，可以更好地为文档布局。将插入点置于需要设置段落缩进的任意段落中，在“属性”面板上“格式”下拉列表中选择“段落”选项，单击“文本凸出”按钮 可使段落凸出，单击“文本缩进”按钮可使段落缩进。 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 按【Ctrl＋S】组合键保存文档，然后按F12键预览网页，将光标放 在设置为鼠标经过图像上方时，可以看到原始图像变为鼠标经过图像。 （五）制作导航条 导航条在网站中起着不可替代的作用，它把网站中的各个页面连接起来。每一个网站都有自己的导航条。利用与制作鼠标经过图像类似的方法，可制作具有可变效果的导航条。制作导航条需要用到两组大小相同而内容不同的图片，本项目素材“image”文件夹中准备了两组图片“dha1～dha6”和“dhb1～dhb6”，在开始操作之前应先将这两组图片拷贝到本地站点的图像文件夹中。 步骤 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”文档。在网站标志所在单元格右侧的单元格中插入“\shop\\images”文件夹中的动画文件“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 在“查范围”下拉列表中选择文件所在位置（此处为“\\项目三\\music\\ music”文件夹），在文件列表中选择要插入的文件（此处为“ybzdgd.wma”），单击“确定”按钮，插入音频文件。 步骤 3 选中插入的音频文件，在“属性”面板中将“宽”和“高”分别改为 “280”和“45”，将“对齐方式”改为“居中”。 步骤 4 保存文档并在IE浏览器中预览。在音乐传来的同时，可以看到白单元格中出现了 Windows Media Player 播放器的控制面板。 （五）插入视频文件 除音频文件外，在 Dreamweaver 中还可以插入视频文件、Shockwave 影片和 Applet等其他媒体元素。 步骤 1 打开本项目素材“video”站点中的“cat_a.html”文档。在“影片介绍”左侧的空白单元格中单击，然后选择“插入记录”→“媒体”→“插件”菜单，打开“选择文件”对话框。 步骤 2 选择要插入的视频文件（此处为“\\ 项目三 \\video\\images”天然气加气机文件夹中的“cat.mpeg”），单击“确定”按钮，即可插入视频。 步骤 3 选中视频文件，在“属性”面板上“宽”和“高”编辑框中分别输入 “320”和“240”，重新设置视频文件大小。 步骤 4 按【Ctrl+S】组合键保存文档，然后按 F12键预览网页。 【任务实施】 学习了动画应用与多媒体设置后，请同学们继续任务2“任务实施”中对“index.html”的操作，为网站主页插入动画和设置背景音乐。 【知识拓展】网页中图像不显示问题的处理 初学者可能会遇到本来插入成功的图像，在预览网页时却不能正常显示的情况。这是什么原因呢？ 一般情况下，网页中的图像不显示是因为路径设置有误或图像名称输入有误。如要确认图像的路径，可在文档窗口中选定图像，在“属性”面板中查看显示图像路径的“源文件”编辑框，要确认该编辑框中显示的路径同图像的实际路径相同。另外，实际的图像名称与路径中的图像名称也必须相同。因此，要仔细查看是否正确输入大小写字母。多数情况下，在网上看不到图像是因为图像的路径被设定为绝对路径。简单来说，就是图像路径以“file://…”开头，这种情况下只有在自己的电脑上能看到图像，网络上的其他用户均看不到图像。 下面介绍在不同情况下该如何正确设定图像路径。 1. 网页文档和图像在一个文件夹内时 当插入图像的网页文档和图像在同一个文件夹内时，图像“属性”面板上的“源文件”编辑框中应该直接显示图像名称。在上传网页时，一定要同时上传图像。 2. 图像在网页文档的下一级文件夹中时 一般情况下，都会把图像放在专门的文件夹里，存放图像的文件夹一般命名为“images”，此时图像“属性”面板上的“源文件”编辑框中应该显示为“images/图像名称”，在上传网页文档时，一定要同时上传保存图像的文件夹。 | ||
作业： 1．请简述如何修改、增加导航条项目。 半轴螺栓2．网页中常见的图像文件格式有哪几种？分别有什么特点？ 3．如何为Flash动画设置透明背景？ | |||
本文发布于:2023-06-11 18:00:06，感谢您对本站的认可！
本文链接：https://patent.en369.cn/patent/2/135069.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |