网页设计教程04-06插入和编辑网页基本元素-创建网页超链接与页面布局

1、第第4章章 插入和编辑网页插入和编辑网页基本元素基本元素教学目标o掌握文本的插入、属性的设置o掌握图像的插入、属性的设置o掌握Flash的插入、属性的设置o掌握多媒体的插入、属性的设置o了解其他网页元素的插入、属性的设置4.1 插入文本与修改属性插入文本与修改属性o4.1.1 插入文本o1、直接输入文本o HTML只允许字符之间包含一个空格，若要在文档中连续输入多个空格，则可按照如下方法进行操作：o（1）在中文输入法的全角状态下输入空格。o（2）使用快捷键Ctrl+Shift+空格。o（3）选择“编辑”菜单中的“首选参数”，打开“首选参数”对话框，在“常规”类别中选中“允许多个连续的空格”选项

2、。 o2、复制文本o3、导入文档4.1.2 设置文本属性o1字体设置字体设置o2字号设置字号设置o3颜色设置颜色设置o4标题格式标题格式o5段落格式设置段落格式设置o6应用列表应用列表1字体设置字体设置o有时设置字体时，在文本的“属性”面板中，默认没有显示所需要的字体，此时则需要将使用的某种字体添加到字体列表中。2字号设置字号设置o通过“属性”面板中的“大小”下拉按钮，用户可以根据设计需要选择合适的文本字号，来对选中文本进行设置字号大小。 3颜色设置颜色设置o网页中文本的颜色默认是黑色，但是为了使文本颜色符合网页设计风格，达到更好的视觉效果，则可以按照要求设置文本的颜色。o单击“属性”面板中的

3、“文本颜色”按钮 ，此时鼠标变成“吸管”形状，然后在打开的颜色选择器中选择所需要的字体颜色。 4标题格式标题格式o通常情况下，网页中文本标题是文本内容的主题，因此对标题格式的设置也是不可缺少的。 5段落格式设置段落格式设置o段落格式化是指对选定的段落进行排版，主要包括该段落的对齐、缩进、行间距、段间距等，要对某个段落进行处理，需要先将光标定位于该段落中。 （1）段落的对齐方式o段落的对齐方式有以下四种：左对齐、右对齐、居中对齐和两端对齐。在Dreamweaver中默认的是左对齐，可以根据用户需要来设置相应的对齐方式，先选中所需对齐的文本，或把光标置于该文本的开头处，然后单击“属性”面板中相应的

4、对齐按钮即可。（2）段落缩进o在“属性”面板的对齐方式下方有两个按钮，“文本凸出”和“文本缩进”，单击它们就能实现文本的缩进，单击一次移动两个单位，并且会将标签应用于文本段落。（3）段落间距o段落间距包括段间距和行间距，在Dreamweaver CS3中，提供了三种方式添加段落间距，即进行文本换行。o自动换行：输入文本时，当一行的长度超多屏幕显示的范围，文字将自动在下一行进行显示。o使用Enter键：按回车键时会自动添加一个新的段落，段落间出现一个空白行。o使用Shift+Enter键：同时按下这两个按键，插入换行符，不会添加新的段落，两行之间也不会出现空白行。 6应用列表应用列表o（1）应用

5、项目列表o如果网页中的文本内容不需要按顺序排列时，则使用项目列表。使用“属性”面板上的“项目列表”按钮 进行设置。o（2）应用编号列表o当网页中的文本内容需要进行按顺序排列时，则使用编号列表。使用“属性”面板上的“编号列表”按钮进行设置。（3）设置列表属性o应用了列表之后可以更改列表的类型、样式及编号列表的计数等。可以单击“文本”菜单中的“列表”选项中的“属性”，打开“列表属性”对话框进行修改。o列表类型：有四种，项目列表、编号列表、目录列表和菜单列表o样式：设置列表每行前面的列表符号。o开始计数：设置编号列表每行开始的编号。4.2 插入图像与修改属性插入图像与修改属性o4.2.1 插入图像o

