01 个人网页，都离不开网页设计技术。
网页设计基础
随着互联网的快速发展，越来越多的企业开始建设网站，通过互联网为企业寻找新的商机；而很多人也开始学习建立个人网页，通过互联网展示自我，寻求个人发展的空间。无论建设网站还是建立
本章主要介绍在设计网页之前的一些基础知识，以及设计网页需要进行的各种准备工作，包括网站内容的策划、网站板块的设计、网页配色的理论，以及设计网页所使用的一些基本技术和软件。
1.1 网站整体策划 在制订网站技术方案之后，即可整理收集的网站资源，并对资源进行分类整理、划分栏目等。
网站栏目划分的标准是应尽量符合大多数人理解的习惯。例如，一个典型的企业网站栏目，通常包括企业的简介、新闻、产品，用户的反馈以及
站之前进行的必要工作。
1．市场调查
市场调查提供了网站策划的依据。在市场分析过程中，需要先进行3个方面的调查，即用户需求调查。
调查、竞争对手情况调查以及企业自身情况的 联系方式等。产品栏目还可以再划分子栏目。
2．市场分析
市场分析是将市场调查的结果转换为数据，并根据数据对网站的功能进行定位的过程。
3．制订网站技术方案
在建设网站时，会有多种技术供用户选择，包括服务器的相关技术（NT Server/Linux）、数据库技术（ACCESS/My Sql/SQL Server）、前台技术（XHTML+CSS/Flash/AIR）以及后台技术（ASP/ASP.NET/PHP/JSP）等。
4．规划网站内容
网站的整体策划是一个系统工程，是在建设网
5．前台设计
前台设计包括所有面向用户的平面设计工作，例如网站的整体布局设计、风格设计、色彩搭配以及UI设计等。
注意 制订网站技术方案时，切忌一切求新，盲在目采用最先进的技术。符合网站资金实力和技术水平的技术才是合适的技术。 6．后台开发
后台开发包括设计数据库和数据表，以及规划
后台程序所需要的功能范围等。
7．网站测试
在发布网站之前需要对网站进行各种严密测
1 网页设计与制作（CS4中文版）从新手到高手 网页设计与制作（CS4中文版）从新手到高手
试，包括前台页面的有效性、后台程序的稳定性、重要的工作，例如，登记各种搜索引擎、发布各种数据库的可靠性以及整个网站各链接的有效性等。 广告、公关活动等。
8．网站发布
在制订网站的测试计划后，即可制订网站的发
10．网站维护
维护是一项长期的工作，包括对服务器的软多数网站还会定期改版，保持用户的新鲜感。
布计划，包括选择域名、网站数据存储的方式等。 件、硬件维护、数据库的维护、网站内容的更新等。
9．网站推广
除了网站的规划和制作外，推广网站也是一项
1.2 网页页面与板块 由左表中的数据可得出，在设计网页时，如不希望用户频繁拖动水平滚动条，可将网页的宽度控制在1003px以内。
及各种板块的安排。
1．网页页面大小
合理地设置页面尺寸，可以避免用户频繁地拖动滚动条。
目前国内的上网者习惯使用微软公司的Internet Explorer浏览器（简称IE浏览器）。在屏幕分辨率为1024×768时，不同版本的IE浏览器的屏幕大小如下表所示。
IE浏览器版本 IE 6.0 IE 7.0（菜单栏显示状态） IE 7.0（菜单栏隐藏状态） IE 8.0（菜单栏隐藏状态） IE 8.0（菜单栏显示状态） 屏幕宽度 屏幕高度 1003px 1003px 1003px 1003px 1003px 600px 594px 620px 626px 598px 理安排导航条可以帮助浏览者迅速查找到需要的信息。例如，IBM的导航条。
? Banner
Banner的中文直译为旗帜、网幅或横幅，意译则为网页中的广告。多数Banner都以JavaScript技术或Flash技术制作，通过一些动画效果可展示更多的内容，并吸引用户观看。
? 内容板块
2 布局的设计通常需要注意网站的页面大小以
注意 数网页都会尽量避免出现水平滚动条。在多网站的进入页或Flash网页中，垂直滚动条也应尽量避免出现。
2．网页板块构成
网页是由各种板块构成的。Internet中的网页内容各异，然而多数网页都是由一些基本的板块组成的，包括Logo、导航条、Banner、内容板块、版尾和版权等。
? Logo
Logo是企业或网站的标志。例如，微软的Logo。
? 导航条
导航条是网站的重要组成元素。合
第1章 网页设计基础 01 网页的内容板块通常是网页的主体部分。这一板块可以包含各种文本、图像、动画、超链接等。例如，蔡司光学网站的内容板块。
? 版尾板块
版尾，顾名思义是网页页面最底端的板块，通常放置网站的版权信息。例如，陶氏化学的版尾版权板块。
1.3 网页布局基础 1．“国”字型
“国”字型网页布局又称“同”字型网页布局，其最上方为网站的Logo，Banner及导航条，接下来是网站的内容板块。
在设计网页时，需要了解网页的5种基本结构布局。
3 网页设计与制作（CS4中文版）从新手到高手 网页设计与制作（CS4中文版）从新手到高手
在内容板块左右两侧通常会分列两小条内容，可以是广告、友情链接等，也可以是网站的子导航 条，最下面则是网站的版尾或版权板块。
2．拐角型
拐角型布局也是一种常见的网页结构布局。其与“国”字型布局只是在形式上有所区别，实际差异不大。
拐角型布局的网页和“国” 字型布局的网页区别在于其内容板块只有一侧有侧栏。
4
第1章 网页设计基础 01 这种布局的网页比“国”字型布局的网页稍微个性化一些，常用于一些娱乐性网站，例如，CW电视台的官方网站就是拐角型布局。
3．上下框架型
上下框架型网页布局比“国”字型网页布局和拐角型网页布局都更加简单一些。
在上下框架布局网页中，主题部分并非如“国”字型或拐角型一样有主栏和侧栏组成，而是一个整体或复杂的组合结构。
上下框架型网页布局应用在一些栏目较少的网站。例如，意大利导游网。
4．左右框架型
这是一种被垂直划分为两个或更多个框架的网页布局结构，类似将上下框架型布局旋转90度之后的效果。
左右框架型网页布局通常会被应用到一些个性化的网页或大型论坛网页中，具有结构清晰、一目了然的优点。例如，巴西的iDeal Interactive汽车销售公司的网页就是如此。
5．封面型
这种类型的网页通常作为一些个性化网站的首页，以精美的动画加上几个链接或“进入”按钮，甚至只在图片或动画上做超链接。
娱乐性的网站或个人网站偏好使用这种布局方式。例
如，英国电视节目《幸存者》的网站。
5
网页设计与制作（CS4中文版） 从新手到高手 - 网页设计基础 - 图文
