第1章 网页设计与制作基础

《第1章 网页设计与制作基础》由会员分享，可在线阅读，更多相关《第1章 网页设计与制作基础（52页珍藏版）》请在金锄头文库上搜索。

1、网页设计与制作教程 甘友庆 2010.01 1.1 网页与网站的概念 1.2 Web标准 1.3 网页制作的常用软件 1.4 构成网页的基本元素 1.5 网站建设的流程 第 1章 网页设计与制作基础 1.1 网页与网站的概念 1.1.1 Internet 即人们常说的因特网，是当今地球上所有联网计算机和计算机网络的集合。 Internet的起源 Internet是在美国国防部高级研究工程局网络 APPANET的基础上发展起来的 ， 始于 20世纪 60年代末 、 70世纪初 。 Internet的发展 WWW的出现将 Internet推向了民用方面 ， WWW通过良好的界面大大降低了 Inte

2、rnet操作难度 ， 使用户的数量急剧增加 ， 许多政府机构 、 商业公司纷纷加入 。 1.1.1 Internet Internet提供的主要服务 Internet 为我们提供了信息获取、发布和交流的渠道，其服务功能包括： WWW 服务 电子邮件 文件的下载和上传 FTP（文件传输）服务 Usenet News（新闻组）和 BBS（电子公告牌）服务 Telnet（远程登录）服务 网上游戏 个人主页空间 电子商务 1.1.2 网页与网站 WWW： WWW（ World Wide Web， 万维网 ） 是 Internet上基于客户 /服务器体系结构的分布式多平台的超文本超媒体信息服务系统 ，

3、它是Internet的最主要的信息服务 ， 允许用户在一台计算机上通过 Internet存取另一台计算机上的信息 。 它起源于 1989年 3月 ， 由欧洲量子物理实验室 CERN（ the European Laboratory for Particle Physics） 所发展出来的主从结构分布式超媒体系统 。 通过万维网 ， 人们只要通过使用简单的方法 ， 就可以很迅速方便地取得丰富的信息资料 。 用户在通过 Web 浏览器访问信息资源的过程中 ， 无需再关心一些技术性的细节 ， 而且界面非常友好 。 1993年 ， WWW 的技术有了突破性的进展 ， 它解决了远程信息服务中的文字显示

4、、 数据连接以及图像传递的问题 ， 使得 WWW 成为 Internet 上最为流行的信息传播方式 。 另外 ， WWW 还提供传统的 Internet服务 ， 如 Telnet、 FTP 、和 Usnet News等 。 万维网的内核部分是由三个标准构成的： URL/HTTP/HTML 1.1 网页与网站的概念 1.1.2 网页与网站 URL： URL（ Uniform Resoure Locator） 统一资源定位器 ） 是 WWW页的地址 ， 它从左到右由下述部分组成： Internet资源类型 （ scheme） ：指出 WWW客户程序用来操作的工具 。 如 “ http： /” 表示

5、 WWW服务器 ， “ ftp： /” 表示FTP服务器 。 服务器地址 （ host） ：指出 WWW页所在的服务器域名 。 端口（ port） ：有时 （ 并非总是这样 ） ， 对某些资源的访问来说 ， 需给出相应的服务器提供端口号 。 路径 （ path） ：指明服务器上某资源的位置 （ 通常有目录 /子目录 /文件名这样结构组成 ） 。 URL地址格式排列为： scheme： /host： port/path，例如 http： / URL地址 。 HTTP： HTTP协议 （ Hyper Text Transfer Protocol） ,即超文本传输协议 ，是用于从 WWW服务器传输超

6、文本 （ HTML） 到本地浏览器的传送协议 。 HTTP协议是基于 “ 请求 /响应 ” 模式的协议 ， 一个客户机与服务器建立连接后 ， 发送一个请求给服务器服务器 ， 这个请求具有特定的格式 ， 服务器接到请求后 ， 给予相应格式的响应信息 。 HTML： HTML（ Hypertext Markup Language） 超文本标记语言的缩写 ，它是构成 Web页面 （ Page） ， 用来表示 Web页面的符号标记语言 。 通过 HTML，将所需要表达的信息按某种规则写成 HTML文件 ， 通过专用的浏览器来识别 ， 并将这些 HTML文件翻译成可以识别的信息 ， 就是所见到的网页 。

7、 1.1 网页与网站的概念 1.1.2 网页与网站 网页（ Web page）是按照网页文档规范编写的一个或多个文件，它可以在 WWW上传输，并被浏览器翻译成页面显示出来。分为静态网页和动态网页。 静态网页：指客户端的浏览器发送 URL请求给 WWW服务器，服务器查找需要的超文本文件，不加处理直接下载到客户端，运行在客户端的页面是已经事先做好并存放在服务器中的网页。 动态网页：利用服务器服务器端动态技术生成的网页。 服务器端动态技术：则需要与客户端共同参与，客户通过浏览器发出页面请求后，服务器根据 URL携带的参数运行服务器端程序，产生的结果页面再返回客户端。 主页： 就是网站默认的首页。主页

8、默认的文件名为 index.htm或default.htm。 网站（ Web site）是一组相关网页以及有关的文件、脚本和数据库等内容的有机集合，即若干个网页文件经过规划组织后彼此相连而形成完整结构的信息服务系统。网页是网站的基本信息单位。网站通过WWW上的 HTTP服务器提供服务。网站上的网页集合以及其他文件的入口页或起始页称为主页（ home page）。 网站也是互联网信息服务类企业的代名词，如新浪网站、搜狐网站等。 1.2.1为什么要建立 Web标准 典型的浏览器有 Netscape和 IE两种 ， 在 1996 1999年期间 ， 为了兼容 Netscape和 IE， 网站不得不为

