IWPDT4网张设计基础教材课件

1、1课题目标描述样式表样式表的应用在HTML中的使用在F2K中的使用脚本语言第1页，共29页。2样式表（CSS）CSS（Cascading Style Sheets）：级联样式表样式表：是用来扩展HTML在文字样式与版面编排上的多样化的一套标准CSS的基本思想：将网页中的内容与样式设定分开第2页，共29页。3样式表的特点减少图形文件的使用使你的网页瘦身，加快下载速度集中管理样式方便网页样式的修改共享样式可以将样式表同网站上所有的页面连接，创建一个统一的，一致的页面风格分类使用样式可以在一个HTML网页文件上套用多个样式表，使得创建页面时有更大的灵活性第3页，共29页。4样式表的特点CSSHTML

2、文件HTML文件HTML文件图1：共享样式HTML文件CSSCSSCSS图2：分类使用样式第4页，共29页。5建立样式表一个样式表可以包含一个或多个规则定义样式表的基本格式：选择器样式规则示例：H2Color：Blue; 2) BODY Background:Green;Color:Blue; Font-size:12pt;Font-family:宋体; 第5页，共29页。6选择器选择器识别对应规则应用的元素选择器的类别：HTML 选择器类选择器ID选择器上下文选择器第6页，共29页。7HTML选择器HTML选择器使用HTML元素的名称，唯一的不同的是没有括号演示例1：Pfont-style:

3、italic;font-weight:bold;color:blue第7页，共29页。8类选择器(Class Selector)类选择器：可以让不同的标记套用相同的样式定义格式：1).类名样式规则2)标记名.类名样式规则演示例2：第8页，共29页。9ID选择器(ID Selector)ID选择器使用HTML元素的ID属性ID选择器与类选择器的作用相近定义格式：#ID名称样式规则演示例3：第9页，共29页。10上下文选择器上下文选择器：是按照特定的情况，另外定义一套规则定义格式：上级标记名 下级标记名样式规则演示例4：第10页，共29页。11标记样式的继承标记样式的继承：括在里面的标记将拥有外部

4、标记的样式属性演示例5：第11页，共29页。12样式规则字体样式Font 字体综合设定Font-family 设定字体Font-size 设定字体大小Font-style 设定斜体Font-weight 设定字体粗细演示例6：第12页，共29页。13样式规则（继）文本样式Letter-spacing 字符间距Text-indent 段落缩排Line-height 行高Text-align 文本水平对齐Vertical-align 文本垂直对齐第13页，共29页。14样式规则（继）项目列表样式List-style-type 项目符号样式List-style-image 项目符号图案List-st

5、yle-position 项目符号位置第14页，共29页。15样式规则（继）颜色与背景样式Color 前景颜色Background-color 背景颜色Background-image 背景图案Background-repeat背景是否重复显示Background-attachment背景滚动或固定Background-position背景图案位置演示例7:第15页，共29页。16样式规则（继）版面配置样式Margin边缘距离Padding 边框宽度Border-width 边界填白Left元件与窗口左端距离Top元件与窗口顶端距离Position 元件的绝对位置与相对位置Z-index垂直定

6、位第16页，共29页。17样式表与HTML的结合下面为几种可以联合样式表与HTML的方法直接样式表 内嵌样式表 外部样式表 链接外部样式表导入外部样式表第17页，共29页。18直接样式表直接样式表：使用标记的STYLE属性用于将样式表规则直接应用到不同的元素上例如：红色象征着热情蓝色象征着澄静第18页，共29页。19内嵌样式表内嵌样式表：使用STYLE标记标记一般放在部分样式规则放在.标记之间标记的属性：TYPE该参数定义了Internet Media类型例如：选择器样式规则第19页，共29页。20链接外部样式表链接外部样式表:使用LINK标记外部样式表是一个单独的文档，以 .CSS 为扩展名

7、例如：注：必须包含“REL=stylesheet”属性，否则浏览器不能装载样式表演示例8：第20页，共29页。21导入外部样式表导入外部样式表：使用 import 关键字import 关键字必须定义在之间import 必须是样式表中的第一项定义例如： import anotherstyle.css; H1 color: blue;font-family: Arial第21页，共29页。22FrontPage的用法在FrontPage 2000中有以下几种方式使用样式表将直接样式应用到网页的单个元素在一个网页中创建一个嵌入式样式表将外部样式表链接到网页演示第22页，共29页。23脚本语言简介从厂

8、家分：VBScriptJavaScript从执行方式分：客户端脚本服务器端脚本第23页，共29页。24服务器端脚本Web服务器CGI脚本Web客户机浏览器处 理数据输入第24页，共29页。25客户端脚本Web服务器CGI脚本动态服务器网页Web客户机浏览器Active XJavaScript处 理数据输入处 理第25页，共29页。26为什么使用脚本？对一个设计者来说，脚本和DHTML可以用来改变样式- - 颜色，外形，其它元素改变网页中实际的文本和图片在页面周围移动物体使页面生动在网页中加入多种效果通过事件处理器处理事件第26页，共29页。27动态服务器网页动态服务器页面由“ .asp”文件扩展名表示其优点是您可以创建动态的网页，但是返回到浏览器的是可以浏览的标准HTML文件ASP文件可以包含标准HTML和脚本语言代码第27页，共29页。28动态服务器网页的浏览过程如果考虑浏览过程，客户需要向服务器请求页面。服务器定位页面并且返回给客户如果是一个标准的.htm文件，服务器从磁盘中读取文件并且送回给浏览器显示如果是一个.asp文件，首先服务器执行在页面中嵌入的代码，然后返回页面