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

第第第第3 3 3 3章章章章 网页元素操作网页元素操作网页元素操作网页元素操作 u重点和难点重点和难点 网页中图片的编辑网页中图片的编辑在网页中插入多媒体对象在网页中插入多媒体对象在网页中表单的应用在网页中表单的应用在网页中插入其他页面元素在网页中插入其他页面元素3.1 3.1 网页元素基本操作网页元素基本操作 3.1.1 3.1.1 3.1.1 3.1.1 文本操作文本操作文本操作文本操作1.1.插入文本插入文本插入文本插入文本2.2.插入特殊字符插入特殊字符插入特殊字符插入特殊字符 1 1）插入文本空格）插入文本空格）插入文本空格）插入文本空格 2 2）插入换行符）插入换行符）插入换行符）插入换行符 3 3）插入特殊符号）插入特殊符号）插入特殊符号）插入特殊符号3 3文本属性设置文本属性设置文本属性设置文本属性设置 网页中的大部分信息都是通过文本表达，文字是网页的主体网页中的大部分信息都是通过文本表达，文字是网页的主体网页中的大部分信息都是通过文本表达，文字是网页的主体网页中的大部分信息都是通过文本表达，文字是网页的主体和构成网页最基本的元素，包括一般文字、特殊字符、滚动文字和构成网页最基本的元素，包括一般文字、特殊字符、滚动文字和构成网页最基本的元素，包括一般文字、特殊字符、滚动文字和构成网页最基本的元素，包括一般文字、特殊字符、滚动文字等。等。等。等。Dreamweaver CS4Dreamweaver CS4可以方便的实现文本的插入和格式编辑操可以方便的实现文本的插入和格式编辑操可以方便的实现文本的插入和格式编辑操可以方便的实现文本的插入和格式编辑操作。作。作。作。演示讲解演示讲解演示讲解演示讲解3.1.2 3.1.2 图像操作图像操作 图像是网页的主要元素之一，它不仅丰富了网页，而且给图像是网页的主要元素之一，它不仅丰富了网页，而且给图像是网页的主要元素之一，它不仅丰富了网页，而且给图像是网页的主要元素之一，它不仅丰富了网页，而且给浏览者带来视觉上的美观在网页中恰当的使用图像，能使网页浏览者带来视觉上的美观在网页中恰当的使用图像，能使网页浏览者带来视觉上的美观在网页中恰当的使用图像，能使网页浏览者带来视觉上的美观在网页中恰当的使用图像，能使网页更加生动、形象和美观。更加生动、形象和美观。更加生动、形象和美观。更加生动、形象和美观。1.插入图像在网页上插入图像的步骤如下：(1)使光标位于要插入图像的位置。(2)执行下列操作方法之一。单击“插入”菜单中的“图像”命令。单击“插入”面板的“常用”子面板上的“图像”按钮。按“Ctrl+Alt+I”组合键。2设置图像属性演示讲解演示讲解演示讲解演示讲解 图像常用属性介绍如下：图像常用属性介绍如下：图像常用属性介绍如下：图像常用属性介绍如下：图像图像图像图像IDID：表示图像的名称，可以在面板的左上角文本框内输入图像名称。：表示图像的名称，可以在面板的左上角文本框内输入图像名称。：表示图像的名称，可以在面板的左上角文本框内输入图像名称。：表示图像的名称，可以在面板的左上角文本框内输入图像名称。宽和高：设定图像的宽度和高度。图像的原始大小尺寸会自动填充宽和宽和高：设定图像的宽度和高度。图像的原始大小尺寸会自动填充宽和宽和高：设定图像的宽度和高度。图像的原始大小尺寸会自动填充宽和宽和高：设定图像的宽度和高度。图像的原始大小尺寸会自动填充宽和高。其单位是像素。高。其单位是像素。高。其单位是像素。高。其单位是像素。源文件：指定图像的源文件，方法是拖动源文件：指定图像的源文件，方法是拖动源文件：指定图像的源文件，方法是拖动源文件：指定图像的源文件，方法是拖动“指向文件指向文件指向文件指向文件”图标（）到图标（）到图标（）到图标（）到“站点站点站点站点”窗口中的一个文件上选取，或单击窗口中的一个文件上选取，或单击窗口中的一个文件上选取，或单击窗口中的一个文件上选取，或单击“浏览文件浏览文件浏览文件浏览文件”图标（）浏览并选取源文图标（）浏览并选取源文图标（）浏览并选取源文图标（）浏览并选取源文件，或者直接输入路径。件，或者直接输入路径。件，或者直接输入路径。件，或者直接输入路径。链接：为图像指定一个超链接，方法是拖动链接：为图像指定一个超链接，方法是拖动链接：为图像指定一个超链接，方法是拖动链接：为图像指定一个超链接，方法是拖动“指向文件指向文件指向文件指向文件”图标（）到图标（）到图标（）到图标（）到“站站站站点点点点”窗口中的一个文件上选取，也可以单击窗口中的一个文件上选取，也可以单击窗口中的一个文件上选取，也可以单击窗口中的一个文件上选取，也可以单击“浏览文件浏览文件浏览文件浏览文件”图标（）选取站图标（）选取站图标（）选取站图标（）选取站点上的一个文件，或者直接输入点上的一个文件，或者直接输入点上的一个文件，或者直接输入点上的一个文件，或者直接输入URLURL路径。路径。路径。路径。替换：替换文本框用于指定图像显示之前或图像无法显示时显示的文本。替换：替换文本框用于指定图像显示之前或图像无法显示时显示的文本。替换：替换文本框用于指定图像显示之前或图像无法显示时显示的文本。替换：替换文本框用于指定图像显示之前或图像无法显示时显示的文本。当浏览网页时，鼠标指向图片上时将作为图片提示信息显示文本框中的当浏览网页时，鼠标指向图片上时将作为图片提示信息显示文本框中的当浏览网页时，鼠标指向图片上时将作为图片提示信息显示文本框中的当浏览网页时，鼠标指向图片上时将作为图片提示信息显示文本框中的文本。文本。文本。文本。地图：通过在一幅图片上选取局部范围来实现超链接的方法，被选取并地图：通过在一幅图片上选取局部范围来实现超链接的方法，被选取并地图：通过在一幅图片上选取局部范围来实现超链接的方法，被选取并地图：通过在一幅图片上选取局部范围来实现超链接的方法，被选取并被标注的地方，就叫图像地图。通过这种方法，可以在一幅图片上制作被标注的地方，就叫图像地图。通过这种方法，可以在一幅图片上制作被标注的地方，就叫图像地图。通过这种方法，可以在一幅图片上制作被标注的地方，就叫图像地图。通过这种方法，可以在一幅图片上制作出许多链接，以分别链接到不同的网页上。图像属性面板提供了矩形（）出许多链接，以分别链接到不同的网页上。图像属性面板提供了矩形（）出许多链接，以分别链接到不同的网页上。图像属性面板提供了矩形（）出许多链接，以分别链接到不同的网页上。图像属性面板提供了矩形（）、椭圆形（）与多边形（）三种局部范围地图的热点选取工具。此外，、椭圆形（）与多边形（）三种局部范围地图的热点选取工具。此外，、椭圆形（）与多边形（）三种局部范围地图的热点选取工具。此外，、椭圆形（）与多边形（）三种局部范围地图的热点选取工具。此外，为改变选取的局部范围，还同时提供了一个为改变选取的局部范围，还同时提供了一个为改变选取的局部范围，还同时提供了一个为改变选取的局部范围，还同时提供了一个“指针热点工具指针热点工具指针热点工具指针热点工具”（），用来（），用来（），用来（），用来移动图像地图的位置或编辑其形状。移动图像地图的位置或编辑其形状。移动图像地图的位置或编辑其形状。移动图像地图的位置或编辑其形状。3.1.2 3.1.2 图像操作图像操作 垂直边距和水平边距：在图像的四周以像素为单位添加间隔。垂直边距和水平边距：在图像的四周以像素为单位添加间隔。垂直边距和水平边距：在图像的四周以像素为单位添加间隔。垂直边距和水平边距：在图像的四周以像素为单位添加间隔。“垂垂垂垂直边距直边距直边距直边距”将在图像顶部和底部添加间隔，将在图像顶部和底部添加间隔，将在图像顶部和底部添加间隔，将在图像顶部和底部添加间隔，“水平水平水平水平”将在图像左边和右将在图像左边和右将在图像左边和右将在图像左边和右边添加间隔。边添加间隔。边添加间隔。边添加间隔。目标：指定链接页面将在哪个窗口或框架中打开（当图像没有链目标：指定链接页面将在哪个窗口或框架中打开（当图像没有链目标：指定链接页面将在哪个窗口或框架中打开（当图像没有链目标：指定链接页面将在哪个窗口或框架中打开（当图像没有链接到文件时该选项不可用）。接到文件时该选项不可用）。接到文件时该选项不可用）。接到文件时该选项不可用）。低品质源：用于指定在主图像没有加载之前加载的图像。其目的低品质源：用于指定在主图像没有加载之前加载的图像。其目的低品质源：用于指定在主图像没有加载之前加载的图像。其目的低品质源：用于指定在主图像没有加载之前加载的图像。其目的在于当下载的图片过大时，为减少下载时间，可以制作一张低分在于当下载的图片过大时，为减少下载时间，可以制作一张低分在于当下载的图片过大时，为减少下载时间，可以制作一张低分在于当下载的图片过大时，为减少下载时间，可以制作一张低分辨率、低品质源的小图片，这张小图片会事先下载，这样可以让辨率、低品质源的小图片，这张小图片会事先下载，这样可以让辨率、低品质源的小图片，这张小图片会事先下载，这样可以让辨率、低品质源的小图片，这张小图片会事先下载，这样可以让访问者事先浏览到这张图像。访问者事先浏览到这张图像。访问者事先浏览到这张图像。访问者事先浏览到这张图像。边框：设置环绕图像的边框宽度（单位：像素）。输入边框：设置环绕图像的边框宽度（单位：像素）。输入边框：设置环绕图像的边框宽度（单位：像素）。输入边框：设置环绕图像的边框宽度（单位：像素）。输入0 0表示没有表示没有表示没有表示没有边框。可以为链接图像和无链接图像指定边框。在页面属性对话边框。可以为链接图像和无链接图像指定边框。在页面属性对话边框。可以为链接图像和无链接图像指定边框。在页面属性对话边框。可以为链接图像和无链接图像指定边框。在页面属性对话框中指定链接颜色。如果设置了没有链接的图像也要有边框，边框中指定链接颜色。如果设置了没有链接的图像也要有边框，边框中指定链接颜色。如果设置了没有链接的图像也要有边框，边框中指定链接颜色。如果设置了没有链接的图像也要有边框，边框将和图像所在段落的文本的颜色一样。框将和图像所在段落的文本的颜色一样。框将和图像所在段落的文本的颜色一样。框将和图像所在段落的文本的颜色一样。编辑：启动编辑：启动编辑：启动编辑：启动“外部编辑器外部编辑器外部编辑器外部编辑器”，并打开所选取的图像进行编辑。当保，并打开所选取的图像进行编辑。当保，并打开所选取的图像进行编辑。当保，并打开所选取的图像进行编辑。当保存图像文件回到存图像文件回到存图像文件回到存图像文件回到DreamweaverDreamweaver时，时，时，时，DreamweaverDreamweaver将使用编辑后的将使用编辑后的将使用编辑后的将使用编辑后的图像更新编辑窗口。图像更新编辑窗口。图像更新编辑窗口。图像更新编辑窗口。DreamweaverDreamweaver默认的默认的默认的默认的“外部编辑器外部编辑器外部编辑器外部编辑器”是是是是FireworksFireworks。如果有更适合图片编辑工具软件，也可以通过选择主。如果有更适合图片编辑工具软件，也可以通过选择主。如果有更适合图片编辑工具软件，也可以通过选择主。如果有更适合图片编辑工具软件，也可以通过选择主菜单菜单菜单菜单“编辑编辑编辑编辑”/“”/“使用外部编辑器使用外部编辑器使用外部编辑器使用外部编辑器”命令将默认值进行修改。命令将默认值进行修改。命令将默认值进行修改。命令将默认值进行修改。3.1.2 3.1.2 图像操作图像操作3.1.2 3.1.2 图像操作图像操作3 3插入插入插入插入“鼠标经过图像鼠标经过图像鼠标经过图像鼠标经过图像”“鼠标经过图像”是指在浏览器中浏览网页时，当鼠标指针经过一幅图像时，图像随即变成另一幅图像，当鼠标离开时会恢复原来的图像。图像的轮替效果实际上是由主图像（当首次载入页面时显示的图像）和次图像（当鼠标指针移过主图像时显示的图像）的轮替显示实现的。插入鼠标经过图像的操作步骤如下：（1）在“插入面板”的“常用”选项卡中单击“图像”按钮旁边的下三角按钮，在弹出的下拉菜单中单击“鼠标经过图像”，弹出“插入鼠标经过图像”对话框，如图所示。演示讲解演示讲解演示讲解演示讲解（2 2）在）在）在）在“插入鼠标经过图像插入鼠标经过图像插入鼠标经过图像插入鼠标经过图像”对话框中，会设置各个选项，对话框中，会设置各个选项，对话框中，会设置各个选项，对话框中，会设置各个选项，对话框各个选项介绍如下。对话框各个选项介绍如下。对话框各个选项介绍如下。对话框各个选项介绍如下。图像名称：用来设置图像名称：用来设置图像名称：用来设置图像名称：用来设置“鼠标经过图像鼠标经过图像鼠标经过图像鼠标经过图像”的名称。的名称。的名称。的名称。原始图像：用来设置首次载入页面时显示的图像。设原始图像：用来设置首次载入页面时显示的图像。设原始图像：用来设置首次载入页面时显示的图像。设原始图像：用来设置首次载入页面时显示的图像。设置方法是在置方法是在置方法是在置方法是在“原始图像原始图像原始图像原始图像”文本框中输入原始图像的路径文本框中输入原始图像的路径文本框中输入原始图像的路径文本框中输入原始图像的路径及名称，或者单击文本框右侧的及名称，或者单击文本框右侧的及名称，或者单击文本框右侧的及名称，或者单击文本框右侧的“浏览浏览浏览浏览”按钮，打开按钮，打开按钮，打开按钮，打开“原原原原始图像始图像始图像始图像”对话框，浏览并选取图像源文件。对话框，浏览并选取图像源文件。对话框，浏览并选取图像源文件。对话框，浏览并选取图像源文件。鼠标经过图像：用来设置当移动鼠标指针到鼠标经过图像：用来设置当移动鼠标指针到鼠标经过图像：用来设置当移动鼠标指针到鼠标经过图像：用来设置当移动鼠标指针到“原始图像原始图像原始图像原始图像”上时，原始图像替换成的图像。设置方法是在上时，原始图像替换成的图像。设置方法是在上时，原始图像替换成的图像。设置方法是在上时，原始图像替换成的图像。设置方法是在“鼠标鼠标鼠标鼠标经过图像经过图像经过图像经过图像”的文本框中输入该替换图像的路径及名称，的文本框中输入该替换图像的路径及名称，的文本框中输入该替换图像的路径及名称，的文本框中输入该替换图像的路径及名称，或者单击文本框右侧的或者单击文本框右侧的或者单击文本框右侧的或者单击文本框右侧的“浏览浏览浏览浏览”按钮，打开按钮，打开按钮，打开按钮，打开“鼠标经过图鼠标经过图鼠标经过图鼠标经过图像像像像”对话框，浏览并选取图像源文件。对话框，浏览并选取图像源文件。对话框，浏览并选取图像源文件。对话框，浏览并选取图像源文件。3.1.2 3.1.2 图像操作图像操作 预载鼠标经过图像：用来设置是否预先下载替换图像预载鼠标经过图像：用来设置是否预先下载替换图像预载鼠标经过图像：用来设置是否预先下载替换图像预载鼠标经过图像：用来设置是否预先下载替换图像到本地。如果选中到本地。如果选中到本地。如果选中到本地。如果选中“预载鼠标经过图像预载鼠标经过图像预载鼠标经过图像预载鼠标经过图像”复选框，则网复选框，则网复选框，则网复选框，则网页一打开即预先下载替换图像到本地机，当移动鼠标页一打开即预先下载替换图像到本地机，当移动鼠标页一打开即预先下载替换图像到本地机，当移动鼠标页一打开即预先下载替换图像到本地机，当移动鼠标指针移动到指针移动到指针移动到指针移动到“鼠标经过图像鼠标经过图像鼠标经过图像鼠标经过图像”时，能迅速切换到替换图时，能迅速切换到替换图时，能迅速切换到替换图时，能迅速切换到替换图像；如果取消选中该复选框，则当移动鼠标指针移动像；如果取消选中该复选框，则当移动鼠标指针移动像；如果取消选中该复选框，则当移动鼠标指针移动像；如果取消选中该复选框，则当移动鼠标指针移动到到到到“鼠标经过图像鼠标经过图像鼠标经过图像鼠标经过图像”时，才下载这个替换的图像，替换时，才下载这个替换的图像，替换时，才下载这个替换的图像，替换时，才下载这个替换的图像，替换的时候可能有画面不连贯的情况出现。的时候可能有画面不连贯的情况出现。的时候可能有画面不连贯的情况出现。的时候可能有画面不连贯的情况出现。替换文本：用来设置该替换文本：用来设置该替换文本：用来设置该替换文本：用来设置该“鼠标经过图像鼠标经过图像鼠标经过图像鼠标经过图像”的替换文本，的替换文本，的替换文本，的替换文本，当图像无法显示时，将显示这些替换文本。当图像无法显示时，将显示这些替换文本。当图像无法显示时，将显示这些替换文本。当图像无法显示时，将显示这些替换文本。按下时，前往的按下时，前往的按下时，前往的按下时，前往的URLURL：用来设置该：用来设置该：用来设置该：用来设置该“鼠标经过图像鼠标经过图像鼠标经过图像鼠标经过图像”上上上上应用的超级链接。应用的超级链接。应用的超级链接。应用的超级链接。（3 3）参数设置完毕，单击）参数设置完毕，单击）参数设置完毕，单击）参数设置完毕，单击“确定确定确定确定“按钮，即可完成插入按钮，即可完成插入按钮，即可完成插入按钮，即可完成插入“鼠标经过图像鼠标经过图像鼠标经过图像鼠标经过图像”的操作的操作的操作的操作3.1.2 3.1.2 图像操作图像操作4 4插入导航条插入导航条插入导航条插入导航条导航条的作用是在页面中插入一排垂直或水平的导航按钮，导航条导航条的作用是在页面中插入一排垂直或水平的导航按钮，导航条导航条的作用是在页面中插入一排垂直或水平的导航按钮，导航条导航条的作用是在页面中插入一排垂直或水平的导航按钮，导航条由一系列的图像按钮组成，每个图像按钮可以设置一个超级链接，由一系列的图像按钮组成，每个图像按钮可以设置一个超级链接，由一系列的图像按钮组成，每个图像按钮可以设置一个超级链接，由一系列的图像按钮组成，每个图像按钮可以设置一个超级链接，但一个网页中一般只有一个导航条。导航条中每个图像按钮包含但一个网页中一般只有一个导航条。导航条中每个图像按钮包含但一个网页中一般只有一个导航条。导航条中每个图像按钮包含但一个网页中一般只有一个导航条。导航条中每个图像按钮包含四幅图像：四幅图像：四幅图像：四幅图像：“状态图像状态图像状态图像状态图像”、“鼠标经过图像鼠标经过图像鼠标经过图像鼠标经过图像”、“按下图像按下图像按下图像按下图像”和和和和“按下时按下时按下时按下时鼠标经过图像鼠标经过图像鼠标经过图像鼠标经过图像”，这四幅图像可以交替变化。，这四幅图像可以交替变化。，这四幅图像可以交替变化。，这四幅图像可以交替变化。插入导航条的操作步骤如下：插入导航条的操作步骤如下：插入导航条的操作步骤如下：插入导航条的操作步骤如下：（1 1）首先准备几组图片，每组四张，分别是）首先准备几组图片，每组四张，分别是）首先准备几组图片，每组四张，分别是）首先准备几组图片，每组四张，分别是“状态图像状态图像状态图像状态图像”、“鼠标经过图像鼠标经过图像鼠标经过图像鼠标经过图像”、“按下图像按下图像按下图像按下图像”和和和和“按下时鼠标经过图像按下时鼠标经过图像按下时鼠标经过图像按下时鼠标经过图像”。（2 2）在）在）在）在“插入面板插入面板插入面板插入面板”的的的的“常用常用常用常用”选项卡中单击选项卡中单击选项卡中单击选项卡中单击“图像图像图像图像”按钮旁按钮旁按钮旁按钮旁边的下三角按钮边的下三角按钮边的下三角按钮边的下三角按钮，在弹出的下拉菜单中单击，在弹出的下拉菜单中单击，在弹出的下拉菜单中单击，在弹出的下拉菜单中单击“导航条导航条导航条导航条”，弹出，弹出，弹出，弹出“插入导航条插入导航条插入导航条插入导航条”对话框，如图所示。对话框，如图所示。对话框，如图所示。对话框，如图所示。3.1.2 3.1.2 图像操作图像操作3.1.2 3.1.2 图像操作图像操作演示讲解演示讲解演示讲解演示讲解（3 3）在导航条中，每个图像链接被称为一个项目，所有）在导航条中，每个图像链接被称为一个项目，所有）在导航条中，每个图像链接被称为一个项目，所有）在导航条中，每个图像链接被称为一个项目，所有的项目都显示在的项目都显示在的项目都显示在的项目都显示在“导航条元件导航条元件导航条元件导航条元件”列表框中，默认情况下列表框中，默认情况下列表框中，默认情况下列表框中，默认情况下只存在一个默认的导航条按钮。在只存在一个默认的导航条按钮。在只存在一个默认的导航条按钮。在只存在一个默认的导航条按钮。在“项目名称项目名称项目名称项目名称”文本框文本框文本框文本框中输入第一个导航条元件的名称中输入第一个导航条元件的名称中输入第一个导航条元件的名称中输入第一个导航条元件的名称“unnamed1”“unnamed1”。（4 4）在）在）在）在“插入导航条插入导航条插入导航条插入导航条”对话框中，设置各个参数对话框中，设置各个参数对话框中，设置各个参数对话框中，设置各个参数（5 5）单击按钮：将增加一个项目，在）单击按钮：将增加一个项目，在）单击按钮：将增加一个项目，在）单击按钮：将增加一个项目，在“导航条元件导航条元件导航条元件导航条元件”列表列表列表列表框中选中一个项目；单击按钮，将会删除选中的项目。框中选中一个项目；单击按钮，将会删除选中的项目。框中选中一个项目；单击按钮，将会删除选中的项目。框中选中一个项目；单击按钮，将会删除选中的项目。在在在在“导航条元件导航条元件导航条元件导航条元件”列表框中一个项目，单击列表框中一个项目，单击列表框中一个项目，单击列表框中一个项目，单击 或按钮，可或按钮，可或按钮，可或按钮，可以调整该项目在导航条中的排列位置。以调整该项目在导航条中的排列位置。以调整该项目在导航条中的排列位置。以调整该项目在导航条中的排列位置。（6 6）所有参数设置完成后，单击）所有参数设置完成后，单击）所有参数设置完成后，单击）所有参数设置完成后，单击“确定确定确定确定”按钮关闭对话框，按钮关闭对话框，按钮关闭对话框，按钮关闭对话框，完成对导航条的插入。完成对导航条的插入。完成对导航条的插入。完成对导航条的插入。（7 7）保存网页文档，然后按）保存网页文档，然后按）保存网页文档，然后按）保存网页文档，然后按“F12”“F12”键浏览该网页，可观键浏览该网页，可观键浏览该网页，可观键浏览该网页，可观看到导航条设置完毕的效果。看到导航条设置完毕的效果。看到导航条设置完毕的效果。看到导航条设置完毕的效果。3.1.2 3.1.2 图像操作图像操作3.1.3 3.1.3 表格操作表格操作 表格可以清晰展示相互关联的数据，在日常生活表格可以清晰展示相互关联的数据，在日常生活表格可以清晰展示相互关联的数据，在日常生活表格可以清晰展示相互关联的数据，在日常生活中就经常用到，表格也是网页的重要元素。表格由数中就经常用到，表格也是网页的重要元素。表格由数中就经常用到，表格也是网页的重要元素。表格由数中就经常用到，表格也是网页的重要元素。表格由数个行和列组成，行列交叉组成表格的单元格，可以在个行和列组成，行列交叉组成表格的单元格，可以在个行和列组成，行列交叉组成表格的单元格，可以在个行和列组成，行列交叉组成表格的单元格，可以在表格的单元格中插入各种信息，包括文本、数字、链表格的单元格中插入各种信息，包括文本、数字、链表格的单元格中插入各种信息，包括文本、数字、链表格的单元格中插入各种信息，包括文本、数字、链接、甚至图像和多媒体。接、甚至图像和多媒体。接、甚至图像和多媒体。接、甚至图像和多媒体。1 1插入表格插入表格插入表格插入表格插入表格的操作步骤如下：插入表格的操作步骤如下：插入表格的操作步骤如下：插入表格的操作步骤如下：（1 1）将光标置于需要插入表格的地方，在将光标置于需要插入表格的地方，在将光标置于需要插入表格的地方，在将光标置于需要插入表格的地方，在Dreamweaver Dreamweaver CS4CS4主窗口中，单击菜单主窗口中，单击菜单主窗口中，单击菜单主窗口中，单击菜单“插入插入插入插入”“”“表格表格表格表格”，或者在，或者在，或者在，或者在“插插插插入面板入面板入面板入面板”的的的的“常用常用常用常用”选项卡中单击选项卡中单击选项卡中单击选项卡中单击“表格表格表格表格”按钮，弹出如图按钮，弹出如图按钮，弹出如图按钮，弹出如图3-63-6所示的所示的所示的所示的“表格表格表格表格”对话框。对话框。对话框。对话框。（2 2）对）对）对）对“表格表格表格表格”对话框中的各个参数进行设置对话框中的各个参数进行设置对话框中的各个参数进行设置对话框中的各个参数进行设置 （3）所有参数设置完成后，单击“确定”按钮关闭对话框，完成表格的插入。3.1.3 3.1.3 表格操作表格操作演示讲解演示讲解演示讲解演示讲解3.1.3 3.1.3 表格操作表格操作2 2选择表格和表格元素选择表格和表格元素选择表格和表格元素选择表格和表格元素在进行表格操作之前，必须首先选择被操作的对象，对于在进行表格操作之前，必须首先选择被操作的对象，对于在进行表格操作之前，必须首先选择被操作的对象，对于在进行表格操作之前，必须首先选择被操作的对象，对于表格而言，可以选择整个表格、单行、单列、多行、多表格而言，可以选择整个表格、单行、单列、多行、多表格而言，可以选择整个表格、单行、单列、多行、多表格而言，可以选择整个表格、单行、单列、多行、多列、连续或者不连续的单元格。列、连续或者不连续的单元格。列、连续或者不连续的单元格。列、连续或者不连续的单元格。（1 1）选择整个表格）选择整个表格）选择整个表格）选择整个表格 （2 2）选择单行或者单列。将将鼠标指针指向某一行的左）选择单行或者单列。将将鼠标指针指向某一行的左）选择单行或者单列。将将鼠标指针指向某一行的左）选择单行或者单列。将将鼠标指针指向某一行的左边线或某一列的上边线，当将鼠标指针变成一个黑色箭边线或某一列的上边线，当将鼠标指针变成一个黑色箭边线或某一列的上边线，当将鼠标指针变成一个黑色箭边线或某一列的上边线，当将鼠标指针变成一个黑色箭头形状时，单击即可选中单行或者单列。头形状时，单击即可选中单行或者单列。头形状时，单击即可选中单行或者单列。头形状时，单击即可选中单行或者单列。（3 3）选择连续的多行或多列。将将鼠标指针指向某一行）选择连续的多行或多列。将将鼠标指针指向某一行）选择连续的多行或多列。将将鼠标指针指向某一行）选择连续的多行或多列。将将鼠标指针指向某一行的左边线或某一列的上边线，当将鼠标指针变成一个黑的左边线或某一列的上边线，当将鼠标指针变成一个黑的左边线或某一列的上边线，当将鼠标指针变成一个黑的左边线或某一列的上边线，当将鼠标指针变成一个黑色箭头形状时，单击并拖动即可选中相邻的多行或多列。色箭头形状时，单击并拖动即可选中相邻的多行或多列。色箭头形状时，单击并拖动即可选中相邻的多行或多列。色箭头形状时，单击并拖动即可选中相邻的多行或多列。（4 4）选择不连续的多行或多列。选选择一行或一列，然）选择不连续的多行或多列。选选择一行或一列，然）选择不连续的多行或多列。选选择一行或一列，然）选择不连续的多行或多列。选选择一行或一列，然后按住后按住后按住后按住“Ctrl”“Ctrl”键一次在表格的左边线或上边线单击即可键一次在表格的左边线或上边线单击即可键一次在表格的左边线或上边线单击即可键一次在表格的左边线或上边线单击即可选择不连续的多行或多列。选择不连续的多行或多列。选择不连续的多行或多列。选择不连续的多行或多列。（5 5）选择一个单元格。按住）选择一个单元格。按住）选择一个单元格。按住）选择一个单元格。按住“Ctrl”“Ctrl”键，单击任一单元格键，单击任一单元格键，单击任一单元格键，单击任一单元格即可选中一个单元格。即可选中一个单元格。即可选中一个单元格。即可选中一个单元格。（6 6）选择连续的单元格。先将光标置于一个单元格中，）选择连续的单元格。先将光标置于一个单元格中，）选择连续的单元格。先将光标置于一个单元格中，）选择连续的单元格。先将光标置于一个单元格中，然后横向或纵向拖动，即可以选择多个连续的单元格。然后横向或纵向拖动，即可以选择多个连续的单元格。然后横向或纵向拖动，即可以选择多个连续的单元格。然后横向或纵向拖动，即可以选择多个连续的单元格。也可以先将光标置于一个单元格中，然后按住也可以先将光标置于一个单元格中，然后按住也可以先将光标置于一个单元格中，然后按住也可以先将光标置于一个单元格中，然后按住“shift”“shift”键再单击其他的单元格。键再单击其他的单元格。键再单击其他的单元格。键再单击其他的单元格。（7 7）选择不连续的单元格。按住）选择不连续的单元格。按住）选择不连续的单元格。按住）选择不连续的单元格。按住“Ctrl”“Ctrl”键，分别单击多键，分别单击多键，分别单击多键，分别单击多个不连续的单元格即可，若再次单击被选中的单元格，个不连续的单元格即可，若再次单击被选中的单元格，个不连续的单元格即可，若再次单击被选中的单元格，个不连续的单元格即可，若再次单击被选中的单元格，则会取消该单元格的选中状态。则会取消该单元格的选中状态。则会取消该单元格的选中状态。则会取消该单元格的选中状态。3.1.3 3.1.3 表格操作表格操作3设置表格属性设置表格属性选择页面中的表格，就可以在窗口下面的属性面板中设选择页面中的表格，就可以在窗口下面的属性面板中设选择页面中的表格，就可以在窗口下面的属性面板中设选择页面中的表格，就可以在窗口下面的属性面板中设置表格的各项参数值，表格的置表格的各项参数值，表格的置表格的各项参数值，表格的置表格的各项参数值，表格的“属性属性属性属性”面板如图所示面板如图所示面板如图所示面板如图所示 3.1.3 3.1.3 表格操作表格操作4设置单元格属性设置单元格属性 表格行列交叉组成表格的单元格，将光标置于单元格表格行列交叉组成表格的单元格，将光标置于单元格表格行列交叉组成表格的单元格，将光标置于单元格表格行列交叉组成表格的单元格，将光标置于单元格中并单击，即可打开单元格中并单击，即可打开单元格中并单击，即可打开单元格中并单击，即可打开单元格“属性属性属性属性”面板，如图面板，如图面板，如图面板，如图3-83-8所示。所示。所示。所示。3.1.3 3.1.3 表格操作表格操作5 5编辑表格编辑表格编辑表格编辑表格实际应用的表格往往是结构不规则的表格，需要对表格实际应用的表格往往是结构不规则的表格，需要对表格实际应用的表格往往是结构不规则的表格，需要对表格实际应用的表格往往是结构不规则的表格，需要对表格结构进行调整。结构进行调整。结构进行调整。结构进行调整。（1 1）合并单元格：首先选择需要合并的单元格。注意所）合并单元格：首先选择需要合并的单元格。注意所）合并单元格：首先选择需要合并的单元格。注意所）合并单元格：首先选择需要合并的单元格。注意所合并的单元格必须是连续的。单击合并的单元格必须是连续的。单击合并的单元格必须是连续的。单击合并的单元格必须是连续的。单击“属性属性属性属性”面板上的面板上的面板上的面板上的“合合合合并单元格并单元格并单元格并单元格”按钮：即可合并所选的单元格。按钮：即可合并所选的单元格。按钮：即可合并所选的单元格。按钮：即可合并所选的单元格。（2 2）拆分单元格：先将光标置于需要拆分的单元格中，）拆分单元格：先将光标置于需要拆分的单元格中，）拆分单元格：先将光标置于需要拆分的单元格中，）拆分单元格：先将光标置于需要拆分的单元格中，然后单击然后单击然后单击然后单击“属性属性属性属性”面板上的面板上的面板上的面板上的“拆分单元格拆分单元格拆分单元格拆分单元格”按钮；也可以按钮；也可以按钮；也可以按钮；也可以右击，在弹出的快捷菜单中单击右击，在弹出的快捷菜单中单击右击，在弹出的快捷菜单中单击右击，在弹出的快捷菜单中单击“表格表格表格表格”“”“拆分单元格拆分单元格拆分单元格拆分单元格”，弹出，弹出，弹出，弹出“拆分单元格拆分单元格拆分单元格拆分单元格”对话框。对话框。对话框。对话框。3.1.3 3.1.3 表格操作表格操作 如果要将单元格拆分为多行，则可以选中“行”单选按钮；如果要将单元格拆分为多列，则可以选中“列”单选按钮。在“行数”或“列数”外边框中，输入需要拆分的行数或列数。设置完毕，单击“确定”按钮，选中的单元格就会按照设置被拆分。（3）插入行或列。先选中要插入行或列的单元格，然后右击，在弹出的如图所示的快捷菜单中单击“表格”“插入行”或“插入列”，就可以完成插入行或列的操作。3.1.3 3.1.3 表格操作表格操作（4 4）删除行或列。如果要删除行或列，则只需先选中）删除行或列。如果要删除行或列，则只需先选中）删除行或列。如果要删除行或列，则只需先选中）删除行或列。如果要删除行或列，则只需先选中要删除的行或列，然后右击，在弹出的快捷菜单中单要删除的行或列，然后右击，在弹出的快捷菜单中单要删除的行或列，然后右击，在弹出的快捷菜单中单要删除的行或列，然后右击，在弹出的快捷菜单中单击击击击“表格表格表格表格”“”“删除行删除行删除行删除行”或或或或“删除列删除列删除列删除列”，就可以完成删除行，就可以完成删除行，就可以完成删除行，就可以完成删除行或列的操作。或列的操作。或列的操作。或列的操作。3.1.3 3.1.3 表格操作表格操作3.1.4 3.1.4 多媒体元素操作多媒体元素操作 随着互联网技术的迅猛发展，制作人员总希望能随着互联网技术的迅猛发展，制作人员总希望能随着互联网技术的迅猛发展，制作人员总希望能随着互联网技术的迅猛发展，制作人员总希望能使用引人入胜的动态多媒体效果来吸引用户的注意，使用引人入胜的动态多媒体效果来吸引用户的注意，使用引人入胜的动态多媒体效果来吸引用户的注意，使用引人入胜的动态多媒体效果来吸引用户的注意，激发用户参与的热情。使用激发用户参与的热情。使用激发用户参与的热情。使用激发用户参与的热情。使用Dreamweaver CS4Dreamweaver CS4可以可以可以可以方便地在网页中添加方便地在网页中添加方便地在网页中添加方便地在网页中添加FlashFlash动画、音频、视频等多媒动画、音频、视频等多媒动画、音频、视频等多媒动画、音频、视频等多媒体信息。体信息。体信息。体信息。1.1.插入插入插入插入FlashFlash动画动画动画动画插入插入插入插入FlashFlash动画的操作步骤如下：动画的操作步骤如下：动画的操作步骤如下：动画的操作步骤如下：在在在在“插入面板插入面板插入面板插入面板”的的的的“常用常用常用常用”子面板中单击子面板中单击子面板中单击子面板中单击“媒体媒体媒体媒体”按钮旁按钮旁按钮旁按钮旁边的下三角按钮边的下三角按钮边的下三角按钮边的下三角按钮，在弹出的下拉菜单中单击，在弹出的下拉菜单中单击，在弹出的下拉菜单中单击，在弹出的下拉菜单中单击“SWF”SWF”，弹出，弹出，弹出，弹出“选择文件选择文件选择文件选择文件”对话框，选择要插入的对话框，选择要插入的对话框，选择要插入的对话框，选择要插入的.swfswf文件即可将其插入当网页中，如图文件即可将其插入当网页中，如图文件即可将其插入当网页中，如图文件即可将其插入当网页中，如图3-113-11所示。插入到所示。插入到所示。插入到所示。插入到编辑窗口的编辑窗口的编辑窗口的编辑窗口的FlashFlash动画显示为一个灰色矩形，中间一动画显示为一个灰色矩形，中间一动画显示为一个灰色矩形，中间一动画显示为一个灰色矩形，中间一个个个个FlashFlash标志。单击属性面板上的标志。单击属性面板上的标志。单击属性面板上的标志。单击属性面板上的“播放播放播放播放”按钮，可以按钮，可以按钮，可以按钮，可以在编辑窗口中播发动画。在浏览器中浏览时，在编辑窗口中播发动画。在浏览器中浏览时，在编辑窗口中播发动画。在浏览器中浏览时，在编辑窗口中播发动画。在浏览器中浏览时，FlashFlash动画可以直接播放。动画可以直接播放。动画可以直接播放。动画可以直接播放。演示讲解演示讲解演示讲解演示讲解3.1.4 3.1.4 多媒体元素操作多媒体元素操作2.属性设置属性设置选择页面中的选择页面中的选择页面中的选择页面中的FlashFlash动画，就可以在窗口下面的动画，就可以在窗口下面的动画，就可以在窗口下面的动画，就可以在窗口下面的属性面板中设置属性面板中设置属性面板中设置属性面板中设置FlashFlash动画的各项参数值，动画的各项参数值，动画的各项参数值，动画的各项参数值，FlashFlash动画的动画的动画的动画的“属性属性属性属性”面板如图所示。面板如图所示。面板如图所示。面板如图所示。演示讲解演示讲解演示讲解演示讲解3.1.5 3.1.5 其他元素操作其他元素操作1.1.在网页中插入水平线在网页中插入水平线在网页中插入水平线在网页中插入水平线水平线不仅可以协调安排页面信息，还可以用来对标题水平线不仅可以协调安排页面信息，还可以用来对标题水平线不仅可以协调安排页面信息，还可以用来对标题水平线不仅可以协调安排页面信息，还可以用来对标题和其他元素加下划线起强调作用。插入水平线步骤：和其他元素加下划线起强调作用。插入水平线步骤：和其他元素加下划线起强调作用。插入水平线步骤：和其他元素加下划线起强调作用。插入水平线步骤：（1 1）在要插入水平线处，单击鼠标左键定位插入位置。）在要插入水平线处，单击鼠标左键定位插入位置。）在要插入水平线处，单击鼠标左键定位插入位置。）在要插入水平线处，单击鼠标左键定位插入位置。（2 2）在）在）在）在“插入面板插入面板插入面板插入面板”的的的的“常用常用常用常用”选项卡中单击选项卡中单击选项卡中单击选项卡中单击“水平线水平线水平线水平线”按钮，网页中插按钮，网页中插按钮，网页中插按钮，网页中插入了一条水平线。入了一条水平线。入了一条水平线。入了一条水平线。2.2.在网页中插入日期在网页中插入日期在网页中插入日期在网页中插入日期在在在在Dreamweaver CS4Dreamweaver CS4中可以向网页中插入当前的日期，中可以向网页中插入当前的日期，中可以向网页中插入当前的日期，中可以向网页中插入当前的日期，还可以在保存文档时自动更新文档的修改日期。还可以在保存文档时自动更新文档的修改日期。还可以在保存文档时自动更新文档的修改日期。还可以在保存文档时自动更新文档的修改日期。插入日期步骤如下：插入日期步骤如下：插入日期步骤如下：插入日期步骤如下：（1 1）在要插入日期处，单击鼠标左键定位插入位置。）在要插入日期处，单击鼠标左键定位插入位置。）在要插入日期处，单击鼠标左键定位插入位置。）在要插入日期处，单击鼠标左键定位插入位置。（2 2）在）在）在）在“插入面板插入面板插入面板插入面板”的的的的“常用常用常用常用”选项卡中单击选项卡中单击选项卡中单击选项卡中单击“日期日期日期日期”按钮，弹出按钮，弹出按钮，弹出按钮，弹出“插入插入插入插入日期日期日期日期”对话框。对话框。对话框。对话框。（3 3）在）在）在）在“插入日期插入日期插入日期插入日期”对话框中，设置各个参数，单击对话框中，设置各个参数，单击对话框中，设置各个参数，单击对话框中，设置各个参数，单击“确定确定确定确定”按钮就可按钮就可按钮就可按钮就可以插入日期以插入日期以插入日期以插入日期 3.2 3.2 典例剖析典例剖析流行音乐排行榜流行音乐排行榜 操作任务：在操作任务：在操作任务：在操作任务：在“学子之家学子之家学子之家学子之家”站点文件夹中创建站点文件夹中创建站点文件夹中创建站点文件夹中创建“Music”“Music”文件文件文件文件夹，在文件夹中创建名为夹，在文件夹中创建名为夹，在文件夹中创建名为夹，在文件夹中创建名为“Music.html”“Music.html”的网页，网页的标题为的网页，网页的标题为的网页，网页的标题为的网页，网页的标题为“流行音乐排行榜流行音乐排行榜流行音乐排行榜流行音乐排行榜”。3.2.1 3.2.1 插入文本插入文本插入文本插入文本显示歌名及相关介绍显示歌名及相关介绍显示歌名及相关介绍显示歌名及相关介绍3.2 3.2 典例剖析典例剖析流行音乐排行榜流行音乐排行榜操作任务：操作任务：操作任务：操作任务：（1 1）设置）设置）设置）设置“歌曲排行榜歌曲排行榜歌曲排行榜歌曲排行榜”为标题为标题为标题为标题1 1。（2 2）设置网页中）设置网页中）设置网页中）设置网页中“歌曲歌曲歌曲歌曲”和和和和“歌曲介绍歌曲介绍歌曲介绍歌曲介绍”文字大小为文字大小为文字大小为文字大小为1616。具体操作过程如下：具体操作过程如下：具体操作过程如下：具体操作过程如下：（1 1）选中文本）选中文本）选中文本）选中文本“歌曲排行榜歌曲排行榜歌曲排行榜歌曲排行榜”，在文本属性面板的格式下拉选项，在文本属性面板的格式下拉选项，在文本属性面板的格式下拉选项，在文本属性面板的格式下拉选项框中选中框中选中框中选中框中选中“标题标题标题标题1”1”。（2 2）选中文本歌曲及介绍文本，在文本属性面板中选择）选中文本歌曲及介绍文本，在文本属性面板中选择）选中文本歌曲及介绍文本，在文本属性面板中选择）选中文本歌曲及介绍文本，在文本属性面板中选择“CSS”“CSS”选项卡，在大小下拉选项框中选中选项卡，在大小下拉选项框中选中选项卡，在大小下拉选项框中选中选项卡，在大小下拉选项框中选中“16”“16”。（3 3）保存该网页。）保存该网页。）保存该网页。）保存该网页。3.2.2 3.2.2 设置文本属性设置文本属性设置文本属性设置文本属性3.2 3.2 典例剖析典例剖析流行音乐排行榜流行音乐排行榜操作任务：在网页中歌手名字的前面的插入歌手图片。操作任务：在网页中歌手名字的前面的插入歌手图片。操作任务：在网页中歌手名字的前面的插入歌手图片。操作任务：在网页中歌手名字的前面的插入歌手图片。3.2.3 3.2.3 插入歌手图片插入歌手图片插入歌手图片插入歌手图片演示讲解演示讲解演示讲解演示讲解3.2 3.2 典例剖析典例剖析流行音乐排行榜流行音乐排行榜操作任务：对上面插入的图像的属性设置要求如下：操作任务：对上面插入的图像的属性设置要求如下：操作任务：对上面插入的图像的属性设置要求如下：操作任务：对上面插入的图像的属性设置要求如下：（1 1）设置图像的宽度为）设置图像的宽度为）设置图像的宽度为）设置图像的宽度为“140”“140”，高度为，高度为，高度为，高度为“105”“105”。（2 2）调整图像与其上方及下方文字的间距为）调整图像与其上方及下方文字的间距为）调整图像与其上方及下方文字的间距为）调整图像与其上方及下方文字的间距为“10”“10”。（3 3）设置图像的替换文本为）设置图像的替换文本为）设置图像的替换文本为）设置图像的替换文本为“王力宏王力宏王力宏王力宏”。（4 4）为图像添加边框，边框宽度为）为图像添加边框，边框宽度为）为图像添加边框，边框宽度为）为图像添加边框，边框宽度为“2”“2”。（5 5）设置图像与文本的对齐方式为）设置图像与文本的对齐方式为）设置图像与文本的对齐方式为）设置图像与文本的对齐方式为“绝对底部绝对底部绝对底部绝对底部”。3.2.4 3.2.4 图像属性设置图像属性设置图像属性设置图像属性设置演示讲解演示讲解演示讲解演示讲解3.2 3.2 典例剖析典例剖析流行音乐排行榜流行音乐排行榜操作任务：操作任务：操作任务：操作任务：（1 1）插入一张）插入一张）插入一张）插入一张4444列的表格，表格宽度设置为列的表格，表格宽度设置为列的表格，表格宽度设置为列的表格，表格宽度设置为80%80%。（2 2）在单元格中输入文本。）在单元格中输入文本。）在单元格中输入文本。）在单元格中输入文本。（3 3）在单元格中插入图像）在单元格中插入图像）在单元格中插入图像）在单元格中插入图像.（4 4）设置表格第一行背景颜色为）设置表格第一行背景颜色为）设置表格第一行背景颜色为）设置表格第一行背景颜色为“#999999”“#999999”。（5 5）设置表格居中对齐。）设置表格居中对齐。）设置表格居中对齐。）设置表格居中对齐。3.2.5 3.2.5 用表格显示流行歌曲排名次序用表格显示流行歌曲排名次序用表格显示流行歌曲排名次序用表格显示流行歌曲排名次序演示讲解演示讲解演示讲解演示讲解3.3 3.3 习习 题题 一、选择题一、选择题一、选择题一、选择题（1 1）通过（），可以对一个网页的名称、网页背景、）通过（），可以对一个网页的名称、网页背景、）通过（），可以对一个网页的名称、网页背景、）通过（），可以对一个网页的名称、网页背景、网页链接文字属性、网页边界等进行设置。网页链接文字属性、网页边界等进行设置。网页链接文字属性、网页边界等进行设置。网页链接文字属性、网页边界等进行设置。A A、站点管理窗口、站点管理窗口、站点管理窗口、站点管理窗口 B B、对象面板、对象面板、对象面板、对象面板 C C、页面属性窗口、页面属性窗口、页面属性窗口、页面属性窗口 D D、属性面板、属性面板、属性面板、属性面板（2 2）在网页的空白处单击鼠标右键，在弹出的快捷菜单中选）在网页的空白处单击鼠标右键，在弹出的快捷菜单中选）在网页的空白处单击鼠标右键，在弹出的快捷菜单中选）在网页的空白处单击鼠标右键，在弹出的快捷菜单中选择择择择“页面属性页面属性页面属性页面属性”或按（）快捷键打开或按（）快捷键打开或按（）快捷键打开或按（）快捷键打开“页面属性页面属性页面属性页面属性”窗口。窗口。窗口。窗口。A A、“Ctrl+J”“Ctrl+J”B B、“Ctrl+T”C“Ctrl+T”C、“Ctrl+L”“Ctrl+L”D D、“Alt+J”“Alt+J”（3 3）通过（）旁边的颜色按钮，可以选取一种颜色作）通过（）旁边的颜色按钮，可以选取一种颜色作）通过（）旁边的颜色按钮，可以选取一种颜色作）通过（）旁边的颜色按钮，可以选取一种颜色作为链接文字在鼠标按下时的颜色。为链接文字在鼠标按下时的颜色。为链接文字在鼠标按下时的颜色。为链接文字在鼠标按下时的颜色。A A、活动链接、活动链接、活动链接、活动链接 B B、链接、链接、链接、链接 C C、访问过的链接、访问过的链接、访问过的链接、访问过的链接 D D、文本、文本、文本、文本写在最后写在最后成功的基成功的基础在于好的学在于好的学习习惯The foundation of success lies in good habits31谢谢大家荣幸这一路，与你同行ItS An Honor To Walk With You All The Way讲师：XXXXXX XX年XX月XX日