1、第1章 HTML基础目标-2-了解Web发展史及HTML特点 掌握HTML文档结构的组成 掌握HTML的语法结构 掌握文本标签的使用 掌握分隔标签的使用 掌握各种列表标签的使用 掌握各种超链接的使用 掌握图像标签的使用Web概述 Web的任务就是向人们提供多媒体网络信息服务。从技术层面看,Web技术主要有三点:p 超文本传输协议(HTTP)p 统一资源定位符(URL)p 超文本标签语言(HTML)-3-HTTP超文本传输协议 (HTTP,HyperText Transfer Protocol)HTTP是客户端浏览器或其他程序与Web服务器之间的应用层通信协议,用以实现客户端和服务器端的信息传输
2、。-4-URL 统一资源定位符 (URL,Uniform/Universal Resource Locator)URL用于完整的描述Internet上网页和其他资源的地址,是实现互联网信息定位的统一标识。URL主要由三部分组成:协议类型、存放资源的域名或主机IP地址和资源文件名,语法格式如下:p protocol(协议):指定使用的传输协议,最常用的是HTTP协议p hostname(主机名):是指存放资源的服务器的域名或IP地址;p port(端口号):为可选项,省略时使用默认端口,如HTTP协议的默认端口是80;p path(路径):由零或多个“/”符号隔开的字符串,一般用来表示主机上的一
3、个目录或文件地址;p parameters(参数):为可选项,可以用于指定特殊参数;p query(查询):为可选项,用于给动态网页传递参数,可以有多个参数,用“&”符号隔开,每个参数的名和值用“=”符号隔开;p fragment:字符串,用于指定网络资源中的片断。例如,一个网页中有多个名词解释,可使用fragment直接定位到某一名词解释。-5-protocol:/hostname:port/path/;parameters?query#fragment HTML超文本标签语言 (HTML,HyperText Mark-up Language)HTML语言,是目前网络上应用最为广泛的语言,也
4、是构成网页文档的主要语言,其特点如下:p 简易性p 可扩展性 p 平台无关性-6-HTML文档结构-1 HTML部分 p HTML文档以标签开始,标签结束。p HTML文档的所有内容都在上述两个标签之间。p 语法格式如下:HEAD部分p HEAD部分以标签开始,标签结束。p HTML的HEAD部分用于对页面中使用的字符集、标签的样式、窗口的标题、脚本语言等进行说明和设置。p 语法格式如下:-7-.页面的标题部分.HTML文档结构-2 BODY部分 p BODY部分以标签开始,标签结束。p BODY部分是HTML文档的主体,包含了绝大部分需要呈现给浏览者浏览的内容,如段落、列表、图像和其它元素等
5、HTML页面元素,都通过一些标准的HTML标签来描述。p 语法格式如下:HTML部分、HEAD部分和BODY部分框架图:-8-HTML的主体部分示例:1.1 HelloHTML.html HTML语法 标签 p HTML通过标签控制文档的内容和外观,可以将标签看作是HTML的命令。标签特点:p HTML标签以一对尖括号作为开始“”,以“”表示该HTML命令的结束,例如,。p 标签必须是闭合的。闭合就是标签的最后要有一个“/”,来表示结束,但不一定成对出现,例如单独出现,表示换行。p 标签的大小写无关。HTML语言中不区分大小写。属性p HTML属性一般都出现在标签中。作为HTML标签的一部分,
6、HTML属性包含了标签所需的额外的信息。p 语法格式如下:注释p 当用浏览器查看HTML文档时,注释不显示在页面上,语法如下:-9-HTML虽然不区分大小写,但虽然不区分大小写,但为保持内容的一致性和可读性,为保持内容的一致性和可读性,推荐使用小写推荐使用小写 内容内容属性的值需要在双引号中,属性的值需要在双引号中,属性名和属性值成对出现。属性名和属性值成对出现。虽然虽然HTML中的属性值不用双中的属性值不用双引号仍然可以解析,但出于编引号仍然可以解析,但出于编码规范的要求,在添加属性时,码规范的要求,在添加属性时,值通常都放在双引号中。值通常都放在双引号中。meta标签 meta标签 p m
7、eta标签作为子标签只出现在网页的head标签内,可为HTML文档提供额外的信息。该标签属性分为两组:p name与content:用于描述网页,它以名称/值的形式表示,其名称通过name属性表示,其值为所要描述的内容,通过content属性表示。p http-equiv与content:http-equiv属性用于提供HTTP协议的响应报文头(MIME文档头),它是以名称/值的形式表示。其值为所要描述的内容,而内容的值则通过content属性表示。meta标签的属性如右表所示:示例:1.3 MetaEG.html 属性属性名名值值说明说明namedescription用于描述。使用conte
8、nt属性提供网页的简短描述keywords用于定义网页关键词。使用content属性提供网页的关键词robots用于定义网页搜索引擎索引方式。使用content属性描述网页搜索引擎索引方式http-equivcontent-type用于定义用户的浏览器或相关设备如何显示将要加载的数据,或者如何处理将要加载的数据。例如,其中charset=UTF-8用于设定网页的编码方式为UTF-8refresh用于刷新与跳转(重定向)页面。使用content属性表示刷新或跳转的开始时间与跳转的网址expires用于网页缓存过期时间。使用content属性表示页面缓存的过期时间。一旦网页过期,将从服务器上重新下
9、载新页面pragma与no-cache用于定义页面缓存。使用content属性的no-cache值表示是否缓存网页-10-文本标签 标题标签p HTML语言中的标题字体用表示。p 其语法格式如下:示例:1.4 BiaoTiEG.html 字体标签p 字体标签是HTML语言中很重要的一个标签,通过设置标签的属性face、size和color,可以让文本显示出不同的字体风格、大小及颜色。p 语法格式如下:示例:1.5 WenBenEG.html 1.6 FontEG.html-11-内容“#”代表了标题的字体大小,代表了标题的字体大小,#的取值的取值为为1到到6之间的整数之间的整数 align属性
10、用于设置标题的对齐方式,该属性用于设置标题的对齐方式,该属性取值可以为属性取值可以为left(左对齐)、(左对齐)、center(居中)或(居中)或right(右对齐)。(右对齐)。内容face属性用于控制文字显示的格式,属性用于控制文字显示的格式,size属性用于指定文字显示大小属性用于指定文字显示大小,color属性用于指定字体显示颜色属性用于指定字体显示颜色 分隔标签 文字分隔标签 p 强制换行标签 p 强制分段标签 分割线标签 p 分割线标签 可以在网页上产生一条水平的分割线,将大量的内容区分开,增加了网页的层次性。标签属性示例:1.7 FenGeEG.html 属性属性说明说明wid
11、th用于设置的宽度单位为像素(px),也可以使用百分比(占屏幕的百分比)来设定size设置的厚度color设置的显示颜色align分割线的对齐方式,其设定值有三个,也就是置左align=left、置中align=center、置右align=rightnoshade设置的阴影,如果不要阴影只要将noshade加入即可-12-列表标签-1 列表分为四类:p 无序列表()p 有序列表()p 定义列表()p 嵌套列表 无序列表 p 无序列表又称符号列表,列表中的项目可以以任何顺序进行排列。p 无序列表使用一组标签,标签中含有多组标签对。示例:1.8 UlEG.html 有序列表 p 有序列表又称为编
12、号列表,列表中的项目是按照先后顺序排列的。p 有序列表使用一组标签,标签中含有多组标签对。示例:1.9 OlEG.html-13-列表标签-2 定义列表 p 定义列表将列表中的项目与其定义或描述配对显示 p 定义列表标签dl同样是成对出现的,以开始,结束,而列表中的每个项目的标题使用标签修饰,其后跟随标签,该标签用以对标题进行描述。示例:1.10 DlEG.html 嵌套列表p 一个列表中可以包含另一个完整的列表。p 多个有序列表或无序列表组合在一起使用的列表p 在使用嵌套列表时,嵌套列表必须和一个特定的列表项相联系,即嵌套列表通常包含在某个列表项中,用以反映该嵌套列表和该列表项之间的联系。示
13、例:1.11 NestlEG.html-14-超级链接 常见的超链接形式如下:p 文字超链接:在文字上建立超链接。p 图像超链接:在图像上建立超链接。p 热区超链接:在图像的指定区域上建立超链接。超链接标签p HTML语言中超链接的标签用表示,标签是成对出现的,以开始,结束。p 语法格式如下:target属性的取值方式 值值说明说明_self在当前窗口中打开目标文件,这是target的默认值_blank在新窗口中打开目标文件_top在顶层框架中打开网页_parent在当前框架中的上一层框架打开网页-15-互联网的精髓就在于相互链接,即超链接(hyperlink)。一个网站的各个网页都是通过超链
14、接来衔接起来的内容 绝对路径和相对路径绝对路径p 绝对路径就是指完整的路径。相对路径p 相对路径是指从一个文件到另一个文件所经过的路径。以下图的方式说明相对路径p 从1.html到4.html,期间需要经过B2文件夹,所以其相对路径就是B2/4.html。p 从1.html到2.html,不需要经过任何文件夹,所以它的相对路径是2.html。p 从2.html到3.html,经过B1和C文件夹,所以它的相对路径是B1/C/3.html。-16-站内链接通常是使用相对路径,当然也站内链接通常是使用相对路径,当然也可以使用绝对路径,但是当网站的目录可以使用绝对路径,但是当网站的目录有所调整的时候,
15、绝对路径可能就会出有所调整的时候,绝对路径可能就会出现问题现问题 站内、站外链接 站内链接 p 网站内部网页之间的链接 示例:1.12 hrefZhanNeiEG.html 站外链接 p 当网站中的链接需要链接到站外的网页时,就需要用到站外链接 示例:1.13 hrefZhanWaiEG.html -17-内容内容 邮件连接、锚链接 邮件链接p 可用于发送邮件示例:1.14 hrefEmailEG.html 锚链接 p 用于网页内容的快速定位 示例:1.15 hrefMaoEG.html -18-内容 无论是链接到当前网页还无论是链接到当前网页还是其他网页的锚链接,锚是其他网页的锚链接,锚点名
16、称前的点名称前的“#”不能省略不能省略内容图像 图像p 在HTML中使用标签把图像文件插入到文档中 p 图像标签几个重要属性如下表:示例:1.16 imgEG.html 属性说明alt浏览器如果没有载入图片的功能,浏览器就会转而显示alt属性的值align设置图片的垂直(居上、居中、居下)对齐方式和水平对齐方式(居左、居中、居右)height设置图片的高度,缺省则显示图片原始高度width设置图片的宽度,缺省则显示图片原始宽度-19-小结-20-超文本传输协议(HTTP,HyperText Transfer Protocol)是客户端浏览器或其他程序与Web服务器之间的应用层通信协议,用以实现
17、客户端和服务器端的信息传输统一资源定位符(URL,Uniform/Universal Resource Locator)是用于完整地描述Internet上网页和其他资源的地址的一种标识方法,实现互联网信息的定位统一标识超文本标签语言(HTML,HyperText Mark-up Language),即HTML语言,是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言一个基本的HTML文档由HTML、HEAD和BODY三部分组成HTML标签由ASCII字符来定义,用于控制页面内容(文字、表格、图片、用户自定义内容等)的显示标签是HTML语言中最基本的单位,也是HTML语言最重要的组成部分H
18、TML分隔标签用于区分文字段落。HTML分隔标签分为文字分隔标签和分割线标签两类HTML语言中列表分为无序列表()、有序列表()、定义列表()和嵌套列表四类互联网的精髓就在于相互链接,即超链接(hyperlink)常见的超链接形式有文字超链接、图像超链接和热区超链接三种链接地址有绝对路径和相对路径两种方式第2章 表格、表单和框架目标-22-掌握表格标签的结构组成及使用 掌握表格常用属性的设置 了解表格的嵌套 掌握表格的使用技巧 掌握表单的基本结构组成 掌握常用表单域的使用 掌握常用表单按钮的使用 掌握框架的结构组成及使用表格 表格标签的基本结构:p 标签来创建表格,标签内包含了表名和表格本身内
19、容的代码。p 表示行,行由若干单元格构成。p 标签定义了一个单元格,嵌套于标签之中。p 多个单元格结合在一起构成了行,多个行结合在一起就构成了一个表格。示例:2.1 TableEG1.html -23-表格是网页制作中使用最多的技术之一。表格可以清晰直观的展现数据之间的关系。单元格内容单元格内容表格相关标签 HTML中有10个与表格相关的标签p 标签:定义一个表格。p 标签:定义一个表格标题,必须紧随table标签之后,且每个表格只能包含一个标题,通常这个标题会居中显示于表格上部。p 标签:定义表格内的表头单元格。th元素内部的文本通常会呈现为粗体。p 标签:在表格中定义一行。p 标签:定义表
20、格中的一个单元格,包含在标签中。p 标签:定义表格的表头。p 标签:定义一段表格主体(正文),使用标签,可以将表格中的一行或几行合成一组,从而将表格分为几个单独的部分,一个标签就是表格中的一个独立的部分,不能从一个跨越到另一个中。p 标签:定义表格的页脚(脚注)。p 标签:定义表格中针对一个或多个列的属性值。只能在表格或colgroup标签中使用此标签。p 标签:定义表格列的分组。通过此标签可以对列进行组合以便进行格式化,此标签只能用在标签内部。标签来创建表格,标签内包含了表名和表格本身内容的代码 示例:2.2 TableEG2.html -24-表格属性使用表格属性可以设置表格的外观示例:2
21、.3 TableEG3.html 表格属性说明border设置表格边框bgcolor设置表格背景颜色background设置表格背景图片width表格的宽度,单位用像素或百分比height表格的高度,单位用像素或百分比align对齐方式,有left(左对齐)、right(右对齐)和center(居中对齐)cellspacing设置单元格之间的距离cellpadding设置单元格内的内容与边框的距离colspan单元格水平合并,值为合并的单元格的数目rowspan单元格垂直合并,值为合并的单元格的数目-25-表单 表单由三部分组成:p 表单标签p 表单域p 表单按钮 示例:2-4 FormEG.
22、html-26-HTML表单(Form)是HTML的一个重要部分,主要用于采集和提交用户输入的信息。表单标签表单标签p 表单标签()用于声明表单,定义采集数据的范围,同时包含了处理表单数据的应用程序以及数据提交到服务器的方法。action:指定处理表单中用户输入数据的URL method:指定向服务器传递数据的HTTP方法,主要有Get和Post两种方法,默认值是Getenctype:指定了数据发送时的编码类型 target:用于指定在浏览器中哪个frame中显示服务器的响应HTML-27-.文本框和多行文本框文本框 p 文本框是一种用来输入内容的表单对象,通常被用来填写简单的内容,如姓名、地
23、址等。p 语法格式如下:多行文本框 p 多行文本框(文本域)是一种用来输入较长内容的表单对象。p 语法格式如下:-28-密码框和隐藏框密码框p 密码框是一种用于输入密码的特殊文本域。当访问者输入文字时,文字会被星号或其它符号代替,从而隐藏输入的真实文字。p 语法格式如下:隐藏域 p 隐藏域是用来收集或发送信息的不可见元素,网页的访问者无法看到隐藏域,但是当表单被提交时,隐藏域的内容同样会被提交。p 语法格式如下:-29-复选框和单选框复选框 p 复选框允许在待选项中选中一个以上的选项。每个复选框都是一个独立的元素。p 语法格式如下:单选框 p 单选框只允许访问者在待选项中选择唯一的一项。该控件
24、用于一组相互排斥的值,组中每个单选按钮控件的名字相同,用户一次只能选择一个选项。p 语法格式如下:-30-文件上传框、下拉选择框文件上传框 p 文件上传框用于让用户上传自己的文件,文件上传框与其他文本域类似,但它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。p 语法格式如下:下拉选择框 p 下拉选择框可以让浏览者快速、方便、正确的选择一些选项,同时可以节省页面空间,它通过标签实现,该标签用于显示可供用户选择的下拉列表。p 语法格式如下:-31-.表单按钮表单按钮主要分为:提交按钮、复位按钮和普通按钮提交按钮 p 提交按钮用来将输入的表单信息提交
25、到服务器。复位按钮 p 复位按钮用来重置表单。普通按钮 p 普通按钮通常用来响应javascript事件(如onclick),用来调用相应的javascript函数来实现各种功能。综合案例:2.5 register.html-32-框架框架优点如下:p 重载页面时不需要重载整个页面,只需要重载页面中的一个框架页,从而减少了数据的传输,加快了网页下载速度。p 方便制作导航栏。示例:-33-标题 框架(Frame)就是浏览器窗口的一个区域,在这个区域中可以显示一个单独的页面,而不影响另一个框架中的显示内容。框架结构基本结构 p 通过标签来定义如何划分框架,通过设置的“cols/rows”属性来确定
26、的列/行数以及所占窗口的比例。p 而每个引入的页面通过框架标签定义,的src属性用于设置所引用网页的路径。frameset常用属性属性名说明cols用“象素数”或百分比分割左右窗口,其中“*”表示剩余部分rows用“象素数”或百分比分割上下窗口,其中“*”表示剩余部分frameborder设置框架的边框,其值只有0和1。0表示没有边框,1表示显示边框。边框是无法调整粗细的framespacing表示框架与框架间的空白距离-34-cols和和rows中值的个数对中值的个数对应要分割的应要分割的的个的个数,即有几个值就有几个数,即有几个值就有几个。使用框架 混合框架p 可根据设计需要,混合使用和标
27、签设置区域相互独立的复杂页面。示例:2.7 HunHeFrame.html 导航框架 p 导航框架(导航栏)是在网页框架的中加入name属性,表示该的名称,然后通过超链接来标识URL,并用target指定的名称。示例:2.8 NavFrameEG.html 内联框架 p 内联框架的本质是在一个页面中嵌入一个框架窗口来显示另一个页面的内容。内联框架使用标签来定义。示例:2.9 NeiLianFrameEG.html-35-小结-36-表格是HTML的高级控件之一。表格可以清晰明了的展现数据之间的关系,便于对比分析HTML中与表格有关的10个标签是:、表单由表单标签、表单域、表单按钮组成创建表单最
28、关键的是掌握三个要素即表单控件、action属性和method属性向服务器传递数据的HTTP方法,主要有Get和Post两种方法,默认值是Get表单域包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等,用于采集用户输入或选择的数据表单按钮主要分为三类:提交按钮、重置按钮和普通按钮使用框架可以把浏览器窗口划分成多个相互独立的区域HTML框架既可以横向分割也可以纵向分割使用框架技术可以方便的实现页面导航功能第3章 CSS样式目标-38-了解CSS的特点及优势 掌握CSS的基本语法及样式规则 掌握类选择器和ID选择器的定义方式 掌握CSS选择符的组合定义 掌握CSS的
29、继承特性 掌握样式表的引用方式及优先级 掌握伪类及伪对象的使用方式 掌握CSS样式中常用的属性设置CSS的概念 CSS(Cascading Style Sheets,层叠样式表)-39-单纯使用HTML在排版和界面效果上具有局限性CSS解决了网页界面排版的难题 HTML的标签:定义网页的内容CSS:网页内容如何显示 样式规则 样式规则p 样式表由样式规则组成,这些规则用于定义文档的样式,即告诉浏览器如何显示文档。p 样式规则由三个部分构成:选择符(selector),属性(properties)和属性的取值(value)。l selector是选择符,最普通的选择符就是HTML标签的名称。l
30、property1、property2和propertyN为属性名;l value是为对应属性名指定的值;l 每对属性名/属性值后一般要跟一个分号(括号内只有一对名/值的情况除外)示例:3.1 CSSBaseEG1.html-40-selector property1:value;property2:value;.propertyN:value;选择符 选择符用于指定需要修饰的元素 常用的选择符主要有三类 HTML选择符 ID选择符 类选择符-41-HTML选择符 HTML选择符 p 使用HTML标签作为选择符,指定页面中此类元素的样式p 任何HTML标签都可以作为选择符-42-P text-
31、indent:3em Table border:1px solid red标签的样式 标签的样式 类选择符 类选择符 p 使用类选择符,可以把相同的元素分类定义为不同的样式 示例:3.2 ClassCssEG1.htmlp 也可以不指定HTML元素,直接用“.”加上类名称,这样可以使不同的元素共享同样的样式,提高了代码的灵活度和复用度 示例:3.3 ClassCssEG2.html -43-selector.classnameproperty1:value;.classnameproperty1:value;.ID选择符 ID选择符 p 通过ID选择符为某个单一元素定义单独的样式 示例:3.4
32、 CSSBaseEG2.html -44-#IDName property1:value;.IDName指定元素的ID 组合选择符 选择符的组合 p 当有多个选择符需要设置相同的属性和属性值时,可以用逗号将选择符隔开进行组合定义,即一次性设置多个选择符的属性和属性值,这样可以减少样式重复定义示例:3.5 SelectorGroupEG.html p 包含选择符是另外一种形式的组合定义-45-selector1,selector2,.property1:value;.table a font-size:12pxtable 和 a之间没有通过逗号隔开,该样式定义的是:在表格内的链接的文字大小为12
33、象素,而表格外的链接的文字仍为默认大小 样式表的继承 样式表的继承是指内部元素自动具有外部元素的样式示例:3.6 inherEG.html -46-ABCD 元素为元素的内部元素,所以文字“ABCD”将使用上规定的样式。当内部元素与外部元素的统一样式不一致时,将采用内部样式使用样式表-1 CSS的使用方式有以下几种:p 内嵌样式(Inline Style)p 内部样式表(Internal Style Sheet)p 外部样式表(External Style Sheet)内嵌样式p 内嵌样式是指将CSS语句混合在HTML标签中使用的方式,CSS语句只对其所在的标签有效,内嵌样式通过所在标签的st
34、yle属性声明 p 示例代码如下:-47-CSS样式 使用样式表-2 内部样式表 p 内部样式表是指在HTML的标签中声明样式的方式。内部样式表通过标签声明,只对所在的网页有效示例:3.1 CSSBaseEG1.html 外部样式表 p 外部样式表是指将CSS样式表保存成一个独立的文件,然后将该文件引用到网页中的方式。样式表文件名采用后缀“css”示例:3.7 EsscssEG.html 样式表引入的优先级p 当在同一个网页中同时使用多种方式引入CSS样式时,样式采用的优先级从高到低依次是内嵌内部外部浏览器缺省-48-这种方式适合于多个网页需要引用大量相同的CSS样式的情况。伪类伪类p 伪类通
35、过在原有的样式选择符后添加伪类名称来定义 selector :选择符 pseudo-class :伪类名称 例如:表示元素在鼠标经过时使用的样式-49-selector:pseudo-class property1:value;.伪类用于指定元素在某种状态下的样式a:hover color:red 使用伪类锚标签的伪类 p 锚标签有四种状态的伪类,分别为未被访问前、鼠标悬停时、被用户激活时(鼠标已点击但未释放)、被访问过后。示例:3.8 PseudoClassEG.html 结合类选择符 p 将锚伪类和类选择符结合使用,可以在同一个页面做出多组不同的链接效果示例:3.9 PseudoAndCl
36、assEG.html伪类名说明link设置对象在未被访问前的样式hover设置对象在其鼠标悬停时的样式active设置对象在被用户激活(在鼠标点击与释放之间)时的样式visited设置对象在其链接地址已被访问过时的样式-50-伪对象伪对象p 与伪类的方式类似,伪对象通过对插入到文档中的虚构元素进行触发从而实现设定的样式首行伪对象 p 首行伪对象(first-line)设置对象内的第一行的样式 示例:代码3-10 FirstLineEG.html 首字母伪对象 p 首字母伪对象(first-letter)设置对象内第一个字母的样式示例:代码3-11 FirstLetterEG.html-51-s
37、elector:first-line property:value.selector:first-letter property:value.伪对象用于设置元素某一部分的样式CSS文本样式属性文本属性 p 文本属性主要用于块标签中文本的样式设置,常用的属性有缩进、对齐方式、行高、文字和字母间隔、文本转换和文本修饰等。示例:3.12 TextCssEG.html 文本属性文本属性功能功能取值方式取值方式text-indent实现文本的缩进长度(length):可以用绝对单位(cm,mm,in,pt,pc)或者相对单位(em,ex,px);百分比(%):相对于父标签宽度的百分比text-align
38、设置文本的对齐方式left:左对齐;center:居中对齐;right:右对齐;justify:两端对齐line-height设置行高数字或百分比,具体可参考文本缩进的取值方式word-spacing文字间隔,用来修改段落中文字之间的距离缺省值为0。word-spacing的值可以为负数。当word-spacing的值为正数时,文字之间的间隔会增大,反之,word-spacing的值为负数时,文字间距就会减少letter-spacing字母间隔,控制字母或字符之间的间隔取值同文字间隔类似text-transform文本转换,主要是对文本中字母大小写的转换uppercase:将整个文本变为大写;
39、lowercase:将整个文本变为小写;capitalize:将整个文本的每个文字的首字母大写text-decoration文本修饰,修饰强调段落中一些主要的文字none、underline(下划线)、overline(上划线)、line-through(删除线)和blink(闪烁)-52-CSS文字样式属性文字属性 p CSS中通过一系列的文字属性来设置网页中文字的显示效果,主要包括文字字体、文字加粗、字号、文字样式。示例:3.13 FontCssEG.html 文字属性功能取值方式font-family设置文字字体文字字体取值可以为:宋体、ncursive、fantasy、serif等多种
40、字体font-weight文字加粗normal:正常字体;bold:粗体;bolder:特粗体;lighter:细体font-size文字字号absolute-size:根据对象字体进行调节;relative-size:相对于父对像中字体尺寸进行相对调节;length:百分比。由浮点数字和单位标识符组成的长度值,不可为负值。其百分比取值是基于父标签中字体的尺寸font-style文字样式normal:正常的字体;italic:斜体;oblique:倾斜的字体-53-CSS背景样式属性背景属性 p CSS中通过一系列的文字属性来设置网页中文字的显示效果,主要包括文字字体、文字加粗、字号、文字样式
41、。示例:3.14 BackGroundEG.html背景属性背景属性功能功能取值方式取值方式background-color设置对象的背景颜色属性的值为有效的色彩数值background-image设置背景图片可以通过为url指定值来设定绝对或相对路径指定网页的背景图像background-repeat背景重复,设置一个指定的背景图象如何被重复repeat:背景图像平铺(有横向和纵向两种取值:repeat-x:图象横向重复;repeat-y:图象纵向重复);norepeat:背景图像不平铺background-attachment背景附加,设置指定的背景图像是跟随内容滚动,还是固定不动scro
42、ll:背景图像是随内容滚动;fixed:背景图像固定即内容滚动图像不动background-position背景位置,确定背景的水平和垂直位置左对齐(left)、右对齐(right)、顶部(top)、底部(bottom)和值(自定义背景的起点位置,可对背景的位置做出精确的控制)background该属性是复合属性即上面几个属性的随意组合,它用于设定对象的背景样式该属性的取值实际上对应上面几个具体属性的取值-54-CSS定位样式属性定位属性 定位属性主要从定位方式、层叠顺序、与父标签的相对位置等三个方面来设置。示例:3.15 PositionCssEG.html 定位属性定位属性功能功能取值方式
43、取值方式position定位方式,设置对象的是否定位,以及定位的方式static:无特殊定位;relative:对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置;absolute:将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位z-index设置对象的层叠顺序auto:遵循其父对象的定位;自定义数值:无单位的整数值,可为负值top、right、bottom、left父对象的相对位置auto:无特殊定位,自定义数值:由浮点数字和单位标识符组成的长度值,或者百分数。必须定义position属性值为absolute或者
44、relative此取值方可生效-55-如果两个绝对定位对象的z-index具有同样的值,那么将依据它们在HTML文档中声明的顺序来决定其层叠顺序。CSS边框样式属性 边框属性 p边框属性用来设置对象边框的颜色、样式和宽度。边框颜色 p用于设定边框的颜色(border-color)。p颜色的设置有4个参数,根据赋值个数的不同,会有以下几种情况:如果在设定颜色时提供四个颜色参数,将按上右下左的顺序作用于四个边框。如果只提供一个颜色参数,则应用于四个边框。如果提供两个参数,第一个用于上、下边框,第二个用于左、右边框。如果提供三个参数,第一个用于上边框,第二个用于左、右边框,第三个用于下边框。边框样式
45、 p用于设定边框的样式(border-style)。边框样式同样有4个参数,赋值方式与边框颜色相同。-56-CSS样式属性-6 边框宽度 p用于设定边框的宽度(border-width),宽度的取值为关键字或自定义的数值。p边框宽度同样有四个参数需要赋值,赋值方式与边框颜色相同 示例:3.16 PositionCssEG2.html 综合示例:网上书店系统中后台管理部分的图书管理页面 -57-小结-58-CSS样式表能实现内容与样式的分离,方便团队开发样式表的规则由选择器和属性设置组成选择器可以是类选择器、ID选择器和HTML选择器可以用逗号将选择符隔开进行组合定义,以便同时设置多个选择符的属
46、性和属性值CSS的继承是指被包在内部的标签将拥有外部标签的样式性质当样式表继承遇到冲突时,总是以最后定义的样式为准在页面内使用CSS时可以采用内嵌样式表、内部样式表或外部样式表三种方式当在同一个网页中同时使用多种方式引入CSS样式时,样式采用的优先级从高到低依次是内嵌内部外部浏览器缺省锚标签有四种状态的伪类:link、hover、active、visited伪对象通过对插入到文档中的虚构元素进行触发从而实现设定的样式常用的CSS样式属性有:文本属性、文字属性、背景属性、定位属性、边框属性等常用的设置文字样式的属性有font-size、font-family、font-style、text-al
47、ign等常用的设置背景及颜色的属性有background、background-image、background-color等第4章 页面布局目标-60-了解层的概念及应用 熟练使用标签 掌握表格布局技术及优缺点 掌握框架布局及其优缺点 熟练使用Dreamweaver来创建框架 熟练使用Dreamweaver设置框架属性并保存框架 掌握DIV+CSS布局技术DIV层 DIV层p 标签的主要作用是用于设定文字、图片、表格等的摆放位置 p 当把文字,图片等放在标签中时,该标签被称为“DIV块”或“DIV元素”或“DIV层”。p 使用CSS和DIV可以很好的解决图像或文字定位的难题,通过DIV和CS
48、S结合使用,网页设计人员可以精确的设定内容的位置,还可以将定位的内容上下叠放。示例:4.1 DivEG.html-61-标签也称为区隔标签,为HTML文档内大块(block-level)的内容提供结构和背景的设置。如果单独使用标签,而不加任何CSS样式修饰,那么它在网页中的效果和使用段落标签的效果是相同的 页面布局页面布局一般分为以下几种:p 表格布局p 框架布局 p DIV+CSS布局-62-页面布局,就是将网页中的各个版块有效组织并放置在合适的位置。表格布局和DIV+CSS布局是目前最常用的布局方式表格布局表格布局 p 表格在网页中更多的是用于网页的布局,其优势在于可以有效地定位网页中不同
49、的元素,结构清晰。p Dreamweaver CS6提供了“布局”模式。在“布局”模式中,可以使用表格作为基础布局结构来设计网页。表格布局有以下原则:p 不要把整个网页当成一个大表格,尽可能使用多个表格进行分块。p 使用嵌套表格。p 表格的边框设置。表格布局步骤:1.使用布局视图;2.绘制布局表格;3.绘制布局单元格;4.设置单元格属性;5.预览网页。示例:4.2 通过Dreamweaver CS6演示表格布局的实现过程-63-框架布局框架布局p框架是另一种常用的网页布局排版工具。p框架结构就是把浏览器窗口划分为多个区域,每个区域都可以分别显示不同的网页。p使用框架最常见的用途就是导航,在使用
50、了框架以后,用户的浏览器不需要为每个页面重新加载与导航相关的图。框架布局步骤:1.建立框架;2.设置框架模板;3.设置框架的属性;4.保存框架;5.设置嵌套框架属性。示例:4.3 通过Dreamweaver CS6演示框架布局的实现过程-64-DIV+CSS布局-1DIV+CSS布局p使用DIV+CSS布局,可先不考虑外观,首先需要将页面内容的语义或结构确定下来。p使用DIV+CSS布局,外观不是最重要的,一个结构良好的HTML页面可以通过CSS以任意外观表现出来。p引入CSS布局的目的就是为了实现真正意义上的结构和外观的分离,这也是DIV+CSS布局最大的特色。-65-DIV+CSS布局-2