网页制作与网站建设从入门到精通

随着 Internet 应用在中国的普及，互联网信息技术彻底改变了人们的生活和工作。越来越多的企业和个人建立起网站来宣传自己。人才市场上对网页制作和网站建设人员的需求大大增加，但是网站建设是一项综合性的技能，包括网站的策划、网页设计和动态网站的开发等几部分，真正完全懂得这几项技能的网页设计师则相对较少，因此我们编写了本书。本书在2006年出版后，销售在同类书籍中一直名列前茅，经过十多次重印，销售达三万多册，并且获得了 2007 年最佳科技图书奖。这次改版不但更新了所有的操作实例步骤，还重点增加了Web标准与Div布局方面的内容。

本书分为入门篇、网页设计与制作篇、动态网站开发篇、网站发布与维护篇、综合案例篇和附录6个部分，详细介绍了如何进行网站的前期策划，如何综合使用Dreamweaver CS6、Photoshop CS6、Flash CS6 等网页制作和美化工具来建设网站，如何在 ASP 环境下建设动态网站，以及数据库的创建，网站的推广与宣传等内容。附录中还包括了网页制作中各种常见的问题，能够帮助读者速学、速查的内容。

本书的特点如下。

知识系统、全面。书中从基础知识开始讲起，逐步介绍网页的制作、图像和动画的设计、动态网站的开发、网站的管理和维护等，最后给出了综合实例，力求还原一个真实的网站建设任务，让读者的学习更有针对性。

采用“基础+实例”的形式。为了使读者能够真正掌握网页设计的技巧，书中通过大量实例，全面介绍了网页设计和网站建设的各个环节。在讲解时对操作过程中的每一个步骤都有详细说明。不论是初学者，还是有一定基础的读者，只要根据这些步骤一步一步地操作，就能顺利完成整个实例。

本书2007年获得最佳科技图书奖，同类书中在各大书店和网上书店销售一直名列前茅。

附录中给出了网页制作常见问题精解，能够帮助读者及时解决网页制作过程中出现的各种常见问题。

本书特别适用以下人员阅读：

网页设计与制作人员；

网站建设与开发人员；

大中专院校相关专业师生；

网页制作培训班学员；

网站制作爱好者与自学者。

本书写作人员中既包括资深网页设计培训教师，又包括一线的网页制作和网站建设人员，这使得本书理论与实践并重，方法与技巧并存。在编写过程中，我们力求精益求精，但难免存在一些不足之处，读者使用本书时如果遇到相关技术问题，可以发E-mail和我们联系。

第1章■ 网页设计基础

第2章■ HTML入门

第3章■ 网站建设基础

第4章■ 网页中的色彩知识

为了使网页初学者能够对网页设计有个总体的认识，本章首先介绍了网页设计的基本技术，如超文本标记语言HTML、网页脚本特效语言JavaScript和动态网页程序ASP，接着介绍如何设计网页和网页设计的基本原则，以及网页制作的常用工具 Dreamweaver、Flash 和Photoshop，从而为后面设计制作更加复杂的网页打下良好的基础。

超文本标记语言HTML

网页脚本语言JavaScript

常用网页设计软件

在学习网页设计之前，先来了解一下网页设计中常用的语言。超文本标记语言HTML是学习网页设计的基础，但是HTML语言的功能十分有限，无法达到人们的预期设计，以实现令人耳目一新的动态效果。这样，各种脚本语言和动态网页开发语言应运而生，使得网页设计更加多样化。

通过浏览器浏览网页时，看到的其实是超文本文件。它一方面通过“超级链接”相互关联，另一方面又内含多媒体对象，因此称为“超文本”。在Internet上，使用超文本标记语言来描述超文本文件，客户端的浏览器则负责“解释”这些超文本，最终生成访问者看到的页面形式。