6、插入图像是一个非常简单的操作，只需要将光标定位在需要插入图像文件的位置，然后执行下列操作之一。 o方法一：选择菜单“插入记录”“图像”命令o方法二：在“常用”工具栏中，单击“图像”按钮右边的三角按钮 ，在下拉列表中选择“图像” 4.2.2 修改图像属性o1图像的基本属性图像的基本属性o（1）宽和高：以像素为单位指定图像的宽度和）宽和高：以像素为单位指定图像的宽度和高度，用来设置图像的大小。高度，用来设置图像的大小。o（2）源文件：指定图像的源文件，设置引用图）源文件：指定图像的源文件，设置引用图像的路径。像的路径。o（3）链接：设置图像的超级链接。）链接：设置图像的超级链接。o（4）替换：与在

7、）替换：与在“图像标签辅助功能属性图像标签辅助功能属性”对对话框设置的效果相同，对于某些浏览器，在浏览话框设置的效果相同，对于某些浏览器，在浏览网页时鼠标移动到图像上时显示的文字。网页时鼠标移动到图像上时显示的文字。1图像的基本属性图像的基本属性o（5）地图和热点工具：设置热区。o（6）垂直边距和水平边距：以像素为单位，设置图像边沿的边距。“垂直边距”沿图像的顶端和底部；“水平边距”沿图像的左侧和右侧。o（7）边框：以像素为单位，图像边框的宽度，默认为无边框。o（8）对齐按钮：在边框右侧的三个按钮 ，左对齐、居中和右对齐，设置图像相对浏览器的左对齐、居中或右对齐。o（9）对齐：对齐同一行上的图

8、像和文本，设置图像和文本的排版方式。 各对齐方式的含义 对齐方式含义默认值根据访问者浏览器的不同，但通常指定基线对齐。基线、底部将文本基准线（或同一行的其他元素）对齐选定对象的底部。顶端、文本上方将选定图像的顶端与当前行最高项（图像或文本）的顶端对齐居中将图像的中部与当前行的基线对齐绝对居中将图像的中部与当前行文本的中部对齐绝对底部将图像的底部与文本行（包括字母下部，如字面g的下部）的底部对齐左对齐将选定的图像放置在左边，文本在图像的右侧换行右对齐将选定的图像放置在右边，文本在图像的左侧换行2图像的编辑图像的编辑o通过属性检查器，除了可以设置图像的基本属性，还可以对图像进行相关的编辑，包括有：

9、调整图像大小、优化图像、裁剪图像、调整图像的亮度和对比度、锐化图像等。 4.2.3 创建鼠标经过图像o在Dreamweaver CS3中，系统为用户提供了制作简单图像特效的功能，使用这些特效能够使设计的网页更生动，更具浏览性。“鼠标经过图像”就是其中一种特效。o创建“鼠标经过图像”必须使用两个图像，一个是主图像，即当页面刚加载时显示的“原始图像”；另一个是次图像，鼠标滑过主图像时显示的“鼠标经过图像”。 4.3 插入插入Flash对象对象oFlash动画是一种矢量动画，具有体积小、图像质量高等特点，是当今最流行的网页动画格式，而目前在浏览器中集成了播放Flash动画的插件或控件，用户不需要安装

10、Flash播放器也都能欣赏到Flash动画。o可以使用下面两种方法之一在网页中插入Flash动画。o方法一：选择菜单“插入记录”“媒体”“Flash”命令 o方法二：在“常用”工具栏中，单击“媒体”按钮右边的三角按钮，在下拉列表中选择“Flash”o在“参数”的下方，在出现的文本框中输入参数“wmode”，然后再单击“值”的下方，设置其值为“transparent” ，可以进行flash透明化。4.3.2 插入Flash按钮o在插入Flash按钮时要注意，Dreamweaver的安装路径和创建的站点不能含有中文。 o4.3.3 插入Flash文本oFlash文本是Flash按钮的另一种表现形式

