项目三 制作汽车网站 ——输入与编辑网页元素（课件）-《网页设计与制作》同步教学（高教版）

项目三 制作汽车网站 ——输入与编辑网页元素 输入并设置网站子页文本——文本输入与编辑 在主页中插入导航条和图像——应用图像 为主页设置动画和背景音乐——应用动画和多媒体 任务一 输入并设置网站子页文本 ——文本输入与编辑 文本是网页中不可缺少的组成元素，它能将各种信息有效地传达给浏览者。本任务介绍文本的输入与编辑方法，主要包括文本的输入，文本段落格式和字符格式的设置，以及水平线和特殊字符的插入。 一、输入文本 在Dreamweaver中输入文本的方法非常简单，只要将插入点定位在网页的某个位置，然后选择输入法输入文本就可以了。对于大量的外部文本，用户可利用剪贴板将其拷贝到网页文档中。 相关知识 二、设置文本段落格式和字符格式 默认情况下，输入文本的字体、字号等，与该网页“页面属性”中设置的相同。另外，用户也可利用“属性”面板上的“格式”下拉列表为文本设置系统提供的格式化样式（段落、标题1、标题2等），或直接设置所选文本的字体、大小、颜色、粗体、斜体、对齐方式和列表方式等。 Dreamweaver中自带的字体有限，一般满足不了大多数网页设计者的需求。我们可以通过设置字体列表来解决这一问题。在“属性”面板的“字体”下拉列表中选择“编辑字体列表”选项，弹出“编辑字体列表”对话框。 1．设置字体列表 2．设置文本字体及大小 设置好需要的字体列表后，就可以随心所欲地为网页中的文本设置字体了。下面就来学习在“属性”面板中设置文本字体及大小的方法。 3．设置段落缩进 通过设置段落缩进格式，可以更好地布局文档。将插入点置于需要设置段落缩进的任意段落中，在“属性”面板上“格式”下拉列表中选择“段落”选项。单击“文本凸出”按钮可使段落凸出，单击“文本缩进”按钮可使段落缩进。 4．设置列表项 列表分为项目列表和编号列表，项目列表常应用在“列举”类型的文本中，编号列表常应用在“条款”类型的文本中，这种方式使得文本更直观、明了。 选中所要设置的文本，然后单击“属性”面板上的“项目列表”按钮，效果如下图所示。 1．插入水平线 水平线对于组织信息和区分版块很有帮助。要插入水平线，可在定位插入点后，选择“插入记录”>“HTML”>“水平线”菜单。 三、插入水平线和特殊字符 2．插入特殊字符 要插入特殊字符，可在定位插入点后，选择“插入记录”>“HTML”>“特殊字符”菜单，然后在弹出的菜单中选择相应的特殊字符。 如果在“特殊字符”菜单下没有找到需要的特殊字符，可以通过选择该菜单中最下面的“其他字符”命令打开“插入其他字符”对话框。 实施步骤 在学习了文本的输入与编辑方法后，本节通过为汽车网站中的“关于买肯抠”网页输入文本并设置格式，来练习和巩固这些知识（具体操作见视频1-1）。 任务二 在主页中插入导航条和图像 ——应用图像 相关知识 一、网页中常见的图像文件格式 JPEG（联合图像专家组标准）格式：该格式适于表现色彩丰富，具有连续色调的图像，如各种照片。 GIF（图形交换格式）格式：由于它最多只能包含256种颜色，因而适合表现色调不连续或具有大面积单一颜色的图像。 PNG（便携网络图像）格式：该格式集JPEG和GIF格式的优点于一身，图像质量高且可包含透明区。 二、插入与编辑图像 在Dreamweaver中插入图像的方法非常简单。 三、使用图像占位符 图像占位符相当于图像的临时替代对象。如果网页中的某个图像尚未制作好，可暂时用图像占位符来代替。 四、制作鼠标经过图像 网页中经常可以看到这种情况，当鼠标移动到某一图像上时，图像变成了另一幅图像，而当鼠标移开时，又恢复成原来的图像，这就是我们通常所说的鼠标经过图像。 导航条在网站中起着不可替代的作用，它把网站中的各个页面连接起来。每一个网站都有自己的导航条。利用与制作鼠标经过图像类似的方法，可制作具有可变效果的导航条。 五、制作导航条 实施步骤 一、在网站主页中插入图像 该主页中的图像主要是产品图像，也就是汽车图像，本节来看看如何插入并设置这些汽车图像（具体操作见视频2-1）。 二、插入导航条 本节继续在上节打开的文档中操作，来为网站主页插入导航条（具体操作见视频2-2）。 任务三 为主页设置动画和背景音乐 ——应用动画和多媒体 相关知识 一、插入Flash动画 Flash动画是目前最流行的矢量动画，它具有文件尺寸小和变化丰富的优点，因而很多网页中都用到了它。 二、应用透明Flash动画 假如我们为网页、某个表格或某个单元格设置了一张很漂亮的背景图像，而当我们在单元格中又插入一个Flash动画的时候，由于Flash动画的背景颜色会遮盖掉背景图像，这样就看不到漂亮的背景图像了。那么如何使背景图像能够正常显示呢？答案就是设法将Flash动画的背景颜色改成透明。 三、插入Flash按钮 Flash按钮包括两类，一类是用Flash软件制作的按钮；另一类是Dreamweaver中集成的Flash按钮。前者的插入方法与Flash动画类似，此处主要讲解后者的插入。 四、插入音频文件 音乐不仅能陶冶人的情操，也能给人美的享受，如果在自己的网页中加一段美妙的音乐，那一定能给人不小的震撼。 选择“插入记录”>“媒体”>“插件”菜单，打开“选择文件”对话框 五、插入视频文件 除音频文件外，在Dreamweaver中还可以非常容易地插入视频文件、Shockwave 影片和Applet等其他媒体元素。 选择“插入记录”>“媒体”>“插件”菜单，打开“选择文件”对话框 实施步骤 一、在主页中插入动画 适当地运用动画可以使网页富有生机和活力，也能吸引更多人的目光。本节通过在网站主页中插入动画，进一步巩固动画的应用（具体操作见视频3-1）。 二、为主页设置背景音乐 为网页设置合适的背景音乐，可以给访问者更好的感觉。本节来为汽车网站的主页设置背景音乐（具体操作见视频3-2）。 知识拓展 一、网页中的图像不显示 一般情况下，网页中的图像不显示是因为路径设置有误或图像名称输入有误。如要确认图像的路径，可在文档窗口中选定图像后，在“属性”面板中查看显示图像路径的“源文件”文本框，要确认该文本框中显示的路径同图像的实际路径相同。另外，实际的图像名称与路径中的图像名称也必须相同，因此要仔细查看是否正确输入了大小写字母。 二、汽车类网站欣赏 对于汽车类网站，汽车展示至关重要，它是企业的重要促销渠道。另外，动画和视频技术的恰当运用也很重要。下面介绍几个笔者比较欣赏的汽车网站。 $$