网页设计PPT.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,今日主题,CSS,简介,CSS,语法,CSS,应用,CSS,版本,CSS1,作为一项,W3C,推荐，,CSS1,发布于,1996,年,12,月,17,日。,1999,年,1,月,11,日，此推荐被重新修订。,CSS2,作为一项,W3C,推荐，,CSS2,发布于,1999,年,1,月,11,日。,CSS2,添加了对媒介（打印机和听觉设备）和可下载字体的支持。,CSS3,CSS3,计划将,CSS,划分为更小的模块。,CSS,简介,CSS-,层叠样式表,样式表可描述文档如何被显示、发音或打印。,CSS,是一种向网页添加样式的机制。,CSS,样式表（,Cascading Style Sheets,，简称,CSS,），又称为层叠式样式表，由,W3C,（,World Wide Web Consortium,）组织开发的。,CSS,样式是预先定义的一个格式的集合，包括字体、大小、颜色、对齐方式等。利用,CSS,样式可以使整个站点的风格保持一致，是网页设计中用途最广泛、功能最强大的元素之一。,CSS,简介,2.CSS,语法,CSS,概念-,Cascading Style Sheet,层叠样式表,CSS-P-Cascading Style Sheet-Position,CSS,的功能,在几乎所有的浏览器上都可使用,以前通过图片转换实现的功能，现在通过,CSS,可以实现,使网页字体变得更漂亮，更容易编排,可以轻松控制网页布局,可以将许多网页风格同时更新,CSS,定义,selectorproperty:value;property:value,CSS,定义,selectorproperty:value;property:value,Selector,分为三种形式：,（,1,）,HTML Selector:,等,（,2,）,class,Selector,：,a,相关,class,Selector,tag.classnameproperty:value,td.fancy color:#f60;background:#666;,b,独立,class Selector,.classnameproperty:value,.center text-align:center,This paragraph will also be center-aligned.,(3)ID Selector:,#red color:red;#green color:green;,这个段落是红色。,这个段落是绿色。,(1)嵌入式样式表,（2）行内样式表,(3),外部样式表,P.doubleline-Height:2,P.centertext-align:center,p.greentextcolor:green,在,Dreamweaver8,可以定义以下的样式类型：,自定义,CSS,规则：指根据用户的需要创建一个,CSS,样式属性，可应用到文字，图片等网页元素中。,HTML,标签规则：可以对,HTML,语言中的某一标签进行重新定义。,CSS,选择器样式（高级样式）：重新定义特定元素组合的格式设置，或重新定义,CSS,允许的其他选择器的格式设置，还可以重新定义包含特定,id,属性的标签的格式设置。,CSS样式的,应用,单击菜单栏中“窗口”,|“CSS,样式”命令或用组合键,Shift+F11,键打开,CSS,样式面板，如图所示。,“全部”模式 “正在”模式,CSS样式面板,CSS,样式面板有“全部”和“正在”两种模式。,“全部”模式：显示两个窗格：“所有规则”窗格（上部）和“属性”窗格（下部）。,“正在”模式：显示三个窗格：显示文档中当前所选内容的,CSS,属性的“所选内容的摘要”窗格，显示所选属性的位置的“规则”窗格，以及,CSS,属性的“属性”窗格。,面板中主要功能按钮如下：,：表示附加或链接外部样式表。,：新建样式表。,：编辑选中的样式表。,：删除选中的样式表,CSS样式面板,9.2 使用CSS样式,9.2.1,创建,CSS,样式,9.2.2,附加外部,CSS,样式,9.2.3,应用,CSS,样式,9.2.4,编辑,CSS,样式,9.2.5,删除,CSS,样式,（一）创建样式表文件,1,单击菜单栏中“文件”,|“,新建”命令，打开新建文档对话框。,2,在对话框左侧“类别”中选择“,CSS,样式表”类别，在中间“,CSS,样式表”栏选择需要的样式，右侧是样式表预览图。,3,点击“创建”按钮，新建了一个,CSS,样式表文件，如图所示。,编辑样式表后，单击菜单栏中“文件”,|“,保存”命令，则可以保存一个外部的样式表文件。,创建CSS样式,（二）在,CSS,样式面板中创建,CSS,样式表文件,1,在,CSS,样式面板中，单击“新建”按钮，打开“新建,CSS,规则”对话框，如图。,2,设置选择器类型为“类”，名字为,.dazi,，定义在“新建样式表文件”，单击“确定”按钮，打开“保存样式表文件”对话框。,创建CSS样式,3,保存样式表文件，同时打开“,.dazi,的,CSS,规则定义的对话框，,如图所示,。,4,在“类型”选项中，设置字体字号等项目，完成后单击“确定”按钮，新建的样式出现在样式面板中，如图所示。,创建CSS样式,1,打开,CSS,样式表面板。,2,执行以下操作之一：,单击,CSS,面板底部的“附加样式表”按钮,或者右键单击,CSS,样式面板，在弹出的快捷菜单中选择“附加样式表”命令。,3,打开“链接外部样式表”对话框，如图所示。,附加外部CSS样式,4,点击“浏览”按扭，选择要添加的样式文件。添加的形式有两种：,“,链接”：网页与样式表文件的关系是链接关系，而且不将样式表的信息导入网页中。,“,导入”：将外部样式表文件的信息导入到当前网页文档中。,5,单击“确定”按钮。这样外部的,CSS,样式就会链接或导入到当前文档中。,附加外部CSS样式,1,首先要打开需要链接,CSS,样式的文档，选中文字或图片等网页元素。,2,执行以下操作之一：,在属性检查器中的“样式”下拉列表中选择编辑好的样式，如选择“,dazi”,，如图所示。,在,CSS,样式面板中，右击要应用的样式名称（如,.dazi,），在弹出的快捷菜单中选择“套用”。,3,所选的文字应用了,CSS,样式。,4,取消样式的应用，只需在选择己应用样式的文本，在“属性检查器”中的“样式”下拉列表中选择“无”即可。,应用CSS样式,在,CSS,样式面板中选择要编辑的样式名称，然后点击面板下方的 按钮，会弹出“,CSS,规则定义”对话框，在对话框中可以对,CSS,样式重新编辑。,删除,CSS,样式,在,CSS,样式面板中选择要删除的,CSS,样式名称，点击 按钮，就可以删除掉,CSS,样式。,编辑CSS样式,“类型”类别主要用于定义文本属性，具体为：,1,字体：设置字体或字体组。,2,大小：选择或键入字体的大小，单位可以选择“像素（,px,）”、“点数（,pt,）”等。,3,粗细：设置字体的粗细程度。,4,样式：选择文本的字体格式有正常、斜体和偏斜体三种，偏斜体是指文本为倾斜的字体格式。,类型,CSS样式设置,5,变量：设置文字变形的字体格式。此项在,Dreawmeaver8,文档窗口中不显示，,Internet Explorer6.0,版本以上显示，,Netscape Navigator,不支持。,6,行高：设置文本的行间距。有两个选项：正常：自动设置文本间行的高度；（值）：设置文本之间的行距的具体数值。,7,大小写：设置字体的大小写方式。,8,修饰：选择需要的复选框，给文字添加修饰。,9,颜色：设置文字的颜色。,类型,在“,CSS,规则定义”对话框中选择“背景”类别，如图。,背景,1,背景颜色：设置背景颜色。,2,背景图像：设置背景图像，通过后面的“浏览”按钮可以选择一个图像作为背景。,3,重复：表示背景图像的填充方式，有四个选项：,“,不重复”：图像不重复，只是应用,CSS,样式的网页元素前面显示一次。,“,重复”：图像会在水平和垂直方向重复。,“,水平重复”：背景图像在水平方向上重复。,“,纵向重复”：背景图像在垂直方向上重复,4,附件：在下拉菜单中选择背景图像的显示方式。,5,“水平位置”和“垂直位置”：设置背景图像相对于元素的初始位置。,背景,在“,CSS,规则定义”对话框中选择“区块”类别，如图。,区块,1,单词间距：选择或设置单词间的间距。,2,字母间距：选择或设置字母间的间距。,3,重直对齐：设置元素在垂直位置上的对齐方式。,4,文本对齐：设置文本的对齐方式。,5,文字缩进：文本框中输入具体数值，精确设置文本的首行缩进的大小。,6,空格：设置文本处理空格的方式。“正常”收缩空白；“保留”即保留所有空白，包括空格、制表符和回车；“不换行”指当用户强行换行时才换行，否则不会自动换行。,7,显示：设置是否显示及如何显示元素。,区块,在“,CSS,规则定义”对话框中选择“方框（又称盒子）”类别，如图。,方框,1,宽和高：设置元素的宽度和高度。宽和高定义的对象多为图片，表格，层等。,2,浮动：设置元素的浮动位置。如选择左对齐，则将元素放置到左页面的空白处。,3,清除：设置元素的哪一边允许分层。如左对齐：表示不允许分层出现在元素的左侧。,4,填充：设置元素内容与元素边框之间的间距。取消选择“全部相同”选项可设置元素各个边填充的具体数值。,5,边界：设置元素边界和其他元素间距。,方框,在“,CSS,规则定义”对话框中选择“边框”类别，如图。,1,样式：设置边框的外观样式。取消选择“全部相同”选项，可分别设置各边框样式。,2,宽度：设置元素边框的粗细。,3,颜色：设置边框的颜色。,边框,可以定义列表的属性，在“,CSS,规则定义”对话框中选择“列表”类别，如图。,列表,1,类型：设置项目符号或编号的外观。如可以选择圆点、方块、数字、罗马数字等。,2,项目符号图像：可以为项目符号指定图像。,3,位置：设置列表项文本是否换行和缩进以及文本是否换行到左边距。有二个选项：,“,内”：当列表项超出范围后会自动换行，将显示在旁边的空白上，不进行任何缩进。,“,外”：当列表项超出范围后会自动换行，以缩进方式显示。,列表,在“,CSS,规则定义”对话框中选择“定位”类别，如图。,定位,1,类型：在下拉列表中选择定位层的方式。,2,显示：确定层的初始显示条件。如果不指定可见性属性，则默认情况为显示。,3,Z,轴：设置,Z,轴层的堆叠顺序。,3,溢位：确定在层的内容超出层的宽度和高度时的处理方式。,4,置入：设置层的位置和大小。,5,裁切：定义层的可见部分。,定位,在“,CSS,规则定义”对话框中选择“扩展”类别，如图。,扩展,1,分页：打印时在样式所控制的对象之前或者之后强行分页。,2,光标：在下拉列表中，选择光标显示属性设置。当指针位于样式所控制的对象上时光标指针图像会发生改变。光标属性的相关说明见表。,扩展,属性,说明,属性,说明,Auto,自动改变样式,Crosshair,精确定位,+,Default,默认指针,Hand,手形,Move,移动,e-resize,箭头朝右方,ne-resize,箭头朝右上方,nw-resize,箭头朝左上方,n-resize,箭头朝上方,se-resize,箭头朝右下方,sw-resize,箭头朝左下方,s-resize,箭头朝下方,w-resize,箭头朝左方,text,文本,I,形,Wait,等待,help,帮助,34,3,CSS,滤镜：又称过滤器，可以为网页中的元素添加各种效果。主要滤镜及说明见表,扩展,滤镜,说明,滤镜,说明,Alpha,透明的渐进效果,Gray,彩色图片变灰度图,BlendTrans,淡入淡出效果,Invert,底片效果,Blur,风吹模糊的效果,Light,模拟光源效果,Chroma,指定颜色透明,Mask,矩形遮罩效果,DropShadow,阴影效果,RevealTrans,动态效果,FlipH,水平翻转,Shadow,轮廓阴影效果,FlipV,垂直翻转,Wave,波浪扭曲变形效果,Glow,边缘光晕效果,Xray,X,光照片效果,35,改变鼠标的形状是应用,扩展,类别中的光标属性来设置的，操作为：,1,新建一个网页插入一幅图像并保存网页。,2,在,CSS,样式面板中，单击 按钮，打开“新建,CSS,规则”对话框，如图所示。,3,输入,CSS,样式的名称“,.shubiao”,，“选择器类型”选择“类”选项，“定义在”选择“仅对该文档”。,改变鼠标形状,4,点击“确定”，打开“,.shubiao,的,CSS,规则定义”对话框，切换到“扩展”分类，如图。,改变鼠标形状,5,在“视觉效果”的“光标”的下拉列表中选择“,help”,，单击“确定”按钮，样式建立完成。,6,选中图像，执行以下操作之一：,在,CSS,面板中，右击,.shubiao,样式，在弹出的快捷菜单中选择“套用”命令。,在“属性检查器”的“类”的下拉列表中选择“,shubiao”,。,7,保存网页，在浏览器中鼠标指向图像测试效果。,改变鼠标形状,不同的超链接效果,可以通过,CSS“,选择器类型”中的“高级（,ID,、上下文选择器等）”中进行设置，有四个选项可供选择：,a:link,：未访问的链接。,a:visited,：已访问过的超链接。,a:hover,：鼠标指针移到超链接文字上时的超链接。,a:active,：正在访问的超链接。,更改超链接的样式,利用,CSS,样式更改超链接样式的操作为：,1,打开一个带有超链接的网页文档。,2,在,CSS,样式面板中，单击 按钮，打开“新建,CSS,规则”对话框，在“选择器类型”选择“高级”，在“选择器”中选择“,a:link”,，如图所示。,更改超链接的样式,3,“定义在”选择“仅对该文档”，单击“确定”，打开“,a:link,的,CSS,规则定义”对话框，如图所示。,更改超链接的样式,4,在“类型”分类中，设置字体：幼圆，颜色：,#00CC00,，修饰：无（无下划线）。,5,单击“确定”按钮，完成,a:link,样式的创建。,6,重复以上操作分别设置：,a:visited,，字体：华文行楷，颜色：,#660033,，修饰：无（无下划线）。,a:hover,：字体：幼圆，颜色：,#FF0000,，修饰：下划线。,a:active,：字体：华文新魏，样式：倾斜，颜色：,#0000CC,，修饰：下划线。,7,保存并在浏览器中预览网页，效果如图所示。,更改超链接的样式,（一）模糊效果滤镜（,blur,）,1,新建一个网页并插入两幅相同的图像并保存网页。,2,在,CSS,样式面板中，单击 按钮，打开“新建,CSS,规则”对话框。如图所示。,3,名称中输入“,.blur”,，“选择器类型”选择“类”，“定义在”选择“仅对该文档”。,应用CSS滤镜,4,设置完成后，单击“确定”按钮，打开“,.blur,的,CSS,规则定义”对话框，切换到“扩展”分类。,5,在“滤镜”中选择,Blur,滤镜，参数设置如下：,Blur(Add=true,Direction=135,Strength=20),。如图所示,应用CSS滤镜,6,设置完成后，单击“确定”，创建的,CSS,样式出现在,CSS,面板。,7,选中文档中的右侧图像，执行以下操作之一：,在,CSS,面板中，右击,.blur,样式，在弹出的快捷菜单中选择“套用”命令。,在属性检查器的“类”的下拉列表中选择“,blur”,。,8,保存并在浏览器中预览网页，效果如图所示。,应用CSS滤镜,（二）阴影效果滤镜（,shadow,）,1,新建一个网页并在网页中插入表格输入文本，如图所示，保存文档。,2,在,CSS,样式面板中，单击 按钮，打开“新建,CSS,规则”对话框。如图所示。,应用CSS滤镜,3,名称中输入“,.shadow”,，“选择器类型”选择“类”，“定义在”选择“仅对该文档”。,4,设置完成后，单击“确定”按钮，打开“,.shadow,的,CSS,规则定义”对话框，切换到“扩展”类别，如图所示。,应用CSS滤镜,5,在“滤镜”中选择,Shadow,滤镜，参数设置如下：,Shadow(Color=#666666,Direction=45),。,6,设置完成后，单击“确定”，创建的,CSS,样式出现在,CSS,面板。,7,选中文档中左侧单元格，执行以下操作之一：,在,CSS,面板中，右击,.shadow,样式，在弹出的快捷菜单中选择“套用”命令。,在属性检查器的“类”的下拉列表中选择“,shadow”,。,8,保存并在浏览器中预览网页，效果如图所示。,应用CSS滤镜,回顾,CSS,的优点之前，我要先介绍一下它的历史。,Web,管理组织,W3C,在 1996 年 11 月推荐使用,CSS，,并批准了,CSS 1,级规范。,CSS 1,级规范说明了用于,HTML,页面的属性。这些属性代替了传统的,字体,标签和其他“样式”标记，例如颜色和边距。1998 年 5 月，,W3C,批准了,CSS 2,级规范，将一些附加功能添加到 1 级规范，并引进了定位属性。这些属性代替了,表格,标签普遍（但是错误）的用法，用来设计页面元素的表示。,CSS,规范的最新版本是,CSS 2.1，,它改进了某些属性，并删除了在当前浏览器里没有作用或作用很小的属性。,为什么使用,CSS？,不幸的是，就像很多新技术一样，,CSS,经历了漫长的过程才被广泛采纳。其中的重要原因在于浏览器，以及为这些浏览器建立站点的,Web,设计者们。,CSS,批准期间，,Netscape Navigator(NN),仍然是主导浏览器，而该浏览器基本上不支持,CSS。Microsoft,在其第 3 版浏览器中添加了对,CSS,非常有限的支持，但当时大多数的,Web,设计者（本人在内）仍然将,NN,作为首选平台进行页面编码。,很多年来，每发行一个新版本，浏览器制作者们都扩展了对,CSS,的支持。今天，,Internet Explorer 6、Netscape Navigator 7、Mozilla、Opera,和,Safari,都全面支持,CSS。,但这并不意味着我们作为,Web,设计者和开发者的生涯不存在问题。尽管上述所有浏览器都支持,CSS Level 2，,它们的兼容程度仍然各不相同。而且在某些情况下，特定属性仍然会带给你很多麻烦。也就是说，您仍然需要遵守老的信条“测试再测试”。但如果您坚持使用,CSS,规范的核心属性，您将能够正确地呈现页面。,但是为什么,W3C,认为需要创建,CSS,规范呢？当我创建基于,HTML,的,Web,站点和应用程序时，这一切对我又意味着什么呢？我认为，我们需要使用,CSS,的理由以及它带来的优势可以分为以下三个主要方面：灵活性、呈现性和可访问性。,我确定几乎每个,Web,设计者和开发者都经历过这样的痛苦时刻：当您小心地布置好页面，完成所有嵌套的表格后，客户要求进行一点“小小的”更改。这小小的更改可能只是“能不能把那个图形稍稍往左移动一点？”，也可能非常富有戏剧性：“我不喜欢这些标题，能把它们的字体弄大一点吗？改字体的时候，顺便把颜色也改了，怎么样？”如果只需要处理有限的几个页面，您可以深吸一口气，花上大半个小时做那些让人恼火的改动。但如果涉及到较大的站点（而这已经很常见），一个简单的更改无论如何也简单不了。,想象一下，在传统的基于表格的布局中，将站点浏览从页面左侧移到页面右侧将有多么困难。这需要几个小时重复而乏味的工作。但是，如果您选择使用,CSS,的定位属性（通常称作,CSS-P）,来设计页面，只需更改外部样式表中的“浮动”或“位置”属性，即可更新页面。而且还有以下附加优势：您更新了站点中使用该样式的所有页面。,一个与呈现有关的优点让我想起电影莫扎特。电影中，莫扎特问国王对自己的歌剧有什么看法。国王说很好，但是很沉闷。莫扎特一再追问，国王解释说，问题就在于“音符太多”。,Web,设计也可能有同样的问题，当然这里的音符指的是实际,HTML,代码。代码越多，浏览器理解页面所花的时间就越长。,在设计中使用,CSS,后，您将减少客户需要下载的代码的数量。仅仅减少某些页面中的字体标签就可以大大减少代码的数量。在很多情况下，如果完全使用,CSS-P,进行设计，代码的数量最多可以减少 50%甚至更多。代码减少就意味着页面下载的速度加快。,当您点击页面时，您会很快看到页面中自己感兴趣的内容，而忽略页面顶部的导航和其他内容。有的技术能够使屏幕阅读器跳过导航，但这需要在导航条或其他内容的图像中添加链接。这些技术的运行可能会造成混乱，而且访问站点的其他人也能够看到它们。使用,CSS，,您能够在页面中完整定义不可视元素（对于其他站点访问人员和您的鼠标不可视）。屏幕阅读器可以使用这些元素快速导航，有效处理文档。由于,CSS,没有显示标记，屏幕阅读器所遇到的唯一问题就是实际内容。另外，当您使用,CSS-P,进行设计时，您将专注于内容的实际“流”。您开始考虑它在页面上的逻辑顺序。,当您阅读本文档时，您理解了信息“流”。但在镶嵌型表格的示例中，如果您使用多栏布局，本段落将很可能位于页面的右上角。那样，屏幕阅读器无法知道它应该在文章末尾阅读本段落。使用,CSS-P,后，浏览器可能仍将本段落显示在浏览器窗口的右上角，但当您查看文档的源代码时，段落在文档的,html,中仍然是您现在所看到的位置。这使页面更容易访问。,