第1章 网页设计.pptVIP

主要内容 HTML：负责页面结构（1-9） CSS：负责样式表现（10） JavaScript：负责动态行为（11） Web Server：负责网页发布（补充） 教材 网页设计与开发 —— HTML、CSS、JavaScript实例教程 郑哑峰 主编 清华大学出版社 网站的体系结构 现在的网站基本都采用Browse/Server(简称B/S)体系结构，即客户机/服务器体系结构。 WWW客户机和服务器之间的通信通常分为四个步骤： 1)首先客户机通过浏览器向服务器发送HTTP请求，请求一个特定的网页。 2)HTTP请求通过Internet网络传送到服务器。 3)服务器接受这个请求，找到所请求的网页，然后用HTTP协议再将这个网页通过Internet网络发送给客户机。 4)客户机接收这个网页，并在浏览器中显示。 Company name 网页设计与开发 主要内容 了解万维网的用途 了解网页设计的基本概念 认识HTML、CSS、JavaScript 1.1 万维网概述 WWW（World Wide Web）是一个基于超文本（Hypertext）方式的信息检索服务工具。 WWW系统已在教育、科学技术、商业广告、公共关系、大众媒体和娱乐等多方面起着愈来愈重要的作用 。 WWW成为Internet上最受欢迎的应用，它的出现极大的推动了Internet的推广。 WWW获得成功的秘诀在于它制定了一套标准的、 易于人们掌握的超文本标记语言HTML、信息资源的统一定位格式URL 和超文本传送通信协议HTTP，用户掌握后可以很容易地建立自己的网站。 1.2 HTML语言 HTML是Hypertext Markup Language的英文缩写，即超文本标记语言，它是构成Web页面（Web Page）的主要语言。 用HTML编写的超文本文档称为HTML文档，它是由很多标记组成的一种文本文件，HTML标记可以说明文字、图形、动画、声音、表格、链接等 。 使用HTML语言描述的文件，能独立于各种操作系统平台（如UNIX，WINDOWS等），访问它只需要一个WWW浏览器，我们所看到的网页，是浏览器对HTML文件进行解释的结果。 1.2 HTML语言 新浪网的首页 可以通过浏览器直接查看一个页面的HTML源代码，例如在IE浏览器菜单栏上选择“查看?源文件”即可。 1.3 网页设计相关概念 超链接 超链接((Hyper Link))是特殊的文字标识，它指向了WWW中的资源，例如一个网页、声音、文件、网页的一个段落或者WWW中的其他资源等，这些资源均可放在任何一个服务器上。 在网页中，一个超链接可以是一些文字也可以是一张图片。 超链接使得不同Web页面可以互相链接，构成了一个庞大的网（Web） 1.3 网页设计相关概念(1) 统一资源定位器 统一资源定位器(Uniform Resource Locator，URL)用于描述Internet上资源的位置和访问方式。 下面是新华网一个网页的网址： /zlft/2009-02/28/contenthtm 1.3 网页设计相关概念(2) 基本语法： scheme://host.domain:port/path/filename 语法说明： URL通常包括三个部分，第一部分是Scheme，告诉浏览器该如何工作，第二部分是文件所在的主机，第三部分是文件的路径和文件名。 Scheme：定义因特网服务的类型，告诉浏览器如何解析将要打开的文件内容。最流行的类型是 http，其他的参见表1-1。 domain（域）：定义因特网域名，比如：。 host（主机）：定义此域中的主机。如果被省略，缺省的支持 http 的主机是 www，上例中是news。 port(端口)：定义服务的端口号，端口号通常是被省略的。http默认的端口号是 80。 path（路径）：定义服务器上的路径（一个辅助的路径）。如果路径被省略，资源（文档）会被定位到网站的根目录，上例中是“zlft/2009-02/28/”。 filename（文件名）：定义文档的名称。上例中是“contenthtm”。 1.3 网页设计相关概念(3) 网站 网站(Web Site)是一个存放网络服务器上的完整信息的集合体。它包含一个或多个网页，这些网页以一定的方式链接在一起，成为一个整体，用来描述一组完整的信息或达到某种期望的宣传效果。 Internet网络 信息(请求) 信息(响应) HTTP协议 HTTP协议 HTTP协议 HTTP协议 客户机 服务器 1.3 网页设计相关概念(3) 网页 网页(Web pages)是网站的组成部分，制作者可以将需要公布的信息按照一定的方