网页设计技术教程 第10章插入文本、图像及超级链接.ppt

《网页设计技术教程 第10章插入文本、图像及超级链接.ppt》由会员分享，可在线阅读，更多相关《网页设计技术教程 第10章插入文本、图像及超级链接.ppt（29页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第10章章 插入文本、图像及超级链接插入文本、图像及超级链接 本章要点：插入文本、特殊字符、日期、水平线 创建列表 设置文本属性 插入图像、鼠标经过图像、网站相册 设置图像属性 设置超链接、锚点链接 CSS样式10.1 插入文本和对象插入文本和对象 10.1.1 插入文本 在网页中插入文本，可以有以下两种方式：（1）在文档编辑窗口中直接由键盘输入。（2）复制其他已有的文本。即：先选中要复制的文本，用【复制】命令或用快捷健Ctrl+C复制，然后切换到Dreamweaver MX文档编辑窗口，将插入点设置到要放文本的地方，然后用【编辑】【粘贴】命令或按快捷键Ctrl+v。10.1.2 插入特殊的

2、文本字符插入特殊的文本字符 1插入特殊字符插入特殊字符 操作步骤如下：（1）在需要添加特殊字符的位置单击，设置插入点。（2）选择“插入”面板的“字符”类别，然后选择所需特殊字符。（3）若面板上没有所需字符，则单击面板最后的“其他字符”按钮。（4）如果要在文档中插入象、等这样的特殊符号，就不能利用Dreamweaver MX提供的方法了。2插入空格插入空格 选择【编辑】【参数选择】菜单命令，打开“参数选择”对话框，左边选择“常规”分类，在右边将“允许多个连续的空格”复选框选中，如图10-3所示，这样在文档中就可以用空格键连续插入空格了。3插入换行符插入换行符 插入换行符的方式：首先将光标定位在要

3、换行的位置，然后单击“字符”面板的“换行符”按钮。10.1.3 设置文本属性设置文本属性 1应用段落和标题格式 在属性面板的“格式”文本框中可以设置文本的段落和标题字体。标题共分6级，标题1的字体最大，标题6的字体最小 2修改文本字体 通过单击字体列表文本框的下拉箭头，弹出字体列表，如图10-6所示，选择其中的字体类型，可以为所选择的文本修改字体类型。3设置字体的大小 在属性面板的“大小”列表框中可以选择所需的字体的 大小。4设置文本颜色设置文本颜色 可以通过属性面板对文本的颜色进行设置，该颜色将覆盖“页面属性”中设置的文本颜色。5文本的对齐方式和缩进文本的对齐方式和缩进 文本的对齐方式有四种

4、：左对齐、居中对齐、右对齐和两端对齐。6设置文本的样式 首先选中文本，然后选择【文本】【样式】子菜单中的样式即可，这些样式可以随意组合。10.1.4 插入更新日期插入更新日期 在文档中插入当前日期的步骤如下：（1）在文档中将光标插入在要插入日期的位置。（2）选择【插入】【日期】菜单命令，或单击“插入”面板上的“日期”按钮。（3）在弹出的“插入日期”对话框中选择日期格式，在三个下拉列表中可分别选择星期、日期和时间的格式。如图 :10.1.5 插入水平线插入水平线 要插入水平线的方法如下：（1）将插入点放置在要插入水平线的位置。（2）选择【插入】【水平线】菜单命令，或单击“插入”面板上的“水平线”

5、按钮。（3）此时文档中就插入了一条水平线，选中该水平线，在属性面板上可对其属性进行编辑。如下图所示 10.1.6 创建项目列表创建项目列表 1创建项目列表（1）选中要设置为列表的文本，或将光标放置在要插入列表的行。（2）在属性面板中单击“项目列表”按钮或“编号列表”按钮，或选择【文本】【列表】菜单项，从扩展的子菜单中选择需要的列表类别。（3）输入完整的列表项内容后，按回车键两次，即可完成整个列表的插入。2创建嵌套项目列表（1）将光标放置在需要嵌套的列表项行中。（2）在“属性”面板中按下“文本缩进”按钮，或者选择【文本】【缩进】菜单命令，将列表项缩进。即可看到项目被嵌套了。（3）如果要将深级别的

6、列表提高级别，可以单击“属性”面板的“文本凸出”按钮，或选择【文本】【凸出】菜单命令。3设置项目列表属性设置项目列表属性 列表属性可以决定整个列表和选定列表项的外观。可以通过设置列表的属性来选择列表的类型，从而控制列表的样子。10.2 插入图像插入图像 10.2.1 插入图像插入图像 在网页中可以插入GIF、JPEG和PNG格式的图像，同时还可以在表格、层中插入图像。提示：要插入的图像文件应该存放于当前站点的目录内。如果要插入的图像没有位于本地站点的目录中，则会出现一个对话框，询问是否要将该图像文件复制到本地站点中。选择“是”按钮将图像文件保存在本地站点内，以保证文档中对图像文件的正确引用。1