11、，在Dreamweaver CS3中，Flash文本的效果显示比较简单，即在浏览页面时，当鼠标移动经过或离开该文本时会改变文本颜色和背景颜色。 o4.4 插入多媒体对象插入多媒体对象o4.4.1 插入音频文件o4.4.2 插入视频文件4.4.1 插入音频文件oDreamweaver中支持多种类型的音频文件，比如MIDI、MP3、WAV、Real Audio等格式都能插入到网页中。插入的声音可以用作背景音乐，但有时访问者可能不希望听到音频内容，所以也可以提供声音播放控件，由访问者自行控制。 o4.4.2 插入视频文件oDreamweaver提供的插件功能，可以实现在网页中添加音乐，也可以添加一些

12、视频文件，视频文件类型可以包括wmv、avi、mpeg、rmvb等。 o4.5 插入其他对象插入其他对象o文本、图像、Flash、音频和视频文件等元素的使用，可以丰富整个网站，但还有一些功能是这些元素无法实现的，此时需要插入其他对象，如水平线、日期、特殊字符、头部标记、表格和表单等，本节将要介绍关于此类对象的使用。 4.5.1 插入水平线o水平线可以划分网页页面的层次，分割文档内容，方便浏览。在页面上，可以使用一条或多条水平线来组织内容信息。o4.5.2 插入日期和时间o4.5.3 插入特殊字符o在网页中输入文本时，有时需要使用一些无法通过键盘正常输入的特殊字符，此时可以利用Dreamweav

13、er提供的插入特殊字符来插入所要字符。4.5.4 插入头部标记o插入头部标记包括有插入META、关键字、说明、刷新、基础及链接等。 2插入网页自动刷新功能插入网页自动刷新功能o自动刷新功能是指设定在一定时间自动对页面进行刷新，可以刷新该页面或跳转到另外一个页面。4.5.5 插入表格和表单插入表格和表单o在Dreamweaver中根据需要还可以插入表格和表单。 本章小结本章小结o文本和图像是设计网页的最基本也是最重要的元素，除了这两者，还可以添加其他的基本元素如音频、动画、视频等，还有一些其他对象如水平线、日期等。合理的使用这些元素可以提高网页的视觉效果，延长浏览者浏览时间，从而增强网站的目的性

14、。本章主要介绍了在Dreaweaver CS3中如何插入和编辑文本、图像、flash对象、多媒体对象、水平线、头部标记等网页基本元素，只有掌握这些操作，灵活的使用，才能更好的设计出一个高水准的网站。 实训o完成实训第第4章章 插入和编辑网页基本插入和编辑网页基本元素实训元素实训第第5章章 创建网页超链接创建网页超链接教学目的o介绍了超链接的概念o掌握超链接和导航条的创建方法o会在网页中灵活使用超链接5.1 超链接的基本概念o一个网站肯定有很多的页面，如果页面之间彼此是独立的，那么网页就好比是孤岛，这样的网站是无法运行的，没有意义的。为了建立起网页之间的联系我们需要实现从一个网页指向另一个目标的

15、跳转，这个目标可以是另一个网页，也可以是同一个网页上的不同位置，还可以是一张图片、一个电子邮件地址、一个文件或一个绝对定位的元素，甚至是一个应用程序，这就是所谓的超链接。在创建超链接之前，首先要弄清楚目录和路径的关系，只有这样才可以轻松管理网站的链接，创建出结构清晰明确的网站。 5.1.1 URL概述oURL（统一资源定位器）主要用于指定网上资源的位置和方法。oURL一般由三个部分组成，即协议、主机和域o（1）协议，又成服务方式，如http、ftp、telnet等。o（2）主机：即存放资源的主机的IP地址，有时也包括端口号，如：o(3)域：主机的具体地址，包括路径和文件名等。5.1.2 绝对路

16、径 o绝对路径就是被链接文档的完整的URL，而且包含服务器协议。这个地址是精确地址而不用考虑文件的位置，如果目标文件被移动，则链接无效。创建外部链接时必须用绝对路径。5.1.3 相对路径 o相对路径是指以当前文件所在位置为起点到被链接文件经由的路径。5.1.4 根路径o根路径是指从站点目录到文档所在位置的路径，根路径是指从站点目录到文档所在位置的路径，以一个正斜杠以一个正斜杠“/”开始，该斜杠表示站点根文件夹。开始，该斜杠表示站点根文件夹。o根路径综合了绝对路径和相对路径的优点，除了根路径综合了绝对路径和相对路径的优点，除了链接时和当前文档位置无关，还可以在本地站点链接时和当前文档位置无关，还

