通过本章学习,应该掌握以下内容:
1,HTML及其功能
2,利用 HTML创建和测试 Web页的方法
3,利用 HTML设置标题和文字
4,利用 HTML设置段落
5,利用 HTML进行文本格式的处理
6,利用 Dreamweaver MX处理文本第 3章 网页文本的处理
3.1 利用 HTML处理文本
3.1.1 HTML基础一名网页设计高手,就必需掌握 HTML语言 。
HTML是网络的通用语言,它允许设计者建立文本与图像相结合的复杂页面,这些页面可以被网上任何人浏览,无论使用的是什么类型的电脑或浏览器 。
HTML作为一种网页编辑语言,易学易懂,能制作出精美的网页效果,其他的专用网页编辑器
( 如 FrontPage,Dreamweaver) 都是以 HTML为基础的 。
1,标记符标记符又称标签,HTML是影响网页内容显示格式的标记符集合,浏览器根据标记符决定网页的实际显示效果 。
在 HTML中,所有的标记符都用尖括号括起来 。
例如,<HTML>表示 HTML标记符 。 绝大多数标记符都是成对出现的,包括开始标记符和结束标记符 。
开始标记符和相应的结束标记符定义了标记符所影响的范围 。 结束标记符与开始标记符的区别是有一个斜线 。 如,<HTML>… </HTML>.
属性是用来描述对象特征的特性 。 在 HTML中,所有的属性都放置在开始标记符的尖括号里,属性与标记符之间用空格分隔,属性的值放在相应属性之后,
用等号分隔,而不同的属性之间用空格分隔 。 格式为:
<标记符 属性 1=属性值 1 属性 2=属性值 2 … >
受影响的内容 </标记符 >
HTML属性通常也不区分大小写 。 本书中为了区分标记符及其属性,标记符均使用大写字母表示,而属性均使用小写字母表示 。
HTML标记符是不区分大小写的,但通常约定标记符使用大写字母,这有利于 HTML文档的维护 。
2,HTML文档的基本结构
<HTML>
<HEAD>
<TITLE>
文本标题
</TITLE>
</HEAD>
<BODY>
文本内容
</BODY>
</HTML>
<HTML></HTML>这两个标记符是 HTML文档的标记符 。 <HTML>处于文档的最前端,表示文档的 开 始,即 浏 览 器 从 <HTML> 开 始 解 释 。 而
</HTML>则位于文件的最后一行,这样的结果表示这一整份的文档都是 HTML语法的文档 。
( 1) HTML标记符
<HEAD></HEAD>是 HTML文件头标记符,用来描述 HTML首部的内容,说明文档的整体信息 。 所有首部信息并不会出现在利用 WWW浏览器所看到的窗体中 。 <HEAD></HEAD>通常与某些标记符一起使用,如 <TITLE></TITLE>标记符 。
( 2) HEAD标记符
( 3) TITLE标记符
<TITLE></TITLE>指的是一份文档的标题 。 通常来说,每一份文档都应该有一个标题来简述这一份文档的特色或是主题 。 对于 WWW浏览器而言,标题所在的位置虽然依照浏览器的不同而不同,但是大部分都位于浏览器的最上方 。
( 4) BODY标记 符
<BODY></BODY>指的是定义出一个 HTML文档的体部,
位于首部下面 。 在 <BODY>标记符内的文字,所有使用标记符的地方都可以经浏览器正确地显示在浏览器窗体中 。 <BODY>也是一个建议选项 。
3,创建和测试 Web页
( 1) 创建 Web页由于 HTML文件的实质就是文本文件,因此可以用任何文本编辑器编辑 HTML文件,通常可以使用
Windows系统中的,记事本,程序 。
( 2) 测试 Web页保存了 Web页之后,在所选择的文件夹中将包含所创建的 Web页,该 Web页文件左边有一个 图标,表示可以由 IE将其打开 。 找到刚创建的 Web页并用鼠标左键双击,则可以自动启动 IE浏览器,此时所创建
Web页中的内容将在浏览器中显示 。
3.1.2 标题处理在 HTML中,用户可以通过 Hn标记符来标识文档中的标题和副标题,其中 n是 1到 6的数字 。 <H1>
表示最大的标题,<H6>表示最小的标题 。 使用标题样式时,必须使用结束标记符 。
标题文字标记符的格式:
<Hn align="对齐方式 ">标题文字 </Hn>
属性 align用来设置标题在页面中的对齐方式:
left( 左对齐 ),center( 居中 ) 或 right( 右对齐 ) 。
3.1.3 段落处理在 HTML中段落处理是通过段落标记来完成的,
常用的段落标记符有:注释标记符,强制换行标记符,强制换段标记符,分区显示标记符和水平线等 。
HTML的注释标记符的格式为:
<!--注释内容 -->
注释并不局限于一行,长度不受限制 。 结束标记符不必与开始标记符在同一行 。 注释的内容不在浏览器中显示 。
1,注释标记符
2,强制换行标记符强制换行标记符为 <BR>,放在一行的末尾,可以使后面的文字,图片,表格等显示于下一行,而又不会在行与行之间留下空行,即强制文本换行 。
强制换行标记符的格式为:
文字 <BR>
浏览器解释时,从该处换行 。 换行标记符单独使用,可使页面清晰,整齐 。
3,强制换段标记符换段标记符有两个:一个为强制换段标记符,另一个为设置段落标记符 。
强制换段标记符的格式为:
文字 <P>
<P>标记不但能使后面的文字换到下一行,还可以使两段之间多一空行 。
设置段落标记符的格式为:
<P align="对齐方式 "> 文字 </P>
其中属性 align用来设置段落的对齐方式,可以为 left,center或 right,分别表示居左,居中,居右 。 默认方式为 left。
4,显示预排格式标记符如果希望在浏览网页时仍保留在编辑工具中已经排好的段落格式,可以使用 <PRE>标记符将预先排好的格式保留下来 。
显示预排格式标记符的格式为:
<PRE>预先排好的格式 </PRE>
在预排格式中,仍可以用 HTML语言对文字的格式进行设置,如文字的颜色,大小等 。
5,分区显示标记符分区显示标记符的格式为:
<DIV align="对齐方式 "> 文本或图像 </DIV >
6,水平线在页面中插入一条水平标尺线,可以使不同功能的文字分隔开,看起来整齐,明了 。
水平线标记符的格式为:
<HR align="对齐方式 " size="横线粗细 " width="
横线长度 " color="横线颜色 " noshade>
在网页中为了增强页面的层次,其中的文字可以用不同的大小,字体,字型和颜色,通常用 FONT
标记符来完成 。
FONT标记符设置格式为:
<FONT size="数字 " face="字体名 " color="颜色 ">
被设置的文字 </FONT>
3.1.4 文本格式处理
1,文字设置
( 1) size属性
size属性是字号属性,用于控制文字的大小,
它的取值既可以是绝对值,也可以是相对值 。 使用绝对数值时,字号属性的值可以从 1到 7( 3是默认值 ),值越大,显示的文字越大 。 使用相对数值时,
可以用,+,或,-,来指定相对于当前默认值的字号,例如 +1表示比当前默认字号大 1号 。
( 2) face属性
face属性是字体标记符,用来指定字体样式 。
字体样式也就是通常所说的,字体,。 例如,常用的英文字体有,Times New Roman”,,Arial”等;
常用的中文字体有,宋体,,,楷体,等 。 在编写网页时,通过在 FONT标记符中指定 face属性,用户可以指定一个或几个字体名称 (用逗号隔开 )。
( 3) color属性
FONT标记符的 color属性可用来控制文字的颜色,属性值可以是颜色名称或十六进制值 。
2,格式处理
HTML中的格式标记符有:
<P></P>
<BR>
<BLOCKQUOTE></BLOCKQUOTE>
<DL></DL><DT></DT><DD></DD>
<OL></OL><UL></UL><LI></LI>
<DIV></DIV>
这些标记符都是在 <BODY></BODY>标记符中的 。
( 1) 设置页面背景颜色在 <BODY>标记符中使用 bgcolor属性可以为网页设置背景颜色,有 16种标准颜色可供选择 。
( 2) 设置页面背景图像单纯使用一种颜色作为背景显然有些单调,网页设计者也可选择特定图案作为页面的背景,使用
BODY标记符的 background属性即可 。 HTML语句为:
<BODY background="网页背景图案的地址 ">
3,设置页面属性
( 3) 设置文字和超链接的颜色在设置了背景图案或背景颜色后,常常需要更改正文字符和超链接的颜色,以便与背景相适应 。
设置正文和超链接颜色时,可以使用 BODY标记符的 text,link,vlink和 alink属性 。 其中,text属性用于设置正文的颜色; link属性用于设置未被访问的超链接的颜色; vlink用于设置已被访问过的超链接的颜色; alink用于设置活动超链接 ( 即当前选定的超链接 ) 的颜色 。
( 1) 自动换行:在输入文字时,若某一行的长度超过了 Dreamweaver MX窗口的显示范围,文字将自动换到下一行 。
( 2) 利用,Enter”换行:在输入文字后按,Enter”键,
文字成段,且上下段之间空一行 。
( 3) 利用,Shift+Enter”键换行:如果想要将文字手动换行,中间又不能出现空白行,可 以 按
,Shift+Enter”键 。
3.2 利用 DreamweaverMX处理网页文本
3.2.1 输入文本
1,换行有时为了内容的需要,要在网页中插入一些键盘上没有的特殊字符,在 Dreamweaver MX中,这些特殊字符不仅可以通过,插入,菜单下的,特殊字符,命令来插入,还可以通过插入,字符,面板来直接插入 。
2,插入特殊的字符
Dreamweaver MX中,在文本开始处按空格键是不会输入空格的,在文字之间按空格键可以输入半个空格 。 如果要在网页中输入空格,可以采用如下三种方法:
( 1) 按住,Ctrl+Shift”键,按一次空格键,键入半个空格 。
( 2) 将输入法由半角状态切换到在全角状态,按一次空格键,键入一个空格 。
( 3) 将编辑窗口切换到代码视图,在要输入空格的地方输入代码 &nbsp;,输入一组 &nbsp;代码,产生半个空格 。
3,输入空格在网页中加入适当的注释文字,可以为日后修改,
管理网页提供方便 。 由于批注只有在编辑网页时或查看原代码时才能看到,所以不必担心批注文字会破坏版面 。
将光标移到想要插入的注释地方,然后在插入
,常用,面板中单击,注释,按钮,或选择,插入,|“文本对象,|“注释,命令,弹出,注释,对话框,再单击,确定,按钮即可 。
4,加入注释文字
5,插入水平线在页面中插入水平线的方法如下:
首先确定插入水平线的位置,然后单击插入面板上,常用,选项卡中的按钮,或选择,插入,|“水平线,菜单命令,则可在页面中插入了一条水平线 。
选中水平线,打开水平线属性面板,可以设置水平线的属性 。
如果要在文档中查找或替找某个文字,可利用
Dreamweaver MX提供的查找和替换功能 。 选择
,编辑,|“查找和替换,命令,打开,查找和替换,
对话框 。 在该对话框中进行查找和替换操作 。
3.2.2 查找 /替换文本的内容在 Dreamweaver MX中设置文本格式可以通过属性面板,类似于 Microsoft Word中对文本的属性设置,包括段落的格式,字体,字号,字的颜色,
字体加粗 /倾斜,对齐方式 ( 左对齐 /居中 /右对齐 ),
文字所链接的路径或 URL等 。
3.2.3 设置文本格式
3.2.4 添加和删除中文字体在 Dreamweaver MX英文版中,默认状态只有西文的字体可供选择,要使用中文字体可以事先将计算机里的中文字体添加到 Dreamweaver MX的字体列表中 。
在创建文档前或创建文档后,还需要对页面的属性进行必要设置,设定一些影响整个网页的参数 。 设置页面属性 时,选择,修改,|“页面属性,命令,出现,页面属性,对话框中进行页面属性的设置 。
3.2.5 设置页面的属性
E N D