华师版高中第四册第二章 第二节 网页元素的插入和修饰.docVIP

华师版高中第四册第二章 第二节 网页元素的插入及修饰 第二章 网页制作 第二节 网页元素的插入及修饰 教材选择：（第四册、第二章、第二节） 教学目标：掌握在网页中插入文本、图像、悬停按钮、水平线、字幕、插件、计数器的方法，对网页进行修饰 教学重点、难点：悬停按钮、插件 教学策略：讲、练结合 教学课时：3课时 教学环境：网络教室 教学过程 我们在因特网上浏览别人的网页的时候，看到网页包含有许许多多的元素，如标题、文本、超级链接、图像、表单、多媒体信息等。（教师可随机打开一个网页给学生一边看一边讲解）那么下面我们就来看看如何运用这些元素来美化我们的“个人空间”。 一、文本信息的编排 网页中的文本是传递信息的主要形式，FrontPage 2000中文本的编排操作与WORD 2000一样。我们在“格式”→“字体”选项中，可以设置各种字体、字号及字型。如图2-2-1所示。 图2-2-1字体设置对话框 [小技巧] 如果两个自然段的内容相关，联系比较紧密，回车时可以按住Shift + Enter键，这时两段之间所隔将会小于直接按Enter键。 二、悬停按钮 悬停按钮实际上是在FrontPage 2000中已经预装好的Java小程序，它可以在页面与访问者之间产生奇妙的交互作用。当鼠标移到按钮上时，按钮会产生各种特殊效果。 （一）创建悬停按钮 在没有任何脚本的情况下利用创建悬停按钮来添加动画到你的网页是一种容易的方式。如同其他的按钮一样，悬停按钮也可以含有指向其他网页或文件的超链接。然而，当站点访问者单击或指向悬停按钮时，该按钮还能够发光，显示自定义图片或是播放声音效果。 我们在网页视图模式内，将插入点放置在要创建悬停按钮的位置。 在 “插入” 菜单上，指向 “组件” 然后单击 “悬停按钮”。 如图2-2-2所示。 图2-2-2悬停按钮属性框 在 “按钮文本” 框内，键入要放在悬停按钮上的文本标签。但你若想使用已包含文本标签的自定义图片，就不必输入任何文本。 在 “链接到” 框中，键入在单击按钮就会出现的网页或文件的URL。或者单击 “浏览” 以查找网页或文件的位置。 （二）为悬停按钮设置图片 我们可以使用图片当成悬停按钮的背景图案。 如图2-2-3所示。 在网页视图模式内，在悬停按钮上单击鼠标右键，然后单击快捷菜单上的 “悬停按钮属性”。 单击 “自定义”。 在 “按钮” 框内，键入要用作悬停按钮背景的图片的URL，然后单击 “确定”。或单击 “浏览” 来查找图片。 在 “宽度” 和 “高度” 框内，键入图片以像素为单位的宽度和高度，然后单击 “确定”。悬停按钮的大小必须与图片大小相匹配。 [注意] 如果你单击 “自定义” 并且选择一张要使用在悬停按钮上的图片，则无法修改按钮的颜色。 三、水平线 插入水平线的目的是分隔网页中不同的内容。要想插入水平线，先定位当前光标，然后选择菜单栏的“插入”→“水平线”即可。如果要对水平线进行设置，可以在水平线上单击鼠标右键，在弹出的快捷菜单中选择“水平线属性”。 图2-2-4不同样式的水平线 [注意]不同的主题自己带有不同的水平线。 四、图片 图片是我们在网页上见得最多的多媒体信息之一。它们对网站起到了很好的修饰作用。插入图片有两种方法：一种是直接应用剪贴板，这和WORD中的使用方法一样，就不多作介绍了；另一种方法是使用插入命令，下面一起来看看如何使用该命令。 （一）插入图片 其操作步骤如下： 1、单击“插入”菜单→“图片”→“来自文件”选项，在出现一个“图片”对话框的同时，还弹出一个“选择文件”对话框。 2、在“选择文件”对话框的中选择要插入的图片。如果要在因特网上查找图片，可以单击按钮。若是要搜寻本地计算机上的图片，单击按钮，找到图片的存放位置，然后从文件列表中双击某个图片文件（或选定图片文件），单击“确定”按钮，则图片插入到网页中。 （二）设置图片的属性 在网页中插入图片后，我们还要对图片的某些属性进行设置。在某个图片上单击鼠标右键后，弹出一个快捷菜单，选择“图片属性”。如图2-2-5所示。 图2-2-5 “图片属性”对话框 在这里我们除了可以设置图片的常规属性外，还可以设置图片的其他属性。 如： “图片源”指图片的存放位置。如果要重新选择其他一幅图片时，单击“浏览”按钮。如果要修改这幅图片，可以单击“编辑”按钮，启动自带的Image Composer软件，修改完图片后，只要退出该软件，网页图片就会自动更新。 “类型”：我们可以选择图片的类型，GIF或者是JPEG。在质量栏内一般设定为70-80就行了。 “替代表示”：如果当前图片较大，分辨率也较高，我们应该在“低分辨率”中选定一个备用的低分辨率图像，这样在一些浏览网页的低档机显示器不能显示