第1章 网页设计简介.ppt

1、第1章 网页设计简介,教 材,网页设计与开发 HTML、CSS、JavaScript 郑娅峰 主编清华大学出版社 2009.7 HTML、CSS、JavaScript 标准教程 本书编委会电子工业出版社 2011.9,主要内容,了解万维网的用途,了解网页设计的基本概念,认识HTML、CSS、JavaScript,1.1 万维网概述,WWW（World Wide Web）是一个基于超文本（Hypertext）方式的信息检索服务工具。 超文本结构是采用由指针连接的超网状结构，通过指针连接方式多方位组织信息源。 WWW 系统使用多媒体信息源，如文本、图形、图像、声音、视频等，可以把分散在不同主机上的

2、资源有机地组织起来，超文本与多媒体的结合，被称为“超媒体”（hypermedia）。,1.1 万维网概述,WWW 系统已在教育、科学技术、商业广告、公共关系、大众媒体和娱乐等多方面起着愈来愈重要的作用 。 WWW 的应用成为Internet上最受欢迎的应用之一，它的出现极大的推动了Internet的推广。 WWW 获得成功的秘诀在于它制定了一套标准的、 易于人们掌握的超文本开发语言HTML、信息资源的统一定位格式URL 和超文本传送通信协议HTTP，用户掌握后可以很容易地建立自己的网站。,1.2 HTML语言,HTML计算机网络信息发布“母语” HTML是Hyper text Markup L

3、anguage的英文缩写，即超文本标记语言，它是构成Web页面（Page）的主要工具。 用HTML编写的超文本文档称为HTML文档，它是由很多标记组成的一种文本文件，HTML标记可以说明文字、图形、动画、声音、表格、链接等 。 使用HTML语言描述的文件，能独立于各种操作系统平台（如UNIX，WINDOWS等），访问它只需要一个WWW浏览器，所看到的网页，是浏览器对HTML文件进行解释的结果。,1.2 HTML语言,网页示例 可以通过浏览器直接查看一个页面的HTML源代码，例如在IE浏览器菜单栏上选择“查看源文件”即可。,1.3 网页设计相关概念,超链接 超链接(Hyper Link)是特殊的

4、文字标识，它指向了WWW中的资源，例如一个网页、声音、文件、网页的一个段落或者WWW中的其他资源等，这些资源均可放在任何一个服务器上。在网页中，一个超链接可以是一些文字也可以是一张图片。,1.3 网页设计相关概念,统一资源定位器 统一资源定位器(Uniform Resource Locator，URL)用于描述Internet上资源的位置和访问方式。 URL示例：, ,1.3 网页设计相关概念,基本语法： scheme:/host.domain:port/path/filename 语法说明： URL通常包括三个部分，第一部分是Scheme（计划、方案），告诉浏览器该如何工作，第二部分是文件所

5、在的主机，第三部分是文件的路径和文件名。 Scheme：定义因特网服务的类型，告诉浏览器如何解析将要打开的文件内容。最典型应用是 http，其他的参见表1-1。 domain（域）：定义因特网域名，比如：。 host（主机）：定义此域中的主机。如果被省略，缺省的支持http 的主机是www，上例中是news。 port(端口)：定义服务的端口号，端口号通常是被省略的。http默认的端口号是 80。 path（路径）：定义服务器上的路径（一个辅助的路径）。如果路径被省略，资源（文档）会被定位到网站的根目录，上例中是“zlft/2009-02/28/”。 filename（文件名）：定义文档的名称

6、。上例中是“content_10918112.htm”。,1.3 网页设计相关概念,网站 网站(Web Site)是一个存放网络服务器上的完整信息的集合体。它包含一个或多个网页，这些网页以一定的方式链接在一起，成为一个整体，用来描述一组完整的信息或达到某种期望的宣传效果。 网页 网页(Web pages)是网站的组成部分，制作者可以将需要公布的信息按照一定的方式分类，放在每个网页上，网页里可以有文字、图象、声音及视频信息等。网页可以看成是一个单一体，是网站的一个元素。,1.3 网页设计相关概念,首页 首页(Home page)，也可以称之为主页，它是一个单独的网页，和一般网页一样，可以存放各种

7、信息，同时又是一个特殊的网页，作为整个网站的起始点和汇总点，是浏览者访问一个网站的第一个网页。 一个网站的首页一般用于简介、导航、索引。 网页的扩展名 *.htm *.html *.shtml *.asp *.aspx *.jsp *.php *.css *.xml *.xhtml,1.4网页制作开发工具,编辑工具 HTML代码可以使用Windows操作系统中自带的记事本进行编辑。如果你正在使用的话，你可以使用它自带的记事本（Notepad）程序，依次点击“开始菜单程序附件”找到该程序。,1.4网页制作开发工具,用记事本编辑网页示例： 这是一个简单的HTML代码，从菜单选择“文件另存为”，将该

8、文本文件命名为“P1-1.htm”。在文件夹中双击文件名“P1-1.htm”，即可用IE浏览器打开该网页文件。,1.4网页制作开发工具,文本编辑器 不仅在记事本中可以编写HTML代码，任何文本编辑器都可以编写HTML。比如写字板、word等，但保存的时候必须保存为.html或.htm格式。,1.4网页制作开发工具,EditPlus 是一款非常好用的 HTML 编辑器，它除了支持颜色标记、HTML 标记，同时支持 C、C+、Perl、Java等其他语言，另外，它还内建完整的HTML & CSS 指令功能，可提高编写效率。,1.4网页制作开发工具,FrontPage（可视化编辑软件） Micros

9、oft公司,1.4网页制作开发工具,Dreamweaver（可视化编辑软件） Adobe公司,1.4网页制作开发工具,浏览工具 浏览器是阅读WWW上的信息资源的一个软件程序。 Internet Explorer IE浏览器 Opera 欧普拉浏览器 Mozilla Firefox “火狐狸”或“火狐”浏览器 Tencent Treveler 腾讯TT浏览器 Google Chrome 谷歌浏览器 Maxthon Browser 遨游浏览器,1.5 网页制作相关技术,CSS CSS就是一种叫做样式表（Style Sheet）的技术。也有的人称之为层叠样式表（Cascading Style Sheet）。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 JavaScript JavaScript是由 Netscape公司开发的一种脚本语言（scripting langu