文本与超链接网页设计第二讲

Web编程基础——文本与超链接1大家好学习目标掌握FONT标记符的用法，理解物理字符样式和逻辑字符样式。掌握P、BR、Hn、HR标记符的用法，掌握设置段落对齐的方法。掌握有序列表、无序列表和嵌套列表的构造方法。理解超链接的基本概念，掌握A标记符的用法。掌握使用Dreamweaver开发网站的基本过程。2大家好Part1设置字符格式3大家好字符格式所谓字符格式是指针对段落中的部分文字（一个或一组文字，也可以是整个段落的文字）所设置的格式，通常包括字体、字号、文字颜色等。4大家好FONT标记符FONT标记符具有3个常用的属性：SIZE设置字体大小COLOR设置字体颜色FACE设置字体样式5大家好FONT标记符字号属性size的值可以从1到7，3是默认值。该属性值也可以用+号或-号来作为相对值指定。<FONTsize=+1>S</FONT>HOPPING<FONTsize=+1>B</FONT>ASKET6大家好演示——<FONTsize=“”>7大家好FONT标记符字体标记符的color属性可用来控制文字的颜色，它的使用方法与正文标记符BODY中使用的bgcolor属性相同。8大家好演示——<FONTcolor=“”>9大家好FONT标记符Face属性用来指定字体样式。在编制网页时，通过在FONT标记符中指定face属性，用户可以指定一个或几个字体名称（用逗号隔开）。10大家好演示——<FONTface=“”>11大家好常用物理字符样式物理字符样式是指标记符本身说明了所修饰的效果。常用物理字符样式标记符有：黑体标记<B></B>斜体标记<I></I>下划线标记<U></U>等。12大家好演示——物理字符样式效果13大家好常用逻辑字符样式逻辑字符样式是指标记符本身说明了所修饰效果的逻辑含义。例如，ADDRESS标记符说明了“地址”这个含义，但并没有说明具体的效果。14大家好演示——逻辑字符样式效果15大家好Part2设置段落格式16大家好段落格式所谓段落格式是指针对HTML文档中的段落所设置的格式，例如，段落的对齐方式。17大家好分段标记符分段标记符用于将文档划分为段落，标记为<P></P>，其中结束标记符通常可省略。换行标记符用于在文档中强制断行，标记为一个单独的<BR>。该标记符与分段标记符<P>是有区别的。18大家好演示——P与BR19大家好标题样式在HTML中，用户可以通过Hn标记符来标识文档中的标题和副标题，其中n是1至6的数字；H1表示最大的标题，H6表示最小的标题。使用标题样式时，必须使用结束标记符。20大家好演示——标题效果21大家好添加水平线添加水平线的标记符为HR，它包括以下属性：SIZE属性用来改变水平线的粗细。WIDTH属性用来更改水平线的长度。NOSHADE属性使水平线以实线显示。COLOR属性可以控制水平线的颜色。22大家好演示——水平线效果23大家好ALIGN属性ALIGN属性用于设置段落的对齐格式，其值包括：RIGHT（右对齐）、LEFT（左对齐）、CENTER（居中对齐）和JUSTIFY（两端对齐）。ALIGN属性可应用于多种标记符，最典型的是应用于P、Hn（标题标记符）、HR等。24大家好演示——段落对齐25大家好DIV标记符DIV标记符用于为文档分节，以便为文档的不同部分应用不同的段落格式，其标记为<DIV></DIV>。位于DIV标记符中的多段文本将被认为是一个节，可为它们设置一致的对齐格式。26大家好CENTER标记符如果用户要将文档内容居中，还可使用CENTER标记符，方法为：将需居中的内容置于<CENTER>和</CENTER>之间。27大家好演示——DIV与CENTER28大家好格式嵌套（1）如果所设置的格式是相容的，则取格式叠加的效果。（2）如果所设置的格式是冲突的，则取最近样式符的修饰效果。29大家好演示——格式嵌套

