作者：李敏
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
网页设计与制作案例教程(第2版)试读：
前言
本书第1版自2009年8月问世以来，以其新颖的编写体例和丰富的案例、实训内容，赢得了广大读者的普遍欢迎，很多学校的老师选择本书作为授课教材。随着Dreamweaver软件版本的升高，结合广大用户的反馈信息和编写人员的反复斟酌，对本书第1版进行了修订。修订后的《网页设计与制作案例教程（第2版）》体系结构更加合理，编排条理更加清晰，学习任务更加明确，案例和实训更加实用、时尚，内容更加通俗易懂，教材配备的素材更加丰富。
本书由从事Dreamweaver CS5课程教学的教师和两位经验丰富的企业网页设计师合作共同编写而成，主要特点有以下几点。
◆ 任务驱动教学。本书围绕学习任务，详细介绍了网页设计制作基础知识和基本操作技能，使学生轻松掌握网页设计制作技术的有关基础知识和基本操作技能。
◆ 案例目标明确、具有一定的代表性。本书按照网页设计与制作的知识点，通过一系列“由简到繁、由易到难、承前启后”的阶梯式案例进行讲解。每个案例目标明确，并能起到举一反三的作用。学生在案例学习过程中，能有效地掌握网页设计与制作的知识要点，并有效地掌握解决实际问题的方法和能力。
◆ 编写体例合理。编者对本书的编写体例做了精心设计。全书分为16章，第1～2章介绍了网页及网站建设流程、网页基本语言HTML、网页版式设计与色彩搭配，第3～15章系统地介绍了网页设计软件Dreamweaver CS5的主要功能和设计制作各类网页的方法和技能；第16章以DIV+CSS作为技术架构，介绍了网站前台设计的综合案例。
◆ 内容安排科学、恰当。本书以网页设计由浅入深的学习过程为主线，结合任务驱动、案例教学进行讲解，把介绍知识与案例学习融于一体；章节组织以案例贯穿，任务明确，条例清晰，内容通俗易懂，用户只需按照书中案例的操作步骤学习，就可以轻松地掌握网页设计制作的技能和技巧。
本书非常适合高职高专院校学生学习，也可作为社会各类培训机构进行网页设计培训的教程，或广大网页设计爱好者的自学参考书。
本书由李敏主编和统稿。全书编写分工如下：第1、7、8、11、12、13章由李敏编写，第2、4、9、10、15、16章由刘建超编写，第3、5、6、14章由刘春艳编写。来自企业的孙绪江高级工程师、王洵网页设计师对教材进行了策划和案例选材的指导，并参与了部分案例的编写工作。本书配套的素材、电子教案和课后习题答案请登录华信教育资源网免费下载。
虽然对于本书编者已尽可能做到更好，但是书中疏漏和不足之处在所难免，欢迎读者朋友在选择本书的同时，也能够把对本书的意见和建议告诉我们，谢谢。联系邮箱：lmbook＠126.com。
编者
第1章 网页设计与制作综述
互联网的迅速发展与普及，为人们提供了更方便、快捷的信息交流平台。上网已经成为很多人工作、生活中必不可少的一部分，这主要是由于网页承载了其他任何一种媒介都无法比拟的丰富资源。要制作出令人满意的网页，不仅要熟练掌握计算机网络、网页开发工具、网页美工以及作为网页基本结构的HTML标签语言等多方面的基本知识，而且还要了解网页和网站的实质、网页组成元素等。
本章学习要点：
● 网页和网站；
● 网页类型；
● 网页的基本构成元素；
● 网页制作常用软件和技术；
● 网站策划与设计流程；
● HTML基础知识；
● 初识HTML5.0。
1.1 学习任务：认识网页
互联网是一个蕴藏着无穷资源的宝库，在资源共享和信息交互方面具有得天独厚的优势，网页正是传递这些资源和信息的重要载体。网页不但可以用于浏览文字、图片、多媒体信息，而且在娱乐、商务等领域都有重要应用（如电子邮件、聊天室、搜索引擎、网上购物、电子政务等）。本节学习任务
认识什么是网页，了解网页的类型，为学习网页设计与制作打好基础。1.1.1 什么是网页
网页是一种可以在互联网上传输、能被浏览器识别和翻译成页面并显示出来的文件，网页是网站的基本构成元素。在联网的计算机上安装浏览器后，在浏览器的地址栏中输入诸如http：//www.ywxxb.com的网址，即可在浏览器中打开网页，如图1-1所示。该网页是一个网站的主页（即Homepage），具有呈现整个网站主题以及页面导航的门户功能。
一般网页上都会有文本和图片等信息，复杂一些的网页上还会有声音、视频、动画等多媒体内容。在网页上单击鼠标右键，选择“查看源文件”命令，可以查看网页的代码结构。用户可以使用记事本对网页中的文字、图片、表格、多媒体等页面内容进行编辑，并通过超文本标记语言HTML对这些元素进行描述和控制，最后由浏览器对这些标签进行解释并生成最终呈现在用户眼前的丰富多彩的网页。
网页比报纸、广播、电视等传统媒介在信息传递上更加迅速、多样化，交互能力更强。掌握一定的网页设计理念和网站开发技术，将有助于用户更好地利用网络资源。图1-1 网页1.1.2 网页类型
网页分为静态网页和动态网页两种类型。
1.静态网页
在网站设计中，使用纯HTML格式的网页通常称为静态网页，它运行于客户端。早期的网站一般都是由静态网页组成的，它们是以.htm、.html、.shtml和.xml等为扩展名的。静态网页的内容仅仅是标准的HTML代码，但静态网页上也可以出现各种动态效果，如GIF格式的动画、Flash动画等，只不过这些“动态效果”只是视觉上的，与下面将要介绍的动态网页是不同的概念。
静态网页的基本特点归纳如下。
● 每个静态网页都有一个固定的URL，且网页URL的扩展名为.htm、.html和.shtml等格式。
● 网页内容发布到网站服务器上之后，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件。
● 静态网页的内容相对稳定，因此容易被搜索引擎检索。
● 静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难。
● 静态网页的交互性较差，在功能方面有较大的限制。
2.动态网页
采用了动态网页技术，在服务器端运行的网页和程序被称为动态网页，它们会根据编写的程序访问数据库，并动态地生成页面。动态网页的优点是效率高、更新快、移植性强，可以根据先前制定好的程序页面，根据用户的不同请求返回其相应的数据，从而达到资源的最大利用和节省服务器上的物理资源。
动态网页的基本特点归纳如下。
● 动态网页以数据库技术为基础，可以大大降低网站维护的工作量。但是，动态网页的高效率是要通过频繁地和数据库进行通信才能实现的，而频繁地读取数据库会花费大量的时间，当访问量达到一定的数量时，会导致效率成倍下降。
● 采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等。
● 动态网页实际上并不是存在于服务器上的独立网页文件，只有当用户请求时，服务器才生成并返回一个完整的网页。
● 动态网页中URL的字符“?”对搜索引擎检索存在一定的问题。搜索引擎一般不可能从一个网站的数据库中检索全部网页，或者出于技术方面的考虑，搜索引擎不会去抓取网址中“?”后面的内容，因此，采用动态网页的网站在进行搜索引擎检索设计时，需要做一定的技术处理才能适应搜索引擎的要求。
由此可见，静态网页和动态网页各有特点，网站采用动态网页还是静态网页主要取决于网站的功能需求和网站内容的多少。如果网站功能比较简单，内容更新量不是很大，采用纯静态网页的方式会更简单，反之，一般要采用动态网页技术来实现。
在静态网页的基础上，结合动态网页技术是目前常用的网站建设方法。网页固定不变的内容可以使用静态方法设计，而特殊的功能以及日常更新部分使用动态网页技术来实现，如用户注册、用户登录、新闻发布等。由于动态网页以数据库技术为基础，数据库的存储方式存在搜索引擎的检索问题，另外如何最大程度保证数据库的安全也是动态网页技术中的核心问题。出于以上考虑，同时也为了提高网页访问速度，使用动态网页技术将网页内容生成为HTML格式的静态网页发布也是一种好办法。
1.2 学习任务：认识网站
网站的概念是网页设计者所必须掌握的，学习本书的最终目的就是能够熟练利用Dreamweaver CS5，配合其他的网站开发工具完成网站设计。本节学习任务
认识什么是网站，理解网址与域名，熟悉网页的基本构成元素，了解设计网页制作常用软件和技术。1.2.1 什么是网站
网站是提供各种信息和服务的平台，如用户熟悉的新浪、搜狐、京东网、当当网等都是典型网站。网站由许多网页组成，也可以通俗地理解成网站是存储在某个服务器上的，包含了网页、图片、数据库和多媒体信息等资源的一个文件夹。
网站是由很多网页链接在一起组成的。用户浏览一个网站时看到的第一个页面叫做主页。从主页出发，可以访问到本网站的每一个页面，也可以链接到其他网站，方便地共享网站资源。
☎提示：在Dreamweaver中，网页设计都是以一个完整的Web站点为基本对象的，所有的资源和网页的编辑都在此站点中进行，建议不要脱离站点环境，初学者要养成良好的习惯。1.2.2 网址与域名
每个网站都拥有一个Internet地址。浏览者要访问Internet上的一个站点就必须通过访问这个网站的地址来实现。域名是Internet上网站的名称，是一个服务器或网络系统的名字，是解决IP地址对应问题的一种方法。
1.网址
浏览网页时，在浏览器地址栏中输入的诸如http：//www.sohu.com这样的字符串就是一个网址，浏览器访问网页是通过统一资源定位器（Uniform Resource Locator，URL）的方式来实现的。这里所说的网址实际上有两个内涵，即IP地址和域名地址。
每一台计算机都必须标有唯一的地址，就像打电话必须知道对方的电话号码，且这一号码必须是唯一的一样。通常，这一地址用四个十进制数表示，中间用小数点“.”隔开，称为IP（Internet Protocol）地址，如，218.56.59.221。
对于用户来说，记忆如此众多的网站IP地址是件很困难的事，为了解决这一问题，Internet规定了一套命名机制，称为域名系统。采用域名系统命名的网址，即为域名地址。域名地址采用了人们善于识记的名字来表示。
2.域名
域名就是网站的名称，企业在注册域名时一般都会申请一个符合网站特点的域名，甚至会把域名看做企业的网上商标。在Internet中，域名与IP地址之间是一一对应的，它们之间的转换工作称为域名解析，这项工作专门由域名系统（Domain Name System，DNS）来完成。域名系统是一个分布式数据库系统，为Internet上的主机分配域名地址和IP地址。用户输入域名地址，DNS就会根据数据库中域名与IP地址的映射关系自动把域名地址转换为IP地址，然后通过计算机的IP地址访问站点。
此外使用域名也便于网址的分层管理和分配。一个完整的域名通常由几个层次组成，不同层次之间用“.”隔开，例如，新浪中国的网址是http：//www.sina.com.cn，其中sina.com.cn为域名，sina是第三层次域名，com是第二层次域名，cn是国家顶级域名。
目前互联网中有两类顶级域名：一类是地理顶级域名，如cn代表中国，jp代表日本，uk代表英国等；另一类是类别顶级域名，如com代表商业公司，net代表网络机构，org代表组织机构，edu代表教育机构，gov代表政府部门等。随着互联网的不断发展，会有越来越多的顶级域名不断被扩充到现有的域名体系中来。1.2.3 网页基本元素
设计网页时要组织好页面的基本元素，同时再配合一些特效，这样才能构成一个图文并茂、绚丽多彩的网页。网页包括文本、图像、音频、视频、动画和超链接等基本元素。
1.文本
文本是网页传递信息的主要载体，如图1-2所示。文本传输速度快，而且网页中的文本可以设置其大小、颜色、段落、层次、样式等属性，风格独特的网页文本设置会给浏览者以赏心悦目的感觉。图1-2 网页中的文本
☎提示：在网页中应用了某种字体样式后，如果浏览者的计算机中没有安装该种样式的字体，那么文本就会以计算机系统默认的字体显示出来，此时就无法显示出网页应有的效果了。
2.图像
图像给人的视觉效果要比文字强烈得多，在网页中灵活运用图像可以起到点缀的效果，如图1-3所示。
网页上的图像文件大部分都是使用JPG和GIF格式，因为，它们除了具有压缩比例高的特点外，还具有跨平台特性。图像在网页中的应用主要有以下几种形式。
● 图像标题：在网页中一般都有标题，起到导航的作用，应用图像标题可以使网页更加美观。
● 网页背景：图像的另一个重要应用是作为网页背景，特别是一些个人网站，应用图像背景比较多。
● 网页主图：在网页上，除了用小的图像美化网页外，有时还会用一些大的图片来突出网页主题，特别是主页中用主图的比较多。
● 超链接：有时可以用图片取代文字作为超链接按钮，使网页更加美观。
☎提示：一般情况下，图像在网页中不可缺少，但也不能太多，因为图像的下载速度较慢，况且，网页上如果放置了过多的图片，会显得很乱。图1-3 网页中的图像
3.动画
动画是网页上最活跃的元素，通常制作优秀、创意出众的动画是吸引浏览者的最有效的方法。但如果网页中存有太多的动画，会使浏览者眼花缭乱，无心细看，所以现在对动画制作的要求越来越高。在网页中加入的动画一般是GIF格式的动画和Flash动画等。
4.超链接
超链接是最为有趣的网页元素。在网页中单击链接对象，即可实现在不同页面之间的跳转或者访问其他网站，以及下载文件或发送E-mail等功能。网页是否能够实现如此多的功能，取决于超链接的规划。无论是文本还是图像都可以加上超链接标签，当鼠标移至超链接对象上时会变成小手形状，单击鼠标左键即可链接到相应地址（URL）的网页。在一个完整的网站中，至少要包括站内链接和站外链接。
● 站内链接：如果网站规划了多个主题版块，必须给网站的首页加入超链接，让浏览者可以快速地转到感兴趣的页面。在各个子页面之间也要有超链接，并有能够回到主页的链接。通过超链接，浏览者可以迅速找到自己需要的信息。
● 站外链接：在制作的网站上放置一些与网站主题有关的对外链接，不但可以把好的网站介绍给浏览者，而且能使浏览者乐意再度光临该网站。如果对外链接信息很多，可以进行分类。
5.音频和视频
随着音频技术及语音控制技术的进一步发展和普及，以音频进行人机交流逐步成为实现网页交互性的重要手段。在网上浏览时，时常可以发现一些网页设置了背景音乐，伴随着轻柔、优美的乐曲，浏览者在网上冲浪会更加惬意。但是加入音乐后，网页文件变大，下载时间就会增加。
网速的提高使得以视频来传达信息成为可能。视频形象生动、易于理解，在应用视频时，具有较强的吸引力，而且在信息的层次深入方面，视频表现也具有相当的优势。常见的网络视频有视频短片、远程教学、视频聊天、视频点播和DV播放等。但是，在应用视频时要考虑网速问题，如果视频播放不流畅也会影响浏览效果。
网页中除了这些最基本的元素外，还包括横幅广告、字幕、悬停按钮、计数器等。1.2.4 网页制作常用软件和技术
制作各种类型的网站，都是先做出一个个的网页，再把这些网页链接起来。制作网页可以直接使用HTML语言，也可以使用工具软件。网站开发涉及的工具和技术多种多样，应根据网站的不同需求和设计者掌握开发工具的熟练程度的差异，灵活应用开发工具和技术。下面介绍目前常用的设计软件和开发技术。
1.网页编辑排版软件Dreamweaver
无论是静态网页还是动态网页，都可以通过直接编写源代码的方式对网页进行编辑，但是对非计算机专业人员来说，这无疑是有一定难度的，而使用网页编辑软件Dreamweaver就能很好的解决这个问题。
Dreamweaver是一款由Macromedia公司（现已被Adobe公司并购）开发的专业网页编辑工具，是一个优秀的所见即所得的网页编辑器。它集网页设计与网站管理于一身，能够使网页和数据库关联起来，支持最新的HTML和CSS，用于对Web站点、Web页面和Web应用程序进行设计、编码和开发。网页设计者利用它可以轻而易举地制作出跨平台和跨浏览器的网页。Dreamweaver对动态网站的支持也毫不逊色，使用Dreamweaver及相关的服务器技术可以方便地创建功能强大的Internet应用程序。
☎提示：除了 Dreamweaver 之外，微软公司的办公软件 Office 家族成员之一的FrontPage也是一种所见即所得的网页制作软件。由于其使用简单，并且软件容易获得，也很受初学者的欢迎。
2.网页图像处理软件Photoshop和Fireworks
想要制作出界面精美的网页，还需要使用以下软件工具为每一件网页作品设计主题鲜明、风格各异的网页图像。（1）Photoshop。Photoshop是Adobe公司最为著名、也最为流行的专业平面图像处理软件。其功能十分强大，使用范围广泛，一直占据着图像处理软件的领袖地位。Photoshop支持多种图像及色彩模式，还可以任意调整图像的尺寸、分辨率及画布的大小，使用Photoshop可以设计出网页的整体效果图，并且可以设计网页Logo、网页按钮和网页宣传广告等图像。长期以来它一直是众多平面设计师进行平面设计、图像处理的首选工具。（2）Fireworks。Fireworks是Macromedia公司发布的一款用来设计网页图形的编辑软件。Fireworks中的工具种类齐全，使用这些工具可以在单个文件中创建和编辑位图和矢量图像、设计网页效果、修剪和优化图形以减少其文件大小，并能制作出精美的GIF动画。通过Fireworks可视化工具，能轻松实现各种动态按钮、翻转图形、下拉菜单等效果。
3.网页动画制作软件Flash
Flash是Macromedia公司推出的矢量动画制作软件，是当今功能最丰富、最优秀的动画制作软件之一，它和Dreamweaver、Fireworks一起被誉为“网页设计三剑客”。Flash以界面简洁、功能强大而见长，具有强大的动画编辑功能，能把动画、音效、交互方式完美地融合在一起，是动画设计初学者和专业动画制作人员的首选。使用Flash可以制作体积非常小的幻灯片、小游戏、MTV、广告等动画效果，是最主要的Web动画形式之一。
4.网页标签语言HTML
HTML是用来制作网页的标签语言。HTML是Hyper Text Markup Language的英文缩写，即超文本标签语言。用HTML编写的超文本文档称为HTML文档，必须使用.html或.htm为文件扩展名，它不需要编译，直接由浏览器执行。HTML是网页技术的核心与基础，不管是制作静态网页，还是编写动态交互网页，都离不开HTML语言。所以，要灵活地实现想要的网页效果，必须了解HTML语言。
5.网页脚本语言JavaScript
使用HTML只能制作出静态的网页，无法独立完成与客户端动态
试读结束[说明：试读内容隐藏了图片]