1、第10章 插入文本、图像及超级链接,本章要点： 插入文本、特殊字符、日期、水平线 创建列表 设置文本属性 插入图像、鼠标经过图像、网站相册 设置图像属性 设置超链接、锚点链接 CSS样式,10.1 插入文本和对象,10.1.1 插入文本 在网页中插入文本，可以有以下两种方式：,（1）在文档编辑窗口中直接由键盘输入。（2）复制其他已有的文本。即：先选中要复制的文本，用【复制】命令或用快捷健Ctrl+C复制，然后切换到Dreamweaver MX文档编辑窗口，将插入点设置到要放文本的地方，然后用【编辑】【粘贴】命令或按快捷键Ctrl+v。,10.1.2 插入特殊的文本字符,1插入特殊字符 操作步骤
2、如下： （1）在需要添加特殊字符的位置单击，设置插入点。 （2）选择“插入”面板的“字符”类别，然后选择所需特殊字符。 （3）若面板上没有所需字符，则单击面板最后的“其他字符”按钮。 （4）如果要在文档中插入象、等这样的特殊符号，就不能利用Dreamweaver MX提供的方法了 。,2插入空格 选择【编辑】【参数选择】菜单命令，打开“参数选择”对话框，左边选择“常规”分类，在右边将“允许多个连续的空格”复选框选中，如图10-3所示，这样在文档中就可以用空格键连续插入空格了。 3插入换行符 插入换行符的方式：首先将光标定位在要换行的位置，然后单击“字符”面板的“换行符”按钮。,10.1.3 设
3、置文本属性,1应用段落和标题格式 在属性面板的“格式”文本框中可以设置文本的段落和标题字体。标题共分6级，标题1的字体最大，标题6的字体最小 2修改文本字体 通过单击字体列表文本框的下拉箭头，弹出字体列表，如图10-6所示，选择其中的字体类型，可以为所选择的文本修改字体类型。 3设置字体的大小 在属性面板的“大小”列表框中可以选择所需的字体的 大小。,4设置文本颜色可以通过属性面板对文本的颜色进行设置，该颜色将覆盖“页面属性”中设置的文本颜色。 5文本的对齐方式和缩进文本的对齐方式有四种：左对齐、居中对齐、右对齐和两端对齐。 6设置文本的样式 首先选中文本，然后选择【文本】【样式】子菜单中的样
4、式即可，这些样式可以随意组合。,10.1.4 插入更新日期,在文档中插入当前日期的步骤如下： （1）在文档中将光标插入在要插入日期的位置。 （2）选择【插入】【日期】菜单命令，或单击“插入”面板上的“日期”按钮。（3）在弹出的“插入日期”对话框中选择日期格式，在三个下拉列表中可分别选择星期、日期和时间的格式。如图 :,10.1.5 插入水平线,要插入水平线的方法如下： （1）将插入点放置在要插入水平线的位置。（2）选择【插入】【水平线】菜单命令，或单击“插入”面板上的“水平线”按钮。（3）此时文档中就插入了一条水平线，选中该水平线，在属性面板上可对其属性进行编辑。如下图所示,10.1.6 创建
5、项目列表,1创建项目列表 （1）选中要设置为列表的文本，或将光标放置在要插入列表的行。 （2）在属性面板中单击“项目列表”按钮或“编号列表”按钮，或选择【文本】【列表】菜单项，从扩展的子菜单中选择需要的列表类别。 （3）输入完整的列表项内容后，按回车键两次，即可完成整个列表的插入。 2创建嵌套项目列表 （1）将光标放置在需要嵌套的列表项行中。 （2）在“属性”面板中按下“文本缩进”按钮，或者选择【文本】【缩进】菜单命令，将列表项缩进。即可看到项目被嵌套了。（3）如果要将深级别的列表提高级别，可以单击“属性”面板的“文本凸出”按钮，或选择【文本】【凸出】菜单命令。,3设置项目列表属性,列表属性可
6、以决定整个列表和选定列表项的外观。可以通过设置列表的属性来选择列表的类型，从而控制列表的样子。,10.2 插入图像,10.2.1 插入图像 在网页中可以插入GIF、JPEG和PNG格式的图像，同时还可以在表格、层中插入图像。,10.2.2 设置图像属性,如果要调整图像的属性，选中图像，就可在“属性”面板上设置图像的相关属性。图像的属性面板如下图所示:,10.2.3 创建图像映射,1建立图像映射,要建立图像映射，也就是要在图像上建立热点。图像的热点工具在图像属性检查器上，有矩形、圆形和多边形三种。如下图所示:,2修改图像热点,可以很容易对在图像映射中所创建的热点进行编辑。可以移动热点，调整热点大
7、小，或者在层之间向上或向下移动热点。还可以将含有热点的图像从一个文档拷贝到其他文档，或者拷贝某图像中的一个或多个热点，然后将其粘贴到其他图像上。,10.2.4 创建鼠标经过图像,鼠标经过图像是在浏览器中当鼠标移到图像上时，会变化成另一幅图像。鼠标经过图像实际上由两个图像组成：主图像（当首次载入网页时显示的图像）和次图像（当鼠标移到主图像上时显示的图像）。,10.2.5 创建网站相册,创建网站相册的操作步骤如下： 1）选择【命令】【创建网站相册】菜单命令。 2）在“相册标题”文本域中输入一个标题。 3）单击“源图像文件夹”文本域旁的“浏览”按钮，选择包含源图像的文件夹。 4）单击“目标文件夹”文
8、本域旁的“浏览”按钮，选择（或创建）一个用来存放所有导出的图像和HTML文档的目标文件夹，该文件夹必须位于站点内。,5）指定缩略图的显示选项 6）在“相片格式”中选择大尺寸图像的格式。大尺寸图像的格式可以不同于缩略图的格式。 7）选中复选框“为每张相片建立导览页面”可以为每个源图像创建一个Web页 8）单击“确定”以创建网站相册的HTML和图像文件。,10.3 超级链接,10.3.1 创建到文档的链接 通过链接到HTML文档，能从当前网页中的文本或图像等对象跳转到另一个网页中去。链接HTML文档最常用也是最为方便的方法是使用“属性”面板。 1从网页已有元素创建链接2直接创建链接,10.3.2
9、创建到文档的锚链接,“锚”又称作“书签”，指的是在网页中，需要跳转到某特定的位置时，就需要在此位置建立一个位置标记，点击链接到这个位置标记的元素时，页面就跳转到该位置。 创建锚链接包含两个步骤 :1创建命名锚记 2创建锚链接,10.3.3 创建E-mail链接,E-mail链接是一种特殊的链接，单击这种链接，不是跳转到相应的网页上，也不是下载相应的文件，而是启动浏览器默认的电子邮件处理程序，以便书写电子邮件，并发往指定的地址。创建电子邮件链接可以使用插入邮件链接命令，也可以使用属性面板来创建电子邮件链接。,10.3.4 创建空链接,空链接也称为“无址链接”，是一个无指向的链接，它的含义同它的名
10、字一样，不会跳转到任何地方。 创建空链接的操作步骤如下：（1）在文档窗口中选取文本、图像或对象。（2）在“属性”面板的“链接”框中键入一个数字 符号（），即可完成空链接的建立.,10.3.5 创建跳转菜单,1创建跳转菜单,2修改跳转菜单,创建跳转菜单后，如果要对其修改，可以通过属性面板来进行。选中想要修改的跳转菜单，通过属性面板可以修改跳转菜单,10.4 CSS样式,10.4.1 CSS概述 CSS是Cascading Style Sheets，也即“层叠样式表”的简称，利用它可以对网页中的文本内容进行精确的格式化控制。 10.4.2 CSS样式的基本操作 1CSS样式面板 可以按照以下方法打
11、开CSS样式面板：选择【窗口】【CSS 样 式】菜单命令，或按Shift+F11快捷键。打开的CSS样式面板，如图,2创建CSS样式,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样式的建立及使用等内容。,