7、0.2.2 设置图像属性设置图像属性 如果要调整图像的属性，选中图像，就可在“属性”面板上设置图像的相关属性。图像的属性面板如下图所示:10.2.3 创建图像映射创建图像映射 1建立图像映射 要建立图像映射，也就是要在图像上建立热点。图像的热点工具在图像属性检查器上，有矩形、圆形和多边形三种。如下图所示:2修改图像热点修改图像热点 可以很容易对在图像映射中所创建的热点进行编辑。可以移动热点，调整热点大小，或者在层之间向上或向下移动热点。还可以将含有热点的图像从一个文档拷贝到其他文档，或者拷贝某图像中的一个或多个热点，然后将其粘贴到其他图像上。10.2.4 创建鼠标经过图像创建鼠标经过图像 鼠标

8、经过图像是在浏览器中当鼠标移到图像上时，会变化成另一幅图像。鼠标经过图像实际上由两个图像组成：主图像（当首次载入网页时显示的图像）和次图像（当鼠标移到主图像上时显示的图像）。10.2.5 创建网站相册创建网站相册 创建网站相册的操作步骤如下：1）选择【命令】【创建网站相册】菜单命令。2）在“相册标题”文本域中输入一个标题。3）单击“源图像文件夹”文本域旁的“浏览”按钮，选择包含源图像的文件夹。4）单击“目标文件夹”文本域旁的“浏览”按钮，选择（或创建）一个用来存放所有导出的图像和HTML文档的目标文件夹，该文件夹必须位于站点内。5）指定缩略图的显示选项 6）在“相片格式”中选择大尺寸图像的格式

9、。大尺寸图像的格式可以不同于缩略图的格式。7）选中复选框“为每张相片建立导览页面”可以为每个源图像创建一个Web页 8）单击“确定”以创建网站相册的HTML和图像文件。10.3 超级链接超级链接 10.3.1 创建到文档的链接创建到文档的链接 通过链接到HTML文档，能从当前网页中的文本或图像等对象跳转到另一个网页中去。链接HTML文档最常用也是最为方便的方法是使用“属性”面板。1从网页已有元素创建链接 2直接创建链接 10.3.2 创建到文档的锚链接创建到文档的锚链接“锚”又称作“书签”，指的是在网页中，需要跳转到某特定的位置时，就需要在此位置建立一个位置标记，点击链接到这个位置标记的元素时

10、，页面就跳转到该位置。创建锚链接包含两个步骤:1创建命名锚记 2创建锚链接 10.3.3 创建创建E-mail链接链接 E-mail链接是一种特殊的链接，单击这种链接，不是跳转到相应的网页上，也不是下载相应的文件，而是启动浏览器默认的电子邮件处理程序，以便书写电子邮件，并发往指定的地址。创建电子邮件链接可以使用插入邮件链接命令，也可以使用属性面板来创建电子邮件链接。10.3.4 创建空链接创建空链接 空链接也称为“无址链接”，是一个无指向的链接，它的含义同它的名字一样，不会跳转到任何地方。创建空链接的操作步骤如下：（1）在文档窗口中选取文本、图像或对象。（2）在“属性”面板的“链接”框中键入一

11、个数字 符号（），即可完成空链接的建立.10.3.5 创建跳转菜单创建跳转菜单 1创建跳转菜单 2修改跳转菜单修改跳转菜单 创建跳转菜单后，如果要对其修改，可以通过属性面板来进行。选中想要修改的跳转菜单，通过属性面板可以修改跳转菜单 10.4 CSS样式样式 10.4.1 CSS概述概述 CSS是Cascading Style Sheets，也即“层叠样式表”的简称，利用它可以对网页中的文本内容进行精确的格式化控制。10.4.2 CSS样式的基本操作样式的基本操作 1CSS样式面板 可以按照以下方法打开CSS样式面板：选择【窗口】【CSS 样 式】菜单命令，或按Shift+F11快捷键。打开的

12、CSS样式面板，如图 2创建CSS样式 提示：自定义样式的名称必须以句点开头，可以包含任何字母和数字组合。如果没有输入开头的句点，Dreamweaver会自动加入。3链接外部CSS样式4应用自定义CSS样式 5编辑CSS样式10.4.3 设置设置CSS样式格式样式格式 CSS样式定义对话框中可以定义样式的各种类型的参数设置，共有8个分类：类型、背景、区块、盒子、边框、列表、定位、扩展。提示：样式定义对话框中的大多数下拉列表框，实际上是下拉列表框和文本框的组合（组合框），既可以通过打开下拉列表选择设置，也可以直接在其中输入相应数值。如果将框内清空，表明不进行这项设置，或使用这项设置的默认值。10.4.4 CSS样式应用实例样式应用实例【实例1】固定页面的背景图片。【实例2】美化超链接的文本样式。a:link状态 a:hover状态 a:visited状态 10.5 小结小结 本章介绍的内容很多，这些内容是进行网页设计必备的基础。主要包括：在文档中插入文本、特殊字符、日期以及水平线的方法以及如何设置文本的属性；在文档中如何创建列表并进一步对列表进行修饰；在文档中插入图像以及设置图像属性的方式；建立网站相册；建立各种超链接的方式；CSS样式的建立及使用等内容。