第2章文本格式课件

第二章文本与超链接文本与超链接（时间：（时间：（时间：（时间：2 2学时）学时）学时）学时）1学习目标学习目标n n掌握掌握FONTFONT标记符的用法，理解物理字符样标记符的用法，理解物理字符样式和逻辑字符样式。式和逻辑字符样式。n n掌握掌握P P、BRBR、HnHn、HRHR标记符的用法，掌握设标记符的用法，掌握设置段落对齐的方法。置段落对齐的方法。n n掌握有序列表、无序列表和嵌套列表的构掌握有序列表、无序列表和嵌套列表的构造方法。造方法。n n理解超链接的基本概念，掌握理解超链接的基本概念，掌握A A标记符的用标记符的用法。法。2Part 1设置字符格式设置字符格式3FONT标记符标记符n功能：设置网页中普通文字的显示效果。n格式：文字。n属性：face 表示文字的字体，如“黑体”表示黑体，“宋体”表示宋体。size表示字号，用来设定文字的大小，其值为17的整数，值越大，字越大；若数字前面加上“+”或“-”号，则表示相对基准字号的大小，如基准字号为3号，则+3表示6号字。color用来设定文字的颜色，颜色的取值是十六进制RGB颜色码或HTML语言给定的颜色常量名。4演示演示5FONT标记标记符符n n字体标记符 color 属性可用来控制文字的颜色，它的使用方法与正文标记符BODY中使用的 bgcolor 属性相同。6演示演示7FONT标记符标记符n nFace 属性用来指定字体样式。在编制网页时，通过在FONT标记符中指定 face 属性，用户可以指定一个或几个字体名称（用逗号隔开）。8演示演示9标题格式标记标题格式标记 n n 功能：用于定义文章内章节标题的显示格式。功能：用于定义文章内章节标题的显示格式。n n 格式：格式：标题内容标题内容/。n n 属性：属性：n n 表示标题字号的级别，可以是表示标题字号的级别，可以是1 16 6之间的之间的任意整数，数字越小，字号越大。任意整数，数字越小，字号越大。alignalign表示水平表示水平对齐方式，取值可以为对齐方式，取值可以为LEFTLEFT（左对齐）、（左对齐）、RIGHTRIGHT（右对齐）、（右对齐）、CENTERCENTER（居中对齐）、（居中对齐）、BOTTOMBOTTOM（位于（位于底端）和底端）和TOPTOP（位于顶部）。（位于顶部）。n n 说明：用该标记实现文章标题的效果有限，通常用说明：用该标记实现文章标题的效果有限，通常用FONTFONT标记实现文章标题丰富多彩的效果。标记实现文章标题丰富多彩的效果。10演示演示11常用物理字符样式常用物理字符样式n物理字符样式是指标记符本身说明了所修饰的效果。n常用物理字符样式标记符有：n n黑体标记n n斜体标记n n下划线标记等。12演示演示物理字符样式效果物理字符样式效果13常用逻辑字符样式常用逻辑字符样式n逻辑字符样式是指标记符本身说明了所修饰效果的逻辑含义。例如，ADDRESS标记符说明了“地址”这个含义，但并没有说明具体的效果。14演示演示逻辑字符样式效果逻辑字符样式效果15Part 2设置段落格式设置段落格式16段落格式段落格式n n功能：设置文章段落的开始和结束。浏览器在解释HTML文档时，会自动忽略文档中的回车、空格以及其他一些符号，所以在文档中输入回车，并不意味着在浏览器内将看到一个不同的段落，当需要在网页中插入新的段落时，可以使用段落标记，它可以起分段作用。n n格式：。n n属性：align是水平对齐方式，取值可以为left（左对齐）、right（右对齐）和center（居中对齐）。17强制换行标记强制换行标记n n功能：另起一行显示文字。n n格式：n n说明：这是一个单标记，与段落标记在显示效果上都是另起一行书写，但它们的不同之处是：段落标记的行距要宽。在使用上还有一定的技巧，如果把加在标记对的外边，将创建一个大的回车换行，即前边和后边文本的行与行之间的距离比较大，若放在的里边则前边和后边文本的行与行之间的距离将比较小。18演示演示与与19添加水平线添加水平线n n功能：在页面上画横线，可用于页面上内容的分割。功能：在页面上画横线，可用于页面上内容的分割。n n格式：格式：HR width=“value1”size=“value2”。n n属性：属性：widthwidth用来设置水平线的长度，用来设置水平线的长度，value1value1可以是可以是点数，如点数，如5050、100100、200200等；也可以是相对窗口的百分等；也可以是相对窗口的百分比，如比，如50%50%、100%,100%,默认是默认是100%100%。size size 用来设置水平用来设置水平线的粗细，线的粗细，value2value2的值可以是绝对点数，也可以是的值可以是绝对点数，也可以是（相对长度的）百分比，默认高度为（相对长度的）百分比，默认高度为1 1。alignalign用来设用来设置水平线的对齐方式，置水平线的对齐方式，value3value3的值可以是的值可以是LEFTLEFT（居左）（居左）、RIGHT(RIGHT(居右居右)、CENTERCENTER（居中），默认是居中。（居中），默认是居中。colorcolor用来设置水平线的颜色。用来设置水平线的颜色。noshadenoshade属性不用赋值，属性不用赋值，它表示加入一条没有阴影的水平线。它表示加入一条没有阴影的水平线。20演示演示水平线效果水平线效果21ALIGN 属性属性n nALIGN 属性用于设置段落的对齐格式，其值包括：RIGHT（右对齐）、LEFT（左对齐）、CENTER（居中对齐）n nALIGN 属性可应用于多种标记符，最典型的是应用于 P、Hn（标题标记符）、HR 等。22演示演示段落对齐段落对齐23DIV 标记标记符符n nDIV 标记符用于为文档分节，以便为文档的不同部分应用不同的段落格式，其标记为。位于 DIV 标记符中的多段文本将被认为是一个节，可为它们设置一致的对齐格式。24CENTER 标记标记符符n n如果用户要将文档内容居中，还可使用 CENTER 标记符，方法为：将需居中的内容置于和之间。25演示演示DIV与与CENTER26格式格式嵌套嵌套（1 1）如果所设置的格式是相容的，则取格式）如果所设置的格式是相容的，则取格式叠加的效果。叠加的效果。（2 2）如果所设置的格式是冲突的，则取最近）如果所设置的格式是冲突的，则取最近样式符的修饰效果。样式符的修饰效果。27演示演示格式嵌格式嵌套套28Part 3设置列表格式设置列表格式29有序列表有序列表n n有序列表有序列表（Ordered list）也称数字式也称数字式列表，它是一种在表的各项前显示有列表，它是一种在表的各项前显示有数字或字母的缩排列表。数字或字母的缩排列表。30有序列表有序列表n n定义有序列表需要使用有序列表标记定义有序列表需要使用有序列表标记符符和列表和列表项（项（List item）标记标记符符/（结束标记符可省结束标记符可省略），语法如下：略），语法如下：n nn n List item 1n n List item 2n n31有序列有序列表表 OL 标记符n n 属性type，用来设置数字序列样式。其值可以为1（阿拉伯数字）、A（大写英文字母）、a（小写英文字母）、I（大写罗马字母）、i（小写罗马字母）。n n 属性start 用于设置编号的开始值，默认值为1，标记设定该条目的编号，其后的条目将以此作起始数目逐渐递增。32演示演示有序列表有序列表33演示演示有序列表的嵌有序列表的嵌套套34无序列无序列表表n n无序列表（无序列表（Unordered list）也称强调也称强调式列表，它是一种在表的各项前显示式列表，它是一种在表的各项前显示有特殊项目符号的缩排列表。有特殊项目符号的缩排列表。35无序列表无序列表n n定义无序列表需要使用无序列表标记定义无序列表需要使用无序列表标记符符和列表和列表项（项（List item）标记符标记符（结束标记符可省略）结束标记符可省略），语法如下：，语法如下：n nn n List item 1n n List item 2n n36无序列无序列表表无序列表无序列表无序列表无序列表和和和和标记的属性标记的属性标记的属性标记的属性n ntype type type type 属性表示在每个项目前显示加重符号的类型，属性表示在每个项目前显示加重符号的类型，属性表示在每个项目前显示加重符号的类型，属性表示在每个项目前显示加重符号的类型，共有三种选择：共有三种选择：共有三种选择：共有三种选择：uutype=“disc”type=“disc”type=“disc”type=“disc”时，列表符号为时，列表符号为时，列表符号为时，列表符号为“”“”“”“”（实心圆），（实心圆），（实心圆），（实心圆），uutype=“circle”type=“circle”type=“circle”type=“circle”时，列表符号为时，列表符号为时，列表符号为时，列表符号为“”“”“”“”（空心圆），（空心圆），（空心圆），（空心圆），uutype=“square”type=“square”type=“square”type=“square”时，列表符号为时，列表符号为时，列表符号为时，列表符号为“”“”“”“”（实心方块）（实心方块）（实心方块）（实心方块）uu和和和和标记都可以定义标记都可以定义标记都可以定义标记都可以定义typetypetypetype参数，使得在一个列参数，使得在一个列参数，使得在一个列参数，使得在一个列表中，不同的列表项目可以用不同的列表符号，但一表中，不同的列表项目可以用不同的列表符号，但一表中，不同的列表项目可以用不同的列表符号，但一表中，不同的列表项目可以用不同的列表符号，但一般情况下不要这样设置。般情况下不要这样设置。般情况下不要这样设置。般情况下不要这样设置。37演示演示无序列表无序列表38演示演示混合嵌套列表混合嵌套列表39Part 3使用超链接40超链接基础超链接基础n超链接是网页制作中最关键的内容，超链接把页面一个个链接起来，使得网页的浏览非常方便。n统一资源定位器：URL（UniversalResourcesLocator）用于定位Web上的文档信息。n一个URL包括3部分：协议、计算机地址、文件路径。n协议：/计算机/文件路径41超链接基础超链接基础绝对绝对URLn n绝对URL是指资源的完整地址，包括URL的所有3个部分，即：n n协议：/计算机/文档名42超链接基础超链接基础相对相对URLn n相对URL是指Internet上资源相对于当前页面的地址，它包含从当前页面指向目标页面位置的路径。n n在web设计中使用相对URL有利于网页的维护43不同类型的超链接不同类型的超链接n根据超链接的目标文件不同，分为：n n网页之间的超链接n n页面内的超链接n n文件下载超链接n nEmail超链接n n空超链接44不同类型的超链接不同类型的超链接n根据超链接源对象的不同，分为：n n文本超链接n n图像超链接（包括图像映射）n n对象超链接（例如Flash、Java小程序）45不同类型的超链接不同类型的超链接n根据超链接实现方式的不同，分为：根据超链接实现方式的不同，分为：nHTML超链接超链接n nJavaScript超链接超链接n n对象超链接对象超链接46创建超链接创建超链接n n功能：建立超链接。功能：建立超链接。n n格式：格式：A”显示的文本或图像显示的文本或图像。n n属性：属性：n nhrefhref：设置要链接到的目标文件的：设置要链接到的目标文件的URLURL地址。地址。n ntargettarget：指出要显示超链接文档内容的窗口名，默认时在：指出要显示超链接文档内容的窗口名，默认时在当前窗口中显示。当前窗口中显示。window-namewindow-name：显示超链接内容的窗口：显示超链接内容的窗口名，如果该窗口不存在，则表示打开一个新窗口。名，如果该窗口不存在，则表示打开一个新窗口。47演示演示超链接效果超链接效果48创建超链接创建超链接锚点链接锚点链接n n使用页面内的超链接，首先需要定义锚点，然后在超链接中指向该锚点。n定义锚点n指向锚点的超链接：link49创建超链接创建超链接不同页面锚点链接不同页面锚点链接n指向指向其他页面内其他页面内锚点的超链接：锚点的超链接：定义锚点：超链接：超链接：a linklink50演示演示锚点超链接效果锚点超链接效果51问题问题n n在刚才的示例里，如果有另外一个同目录的网页文件 page2.htm，在该网页中想访问示例页面中的“巫师”所在位置，应如何设置超链接？n n答案52创建超链接创建超链接文件下载文件下载n n当超链接目标为浏览器不能识别的文当超链接目标为浏览器不能识别的文件格式时，那么就自动生成了文件下件格式时，那么就自动生成了文件下载链接。载链接。n n下载下载53创建超链接创建超链接Email链接链接n nEmailn n控制命令：控制命令：n n?subject=?subject=设置信件主题设置信件主题设置信件主题设置信件主题n n?cc=?cc=设置抄送人设置抄送人设置抄送人设置抄送人n n?bcc=?bcc=设置密件抄送人设置密件抄送人设置密件抄送人设置密件抄送人n n&组合多个控制命令组合多个控制命令组合多个控制命令组合多个控制命令54演示演示Email链接效果链接效果55小结小结 通过本通过本节节的学习，能够掌握的学习，能够掌握超链接标记超链接标记A的的实际运用，并能灵活运用实际运用，并能灵活运用A标记标记来进行来进行超级超级链接的设置链接的设置。56Part 4作业作业1：教材习题：教材习题1-5作业作业2：建设纯文本网站：建设纯文本网站57要求要求n n主题自拟。注意考虑与大作业的关联。主题自拟。注意考虑与大作业的关联。n n至少至少5页。页。n n导航结构要清楚。导航结构要清楚。n n每页都有返回主页的链接。每页都有返回主页的链接。n n每页都有导航系统。每页都有导航系统。n n除主页外，每页都有导航栏。除主页外，每页都有导航栏。n n网站至少包含两个栏目。网站至少包含两个栏目。58