第2章页面布局与文字设计.ppt

《第2章页面布局与文字设计.ppt》由会员分享，可在线阅读，更多相关《第2章页面布局与文字设计.ppt（20页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、教学目的教学目的:1 1掌握使用页面属性控制标记掌握使用页面属性控制标记;2 2掌握文本格式化标记学会灵活应用掌握文本格式化标记学会灵活应用;3.3.掌握文字移动标记掌握文字移动标记;第二章第二章 页面布局与文字设计页面布局与文字设计教学重难点教学重难点:页面属性控制标记的设置页面属性控制标记的设置.(.(重点重点)文字移动文字移动(难点难点)任务一、文档主体任务一、文档主体 body属性的设置属性的设置1.1.在在BODYBODY标记中可以确定整个文档的背景色、前标记中可以确定整个文档的背景色、前景色等基本属性。景色等基本属性。2.2.语法语法:说明说明:bgcolorbgcolor-页面背

2、景色彩页面背景色彩 text-text-普通文字的色彩普通文字的色彩 link-link-可链接文字的色彩可链接文字的色彩 alinkalink-正被点击的可链接文字的色彩正被点击的可链接文字的色彩 vlinkvlink-访问过的可链接文字的色彩访问过的可链接文字的色彩 background-background-背景图象背景图象,后面是一个图象地址后面是一个图象地址 bgpropertiesbgproperties=“fixedfixed”-固定背景图片固定背景图片任务二、任务二、文字的基本属性文字的基本属性1.1.文件题头属性文件题头属性:title和和/title之间的部分，就是这一个之

3、间的部分，就是这一个HTMLHTML文档的总标题，它一般出现在文档的总标题，它一般出现在 head标记标记中。文件标题一般会显示在浏览器最上面的标中。文件标题一般会显示在浏览器最上面的标题栏的位置题栏的位置.2.2.标题标题(hnhn)标题元素有标题元素有6 6种，分别为种，分别为h1,h2,h1,h2,h6h6，用于表示用于表示文章中的各种标题。标题号越小，字体越大文章中的各种标题。标题号越小，字体越大.其中其中hnhn可以有对齐属性，可以有对齐属性，alignalign#，#表示表示 left left 标题居左标题居左 center center 标题居中标题居中 right right

4、 标题居右标题居右例如：例如：h2 align=center标题标题2 2的文字的文字/h23.3.分段标记分段标记 p htmlhtml的浏览器是基于窗口的，用户可以的浏览器是基于窗口的，用户可以随时改变显示区的大小，所以随时改变显示区的大小，所以htmlhtml将多个将多个空格以及回车等效为一个空格，这是和绝空格以及回车等效为一个空格，这是和绝大多文字处理器不同的。大多文字处理器不同的。htmlhtml的分段完全的分段完全依赖于分段元素依赖于分段元素,p,也可以有多种属也可以有多种属性，比较常用的是：性，比较常用的是：align=#,#align=#,#可以是可以是left,center,

5、right.left,center,right.如如:pparagraphyparagraphy one paragraph one paragraph two two 4.4.换行标记换行标记 是一个单标记，这个标记用来标识一个换行动是一个单标记，这个标记用来标识一个换行动作。在作。在HTMLHTML文件中可以用它来调整行间距。文件中可以用它来调整行间距。5.5.预格式化标记预格式化标记 pre 作用：令文字按照原代码的方式显示。作用：令文字按照原代码的方式显示。这个标记允许保留你在原代码中输入的空白和回车。这个标记允许保留你在原代码中输入的空白和回车。6.6.字体标记字体标记 font(1

6、)(1)字体大小字体大小 用用 font size=#指定。指定。HTMLHTML有有7 7种字号，种字号，1 1最小，最小，7 7最大。缺省值为最大。缺省值为3 3号。号。例如：例如：Today is fine!font size=7Today is fine!(2)(2)字体颜色字体颜色 用用 font color=#指定。其中，指定。其中，#参数值可是参数值可是 是用英文描述的颜色如是用英文描述的颜色如“REDRED”，”BLUEBLUE”，也可以是十六制进值。也可以是十六制进值。(3)(3)字形字形 用用 font face=#指定。指定。7.7.字体风格字体风格分为：物理风格和逻辑风

7、格。分为：物理风格和逻辑风格。物理风格直接指定字体，物理风格直接指定字体，b有黑体，有黑体，i斜体，斜体，u下划线。下划线。逻辑风格指定文本的作用，如：逻辑风格指定文本的作用，如：突突出显示，它并不指明怎样突出法，而让浏览器自出显示，它并不指明怎样突出法，而让浏览器自行决定，大多数浏览器就把它处理为斜体。行决定，大多数浏览器就把它处理为斜体。strong重点突出显示重点突出显示8.8.字体闪烁字体闪烁 blink文本文本/blink 使文本闪烁，闪烁频率为使文本闪烁，闪烁频率为 1 1秒钟一次。秒钟一次。IEIE浏览器并不支持，浏览器并不支持，NetscapeNetscape浏览器支浏览器支持

8、。持。9.9.居中标记居中标记 center 很多标记都有对齐方式属性，如很多标记都有对齐方式属性，如,H,等。也可以等。也可以直接用居中链接签直接用居中链接签 center.例如：例如：center This must be my dream.This must be my dream.10.10.水平线标记水平线标记 HR语法语法:作用作用:这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分。属性说明：属性说明：size:水平线的宽度;width :水平线的长，用占屏幕宽度的百分比或象素值来表示;align :水平线的对齐方式，有left,right,center三个值 nosh

9、ade:线段无阴影属性，为实心线段11.11.清单标记清单标记 无序清单无序清单 清单项目清单项目1 1 清单项目清单项目2 2/说明说明:的参数设定的参数设定:type=“disc/circle/square”有序清单有序清单 清单项目清单项目1 1 清单项目清单项目2 2 /说明说明:的参数设定的参数设定:设定数目款式设定开始数目 定义清单定义清单 dl 是一种分两层的项目清单是一种分两层的项目清单,用用 dl开始，用清单条开始，用清单条目目 引导引导,用用 说明说明.dl Item1Item1 The definition of item 1The definition of item

10、1 Item2Item2 The definition of item 2The definition of item 2任务三、文字移动标记任务三、文字移动标记(marquee)marquee)用文字编排各种web页面时，有时难免会有一些需要强调的部分，此时设置一些文字的动态效果会起到强调突出文本的作用。在HTML页面设置文字的移动，必须在浏览器中才能显示。文字移动所包含的主要内容有：文字移动方向的设置文字移动方向的设置 marquee direction=“”文字文字/marquee 其中direction的属性值取“left”、“right”还有up和down四个值，分别对应将中间的字体

