网页制作第一章.ppt

1、Internet的根本目的,根本意义：远程控制和信息共享； 远程控制，导弹控制系统 信息共享，文件数据资源 新的意义：硬件资源共享； 硬件资源共享，计算、存储、输入/输出等 在Internet上所有资源（软、硬件）统称为服务,HTML：Hyper Text Mark-up Language 超文本标记语言,本课程内容,CSS：Cascading Style Sheet 层叠样式表,静态页面,网页作为一个信息共享和交互的形式，在我们的客户端（浏览器）表现为HTML的文本形式，其内容由多种标识构成，由客户端浏览器进行解析和显示。,全球互联网,1995年，美国克林顿政府先后提出国家信息高速公路和国际

2、信息高速公路。 2011年，中国互联网用户数将达到6亿，世界互联网用户数将达到20亿。,IP地址：3,统一资源定位URL,统一资源定位符（URL，英语Uniform Resource Locator的缩写）是用于完整地描述Internet上网页和其他资源的地址的一种标识方法。 它最初是由蒂姆伯纳斯李发明用来作为万维网的地址的。现在它已经被万维网联盟编制为因特网标准RFC1738了。 Internet上的每一个网页都具有一个唯一的名称标识，通常称之为URL地址，这种地址可以是本地磁盘，也可以是局域网上的某一台计算机，更多的是Internet上的站点。简单地说，URL就是

3、Web地址，俗称“网址”。,URL的格式,协议:/IP地址(或者域名):端口/目录/文件?参数 http:/ / Index.html 浏览器将URL分解为三个部分： 协议（“HTTP, FTP，SMTP, POP3”） 服务器名（“”），其对应的IP地址9 资源文件名（“index.html”）,静态网页,静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。 你编的是什么它显示的就是什么、不会有任何改变。静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。,静态网页的特点,(1)静态网页每个网页都有一个固定的URL，且网页URL以.h

4、tm、.html、.shtml等常见形式为后缀，而不含有“?”; (2)网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件; (3)静态网页的内容相对稳定，因此容易被搜索引擎检索; (4)静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难; (5)静态网页的交互性较差，在功能方面有较大的限制。,静态网页与动态的区别（一）,静态网页、动态网页主要根据网页制作的语言区分： 静态网页使用语言：HTML（超文本标记语言）

5、 动态网页使用语言：HTMLASP 或 HTMLPHP 或 HTMLJSP 等。程序是否在服务器端运行，是重要标志。在服务器端运行的程序、网页、组件，属于动态网页，它们会随不同客户、不同时间，返回不同的网页，例如ASP、PHP、JSP、ASP.net、CGI等。运行于客户端的程序、网页、插件、组件，属于静态网页，例如html页、Flash、JavaScript、VBScript等等，它们是永远不变的。,静态网页与动态的区别（二）,区分动态网页与静态网页的基本方法：第一看后缀名(静态网页后缀名一般为htm, html, js等)，第二看是否能与服务器发生交互行为 ； 静态网页是相对于动态网页而言

6、，是指没有后台数据库、不含程序和不可交互的网页。你编的是什么它显示的就是什么、不会有任何改变。静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。,静态网页的用途,网站采用动态网页还是静态网页主要取决于网站的功能需求和网站内容的多少，如果网站功能比较简单，内容更新量不是很大，采用纯静态网页的方式会更简单， 静态网页是网站建设的基础，静态网页和动态网页之间也并不矛盾，为了网站适应搜索引擎检索的需要，即使采用动态网站技术，也可以将网页内容转化为静态网页发布。,HTML语言,什么是HTML语言 HTML （Hyper-Text Markup Language）超文本标记语言是由W3C万维网

