网页设计教程

《网页设计教程》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页设计基础1、网站策划　　也许有人认为本书是讲述网页艺术设计方面的，与网站并没有很大的关系。这个看法初看是上去不错，但正如俗语“巧妇难为无米之炊”，离开了页面的内容谈页面的设计制作几乎是不可能的。而页面内容与整个网站规划是分不开的。也就是说，网页不同于网站，网页的设计是基础，而网站的策划才是灵魂。　　同样，持续了好几年的“门户大战”也让我们知道，大型网站的发展正在走着个性化、专业化的道路。而网站策划在建设网站的过程中意义重大，我们遵循“以人为本”的创作思想，将其作为确立网站项目的第一步。1.1选题　　任何主页都要根据主题的内容形成其风格，只有决定了题材和内容，设计工作才能有的放矢，取得理想的

2、效果。　　现在的网站类型很多，其内容林林总总，包罗万象。对于网站内容的理解不能是狭隘的。不论是搜狐网(www.sohu.com)、西祠胡同论坛版(www.xici.net)，还是各大校园网站、企业网站，它们提供的都是内容。一般来说，可简单地分为两大类：企业网站（如图-1，IBM公司主页和图-2，麦当劳主页）和非企业网站（如图-3，碧海银沙网站和图-4，雅虎网站）。　　　　　　　　图-1　　　　　　　　　　　　　　　　图-2　　　　　　　　图-3　　　　　　　　　　　　　　　　　　图-4　　企业网站是企业的网上窗口，在这里展示着企业文化，发布企业信息、新闻，进行电子商务。这类网站结构类似，参考同

3、类成功网站会有很多值得借鉴的地方。如图-和图-6为惠普公司主页，图-7为肯德基“美食天地”页面，图-8为诺基亚手机公司页面。　　　　　　　　　　图-5　　　　　　　　　　　　　　图-6　　　　　　　　图-7　　　　　　　　　　　　　　　　　　图-8　　非企业网站，如图-9www.CNN.com和图-10www.freegames.com，与前者相比，涵盖内容更广泛，包括门户网站、各专题网站、个人网站等。　　对于这类网站，选题时要明确应包括那些内容、出现哪些话题、哪些是自己容易入手的。　　一个旅游站点，众多的旅游景点，它的内容只围绕几条旅游线路展开：每条线路上沿途的景点有哪些，景点的详细介绍，沿

4、途旅店、旅店设施、性价比以及预订情况，土特产品、风味小吃及价格、何处购买等。如此细致，人们有足够的理由喜欢这个旅游站点。同样，在现代女子关心的各种时尚中，一个站点独独挑选护肤品作为它的题材。在这当中以品牌为主线，介绍各知名品牌旗下的护肤品类型、详细介绍、使用交流、专业答疑等。这个网站无疑从选题来说也是成功的。可以这样说，题材越小越好，越细致越好，做工越精致越好。人们总是希望看到专业级的信息，而并非大而全泛泛而谈的页面。“鱼和熊掌不可兼得”，细致单一的题材，深入有用的内容和几乎无懈可击的设计是网站成功的必要条件。　　　　　　　　　　　图-9　　　　　　　　　　　　　　　　图-10　　如果目的是设

5、计个人网站，一般很容易就可以从主页的浏览次数分析出最受欢迎的类型。　　各种类型的网站都可以继续细分，比如旅游可再分为国内、国际大类，国际又可按各大洲进行分类。同时，各个题材相联系和交叉又是新的题材，如美容论坛（美容+论坛）等。1.2设计网站结构　　网站设计是一个复杂的过程，本节我们将学习用科学的方法让头绪万千的网站开发任务变得清晰流畅。1.2.1前奏在考虑有关具体工作之前，需要考虑几个问题来帮助我们理清思路。1.商务网站策划建立网站的目的设想的网站规模网站的主要浏览人群是谁网站的设计特色是怎样的准备投入的预算是多少2.个性网站策划网站和其他网站有什么不同网站的色彩网站的内容网站给浏览者的印象3

6、.以人为本，从用户角度进行设计　　面对网站的浏览者是一项长期而又有挑战性的任务。从我们自身角度讲，如果在网上发现一个特别有兴趣的网站，会把它加入收藏夹；如果发现一个对工作有参考的网站，可能会将网址告诉同事，几乎每一个上网者都会这么做。　　设计网页需要了解我们的最终观众，了解他们的年龄层次，了解他们浏览这个网站的目的（娱乐、信息或是其他），了解他们浏览时的感受等。这些都对我们建立站点的色调和个性有帮助。1.2.2正题　　网站结构是网站设计的基础。当我们开始着手设计网站时，要做的第一件事就是设计出网站结构图。所谓网站结构图就是将网站的架构利用图表的形式表现出来。如图-11。图-11　　从大的门户网

7、站到小的个人站点，几乎所有的网站都可分为不可变的和可变的两部分。不可变的是整体风格，可变的是不断更新的内容和服务。因此，网站结构图由网站逻辑模型图和网页关系图组成。前者用来设计比较固定的网站架构，后者设计林林总总的网站内容，这样可以在保持网站整体风格和导航习惯的前提下不断丰富网站的内容，提高网站的适应力。如果把网站比喻成一棵大树，网站的逻辑模型就是大树的枝干，网站的内容就是叶子。1.设计网站逻辑模