Dreamweaver-cs6-标准实例教程课件第4章文本与超链接.pptx

1、第4章文本与超链接 本章将介绍文本与超级链接的基本知识及使用方法。内容包括：添加普通文本、插入特殊符号和插入日期的方法；对文本的格式设置；三种超级链接的概念与功能；创建各种超级链接的方法，包括使用属性面板创建链接、链接到文档中指定位置、创建指向E-mail地址链接等。 插入普通文本 插入特殊符号和日期 创建超链接 虚拟链接与脚本链接4.1 添加网页文本 文字是最重要的传递信息的媒介。网页上的信息大多都是通过文字来表达的，它们通过不同的排版方式、不同的设计风格排列在网页上，提供丰富的信息。在制作网页的时候，文本的创建与编辑占了制作工作的很大部分。能否对各种文本控制手段运用自如，是决定网页设计是否

2、美观和富有创意以及提高工作效率的关键。 切换到“文本”插入面板，并单击特殊字符下拉箭头后，就可以看到Dreamweaver自带的特殊字符。1换行符 Dreamweaver具有自动换行功能，即文本可以自动多行显示，但是自动换行必须是在文本一行结束的时候才能够进行。如果要在段落中实现强制换行的同时不改变段落的结构，就必须插入换行符。在HTML代码中，段落换行对应的标签是和，而换行符的标签是。插入换行符换行Enter（回车）换行2插入非间断空格 执行“编辑”“首选参数”命令，然后在“常规”中确保选中“允许多个连续的空格”。4.1.3 查找和替换文本执行“编辑”“查找和替换”命令打开“查找和替换”对话

3、框。 按Ctrl + Enter键或Shift + Enter键可以在文本搜索字段中添加换行符，从而搜索回车符。执行此类搜索时，如果不使用正则表达式，则请取消选择“忽略空白”选项。此搜索专门查找回车符，而不是仅查找换行符匹配项；例如，它不查找标签或标签。回车符在“设计”视图中显示为空格而不是换行符。4.1.4 插入日期 （1）将插入点放在文档中需要插入日期的位置。 （2）切换“插入”面板中的“常用”面板。 （3）单击“日期”按钮，此时出现“插入日期”对话框。在对话框中可以选择星期、日期、时间的显示方式。如果读者希望插入的日期在每次保存文档时自动进行更新，可以选择对话框中“储存时自动更新”复选框

4、。 注意：插入日期对话框中显示的日期和时间不是当前日期，也不反映访问者在查看站点时所看到的日期/时间。它们只是说明此信息显示方式的示例。4.2 设置文本格式4.2.1 文本的属性 Dreamweaver CS6可以将多个 CSS 类应用于单个元素。选择一个元素，执行以下方式之一打开“多类选区”对话框： （1）在HTML属性面板上的“类”下拉列表中选择“应用多个类”。 （2）在CSS属性面板上的“目标规则”下拉列表中选择“应用多个类”。 （3）在“文档”窗口底部的标签选择器上单击鼠标右键，在弹出的下拉菜单中选择“设置类”|“应用多个类”。4.2.2 设置段落格式 使用属性面板中的“格式”弹出菜单

5、或“格式”“段落格式”子菜单可以应用标准段落和标题标签。对段落应用标题标签时，Dreamweaver自动添加下一行文本作为标准段落。若要更改此设置，请执行“编辑”“首选参数”命令，然后在“常规”类别中的“编辑选项”下确保取消选中“标题后切换到普通段落”。4.3 用CSS样式格式化文本 使用 CSS 设置页面格式时，内容与表现形式是相互分开的。页面内容位于自身的 HTML 文件中，而定义代码表现形式的 CSS 规则位于外部样式表或 HTML 文档的另一部分（通常为 部分）中。 执行“窗口”“CSS样式”命令，或单击属性面板上的“CSS”按钮，即可打开“CSS样式”面板。 附加样式表。 新建CSS

6、规则。 编辑样式表。 删除选中样式表中的CSS样式。4.3.1 创建CSS样式表定义要创建的CSS样式的类型。 注意：类名称必须以英文字母或句点开头，可以包含任何字母和数字组合。不可包含空格或其他标点符号。 ID 必须以英文字母开头，可以包含任何字母和数字组合。不应包含空格或其它标点符号。可选择在名称前添加“#”号。选择定义样式的位置： 若要创建外部样式表，请选择“新建样式表文件”。 若要在当前文档中嵌入样式，请选择“仅限该文档”。设置新CSS样式选项：4.3.2 链接/导入外部CSS样式表 外部CSS样式表是一个包含样式和格式规范的外部文本文件。当对一个外部的CSS样式表进行了编辑后，所有同