HTML语言由一系列元素组成，用于组织文件的内容和指导文件的输出格式。元素名称不分大小写。一个元素可以有多个属性，属性及其属性值同样不分大小写，各个属性用空格分开。“属性名＝属性值”合起来构成一个完整的属性。元素由标记构成，大多数标记是成对出现的，分起始标记<>符号和结尾标记</>符号，以便和页面的内容区分开来。

下面是一个基本的超级文本网页代码，其浏览效果如图1-1所示。

<title>我的个人网页</title>

　background-image: url();

JavaScript 是目前网页设计最容易学又最方便的语言。利用 JavaScript 可以轻易地做出漂亮的数字钟、有广告效果的跑马灯及显示浏览器停留的时间。这些特殊效果可以大大提高网页的互动性、吸引更多的人访问。图1-2所示是利用网页脚本语言制作的滚动公告特效。

脚本语言有以下几个特性。

在客户端执行。完全在用户的计算机上运行，无需经过服务器。

面向对象。具有内置对象，也可以直接操作浏览器对象。

动态变化。可以对用户的输入做出反应，也可以直接对用户输出。

简单易用。JavaScript脚本语言简单，初学者能快速掌握。

只能与HTML语言一起使用，要通过浏览器解释执行。

动态网页使用 HTML＋ASP 或 HTML＋PHP 或 HTML＋JSP 等来实现。动态网页以.asp、.jsp、.php、.perl、.cgi等形式为后缀。

动态网页的特点简要归纳如下。

动态网页以数据库技术为基础，大大降低了网站维护的工作量。

采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、搜索查询、用户管理和订单管理等。图1-3所示是百度网站的主页，在文本框中输入关键字后可以查询相关信息。

动态网页并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。

动态网页中的“？”，在进行搜索引擎检索时存在一定的问题，搜索引擎一般不可能从一个网站的数据库中访问全部网页，因此采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。

网页设计是一个感性思考与理性分析相结合的复杂的过程，它的方向取决于设计的任务，它的实现依赖于网页的制作。网页设计中最重要的东西，并非在软件的应用上，而是在对网页设计的理解以及设计制作的水平上，在于自身的美感以及对页面的把握上。

网页设计的任务，是指设计者要表现的主题和实现的功能。站点的性质不同，设计的任务也不同。从形式上，可以将站点分为以下3类。

第一类是资讯门户类站点，像新浪、搜狐等门户网站。这类站点将为访问者提供大量的信息，而且访问量较大。因此需注意页面的分割、结构的合理、页面的优化、界面的亲和等问题。图1-4所示是搜狐网站的主页，可以看到网站提供的大量信息。

第二类是资讯和形象相结合的网站，像一些大型公司、国内高校等网站。这类网站在设计上要求较高，既要保证资讯类网站的上述要求，又要突出企业、单位的形象。图1-5所示是资讯和形象结合的网站。

第三类则是形象类网站，如一些中小型公司或单位的网站。这类网站一般较小，有的仅有几页，需要实现的功能也较为简单，此类网页设计的主要任务是突出企业形象。这类网站对设计者的美工水平要求较高。图1-6所示是形象类网站。

当然，这只是从整体上来看，网站的具体情况还要具体分析，不同功能的站点还要区别对待。网站设计最重要的一点，就是满足客户的要求，它也属于设计的任务。明确了设计的任务之后，接下来要考虑的就是如何完成这个任务了。

设计的实现可以分为两个部分。第一部分为站点的规划及草图的绘制，这一部分可以在纸上完成；第二部分为网页的设计制作，这一过程是在计算机上完成的。

设计网页的第一步是设计版面布局。可以将网页看作传统的报刊杂志来编辑，这里面有文字、图像乃至动画，要以最适合的方式将图片和文字排放在页面的不同位置。常用的网页设计软件有Dreamweaver、Fireworks、Flash 以及Photoshop，这些都是很不错的软件。接下来要做的就是通过软件的使用，将设计的蓝图变为现实，最终的集成一般是在Dreamweaver里完成的。虽然在草图上定出了页面的大体轮廓，但是灵感一般都是在制作过程中产生的。设计一定要有创意，这是最基本的要求，没有创意的设计是失败的。在制作的过程中，会碰到许多问题，其中最敏感的莫过于页面的颜色了。处理的方法是，先确定一种能表现主题的主体色，然后根据具体的需要，应用颜色的近似和对比来完成整个页面的配色方案。整个页面在视觉上应是一个整体，并且有和谐、悦目的视觉效果。

