网页设计实用教程第3章网页元素操作课件

第3章网页元素操作重点和难点

网页中图片的编辑在网页中插入多媒体对象在网页中表单的应用在网页中插入其他页面元素3.1网页元素基本操作

3.1.1文本操作1.插入文本2.插入特殊字符1）插入文本空格2）插入换行符3）插入特殊符号3．文本属性设置网页中的大部分信息都是通过文本表达，文字是网页的主体和构成网页最基本的元素，包括一般文字、特殊字符、滚动文字等。DreamweaverCS4可以方便的实现文本的插入和格式编辑操作。演示讲解3.1.2

图像操作图像是网页的主要元素之一，它不仅丰富了网页，而且给浏览者带来视觉上的美观在网页中恰当的使用图像，能使网页更加生动、形象和美观。插入图像在网页上插入图像的步骤如下：

(1)使光标位于要插入图像的位置。

(2)执行下列操作方法之一。单击“插入”菜单中的“图像”命令。单击“插入”面板的“常用”子面板上的“图像”按钮。按“Ctrl+Alt+I”组合键。2．设置图像属性演示讲解图像常用属性介绍如下：图像ID：表示图像的名称，可以在面板的左上角文本框内输入图像名称。宽和高：设定图像的宽度和高度。图像的原始大小尺寸会自动填充宽和高。其单位是像素。源文件：指定图像的源文件，方法是拖动“指向文件”图标（）到“站点”窗口中的一个文件上选取，或单击“浏览文件”图标（）浏览并选取源文件，或者直接输入路径。链接：为图像指定一个超链接，方法是拖动“指向文件”图标（）到“站点”窗口中的一个文件上选取，也可以单击“浏览文件”图标（）选取站点上的一个文件，或者直接输入URL路径。替换：替换文本框用于指定图像显示之前或图像无法显示时显示的文本。当浏览网页时，鼠标指向图片上时将作为图片提示信息显示文本框中的文本。地图：通过在一幅图片上选取局部范围来实现超链接的方法，被选取并被标注的地方，就叫图像地图。通过这种方法，可以在一幅图片上制作出许多链接，以分别链接到不同的网页上。图像属性面板提供了矩形（）、椭圆形（）与多边形（）三种局部范围地图的热点选取工具。此外，为改变选取的局部范围，还同时提供了一个“指针热点工具”（），用来移动图像地图的位置或编辑其形状。3.1.2

图像操作垂直边距和水平边距：在图像的四周以像素为单位添加间隔。“垂直边距”将在图像顶部和底部添加间隔，“水平”将在图像左边和右边添加间隔。目标：指定链接页面将在哪个窗口或框架中打开（当图像没有链接到文件时该选项不可用）。低品质源：用于指定在主图像没有加载之前加载的图像。其目的在于当下载的图片过大时，为减少下载时间，可以制作一张低分辨率、低品质源的小图片，这张小图片会事先下载，这样可以让访问者事先浏览到这张图像。边框：设置环绕图像的边框宽度（单位：像素）。输入0表示没有边框。可以为链接图像和无链接图像指定边框。在页面属性对话框中指定链接颜色。如果设置了没有链接的图像也要有边框，边框将和图像所在段落的文本的颜色一样。编辑：启动“外部编辑器”，并打开所选取的图像进行编辑。当保存图像文件回到Dreamweaver时，Dreamweaver将使用编辑后的图像更新编辑窗口。Dreamweaver默认的“外部编辑器”是Fireworks。如果有更适合图片编辑工具软件，也可以通过选择主菜单“编辑”/“使用外部编辑器”命令将默认值进行修改。3.1.2

图像操作3.1.2

图像操作3．插入“鼠标经过图像”

“鼠标经过图像”是指在浏览器中浏览网页时，当鼠标指针经过一幅图像时，图像随即变成另一幅图像，当鼠标离开时会恢复原来的图像。图像的轮替效果实际上是由主图像（当首次载入页面时显示的图像）和次图像（当鼠标指针移过主图像时显示的图像）的轮替显示实现的。插入鼠标经过图像的操作步骤如下：（1）在“插入面板”的“常用”选项卡中单击“图像”按钮旁边的下三角按钮▼，在弹出的下拉菜单中单击“鼠标经过图像”，弹出“插入鼠标经过图像”对话框，如图所示。

演示讲解（2）在“插入鼠标经过图像”对话框中，会设置各个选项，对话框各个选项介绍如下。图像名称：用来设置“鼠标经过图像”的名称。原始图像：用来设置首次载入页面时显示的图像。设置方法是在“原始图像”文本框中输入原始图像的路径及名称，或者单击文本框右侧的“浏览”按钮，打开“原始图像”对话框，浏览并选取图像源文件。鼠标经过图像：用来设置当移动鼠标指针到“原始图像”上时，原始图像替换成的图像。设置方法是在“鼠标经过图像”的文本框中输入该替换图像的路径及名称，或者单击文本框右侧的“浏览”按钮，打开“鼠标经过图像”对话框，浏览并选取图像源文件。3.1.2