7、该CSS样式表链接的文档都会根据所作的修改进行更新。在CSS样式面板上，单击“附加样式表”按钮。 导入：将外部CSS样式表的信息带入当前文档。 链接：只读取和传送信息，不会转移信息。4.3.3 修改CSS样式表 打开“CSS样式”面板，双击“所有规则”（“全部”模式下）窗格中的某条规则，或双击“所选内容的摘要”（“当前”模式下）窗格中的某个属性，弹出“CSS样式定义”对话框。 选中要修改的样式后单击底部的“编辑样式表”按钮。 在“所有规则”窗格（“全部”模式下）中选择一条规则，或在“所选内容的摘要” 窗格（“当前”模式）中选择一个属性，然后在下面的“属性”窗格中编辑该规则的属性。4.3.4 C

8、SS样式的应用 新建CSS规则，“选择器类型”选择“复合内容”，选择器名称为a:link，规则定义位置为“仅限该文档”。 新建CSS规则。“选择器类型”选择“复合内容”，选择器名称为a:hover4.4 添加超级链接 超级链接（HyperLink）是网页与网页之间联系的纽带。通过超级链接的方式可以将各个网页连接起来，使网站中众多的页面构成一个有机整体，使访问者能够在各个页面之间跳转。 超级链接可以是一段文本，一幅图像或其他网页元素，当在浏览器中用鼠标单击这些对象时，浏览器可以根据指示载入一个新的页面或者转到页面的其他位置。4.4.1 链接的基本知识 超级链接由两部分组成，一部分是在浏览网页时可

9、以看到的部分，称为超级链接载体，另一部分是超级链接所链接的目标。在浏览页面时单击链接的载体将会打开该目标。链接的目标可以是网页、图片、视频或声音和电子邮件地址等。1URL Uniform Resource Locator，中文名称称为统一资源定位符，简单讲就是网络上一个站点、网页的完整地址，相当于个人的通信地址。http:/ 绝对路径提供链接文档的完整URL，包括使用的协议（对于网页通常是http:/）。3文档相对路径 通过指定从当前文档到链接的文档在文件夹分级结构中所经过的路径。文档相对路径所包含的基本概念是省略对于当前文档和链接的文档都相同的绝对URL部分，而只提供不同的那部分路径。4根相

10、对路径 根相对路径提供从站点根文件夹到文档所经过的路径。如果工作于一个使用数台服务器的大型网站或者一台同时作为数个不同站点主机的服务器，那么可能需要使用根相对路径。5锚点（Anchor） 通过创建锚点，可以使链接指向当前文档或者不同文档中的指定位置。4.4.2 创建链接 执行“插入”“超级链接”命令，或单击“常用”插入面板中的“超级链接”按钮_blank：将链接的文件载入一个未命名的新浏览器窗口中。_parent：将链接的文件载入含有该链接的框架的父框架集或父窗口中。_self：将链接的文件载入该链接所在的同一框架或窗口中。为默认值。_top：在整个浏览器窗口中载入所链接的文件，因而会删除所有

11、框架。“目标”弹出式菜单中可以选择用于打开链接目标的窗口。 在属性设置面板的“链接”文本框中创建超级链接。（1）在文档窗口中选中需要建立链接的文本或图像。（2）执行“窗口”“属性”命令，在属性设置面板中单击“链接”文本框后面的文件夹图标，在弹出的文件框中选择一个合适的文件。 或直接在属性设置面板的链接文本框中输入要链接文档的路径和文件名。还可以拖动链接文本框后面的按钮指向另一个打开的文档，或者打开文档中的某一锚点。4.4.3 链接到文档中的指定位置 （1）将光标放在欲设置锚点的位置，切换到“常用”插入面板。 （2）单击命名锚记图标，打开“命名锚记”对话框，输入锚点名称。 锚记名称只能包含小写A

12、SCII字母和数字，不能以数字开头。如果看不到锚记标记，可选择“查看”|“可视化助理”|“不可见元素”。锚记名称区分大小写。 （3）选择作为超级链接的文字，然后在属性面板上的“链接”文本框中输入锚点的名称。 在属性设置面板中的“链接”后的文本输入框中，锚点名称前面需要添加一个特殊的符号“#”。4.4.4 创建电子邮件链接（1）选择需要作为邮件链接的文字。（2）打开属性设置面板。在属性设置面板的链接文本框中输入邮件地址。 在属性设置面板中的链接文本框中，邮件地址前面需要添加“mailto:”，表示该超级链接是邮件链接。4.4.5 创建空链接和脚本链接1、创建空链接 选择欲作为空链接的文本，然后打开属性设置面板。在属性设置面板“链接”文本框中输入“#”号，即可创建一个空链接，也称作虚拟链接。2、创建脚本链接 选择需要作为脚本链接的文本，然后打开属性设置面板。在属性设置面板中“链接”文本框中输入脚本，如： JavaScript:alert(您好，欢迎光临！)单击脚本链接时会弹出一个如图所示的对话框。4.5 文本与链接网页实例1、设置页面属性2、在设计视图中输入文字，并新建CSS规则。3、添加邮件链接和锚点链接。