9、这两种浏览器编写不同的代码 。 为了解决这些问题 ， 就需要建立一种普遍认同的标准来结束这种无序和混乱 。 商业公司 （ Netscape、Microsoft等 ） 也终于认识到统一标准的好处 ， 因此在 W3C（ World Wide Web Consortium， http:/www.w3.org/） 的组织下 ， 网站标准开始被建立 （ 以 1998年 2月 10日发布 XML 1.0为标志 ） ， 并在网站标准组织的督促下推广执行 。 1.2.2 什么是 Web标准 Web标准是一些规范的集合，是由 W3C和其他的标准化组织共同制定的，以用它来创建和解释网页的基本内容。这些规范是专门为

10、了那些在网上发布的可向后兼容的文档所设计，使其能够被大多数人所访问。 1.2 Web标准 1.2 Web标准 网页主要由三部分组成，结构、表现和行为，对应的标准也分三方面：结构语言主要包括 XHTML和 XML；表现标准语言主要是 CSS；行为标准主要包括对象模型（ DOM）、 ECMAScript等。 1. 结构标准语言 (1) XML XML（ Extensible Markup Language，可扩展标识语言）目前推荐遵循的是 W3C于 2000年 10月 6日发布的XML1.0。 XML最初设计的目的是弥补 HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的

11、转换和描述。 (2) XHTML XHTML（ Extensible HyperText Markup Language，可扩展超文本标识语言）是 HTML向 XML过渡的一个桥梁。是一个引导人们逐步走向规范、走向 XML的过渡方案。XHTML虽然有“ X”但它并不能扩展，只是在 HTML的基础上严格遵循 XML规范。 1.2 Web标准 2. 表现标准语言 当讨论 Web标准时，总是提及结构和表现分离的重要性。结构是文档中的主体部分，由语义化、结构化的标记组成。表现是赋予内容的一种样式，在大多数情况下，表现就是文档看起来的样子。尽可能地把结构和表现相分离，这样当表现变化时，不用去更改结构。

12、CSS（ Cascading Style Sheets，层叠样式表）目前推荐遵循的是 W3C于 1998年 5月 12日推荐的 CSS2（ http:/www.w3.org/TR/CSS2/）。 W3C创建 CSS标准的目的是以 CSS取代 HTML表格式布局、帧和其他表现的语言。纯 CSS布局与结构式 XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。 3. 行为标准 (1) DOM 根据 W3C DOM规范（ http:/www.w3.org/DOM/），DOM（ Document Object Model，文档对象模型）是一种与浏览器、平台、语言的接口，使得用户可以

13、访问页面其他的标准组件。简单理解， DOM解决了 Netscaped的JavaScript和 Microsoft的 JScript之间的冲突，给予 Web设计师和开发者一个标准的方法，让他们来访问站点中的数据、脚本和表现层对象。 (2) ECMAScript ECMAScript是 ECMA（ European Computer Manufacturers Association，欧洲计算机制造协会）制定的标准脚本语言。目前推荐遵循的是 ECMAScript 262。 1.2 Web标准 忆江南 (1)唐 .白居易江南好，风景旧曾谙。 (2)日出江花红胜火，春来江水绿如蓝， (3)能不忆江南。

14、作者介绍 772 846 ，字乐天，太原 (今属山西 )人。唐德宗朝进士，元和三年 (808)拜左拾遗，后贬江州(今属江西 )司马，移忠州 (今属四川 )刺史，又为苏州 (今属江苏 )、同州 (今属陕西大荔 )刺史。晚居洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人中的佼佼者，所作对后世影响甚大。注释 (1)据乐府杂录，此词又名谢秋娘，系唐李德裕为亡姬谢秋娘作。又名望江南、梦江南等。分单调、双调两体。单调二十七字，双凋五十四字，皆平韵。 (2)谙 (音安 )：熟悉。 (3)蓝：蓝草，其叶可制青绿染料。品评此词写江南春色，首句 “ 江南好 ” ，以一个既

15、浅切又圆活的 “ 好 ” 字，摄尽江南春色的种种佳处，而作者的赞颂之意与向往之情也尽寓其中。同时，唯因 “ 好 ” 之已甚，方能 “ 忆 ” 之不休，因此，此句又已暗逗结句 “ 能不忆江南 ” ，并与之相关阖。次句 “ 风景旧曾谙 ” ，点明江南风景之 “ 好 ” ，并非得之传闻，而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了 “ 好 ” 字，又照应了 “ 忆 ” 字，不失为勾通一篇意脉的精彩笔墨。三、四两句对江南之 “ 好 ” 进 行形象化的演绎，突出渲染江花、江水红绿相映的明艳色彩，给人以光彩夺目的强烈印象。其中，既有同色间的相互烘托，又有异色间的相互映衬，充分显示了作者善于著色的技巧。篇末，以 “ 能不忆江南 ” 收束全词，既托出身在洛阳的作者对江南春色的无限赞叹与怀念，又造成一种悠远而又深长的韵味，把读者带入余情摇漾的境界中。 内容： 结构 (Structure) 用 XML处理： 忆江南 唐 . 白 居 易 江南好 . 772 846 ， 字 乐 天 . 据 乐府杂录 . 此词写江南春色 . 标题 忆江南 (1) 作者 唐 .白居易 正文