Web网页设计与前端开发案例教程(第三版)

第1章 网页设计概述 在互联网高速发展的今天，网络已成为人们生活的一部分，成为人们获取信息资源的重要途径。信息的呈现离不开网页这个重要的界面，网页的主要作用是采用一定的手段将用户需要的信息与资源进行组织，通过网络呈现给用户。网页设计是传统设计与信息、科技和互联网结合而产生的，是交互设计的延伸和发展，是在新媒介和新技术支持下的一个全新的设计创作领域。 随着网络技术及其带宽的提高，网页的构成元素也发生了很大的变化。20世纪90年代末，网页的构成元素主要就是大量的文本、表格(Table)、超链接、极少数量的静态图像和 GIF动图。如今的网页设计往往要结合动画、图像特效与后台的数据交互等，除了以上的构成元素外又增加了图像、动画、视频、音乐、横幅广告以及多种动态效果。 在进行网站制作前，首先要进行网站页面的整体设计。一个网站是由若干个网页构成的，网页是用户访问网站的界面。因此，通常意义上的网站设计，指的是网站中各个页面的设计。而网页设计中，*先提到的就是网页的布局。布局是否合理、美观，将直接影响到用户的阅读体验及访问时长。 1.1 常用术语 1．URL 客户机通过超文本传送协议(Hypertext Transfer Prtcl，HTTP)与 Web服务器完成交互，用户要查询的某一台 Web服务器是通过统一资源定位符(Uniform Resource Locator，URL)来指定的。URL是 Internet(因特网)上标准资源的地址，是 Internet上用来描述信息资源的字符串。 Internet上的每个文件都有唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。 与在计算机中根据指明的路径查找文件类似，它是在万维网(World Wide Web，WWW)中浏览超文本文档时保证准确定位的一种机制。它既可指向本地计算机硬盘上的某个文件，也可指向 Internet上的某一个网页。也就是说，通过 URL可访问 Internet上任何一台主机或者主机上的文件和文件夹。它包含被访问资源的类型、服务器的地址、文件的位置等。 URL一般格式如下： 访问协议://服务器主机域名或 IP地址［:端口号］/路径/文件名例如。 (1)访问协议：说明信息资源的类型。例如， http://表示 WWW服务器，ftp://表示 FTP服务器，mms://表示流媒体传送协议。 (2)服务器主机域名或 IP地址：指出信息资源所在的服务器的主机地址。 (3)端口号：默认为80，一般省略。 (4)路径：指明某个信息资源在服务器上所处的位置。 (5)文件名：给出了信息资源文件的名称，如果缺少了路径和文件名，则 URL默认指向 Web站点的首页(Homepage)。首页的文件名默认为 index.htm或 default.htm。 2．WWW WWW可以简称 Web、W3、3W等，它是基于超文本的信息查询和信息发布系统。 Web就是以 Internet上众多的 Web服务器所发布的相互链接的文档为基础组成的一个庞大的信息网，它不仅可以提供文本信息，还可以提供声音、图形、图像以及动画等多媒体信息，它为用户提供了图形化的信息传播界面——网页。 WWW采用 B/S(Browser/Server)结构，即浏览器/服务器结构。它是随着 Internet技术的兴起，对 C/S(客户机/服务器)结构的一种变化或改进的结构。在这种结构下，用户工作界面是通过 WWW浏览器来实现的，主要事务逻辑在服务器端实现，很少部分事务逻辑在前端实现。这样的好处是大大简化了客户端的计算机载荷，减少了系统维护与升级的成本和工作量，降低了用户的总体成本。因此，用户只需要安装浏览器即可浏览页面，不需要知道服务器端使用什么操作系统或服务器端怎么处理浏览器发出的请求(Request)，可以方便查看自己想看到的内容。 要访问万维网上的一个网页，或者其他网络资源时，首先在浏览器上输入想访问的网页的统一资源定位符，或者通过超链接方式链接到该网页或网络资源。然后 URL的服务器名部分被分布于全球的因特网数据库(称为域名系统)解析，并根据解析结果确定服务器的 IP地址。接着向该 IP地址的服务器发送一个 HTTP请求。通常， HTML(Hypertext Markup Language，超文本标记语言)文本、图片和构成该网页的一切其他文件很快会被逐一请求并发送回用户。*后浏览器把 HTML、CSS和其他接收到的文件所描述的内容，加上图像、链接和其他必需的资源，显示给用户，这就是用户看到的网页。 总体来说， WWW采用客户机/服务器的工作模式，工作流程如图1-1所示。 图1-1 WWW工作流程 (1)用户使用浏览器或其他程序建立客户机与服务器连接，并发送浏览请求。 (2)Web服务器接收到请求后，返回信息到客户机。 (3)通信完成，关闭连接。 3．浏览器 浏览器是万维网服务的客户端浏览程序，可向万维网服务器发送各种请求，并对从服务器发来的超文本信息和各种多媒体数据格式进行解释、显示和播放。大部分的浏览器本身支持除了 HTML之外的广泛的格式，如 JPEG、PNG、GIF等图像格式，并且能够扩展支持众多的插件(Plug-ins)。另外，许多浏览器还支持其他的 URL类型及其相应的协议，如 FTP、Gopher、 HTTPS(HTTP的加密版本)。 常见浏览器有 Microsoft(微软)公司的 IE、Mozilla公司的 Firefox、Apple(苹果)公司的 Safari、腾讯 TT、搜狗浏览器、百度浏览器等，可以搜索、查看和下载 Internet上的各种信息。 4．网页 WWW通过网页将信息提供给用户。网页是 WWW浏览的*基本的单位，按照网页功能的简单划分，网页可以分为首页和普通页面，并构成多级的网络结构。 网页是由 HTML或者其他语言编写的，通过浏览器解释后供用户获取信息的页面，它又称为 Web页，其中可包含文字、图像、表格、动画和超链接等各种网页元素，以表达丰富多彩的信息。网页实际上只是一个纯文本文件，它通过各式各样的标记对页面上的文本、图片、表格、声音等元素进行描述(如字体、颜色、大小)，而浏览器则对这些标记进行解释并生成页面。 5．网站 网站就是完成特定目标的一个或多个网页的集合。网站是因特网上一块固定的面向全世界发布消息的地方，由域名(也就是网站地址)和网站空间构成，通常包括首页和其他具有超链接文件的页面。按网站的内容，网站可分为门户网站、职能网站、专业网站和个人网站等。 1.2 Web开发技术 Web开发技术经历了重大演变。*早的网页仅仅由静态文档构成，用户浏览时只能被动接受网页内容。这与传统媒体相比没有什么变化。随着网络技术的发展，不仅可以在网页中嵌入程序，还可以在运行过程中向网页添加动态内容，用户可以与网页进行交互，实现了全新的媒体形式。 1.2.1 网页编程技术 目前网站上常见的计算器、聊天室、论坛、留言本、网上购物等服务必须得到网页编程技术的支持。根据程序运行地点不同，网页编程技术又分为客户端编程技术与服务器端编程技术。 1．客户端编程技术 客户端编程技术不需要与服务器交互，实现功能的代码往往采用脚本语言(Scripting Language)形式直接嵌入网页中。服务器发送网页给用户后，网页在客户端的浏览器中直接响应用户的动作(Action)。常见的客户端编程技术包括 JavaScript、JavaApplet、DHTML、ActiveX和 VRML等。 2．服务器端编程技术 服务器端编程技术需要服务器端和客户端共同参与。当用户通过浏览器发出页面请求后，服务器根据 URL携带的参数运行服务器端动态程序，产生结果页面再返回客户端。一般涉及数据库操作的网页，如注册、登录、查询、购物等应用都需要服务器端动态程序。典型的服务器端编程技术有 ASP、PHP、JSP、ASP.NET等。 1.2.2 静态网页与动态网页 按网页的表现形式可将网页分为静态网页和动态网页。静态网页和动态网页各有特点，网站采用动态网页还是静态网页主要取决于网站的功能需求和网站内容的多少，如果网站功能比较简单，内容更新量不是很大，采用纯静态网页会更简单；反之一般要采用动态网页来实现。 1．静态网页 在网站设计中，纯粹 HTML格式的网页通常称为静态网页，静态网页是标准的 HTML文件，它的文件扩展名是.htm、.html，可以包含文本、图像、声音、 Flash动画、客户端脚本和 ActiveX控件及 Java小程序等。静态网页是网站建设的基础，早期的网站一般都是由静态网页制作的。 静态网页相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。静态网页更新起来相对比较麻烦，适用于一般更新较少的展示型网站。实际上静态网页也不是完全静态的，它也可以出现各种动态的效果，如 GIF格式的动画、 Flash动画、滚动字幕等。对于静态网页，用户可以直接双击，看到的效果与访问服务器是相同的。 1)静态网页的特点 (1)静态网页的每个网页都有一个固定的 URL，静态网页的网址形式通常为，网页 URL以.htm、.html、.shtml等常见形式为后縀，而不含有“?”。 (2)网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件。 (3)静态网页的内容相对稳定，因此容易被搜索引擎检索。 (4)静态网页没有数据库的支持，在网站制作和维护方面的工作量较大。 (5)静态网页的交互性较差，在功能方面有较大的限制。 2)静态网页的工作流程 在静态 Web程序中，客户端使用 Web浏览器经过网络连接到服务器上，使用 HTTP发起一个请求，告诉服务器现在需要得到哪个页面，所有的请求交给 Web服务器，之后 Web服务器根据用户的需要，从文件系统(存放了所有静态页面的磁盘)取出内容。之后通过 Web服务器将内容返回给客户端，客户端接收到内容之后经过浏览器渲染解析，得到显示的效果。 (1)编写一个静态网页，并在 Web服务器上发布； (2)用户在浏览器的“地址”文本框中输入该静态网页的 URL并按回车(Enter)键，浏览器发送请求到 Web服务器； (3)Web服务器找到此静态网页的位置，并将它转换为 HTML流传送到用户的浏览器； (4)浏览器收到HTML流，显示此网页的内容。在步骤(2)～(4)中，静态网页的内容不会发生任何变化。其工作原理如图1-2所示。 图1-2 静态网页的工作原理 2．动态网页 动态网页是指采用了服务器端编程技术，由程序实时生成，可以根据不同条件生成不同内容的网页。它们会随不同客户、不同时间，返回不同的网页。动态网页相对复杂，不能直接双击。 1)动态网页的特点 (1)动态网页的后縀一般为.asp、.jsp或者.php等形式。 (2)动态网页以数据库技术为基础，可以大大减少网站维护的工作量。 (3)动态网页交互性较强，采用动态网页的网站可以实现更多的功能，如用户注册、用户登录、在线查询、用户管理、订单管理等。 (4)动态网页实际上并不是独立存在于服务器上的网页，只有当用户请求时，服务器才会返回一个完整的网页。 2)动态网页的工作流程 动态网