《HTML基础之文本与超链接课件》由会员分享，可在线阅读，更多相关《HTML基础之文本与超链接课件（64页珍藏版）》请在金锄头文库上搜索。
1、文本格式,文本与超链接,1,学习目标,掌握FONT标记符的用法，理解物理字符样式和逻辑字符样式。 掌握P、BR、Hn、HR标记符的用法，掌握设置段落对齐的方法。 掌握有序列表、无序列表和嵌套列表的构造方法。 理解超链接的基本概念，掌握A标记符的用法。,2/69,文本格式,文本分段 分段标记符：p 换行标记符：br 水平线标记符：hr 标题标记符：h 段落对齐 文本显示效果 列表 超链,文本格式,文本分段 文本显示效果 字体控制标记符：font 物理字符样式 逻辑字符样式 滚动字幕标记符：marquee 列表 超链,文本格式,文本分段 文本显示效果 列表 有序列表 无序列表 超链 相对地址与绝对
2、地址 页面链接 锚点链接 电子邮件链接,分段标记符：p,分段标记符用于将文档划分为段落，标记为 结束标记符可以省略，在下一个段落开始之前结束。 连续的多个等同于一个，不会产生多个段落。,换行标记符：br,仅一个单独的标记符 强制换行，不分段，仍属于同一个段落。,演示 p 和 br,第一段 第二段 请注意两段之间的距离。 第三段 在这里使用，第五段 请注意两段之间的距离，多个连续的分段标记符并没有起到分段的效果。,水平线标记符：hr,只有一个单独的标记符 在页面中添加一个水平线，用以上下分隔文档。 有以下属性 size：水平线的粗细，单位是像素 widh：水平线的长度，单位是像素，可以是浏览器窗
3、口宽度的百分比 noshade：不以加阴影的3D线形式显示 color：水平线的颜色,演示 hr, ,标题标记符：Hn, 标记符来标识文档中的标题和副标题，其中 n 是1至6的数字。 表示最大的标题，表示最小的标题。 浏览器自动改变文字的显示样式 注意：并非仅仅用于文字的样式显示，要切实作为文档的标题使用。,演示 Hn,此为一级标题 此为二级标题 此为三级标题 此为四级标题 此为五级标题 此为六级标题 此为正常文本,段落对齐,段落的水平对齐方式 align div和center 格式嵌套,align 属性,align属性用于设置段落的对齐格式，其值包括： right（右对齐） left（左对齐
4、） center（居中对齐） justif（两端对齐） align属性可应用于多种标记符，最典型的是应用于 p、Hn（标题标记符）、hr 等。,14/69,演示 align,第一段 默认为左对齐方式 第二段 align=center 第三段 align=right 请注意两行之间的距离。虽然换行了，但仍然是同一个段落。 第四段 align=justify,15/69,div 标记符,div标记符用于为文档分节，其标记为。 位于 div 标记符中的多段文本将被认为是一个节，可为它们设置一致的对齐格式。 span 标记符与div类似，仅用于具体文字的样式（不含对齐方式）。,16/69,演示 div
5、 和 span, 第一段 第二段span标记符控制的文本 第三段 ,CENTER 标记符,如果用户要将文档内容居中，还可使用 CENTER 标记符，方法为：将需居中的内容置于和之间。 改标记符已经过时，建议不使用。,18/69,格式嵌套,（1）如果所设置的格式是相容的，则取格式叠加的效果。 （2）如果所设置的格式是冲突的，则取最近样式符的修饰效果。,19/69,演示 格式嵌套,20/69, 三段使用div设置居中 第一段 第二段 设置左对齐 此为正常文本字体大小设为10 ,FONT标记符,FONT标记符具有3个常用的属性： SIZE 设置字体大小 COLOR 设置字体颜色 FACE 设置字体样
6、式 字体标记符的 color 属性可用来控制文字的颜色。,21/69,size属性,字号属性 size 的值可以从1到7，3是默认值。 可以用 + 号或 - 号来作为相对值指定。,22/69,演示 size 和color,23/69,此为正常文本 11113333 -2-2+2+2 55557777 8888 10 10 红色,face属性,Face 属性用来指定字体样式。 用户可以指定一个或几个字体名称（用逗号隔开）。 尽量使用第一个字体，如果系统没有该字体，尝试下一个。 默认中文字体是“宋体”，默认英文字体是“Times New Roman”。,24/69,演示 face,face属性,常
7、用物理字符样式,物理字符样式是指标记符本身说明了所修饰的效果。 常用物理字符样式标记符有： 黑体标记 斜体标记 下划线标记等。,26/69,演示 B、I、U,此为正常文本 加粗倾斜下划线 加粗且倾斜下划线,其他物理字符样式标记符,big大字体 small小字体 sub上标 sup下标 strike删除线,逻辑字符样式,逻辑字符样式是指标记符本身说明了所修饰效果的逻辑含义。 例如，ADDRESS标记符说明了“地址”这个含义，但并没有说明具体的效果。 地址样式,29/69,滚动字幕 marquee,marquee标记符之间的文本可以滚动 marquee标记符的属性 width和height： 字幕
8、滚动区域的宽和高 align：与周围对象的对齐方式 behavior：滚动方式 bgcolor：背景色 direction：滚动方向（水平） hspace和vspace：左右与上下的间隙 loop：滚动重复的次数，-1表示无限重复 scrollamount：滚动速度，步进的像素值 scrolldelay：两次文本重画之间的毫秒延时数,演示 marquee,此为正常文本 正常滚动文字 往返滚动文字，步进200像素，间隔1秒,有序列表,有序列表（Ordered list）也称数字式列表，它是一种在表的各项前显示有数字或字母的缩排列表。 定义有序列表需要使用有序列表标记符和列表项（List item
9、）标记符（结束标记符可省略），语法如下： List item 1 List item 2 ,32/69,有序列表,OL 标记符最常用的属性type，用来设置数字序列样式。取值为： 1：阿拉伯数字 A：大写字母 a：小写字母 I：大写罗马数字 i：小写罗马数字,33/69,演示 有序列表, 列表内容第一句 列表内容第二句 列表内容第三句 列表内容第四句 列表内容第五句 ,有序列表嵌套, 列表内容第一句 列表内容第二句 列表内容第三句 嵌套列表内容1 嵌套列表内容2 嵌套列表内容3 嵌套列表内容4 嵌套列表内容5 列表内容第四句 列表内容第五句 ,无序列表,无序列表（Unordered list）
10、也称强调式列表，它是一种在表的各项前显示有特殊项目符号的缩排列表。 定义无序列表需要使用无序列表标记符和列表项标记符，语法如下： List item 1 List item 2 ,36/69,无序列表,UL 标记符最常用的属性type，用来设置项目符号样式。取值为： disc：实心圆 circle：空心圆 square：矩形,37/69,演示 无序列表, 列表内容第一句 列表内容第二句 列表内容第三句 嵌套列表内容1 嵌套列表内容2 嵌套列表内容3 嵌套列表内容4 嵌套列表内容5 列表内容第四句 ,超链接基础,URL（Universal Resources Locator）用于定位Web上的文
11、档信息。 一个 URL 包括 3 部分：协议、计算机地址、文件路径。 协议：/计算机/文件路径,39/69,超链接基础绝对URL,绝对URL是指资源的完整地址，包括URL的所有3个部分，即： 协议：/计算机/文档名,40/69,超链接基础相对URL,相对URL是指Internet上资源相对于当前页面的地址，它包含从当前页面指向目标页面位置的路径。 使用相对URL的好处：易于维护,41/69,超链接基础相对URL,使用相对URL时，经常使用两个与DOS类似的符号： 句点（.）表示当前目录 双重句点（.）表示当前目录的上一级目录,42/69,超链接基础相对URL,43/69,不同类型的超链接,根据
12、超链接的目标文件不同，分为： 网页之间的超链接 页面内的超链接 文件下载超链接 Email超链接 空超链接,44/69,不同类型的超链接,根据超链接源对象的不同，分为： 文本超链接 图像超链接（包括图像映射） 对象超链接（例如Flash、Java小程序）,45/69,不同类型的超链接,根据超链接实现方式的不同，分为： HTML超链接 JavaScript超链接 对象超链接,46/69,创建超链接,A 标记符用于创建超链接（结束标记符不能省略），href 属性用于指定超链接的目标文件。 内部网页超链接： 链接 外部网页超链接： 链接,47/69,创建超链接锚点链接,使用页面内的超链接，首先需要定
13、义锚点，然后在超链接中指向该锚点。 定义锚点应使用 指向锚点的超链接为：link,48/69,创建超链接锚点链接,指向其他页面内锚点的超链接：link blank link,49/69,演示锚点超链接效果,50/69,问题,在刚才的示例里，如果有另外一个同目录的网页文件 page2.htm，在该网页中想访问示例页面中的“巫师”所在位置，应如何设置超链接？,51/69,创建超链接文件下载,当超链接目标为浏览器不能识别的文件格式时，那么就自动生成了文件下载链接。 下载,52/69,演示文件下载效果,53/69,创建超链接Email链接,Email 控制命令： ?subject= 设置信件主题 ?c
14、c= 设置抄送人 ?bcc= 设置密件抄送人 & 组合多个控制命令,54/69,演示Email链接效果,55/69,超链接的显示效果,超链接颜色 在BODY标记符中使用LINK 属性设置未被访问的链接的颜色；VLINK 设置已被访问过的链接的颜色；ALINK 设置活动链接（即当前选定的链接）的颜色。 下划线效果 动态效果（悬停效果、鼠标指针形状、鼠标指针跟随效果）,56/69,演示超链接显示效果,57/69,Part 5,使用Dreamweaver开发网站,58,Dreamweaver的工作界面,59/69,演示定义本地站点,page237,60/69,演示编辑网页,61/69,Page203208,Part 6,作业1：纯文本网站,62,要求,主题自拟。注意考虑与大作业的关联。 至少5页。 导航结构要清楚。 每页都有返回主页的链接。 每页都有导航系统。 除主页外，每页都有Breadcrumb。 网站至少包含两个栏目。,63/69,Thats all for this chapter!,64/69,