11、向左右、上下移动。文字移动方式的设置文字移动方式的设置 marquee behavior=“”其中的behavior属性值取“scroll”、“slide”、“alternate”三个值，分别对应将中间的字体循环移动、只移动一次、在屏幕中间左右移动。文字移动循环的设置文字移动循环的设置 marquee loop=“”其中的LOOP属性值是取一个数值，表示将中间的字体循环移动的次数。文字移动速度与延时的设置文字移动速度与延时的设置=“”其中的scrollamount属性值是取数字值，对应将中间的字体循环移动的速度。数值越大，表示速度越快。=“”其中的scrolldelay属性值是取数字值，对应将

12、中间的字体循环移动的延时。如:啦啦啦，我走一步，停一停！文字移动底色的设置文字移动底色的设置 =“”其中的height属性值是取数字值，这个属性控制了文字移动面积的高度；width属性的属性值是取数字值，这个属性控制了文字移动面积的宽度；bgcolor属性的属性值可以取RGB值，或者用预定义值，它控制了移动文字的背景颜色。本章小结本章小结:本章主要讲解了页面的基本属性本章主要讲解了页面的基本属性,详细介绍详细介绍文档的基本属性的设置文档的基本属性的设置,最后重点介绍了文字移最后重点介绍了文字移动标记动标记.作业作业:上机操作标题上机操作标题,文字属性文字属性,并插入水平线标记并插入水平线标记,最后创建文字移动最后创建文字移动.