网页设计基础文档格式.docx
《网页设计基础文档格式.docx》由会员分享，可在线阅读，更多相关《网页设计基础文档格式.docx（27页珍藏版）》请在冰点文库上搜索。
9．网站推广
除了网站的规划和制作外，推广网站也是一项重要的工作，例如，登记各种搜索引擎、发布各种广告、公关活动等。
10．网站维护
维护是一项长期的工作，包括对服务器的软件、硬件维护、数据库的维护、网站内容的更新等。
多数网站还会定期改版，保持用户的新鲜感。
1.2网页页面与板块
布局的设计通常需要注意网站的页面大小以及各种板块的安排。
1．网页页面大小
合理地设置页面尺寸，可以避免用户频繁地拖动滚动条。
目前国内的上网者习惯使用微软公司的InternetExplorer浏览器（简称IE浏览器）。
在屏幕分辨率为1024×
768时，不同版本的IE浏览器的屏幕大小如下表所示。
IE浏览器版本屏幕宽度屏幕高度
IE6.01003px600px
IE7.0（菜单栏显示状态）1003px594px
IE7.0（菜单栏隐藏状态）1003px620px
IE8.0（菜单栏隐藏状态）1003px626px
IE8.0（菜单栏显示状态）1003px598px
由左表中的数据可得出，在设计网页时，如不希望用户频繁拖动水平滚动条，可将网页的宽度控制在1003px以内。
2．网页板块构成
网页是由各种板块构成的。
Internet中的网页内容各异，然而多数网页都是由一些基本的板块组成的，包括Logo、导航条、Banner、内容板块、版尾和版权等。
lLogo
Logo是企业或网站的标志。
例如，微软的Logo。
l导航条
导航条是网站的重要组成元素。
合理安排导航条可以帮助浏览者迅速查找到需要的信息。
例如，IBM的导航条。
lBanner
Banner的中文直译为旗帜、网幅或横幅，意译则为网页中的广告。
多数Banner都以JavaScript技术或Flash技术制作，通过一些动画效果可展示更多的内容，并吸引用户观看。
l内容板块
网页的内容板块通常是网页的主体部分。
这一板块可以包含各种文本、图像、动画、超链接等。
例如，蔡司光学网站的内容板块。
l版尾板块
版尾，顾名思义是网页页面最底端的板块，通常放置网站的版权信息。
例如，陶氏化学的版尾版权板块。
1.3网页布局基础
在设计网页时，需要了解网页的5种基本结构布局。
1．“国”字型
“国”字型网页布局又称“同”字型网页布局，其最上方为网站的Logo，Banner及导航条，接下来是网站的内容板块。
在内容板块左右两侧通常会分列两小条内容，可以是广告、友情链接等，也可以是网站的子导航条，最下面则是网站的版尾或版权板块。
2．拐角型
拐角型布局也是一种常见的网页结构布局。
其与“国”字型布局只是在形式上有所区别，实际差异不大。
拐角型布局的网页和“国”字型布局的网页区别在于其内容板块只有一侧有侧栏。
这种布局的网页比“国”字型布局的网页稍微个性化一些，常用于一些娱乐性网站，例如，CW电视台的官方网站就是拐角型布局。
3．上下框架型
上下框架型网页布局比“国”字型网页布局和拐角型网页布局都更加简单一些。
在上下框架布局网页中，主题部分并非如“国”字型或拐角型一样有主栏和侧栏组成，而是一个整体或复杂的组合结构。
上下框架型网页布局应用在一些栏目较少的网站。
例如，意大利导游网。
4．左右框架型
这是一种被垂直划分为两个或更多个框架的网页布局结构，类似将上下框架型布局旋转90度之后的效果。
左右框架型网页布局通常会被应用到一些个性化的网页或大型论坛网页中，具有结构清晰、一目了然的优点。
例如，巴西的iDealInteractive汽车销售公司的网页就是如此。
5．封面型
这种类型的网页通常作为一些个性化网站的首页，以精美的动画加上几个链接或“进入”按钮，甚至只在图片或动画上做超链接。
娱乐性的网站或个人网站偏好使用这种布局方式。
例如，英国电视节目《幸存者》的网站。
1.4网页色彩基础
网页设计是平面设计的一个分支，和其他平面设计类似，对色彩都有较大的依赖性。
色彩可以决定网站的整体风格，也可以决定网站所表现的情绪。
1．三原色的概念
人类的眼睛是根据所看见的光的波长来识别颜色的。
肉眼可识别的白色太阳光事实上是由多种波长的光复合而成的全色光。
根据全色光各复合部分的波长（长波、中波和短波），可以将全色光解析为3种基本颜色，即红（Red）、绿（Green）和蓝（Blue）三原色光。
可见光中，绝大多数的颜色可以由三原色光按不同的比例混合而成。
例如，当3种颜色以相同的比例混合，则形成白色；
而当3种颜色强度均为0时，则形成黑色。
2．色彩的属性
任何一种色彩都会具备色相、饱和度和明度3种基本属性。
这3种基本属性又被称为色彩的3要素。
修改这3种属性中任意一种，都会影响原色彩其他要素的变化。
l色相
色相是由色彩的波长产生的属性，根据波长的长短，可以将可见光划分为6种基本色相，即红、橙、黄、绿、蓝和紫。
根据这6种色相可以绘制一个色相环，表示6种颜色的变化规律。
在Photoshop等图像处理软件中，通常用一种渐变色条来表示色彩的色相。
l饱和度
饱和度是指色彩的鲜艳程度，又称彩度、纯度。
色彩的饱和度越高，则色相越明确，反之则越弱。
饱和度取决于可见光波长的单纯程度。
在色彩中，六色色相环中的6种基础色饱和度最高，黑、白、灰没有饱和度。
l明度
明度是指色彩的明暗程度，也称光度、深浅度。
色彩的明度来自于光波中振幅的大小。
色彩的明度越高，则颜色越明亮，反之则越阴暗。
在无彩色系中，明度最高的是白色，而最低的是黑色。
在有彩色系中，明度最高的是黄色，最低的是紫色。
3．色彩模式
自然界中的颜色种类繁多，单纯以颜色的名称来表示颜色是无法适应平面设计及工业生产需要的。
因此，人们引入了色彩模式的概念。
色彩模式是表示色彩的方法。
在不同的应用领域里，表示色彩的方式也有很大区别。
在平面设计领域，常用的色彩模式主要分为两种，即RGB色彩模式和CMYK色彩模式。
lRGB色彩模式
RGB色彩模式主要是应用于输出CRT显示器的一种色彩模式，其采用加法混色法，以描述各种可见光在颜色中占据的比例来分析色彩。
RGB色彩的基准是光学三原色（红、绿和蓝）。
lCMYK色彩模式
CMYK色彩模式是主要应用于印刷品的一种色彩模式。
其原理是根据印刷时使用的四色油墨混合的比例实现各种色彩，因此属于减法混色法。
4．Web216安全色
在早期各种浏览器中，图像的颜色显示方式并不统一，同样一种颜色在不同的网页浏览器中可能会显示不同的颜色。
为了保证网页基本的色彩显示，人们规定了216种颜色的显示方法，这216种颜色以同样的效果在任意的浏览器中不会造成色彩的错乱，被称为“安全的”颜色，即Web216安全色。
1.5网页设计与开发技术
网页的设计与开发是一项复杂的工程，在设计与开发的过程中可使用多种技术。
总体而言，网页的设计与开发可分为前台技术和后台技术两大类。
1．前台技术
前台技术是指在整个网站体系中，用于实现显示层的技术，或者面向网站用户的技术。
目前应用于前台的技术包括如下几种。
lXHTML技术
XHTML（eXtensibleHyperTextMarkupLanguage，可扩展的超文本标记语言）是由HTML语言发展起来的一种标记语言。
在W3C的网页标准化体系中，XHTML属于网页的结构技术。
lCSS技术
CSS（CascadingStyleSheets，层叠样式表）是一种数据表文件，在该类数据表中，存储了网页结构语言的各种样式，以及显示方式等内容，并通过表的ID、标签以及类等选择器供XHTML调用。
在W3C的网页标准化体系中，CSS属于网页的表现技术。
lECMAScript技术
ECMAScript技术是由ECMA国际（EuropeanComputerManufacturersAssociationInternational，欧洲计算机制造商协会，一个由各厂商组成的国际商业化标准组织）制定的标准化脚本语言，其前身为JavaScript脚本语言。
ECMAScript脚本语言包含多种子集，例如，微软的JScript和JScript.Net、Adobe的ActionScript以及DigitalMars的DMDScript等。
在W3C的网页标准化体系中，ECMAScript属于网页的行为技术。
lAjax技术
Ajax（AsynchronousJavaScriptandXML，异步JavaScript与XML）是一种由JavaScript脚本语言扩展而来的网页前台开发技术。
Ajax允许客户端进行简单的数据处理，并与服务器端进行异步通信，因此可以在不刷新页面的情况下维护数据，减小了服务器程序的负担，并提高了页面的执行效率，降低了网络带宽的占用。
lE4X技术
E4X（ECMAScriptforXML，ECMAScript对XML的扩展）是一种ECMAScript的扩展技术。
其提供了一种更直观、语法更简洁的DOM接口，帮助ECMAScript代码访问XML数据，实现更快的访问速度及更好的支持。
l切片技术
切片技术是应用于网页图形处理的一种技术，其最早出现于Adobe公司的ImageReady软件中，可将整张图片切割为几张图片，并输出一个网页，将图片作为网页表格或层中的内容。
切片技术的出现，提高了平面设计转换为网页设计的效率。
目前，可以使用切片技术的图像处理软件包括Photoshop（ImageReady目前已被整合到Photoshop中）、Fireworks、Illustrator以及CorelDRAW（CorelDRAW中称为裁切工具）。
2．后台技术
后台技术是指在整个网站体系中，用于实现控制层或模型层的技术，或者面向网站数据管理的技术。
目前应用于后台的技术包括如下几种。
lASP技术
ASP（ActiveServerPages，动态服务网页）是微软公司开发的一种由VBScript脚本语言或JavaScript脚本语言调用FSO（FileSystemObject，文件系统对象）组件实现的动态网页技术。
ASP技术必须通过Windows的ODBC与后台数据库通信，因此只能应用于Windows服务器中。
ASP技术的解释器包括两种，即Windows9X系统的PWS和WindowsNT系统的IIS。
lASP.NET技术
ASP.NET是由微软公司开发的ASP后续技术，其可由C#、VB.NET、Perl及Python等编程语言编写，通过调用System.Web命名空间实现各种网页信息处理工作。
ASP.NET技术主要应用于WindowsNT系统中，需要IIS及.NETFramework的支持。
通过Mono平台，ASP.NET也可以运行于其他非Windows系统中。
lJSP技术
JSP（JavaServerPages，Java服务网页）是由太阳计算机系统公司开发的，以Java编写、动态生成HTML、XML或其他格式文档的技术。
JSP技术可应用于多种平台，包括Windows、Linux、UNIX及Solaris。
JSP技术的特点在于，如果客户端第一次访问JSP页面，服务器将现解释源程序的Java代码，然后执行页面的内容。
因此速度较慢。
而如果客户端是第二次访问，则服务器将直接调用Servlet，无需再对代码进行解析，因此速度较快。
lPHP技术
PHP（PersonalHomePage，个人主页）也是一种跨平台的网页后台技术。
其最早由丹麦人RasmusLerdorf开发，并由PHPGroup和开放源代码社群维护，是一种免费的网页脚本语言。
PHP是一种应用广泛的语言，其多在服务器端执行，通过PHP代码产生网页并提供对数据库的读取。
1.6PhotoshopCS4简介
Photoshop是Adobe公司开发的一款专业图形图像处理软件。
1．Photoshop概述
在图像处理领域中，Photoshop是目前最流行的图像处理工具，其主要处理由像素（Pixels）构成的数字图像，利用其编辑与绘图工具进行图片编辑工作。
Photoshop除了导入和处理位图外，还能导入由CorelDraw或Illustrator创建的各种矢量图，并对矢量图进行处理。
在网页设计领域中，Photoshop主要被用来进行网页制作前期的工作，包括处理网页所使用的各种图像、绘制各种按钮、图标以及制作网页模板，并通过切片工具将设计好的网页模板切割成网页。
2．Photoshop新增功能
Photoshop最新的版本为CS4（11.0，于2008年9月发布），新增了调整和蒙版面板，用于创建和编辑非破损蒙版的所有工具，快速调整特定的图像区域。
除此之外，PhotoshopCS4还新增了3D绘图与合成工具，允许用户直接在3D模型上绘制图形，并将渐变图像转换为3D图像。
3．创建图像
与Dreamweaver不同，PhotoshopCS4没有欢迎屏幕。
因此，使用Photoshop创建图像，只能通过执行【文件】|【新建】命令或按Ctrl+N组合键，打开【新建】对话框，通过该对话框来实现。
在【新建】对话框中，用户可设置图像的各种基本属性，如表所示。
属性名作用
名称创建图像文档的预设名称
预设图像的属性方案，包括官方设置的9种及用户自定义的图像属性方案
大小如选择的预设方案是官方的方案，则这里会显示图像的像素大小
续表
宽度用户可在这里设置创建图像的宽度，同时选择不同的单位，例如像素、英寸、厘米、毫米、点、派卡及列等
高度用户可在这里设置创建图像的高度，同时选择不同的单位
分辨率用户可在这里设置创建图像的分辨率，单位可以为像素/英寸或像素/厘米
颜色模式用户可在这里设置创建图像的颜色模式，包括位图（黑白双色）、灰度（自8位到32位）、RGB颜色（自8位到32位，主要用于屏幕显示）、CMYK颜色（8位和16位，主要用于印刷）以及色彩最丰富的Lab颜色（8位和16位，主要用于数码摄影与相片处理）等
背景内容用户可在这里设置创建的图像背景颜色，可选择白色、背景色及透明等3种
颜色配置
文件用户可在这里设置Photoshop管理颜色的规则，不同的颜色模式需要使用不同的颜色配置文件。
例如，RGB颜色可使用AdobeRGB或sRGBIEC61966—2.1等
像素长宽比用户可在这里设置每个像素点的具体形状，包括普通正方形及各种长宽比的矩形（主要用于输出宽频显示器等）
存储预设单击这个按钮，用户可将目前设置的属性存储起来，并设置一个名称。
在下次创建图像时通过【预设】属性调用
删除预设单击这个按钮，可删除【预设】属性中选择的属性
1.7DreamweaverCS4简介
Dreamweaver是Macromedia（现被Adobe公司收购）开发的一款强大的所见即所得网页设计与开发工具。
1．DreamweaverCS4新增功能
在网页领域，Dreamweaver是目前最流行的网页设计与开发工具之一。
Dreamweaver目前最新版本CS4（10.0，于2008年9月发布），支持将PSD文件作为智能对象导入网页，并使网页中的图像随智能对象的改变而更新；
同时，增强了代码提示引擎的功能，方便用户编写各种脚本程序。
在DreamweaverCS4中，还新增了实时视图工具，通过Presto引擎模拟网页浏览器，执行各种网页脚本，大幅提高了网页脚本开发和调试的效率。
另外，DreamweaverCS4还可以方便地编写各种XML、JavaScript、CSS、ActionScript以及XSLT文档，并和Flash、Fireworks等软件一起加入了AIR编写功能。
用户可使用Dreamweaver开发富互联网应用程序。
DreamweaverCS4使用了全新的用户界面，大幅改良了工作区布局工具，用户可根据网页开发的需要，选择不同的工作区布局方式，最大限度提高工作效率。
Dreamweaver支持通过两种不同的方式创建网页文档，并支持创建多种不同的文档格式。
l通过欢迎屏幕
在打开Dreamweaver之后，在Dreamweaver的工作区会显示一个欢迎屏幕，并提供新建的文档类型列表。
用户可直接单击列表中的项目，创建HTML网页文档。
除了HTML文档以外，Dream-weaver还可以创建多种与网页有关的文档。
例如，ColdFussion文档、PHP文档、由VBScript编写的ASP文档、XSLT样式表、CSS样式表、JavaScript脚本、XML数据文档等。
2．创建网页文档
如果文档类型列表中并未包含用户所需要的类型，则用户可单击【更多】按钮，打开【新建文档】对话框，在【新建文档】对话框的选项卡中选择更多的文件类型。
l执行【文件】命令
除了通过欢迎屏幕以外，用户还可以执行【文件】|【新建】命令（或按Ctrl+N组合键），直接打开【新建文档】对话框，在对话框中选择相应的选项卡，并设置【页面类型】列表和【布局列表】等列表项，单击【创建】按钮，完成文档的创建。
在【新建文档】对话框中可选择5种网页文档类型，如表所示。
选项卡名说明
空白页创建普通空白网页或程序页
空模板创建网页模板或程序页模板
模板中的页根据已有的模板创建页面
示例中的页根据已有的样式或框架创建网页
其他创建其他网页应用程序的文档
3．保存网页文档
在使用Dreamweaver创建和编辑网页之后，可以执行【文件】命令，在弹出的菜单中选择相应的命令保存网页，如表所示。
命令作用
【保存】保存更改的文档
【另存为】将文档存储为副本
【保存全部】保存已打开的所有文档
【保存到远程服务器】根据站点的【远程信息】设置，将文档保存到服务器中
【另存为模板】将文档保存为网页模板
1.8FlashCS4简介
Flash是（Macromedia，后被Adobe收购）开发的一种矢量动画及多媒体开发工具。
在动画制作领域，Flash是一种易上手且功能强大的2D矢量动画制作软件，由于其制作的动画体积小、效果丰富，且支持脚本控制，因此被大量应用于互联网中。
Flash允许用户通过时间轴、元件、补间、形状等方式制作动画，也允许用户使用ActionScript脚本代码绘制图形和创建各种动画。
1．Flash新增功能
Flash最新的版本为CS4（10.0，于2008年9月发布），相对之前的版本，FlashCS4的补间动画不再由时间轴和关键帧组成，而是完全由动画对象创建。
同时，FlashCS4还增加了动画编辑器功能，允许用户直接对补间动画的运动轨迹等属性进行操作。
另外，FlashCS4还集成了3D变形和反向骨骼工具，增强了字体引擎，并增加了直接发布AIR文件的功能。
2．创建和保存影片
Flash与Dreamweaver类似，在打开FlashCS4时，同样会打开Flash欢迎屏幕。
因此，在创建Flash影片时同样可使用两种方法。
用户既可通过欢迎屏幕中的新建影片文档列表创建各种Flash文档，也可以执行【文件】|【新建】命令或按Ctrl+N组合键，打开【新建文档】对话框，通过该对话框创建新的文档。
保存Flash影片的方式与保存网页也十分类似，都允许用户将已制作的影片保存为独立的文件、另存一份副本，以及保存成为模板等。
1.9网页设计理念
网页设计不仅是一门实用技术，更是一门创造性的艺术。
其是一个感性思考与理性分析相结合的过程。
网页设计不仅依赖于各种平面设计软件和网页制作软件，更依赖于网页设计者的独立思考。
1．网页设计的任务
在设计网页时，需要首先了解网页设计的任务以及网页设计的最终目的。
网页设计是艺术创造与技术开发的结合体。
其任务是吸引用户，为用户创造良好的体验，在此基础上为网页的所有者提供收益。
任何网页设计的行为，都是围绕这一最终目的进行的。
在设计网页时，可将网页根据网页的内容，即网页为用户提供的服务类型分为3类。
并根据网页的类型设计网页的风格。
l资讯类站点
资讯类站点通常是比较大型的门户网站。
这类网站需要为用户提供海量的信息，在用户阅读这些信息时寻找商机。
在设计这类站点时，需要在信息显示与版面简洁等方面找到平衡点，做到既以用户阅读信息的便捷性为核心，又要保持页面的整齐和美观，防止大量的信息造成用户视觉疲劳。
在设计文本时，可着力对文本进行分色处理，将各种标题、导航、内容按照不同的颜色区分。
同时要对信息合理分类，帮助用户以最快的速度找到需要的信息。
以美国最大的在线购物网站亚马逊的首页为例。
其在设计中，使用了较为传统的“国”字型布局。
其网站的3类导航使用了3种字体颜色，在同一板块内的导航标题使用橙色粗体，而导航内容则使用普通的蓝色字体。
在刺激用户感官的同时避免视觉疲劳。
在亚马逊首页中，每一条详细信息都保证有一张预览图片，防止大段乏味的文字使用户厌烦。
l艺术资讯类站点
艺术资讯类站点通常是中小型的网站，例如一些大型公司、高校、企业的网站等。
互联网中的大多数网站都属于这一类型。
这类网站在设计上要求较高，既需要展示大量的信息，又需要突出公司、高校和企业的形象，还需要注
升级会员 