html+css网页设计指南 12课件.pptVIP

第3章 动手在网页中写些什么 静态页面中的绝大部分内容由4类属性的物质组成：文本、图像、视频音频、多媒体文件和超链接。本章从编辑文本的知识点开始介绍。那什么是文本呢，从词源上说，表示“编织的东西”。当然这里说的文本既不是指“错画”也不是指某种计算机语言，很简单，是指“书写下来的任何语言”。更通俗地说，本章将学习如何在页面中编写设计者想说的话。 本章的主要知识点有： 了解HTML语言，区分清楚旧的使用规则和新规则CSS之间的联系和不同。 文本排版格式：学会如何使用标签实现在页面中规范写作格式。 文本样式：学会如何改变页面中的文本的基本属性和如何使用一些特殊的符号。 文本列表：学会在页面中使用无序列表和有序列表来罗列条目。 通过小结中的实例，学会在页面中编写文本，项目列表。 3.1 新旧方法对比 在早期的HTML版本中，常使用一些特殊标签来编辑文本，如em.../em标签，就是用来突出文本，使文本具有斜体字效果的。但这种方法非常繁琐，编辑不同段落时需要重复使用，工作量很大，修改时也很麻烦。 1994年，一位叫哈坤·利的设计者提出“层叠式”概念的样式表来编辑文本。1996年底，这种方法被正式推出。就是现在大家比较熟悉的CSS。 CSS就像是哈里波特的魔法一样，令本来需要一步步完成的繁琐工序，只要念动一下咒语瞬间就能改头换面。 3.2 文本的排版格式 在HTML文档中，需要使用不同的标签来设计文本排版。试想，如果在一份报纸，字体大小不一，标题位置混乱，人们怎么能够忍受？如图3.2所示的排版，就让人找不到它的标题在哪里。 3.2.1 写一行换一行 一般页面文本每行的字数在35字左右，这个没有一定的规定，原则是只要每行控制在恰当的长度内就可以了。太短了浏览者会总是需要频繁阅读下一行，太长了浏览者又需要左右移动视线，这样会令浏览者在阅读页面文本的时候感到不舒服。在HTML文档中，可以使用以下的p标签或者br标签方式使文本换行。 p.../p标签； br.../br标签。 p标签对文本的定义是p.../p内的文本是一个段落，如代码3-3所示为p标签在HTML中的使用方法。 【本节示例参考：资料光盘\第3章\3-3 使用p标签.html】。 3.2.2 在页面文本中空格 在正规格式的文本中每一段落的开头会空2格，而在HTML源文档中，连续输入的空格键会被默认为只有一个空格，所以，这时就需要使用特殊的空格符号放置在文本中。空格符号的写法是： nbsp; 使用时在文本需要键入空格的地方键入“nbsp;“就可以了，如代码3-5所示，在同一句文本中分别放入不同长度的空格数，以此来观察中间的区别。 【本节示例参考：资料光盘\第3章\3-5 使用空格符号.html】。 3.2.3 文本的段落要对齐 编排版面时，时常需要使一系列的文本段落按照统一格式对齐，如左对齐、右对齐和居中对齐。实际操作的时候，设计者当然不是使用一堆堆的空格符号来一格格地编排文本位置。在HTML文档中，文本的对齐是通过align标签来实现的，通常把align放在p标签内使用，如下所示。 p align=left.../p ! --左对齐 -- p align=center.../p ! --居中对齐 -- p align=right.../p ! --右对齐 -- 在HTML中使用对齐属性的示例如代码3-7所示，其将不同文本采用不同的对齐方式，放置在页面中。 【本节示例参考：资料光盘\第3章\3-7 使文本段落对齐.html】。 3.3 文本的属性样式 在HTML页面中，可以通过使用不同的标签来修改文本的属性，使页面内容起到不同的显示效果。如果说3.2节是讨论了如何使文本版块的布局更漂亮，那么本节将学习的是如何使文本自身打扮得更漂亮丰富些，更好地帮助页面设计者把想说的内容传达给阅读者。 3.3.1 不一样的文本字体大小 虽然早期HTML语言中的很多标签现在已不使用，但一些特殊的标签，如粗体、斜体等，对于理解HTML语言有很大的帮助，这里简单来阐述一下。 其使用方法就是，把需要编辑的文本放入相应的标签内，就可以改变文字效果。例如使用em标签，代码形式如下： body p em文本内容/em /body 3.3.2 奇妙的特殊符号 在3.2.2节中介绍了“nbsp;”空格符号，事实上，在HTML语言中，类似这样的标记还有很多。一般很少使用它们，但某些时候，设计者又必须用到这些特殊符号。下面，我们来了解一下这些特殊符号。 特殊符号通常有固定的格式，一般为“...;”。例如注册商标符号“reg;”和版权商标符号“copy;”。图3.11中，这2个特殊符号被放在了页面中。 3.3.3 给文本