17、可以在本地站点中进行测试。中进行测试。5.2创建超链接 5.1创建内部超链接 内部链接主要是链接站点内部的文件，一般使用相对路径。常见的有文本链接、图像链接和热点链接 1.文本链接 2.图像链接 3.图像热区链接5.2.2 创建锚记超链接o如果一个网页上的内容过长，那么通过滚动条需找需要的内容并不是一件容易的事。应用锚记链接可以在页面内或不同页面内快速定位，找到所需的内容。创建锚记连接的具体操作步骤如下：o1.插入命名锚记o2.创建锚记链接5.2.3 创建邮件超链接o邮件超链接是一种特殊的链接方式，其链接对象为邮箱地址。o1.使用“插入”菜单创建邮件链接o2.直接给文档创建邮件链接o如果需要在

18、网页中提供下载资料，就需要为文件提供下载链接。如果链接指向的不是一个网页文件，而是其他格式的文件，如.rar、 .mp3 、 .exe等，单击链接的时候就会弹出是否选中下载文件的对话框。5.2.4 创建下载超链接5.2.5 创建脚本超链接o脚本超链接是一种特殊类型的链接，通过单击带有脚本超链接的文本或对象，可以运行相应的脚本代码及函数。5.2.6 创建空链接o空链接是指没有指定链接对象的链接。利用空链接可以向网页上的对象或文本附加行为，以便当鼠标指针滑过该链接时 ，交换图像或显示层等动作。5.3管理超链接5.4创建跳转菜单o跳转菜单是页面中的弹出式菜单，在菜单中列举出链接到文件或文件夹的选项。

19、5.5创建导航条o导航条由按钮、图像或一组图像组成。导航条就像网站的桥梁，网站通过它把站点中的各个页面联系起来，使浏览者更加方便清晰地在各个页面间进行切换，是网站的结构更加层次分明。思考题o1绝对路径和相对路径有什么区别？o2. 如何创建不同形状的热点超链接？o3. 如何创建邮件超链接？o4. 创建脚本链接有什么作用?o5. 如何快速检查网页中的超链接？本章小结本章小结o为了把Internet上众多的网站和网页联系起来，将其构成一个整体，就要在网页中加入链接。这样一来，能让浏览者很轻松地浏览自己想看的内容。所以我们在整合网站内容后，系统地考虑站点链接的易用性、条理性尤为重要。总之，掌握超链接的

20、制作是基础，如何合理的安排、灵活的运用它才是关键。第第6章章 网页页面布局设网页页面布局设计计教学目的o掌握表格的创建方法o掌握表格和单元格属性的设置o学会在网页中灵活使用表格o学会如何利用布局表格进行页面的布局设计教学重点o使用表格进行页面布局教学难点o使用布局表格进行页面布局6.1 页面布局的概念页面布局的概念o6.1.1 页面布局设计o设计页面布局的一般步骤。 o（1）设计草案o新建的HTML文档是一个空白的文档，相当于一张白纸，可以任由设计者在上面发挥想象，将所要设计的页面的大概框架构思好，最好能够先在纸上或是使用软件如photoshop把自己的构思画出来，只需画出整体布局，打下草稿，

21、不必考虑细节问题。可以设计多份草案，以供选择。设计页面布局的一般步骤o（2）粗略布局o在设计好的草案的基础上，确定好各个功能模块的摆放，合理安排它们的结构，需要达到主次分明，层次突出。o（3）具体布局o对网页粗略布局了之后就是具体布局，给粗略布局添枝加叶，使之具体化，精确化。6.1.2 页面布局的方法o（1）表格布局o（2）层布局o（3）框架布局6.2 表格的创建及编辑表格的创建及编辑o表格是网页设计中最常用的工具，它既可像字处理软件中的表格一样，用来显示表格式数据，也可以用作页面布局的一个强有力工具。表格是由“行”和“列”构成的，利用“行”和“列”的分隔，可以更方便灵活的在适合的位置插入和排

