1、HTML+CSS+JavaScript网页设计目 录CONTENTS第一章 网页设计综述第二章 HTML语言第三章 CSS第四章 JavaScript第五章 网页设计综合案例第一章 网页设计综述01第一章 网页设计综述 Web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。第一章 网页设计综述1.1 We
2、b起源1.2 Web工作原理1.3 浏览器1.4 网页开发工具1.5 基本概念1.6 网页开发技术简介1.7 牛刀小试-做一个简单的网页目 录第一章 网页设计综述Web 前身Web的应用架构第一个Web服务器Web技术标准1980年Tim Berners-Lee负责的Enquire（Enquire Within Upon Everything的简称）项目。Web的应用架构是由英国人Tim Berners-Lee在1989年提出的1990年11月第一个Web服务器info.cern.ch开始运行，由Tim Berners-Lee编写的图形化Web浏览器第一次出现在人们面前。1991年，CERN（
3、European Particle Physics Laboratory）正式发布了Web技术标准。目前，与Web相关的各种技术标准都由著名的W3C组织（World Wide Web Consortium）管理和维护。1.1 Web起源第一章 网页设计综述1.2 Web工作原理用户通过Web来访问网络资源是，用户所使用的电脑一般叫做客户端，而存放网络资源的电脑叫做服务器，客户端和服务器之间的访问是通过HTTP（Hypertext Transfer Protocol，超文本传输协议）来完成的。用户在客户端的浏览器地址栏中输入所要访问网站的统一资源定位符（Uniform Resource Loca
4、tor，URL），就会向指定的Web服务器发送一个HTTP请求，告诉Web服务所要访问的资源。Web服务器接收到客户端的请求后，通常还会调用部署在应用服务器上的应用来进行数据库访问等操作，最后会把客户端所请求的资源通过HTTP协议发送给客户端。第一章 网页设计综述图1-1 Web工作原理第一章 网页设计综述1.3 浏览器浏览器是一个安装在计算机中的应用软件，它用来显示使用HTML（HyperText Markup Language，超文本标签语言）语言编写的网页文件中的文字、图像、超链接及其他信息。现在常用的浏览器有Internet Exploer、Firefox、Chrome和Opera等。
5、1.3.1 Microsoft Internet ExplorerInternet Explorer是微软公司推出的一款网页浏览器。原称Microsoft Internet Explorer（6.0以前的版本）和Windows Internet Explorer(7.0、8.0、9.0、10.0、11.0等版本)，简称“IE浏览器”。在windows 10上，最新的浏览器为Microsoft Edge。第一章 网页设计综述1.3.2 FirefoxMozilla Firefox，中文俗称“火狐”，是一个开放源代码的网页浏览器，使用Gecko引擎（非IE内核），支持Windows、Mac OS
6、及GNU/Linux等多种操作系统。1.3.3 Google ChromeGoogle Chrome，是一个由Google公司开发的网页浏览器。该浏览器是基于WebKit等开源软件所撰写，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。第一章 网页设计综述1.3.4 OperaOpera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。可以在Windows、Mac和Linux三个操作系统平台上运行。Opera浏览器与其他浏览器相比，更快速、小巧，其标准兼容性获得了国际上的最终用户和业界媒体的承认和推崇。第一章 网页设计综述第一章
7、 网页设计综述1.4 网页开发工具可用于开发网页的工具很多，从最简单的纯文本编辑工具记事本（NotePad）、增强版的文本编辑工具EditPlus，到专门的网页设计工具Dreamweaver、WebStrom等，都可以用于网页的设计与开发。1.4.1 记事本记事本是Windows系统中的一个纯文本编辑器，具备最基本的的编辑功能，其体积小巧、启动快、占用内存低、容易使用。使用记事本编辑代码不会产生冗余的代码。第一章 网页设计综述1.4.2 EditPlusEditPlus是一款由韩国Sangil Kim（ES-Computing）出品的小巧但功能强大的文本编辑器。EditPlus是一个非常好用的
8、HTML编辑器，它除了支持颜色标签、HTML 标签，还内建完整的HTML & CSS1 指令功能，对于习惯用记事本编辑网页的用户，它可帮你节省大量的网页制作时间。1.4.3 DreamweaverAdobe Dreamweaver，简称”DW”，中文名称为”梦想编织者”，是美国Macromedia公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。第一章 网页设计综述1.4.4 WebStormWebStorm 是Jetbrains公司旗下一款JavaScri
9、pt 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”等。其提供的智能的代码补全、代码格式化、HTML代码提示、代码重构等功能，为网页设计与开发提供了极大的便利。第一章 网页设计综述第一章 网页设计综述1.5 基本概念从事网页设计工作，需要掌握和了解一些相关的专业术语，如WWW、HTTP、URL、Internet、W3C等。1.5.1 Internet网络Internet，中文正式译名为因特网，又叫做国际互联网。互联网实现了全球资源的共享，形成了一个能够共同参与、相互交流的互动平台。通过互联网，远在千里之外的朋友可以相互发送邮件、协同完成一个项目、共同娱乐
10、。Internet是在美国早期的军用计算机网ARPANET（阿帕网）的基础上经过不断发展变化而形成的。它是由那些使用公用语言互相通信的计算机连接而成的全球网络。一旦你连接到它的任何一个节点上，就意味着您的计算机已经连入Internet网上了。第一章 网页设计综述1.5.2 WWWWWW是环球信息网的缩写，（亦作“Web”、“WWW”、“W3”，英文全称为“World Wide Web”），中文名字为“万维网”，“环球网”等，常简称为Web。 分为Web客户端和Web服务器程序。 WWW可以让Web客户端（常用浏览器）访问浏览Web服务器上的页面。Web是一个由许多互相链接的超文本组成的系统，通
11、过互联网访问。在这个系统中，每个有用的事物，称为一样“资源”；由一个全局“统一资源标识符”（URI）标识；这些资源通过超文本传输协议（Hypertext Transfer Protocol）传送给用户，而后者通过点击链接来获得资源。万维网并不等同互联网，万维网只是互联网所能提供的服务其中之一，是靠着互联网运行的一项服务。第一章 网页设计综述1.5.3 URLURL（Uniform/Universal Resource Locator的缩写，统一资源定位符）是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个资源都有一个唯一的URL，它包含的信息
12、指出文件的位置以及浏览器应该怎么处理它。一个完整的URL包括访问协议类型、主机地址、路径和文件名称等几个部分。其中”访问协议类型”表示采用什么协议访问哪类资源，以便浏览器决定用什么方法获得资源，第一章 网页设计综述1.5.4 HTTP超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议，是万维网交换信息的基础。它详细规定了浏览器和Web服务器之间相互通信的规则，它允许将超文本标签语言编写的文档从Web服务器传送到Web浏览器。1.5.5 W3C万维网联盟（英语：World Wide Web Consortium，简称W3C），中
13、文名字为“万维网联盟”，又称W3C理事会。万维网联盟是国际上最著名的标准化组织。1994年10月在麻省理工学院（MIT）计算机科学实验室成立。该组织发不了很多Web技术标准和实施指南，如超文本标签语言（HTML）、可扩展标签语言（XML）等。第一章 网页设计综述第一章 网页设计综述1.6 网页开发技术简介HTML、CSS和JavaScript是设计网页需要掌握的三种基本技术，HTML用于定义网页的内容，CSS用于设计网页元素的表现形式，而JavaScript是与访问网页的用户进行交互的工具。第一章 网页设计综述1.6.1 HTML简介HTML（HyperText Markup Language
14、，超文本标签语言），是一种专门用于创建Web超文本文档的编程语言，它能告诉Web浏览程序如何显示Web文档（即网页）的信息，如何链接各种信息。HTML是一种标签式的语言，通过各种不同的标签来描述网页中的文本、图片和声音等网页元素。使用HTML标签设计的网页文件是一个纯文本文件，该文件中的HTML代码由许多元素组成，而前台浏览器通过解释这些元素显示各种样式的文档。使用HTML语言可以在其生成的文档中含有其它文档，或者含有图像、声音、视频等，从而形成超文本第一章 网页设计综述下图是青岛职业技术学院的网站首页在浏览器中的样子：图1-2 青岛职业技术学院网站首页 第一章 网页设计综述这个首页网页文件的
15、HTML源代码基本内容和结构如下图所示：该文件需要遵循的XML规范网页的头部定义浏览器标题提示网页的文字、图片等元素都放在标签之中定义一个无序列表网页文件的开始标签第一章 网页设计综述 HTML语言发展至今，先后经历了HTML 1.0、HTML 2.0、HTML 3.0、HTML.4.0、HTML 4.01等5个主要的版本。值得一提的是W3C组织于2000年底发布的XHTML，作为一个更严谨纯净的HTML版本，其目的是为了实现HTML向XML的过渡，其可扩展性和灵活性将适应未来网络应用的需求，HTML 5是最新的HTML版本，W3C正式于2008年1月正式发布草案，2014年10月定稿。由于各
16、浏览器对HTML 5的支持不统一，所以其应用受到一定限制，但其优秀的跨平台特性，使得应用HTML 5开发的应用也越来越多。第一章 网页设计综述1.6.2 CSS简介层叠样式表(英文全称：Cascading Style Sheets)，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标签性语言，可以用来表现HTML或XML等文件样式。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。使用CSS样式可以控制许多仅使用HTML无法控制的属性。HTML是一种标签性语言。当在浏览器中打开一个HTML网页时，浏览器将读取该网页中的HTML标签，并根据内置的解析
17、规则将网页元素呈现出来。CSS决定浏览器将如何描述HTML元素的表现形式。换而言之，CSS以HTML为基础，提供了丰富的样式，可以设置网页元素的字体、颜色、背景及整体排版等，还可以针对不同的浏览器设置不同的样式。1996年12月，W3C发表了第一个有关样式的标准CSS1，1998年5月发布了CSS2，目前CSS最新版本为CSS3。第一章 网页设计综述例如，下面这段HTML代码 ,在网页中的显示结果如图1-3所示： 图1-3 标签的默认显示样式第一章 网页设计综述如果我们使用CSS定义了这个标签的默认样式后，上面的HTML代码在网页中的显示就是这个样子：图1-4 使用CSS改变标签的默认显示样式
18、第一章 网页设计综述1.6.3 JavaScript简介JavaScript是一种基于对象（Object）和事件驱动（Event Driven），并具有安全性能的脚本语言，具有简单、动态、弱数据类型和跨平台等特性。现在广泛用于浏览器客户端，通过JavaScript可以设计出与用户进行交互并相应相应事件的动态网页，例如设计出下拉菜单、实现图片轮播等动态效果，给HTML网页增加动态功能。一个完整的JavaScript实现是由以下3个不同部分组成的：ECMAScript：描述了JavaScript语言的组成、语法和基本对象。文档对象模型（DOM）：描述处理网页内容的方法和接口。浏览器对象模型（BOM
19、）：描述与浏览器进行交互的方法和接口。第一章 网页设计综述 通过前面的学习，我们已经对网页设计的基本概念、一个网页的基本结构、设计网页需要的HTML、CSS和JavaScript等技术，有了一个基本的了解，下面我们使用EditPlus来做一个简单的仿照百度网站首页的网页：图1-5 百度网站的首页1.7牛刀小试-做一个简单的网页第一章 网页设计综述1.7.1 准备工作在设计一个网站时，通常需要将网站所需的图片文件、CSS样式文件、HTML网页文件、JavaScript脚本文件放在不同的目录下，所需建立的基本目录结构如下图所示：网站根目录存放CSS样式文件的子目录存放HTML网页文件的子目录存放图
20、片文件的子目录存放JavaScript文件的子目录图1-6 网站的基本目录结构将百度网站的图标这个图片文件放在images目录下。第一章 网页设计综述1.7.2 编写HTML代码 打开EditPlus，选择File-New-HTML Page，EditPlus会生成一个网页文件的基本结构，只需要把百度首页的百度标识图片、搜索内容输入框和”百度一下”按钮等三个网页元素对应的HTML代码输入在网页文件中，就可以得到一个类似于百度首页的网页了。网页源代码如下：图1-7 仿百度首页的网页基本HTML代码第一章 网页设计综述 把这个网页存储到上面建好的html目录下，文件名为：index.html。然后
21、，在浏览器中打开这个网页文件，显示的结果是这样子的：图1-8 仿百度首页网页在浏览器中的显示结果 这个网页离我们经常使用的百度首页的显示效果差别还很大，下面就需要使用CSS来设计这三个基本的网页元素的样式了。第一章 网页设计综述1.7.3 设计CSS样式 对于刚才设计好的这个网页，可以使用CSS样式来实现网页内容居中显示、搜索内容输入框大小修改、“百度一下”按钮颜色和对齐方式等效果。添加的CSS样式代码如下图所示：图1-9 仿百度首页网页添加的CSS样式代码第一章 网页设计综述1.7.4 添加CSS样式后网页的显示效果使用CSS样式修改了网页元素的对齐方式、字体大小、颜色等默认的显示效果后，所得到的仿百度首页的网页，在浏览器中显示效果就是这样子了： 图1-10添加样式后网页在浏览器中的显示结果
