网页设计与制作(CS4中文版) 从新手到高手――网页设计基础

011网页设计基础随着互联网的快速发展，越来越多的企业开始建设网站，通过互联网为企业寻找新的商机；而很多人也开始学习建立个人网页，通过互联网展示自我，寻求个人发展的空间。无论建设网站还是建立个人网页，都离不开网页设计技术。本章主要介绍在设计网页之前的一些基础知识，以及设计网页需要进行的各种准备工作，包括网站内容的策划、网站板块的设计、网页配色的理论，以及设计网页所使用的一些基本技术和软件。1.1网站整体策划网站的整体策划是一个系统工程，是在建设网站之前进行的必要工作。1．市场调查市场调查提供了网站策划的依据。在市场分析过程中，需要先进行3个方面的调查，即用户需求调查、竞争对手情况调查以及企业自身情况的调查。2．市场分析市场分析是将市场调查的结果转换为数据，并根据数据对网站的功能进行定位的过程。3．制订网站技术方案在建设网站时，会有多种技术供用户选择，包括服务器的相关技术（NTServer/Linux）、数据库技术（ACCESS/MySql/SQLServer）、前台技术（XHTML+CSS/Flash/AIR）以及后台技术（ASP/ASP.NET/PHP/JSP）等。注意在制订网站技术方案时，切忌一切求新，盲目采用最先进的技术。符合网站资金实力和技术水平的技术才是合适的技术。4．规划网站内容在制订网站技术方案之后，即可整理收集的网站资源，并对资源进行分类整理、划分栏目等。网站栏目划分的标准是应尽量符合大多数人理解的习惯。例如，一个典型的企业网站栏目，通常包括企业的简介、新闻、产品，用户的反馈以及联系方式等。产品栏目还可以再划分子栏目。5．前台设计前台设计包括所有面向用户的平面设计工作，例如网站的整体布局设计、风格设计、色彩搭配以及UI设计等。6．后台开发后台开发包括设计数据库和数据表，以及规划后台程序所需要的功能范围等。7．网站测试在发布网站之前需要对网站进行各种严密测网页设计与制作（CS4中文版）从新手到高手2网页设计与制作（CS4中文版）从新手到高手试，包括前台页面的有效性、后台程序的稳定性、数据库的可靠性以及整个网站各链接的有效性等。8．网站发布在制订网站的测试计划后，即可制订网站的发布计划，包括选择域名、网站数据存储的方式等。9．网站推广除了网站的规划和制作外，推广网站也是一项重要的工作，例如，登记各种搜索引擎、发布各种广告、公关活动等。10．网站维护维护是一项长期的工作，包括对服务器的软件、硬件维护、数据库的维护、网站内容的更新等。多数网站还会定期改版，保持用户的新鲜感。1.2网页页面与板块布局的设计通常需要注意网站的页面大小以及各种板块的安排。1．网页页面大小合理地设置页面尺寸，可以避免用户频繁地拖动滚动条。目前国内的上网者习惯使用微软公司的InternetExplorer浏览器（简称IE浏览器）。在屏幕分辨率为1024×768时，不同版本的IE浏览器的屏幕大小如下表所示。IE浏览器版本屏幕宽度屏幕高度IE6.01003px600pxIE7.0（菜单栏显示状态）1003px594pxIE7.0（菜单栏隐藏状态）1003px620pxIE8.0（菜单栏隐藏状态）1003px626pxIE8.0（菜单栏显示状态）1003px598px由左表中的数据可得出，在设计网页时，如不希望用户频繁拖动水平滚动条，可将网页的宽度控制在1003px以内。注意多数网页都会尽量避免出现水平滚动条。在网站的进入页或Flash网页中，垂直滚动条也应尽量避免出现。2．网页板块构成网页是由各种板块构成的。Internet中的网页内容各异，然而多数网页都是由一些基本的板块组成的，包括Logo、导航条、Banner、内容板块、版尾和版权等。LogoLogo是企业或网站的标志。例如，微软的Logo。导航条导航条是网站的重要组成元素。合理安排导航条可以帮助浏览者迅速查找到需要的信息。例如，IBM的导航条。BannerBanner的中文直译为旗帜、网幅或横幅，意译则为网页中的广告。多数Banner都以JavaScript技术或Flash技术制作，通过一些动画效果可展示更多的内容，并吸引用户观看。内容板块301第1章网页设计基础网页的内容板块通常是网页的主体部分。这一板块可以包含各种文本、图像、动画、超链接等。例如，蔡司光学网站的内容板块。版尾板块版尾，顾名思义是网页页面最底端的板块，通常放置网站的版权信息。例如，陶氏化学的版尾版权板块。1.3网页布局基础在设计网页时，需要了解网页的5种基本结构布局。1．“国”字型“国”字型网页布局又称“同”字型网页布局，其最上方为网站的Logo，Banner及导航条，接下来是网站的内容板块。网页设计与制作（CS4中文版）从新手到高手4网页设计与制作（CS4中文版）从新手到高手在内容板块左右两侧通常会分列两小条内容，可以是广告、友情链接等，也可以是网站的子导航条，最下面则是网站的版尾或版权板块。2．拐角型拐角型布局也是一种常见的网页结构布局。其与“国”字型布局只是在形式上有所区别，实际差异不大。拐角型布局的网页和“国”字型布局的网页区别在于其内容板块只有一侧有侧栏。501第1章网页设计基础这种布局的网页比“国”字型布局的网页稍微个性化一些，常用于一些娱乐性网站，例如，CW电视台的官方网站就是拐角型布局。3．上下框架型上下框架型网页布局比“国”字型网页布局和拐角型网页布局都更加简单一些。在上下框架布局网页中，主题部分并非如“国”字型或拐角型一样有主栏和侧栏组成，而是一个整体或复杂的组合结构。上下框架型网页布局应用在一些栏目较少的网站。例如，意大利导游网。4．左右框架型这是一种被垂直划分为两个或更多个框架的网页布局结构，类似将上下框架型布局旋转90度之后的效果。左右框架型网页布局通常会被应用到一些个性化的网页或大型论坛网页中，具有结构清晰、一目了然的优点。例如，巴西的iDealInteractive汽车销售公司的网页就是如此。5．封面型这种类型的网页通常作为一些个性化网站的首页，以精美的动画加上几个链接或“进入”按钮，甚至只在图片或动画上做超链接。娱乐性的网站或个人网站偏好使用这种布局方式。例如，英国电视节目《幸存者》的网站。网页设计与制作（CS4中文版）从新手到高手6网页设计与制作（CS4中文版）从新手到高手1.4网页色彩基础网页设计是平面设计的一个分支，和其他平面设计类似，对色彩都有较大的依赖性。色彩可以决定网站的整体风格，也可以决定网站所表现的情绪。1．三原色的概念人类的眼睛是根据所看见的光的波长来识别颜色的。肉眼可识别的白色太阳光事实上是由多种波长的光复合而成的全色光。根据全色光各复合部分的波长（长波、中波和短波），可以将全色光解析为3种基本颜色，即红（Red）、绿（Green）和蓝（Blue）三原色光。可见光中，绝大多数的颜色可以由三原色光按不同的比例混合而成。例如，当3种颜色以相同的比例混合，则形成白色；而当3种颜色强度均为0时，则形成黑色。2．色彩的属性任何一种色彩都会具备色相、饱和度和明度3种基本属性。这3种基本属性又被称为色彩的3要素。修改这3种属性中任意一种，都会影响原色彩其他要素的变化。色相色相是由色彩的波长产生的属性，根据波长的长短，可以将可见光划分为6种基本色相，即红、橙、黄、绿、蓝和紫。根据这6种色相可以绘制一个色相环，表示6种颜色的变化规律。在Photoshop等图像处理软件中，通常用一种渐变色条来表示色彩的色相。饱和度饱和度是指色彩的鲜艳程度，又称彩度、纯度。色彩的饱和度越高，则色相越明确，反之则越弱。饱和度取决于可见光波长的单纯程度。在色彩中，六色色相环中的6种基础色饱和度最高，黑、白、灰没有饱和度。明度明度是指色彩的明暗程度，也称光度、深浅度。色彩的明度来自于光波中振幅的大小。色彩的明度越高，则颜色越明亮，反之则越阴暗。在无彩色系中，明度最高的是白色，而最低的是黑色。在有彩色系中，明度最高的是黄色，最低的是紫色。3．色彩模式自然界中的颜色种类繁多，单纯以颜色的名称来表示颜色是无法适应平面设计及工业生产需要的。因此，人们引入了色彩模式的概念。色彩模式是表示色彩的方法。在不同的应用领域里，表示色彩的方式也有很大区别。在平面设计领域，常用的色彩模式主要分为两种，即RGB色彩模式和CMYK色彩模式。网页设计与制作（CS4中文版）从新手到高手6网页设计与制作（CS4中文版）从新手到高手RGB色彩模式RGB色彩模式主要是应用于输出CRT显示器的一种色彩模式，其采用加法混色法，以描述各种可见光在颜色中占据的比例来分析色彩。RGB色彩的基准是光学三原色（红、绿和蓝）。提示所有网页设计领域中的色彩，都是以RGB色彩模式表现的。例如，常见的#RRGGBB以及数字表示法，都是根据RGB三原色的强度实现的。CMYK色彩模式CMYK色彩模式是主要应用于印刷品的一种色彩模式。其原理是根据印刷时使用的四色油墨混合的比例实现各种色彩，因此属于减法混色法。提示油墨4种颜色分别为青色（Cyan）、洋红色（Magenta，又称品红色）、黄色（Yellow）、黑色（Black，为与RGB的蓝色区分而使用最后一个字母K）。CMYK常用每种颜色深度的百分比来表示。4．Web216安全色在早期各种浏览器中，图像的颜色显示方式并不统一，同样一种颜色在不同的网页浏览器中可能会显示不同的颜色。为了保证网页基本的色彩显示，人们规定了216种颜色的显示方法，这216种颜色以同样的效果在任意的浏览器中不会造成色彩的错乱，被称为“安全的”颜色，即Web216安全色。1.5网页设计与开发技术网页的设计与开发是一项复杂的工程，在设计与开发的过程中可使用多种技术。总体而言，网页的设计与开发可分为前台技术和后台技术两大类。1．前台技术前台技术是指在整个网站体系中，用于实现显示层的技术，或者面向网站用户的技术。目前应用于前台的技术包括如下几种。XHTML技术XHTML（eXtensibleHyperTextMarkupLanguage，可扩展的超文本标记语言）是由HTML语言发展起来的一种标记语言。在W3C的网页标准化体系中，XHTML属于网页的结构技术。CSS技术CSS（CascadingStyleSheets，层叠样式表）是一种数据表文件，在该类数据表中，存储了网页结构语言的各种样式，以及显示方式等内容，并通过表的ID、标签以及类等选择器供XHTML调用。在W3C的网页标准化体系中，CSS属于网页的表现技术。网页设计与制作（CS4中文版）从新手到高手8网页设计与制作（CS4中文版）从新手到高手ECMAScript技术ECMAScript技术是由ECMA国际（EuropeanComputerManufacturersAssociationInternational，欧洲计算机制造商协会，一个由各厂商组成的国际商业化标准组织）制定的标准化脚本语言，其前身为JavaScript脚本语言。ECMAScript脚本语言包含多种子集，例如，微软的JScript和JScript.Net、Adobe的ActionScript以及DigitalMars的DMDScript等。在W3C的网页标准化体系中，ECMAScript属于网页的行为技术。Ajax技术Ajax（AsynchronousJavaScriptandXML，异步JavaScript与XML）是一种由JavaScript脚本语言扩展而来的网页前台开发技术。Ajax允许客户端进行简单的数据处理，并与服务器端进行异步通信，因此可以在不刷新页面的情况下维护数据，减小了服务器程序的负担，并提高了页面的执行效率，降低了网络带宽的占用。E4X技术E4X（ECMAScriptforXML，ECMAScript对XML的扩展）是一种ECMAScript的扩展技术。其提供了一种更直观、语法更简洁的DOM接口，帮助ECMAScript代码访问XML数据，实现更快的访问速度及更好的支持。切片技术切片技术是应用于网页图形处理的一种技术，其最早出现于Adobe公司的ImageReady软件中