《web编程基础－css、javascript、jquery第一部分网页基础》由会员分享，可在线阅读，更多相关《web编程基础－css、javascript、jquery第一部分网页基础（114页珍藏版）》请在金锄头文库上搜索。
1、网页基础 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标准一般指进行网站建
2、设所采用的基本XHTML语言的网站设计语言。 Web标准中典型的应用模式就是DIV+CSS。实际上， Web标准并不是一个标准，而是一些列标准的集合。 Web标准由一系列的规范组成。由于Web设计越来越趋向于整体与结构化，对于网页设计者来说，理解Web标准首先要理解结构和表现分离的意义。,一、了解Web 标准,Web标准,WEB编程基础,2、什么是W3C？ W3C组织是对网络标准制定的一个非盈利组织， W3C是World Wide Web Consortium（万维网联盟）的缩写，像HTML、XHTML、CSS、XML的标准就是由W3C制定的。 W3C 致力于实现所有的用户都能够对 web 加
3、以利用。W3C 同时与其他标准化组织协同工作，比如 Internet 工程工作小组、无线应用协议（WAP）以及 Unicode 联盟（Unicode Consortium）。,一、了解Web 标准,Web标准,WEB编程基础,3、W3C发布的标准 网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。 结构化标准语言，主要包括XHTML和XML。 表现标准语言，主要包括CSS。 行为标准，主要包括对象模型（如W3C DOM）、ECMAScript等。,一、了解Web 标准,Web标准,WEB编程基础,3、W3C发布的标准 （1）HTML
4、超文本标记语言，即HTML（Hypertext Markup Language），是用于描述网页文档的一种标记语言。 HTML是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。,一、了解Web 标准,Web标准,WEB编程基础,3、W3C发布的标准 （2）XHTML XHTML是（The Extensible Hyper Text Markup Language，可扩展超文本标识语言）的缩写。 XHTML是当前HTML版的继承者。HTML
5、语法要求比较松散，这样对网页编写者来说，比较方便，但对于机器来说，语言的语法越松散，处理起来就越困难，对于传统的计算机来说，还有能力兼容松散语法，但对于许多其他设备，比如手机，难度就比较大。,一、了解Web 标准,Web标准,WEB编程基础,3、W3C发布的标准 （3）XML XML（Extensible Markup Language）即可扩展标记语言。它与HTML一样，都是标准通用语言。Xml是Internet环境中跨平台的，依赖于内容的技术，是当前处理结构化文档信息的有力工具。扩展标记语言XML是一种简单的数据存储语言，使用一系列简单的标记描述数据，而这些标记可以用方便的方式建立，虽然X
6、ML占用的空间比二进制数据要占用更多的空间，但XML极其简单易于掌握和使用。,一、了解Web 标准,Web标准,WEB编程基础,3、W3C发布的标准 （4）CSS CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。通过CSS可以控制HTML或者XML标签的表现形式。 W3C推荐使用CSS布局方法，似的Web更加简单，结构更加清晰。,一、了解Web 标准,Web标准,WEB编程基础,3、W3C发布的标准 （5）DOM DOM是Document Object Model（文档对象模型）的缩写。DOM是W
7、3C组织推荐的处理可扩展置标语言的标准编程接口。它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。 W3C DOM被设计成适合多个平台，可使用任意编程语言实现的方法。DOM给了脚本语言（类似ECMAScript）无限发挥的能力。,一、了解Web 标准,Web标准,WEB编程基础,3、W3C发布的标准 （6） ECMAScript ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或Jscript
8、。,一、了解Web 标准,Web标准,WEB编程基础,由于存在不同的浏览器版本，Web 开发者常常需要为耗时的多版本开发而艰苦工作。当新的硬件（比如移动电话）和软件（比如微浏览器）开始浏览 Web 时，这种情况开始会变得更加严重。 为了 Web 更好地发展，对于开发人员和最终用户而言非常重要的事情是，在开发新的应用程序时，浏览器开发商和站点开发商共同遵守标准。Web 标准可确保每个人都有权利访问相同的信息。,二、为什么使用 Web 标准？,Web标准,WEB编程基础,一旦 web 开发人员遵守了 web 标准，由于开发人员可以更容易地理解彼此的编码，web 开发的团队协作将得到简化。 只有使用
9、 web 标准，才能确保在不频繁和费时地重写代码的情况下，所有的浏览器，无论新的或老式的，都可以正确地显示您的站点。 标准的 web 文档更易被搜索引擎访问，也更易被准确地索引。 标准的 web 文档更易被转换为其他格式。 标准的 web 文档更易被程序代码访问（比如 JavaScript 和 DOM）。,二、其他的考虑,Web标准,WEB编程基础,1、易用性 易用性是 HTML 标准的一个重要部分。 标准使得残疾人士更容易地使用 web。盲人可使用计算机为他们读出网页。而弱视的人士可重新排列并放大网页。简单的 web 标准，比如 HTML 和 CSS，将使您的网页更容易被语音阅读器和其他不常
10、见的输出设备理解。,二、其他的考虑,Web标准,WEB编程基础,2、易于维护 多年以来，Web标准团队一直推荐保持视觉设计和内容相分离的优点。这意味着HTML变得非常的简单，大部分的HTML页面只有一些和标签，以及一个指向强大的CSS文件的链接。这种完全的分离使得你的页面开发和维护变得简单，开发团队之间能够更好的协调。,二、其他的考虑,图1 电子信息工程学院网站首页效果图,电子信息工程学院网页布局,WEB编程基础,一、网页效果 （任务提出）,电子信息工程学院网页布局,WEB编程基础,二、关键技术,1、CSS（ Cascading Style Sheets ） 样式定义如何显示 HTML 元素
11、样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一,电子信息工程学院网页布局,WEB编程基础,二、关键技术,1、CSS基础语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 选择器通常是您需要改变样式的 HTML 元素。 每条声明由一个属性和一个值组成。 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。,selector declaration1; declaration2
12、; . declarationN ,selector property: value,电子信息工程学院网页布局,WEB编程基础,二、关键技术,1、CSS基础语法 下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。 在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。,h1 color:red; font-size:14px;,电子信息工程学院网页布局,WEB编程基础,二、关键技术,1、CSS基础语法 下面的示意图为您展示了上面这段代码的结构：,图2 CSS语法结构图,电子信息工程学院网页布局,WEB编程
13、基础,二、关键技术,1、CSS基础语法 值的不同写法和单位 除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000： 为了节约字节，我们可以使用 CSS 的缩写形式：,p color: #ff0000; ,p color: #f00; ,电子信息工程学院网页布局,WEB编程基础,二、关键技术,1、CSS基础语法 记得写引号 如果值为若干单词，则要给值加引号： 多重声明 如果要定义不止一个声明，则需要用分号将每个声明分开。,p font-family: “sans serif“;,p text-align:center; color:red; ,电子信息工程学院网页布局,WEB编程
14、基础,二、关键技术,2、CSS高级语法 选择器的分组 你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。,h1,h2,h3,h4,h5,h6 color: green; ,电子信息工程学院网页布局,WEB编程基础,二、关键技术,2、CSS高级语法 继承及其问题 根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则：,body font-family: Verdana, sans-serif; ,电子信息工程学院网页布局,WEB编程基础,二、关键技
15、术,2、CSS高级语法 继承及其问题 根据上面这条规则，站点的 body 元素将使用 Verdana 字体（假如访问者的系统中存在该字体的话）。 通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。,电子信息工程学院网页布局,WEB编程基础,二、关键技术,2、CSS高级语法 继承及其问题 但是在那个浏览器大战的血腥年代里，这种情况就未必会发
16、生，那时候对标准的支持并不是企业的优先选择。比方说，Netscape 4 就不支持继承，它不仅忽略继承，而且也忽略应用于 body 元素的规则。IE/Windows 直到 IE6 还存在相关的问题，在表格内的字体样式会被忽略。我们又该如何是好呢？,电子信息工程学院网页布局,WEB编程基础,二、关键技术,2、CSS高级语法 继承及其问题 如果你不希望 “Verdana, sans-serif“ 字体被所有的子元素继承，又该怎么做呢？比方说，你希望段落的字体是 Times。没问题。创建一个针对 p 的特殊规则，这样它就会摆脱父元素的规则：,body font-family: Verdana, sans-serif; td, ul, ol, ul, li, dl, dt, dd fon
