网站开发技术第4章-html

通过本章学习，应该掌握以下内容： 4.1 利用HTML处理文本 4.2 利用Dreamweaver MX处理网页文本,第四章 HTML,4.1 利用HTML处理文本,4.1.1 HTML基础,一名网页设计高手，就必需掌握HTML(Hypertext Markup Language，超文本标记语言 )语言。HTML是网络的通用语言，它允许设计者建立文本与图像相结合的复杂页面，这些页面可以被网上任何人浏览，无论使用的是什么类型的电脑或浏览器。 HTML作为一种网页编辑语言，易学易懂，能制作出精美的网页效果，其他的专用网页编辑器（如FrontPage、Dreamweaver）都是以HTML为基础的。,1标记符,标记符又称标签，HTML是影响网页内容显示格式的标记符集合，浏览器根据标记符决定网页的实际显示效果。 在HTML中，所有的标记符都用尖括号括起来。例如，表示HTML标记符。绝大多数标记符都是成对出现的，包括开始标记符和结束标记符。开始标记符和相应的结束标记符定义了标记符所影响的范围。结束标记符与开始标记符的区别是有一个斜线。如：.,属性是用来描述对象特征的特性。在HTML中，所有的属性都放置在开始标记符的尖括号里，属性与标记符之间用空格分隔，属性的值放在相应属性之后，用等号分隔，而不同的属性之间用空格分隔。格式为： 受影响的内容 HTML属性通常也不区分大小写。本书中为了区分标记符及其属性，标记符均使用大写字母表示，而属性均使用小写字母表示。,HTML标记符是不区分大小写的，但通常约定标记符使用大写字母，这有利于HTML文档的维护。,2HTML文档的基本结构, 文本标题 文本内容 ,这两个标记符是HTML文档的标记符。处于文档的最前端，表示文档的开始（定义网页文件的开始），即浏览器从开始解释。而则位于文件的最后一行，用来标识HTML文档的结束。,（1）HTML标记符,是HTML文件头标记符，用来描述HTML首部的内容，说明文档的整体信息。所有首部信息并不会出现在利用WWW浏览器所看到的窗体中。通常与某些标记符一起使用，如标记符。,（2）HEAD标记符,（3）TITLE标记符 指的是一份文档的标题。通常来说，每一份文档都应该有一个标题来简述这一份文档的特色或是主题。对于WWW浏览器而言，标题所在的位置虽然依照浏览器的不同而不同，但是大部分都位于浏览器的最上方。,（4）BODY标记符 指的是定义出一个HTML文档的主体部分，位于首部下面。在标记符内的文字，所有使用标记符的地方都可以经浏览器正确地显示在浏览器窗体中。标志中可以有以下属性：,3创建和测试Web页,（1）创建Web页 由于HTML文件的实质就是文本文件，因此可以用任何文本编辑器编辑HTML文件，通常可以使用Windows系统中的“记事本”程序。,（2）测试Web页 保存了Web页之后，在所选择的文件夹中将包含所创建的Web页，该Web页文件左边有一个 图标，表示可以由IE将其打开。找到刚创建的Web页并用鼠标左键双击，则可以自动启动IE浏览器，此时所创建Web页中的内容将在浏览器中显示。,4.1.2 标题处理,在HTML中，用户可以通过Hn标记符来标识文档中的标题和副标题，其中n是1到6的数字。表示最大的标题，表示最小的标题。使用标题样式时，必须使用结束标记符。 标题文字标记符的格式： 标题文字 属性align用来设置标题在页面中的对齐方式：left（左对齐）、center（居中）或right（右对齐）。,4.1.3 段落处理,在HTML中段落处理是通过段落标记来完成的，常用的段落标记符有：注释标记符、强制换行标记符、强制换段标记符、分区显示标记符和水平线等。,HTML的注释标记符的格式为： 注释并不局限于一行，长度不受限制。结束标记符不必与开始标记符在同一行。注释的内容不在浏览器中显示。,1注释标记符,2强制换行标记符,强制换行标记符为，放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。 强制换行标记符的格式为： 文字 浏览器解释时，从该处换行。换行标记符单独使用，可使页面清晰、整齐。,3强制换段标记符,换段标记符有两个：一个为强制换段标记符，另一个为设置段落标记符。 强制换段标记符的格式为： 文字 标记不但能使后面的文字换到下一行，还可以使两段之间多一空行。 设置段落标记符的格式为： 文字 其中属性align用来设置段落的对齐方式，可以为left、center或right，分别表示居左、居中、居右。默认方式为left。,4显示预排格式标记符,如果希望在浏览网页时仍保留在编辑工具中已经排好的段落格式，可以使用标记符将预先排好的格式保留下来。 显示预排格式标记符的格式为： 预先排好的格式 在预排格式中，仍可以用HTML语言对文字的格式进行设置，如文字的颜色、大小等。,5分区显示标记符,分区显示标记符的格式为： 文本或图像 ,6水平线,在页面中插入一条水平标尺线，可以使不同功能的文字分隔开，看起来整齐、明了。 水平线标记符的格式为： ,在网页中为了增强页面的层次，其中的文字可以用不同的大小、字体、字型和颜色，通常用FONT标记符来完成。 FONT标记符设置格式为： 被设置的文字 ,4.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中的格式标记符有： 这些标记符都是在标记符中的。,（1） 标志对是用来创建一个段落，在此标志对之间加入的文本将按照段落的格式显示在浏览器上。另外，标志还可以使用align属性，它用来说明对齐方式，语法是：。align可以是Left(左对齐)、Center(居中)和Right(右对齐)三个值中的任何一个。如表示标志对中的文本使用居中的对齐方式。,（2） 是一个很简单的标志，它没有结束标志，因为它用来创建一个回车换行，这么一说我想您该会使用了吧。在的使用上还有一定的技巧，如果您把加在标志对的外边，将创建一个大的回车换行，即前边和后边的文本的行与行之间的距离比较大，若放在的里边则前边和后边的文本的行与行之间的距离将比较小，您不妨试试看。,（3） 在标志对之间加入的文本将会在浏览器中按两边缩进的方式显示出来。 （4） 用来创建一个普通的列表，用来创建列表中的上层项目，用来创建列表中最下层项目，和都必须放在标志对之间。 看一下下边的例子您就会明白了,例2 创建一个普通列表 一个普通列表 中国城市 北京 上海 广州 美国城市 华盛顿 芝加哥 纽约 ,（5） 标志对用来创建一个标有数字的列表；标志对用来创建一个标有圆点的列表；标志对只能在或标志对之间使用，此标志对用来创建一个列表项，若放在之间则每个列表项加上一个数字，若在之间则每个列表项加上一个圆点。请看下边的例子：标有数字或圆点的列表, 中国城市 北京 上海 广州 美国城市 华盛顿 芝加哥 纽约 ,（6） 标志对用来排版大块Html段落，也用于格式化表，此标志对的用法与标志对非常相似，同样有align对齐方式属性，读者可以自己试试看。,（1）设置页面背景颜色 在标记符中使用bgcolor属性可以为网页设置背景颜色，有16种标准颜色可供选择。 （2）设置页面背景图像 单纯使用一种颜色作为背景显然有些单调，网页设计者也可选择特定图案作为页面的背景，使用BODY标记符的background属性即可。HTML语句为： ,3设置页面属性,（3）设置文字和超链接的颜色 在设置了背景图案或背景颜色后，常常需要更改正文字符和超链接的颜色，以便与背景相适应。设置正文和超链接颜色时，可以使用BODY标记符的text、link、vlink和alink属性。其中，text属性用于设置正文的颜色；link属性用于设置未被访问的超链接的颜色；vlink用于设置已被访问过的超链接的颜色；alink用于设置活动超链接（即当前选定的超链接）的颜色。,（1）自动换行：在输入文字时，若某一行的长度超过了Dreamweaver MX窗口的显示范围，文字将自动换到下一行。 （2）利用“Enter”换行：在输入文字后按“Enter”键，文字成段，且上下段之间空一行。 （3）利用“Shift+Enter”键换行：如果想要将文字手动换行，中间又不能出现空白行，可以按“Shift+Enter”键。,4.2 利用Dreamweaver MX处理网页文本,4.2.1 输入文本,1换行,有时为了内容的需要，要在网页中插入一些键盘上没有的特殊字符，在Dreamweaver MX中，这些特殊字符不仅可以通过“插入”菜单下的“特殊字符”命令来插入，还可以通过插入“字符”面板来直接插入。,2插入特殊的字符,Dreamweaver MX中，在文本开始处按空格键是不会输入空格的，在文字之间按空格键可以输入半个空格。如果要在网页中输入空格，可以采用如下三种方法： （1）按住“Ctrl+Shift”键，按一次空格键，键入半个空格。 （2）将输入法由半角状态切换到在全角状态，按一次空格键，键入一个空格。 （3）将编辑窗口切换到代码视图，在要输入空格的地方输入代码代码，产生半个空格。,3输入空格,在网页中加入适当的注释文字，可以为日后修改、管理网页提供方便。由于批注只有在编辑网页时或查看原代码时才能看到，所以不必担心批注文字会破坏版面。 将光标移到想要插入的注释地方，然后在插入“常用”面板中单击“注释”按钮，或选择“插入”|“文本对象”|“注释”命令，弹出“注释”对话框，再单击“确定”按钮即可。,4加入注释文字,5插入水平线,在页面中插入水平线的方法如下： 首先确定插入水平线的位置，然后单击插入面板上“常用”选项卡中的按钮 ，或选择“插入”|“水平线”菜单命令，则可在页面中插入了一条水平线。 选中水平线，打开水平线属性面板，可以设置水平线的属性。,如果要在文档中查找或替找某个文字，可利用Dreamweaver MX提供的查找和替换功能。选择“编辑”|“查找和替换”命令，打开“查找和替换”对话框。在该对话框中进行查找和替换操作。,4.2.2 查找/替换文本的内容,在Dreamweaver MX中设置文本格式可以通过属性面板，类似于Microsoft Word中对文本的属性设置，包括段落的格式、字体、字号、字的颜色、字体加粗/倾斜、对齐方式（左对齐/居中/右对齐）、文字所链接的路径或URL等。,4.2.3 设置文本格式,4.2.4 添加和删除中文字体,在Dreamweaver MX英文版中，默认状态只有西文的字体可供选择，要使用中文字体可以事先将计算机里的中文字体添加到Dreamweaver MX的字体列表中。,在创建文档前或创建文档后，还需要对页面的属性进行必要设置，设定一些影响整个网页的参数。设置页面属性时，选择“修改”|“页面属性”命令，出现“页面属性”对话框中进行页面属性的设置。,4.2.5 设置页面的属性,E N D,