图像操作预载鼠标经过图像：用来设置是否预先下载替换图像到本地。如果选中“预载鼠标经过图像”复选框，则网页一打开即预先下载替换图像到本地机，当移动鼠标指针移动到“鼠标经过图像”时，能迅速切换到替换图像；如果取消选中该复选框，则当移动鼠标指针移动到“鼠标经过图像”时，才下载这个替换的图像，替换的时候可能有画面不连贯的情况出现。替换文本：用来设置该“鼠标经过图像”的替换文本，当图像无法显示时，将显示这些替换文本。按下时，前往的URL：用来设置该“鼠标经过图像”上应用的超级链接。（3）参数设置完毕，单击“确定“按钮，即可完成插入“鼠标经过图像”的操作3.1.2

图像操作4．插入导航条导航条的作用是在页面中插入一排垂直或水平的导航按钮，导航条由一系列的图像按钮组成，每个图像按钮可以设置一个超级链接，但一个网页中一般只有一个导航条。导航条中每个图像按钮包含四幅图像：“状态图像”、“鼠标经过图像”、“按下图像”和“按下时鼠标经过图像”，这四幅图像可以交替变化。插入导航条的操作步骤如下：（1）首先准备几组图片，每组四张，分别是“状态图像”、“鼠标经过图像”、“按下图像”和“按下时鼠标经过图像”。（2）在“插入面板”的“常用”选项卡中单击“图像”按钮旁边的下三角按钮▼，在弹出的下拉菜单中单击“导航条”，弹出“插入导航条”对话框，如图所示。3.1.2

图像操作3.1.2

图像操作演示讲解（3）在导航条中，每个图像链接被称为一个项目，所有的项目都显示在“导航条元件”列表框中，默认情况下只存在一个默认的导航条按钮。在“项目名称”文本框中输入第一个导航条元件的名称“unnamed1”。（4）在“插入导航条”对话框中，设置各个参数（5）单击按钮：将增加一个项目，在“导航条元件”列表框中选中一个项目；单击按钮，将会删除选中的项目。在“导航条元件”列表框中一个项目，单击或按钮，可以调整该项目在导航条中的排列位置。（6）所有参数设置完成后，单击“确定”按钮关闭对话框，完成对导航条的插入。（7）保存网页文档，然后按“F12”键浏览该网页，可观看到导航条设置完毕的效果。3.1.2

图像操作3.1.3表格操作表格可以清晰展示相互关联的数据，在日常生活中就经常用到，表格也是网页的重要元素。表格由数个行和列组成，行列交叉组成表格的单元格，可以在表格的单元格中插入各种信息，包括文本、数字、链接、甚至图像和多媒体。1．插入表格插入表格的操作步骤如下：（1）将光标置于需要插入表格的地方，在DreamweaverCS4主窗口中，单击菜单“插入”→“表格”，或者在“插入面板”的“常用”选项卡中单击“表格”按钮，弹出如图3-6所示的“表格”对话框。（2）对“表格”对话框中的各个参数进行设置

（3）所有参数设置完成后，单击“确定”按钮关闭对话框，完成表格的插入。

