Web编程基础－CSS、JavaScript、jQuery第一部分 网页基础.ppt

网页基础WEB标准、DIV+CSS,第一部分,WEB编程基础,WEB编程基础,教学目标,通过这一部分的学习让学生了解Web标准。进一步熟悉巩固DIV+CSS相关知识，能够熟练对网页进行布局和样式设置。,Web标准电子信息工程学院网页布局网页页面布局（DIV）网页样式设置（CSS）,WEB编程基础,教学内容,重点：1、理解Web标准的内涵2、掌握CSS样式的使用3、掌握DIV布局难点：使用DIV+CSS模式进行网页布局并进行样式设置,WEB编程基础,教学重难点,Web标准,WEB编程基础,1、什么是Web标准？Web标准，即网站标准。目前通常所说的Web标准一般指进行网站建设所采用的基本XHTML语言的网站设计语言。Web标准中典型的应用模式就是DIV+CSS。实际上，Web标准并不是一个标准，而是一些列标准的集合。Web标准由一系列的规范组成。由于Web设计越来越趋向于整体与结构化，对于网页设计者来说，理解Web标准首先要理解结构和表现分离的意义。,一、了解Web标准,Web标准,WEB编程基础,2、什么是W3C？W3C组织是对网络标准制定的一个非盈利组织，W3C是WorldWideWebConsortium（万维网联盟）的缩写，像HTML、XHTML、CSS、XML的标准就是由W3C制定的。W3C致力于实现所有的用户都能够对web加以利用。W3C同时与其他标准化组织协同工作，比如Internet工程工作小组、无线应用协议（WAP）以及Unicode联盟（UnicodeConsortium）。,一、了解Web标准,Web标准,WEB编程基础,3、W3C发布的标准网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。结构化标准语言，主要包括XHTML和XML。表现标准语言，主要包括CSS。行为标准，主要包括对象模型（如W3CDOM）、ECMAScript等。,一、了解Web标准,Web标准,WEB编程基础,3、W3C发布的标准（1）HTML超文本标记语言，即HTML（HypertextMarkupLanguage），是用于描述网页文档的一种标记语言。HTML是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。,一、了解Web标准,Web标准,WEB编程基础,3、W3C发布的标准（2）XHTMLXHTML是（TheExtensibleHyperTextMarkupLanguage，可扩展超文本标识语言）的缩写。XHTML是当前HTML版的继承者。HTML语法要求比较松散，这样对网页编写者来说，比较方便，但对于机器来说，语言的语法越松散，处理起来就越困难，对于传统的计算机来说，还有能力兼容松散语法，但对于许多其他设备，比如手机，难度就比较大。,一、了解Web标准,Web标准,WEB编程基础,3、W3C发布的标准（3）XMLXML（ExtensibleMarkupLanguage）即可扩展标记语言。它与HTML一样，都是标准通用语言。Xml是Internet环境中跨平台的，依赖于内容的技术，是当前处理结构化文档信息的有力工具。扩展标记语言XML是一种简单的数据存储语言，使用一系列简单的标记描述数据，而这些标记可以用方便的方式建立，虽然XML占用的空间比二进制数据要占用更多的空间，但XML极其简单易于掌握和使用。,一、了解Web标准,Web标准,WEB编程基础,3、W3C发布的标准（4）CSSCSS是英语CascadingStyleSheets（层叠样式表单）的缩写，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。通过CSS可以控制HTML或者XML标签的表现形式。W3C推荐使用CSS布局方法，似的Web更加简单，结构更加清晰。,一、了解Web标准,Web标准,WEB编程基础,3、W3C发布的标准（5）DOMDOM是DocumentObjectModel（文档对象模型）的缩写。DOM是W3C组织推荐的处理可扩展置标语言的标准编程接口。它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。W3CDOM被设计成适合多个平台，可使用任意编程语言实现的方法。DOM给了脚本语言（类似ECMAScript）无限发挥的能力。,一、了解Web标准,Web标准,WEB编程基础,3、W3C发布的标准（6）ECMAScriptECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或Jscript。,一、了解Web标准,Web标准,WEB编程基础,由于存在不同的浏览器版本，Web开发者常常需要为耗时的多版本开发而艰苦工作。当新的硬件（比如移动电话）和软件（比如微浏览器）开始浏览Web时，这种情况开始会变得更加严重。为了Web更好地发展，对于开发人员和最终用户而言非常重要的事情是，在开发新的应用程序时，浏览器开发商和站点开发商共同遵守标准。Web标准可确保每个人都有权利访问相同的信息。,二、为什么使用Web标准？,Web标准,WEB编程基础,一旦web开发人员遵守了web标准，由于开发人员可以更容易地理解彼此的编码，web开发的团队协作将得到简化。只有使用web标准，才能确保在不频繁和费时地重写代码的情况下，所有的浏览器，无论新的或老式的，都可以正确地显示您的站点。标准的web文档更易被搜索引擎访问，也更易被准确地索引。标准的web文档更易被转换为其他格式。标准的web文档更易被程序代码访问（比如JavaScript和DOM）。,二、其他的考虑,Web标准,WEB编程基础,1、易用性易用性是HTML标准的一个重要部分。标准使得残疾人士更容易地使用web。盲人可使用计算机为他们读出网页。而弱视的人士可重新排列并放大网页。简单的web标准，比如HTML和CSS，将使您的网页更容易被语音阅读器和其他不常见的输出设备理解。,二、其他的考虑,Web标准,WEB编程基础,2、易于维护多年以来，Web标准团队一直推荐保持视觉设计和内容相分离的优点。这意味着HTML变得非常的简单，大部分的HTML页面只有一些和标签，以及一个指向强大的CSS文件的链接。这种完全的分离使得你的页面开发和维护变得简单，开发团队之间能够更好的协调。,二、其他的考虑,图1电子信息工程学院网站首页效果图,电子信息工程学院网页布局,WEB编程基础,一、网页效果（任务提出）,电子信息工程学院网页布局,WEB编程基础,二、关键技术,1、CSS（CascadingStyleSheets）样式定义如何显示HTML元素样式通常存储在样式表中把样式添加到HTML4.0中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在CSS文件中多个样式定义可层叠为一,电子信息工程学院网页布局,WEB编程基础,二、关键技术,1、CSS基础语法CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。选择器通常是您需要改变样式的HTML元素。每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（styleattribute）。每个属性有一个值。属性和值被冒号分开。,selectordeclaration1;declaration2;.declarationN,selectorproperty:value,电子信息工程学院网页布局,WEB编程基础,二、关键技术,1、CSS基础语法下面这行代码的作用是将h1元素内的文字颜色定义为红色，同时将字体大小设置为14像素。在这个例子中，h1是选择器，color和font-size是属性，red和14px是值。,h1color:red;font-size:14px;,电子信息工程学院网页布局,WEB编程基础,二、关键技术,1、CSS基础语法下面的示意图为您展示了上面这段代码的结构：,图2CSS语法结构图,电子信息工程学院网页布局,WEB编程基础,二、关键技术,1、CSS基础语法值的不同写法和单位除了英文单词red，我们还可以使用十六进制的颜色值#ff0000：为了节约字节，我们可以使用CSS的缩写形式：,pcolor:#ff0000;,pcolor:#f00;,电子信息工程学院网页布局,WEB编程基础,二、关键技术,1、CSS基础语法记得写引号如果值为若干单词，则要给值加引号：多重声明如果要定义不止一个声明，则需要用分号将每个声明分开。,pfont-family:sansserif;,ptext-align:center;color:red;,电子信息工程学院网页布局,WEB编程基础,二、关键技术,2、CSS高级语法选择器的分组你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。,h1,h2,h3,h4,h5,h6color:green;,电子信息工程学院网页布局,WEB编程基础,二、关键技术,2、CSS高级语法继承及其问题根据CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则：,bodyfont-family:Verdana,sans-serif;,电子信息工程学院网页布局,WEB编程基础,二、关键技术,2、CSS高级语法继承及其问题根据上面这条规则，站点的body元素将使用Verdana字体（假如访问者的系统中存在该字体的话）。通过CSS继承，子元素将继承最高级元素（在本例中是body）所拥有的属性（这些子元素诸如p,td,ul,ol,ul,li,dl,dt,和dd）。不需要另外的规则，所有body的子元素都应该显示Verdana字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。,电子信息工程学院网页布局,WEB编程基础,二、关键技术,2、CSS高级语法继承及其问题但是在那个浏览器大战的血腥年代里，这种情况就未必会发生，那时候对标准的支持并不是企业的优先选择。比方说，Netscape4就不支持继承，它不仅忽略继承，而且也忽略应用于body元素的规则。IE/Windows直到IE6还存在相关的问题，在表格内的字体样式会被忽略。我们又该如何是好呢？,电子信息工程学院网页布局,WEB编程基础,二、关键技术,2、CSS高级语法继承及其问题如果你不希望Verdana,sans-serif字体被所有的子元素继承，又该怎么做呢？比方说，你希望段落的字体是Times。没问题。创建一个针对p的特殊规则，这样它就会摆脱父元素的规则：,bodyfont-family:Verdana,sans-serif;td,ul,ol,ul,li,dl,dt,ddfont-family:Verdana,sans-serif;pfont-family:Times,TimesNewRoman,serif;,电子信息工程学院网页布局,WEB编程基础,二、关键技术,3、CSSid选择器id选择器可以为标有特定id的HTML元素指定特定的样式。id选择器以#来定义。下面的两个id选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：,#redcolor:red;#greencolor:green;,电子信息工程学院网页布局,WEB编程基础,二、关键技术,3、CSSid选择器下面的HTML代码中，id属性为red的p元素显示为红色，而id属性为green的p元素显示为绿色。,这个段落是红色。这个段落是绿色。,注意：id属性只能在每个HTML文档中出现一次。,电子信息工程学院网页布局,WEB编程基础,二、关键技术,3、CSSid选择器id选择器和派生选择器在现代布局中，id选择器常常用于建立派生选择器。,#sidebarpfont-style:italic;text-align:right;margin-top:0.5em;,电子信息工程学院网页布局,WEB编程基础,二、关键技术,3、CSSid选择器id选择器和派生选择器上面的样式只会应用于出现在id是sidebar的元素内的段落。这个元素很可能是div或者是表格单元，尽管它也可能是一个表格或者其他块级元素。它甚至可以是一个内联元素，比如或者，不过这样的用法是非法的，因为不可以在内联元素中嵌入。,电子信息工程学院网页布局,WEB编程基础,二、关键技术,3、CSSid选择器id选择器和派生选择器一个选择器，多种用法：即使被标注为sidebar的元素只能在文档中出现一次，这个id选择器作为派生选择器也可以被使用很多次：,#sidebarpfont-style:italic;text-align:right;margin-top:0.5em;,电子信息工程学院网页布局,WEB编程基础,二、关键技术,3、CSSid选择器id选择器和派生选择器一个选择器，多种用法：在这里，与页面中的其他p元素明显不同的是，sidebar内的p元素得到了特殊的处理，同时，与页面中其他所有h2元素明显不同的是，sidebar中的h2元素也得到了不同的特殊处理。,#sidebarh2font-size:1em;font-weight:normal;font-style:italic;margin:0;line-height:1.5;text-align:right;,电子信息工程学院网页布局,WEB编程基础,二、关键技术,3、CSSid选择器单独的选择器id选择器即使不被用来创建派生选择器，它也可以独立发挥作用：,#sidebarborder:1pxdotted#000;padding:10px;,电子信息工程学院网页布局,WEB编程基础,二、关键技术,3、CSSid选择器单独的选择器根据这条规则，id为sidebar的元素将拥有一个像素宽的黑色点状边框，同时其周围会有10个像素宽的内边距（padding，内部空白）。老版本的Windows/IE浏览器可能会忽略这条规则，除非你特别地定义这个选择器所属的元素：,div#sidebarborder:1pxdotted#000;padding:10px;,电子信息工程学院网页布局,WEB编程基础,二、关键技术,4、CSS类选择器在CSS中，类选择器以一个点号显示：在上面的例子中，所有拥有center类的HTML元素均为居中。在下面的HTML代码中，h1和p元素都有center类。这意味着两者都将遵守“.center”选择器中的规则。,.centertext-align:center,电子信息工程学院网页布局,WEB编程基础,二、关键技术,4、CSS类选择器,Thisheadingwillbecenter-alignedThisparagraphwillalsobecenter-aligned.,注意：类名的第一个字符不能使用数字！它无法在Mozilla或Firefox中起作用。,电子信息工程学院网页布局,WEB编程基础,二、关键技术,4、CSS类选择器和id一样，class也可被用作派生选择器：在上面这个例子中，类名为fancy的更大的元素内部的表格单元都会以灰色背景显示橙色文字。元素也可以基于它们的类而被选择：在上面的例子中，类名为fancy的表格单元将是带有灰色背景的橙色。,.fancytdcolor:#f60;background:#666;,td.fancycolor:#f60;background:#666;,电子信息工程学院网页布局,WEB编程基础,二、关键技术,4、CSS类选择器你可以将类fancy分配给任何一个表格元素任意多的次数。那些以fancy标注的单元格都会是带有灰色背景的橙色。那些没有被分配名为fancy的类的单元格不会受这条规则的影响。还有一点值得注意，class为fancy的段落也不会是带有灰色背景的橙色，当然，任何其他被标注为fancy的元素也不会受这条规则的影响。这都是由于我们书写这条规则的方式，这个效果被限制于被标注为fancy的表格单元（即使用td元素来选择fancy类）。,电子信息工程学院网页布局,WEB编程基础,二、关键技术,5、CSS属性选择器CSS属性选择器对带有指定属性的HTML元素设置样式。可以为拥有指定属性的HTML元素设置样式，而不仅限于class和id属性。（1）属性选择器下面的例子为带有title属性的所有元素设置样式：,titlecolor:red;,电子信息工程学院网页布局,WEB编程基础,二、关键技术,5、CSS属性选择器（2）属性和值选择器下面的例子为title=“Helloworld”的所有元素设置样式：（3）属性和值选择器-多个值下面的例子为包含指定值的title属性的所有元素设置样式。适用于由空格分隔的属性值：,title=Helloworldborder:5pxsolidblue;,title=hellocolor:red;,电子信息工程学院网页布局,WEB编程基础,二、关键技术,5、CSS属性选择器（4）设置表单的样式属性选择器在为不带有class或id的表单设置样式时特别有用！,inputtype=textwidth:150px;display:block;margin-bottom:10px;background-color:yellow;font-family:Verdana,Arial;inputtype=buttonwidth:120px;margin-left:35px;display:block;font-family:Verdana,Arial;,电子信息工程学院网页布局,WEB编程基础,二、关键技术,6、创建CSS（1）外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部：,电子信息工程学院网页布局,WEB编程基础,二、关键技术,6、创建CSS（1）外部样式表浏览器会从文件mystyle.css中读到样式声明，并根据它来格式文档。外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的html标签。样式表应该以.css扩展名进行保存。下面是一个样式表文件的例子：,hrcolor:sienna;pmargin-left:20px;bodybackground-image:url(images/back40.gif);,注意：不要在属性值与单位之间留有空格。,电子信息工程学院网页布局,WEB编程基础,二、关键技术,6、创建CSS（2）内部样式表当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用标签在文档头部定义内部样式表，就像这样:,hrcolor:sienna;pmargin-left:20px;bodybackground-image:url(images/back40.gif);,电子信息工程学院网页布局,WEB编程基础,二、关键技术,6、创建CSS（3）内联样式由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style属性可以包含任何CSS属性。本例展示如何改变段落的颜色和左外边距：,Thisisaparagraph,电子信息工程学院网页布局,WEB编程基础,二、关键技术,7、CSS样式（1）CSS背景CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。CSS在这方面的能力远远在HTML之上。1）背景色可以使用background-color属性为元素设置背景色。这个属性接受任何合法的颜色值。这条规则把元素的背景设置为灰色：pbackground-color:gray;如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：,电子信息工程学院网页布局,WEB编程基础,二、关键技术,7、CSS样式（1）CSS背景1）背景色如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：pbackground-color:gray;padding:20px;可以为所有元素设置背景色，这包括body一直到em和a等行内元素。background-color不能继承，其默认值是transparent。transparent有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的。,电子信息工程学院网页布局,WEB编程基础,二、关键技术,7、CSS样式（1）CSS背景2）背景图像要把图像放入背景，需要使用background-image属性。background-image属性的默认值是none，表示背景上没有放置任何图像。如果需要设置一个背景图像，必须为这个属性设置一个URL值：bodybackground-image:url(/i/eg_bg_04.gif);,电子信息工程学院网页布局,WEB编程基础,二、关键技术,7、CSS样式（1）CSS背景2）背景图像大多数背景都应用到body元素，不过并不仅限于此。下面例子为一个段落应用了背景，而不会对文档的其他部分应用背景：p.flowerbackground-image:url(/i/eg_bg_03.gif);你甚至可以为行内元素设置背景图像，下面的例子为一个链接设置了背景图像：a.radiobackground-image:url(/i/eg_bg_07.gif);,电子信息工程学院网页布局,WEB编程基础,二、关键技术,7、CSS样式（1）CSS背景3）背景重复如果需要在页面上对背景图像进行平铺，可以使用background-repeat属性。属性值repeat导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x和repeat-y分别导致图像只在水平或垂直方向上重复，no-repeat则不允许图像在任何方向上平铺。,电子信息工程学院网页布局,WEB编程基础,二、关键技术,7、CSS样式（1）CSS背景3）背景重复默认地，背景图像将从一个元素的左上角开始。请看下面的例子：,bodybackground-image:url(/i/eg_bg_03.gif);background-repeat:repeat-y;,电子信息工程学院网页布局,WEB编程基础,二、关键技术,7、CSS样式（1）CSS背景4）背景定位可以利用background-position属性改变图像在背景中的位置。下面的例子在body元素中将一个背景图像居中放置：,bodybackground-image:url(/i/eg_bg_03.gif);background-repeat:no-repeat;background-position:center;,电子信息工程学院网页布局,WEB编程基础,二、关键技术,7、CSS样式（1）CSS背景4）背景定位为background-position属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right和center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如100px或5cm。最后也可以使用百分数值，如background-position:66%33%;这里，background-position的默认值是0%0%，在功能上相当于topleft。,电子信息工程学院网页布局,WEB编程基础,二、关键技术,7、CSS样式（2）CSS文本CSS文本属性可定义文本的外观。通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等1）缩进文本CSS提供了text-indent属性，该属性可以方便地实现文本缩进。下面的规则会使所有段落的首行缩进5em：ptext-indent:5em;,电子信息工程学院网页布局,WEB编程基础,二、关键技术,7、CSS样式（2）CSS文本2）文本对齐text-align是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。值left、right、center和justify会导致元素中的文本分别左对齐、右对齐、居中和两端对齐。,电子信息工程学院网页布局,WEB编程基础,二、关键技术,7、CSS样式（2）CSS文本3）文本装饰text-decoration属性，设置文本样式。text-decoration有5个值：None：关闭原本应用到一个元素上的所有装饰Underline：会对元素加下划线Overline：会在文本的顶端画一个上划线line-through：在文本中间画一个贯穿线Blink：会让文本闪烁,电子信息工程学院网页布局,WEB编程基础,二、关键技术,7、CSS样式（3）CSS字体1）CSS字体系列在CSS中，有两种不同类型的字体系列名称：通用字体系列-拥有相似外观的字体系统组合（比如Serif或Monospace）特定字体系列-具体的字体系列（比如Times或Courier）可以通过font-family属性设置更具体的字体：h1font-family:Georgia;,电子信息工程学院网页布局,WEB编程基础,二、关键技术,7、CSS样式（3）CSS字体2）字体风格font-style属性最常用于规定斜体文本。该属性有三个值：normal-文本正常显示italic-文本斜体显示oblique-文本倾斜显示说明：斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。通常情况下，italic和oblique文本在web浏览器中看上去完全一样。,电子信息工程学院网页布局,WEB编程基础,二、关键技术,7、CSS样式（3）CSS字体3）字体加粗font-weight属性设置文本的粗细。使用bold关键字可以将文本设置为粗体。关键字100-900为字体指定了9级加粗度。100对应最细的字体，900对应最粗的字体。数字400等价于normal，而700等价于bold。,p.normalfont-weight:normal;p.thickfont-weight:bold;p.thickerfont-weight:900;,电子信息工程学院网页布局,WEB编程基础,二、关键技术,7、CSS样式（3）CSS字体4）字体大小font-size属性设置文本的大小。使用像素来设置字体大小：pfont-size:60px;使用em来设置字体大小：pfont-size:0.875em;/*14px/16=0.875em*/,电子信息工程学院网页布局,WEB编程基础,二、关键技术,7、CSS样式（4）CSS列表CSS列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。1）列表类型要修改用于列表项的标志类型，可以使用属性list-style-type。例如：把无序列表中的列表项标志设置为方块。ullist-style-type:square,电子信息工程学院网页布局,WEB编程基础,二、关键技术,7、CSS样式（4）CSS列表2）列表项图像有时，常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用list-style-image属性做到：ullilist-style-image:url(xxx.gif)只需要简单地使用一个url()值，就可以使用图像作为标志。,电子信息工程学院网页布局,WEB编程基础,二、关键技术,7、CSS样式（4）CSS列表3）列表标志位置CSS2.1可以确定标志出现在列表项内容之外还是内容内部。这是利用list-style-position完成的。规定列表中列表项目标记的位置：ullist-style-position:inside;,电子信息工程学院网页布局,WEB编程基础,二、关键技术,7、CSS样式（5）CSS表格1）表格边框如需在CSS中设置表格边框，请使用border属性。下面的例子为table、th以及td设置了蓝色边框：,table,th,tdborder:1pxsolidblue;,电子信息工程学院网页布局,WEB编程基础,二、关键技术,7、CSS样式（5）CSS表格2）表格宽度和高度通过width和height属性定义表格的宽度和高度。下面的例子将表格宽度设置为100%，同时将th元素的高度设置为50px：,tablewidth:100%;thheight:50px;,电子信息工程学院网页布局,WEB编程基础,二、关键技术,7、CSS样式（5）CSS表格3）表格文本对齐text-align和vertical-align属性设置表格中文本的对齐方式。text-align属性设置水平对齐方式，比如左对齐、右对齐或者居中：,tdtext-align:right;,电子信息工程学院网页布局,WEB编程基础,二、关键技术,7、CSS样式（5）CSS表格3）表格文本对齐vertical-align属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐：,tdheight:50px;vertical-align:bottom;,电子信息工程学院网页布局,WEB编程基础,二、关键技术,7、CSS样式（5）CSS表格4）表格内边距如需控制表格中内容与边框的距离，请为td和th元素设置padding属性：,tdpadding:15px;,电子信息工程学院网页布局,WEB编程基础,二、关键技术,7、CSS样式（5）CSS表格5）表格颜色下面的例子设置边框的颜色，以及th元素的文本和背景颜色：,table,td,thborder:1pxsolidgreen;thbackground-color:green;color:white;,电子信息工程学院网页布局,WEB编程基础,二、关键技术,8、DIV+CSSDIV+CSS是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。用div盒模型结构给各部分内容划分到不同的区块，然后用css来定义盒模型的位置、大小、边框、内外边距、排列方式等。,电子信息工程学院网页布局,WEB编程基础,二、关键技术,8、DIV+CSS（1）DIV元素DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。,电子信息工程学院网页布局,WEB编程基础,二、关键技术,8、DIV+CSS（2）页面布局与规划页面的布局，大致分为以下几个部分：1）顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；2）内容部分又可分为侧边栏、主体内容；3）底部，包括一些版权信息。,电子信息工程学院网页布局,WEB编程基础,二、关键技术,8、DIV+CSS（3）DIV结构,图2DIV结构图,电子信息工程学院网页布局,WEB编程基础,二、关键技术,8、DIV+CSS（3）DIV结构body/*这是一个HTML元素，具体我就不说明了*/#Container/*页面层容器*/#Header/*页面头部*/#PageBody/*页面主体*/#Sidebar/*侧边栏*/#MainBody/*主体内容*/#Footer/*页面底部*/,电子信息工程学院网页布局,WEB编程基础,二、关键技术,8、DIV+CSS（4）写入整体层结构与CSS,电子信息工程学院网页布局,WEB编程基础,二、关键技术,8、DIV+CSS（4）写入整体层结构与CSS/*基本信息*/bodyfont:12px;margin:0px;text-align:center;background:#FFFFFF;/*页面层容器*/#containerwidth:100%/*页面头部*/#Headerwidth:800px;margin:0auto;height:100px;background:#FFCC99/*页面主体*/#PageBodywidth:800px;margin:0auto;height:400px;background:#CCFF00/*页面底部*/#Footerwidth:800px;margin:0auto;height:50px;background:#00FFFF,电子信息工程学院网页布局,WEB编程基础,三、网页布局制作,1、创建层结构首页学院概况,电子信息工程学院网页布局,WEB编程基础,三、网页布局制作,1、创建层结构师资队伍教学科研党建工作实训基地学生园地招生就业,电子信息工程学院网页布局,WEB编程基础,三、网页布局制作,1、创建层结构招生就业,电子信息工程学院网页布局,WEB编程基础,三、网页布局制作,1、创建层结构,电子信息工程学院网页布局,WEB编程基础,三、网页布局制作,2、添加内容、设置样式（1）设置页面样式bodymargin:0px;background-image:url(imgs/body.jpg);font-family:微软雅黑;,电子信息工程学院网页布局,WEB编程基础,三、网页布局制作,2、添加内容、设置样式（2）设置页面头部样式#Headermargin:0pxauto;background-image:url(imgs/head-background.png);,电子信息工程学院网页布局,WEB编程基础,三、网页布局制作,2、添加内容、设置样式（2）设置页面头部样式#Header.logowidth:1000px;height:226px;margin:0pxauto;background-image:url(imgs/head-logo1.png);,电子信息工程学院网页布局,WEB编程基础,三、网页布局制作,2、添加内容、设置样式（2）设置页面头部样式,图3页面和头部样式设置效果图,电子信息工程学院网页布局,WEB编程基础,三、网页布局制作,2、添加内容、设置样式（3）设置页面主体样式#PageBodymargin:auto;padding:020px;width:1000px;background-image:url(imgs/body-background.png);overflow:hidden;,电子信息工程学院网页布局,WEB编程基础,三、网页布局制作,2、添加内容、设置样式（3）设置页面主体样式,图4页面主体样式设置效果图,电子信息工程学院网页布局,WEB编程基础,三、网页布局制作,2、添加内容、设置样式（3）设置侧边栏（导航）样式首先为菜单项设置h1样式和链接，每间隔一个菜单项添加class=“even”：首页学院概况,电子信息工程学院网页布局,WEB编程基础,三、网页布局制作,2、添加内容、设置样式（3）设置侧边栏（导航）样式然后设置相应CSS样式：#homeNavfloat:left;width:149px;overflow:hidden;z-index:1000;border-right:1pxsolid#999999;background-color:#FFFFFF;box-shadow:#6660px0px10px;,电子信息工程学院网页布局,WEB编程基础,三、网页布局制作,2、添加内容、设置样式（3）设置侧边栏（导航）样式#homeNavdivwidth:149px;height:60px;position:relative;#homeNav.evenbackground-color:#eff4f7;,电子信息工程学院网页布局,WEB编程基础,三、网页布局制作,2、添加内容、设置样式（3）设置侧边栏（导航）样式#homeNavdivatext-decoration:none;font-weight:bold;color:#666666;#homeNavdiva:hovercolor:#0c7cbe;,电子信息工程学院网页布局,WEB编程基础,三、网页布局制作,2、添加内容、设置样式（3）设置侧边栏（导航）样式#homeNavh1color:#666666;float:left;position:absolute;top:16px;margin:015px;padding:4px0px;font-size:18px;line-height:18px;height:18px;border-left:8pxsolid#0c7cbe;,电子信息工程学院网页布局,WEB编程基础,三、网页布局制作,2、添加内容、设置样式（3）设置侧边栏（导航）样式,图5导航样式设置效果图,电子信息工程学院网页布局,WEB编程基础,三、网页布局制作,2、添加内容、设置样式（4）主体内容设置1）添加层结构和内容,电子信息工程学院网页布局,WEB编程基础,三、网页布局制作,2、添加内容、设置样式（4）主体内容设置1）添加层结构和内容我校师生为社区居民免费修家电2013-06-05,电子信息工程学院网页布局,WEB编程基础,三、网页布局制作,2、添加内容、设置样式（4）主体内容设置1）添加层结构和内容关于举办“端午诗会”的通知2013-04-20,电子信息工程学院网页布局,WEB编程基础,三、网页布局制作,2、添加内容、设置样式（4）主体内容设置2）样式设置#MainBodyfloat:right;width:850px;#homepadding-left:1px;#home.imgswidth:850px;height:300px;,电子信息工程学院网页布局,WEB编程基础,三、网页布局制作,2、添加内容、设置样式（4）主体内容设置2）样式设置#home.news,#home.noticewidth:410px;float:left;padding-left:5px;font-family:宋体;,电子信息工程学院网页布局,WEB编程基础,三、网页布局制作,2、添加内容、设置样式（4）主体内容设置2）样式设置#home.news.titlewidth:350px;height:40px;background:url(imgs/home-news