IWPDT4北大青鸟网页设计基础教材.ppt

1,Internet和网页设计基础,样 式 表,4,2,课题目标,描述样式表 样式表的应用 在HTML中的使用 在F2K中的使用 脚本语言,3,样式表（CSS）,CSS（Cascading Style Sheets）：级联样式表 样式表：是用来扩展HTML在文字样式与版面编排上的多样化的一套标准 CSS的基本思想：将网页中的内容与样式设定分开,4,样式表的特点,减少图形文件的使用 使你的网页瘦身，加快下载速度 集中管理样式 方便网页样式的修改 共享样式 可以将样式表同网站上所有的页面连接，创建一个统一的，一致的页面风格 分类使用样式 可以在一个HTML网页文件上套用多个样式表，使得创建页面时有更大的灵活性,5,样式表的特点,6,建立样式表,一个样式表可以包含一个或多个规则 定义样式表的基本格式： 选择器样式规则 示例： H2Color：Blue; 2) BODY Background:Green;Color:Blue; Font-size:12pt;Font-family:宋体; ,7,选择器,选择器识别对应规则应用的元素 选择器的类别： HTML 选择器 类选择器 ID选择器 上下文选择器,8,HTML选择器,HTML选择器使用HTML元素的名称，唯一的不同的是没有括号 演示例1： Pfont-style:italic;font-weight:bold;color:blue,9,类选择器(Class Selector),类选择器：可以让不同的标记套用相同的样式 定义格式： 1) .类名样式规则 2) 标记名.类名样式规则 演示例2：,10,ID选择器(ID Selector),ID选择器使用HTML元素的ID属性 ID选择器与类选择器的作用相近 定义格式： #ID名称样式规则 演示例3：,11,上下文选择器,上下文选择器：是按照特定的情况，另外定义一套规则 定义格式： 上级标记名 下级标记名样式规则 演示例4：,12,标记样式的继承,标记样式的继承：括在里面的标记将拥有外部标记的样式属性 演示例5：,13,样式规则,字体样式 Font 字体综合设定 Font-family 设定字体 Font-size 设定字体大小 Font-style 设定斜体 Font-weight 设定字体粗细 演示例6：,14,样式规则（继）,文本样式 Letter-spacing 字符间距 Text-indent 段落缩排 Line-height 行高 Text-align 文本水平对齐 Vertical-align 文本垂直对齐,15,样式规则（继）,项目列表样式 List-style-type 项目符号样式 List-style-image 项目符号图案 List-style-position 项目符号位置,16,样式规则（继）,颜色与背景样式 Color 前景颜色 Background-color 背景颜色 Background-image 背景图案 Background-repeat 背景是否重复显示 Background-attachment 背景滚动或固定 Background-position 背景图案位置 演示例7:,17,样式规则（继）,版面配置样式 Margin 边缘距离 Padding 边框宽度 Border-width 边界填白 Left 元件与窗口左端距离 Top 元件与窗口顶端距离 Position 元件的绝对位置与相对位置 Z-index 垂直定位,18,样式表与HTML的结合,下面为几种可以联合样式表与HTML的方法 直接样式表 内嵌样式表 外部样式表 链接外部样式表 导入外部样式表,19,直接样式表,直接样式表：使用标记的STYLE属性 用于将样式表规则直接应用到不同的元素上 例如： 红色象征着热情 蓝色象征着澄静 ,20,内嵌样式表,内嵌样式表：使用STYLE标记 标记一般放在部分 样式规则放在标记之间 标记的属性：TYPE 该参数定义了Internet Media类型 例如： 选择器样式规则 ,21,链接外部样式表,链接外部样式表:使用LINK标记 外部样式表是一个单独的文档，以 .CSS 为扩展名 例如： 注：必须包含“REL=stylesheet”属性，否则浏览器不能装载样式表 演示例8：,22,导入外部样式表,导入外部样式表：使用 import 关键字 import 关键字必须定义在之间 import 必须是样式表中的第一项定义 例如： import “anotherstyle.css“; H1 color: blue;font-family: Arial ,23,FrontPage的用法,在FrontPage 2000中有以下几种方式使用样式表 将直接样式应用到网页的单个元素 在一个网页中创建一个嵌入式样式表 将外部样式表链接到网页 演示,24,脚本语言简介,从厂家分： VBScript JavaScript 从执行方式分： 客户端脚本 服务器端脚本,25,服务器端脚本,26,客户端脚本,27,为什么使用脚本？,对一个设计者来说，脚本和DHTML可以用来 改变样式- - 颜色，外形，其它元素 改变网页中实际的文本和图片 在页面周围移动物体 使页面生动 在网页中加入多种效果 通过事件处理器处理事件,28,动态服务器网页,动态服务器页面由“ .asp”文件扩展名表示 其优点是您可以创建动态的网页，但是返回到浏览器的是可以浏览的标准HTML文件 ASP文件可以包含标准HTML和脚本语言代码,29,动态服务器网页的浏览过程,如果考虑浏览过程，客户需要向服务器请求页面。服务器定位页面并且返回给客户 如果是一个标准的.htm文件，服务器从磁盘中读取文件并且送回给浏览器显示 如果是一个.asp文件，首先服务器执行在页面中嵌入的代码，然后返回页面显示 ASP的源脚本不能在浏览器中显示，因为服务器没有将它返回给浏览器,30,本课总结,样式表定义HTML文档的外观 选择器 HTML选择器 类选择器 ID选择器 上下文选择器 样式表与HTML的四种结合方法 FrontPage中样式表的用法 脚本语言简介,