7、协议组织颁布的一种描述文件结构的标识语言，主要用于编写万维网中的超文本主页文件 WWW网上最基本的传输单位是Web页面，它们都是用HTML语言来编写的 HTML是一种解释性语言，通过在Web主页文本中加入控制标签，然后由Web浏览器对各种标签进行解释，并在浏览器窗口中实现需要的显示的效果 通常HTML文件的扩展名为“.htm”或“.html”,HTML语言的发展： 80年代末在SGML的基础上产生 1994年，W3C（World Wide Web Consortium）组织对HTML进行了标准化工作 自1990年问世以来，已发行4个版本：HTML 1.0、HTML 2.0、HTML 3.0、H

8、TML 4.0 HTML标准的网站：/pub/www,HTML 文件基本结构(Document Structures), HTML 文件的正文 ,HTML语言,HTML文件的基本结构 网页示例 一个简单的网页示例。 ,HTML语言,HTML程序的特点 HTML程序由一系列的标签（标记）组成 HTML程序可以分为头部（Head）和主体 （Body） 在HTML程序的Head部分中，主要包含了整个页面的信息，其内容通常不会作为实际的网页内容显示出来,HTML语言,HTML程序的特点 浏览器（Browser）负责对HTML程序进行解释执行，并将结果显示出来 不同的浏

9、览器对同一HTML程序的解释会略有差别，显示的结果略有不同 可以方便地在HTML程序中加入如JavaScript等语句,HTML语言,典型的HTML页面的访问过程,浏览器 Client,WWW Server,发出访问某个页面的请求,返回该页面的HTML程序,请求发送页面中包含的其他文件（如图片）,返回相关的文件,HTML文档的编写方法,手工直接编写 记事本等，存成.htm或 .html格式 使用可视化HTML编 辑 器 Frontpage、Dreamweaver等 辅助工具：Fireworks、Flash 由Web 服务器（ 或称HTTP 服务器） 一 方实时动态地生成。,网页文件命名,*.h

10、tm或*.html 无空格 无特殊符号（例如&符号），只可以有下划线“_”，只可以为英文、数字 区分大小写 首页文件名默认为：index.htm 或 index.html,第一张网页（01.htm）, my first page This is my first homepage! ,基本组成部分HTML元素属性,HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的内，并且和元素名之间有一个空格分隔；属性值用“”引起来。,第二张网页（02.htm）, my first page This is my first homepage! ,HTML基本结

11、构的有关元素和元素属性,HEAD元素1 元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。 元素定义HTML文档的标题。与之间的内容将显示在浏览器窗口的标题栏。,HTML基本结构的有关元素和元素属性,HEAD元素2 元素 元素下面可以插入很多很有用的元素属性。下面介绍四种： 用来标记搜索引擎在搜索你的页面时所取出的关键词。,HTML基本结构的有关元素和元素属性,HEAD元素3 元素 用来标记文档的作者。,HTML基本结构的有关元素和元素属性,HEAD元素4 元素 用来标记你的页面的解码方式。,HTML基本结构的有关元素和元素属性,HEAD元素5

12、元素 用来自动刷新网页,练习（03.htm）,编写一个网页，要求3秒钟后自动跳转到西安邮电学院的网站。 my first page 三秒钟后本网页将自动跳转到西安邮电学院首页 ,元素及元素属性1,元素表明是HTML文档的主体部分。在与之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。,元素及元素属性2,元素中有下列元素属性： (1)bgcolor bgcolor属性标志HTML文档的背景颜色。如：bgcolor=#CCFFCC。 例：04.htm,HTML对颜色的控制,HTML对颜色的控制也有自己的语法。HTML使用16进制的RGB颜色值对颜色进行控制。 16 进制的

13、数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.,常见颜色的代码,元素及元素属性3,元素中有下列元素属性： (2)background background属性标志HTML文档的背景图片。如：background=“images/bg.gif。 可以使用的图片格式为GIF，JPG 例：05.htm、06.htm,元素及元素属性4,元素中有下列元素属性： (3)bgproperties=fixed bgproperties=fixed使背景图片成水印效果，即图片不随着滚动条的滚动而滚动。 例：07.htm和08.htm对比,元素及元素属性5,元素中有下列元素属性： (4)text text属性标志HTML文档的正文文字颜色。如：text=“#FF6666”。Text元素定义的颜色将应用于