《网页制作教程_教学课件 赵丰年中文 2文本与超链接》由会员分享，可在线阅读，更多相关《网页制作教程_教学课件 赵丰年中文 2文本与超链接（70页珍藏版）》请在金锄头文库上搜索。
1、1/69,在线教务辅导网：http:/,教材其余课件及动画素材请查阅在线教务辅导网,QQ:349134187 或者直接输入下面地址：,http:/,2,Web编程基础,文本与超链接,3/69,学习目标,掌握FONT标记符的用法，理解物理字符样式和逻辑字符样式。 掌握P、BR、Hn、HR标记符的用法，掌握设置段落对齐的方法。 掌握有序列表、无序列表和嵌套列表的构造方法。 理解超链接的基本概念，掌握A标记符的用法。 掌握使用Dreamweaver开发网站的基本过程。,4,Part 1,设置字符格式,5/69,字符格式,所谓字符格式是指针对段落中的部分文字（一个或一组文字，也可以是整个段落的文字）所
2、设置的格式，通常包括字体、字号、文字颜色等。,6/69,FONT标记符,FONT标记符具有3个常用的属性： SIZE 设置字体大小 COLOR 设置字体颜色 FACE 设置字体样式,7/69,FONT标记符,字号属性 size 的值可以从1到7，3是默认值。该属性值也可以用 + 号或 - 号来作为相对值指定。 SHOPPING BASKET,8/69,演示,9/69,FONT标记符,字体标记符的 color 属性可用来控制文字的颜色，它的使用方法与正文标记符BODY中使用的 bgcolor 属性相同。,10/69,演示,11/69,FONT标记符,Face 属性用来指定字体样式。在编制网页时，
3、通过在FONT标记符中指定 face 属性，用户可以指定一个或几个字体名称（用逗号隔开）。,12/69,演示,13/69,常用物理字符样式,物理字符样式是指标记符本身说明了所修饰的效果。 常用物理字符样式标记符有： 黑体标记 斜体标记 下划线标记等。,14/69,演示物理字符样式效果,15/69,常用逻辑字符样式,逻辑字符样式是指标记符本身说明了所修饰效果的逻辑含义。例如，ADDRESS标记符说明了“地址”这个含义，但并没有说明具体的效果。,16/69,演示逻辑字符样式效果,17,Part 2,设置段落格式,18/69,段落格式,所谓段落格式是指针对 HTML 文档中的段落所设置的格式，例如，
4、段落的对齐方式。,19/69,分段标记符,分段标记符用于将文档划分为段落，标记为，其中结束标记符通常可省略。 换行标记符用于在文档中强制断行，标记为一个单独的。该标记符与分段标记符是有区别的。,20/69,演示P与BR,21/69,标题样式,在 HTML 中，用户可以通过 Hn 标记符来标识文档中的标题和副标题，其中 n 是1至6的数字；H1表示最大的标题，H6表示最小的标题。使用标题样式时，必须使用结束标记符。,22/69,演示标题效果,23/69,添加水平线,添加水平线的标记符为HR，它包括以下属性： SIZE 属性用来改变水平线的粗细。 WIDTH 属性用来更改水平线的长度。 NOSHA
5、DE 属性使水平线以实线显示。 COLOR属性可以控制水平线的颜色。,24/69,演示水平线效果,25/69,ALIGN 属性,ALIGN 属性用于设置段落的对齐格式，其值包括：RIGHT（右对齐）、LEFT（左对齐）、CENTER（居中对齐）和 JUSTIFY（两端对齐）。ALIGN 属性可应用于多种标记符，最典型的是应用于 P、Hn（标题标记符）、HR 等。,26/69,演示段落对齐,27/69,DIV 标记符,DIV 标记符用于为文档分节，以便为文档的不同部分应用不同的段落格式，其标记为。位于 DIV 标记符中的多段文本将被认为是一个节，可为它们设置一致的对齐格式。,28/69,CENT
6、ER 标记符,如果用户要将文档内容居中，还可使用 CENTER 标记符，方法为：将需居中的内容置于和之间。,29/69,演示DIV与CENTER,30/69,格式嵌套,（1）如果所设置的格式是相容的，则取格式叠加的效果。 （2）如果所设置的格式是冲突的，则取最近样式符的修饰效果。,31/69,演示格式嵌套,32,Part 3,设置列表格式,33/69,有序列表,有序列表（Ordered list）也称数字式列表，它是一种在表的各项前显示有数字或字母的缩排列表。,34/69,有序列表,定义有序列表需要使用有序列表标记符和列表项（List item）标记符（结束标记符可省略），语法如下：List
7、item 1List item 2 ,35/69,有序列表,OL 标记符最常用的属性type，用来设置数字序列样式。取值为：1、A、a、I、i。,36/69,演示有序列表,page32,37/69,演示有序列表的嵌套,38/69,无序列表,无序列表（Unordered list）也称强调式列表，它是一种在表的各项前显示有特殊项目符号的缩排列表。,39/69,无序列表,定义无序列表需要使用无序列表标记符和列表项（List item）标记符（结束标记符可省略），语法如下：List item 1List item 2 ,40/69,无序列表,UL 标记符最常用的属性type，用来设置项目符号样式。取
8、值为：disc、circle、square。 注意：在 IE 中，type 属性的取值是区分大小写的。,41/69,演示无序列表,42/69,演示混合嵌套列表,43,Part 3,使用超链接,44/69,超链接基础,URL（Universal Resources Locator）用于定位Web上的文档信息。一个 URL 包括 3 部分：协议、计算机地址、文件路径。 协议：/计算机/文件路径,45/69,超链接基础绝对URL,绝对URL是指资源的完整地址，包括URL的所有3个部分，即： 协议：/计算机/文档名,46/69,超链接基础相对URL,相对URL是指Internet上资源相对于当前页面的
9、地址，它包含从当前页面指向目标页面位置的路径。使用相对URL的好处：易于维护,47/69,超链接基础相对URL,使用相对URL时，经常使用两个与DOS类似的符号： 句点（.）表示当前目录 双重句点（）表示当前目录的上一级目录,48/69,超链接基础相对URL,49/69,不同类型的超链接,根据超链接的目标文件不同，分为： 网页之间的超链接 页面内的超链接 文件下载超链接 Email超链接 空超链接,50/69,不同类型的超链接,根据超链接源对象的不同，分为： 文本超链接 图像超链接（包括图像映射） 对象超链接（例如Flash、Java小程序）,51/69,不同类型的超链接,根据超链接实现方式的
10、不同，分为： HTML超链接 JavaScript超链接 对象超链接,52/69,创建超链接,A 标记符用于创建超链接（结束标记符不能省略），href 属性用于指定超链接的目标文件。 内部网页超链接：link外部网页超链接：link,53/69,演示超链接效果,54/69,创建超链接锚点链接,使用页面内的超链接，首先需要定义锚点，然后在超链接中指向该锚点。 定义锚点应使用指向锚点的超链接为：link,55/69,创建超链接锚点链接,指向其他页面内锚点的超链接：link blank link,56/69,演示锚点超链接效果,57/69,问题,在刚才的示例里，如果有另外一个同目录的网页文件 pag
11、e2.htm，在该网页中想访问示例页面中的“巫师”所在位置，应如何设置超链接？,58/69,创建超链接文件下载,当超链接目标为浏览器不能识别的文件格式时，那么就自动生成了文件下载链接。下载,59/69,演示文件下载效果,60/69,创建超链接Email链接,Email 控制命令： ?subject= 设置信件主题 ?cc= 设置抄送人 ?bcc= 设置密件抄送人 & 组合多个控制命令,61/69,演示Email链接效果,62/69,超链接的显示效果,超链接颜色 在BODY标记符中使用LINK 属性设置未被访问的链接的颜色；VLINK 设置已被访问过的链接的颜色；ALINK 设置活动链接（即当前
12、选定的链接）的颜色。 下划线效果 动态效果（悬停效果、鼠标指针形状、鼠标指针跟随效果）,63/69,演示超链接显示效果,64,Part 5,使用Dreamweaver开发网站,65/69,Dreamweaver的工作界面,66/69,演示定义本地站点,page237,67/69,演示编辑网页,Page203208,68,Part 6,作业1：纯文本网站,69/69,要求,主题自拟。注意考虑与大作业的关联。 至少5页。 导航结构要清楚。 每页都有返回主页的链接。 每页都有导航系统。 除主页外，每页都有Breadcrumb。 网站至少包含两个栏目。,70/69,Thats all for this chapter!,