22、列文本、图像等网页元素，从而使页面更具条理性、更加美观。6.2.1 创建表格o表格的功能这么强大，就需要掌握如何应用它，在Dreamweaver CS3中可以很方便地创建表格，下面介绍如何创建表格。o创建表格可以执行下列方法之一，都会弹出一个“表格”对话框，根据需要在该对话框中设置相关的参数。o方法一：选择菜单“插入记录”“表格”命令。o方法二：单击“常用”工具中的“表格”按钮 。“表格”对话框参数说明 参数说明行数和列数确定表格的具有多少行和列，直接输入数目。表格宽度以像素为单位或按浏览器窗口宽度的百分比指定表格的宽度。边框粗细以像素为单位的表格边框的宽度。设置为0时，将在浏览器中不显示边框

23、。单元格边距用来指定单元格内容与边框的距离。如不明确指定，则大多浏览器按1显示。单元格间距相邻的两个单元格之间的距离。如不明确指定，则大多浏览器按2显示。页眉指定表格标题显示方式，有“无”、“左”、“顶部”、和“两者”4种。标题指定表格标题，显示在该表格外面。对齐标题如果设置有表格标题，则用来指定表格标题相对于表格的对齐方式。主要有“默认”、“底部”、“顶部”、“左”和“右”5种，“默认”为“顶部”。摘要用来说明表格信息，不会显示在浏览器上。6.2.2 表格的选定o1选定表格选定表格o选定表格的方法有以下几种：o（1）单击表格的边框线。o（2）将光标定位在表格内部任意位置，选择“修改” “表格

24、” “选择表格”命令。o（3）将光标定位在表格内部任意位置，单击“标签”选择器中的如图6-3所示的标签。 2选定单元格选定单元格o单元格的选定包括选定一个单元格、选定连续的多个单元格和选定不连续的多个单元格。o（1）选定一个单元格的方法有以下几种： oA.按下Ctrl键的同时，在单元格内单击即可选中该单元格。oB.将光标定位在所要选定的单元格内，单击“标签”选择器中的如图6-5所示的标签。2选定单元格选定单元格o（2）选定连续的多个单元格的方法：oA.用鼠标左键在连续的多个单元格中拖动。oB.将光标定位在所选单元格的第一个单元格中，按住Shift，单击最后一个单元格。o（3）选定不连续的多个单

25、元格的方法是按住Ctrl键，同时单击要选定的单元格。3选定行或列选定行或列o在Dreamweaver中，可选择单个行或列也以及多个行或列，被选中的行或列的边框线都是以黑色粗线显示。6.2.3 表格的编辑o对表格的编辑包括修改表格的属性、调整表格的结构。 （1）表格属性的修改）表格属性的修改o选定了表格之后，就可以在相应的“属性”面板中查看或修改属性值。表格的属性包括表格的大小、背景颜色、表格间距等。 表格“属性”面板的参数 属性参数说明表格ID指定表格的名称行和列指定表格的行数和列数宽以像素为单位或按浏览器窗口宽度的百分比指定表格的宽度。填充单元格内容和单元格边框之间的距离，相当于创建表格时的

26、“单元格边距”。间距相邻的两个单元格之间的距离，相对于创建表格时的“单元格间距”。表格“属性”面板的参数(续)对齐表格在浏览器中的对齐方式，有默认、左对齐、居中对齐和右对齐4种。边框以像素为单位的表格边框的宽度。类设置表格的样式清除列宽清除所设置的列宽，根据内容调整表格各列宽度。清除行高清除所设置的行高，根据内容调整表格各行高度。将表格宽度转换为像素将原来宽度为百分比的表格转换为相应的像素将表格宽度转换为百分比将原来宽度为像素的表格转换为相应的百分比背景颜色设置整个表格的背景色。边框颜色设置表格边框颜色。背景图像设置图像作为表格背景。（2）单元格属性的修改 o为了对放置在表格的文本进行排版，有