30大家好Part3设置列表格式31大家好有序列表有序列表（Orderedlist）也称数字式列表，它是一种在表的各项前显示有数字或字母的缩排列表。32大家好有序列表定义有序列表需要使用有序列表标记符<OL></OL>和列表项（Listitem）标记符<LI></<LI>（结束标记符可省略），语法如下：<OL><LI>Listitem1<LI>Listitem2</OL>33大家好有序列表OL标记符最常用的属性type，用来设置数字序列样式。取值为：1、A、a、I、i。34大家好演示——有序列表page3235大家好演示——有序列表的嵌套36大家好无序列表无序列表（Unorderedlist）也称强调式列表，它是一种在表的各项前显示有特殊项目符号的缩排列表。37大家好无序列表定义无序列表需要使用无序列表标记符<UL></UL>和列表项（Listitem）标记符<LI></LI>（结束标记符可省略），语法如下：<UL><LI>Listitem1<LI>Listitem2</UL>38大家好无序列表UL标记符最常用的属性type，用来设置项目符号样式。取值为：disc、circle、square。注意：在IE中，type属性的取值是区分大小写的。39大家好演示——无序列表40大家好演示——混合嵌套列表41大家好Part3使用超链接42大家好超链接基础URL（UniversalResourcesLocator）用于定位Web上的文档信息。一个URL包括3部分：协议、计算机地址、文件路径。协议：//计算机/文件路径43大家好超链接基础——绝对URL绝对URL是指资源的完整地址，包括URL的所有3个部分，即：协议：//计算机/文档名44大家好超链接基础——相对URL相对URL是指Internet上资源相对于当前页面的地址，它包含从当前页面指向目标页面位置的路径。使用相对URL的好处：易于维护45大家好超链接基础——相对URL使用相对URL时，经常使用两个与DOS类似的符号：句点（.）表示当前目录双重句点（..）表示当前目录的上一级目录46大家好超链接基础——相对URL47大家好不同类型的超链接根据超链接的目标文件不同，分为：网页之间的超链接页面内的超链接文件下载超链接Email超链接空超链接48大家好不同类型的超链接根据超链接源对象的不同，分为：文本超链接图像超链接（包括图像映射）对象超链接（例如Flash、Java小程序）49大家好不同类型的超链接根据超链接实现方式的不同，分为：HTML超链接JavaScript超链接对象超链接50大家好创建超链接A标记符用于创建超链接（结束标记符不能省略），href属性用于指定超链接的目标文件。内部网页超链接：<ahref=test.htm>link</a>

外部网页超链接：<ahref=.com>link</a>51大家好演示——超链接效果52大家好创建超链接——锚点链接使用页面内的超链接，首先需要定义锚点，然后在超链接中指向该锚点。定义锚点应使用<aname=xxx></a>指向锚点的超链接为：<ahref=#锚点名称>link</a>53大家好创建超链接——锚点链接指向其他页面内锚点的超链接：<ahref=页面的URL#该文件中的锚点>link</a><ahref=#>blanklink</a>54大家好演示——锚点超链接效果55大家好问题在刚才的示例里，如果有另外一个同目录的网页文件page2.htm，在该网页中想访问示例页面中的“巫师”所在位置，应如何设置超链接？56大家好创建超链接——文件下载当超链接目标为浏览器不能识别的文件格式时，那么就自动生成了文件下载链接。<ahref=xxx.zip>下载</a>57大家好演示——文件下载效果58大家好创建超链接——Email链接<ahref=mailto:>Email</a>控制命令：?subject=设置信件主题?cc=设置抄送人?bcc=设置密件抄送人&组合多个控制命令59大家好演示——Email链接效果60大家好超链接的显示效果超链接颜色在BODY标记符中使用LINK属性设置未被访问的链接的颜色；VLINK设置已被访问过的链接的颜色；ALINK设置活动链接（即当前选定的链接）的颜色。下划线效果动态效果（悬停效果、鼠标指针形状、鼠标指针跟随效果）61大家好演示——超链接显示效果62大家好Part5使用Dreamweaver开发网站63大家好Dreamweaver的工作界面64大家好演示——定义本地