网页设计基础知识分享， 让你学的更好

　   今天我们将会为各位朋友们分享下网页设计基础知识，如果你也对这个行业非常感兴趣的话，自然就需要好好的学习下相关的知识，一定让大家做好学习前的知识储备的。

　　一、网页设计工具

　　图像处理设计:

　　adobePhotoShop(外语简称:PS、其程序图标便是它的外语简称)是一个由AdobeSystems开发和发行的图像处理软件。 Adobe Photoshop有两个发行版本:标准版Adobe Photoshop和扩展版Adobe Photoshop Extended，扩展版除包含标准版所有功能之外，还增加了3D处理功能、动画图形编辑功能和高级图像分析功能。 Adobe只支持Windows操作系统和Mac OS操作系统版本的Photoshop ， 但Linux操作系统用户可以通过使用Wine来运行Photoshop CS6。

　　Fireworks，跟Photoshop一样都是图像处理软件，但Fireworks偏向于对网页的处理。

　　StylePix(单位:Hornil)跟PhotoShop一样都是图象处理软件，可以处理光栅及矢量图形。

　　动画设计:

　　Adobe Flash，前称Macromedia Flash，外语简称Flash，前身FutureSplash，既指Adobe Flash Professional多媒体创作程序，也指Adobe Flash Player。

　　网页代码编辑器:

　　Adobe Dreamweave(前称Macromedia Dreamweaver)用于编辑HTML、ASP、JSP、PHP、CSS、XML、JS的页面制作工具;是Adobe公司的著名网站开发工具。它使用所见即所得的接口，亦有HTML编辑的功能。有支持Mac和Windows两个系统的版本。

　　Amaya(单位:万维网联盟)用于编辑HTML、CSS、数学标记语言、可缩放矢量图形的工具。

　　（图片来自网络）

　　二、网页设计基础知识

　　认识网页与网站

　　网页(Web Page)实际上是一个文件，网页经由网址(URL)来识别与存取。当浏览者输入一个网址或单击某个链接，在浏览器中显示出来的就是一个网页。

　　网站(Web Site)是各种各样网页的集合，有的网站内容众多，如新浪、搜狐等门户网站;有个网站只有几个页面，如个人网站。在构成网站的众多网页中，有一个页面比较特殊，称为首页(Home Page)。

　　网页的基本构成要素

　　虽然网页种类繁多，形式内容各有不同。但网页的基本构成要素大体相同，包括标题(Logo)、导航、文本、图片、动画、超链接、表单、音视频等，如图所示。网页设计就是要将上述构成要素有机整合，表达出美与和谐。

　　网页设计基础知识

　　规范的网站建设应遵循一定的流程，主要由规划设计阶段、实施发布阶段、评价阶段组成，各个阶段的具体环节如图所示。

　　网页版式设计

　　网页的版式设计是网页设计的核心，主要内容包括网页整体布局设计和导航样式的设计。本节将介绍常见的几种网页布局，以及网页导航设计应遵循的原则。

　　网页布局

　　网页布局是网页设计的基础，目前网页的布局主要可归为三大类型：分栏式结构、区块分布式结构、无框架局限式结构。

　　1.分栏式结构

　　2.区域分布式结构

　　3.无框架局限式结构

　　导航设计

　　导航是网页设计中不可或缺的基础元素之一。导航就如同一个网站的路标，有了它就不会在浏览网站时“迷路”。导航链接着各个页面，只要单击导航中的超级链接就能进入相应的页面。

　　导航设计的好坏，决定着用户是否能很方便地使用网站。导航设计应直观明确，最大限度地为用户使用考虑，尽可能使网页切换更便捷。导航的设计要符合整个网站的风格和要求，不同的网站会采用不同的导航方式。一般来说，在网页的上端或左侧设置导航栏是比较普遍的方式，如图1.9所示。网站采用上端文字作为一级导航，左侧树状结构菜单作为二级导航。

　　（图片来自网络）

　　导航设计应遵循以下原则：

　　让用户能根据走过的路径，确定下一步的前进方向和路径;

　　不需要浏览太多的页面才能找到需要的信息，让用户能快速而简捷地找到所需的信息，并以最佳的路径到达这些信息;

　　让用户使用网站遇到困难时，能寻求到解决困难的方法，找到最佳路径;

　　让用户清楚地了解整个网站的结构概况，产生整体性感知;

　　对使用频率不同的信息作有序处理

　　网页风格设计

　　同样的版式设计，配色不同，文字样式不同，也可以呈现出多种不同的网页风格。本节将结合实例从网页配色、文字艺术两个方面对网页风格设计进行具体分析。

　　网页配色

　　设计精美的网站都有其色调构成的总体倾向。以一种或几种临近颜色为主导，使网页全局呈现某种和谐、统一的色彩倾向。下面介绍一些网页配色的具体经验。

　　运用色系。先根据网页主题，选定一种主色，然后调整透明度或饱和度，也就是将色彩变浅或加深，调配出新的色彩。这样的页面看起来色彩一致，有层次感，如图1.10所示。IBM网站运用蓝色系营造出蓝色海洋的感觉。

　　使用对比色。可以充分利用对比色进行设计，同时注意使用灰色调进行调和。这样的作品页面色彩丰富，

　　以上就是我们为各位朋友们分享的网页设计基础知识，大家是不是都好好的学习了呢？相信上面的内容可以帮助大家更好的学习这项技能。