第1章 网页综述

Web标准
采用Web标准的优点 1．客户端的优点 采用Web标准后，客户端的好处主要体现在以下方面： • 文件下载与页面显示速度更快； • 内容能被更多的用户所访问（包括失明、弱视、色盲等 残障人士）； 2．服务器端的优点 采用Web标准后，服务器端的好处主要体现在以下方面： • 更少的代码和组件，容易维护； • 带宽要求降低（代码更简洁），成本降低；
网站的特点
众多的网页
确定的主题 统一的风格、 便捷的导航、
网站制作的流程：
确定站点的核心内容
－网站的规划
－网站外观的设计
－网页具体制作－ 网站性能测试 －网站发布 －网站更新与维护。
栏目的分层
主页的基本制作流程
指定网页标题
采集网页内容 准备网页图片 设定网页框架
域名的作用
59 .5 1. 24 .3 6
1.方便记忆IP地址
域 发 送
名
ec .h yn u. cn
DNS服务器
2.作为主机头信息 识别请求的网站
浏览器
将主机头为对 应的网站发送给浏览器 Web服务器
返
连接59.51.24.36，发送 域名信息
回
IP 地
HTML超文本标记语言
超文本标记语言HTML作为一种语言，它具有语言的一 般特征，即它是一种符号系统，具有自己的词汇（符号） 和语法（规则）。 所谓标记，就是作记号。如我们写文章时通常用大体字 标记文章的标题，用换行空两格标记一个段落
所谓超文本，就是相比普通文本有超越的地方，如超文 本可以通过超链接转到指定的某一页，而普通文本只能 一页页翻，超文本还具有图像，视频，声音等元素，并 能和用户交互，这些都是普通文本无法达到的
SGML(1985)
HTML(1993)
XML(1998)
XHTML(2000)
VML
CML
……
HTML与编程语言的区别
HTML语言与编程语言有明显不同，首先它不是一种计 算机编程语言，而是一种描述文档结构的语言，或者说 排版语言； 其次HTML是弱语法语言，随便怎么写都可以，计算机 尽力去理解执行，不理解的按原样显示，而编程语言是 严格语法的语言，写错一点点计算机就不执行，报告错 误；
浏览器
浏览器：用户浏览网页所用
浏览器的本质：解释html代码生成我们看到的网 页 目前常见的浏览器（按使用量多少排列）有：IE6、 IE7、IE8、Firefox 3、Safari 4、Google Chrome 2、Opera 10及Netscape Navigator 9
浏览器的logo
网页
网页即是超文本，是通过超文本标记语言HTML （HypeText Markup Language）书写的一种纯文本文 件，
客户通过浏览器看到的包含了如文字、图像、声音和动 画等多媒体信息的每一个页面，其本质是一个纯文本文 件。 浏览器对该纯文本文件进行了解释，才生成了多姿多彩 的网页，除文本外，其它媒体素材（图像、声音、动画 和影像等），都需要保存成单独的文件，通过URL嵌入 到网页文件中。 可以看出，WWW服务主要是通过一个个多媒体网页提 供给用户各种信息的
设定网页背景
创建其他页面元素
网站的后期工作
1、测试网站 2、申请站点域名 3、上传站点内容 4、管理网站 5、宣传自己的网站
网页和网站的制作工具
Adobe的 VS Dreamweaver CS3
Microsoft的 Expression Web
网页制作所需要的软件
基本HTML编写工具

