网页设计基础知识
1.1 网站
网站（Web Site）是一个存放网络服务器上的完整信息的集合体。它包含一个或是多个网页，这些网页以此一定的方式链接于一起，成为一个整体，用来描述一组完整的信息或是达到某种期望的宣传效果。有的网站内容众多，如新浪、搜狐等门户网站；有的网站仅有几个页面，如个人网站。
1.2 网页
网页（Web Page）事实上是一个文件，网页里面可以有文字、图像、声音以及视频信息等。网页可以看成是一个单一体，是网站的一个元素。
平常我们所听说的“新浪”、“搜狐”、“网易”等，乃是俗称的“网站”。因而如果我们访问这些网站的时候，最为直接访问的便是“网页”了。这许许多多的网页亦组成了整个站点，亦便是网站。
1.3 首页
首页（Home page），它是一个单独的网页，与一般网页一样，可以存放各种信息，除此之外亦是一个特殊的网页，作为整个网站的起始点与汇总点。例如，如果浏览者输入搜狐网站地址“www.sohu.com”之后出现于第一个页面，即sohu网站的首页。
问题：首页与主页有区别吗？
一般网站作为方便浏览者查找与分类浏览网站的信息，会把信息分类，并且建立一个网页以此放置网站信息的目录，即网站的主页。
并非所有的网站均把主页设置作为首页，有的网站喜欢于首页放置一段进入动画，并且把主页的链接放置于首页之上，浏览者需要单击首页的链接进入主页。
1.4网页的表现形式
1.静态网页：客户端和服务器端绝不发生相互作用
访问者只能被动地浏览网站建设者提供的网页内容。其特点：
网页内容绝不会发生变化，如果网页设计者修改了网页的内容。绝不能实现与浏览网页的用户间的交互。信息流向是单向的。
2.动态网页：客户端和服务器端要发生相互作用
动态网页是指浏览器可以与服务器数据库进行实时数据交流的交互网页，因而绝不是加上了动画等效果的动感网页。动态网页技术的网站可以实现越来越多的功能，如用户注册、用户登录、搜索查询、用户管理、订单管理等。信息流向是双向的。
2.1 网站LOGO
1.通常网站为体现其特色和内涵，涉及并且制作一个LOGO图如同放置于网站的左上角或是其他醒目的位置。
2.企业网站经常使用企业的标志或是注册商标。
3.一个设计优秀的LOGO可以予浏览者留下深刻的印象，作为网站与企业形象宣传起到十分重要的作用。
2.2 导航条
导航条是网页的重要组成元素。设计的目的是把站点之内的信息分类处理，接着放在网页之中以此帮助浏览者快速查找站之内信息。
导航条的形式多种多样，包括文本导航条、图像导航条及动画导航条等。
有些使用特殊技术（例如Flash、JavaScript、CSS）制作的导航条也可以具有下拉菜单的功能。
2.3 Banner
Banner的中文意思是横幅。Banner的内容一般作为网页之中的广告。
于网页布局之中，大部分网页把Banner放置于和导航条相邻处，或是其他醒目的位置以此吸引浏览者浏览。
2.4 内容版块
网页的内容版块是整个页面的组成部分。
设计人员可以透过该页面的栏目要求来设计不同版块，每个版块可以有一个标题内容，并每个内容版块重要来显示不同文本信息。
2.5 版尾或是版权版块
版尾，即页面最低端的版块。
这部分位置一般放置网页的版权信息，及网页所有者、设计者的联系方式等。
有的网站亦把网站的友情链接及一些附属的导航条放置于这里。
3.1 文本
网页之中的信息以此文本为主。和图片相比，文字尽管绝不如图片那样能够不久引起浏览者的注意，但是反而能准确地表达信息的内容与含义。
3.2 图片
用户于网页之中使用的图片格式重要包括GIF、JPEG与PNG等，其中使用最为广泛的是GIF与JPEG两种格式。
3.3 超链接
超链接于本质之上属于一个网页的一部分，是一种允许用户同一其他网页或是站点间进行连接的元素。
超链接是指自一个网页指向一个目标的连接关系，这个目标可以是另一个网页，亦可以是相同网页之上的不同位置，也可以是一个图片、一个电子邮件地址、一个文件，而且是一个应用程序。
3.4 动画
于网页之中借以越来越有效地吸引浏览者的注意，许多网站的广告均做成了动画形式。
网页之中的动画重要有两种：GIF动画与Flash动画。其中GIF动画只能有256种颜色，重要用于简单动画与图标。
3.5 声音与视频
声音是多媒体网页的一个重要组成部分。用于网络的声音文件的格式十分多，常用的有MIDI、WAV、MP3与AIF等。
很多浏览器你们插件亦可以支持MIDI、WAV与AIF格式的文件，因而MP3与RM格式的声音文件亦需要专门的浏览器播放。
3.6 表格
于网页之中表格用来控制网页之中信息的布局方式。
包括两个方面：一是使用行与列的形式来布局文本与图像及其他的列表化数据；二是可以使用表格来精确控制各种网页元素于网页之中出现的位置。
3.7 表单
网页之中的表单一般用来接受用户于浏览器端的输入，接着把这些信息发送到网页设计者设置的目标端。这个目标可以是文本文件、Web页、电子邮件，亦可以是服务器端的应用程序。
表单一般用来收集联系信息、接受用户要求、获得反馈意见、设置来宾签名簿、让浏览者注册为会员并且以此会员的身份登录站点等。
3.8 其他常见元素
包括悬停按钮、Java特效、ActiveX等各种特效。它们不但能点缀网页，使网页越来越活泼有趣，所以于网上娱乐、电子商务等方面亦有着不可忽视的作用。
4.1 文本编辑器
不但于记事本之中可以编写HTML代码，任何文本编辑器均可以编写HTML。比如写字板、word等，但是保存的时候必需保存为。html或是。htm格式。
有一些文本编辑器专门提供网页制作以及程序设计等许多有用的功能，支持HTML、CSS、PHP、ASP、Perl、C/C++、Java、JavaScript、VBScript等多种语法的着色显示。
例如：Sublime text3、EmEditor、EditPlus、UltraEdit
4.2 Dreamweaver网页设计软件
这是现在使用最为广泛的网页编辑工具之一。
Dreamweaver是Macromedia公司推出的网页编辑工具。
它是一个所见即所得网页编辑器，支持最新的DHTML（Dynamic HTML，动态HTML）与CSS标准。采用了多种先进技术，能够迅速高效地创建较具表现力与动感效果的网页，使网页创作过程变得非常简单。
另外还有Microsoft公司开发的FrontPage亦是设计网页与管理网站的软件。除所见即所得的编辑功能以外，亦可以直接编辑HTML标记，让设计者可以轻松的编辑网页。
4.3 Photoshop图像处理软件
Photoshop是Adobe公司推出的功能强大的平面图像处理软件，Photoshop于图像编辑、视窗出版、网页图像编辑、广告设计、婚纱摄影等各行各业的广泛应用，它已经成为许多涉及图像处理的行业的事实标准。
4.4 Flash动画设计软件
Flash是Macromedia公司开发的一款优秀的网页动画开发软件，自简单的动画到复杂的交互式Web应用程序，它使用户可以创建任何作品。透过添加图片、声音与视频，可以使Flash应用程序媒体丰富多彩。
Flash遭称为“最为灵活的前台”，其独特的编译方式与跨平台的能力，广泛的应用（软件、游戏、Web应用程序、多媒体娱乐等多方面），使之愈来愈成为一种重要的工具。
4.5 Fireworks网页图像处理软件
Fireworks是Macromedia公司发布的一款专门作为网络图形设计的图形编辑软件，使用Fireworks均不但可以轻松地制作出尺寸比较小的图形、GIF动画。
假如把Photoshop比作全能的图像处理大师的话，Fireworks便是精于网页图像处理的专家。它于矢量图形的处理方面有其独特之处。
于Web应用方面，Fireworks是最为早提供切片功能的图像处理软件。Fireworks支持于图像中绘制热区并且直接生成网页文档，并具备简单的GIF动画制作能力，除此之外支持把动画转换为Flash文件并且嵌入到网络中播放。
5.1 CSS
CSS即层叠样式表（CascadingStyle Sheet）。于主页制作时采用CSS技术，可以有效地对于页面的布局、字体、颜色、背景与其它效果实现更为精确的控制。
HTML=内容
CSS=表现
CSS带来的好处：
CSS使页面载入越来越快；
CSS可以降低网站的流量费用；
CSS使设计师于修改设计时越来越有效率，因而代价越来越低；
CSS使整个站点保持视觉的一致性；
5.2 JavaScript
JavaScript是改由 Netscape公司开发的一种脚本语言，可以遭嵌入HTML文件之中，它是一种基于对象与事件驱动，并且具有安全性能的脚本语言。
于HTML基础之上，使用JavaScript可以开发交互式Web网页，可以回应使用者的需求事件因而绝不需要透过网络来回传输资料。
简单地说，如果用户输入一项信息时，绝不需要先行把信息传给服务器处理，再次传回来，或者可以直接遭客户端的程序处理。
6.1 网页布局
网页布局是网页设计的基础，目前网页的布局重要可归为三大类型：
1.分栏式结构
2.区域分布式结构
3.无框架局限式结构
分栏式布局
区域分布式布局
无框架局限式布局
6.2 导航设计
1.导航是网页设计之中不可或缺的基础元素之一。导航便如同一个网站的路标，有了它便绝不会于浏览网站时“迷路”。导航链接着各个页面，如果单击导航之中的超级链接便能进入相应的页面。
2.导航设计的好坏，决定着用户是否能非常方便地使用网站。导航设计应直观明确，最为大限度地作为用户使用考虑，尽量使网页切换越来越便捷。导航的设计要符合整个网站的风格与要求，不同的网站会采用不同的导航方式。
3.一般来说，于网页的上端或是右侧设置导航栏是较普遍的方式。网站采用上端文字当作一级导航，右侧树状结构菜单作为二级导航。
让用户了解当前所处的位置；
4.让用户能依据走过的路径，确定之下一步的前进方向与路径；
5.绝不需要浏览甚多的页面便能找到需要的信息，让用户能迅速因而简捷地找到所需的信息，并且以此最佳的路径到达这些信息；
6.让用户使用网站遇到困难时，能寻求到解决困难的方法，找到最佳路径；
7.让用户清楚地了解整个网站的结构概况，产生整体性感知；
8.对于使用频率不同的信息作有序处理。
7.1 页面配色
设计精美的网站均有其色调构成的总体倾向。以此一种或是几种临近颜色为主导，使网页全局呈现某种和谐、统一的色彩倾向。
运用色系。先行依据网页主题，选定一种主色，接着调整透明度或是饱和度，亦便是把色彩变浅或是加深，调配出新的色彩。这样的页面看起来色彩一致，有层次感；一般来说，适合在网页标准色的颜色有3大系：蓝色、黄/橙色与黑/灰/白色。
使用对比色。可以充分利用对于比色进行设计，除此之外注意使用灰色调进行调和。这样的作品页面色彩丰富。
7.2 文字艺术
文字于版面之中一般占有绝大部分空间，是网页信息的主要载体。处理好文字关系到网页设计的成败。字体的选择、字号的大小、文字的颜色、行和行的距离、段落和段落的安排，均需要认真考虑。好的文字设计会予网页增色不少。
7.3 实例分析
1.网站描述
这是一家航空公司的网站首页。界面设计给人现代、驿动的感觉，这和公司的风格相互一致。导航设计简洁利落，非常值得学习借鉴。
2.布局
网页布局采用的是较常见的分栏式结构。A作为网站的Logo所在的区域；B作为网站主菜双所在的区域；C作为搜索和其他公共功能所在的区域；D作为网站的内容区域，重要改由文字与图片组成；E为版权信息所在的区域。
3.配色
网页选用蓝色系，象征天空，和网站主题一致。网页重要运用了两种蓝色，依次是“#14397D”与“1E95BD”。除此之外，网页文字的配色重要以此白色与蓝色为主。
浙公网安备 33040202000706号