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

1Web编程基础——文本与超链接2/69学习目标掌握FONT标记符的用法，理解物理字符样式和逻辑字符样式。掌握P、BR、Hn、HR标记符的用法，掌握设置段落对齐的方法。掌握有序列表、无序列表和嵌套列表的构造方法。理解超链接的基本概念，掌握A标记符的用法。掌握使用Dreamweaver开发网站的基本过程。3Part1设置字符格式4/69字符格式所谓字符格式是指针对段落中的部分文字（一个或一组文字，也可以是整个段落的文字）所设置的格式，通常包括字体、字号、文字颜色等。5/69FONT标记符FONT标记符具有3个常用的属性：–SIZE设置字体大小–COLOR设置字体颜色–FACE设置字体样式6/69FONT标记符字号属性size的值可以从1到7，3是默认值。该属性值也可以用+号或-号来作为相对值指定。FONTsize=+1S/FONTHOPPINGFONTsize=+1B/FONTASKET7/69演示——FONTsize=“”8/69FONT标记符字体标记符的color属性可用来控制文字的颜色，它的使用方法与正文标记符BODY中使用的bgcolor属性相同。9/69演示——FONTcolor=“”10/69FONT标记符Face属性用来指定字体样式。在编制网页时，通过在FONT标记符中指定face属性，用户可以指定一个或几个字体名称（用逗号隔开）。11/69演示——FONTface=“”12/69常用物理字符样式物理字符样式是指标记符本身说明了所修饰的效果。常用物理字符样式标记符有：–黑体标记B/B–斜体标记I/I–下划线标记U/U等。13/69演示——物理字符样式效果14/69常用逻辑字符样式逻辑字符样式是指标记符本身说明了所修饰效果的逻辑含义。例如，ADDRESS标记符说明了“地址”这个含义，但并没有说明具体的效果。15/69演示——逻辑字符样式效果16Part2设置段落格式17/69段落格式所谓段落格式是指针对HTML文档中的段落所设置的格式，例如，段落的对齐方式。18/69分段标记符分段标记符用于将文档划分为段落，标记为P/P，其中结束标记符通常可省略。换行标记符用于在文档中强制断行，标记为一个单独的BR。该标记符与分段标记符P是有区别的。19/69演示——P与BR20/69标题样式在HTML中，用户可以通过Hn标记符来标识文档中的标题和副标题，其中n是1至6的数字；H1表示最大的标题，H6表示最小的标题。使用标题样式时，必须使用结束标记符。21/69演示——标题效果22/69添加水平线添加水平线的标记符为HR，它包括以下属性：–SIZE属性用来改变水平线的粗细。–WIDTH属性用来更改水平线的长度。–NOSHADE属性使水平线以实线显示。–COLOR属性可以控制水平线的颜色。23/69演示——水平线效果24/69ALIGN属性ALIGN属性用于设置段落的对齐格式，其值包括：RIGHT（右对齐）、LEFT（左对齐）、CENTER（居中对齐）和JUSTIFY（两端对齐）。ALIGN属性可应用于多种标记符，最典型的是应用于P、Hn（标题标记符）、HR等。25/69演示——段落对齐26/69DIV标记符DIV标记符用于为文档分节，以便为文档的不同部分应用不同的段落格式，其标记为DIV/DIV。位于DIV标记符中的多段文本将被认为是一个节，可为它们设置一致的对齐格式。27/69CENTER标记符如果用户要将文档内容居中，还可使用CENTER标记符，方法为：将需居中的内容置于CENTER和/CENTER之间。28/69演示——DIV与CENTER29/69格式嵌套（1）如果所设置的格式是相容的，则取格式叠加的效果。（2）如果所设置的格式是冲突的，则取最近样式符的修饰效果。30/69演示——格式嵌套31Part3设置列表格式32/69有序列表有序列表（Orderedlist）也称数字式列表，它是一种在表的各项前显示有数字或字母的缩排列表。33/69有序列表定义有序列表需要使用有序列表标记符OL/OL和列表项（Listitem）标记符LI/LI（结束标记符可省略），语法如下：–OL–LIListitem1–LIListitem2–/OL34/69有序列表OL标记符最常用的属性type，用来设置数字序列样式。取值为：1、A、a、I、i。35/69演示——有序列表page3236/69演示——有序列表的嵌套37/69无序列表无序列表（Unorderedlist）也称强调式列表，它是一种在表的各项前显示有特殊项目符号的缩排列表。38/69无序列表定义无序列表需要使用无序列表标记符UL/UL和列表项（Listitem）标记符LI/LI（结束标记符可省略），语法如下：–UL–LIListitem1–LIListitem2–/UL39/69无序列表UL标记符最常用的属性type，用来设置项目符号样式。取值为：disc、circle、square。注意：在IE中，type属性的取值是区分大小写的。40/69演示——无序列表41/69演示——混合嵌套列表42Part3使用超链接43/69超链接基础URL（UniversalResourcesLocator）用于定位Web上的文档信息。一个URL包括3部分：协议、计算机地址、文件路径。协议：//计算机/文件路径44/69超链接基础——绝对URL绝对URL是指资源的完整地址，包括URL的所有3个部分，即：协议：//计算机/文档名45/69超链接基础——相对URL相对URL是指Internet上资源相对于当前页面的地址，它包含从当前页面指向目标页面位置的路径。使用相对URL的好处：易于维护46/69超链接基础——相对URL使用相对URL时，经常使用两个与DOS类似的符号：–句点（.）表示当前目录–双重句点（..）表示当前目录的上一级目录47/69超链接基础——相对URL48/69不同类型的超链接根据超链接的目标文件不同，分为：–网页之间的超链接–页面内的超链接–文件下载超链接–Email超链接–空超链接49/69不同类型的超链接根据超链接源对象的不同，分为：–文本超链接–图像超链接（包括图像映射）–对象超链接（例如Flash、Java小程序）50/69不同类型的超链接根据超链接实现方式的不同，分为：–HTML超链接–JavaScript超链接–对象超链接51/69创建超链接A标记符用于创建超链接（结束标记符不能省略），href属性用于指定超链接的目标文件。内部网页超链接：ahref=test.htmlink/a外部网页超链接：ahref=演示——超链接效果53/69创建超链接——锚点链接使用页面内的超链接，首先需要定义锚点，然后在超链接中指向该锚点。定义锚点应使用aname=xxx/a指向锚点的超链接为：ahref=#锚点名称link/a54/69创建超链接——锚点链接指向其他页面内锚点的超链接：ahref=页面的URL#该文件中的锚点link/aahref=#blanklink/a55/69演示——锚点超链接效果56/69问题在刚才的示例里，如果有另外一个同目录的网页文件page2.htm，在该网页中想访问示例页面中的“巫师”所在位置，应如何设置超链接？57/69创建超链接——文件下载当超链接目标为浏览器不能识别的文件格式时，那么就自动生成了文件下载链接。ahref=xxx.zip下载/a58/69演示——文件下载效果59/69创建超链接——Email链接ahref=mailto:[e-mail]/a控制命令：–?subject=设置信件主题–?cc=设置抄送人–?bcc=设置密件抄送人–&组合多个控制命令60/69演示——Email链接效果61/69超链接的显示效果超链接颜色–在BODY标记符中使用LINK属性设置未被访问的链接的颜色；VLINK设置已被访问过的链接的颜色；ALINK设置活动链接（即当前选定的链接）的颜色。下划线效果动态效果（悬停效果、鼠标指针形状、鼠标指针跟随效果）62/69演示——超链接显示效果63Part5使用Dreamweaver开发网站64/69Dreamweaver的工作界面65/69演示——定义本地站点page23766/69演示——编辑网页Page203－20867Part6作业1：纯文本网站68/69要求主题自拟。注意考虑与大作业的关联。至少5页。导航结构要清楚。–每页都有返回主页的链接。–每页都有导航系统。–除主页外，每页都有Breadcrumb。–网站至少包含两个栏目。69/69That’sallforthischapter!