27、时也需要对单元格进行属性设置。选定了单元格之后，就可以在相应的“属性”面板中查看或修改属性值。单元格的属性包括单元格对齐方式、高度、宽度和背景等。 单元格“属性”面板参数 参数说明水平设置单元格内容在水平方向上的对齐方式，有默认、左对齐、居中对齐和右对齐4种。垂直设置单元格内容在垂直方向上的对齐方式，有默认、顶端、 中间、底部和基线4种。宽和高设置单元格的宽度和高度不换行防止单元格自动换行，所有内容一行显示。建议不使用。标题将单元格的某行内容作为标题，并且其内容会居中和加粗显示。背景设置图像作为单元格的背景背景颜色设置单元格的背景颜色边框设置单元格的边框颜色2调整表格的结构调整表格的结构o新创

28、建好的表格的结构都是有一定规则的，但在制表时，有时会需要一个不规则的行列来安排的表格，此时，可以对表格的结构进行相关的调整，如插入和删除行或列、合并和拆分单元格等 （1）插入和删除行或列o为了符合网页的布局需要，可以对表格中的行或列进行插入或删除。插入的行按照选定行的格式插入，但是插入列时会根据表格宽度压缩列宽。使用下列方法之一可以插入行或列。（2）合并和拆分单元格o合并单元格是将选中的多个连续单元格合并成一个单元格，拆分单元格即根据需要将一个单元格拆分成由多行多列组成的多个单元格。合并和拆分单元格在表格操作中非常重要，利用合并和拆分单元格，使表格的布局更符合要求。6.2.4 利用表格进行页面

29、布局o表格既可像字处理软件中的表格一样，用来显示表格式数据，也可以用作页面布局的一个强有力工具，合理的使用表格来对页面进行排版，可以更方便的定位页面中的各种元素。如果需要利用表格来进行布局，则将其边框隐藏起来，在表格“属性”面板中的“边框”设置为0即可。 6.3 使用布局表格进行页面布局使用布局表格进行页面布局设计设计oDreamweaver CS3提供了几种不同的表格模式，包括标准模式、扩展表格模式和布局模式。 o在布局模式下，通过添加布局表格和布局单元格来进行页面排版。 布局模式o使用布局模式前先需要将模式切换到布局模式，其方法如下：o方法一：选择“查看”“表格模式”“布局模式”命令。o方

30、法二：使用快捷键Alt+F6。 6.3.1 绘制布局表格和布局单元格o在布局模式中，可以绘制多个布局表格和布局单元格，但是布局单元格不能单独存在，只能放在布局表格当中，所以一般是先绘制好布局表格，然后在布局表格中绘制所需的布局单元格，如果没有绘制表格，直接绘制单元格，Dreamveamer会自动创建一个布局表格来容纳该布局单元格。 1绘制布局表格绘制布局表格o布局表格可以在页面布局的空白区域，也可以在原有的布局表格中创建，如果页面原已插入内容，则布局表格不能在原来内容上面绘制，此时鼠标指针出现禁止状态，只能移动鼠标在该内容的下方绘制 2绘制布局单元格绘制布局单元格o布局单元格不能脱离布局表格，

31、只能存在布局表格当中。6.3.2在布局单元格添加内容o在布局模式中可以添加文本、图像等任何类型的数据，添加方法与在标准模式中添加类似，选中需要添加内容的单元格，然后添加内容。所有需要添加的内容都必须添加到布局单元格当中，而不能添加到布局表格 6.3.3 调整及移动布局表格和布局单元格o为了使绘制的布局表格和布局单元格更符合设计要求，则可以调整布局表格和布局单元格的大小、移动它们在页面的位置。移动布局表格或布局单元格o要移动布局表格和布局单元格的位置，则执行下列过程：o用鼠标单击边框，选中需要移动的布局表格或布局单元格，此时它们的边框线周围出现控制点。o用鼠标拖动需要移动的表格或单元格即可。但是要注意只有嵌套的布局表格才可以任意移动。调整布局表格或布局单元格大小o要调整布局表格