网页设计的基础知识
以下就是网页设计的基础知识等等的介绍，希望为您带来帮助。
一、认识互联网
Internet是一个全球性的计算机互联网络，中文名称为“国际互联网”或“因特网”。
它集现代通信技术和现代计算机技术于一体，是计算机之间进行国际信息交流和实现资源共享的良好手段。
Internet将各种各样的物理网络连接起来，构成一个整体，而不考虑这些网络的类型、规模、和地理位置的差异。
互联网是全球*的信息资源库，几乎包括了人类生活的方方面面的信息，在社会的各个方面为全人类提供便利。
二、域名与空间
域名
域名是由一串用点分隔的字符组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位(有时也指地理位置，地理上的域名，指代有行政自主权的一个地方区域)。
域名是企业或事业单位在因特网上进行相互联络的网络地址。
域名是企业和事业单位进入因特网必不可少的身份证明。
空间
网站是建立在网络服务器上的一组电脑文件，它需要占据一定的硬盘空间，也就是一个网站所需的网站空间。
三、网页与网站
网页
网页是一种可以在互联网上传输，能被浏览器识别并翻译成页面并显示出来的文件。
网页是网站的基本构成元素。
网站
网页也叫做站点，是提供各种信息和服务的基地。
网站是有独立域名，独立存放空间的内容的集合，这些内容可能是网页，也可能是程序或其他文件。
很多网页链接在一起就组成了一个网站。
四、静态网站与动态网站
静态网页
网页又称HTML文件，在网站建设初期经常采用静态网页的形式。网站建设者把内容设计成静态网页，访问者只能被动地浏览网站建设者提供的网页内容。静态网页的特点如下。
网页的内容不会发生变化，除非网页设计者修改了网页的内容。
不能实现与浏览网页的用户之间的交互。
动态网页
动态网页是指网页文件里包含了程序代码，通过后台数据库与Web服务器的信息交互，由后台数据库提供实时数据更新和数据查询服务。动态网页的特点如下。
以数据库技术为基础，可以大大降低网站维护的工作量。
可以实现如用户注册、用户登陆、搜索查询等更多的功能。
动态网页并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。
需要做一定的技术处理才能适应搜素引擎的要求。
五、网站的类型
网站是多个网页的集合，目前还没有一个严谨的网站分类方式。按照主体性质划分，网站可以划分为门户网站、电子商务网站、娱乐网站、游戏网站、时尚网站及个人网站的等。
网页设计基础知识
认识网页与网站
网页(Web Page)实际上是一个文件，网页经由网址(URL)来识别与存取。当浏览者输入一个网址或单击某个链接，在浏览器中显示出来的就是一个网页。
网站(Web Site)是各种各样网页的集合，有的网站内容众多，如新浪、搜狐等门户网站;有个网站只有几个页面，如个人网站。在构成网站的众多网页中，有一个页面比较特殊，称为首页(Home Page)。例如，当浏览者输入搜狐网站地址“www.sohu.com”后出现在*个页面，即sohu网站的首页，如图1.1所示。浏览者可以根据首页的导航进入其他页面，了解更多内容。
网页的基本构成要素
虽然网页种类繁多，形式内容各有不同。但网页的基本构成要素大体相同，包括标题(Logo)、导航、文本、图片、动画、超链接、表单、音视频等，如图所示。网页设计就是要将上述构成要素有机整合，表达出美与和谐。
网站建设的基本流程
规范的网站建设应遵循一定的流程，主要由规划设计阶段、实施发布阶段、评价阶段组成，各个阶段的具体环节如图所示。
网页版式设计
网页的版式设计是网页设计的核心，主要内容包括网页整体布局设计和导航样式的设计。本节将介绍常见的几种网页布局，以及网页导航设计应遵循的原则。
网页布局
网页布局是网页设计的基础，目前网页的布局主要可归为三大类型：分栏式结构、区块分布式结构、无框架局限式结构。
1.分栏式结构
2.区域分布式结构
3.无框架局限式结构
导航设计
导航是网页设计中不可或缺的基础元素之一。导航就如同一个网站的路标，有了它就不会在浏览网站时“迷路”。导航链接着各个页面，只要单击导航中的超级链接就能进入相应的页面。
导航设计的好坏，决定着用户是否能很方便地使用网站。导航设计应直观明确，*限度地为用户使用考虑，尽可能使网页切换更便捷。导航的设计要符合整个网站的风格和要求，不同的网站会采用不同的导航方式。一般来说，在网页的上端或左侧设置导航栏是比较普遍的方式，如图1.9所示。网站采用上端文字作为一级导航，左侧树状结构菜单作为二级导航。
导航设计应遵循以下原则：
让用户了解当前所处的位置;
让用户能根据走过的路径，确定下一步的前进方向和路径;
不需要浏览太多的页面才能找到需要的信息，让用户能快速而简捷地找到所需的信息，并以*的路径到达这些信息;
让用户使用网站遇到困难时，能寻求到解决困难的方法，找到*路径;
让用户清楚地了解整个网站的结构概况，产生整体性感知;
对使用频率不同的信息作有序处理
网页风格设计
同样的版式设计，配色不同，文字样式不同，也可以呈现出多种不同的网页风格。本节将结合实例从网页配色、文字艺术两个方面对网页风格设计进行具体分析。
网页配色
设计精美的网站都有其色调构成的总体倾向。以一种或几种临近颜色为主导，使网页全局呈现某种和谐、统一的色彩倾向。下面介绍一些网页配色的具体经验。
运用色系。先根据网页主题，选定一种主色，然后调整透明度或饱和度，也就是将色彩变浅或加深，调配出新的色彩。这样的页面看起来色彩一致，有层次感，如图1.10所示。IBM网站运用蓝色系营造出蓝色海洋的感觉。
使用对比色。可以充分利用对比色进行设计，同时注意使用灰色调进行调和。这样的作品页面色彩丰富，如图1.11所示。
文字艺术
文字在版面中一般占有绝大部分空间，是网页信息的主要载体。处理好文字关系到网页设计的成败。字体的选择、字号的大小、文字的颜色、行与行的距离、段落与段落的安排，都需要认真考虑。好的文字设计会给网页增色不少，如图所示。
实例分析
1.网站描述
这是一家航空公司的网站首页。界面设计给人现代、驿动的感觉，这与公司的风格相一致。导航设计简洁利落，很值得学习借鉴，如图1.14所示。
2.布局
网页布局采用的是比较常见的分栏式结构，如图1.15所示。A为网站的Logo所在的区域;B为网站主菜单所在的区域;C为搜索与其他公共功能所在的区域;D为网站的内容区域，主要由文字和图片组成;E为版权信息所在的区域。
3.配色
网页选用蓝色系，象征天空，与网站主题一致。网页主要运用了两种蓝色，分别是“#14397D”和“1E95BD”，如图1.16所示。除此之外，网页文字的配色主要以白色和蓝色为主。
网站设计中应注意的原则
一、 明确建立网站的目标和用户需求
Web站点的设计是展现企业形象、介绍产品和服务、体现企业发展战略的重要途径，因此我们必须明确设计站点的目的和用户需求，从而做出切实可行的设计计划。我们会根据消费者的需求、市场的状况、企业自身的情况等进行综合分析，以“消费者”为中心，而不是以“美术”为中心进行设计规划。
在设计规划时我们会考虑：
建设网站的目的是什么?
为谁提供服务和产品?
企业能提供什么样的产品和服务?
网站的目的消费者和受众的特点是什么?
企业产品和服务适合什么样的表现方式(风格)?
二、网页设计总体方案主题鲜明
在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的整体风格和特色作出定位，规划网站的组织结构。
Web站点应针对所服务对象(机构或人)的不同而具有不同的形式。有些站点只提供简洁文本信息;有些则采用多媒体表现手法，提供华丽的图像、闪烁的灯光、复杂的页面布置，甚至可以下载声音和录像片段。好的Web站点把图形表现手法和有效的组织与通信结合起来。 为了做到主题鲜明突出，要点明确，我们将按照客户的要求，以简单明确的语言和画面体现站点的主题;调动一切手段充分表现网站点的个性和情趣，办出网站的特点。
Web站点主页应具备的基本成分包括： 页头：准确无误地标识你的站点和企业标志; Email地址：用来接收用户垂询; 联系信息：如普通邮件地址或电话; 版权信息：声明版权所有者等。
充分利用已有信息，如客户手册.公共关系文档.技术手册和数据库等。
三、网站的版式设计
网页设计作为一种视觉语言，特别讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处。
版式设计通过文字图形的空间组合，表达出和谐与美。
多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。为了达到*的视觉表现效果，我们将反复推敲整体布局的合理性，使浏览者有一个流畅的视觉体验。
四、色彩在网页设计中的作用
色彩是艺术表现的要素之一。在网页设计中，我们的设计师根据和谐、均衡和重点突出的原则，将不同的色彩进行组合.搭配来构成美丽的页面。 根据色彩对人们心理的影响，合理地加以运用。如果您的企业有CIS(企业形象识别系统)，我们将按照其中的VI进行色彩运用。 五、网页设计形式与内容相统一
为了将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。
灵活运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。如对称原则在页面设计中， 它的均衡有时会使页面显得呆板，但如果加入一些富有动感的文字、图案，或采用夸张的手法来表现内容往往会达到比较好的效果。 点、线、面作为视觉语言中的基本元素，巧妙地互相穿插、互相衬托、互相补充构成*的页面效果，充分表达完美的设计意境。
六、三维空间的构成和虚拟现实
网络上的三维空间是一个假想空间，这种空间关系需借助动静变化.图像的比例关系等空间因素表现出来。 在页面中，图片、文字位置前后叠压，或页面位置变化所产生的视觉效果都各不相同。通过图片、文字前后叠压所构成的空间层次不太适合网页设计，根据现有浏览器的特点，网页设计适合比较规范、简明的页面，尽管这种叠压排列能产生强节奏的空间层次，视觉效果强烈。 网页上常见的是页面上、下、左、右、中位置所产生的空间关系，以及疏密的位置关系所产生的空间层次，这两种位置关系使产生的空间层次富有弹性，同时也让人产生轻松或紧迫的心理感受。 现在，人们已不满足于HTML语言编制的二维Web页面，三维世界的诱惑开始吸引更多的人，虚拟现实要在Web网上展示其迷人的风采，于是VRML语言出现了。VRML是一种面向对象的语言，它类似Web超级链接所使用的HTML语言，也是一种基于文本的语言，并可以运行在多种平台之上，只不过能够更多地为虚拟现实环境服务。
七、网页设计中多媒体功能的利用
网络资源的优势之一是多媒体功能。要吸引浏览者注意力，网页的内容可以用三维动画、FLASH等来表现。但要由于网络宽带的限制，在使用多媒体的形式表现网页的内容时不得不考虑客户端的传输速度。
八、结构清晰并且便于使用
如果人们看不懂或很难看懂您的网站，那么，他如何了解你的企业和服务呢?使用一些醒目的标题或文字来突出您的产品与服务。并且即使您拥有最棒的产品，如果客户从您的网站上不清楚您在介绍什么或不清楚如何受益的话，他们是不会喜欢您的网站的，这就是网页设计的失败。
九、导向清晰
网页设计中导航使用超文本链接或图片链接，使人们能够在您的网站上自由前进或后退，而不会让他们使用浏览器上的前进或后退。我们在所有的图片上使用“ALT”标识符注明图片名称或解释，以便那些不愿意自动加载图片的观众能够了解图片的含义。
十、快速的下载时间
很多的浏览者不会进入需要等待5分钟下载时间才能进入的网站，在互联网上30秒的等待时间与我们平常10分钟等待时间的感觉相同。因此，我们会建议您在网页设计中尽量避免使用过多的图片及体积过大的图片。我们通常会与客户合作，将主要页面的容量控制在50K以内，平均30K左右，确保普通浏览者页面等待时间不超过10秒。
十一、非图形的内容
我们在必要时适当使用动态“Gif”图片，为减少动画容量，应用巧妙设计的Java动画可以用很小的容量使图形或文字产生动态的效果。但是，由于在互联网浏览的大多是一些寻找信息的人们，我们仍然建议您要确定您的网站将为他们提供的是有价值的内容，而不是过度的装饰。 十二、方便的反馈及订购程序
让客户明确您所能提供的产品或服务并让他们非常方便地订购是您获得成功的重要因素。如果客户在您的网站上产生了购买产品或服务的欲望，您是否能够让他们尽快实现吗?是在线还是离线?
十三、网站测试和改进
测试实际上是模拟用户询问网站的过程，用以发现问题并改进网页设计。我们通常与用户共同安排网站测试。
善用Dreamweaver的秘诀
秘诀1：让网页页面大小更有弹性
这是一种技巧，在访问网站时，网页面的大小会根据浏览器窗口的大小随之调整;因此如果窗口过大就不会有空白处，窗口过小边缘就不会跑出上下移动的滚动条。其实大多数简单的网页会自己随着浏览器窗口大小来调整页面大小，但是如果是网页里用到很多不同的框架及表格，网页页面大小就很难自动弹性地调整。用Dreamweaver 4.0可以轻而易举的设计出会自动弹性调整的网页。
★具体做法：用工具面板(Object palette)上的按钮打开网页，并且转换到“格式查看”(Layout view)。这时可以看到文字方块的栏度，每一栏的方框上方中间还有一个小小的下拉式箭头，点选想要设置弹性显示的栏上方的小箭头，接着选择“将栏设为弹性显示”(Make Column Autostretch)。(设置自动调整栏的宽度以一栏为限)这时该栏方框上方就会出现一条波浪形的线，而不是原本表示栏度的数字。 Dreamweaver会自动制作出固定版面的空格图片，这个空白图片是以栏上方的两个长条形的空白表格表示，如此版面会自动被填充，才会完成弹性版面设置。(在*次增加空白图片时会跳出一个对话框问你是否要使用内置图片，为求效果，我们建议你让Dreamweaver自动产生一个，不然就不用使用空白图片来填充版面。)
秘诀2：创造个人调色板
Dreamweaver新的“Assets panel”(属性控制面板)是一种可以在编辑网站时根据文件格式，例如图片、样式等来管理文件的新工具。
★具体做法：当你定义新站点时(点选Site New Site)，所有类型的物体会自动增加到“Asset panel” 里的适当表框中，这个新加入的“Assets panel”属性控制面板里也有颜色框，储存你网站里所用到的所有色彩，包含文字的颜色、背景的颜色，以及超链接的颜色等。这是一个为使用者量身定做的网站导航颜色盘。只要启动“Assets panel”(先选 “Window”再点“Assets”)，接着点左方那个小小的色彩卷轴，就可以看到你网站里各式各样的颜色选项。当然你可以将这些颜色拉到某些特定选取的文字中。甚至当你选择某种颜色时，画面上会出现这种颜色的十六进位值的色彩淡浓度，和三原色对照码(RGB)。如果想将调色板工具栏缩小一点，甚至可以仅加入某些颜色到调色板的“我的*”里。只需将选取的颜色反白、点选窗口里一个叫做“新增到我的*的”按钮(最下方靠右的按钮)，就可以完成了。
秘诀3：制作弹出式菜单导航系统
原本要制作弹出式菜单导航系统(Pop-up Menu Navigation System)要用到很多的一些JavaScript的语法和技巧，但是如果你有Dreamweaver、Fireworks Studio，即可轻轻松松快速办到。
★具体做法：首先在“Fireworks”里开始，选择某个图片，然后在“Set Pop-Up Menu”的对话框里点选“ Insert Pop-Up Menu”，你可以输入项目(items)的名称并点“Plus”(加入)按钮，来新增该项目。你可以继续在跳出来的信息框里进行细项设置，例如设置该项目所要用的文字及超链接，当然也可以新增子菜单，并重新安排下一层的设置。完成时，点选“Next”(下一步)，继续设置各种参数值，例如颜色、字体等等。这时菜单完成后，既可以预览HTML语法，也可预览图象。再点“ Finish”(完成)。这时当鼠标移动到原来的图片时，会出现菜单系统的内容一览。接着将制作好的文件导出时，“Fireworks”会自动生产出所有 Dreamweaver 需要用到的HTML、JavaScript，以及图象文件。
秘诀4：让图片动起来
如果你同时安装有Dreamweaver、Fireworks Studio，这两种软件搭配的完美程度将使你赞不绝口。即使你不是专业的图片设计者，在设计网页时也多多少少想把一些GIF图片修改得活灵活现。Dreamweaver可以让你制作动画不求人。
★具体做法：在标准窗口里选择要进行修改的图片，然后在“Property Inspector”里点选“编辑”(Edit)。如果你安装的Dreamweaver里附有“Fireworks”，“Fireworks”就是Dreamweaver预设图片编辑器，这时图片就会自动载入到“Fireworks”。(如果仔细看，你会发现Fireworks的画面会出现“Editing From Dreamweaver”这样的文字和图样，指示你可以在Dreamweaver里进行图片编辑。)好了，现在在“Fireworks”里点选要编辑的图片，选择“ Modify Animate Animate Selection”。 接下来完成“Animate dialog box”里的设置，选定动画的帧数，动画移动的方向、透明度等等设置。你也可以点选“Frames”工具设置移动速度，选择“Object”面板来改变设置。要导出文件时，只要点选“ Optimize ”工具栏，在文件类型的地方选择“Animated GIF”。完成以后，“Fireworks”就会自动将图片以*化设置导出，并且自动将 GIF 图片更新，还会在Dreamweaver里将更新过的图片显示出来。点选“File Preview in Browser”，这样就可以在浏览器里预览刚刚制作完成的可爱图片。
秘诀5：让按钮有闪动效果
在Dreamweaver中，不用有Flashs，也可以制作有闪动效果的Flash按钮物体。Dreamweaver内置有好几个 Flash按钮物体，可以制作好几个不同形式的按钮。
★具体做法：点选“Insert Interactive Images Flash Button”就可看到有那些内置按钮。在对话框内甚至可以用鼠标指到想要使用的按钮形式，然后看看在浏览器里的效果如何。用鼠标指针把要用的按钮形式选定，再依顺序输入参数，例如按钮上的文字、字形、颜色、超链接等，或是自设文件名字。按下OK。接下来就会有一个“SWF”格式的文件产生，文件并会自动导入你的网页中。按一下这个做好的文件，会看到“Property Inspector”(属性明细)中会显示出文件的属性。将文件属性显示出来时，如果扩展文件属性明细表，会出现“Play”(播放)，点选之后可以不用打开浏览器来预览按钮的闪动效果。
秘诀6：制作流动文字
在网页中增加流动文字就像增加我们刚刚介绍的Flash按钮一样简单。相同地，不用安装Flash，用 Dreamweaver提供的新功能就可以轻松办到。常用HTML语法写网页、没有互动式媒体经验的网页制作者也可以轻松制作出小巧的Flash形式的流动文字。这项新功能可以在不添加相兼容性麻烦的情况下为网页增添一些浏览上与访客的互动性。
★具体做法：点选“Insert Interactive Images Flash Text”，再将参数设置一一填入(例如要更改效果的文字、字形、字体颜色及字体大小等等)。
秘诀7：更改键盘快捷键
Dreamweaver可让使用者自订使用界面，这项设计十分有弹性。举例来说，使用者可以通过编写程序或自行增加物体(object)的方式来更改菜单。不必功力高深，你就可以更改键盘快捷键，因为Dreamweaver有一项叫做“Keyboard Shortcut Editor”的图形界面。
★具体做法：只要点选“Edit Keyboard Shortcuts”，对话框将载入并栏出可以改动的快捷键一览表，让你把快捷键改成自己习惯用的设置值。要改动快捷键，只要使用现行设置(Current Set)和命令栏(Command)的下拉菜单，在现有的命令中找到想要更改的命令，接着选取目前的快捷键，就会出现在快捷键的列表中。另外，如果要增加快捷键设置，可以点选“Plus”、在键盘上敲入你想使用的新快捷代表键，点选“改变”(Change)即可。同时你也可以选取某快捷键、点选“移除”(Minus)，就可以移除某个快捷键。
秘诀8：重新设置网站窗口(Site window)栏
★具体做法：只要从“Site window”中点选“View File View Columns”，就可以自字查看网站(Site view)栏的大小及出现方式。选取某一栏的名称，使用上下箭头重新调整，或不要勾选显示栏(Show field)以隐藏该栏。另外，点选“Plus”钮也可以新增栏，并自创栏名。此外，你也可以在下拉式菜单中选择现有的“note”来将栏和“Design Note”产生关联。
秘诀9：查看网页原代码
★具体做法：当你打开“Reilly Code Reference”(Window Reference)来检查属性或是浏览器的兼容性时，预设的窗口会以细小的字型显示出“参考设置值”。但是如果你按下窗口右上方的右键(就在关闭按钮的下方)，就会出现一排下拉式菜单，可以在这边选择原始代码字体的大小(小型字到中型字体以及大型字体)。选择大型字体比较不会“虐待”眼睛，因为这样你看HTML原代码时就不用拿着放大镜看屏幕了。
秘诀10：新增Flash按钮
秘诀5中，我们介绍如何用20种预设的按钮类型，来制作Dreamweaver里的Flash按钮。这是不用另外安装任何文件或程序的方法。下面有另一种方法，就是安装“Fireworks buttons”，这种扩充功能和秘诀5有相同的效果。
★具体做法：到 “Exchange for Dreamweaver”(Dreamweaver 扩充功能交换中心) ，输入“InstaGraphics Extensions for Dreamweaver”的关键字搜寻，然后再下载这个大约577K 的文件。转换到Dreamweaver，选择“Commands Manage Extensions”，再选择“File Install Extension”，就可以开始安装。一旦重新启动 “Dreamweaver”，就有六个新奇有趣的按钮格式，包括“Surfboard”及“Bulletbar”在内， 这时只要使用“Insert Interactive Images Fireworks Button”命令，就可以制作出一个酷炫的按钮。你也可以用“commands Convert Bullets To Images”及 “Commands Convert Text To Images”，上述两种方法都可以自动执行“Fireworks”。
秘诀11：在网页中加入“设置成我的*”功能
★具体做法：在“Exchange”里搜寻，你就可以发现“Add To Favorites”的扩充功能。这个小小的文件才占3K，下载时间不会等太久，接着循相同步骤，由“Extension Manager”载入(Commands Manage Extensions、File Install Extension)。接着重新启动 Dreamweaver，这个新载入的扩充文件会在 DreamweaverQQ291911320里新增一项功能。如果你的网页中加入这个“加入我的收藏集”的功能，这样一来使用者看到你的网站时，轻轻一按，就可以轻易地将你的网站加入他使用浏览器的“我的*”(或是个人书签)。此外，最炫的是也可以自订“我的*”名称，以及“我的*”名称前会出现的小图示(一般IE中“我的*”前面的小图示都是IE的预设值，如果你有自己设计的小图示，那就炫多了)。注意，这项功能只支持用 IE 4.0以及更高版本的浏览器。只要选择“Windows”菜单里的“Behavior”面板，再到IE功能下拉菜单点选此项功能，即可轻松启动此酷炫功能。
秘诀12：超酷的图表
如果你想制作表格，还要自己花时间再逐字编写网页原代码吗?不需要了，已经有现成的了!
★具体做法：到Exchange下载“Form Builder extension”，就有现成的表格，可让你马上复制包含像：*、性别、婚姻状况、年龄层及其他目录等的表格。到Exchange下载这个小巧(只有11K)的文件，然后由“Extension Manager”安装进来(Commands Manage Extensions, File Install Extension)。接着只要重新启动 Dreamweaver，点选“Insert FormBuilder”，就会在(Insert FormBuilder)中发现扩充功能。点选了之后这时会有一个对话框出现，会显示出所有可以套用的格式菜单，实在非常方便。
