HTML页面的文字布局与文字效果ppt课件

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,HTML,页面的文字布局与文字效果、清单的应用,HTML页面的文字布局与文字效果、清单的应用,回顾,HTTP,是什么协议,?,HTML,表示什么意思？,HTML,文档的保存格式是什么？,HTML,的基本结构由那几个标签组成，各个标签的作用,与表格相关的标签有哪些？以及他们各有那些属性？,回顾HTTP是什么协议?,本讲,目标,掌握,HTML,页面的文字布局,掌握,HTML,页面的各种字体效果,掌握滚动字符,理解清单的使用,本讲目标掌握HTML页面的文字布局,本讲任务,本讲任务,页面正文文字布局,输入标题,划分段落,标题,段落,页面正文文字布局 输入标题标题段落,输入标题,HTML,中也提供了相应的标题标记,，其中,n,为标题的等级。,HTML,提供,6,个等级的标题，,n,越小，标题的字号就越大。,一般情况下，浏览器对标题作如下解释：,h1,黑体，特大字体，居中，上下各有两行空行。,h2,黑体，大字体，上下各有一到两行空行。,h3,黑体，大字体，左端微缩进，上下空行。,h4,黑体，普通字体，比,h3,更多缩进，上边空一行。,h5,黑体，与,h4,相同缩进，上边空一行。,h6,黑体，与正文有相同缩进，上边空一行。,一般文章都有标题、副标题、章和节等结构，那在,HTML,中怎么操作一个标题呢,?,输入标题HTML中也提供了相应的标题标记，其中n为,标题属性,另外,可以有对齐属性，,align,#,#,表示：,left,标题居左；,center,标题居中；,right,标题居右,标题属性 另外可以有对齐属性，align#,Number 1,Number 2,Number 3,Number 4,Number 5,Number 6,看一下标题大小,h1,h6,Number 1/h,划分段落,标记对用来创建一个段落，在此标记对之间的文本按照段落的格式显示在浏览器上。,HTML,将多个空格以及回车等效为一个空格，,HTML,的分段完全依赖于分段标记。,一般用来显示从文本域输入的内容,因为输入的时候可能会换行等,.,标记用来创建一个回车换行,在文章的排版过程中，为是使版式的美观，段落与段落之间是有间隔的，在,HTML,怎么才能完成呢？,划分段落 标记对用来创建一个段落，在,小结,标题标签的表示方式？分几个等级,?,段落标签的表示方式？换行标签的表示方式？,漂亮的文章排版不仅仅只设置标题、段落，还需要对文章内容的修饰,小结标题标签的表示方式？分几个等级?,HTML,页的文字效果,在,HTML,文件里，一般都有大量的文本信息。如要主次分明、重点突出的显示这些信息，则需要在格式设定方面使用更多的标记和更详细的设置。,字体大小,字体风格,HTML页的文字效果 在HTML文件里，一般都有大量的文本信,字体大小,html,有七种字号，,1,号最小，,7,号最大。缺省字号为,3,设置文本的字号有两种办法,一种是设置绝对字号，,另一种是设置文本的相对字号；,用第二种方法时“”号表示字体变大，“”号表示字体变小,字体大小 html有七种字号，1号最小，7号最大。缺省字号为,字体风格,字体风格,物理风格,逻辑风格,直接指定字体,指定文本的作用,字体风格 字体风格物理风格逻辑风格直接指定字体指定文本的作用,物理风格,VS,逻辑风格,物理风格,黑体，,斜体，,下划线，,打字机体,逻辑风格,强调、,特别强调、,源代码、,例子、,键盘输入、,变量、,定义、,引用、,较小、,较大、,上标、,下标,物理风格VS逻辑风格物理风格,设置字体风格,设置字体风格,几种字体风格,设置字体风格,黑体,斜体,下划线,打字机风格,强调,加重,几种字体风格,字体颜色,字体的颜色用,指定，,#,可以是,6,位,16,进数，分别指定红、绿、蓝的值,也可以是,black,，,olive,，,teal,，,red,，,blue,，,maroon,，,navy,，,gray,，,lime,，,fudrsia,，,white,，,green,，,purple,，,sliver,，,yellow,，,aqua,之一,字体颜色 字体的颜色用指定，#可,水平线,(hr),水平线，一般用于分隔同一文体的不同部分起到美观的作用,在窗口中划一条水平线非常简单，只要写一个,即可,水平线(hr)水平线，一般用于分隔同一文体的不同部分起到,水平线标记,水平线标记,用来把页面分成几个部分,标记拥有以下属性,1,align=#,设定线条摆放位置,2,size=#,属性,3,width=#,属性设定线条长度,4,color=#,属性,left,；,right,；,center,以像素作单位，内定为,2,以像素作单位，可以是绝对或相对值，内定为,100%,设定线条颜色，内定为,黑色,水平线标记 水平线标记用来把页面分成几个部分 1a,水平线,实例,水平线实例,小结,字体风格分那几种？,字体颜色有那个属性控制？,水平线标签有什么用途,?,小结字体风格分那几种？,滚动字符,滚动字符，也称为滚动看板、滚动字幕,活动字幕的使用使得整个网页更有动感，显得很有生气。现在的网站中也越来越多地使用活动字幕来加强网页的互动性。,在,HTML,页中可以用,标记对实现文字的滚动,缺省值为从右至左不停移动,滚动字符 滚动字符，也称为滚动看板、滚动字幕 缺省值为从右至,滚动字符的属性,标记对中的各种属性来改变滚动字符的效果,可选的参数有：,align,：是设定活动字幕的位置，不过除了居左、居中、居右三种位置外，又增加靠上（,align=top,）和靠下（,align=bottom,）两种位置。,Bgcolor,：用于设定活动字幕的背景颜色，一般是十六进制数。,Direction(,方向,),：用于设定活动字幕的滚动方向是向左、向右、向上、向下。,Behavior,：用于设定滚动的方式，主要由三种方式：,behavior=,“,scroll,”,表示由一端滚动到另一端；,behavior=,“,slide,”,:,表示由一端快速滑动到另一端，且不再重复；,behavior=,“,alternate,”,表示在两端之间来回滚动。,Height,：用于设定滚动字幕的高度。,Width,：则设定滚动字幕的宽度。,Hspace,和,vspace,：分别用于设定滚动字幕的左右边框和上下边框的宽度。,Scrollamount,：用于设定活动字幕的滚动距离。,scrolldelay,：用于设定滚动两次之间的延迟时间。,Loop,：用于设定滚动的次数，当,loop=-1,表示一直滚动下去，直到页面更新,滚动字符的属性标记对中,移动文字小总节,基本语法,.,啦啦啦，我会移动耶！,#=scroll,slide,alternate,啦啦啦，我一圈一圈绕着走！,啦啦啦，我只走一次就歇了！,啦啦啦，我来回走耶！,循环,#=,次数；若未指定则循环不止,(infinite),啦啦啦，我只走,3,趟哟！,啦啦啦，我只走,3,趟哟！,啦啦啦，我只走,3,趟哟！,速度,啦啦啦，我走得好快哟！,移动文字小总节基本语法,清单,清单的功能在,WORD,里面叫做项目符号及编号,清单用于列举事实，常用的清单有,3,种格式,无序清单（,unordered List,）,有序清单（,ordered list,）,定义清单（,definition list,）,清单 清单的功能在WORD里面叫做项目符号及编号,1,无序清单,无序列表是一种,“,项目符号列表,”,。其中的项目都带有项目符号前缀。该列表包含在无序列表标记,.,内。列表中的每个项目都使用列表标记,进行标记，其中,LI,表示,List Item,（,列表项）。关闭标记,是可选的。,输出时每一清单条目缩进，并且以黑点标示,注意清单条目不需要结尾链接签,学习,HTML,星期一,星期二,星期三,星期四,星期五,1无序清单 无序列表是一种“项目符号列表”。其中的,2,有序清单,有序列表包含在,.,标记内。有序列表也显示列表项目。它与无序列表的区别在于有序列表项前面的编号是可设置的有序编号。,学习,HTML,星期一,星期二,星期三,星期四,星期五,2有序清单 有序列表包含在./OL,有序清单条目标记,有序清单条目标记的缺省值是阿拉伯数字，可以用,type,属性修改。方法为：,“,#,”,的取值有如下几种类型：,“,#,”,取值为,“,A,”,，显示大写字母。,“,#,”,取值为,“,a,”,，显示小写字母。,“,#,”,取值为,“,I,”,，显示大写罗马数字。,“,#,”,取值为,“,i,”,，显示小写罗马数字。,“,#,”,取值为,“,l,”,，缺省值，显示阿拉伯数字。,有序清单条目标记 有序清单条目标记的缺省值是阿拉伯数字，可以,有序清单的几种条目标记,有序清单的几种条目标记,3,定义清单,定义清单用于对清单条目进行简短说明。,用,开始，清单条目用,引导，它的说明用,引导,第一条：,定义清单,3定义清单 定义清单用于对清单条目进行简短说明。,小结,用什么标签实现文字的滚动？默认的方向是从什么到什么？,清单的三种类型,完成如右图所示的,HTML,代码,小结用什么标签实现文字的滚动？默认的方向是从什么到什么？,总结,HTML,页面标题用什么标签控制？,HTML,页面段落用什么标签控制？,HTML,中字体的控制用什么标签？列举出这个标签的,2,个属性,HTML,页面的滚动字符用什么标签控制,?,HTML,页面的三中清单类型,总结HTML页面标题用什么标签控制？,