IE7 & IE8
Firefox 3 Netscape Navigator 9
Opera 10
Safari 4
Google Chrome 2
静态网页和动态网页
静态网页是不包含服务器端代码的html文件， web服务器只是负责把静态网页发送给浏览器， 由浏览器解释执行 动态网页中含有服务器端代码，需要先由web服 务器对这些服务器端代码进行解释执行生成客户 端代码后再发送给客户端浏览器
再次HTML语言不像大多数编程语言一样需要编译成指 令后执行，而是每次由浏览器解释执行。
网站
一个网站对应磁盘上的一个文件夹，网站的所有 网页和其他资源文件都会放在该文件夹下或其子 文件夹下，设计良好的网站通常是将网页文档及 其它资源分门别类地保存在相应的文件夹中以方 便管理和维护。这些网页通过链接组织在一起， 其中有个网页称为首页，常命名为index.htm，必 须放在网站的根目录下。 网页中所需要的图片文件一般单独保存在该目录 下一个叫images的文件夹下。
网站结构
Wgzx 首页文件的间接上级目 录，不是网站根目录 首页文件的直接上级目录， 是网站根目录
web
index.htm
style.css
images
about.html
h1.htm
h2.htm
h3.htm
网站目录的建立
因此制作网站的第一步是在硬盘上新建一个文件夹，作为 网站根目录，以后把这个目录上传到服务器上就可以了。 由于我们制作网站一般需要用到Dreamweaver，所以还要 配置网站在Dreamweaver下的开发环境，在Dreamweaver 中新建站点，任意取一个站点名，把刚才新建的那个文件 夹作为站点文件夹就可以了，这样站点目录内的html文件 之间的链接会使用相对Url的形式。 示范 Dreamweaver 安装 ，介绍 建立新站点
《网页设计与制作教程》
侯萍
本书目录
第1章 网页设计制作概述 第2章 网页版面设计基础 第3章 用Dreamweaver CS4创建基本网页 第4章 超级链接 第7章 网页表现语言—— CSS 第8章 框架
第9章 表单
第10章 模版与库
第5章 表格
第6章 网页行为语言—— JavaScript
域名、ip和主机
域名和主机的关系：多对一
即在一台主机上可建立多个网站，这些网站的存放方式 称为“虚拟主机”，通过web服务器上设置“主机头” 进行区别。 域名作用有二，一是将域名发送给DNS服务器解析得到 web服务器的IP地址以进行连接，二是将域名信息发送 给web服务器，通过域名与web服务器上设置的“主机 头”进行匹配确认客户端请求的是哪个网站，若客户端 没有发送域名信息给web服务器，例如直接输入ip，则 web服务器将打开默认网站。
WWW将位于全世界Internet上不同网址的相关 数据信息有机地编织在一起，通过浏览器 （browser）提供一种友好的信息查询界面。
WWW特点 WWW具有三个统一：
1. 统一的资源定位方式： URL （统一资源 定位器，即网址）。 2.统一的资源访问方式：HTTP（超文本传 输协议）。 3. 统一的信息组织方式： HTML （超文本 标记语言）。
DreamWeaver, FrontPage
动态代码编写工具 Microsoft InterDev
页面设计图工具,图形图像工具
动画工具 Flash, Cool3D 上传工具
CuteFtp, LeapFtp Microsoft IIS
Photoshop, Fireworks,ImageReady, Visio
动态网页的特征
同一个网页根据每次请求的不同，可每次显示不 同的内容
因为要显示不同的内容，所以往往需要数据库做 支持 从网页的源代码看，动态网页中含有服务器端代 码，后缀名不能是.htm
Web标准
Web标准的概念 Web标准不是某一种标准，而是一系列标准的集合。网 页主要由三部分组成：结构（Structure）、表现 （Presentation）和行为（Behavior）。对应的标准也分 为三类：结构化标准语言主要包括XHTML和XML，表现标 准语言主要为CSS，行为标准主要包括对象模型W3C DOM、 ECMAScript等。这些标准大部分由W3C起草和发布，也有 一些是其他标准组织制定的标准，如ECMA（European Computer Manufacturers Association）的ECMAScript 标准。
HTML的历史
超文本标记语言HTML是一种建立超文本/超媒体文档的语言，它用 标签标记文档中的文本及图像等各种元素，指示浏览器如何显示这些 元素。HTML的发展历程如图所示 GML(1969) Generalized Markup Language Standard Generalized Markup Language Hyper Text Markup Language eXtensible Markup Language
Web标准
建立Web标准的目的 简单地说，建立Web标准的目的是： • 提供最大利益给最多的网站用户； • 确保任何网站文档都能够长期有效； • 简化代码，降低建设成本； • 让网站更容易使用，能适应更多不同用户和更多网络设 备； • 当浏览器版本更新或者出现新的网络交互设备时，确保 所有应用能够继续正确执行。
Internet为用户提供了各种各样的服务，如WWW， Email，FTP，即时通信等。
WWW
WWW的含义是全球信息网（World Wide Web），简称为Web或“万维网”。它是一个 基于超文本(hypertext)方式的信息查询工具，通 过http协议传输超文本信息。是由欧洲核子物理 研究中心（CERN）研制的。
测试工具
Web服务器和浏览器
网页被放置在Web服务器上
用户通过Url请求web服务器时，web服务器把 相应的网页传送到用户浏览器端
Web服务器的作用：对于静态网页，web服务 器仅仅是定位到网站对应的目录，找到每次请 求的网页传送给客户端。 对于动态网页，web服务器找到该网页后要先 对动态网页中的服务器端程序代码进行执行， 生成静态网页代码再传送给客户端浏览器。