3.1.3表格操作演示讲解3.1.3表格操作2．选择表格和表格元素在进行表格操作之前，必须首先选择被操作的对象，对于表格而言，可以选择整个表格、单行、单列、多行、多列、连续或者不连续的单元格。（1）选择整个表格（2）选择单行或者单列。将将鼠标指针指向某一行的左边线或某一列的上边线，当将鼠标指针变成一个黑色箭头形状时，单击即可选中单行或者单列。（3）选择连续的多行或多列。将将鼠标指针指向某一行的左边线或某一列的上边线，当将鼠标指针变成一个黑色箭头形状时，单击并拖动即可选中相邻的多行或多列。（4）选择不连续的多行或多列。选选择一行或一列，然后按住“Ctrl”键一次在表格的左边线或上边线单击即可选择不连续的多行或多列。（5）选择一个单元格。按住“Ctrl”键，单击任一单元格即可选中一个单元格。（6）选择连续的单元格。先将光标置于一个单元格中，然后横向或纵向拖动，即可以选择多个连续的单元格。也可以先将光标置于一个单元格中，然后按住“shift”键再单击其他的单元格。（7）选择不连续的单元格。按住“Ctrl”键，分别单击多个不连续的单元格即可，若再次单击被选中的单元格，则会取消该单元格的选中状态。3.1.3表格操作3．设置表格属性选择页面中的表格，就可以在窗口下面的属性面板中设置表格的各项参数值，表格的“属性”面板如图所示3.1.3表格操作4．设置单元格属性表格行列交叉组成表格的单元格，将光标置于单元格中并单击，即可打开单元格“属性”面板，如图3-8所示。3.1.3表格操作5．编辑表格实际应用的表格往往是结构不规则的表格，需要对表格结构进行调整。（1）合并单元格：首先选择需要合并的单元格。注意所合并的单元格必须是连续的。单击“属性”面板上的“合并单元格”按钮：即可合并所选的单元格。（2）拆分单元格：先将光标置于需要拆分的单元格中，然后单击“属性”面板上的“拆分单元格”按钮；也可以右击，在弹出的快捷菜单中单击“表格”→“拆分单元格”，弹出“拆分单元格”对话框。3.1.3表格操作如果要将单元格拆分为多行，则可以选中“行”单选按钮；如果要将单元格拆分为多列，则可以选中“列”单选按钮。在“行数”或“列数”外边框中，输入需要拆分的行数或列数。设置完毕，单击“确定”按钮，选中的单元格就会按照设置被拆分。（3）插入行或列。先选中要插入行或列的单元格，然后右击，在弹出的如图所示的快捷菜单中单击“表格”→“插入行”或“插入列”，就可以完成插入行或列的操作。3.1.3表格操作（4）删除行或列。如果要删除行或列，则只需先选中要删除的行或列，然后右击，在弹出的快捷菜单中单击“表格”→“删除行”或“删除列”，就可以完成删除行或列的操作。3.1.3表格操作3.1.4多媒体元素操作随着互联网技术的迅猛发展，制作人员总希望能使用引人入胜的动态多媒体效果来吸引用户的注意，激发用户参与的热情。使用DreamweaverCS4可以方便地在网页中添加Flash动画、音频、视频等多媒体信息。插入Flash动画插入Flash动画的操作步骤如下：在“插入面板”的“常用”子面板中单击“媒体”按钮旁边的下三角按钮▼，在弹出的下拉菜单中单击“SWF”，弹出“选择文件”对话框，选择要插入的.swf文件即可将其插入当网页中，如图3-11所示。插入到编辑窗口的Flash动画显示为一个灰色矩形，中间一个Flash标志。单击属性面板上的“播放”按钮，可以在编辑窗口中播发动画。在浏览器中浏览时，Flash动画可以直接播放。演示讲解3.1.4多媒体元素操作2.属性设置选择页面中的Flash动画，就可以在窗口下面的属性面板中设置Flash动画的各项参数值，Flash动画的“属性”面板如图所示。演示讲解3.1.5其他元素操作1.在网页中插入水平线水平线不仅可以协调安排页面信息，还可以用来对标题和其他元素加下划线起强调作用。插入水平线步骤：（1）在要插入水平线处，单击鼠标左键定位插入位置。（2）在“插入面板”的“常用”选项卡中单击“水平线”按钮，网页中插入了一条水平线。2.在网页中插入日期在DreamweaverCS4中可以向网页中插入当前的日期，还可以在保存文档时自动更新文档的修改日期。插入日期步骤如下：（1）在要插入日期处，单击鼠标左键定位插入位置。（2）在“插入面板”的“常用”选项卡中单击“日期”按钮，弹出“插入日期”对话框。（3）在“插入日期”对话框中，设置各个参数，单击“确定”按钮就可以插入日期3.2典例剖析—流行音乐排行榜操作任务：在“学子之家”站点文件夹中创建“Music”文件夹，在文件夹中创建名为“Music.html”的网页，网页的标题为“流行音乐排行榜”。3.2.1插入文本—显示歌名及相关介绍3.2典例剖析—流行音乐排行榜操作任务：（1）设置“歌曲排行榜”为标题1。（2）设置网页中“歌曲”和“歌曲介绍”文字大小为16。具体操作过程如下：（1）选中文本“歌曲排行榜”，在文本属性面板的格式下拉选项框中选中“标题1”。（2）选中文本歌曲及介绍文本，在文本属性面板中选择“CSS”选项卡，在大小下拉选项框中选中“16”。（3）保存该网页。3.2.2设置文本属性3.2典例剖析—流行音乐排行榜操作任务：在网页中歌手名字的前面的插入歌手图片。3.2.3插入歌手图片演示讲解3.2典例剖析—流行音乐排行榜操作任务：对上面插入的图像的属性设置要求如下：（1）设置图像的宽度为“140”，高度为“105”。（2）调整图像与其上方及下方文字的间距为“10”。（3）设置图像的替换文本为“王力宏”。（4）为图像添加边框，边框宽度为“2”。（5