设计是有原则的，网页设计遵循以下几个原则：统一、连贯、分割、对比及和谐。

统一是指网页的整体性，一致性。网页的整体效果是至关重要的，网页中各个版块设计风格要一致协调。图1-7所示的网页整体看起来就比较统一。

连贯是指要注意页面的相互关系。设计中要注意各组成部分在内容上的内在联系和表现形式上的相互呼应，并注意整个页面设计风格的一致性，实现视觉上和心理上的连贯，使整个页面设计的各个部分融洽得犹如一气呵成。

分割是指将页面分成若干小块，小块之间有视觉上的不同，这样可以使浏览者一目了然。图1-8所示设计的网页分成了若干小块。

对比就是通过矛盾和冲突，使设计更加富有生气。对比的手法很多，如多与少、曲与直、强与弱、长与短、粗与细、主与次、黑与白、动与静、美与丑等。在使用对比的时候应慎重，对比过强容易破坏美感，影响统一。图1-9所示的网页设计中运用了对比效果。

和谐是指整个页面符合美的法则，浑然一体。网页不仅仅是色彩、形状、线条等的随意混合。

制作网页第一件事就是要选定网页制作软件。虽然用记事本手工编写源代码也能做出网页，但这需要对编程语言相当了解，并不适合于广大的网页设计爱好者。由于目前所见即所得类型的工具越来越多，使用也越来越方便，所以制作网页已经变成了一件轻松的工作。Flash、Dreamweaver 和 Photoshop 这三款软件相辅相成，是制作网页的首选工具，其中Dreamweaver主要用来制作网页文件，制作出来的网页兼容性好、制作效率也很高；Flash用来制作精美的网页动画；Photoshop用来处理网页中的图形。

Dreamweaver CS6 是一个所见即所得的网页编辑工具，能够使网页和数据库关联起来，支持最新的HTML和CSS，可用于Web站点、Web页和Web应用程序的设计、编码和开发。Dreamweaver CS6 含有一个简洁、高效的界面，且性能也得到了改进。它不仅是专业人员制作网站的首选工具，而且普及到广大网页制作爱好者中。图1-10所示是利用Dreamweaver CS6制作的排版网页。

现在非常流行的Adobe公司出品的Flash互动网页制作工具，是一款功能非常强大的交互式矢量多媒体网页制作工具。它能够轻松输出各种各样的动画网页，而且不需要特别繁杂的操作，也比 Java 小巧精悍。它的动画效果、互动效果、多媒体效果十分出色。由于 Flash编制的网页文件比普通网页文件要小得多，所以大大加快了浏览速度。这是一款十分适合动态 Web 制作的工具。图 1-11 所示是利用 Flash CS6 制作的网页动画。

Photoshop 是 Adobe 公司推出的图像处理软件，目前已被广泛应用于平面设计、网页设计和照片处理等领域。随着计算机技术的发展，Photoshop已历经数次版本更新，目前最新版本为 Photoshop CS6。图 1-12 所示是利用 Photoshop CS6 设计的网页图像。

（1）网页设计的任务，是指设计者要表现的主题和实现的功能。站点的性质不同，设计的任务也不同。从形式上，可以将站点分为______类。

（2）设计网页的第一步是______。可以将网页看作传统的报刊杂志来编辑，这里面有文字、图像乃至动画，要以最适合的方式将图片和文字排放在页面的不同位置。

网页制作与网站建设从入门到精通

图书目录:

详情

图书摘要

相关图书

相关文章

相关课程