浅析网页设计.docx
《浅析网页设计.docx》由会员分享，可在线阅读，更多相关《浅析网页设计.docx（41页珍藏版）》请在冰豆网上搜索。
浅析网页设计
浅析网页设计
摘要
在网络越来越接近我们生活的当今社会，Internet的应用已普及到了人们生活与工作的各个层面。
网页作为一个宣传企业和展示自我的平台，其重要性也越来越受到人们的关注。
因此网页制作业逐渐发展成为一种职业。
目前用于网页制作的的软件非常多，但根据多位网页制作者多年的经验，Dreamweaver+Photoshop+Flash无疑是制作网页的最强组合，它们在制作网页效果图、制作网页动画，以及制作Web格式的页面中担任着重要的角色。
随着Adobe公司发布的CS3系列设计软件的出现，Dreamweaver与Photoshop、Flash的结合更加紧密，使用更加方便。
熟练地使用这三种设计软件，可以大大提高网页设计和制作的效率，以便制作出精美的网页。
个人主页是从英文PersonalHomepage翻译而来，更适合的意思是"属于个人的网站"。
所以其实个人主页就是一种最简单的个人网站，一般情况下无下级页面（多层页面的就不宜称主页，而应该叫网站。
任何网站都是由N个页面组成的）。
博客也是个人主页。
一个图文并茂的“个人主页”可以充分地向其他人展示自己的才华。
让其他知道你的长处。
可以说你的“个人主页”就是你最好的简历。
制作你的“个人主页”，用于展示你自己的个性，将自己喜欢的东西放在“个人主页”上，让大家都可以来欣赏。
制作你的“个人主页”，用于结识新的朋友。
对于好的“个人主页”，我们会放在精彩推荐的位置，将会有很多人访问您的主页，和访问者交流会大大扩大你的生活空间。
制作你的“个人主页”，用于记忆你的家庭生活。
例如：
你可以把你的“个人主页”成为你的图文并茂的生活日记。
你可以把你的“个人主页”成为你小孩成长的纪录。
你可以把你的“个人主页”放上你新婚仪式的照片给大家分享。
总的来说个人主页就是一个你展示自己的网上平台。
关键词：
网站设计；网页制作；Dreamweaver；Photoshop；Flash
引言
网页设计——网站是企业向用户和网民提供信息（包括产品和服务）的一种方式,是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。
企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。
在本案的设计中，我们不断考虑：
建设网站的目的是什么？
为谁提供服务和产品？
网站的目的消费者和受众的特点是什么？
企业产品和服务适合什么样的表现方式（风格）？
在目标明确的基础上，我们先完成了网站的构思创意即总体设计方案。
对网站的整体风格和特色作出定位，规划网站的组织结构。
为了做到主题鲜明突出，要点明确，我们将按照客户的要求，以简单明确的语言和画面体现站点的主题；调动一切手段充分表现网站点的个性和情趣，办出网站的特点。
在此期间，我们充分利用已有信息，如客户手册．公共关系文档．技术手册和数据库等。
在此期间，我们了解到，如今的互联网已经渗透到我们生活中的各个层面。
网站内容即丰富又全面，满足了各种不同需求的浏览者，活跃了经济，也达到了商家开办网站的目的。
网络作为第四媒体，逐渐走向成熟和完善的时候，网页设计业也已逐步脱离了传统广告设计的范畴，形成特殊而独立的体系。
同时表明了，我们对网站视觉审美以及网站功能应用等多个方面的认知达到了新的高度。
抛去媒体这层外衣，网站是信息的储存空间。
请大家思考一下：
从理论上来说，套用相同的模板，只要保证浏览者能够获取信息，网站的功能就实现了。
如同96年以前的网站几乎是纯文字的页面，没有什么所谓“设计”的概念可言。
而从实际情况上看，至今的网络上依旧到处充斥着那种仅仅是通过信息堆砌而成的网站。
那么，设计师们到底是为了什么而工作呢？
不了解网页美术的意义所在，我们如何能够正确的面对创作？
面对激烈竞争的网络环境
众所周知，“优者生存”是事物繁衍发展的自然规律。
随着网络技术的更新换代，以及计算机美术的可达到的范围越来越广，我们无法继续满足于：
只有几篇文字和版式一模一样的网站。
不可否认，互联网的共享环境给信息储备和更新带来了很大的冲击，现今已不是十年前数得出来的几百个网站，而是无法估量的上千万个网站。
主题相同或雷同的网站多到无数，想要从千百个相同主题的网站中脱颖而出，确实不易。
互联网的全球共享信息环境，能够使地球另一端的竞争者与我们站在同一条跑道上，竞争加剧了，网站的视觉设计也就变成了竞争环节中的一大利器。
面对信息结构的日益复杂化
网站不是发布几条消息，或者放上几个广告那么简单的载体。
它可能是一个大型的信息资料库，也可能是琳琅满目的信息转盘，信息的重要性决定了信息的摆放顺序及浏览者的使用频率。
由于信息结构变得越来越复杂，一个信息空间内部结构如何设计、信息类别多如何管理、异类信息如何分主次、同类信息如何分类分层，以及单一页面上的信息结构安排等等诸多问题。
“页面上有文字就可以”这一原则已经无法解决现今的互联网的网站信息情况了。
我们必须依据信息结构去规划网站设计，科学的进行信息管理。
在不影响信息下载的同时，提供给浏览者一种美好的视觉环境，帮助他们科学且快速的查阅信息。
信息的传播内涵与外沿
网民们是为了不同的目的登陆相关的站点上查询信息的。
试想一下，一个需要阅读娱乐新闻的人是不会到体育网站上去寻找的，而一个需要收集出国政策的人更是不会到游戏网站上去搜索的，这是有关信息类别的不同选择。
信息不同，网站的气氛亦会不同。
当浏览者进入娱乐网站中，却感觉如同进入体育竞技场，那么这个网站所传递出的信息概念则完全错误，浏览者对网站的设计及网站本身都不会给予认可。
也就是说，网站的信息内容有着特殊的传播内涵与外沿。
弄错了游戏规则，可能会损失大量的浏览者，同等于失去了成功的机会。
我们想让它做更多事情
网络不仅仅是信息的储存空间，它更是一种新形式的电子信息传播方式，区别于电波、纸张、电视我们称之为第四媒体（或新媒体）。
任何以个人、团体、公司等不同名义都可以建设属于自己的网站，这些网站有别于综合性门户或资讯类站点，它们并不依靠大量信息吸引访问者，而网站是他们创造商业价值的间接手段。
企业需要建立形象网站，把VIS系统导入到网站设计中，这无形是延伸了形象传播的宽度和深度。
通过网络，企业信息和相关资料被广泛传播给全球客户，无法估计的各种机遇层出不穷。
更有甚者，一个非常大气而庄重的网站可以给一个仅有几人的贸易公司带来数万生意。
不同的企业，有着不同的企业文化，跟随所要传播的信息概念，网站设计的形式和气氛绝对不能相同。
如果把可口可乐公司的网站，设计如同劳力士手表网站一样时，谁能想象这会造成多么大的经济损失？
视觉审美关系到网站生存与发展
网站作为新媒体的媒介主体，具有更多与传统媒体不同的特征和特性。
这些特征决定了网页设计的形式和使命，它的意义将与传统媒介的“设计”截然不同。
网页设计是网站的视觉内容部分，它是浏览者进入站点内第一时间接收到的视觉信息。
它可以给浏览者一个概念，一种印象，这种印象有时候是致命的。
互联网中的同类网站非常多，同类中也不乏大量的优秀作品。
不论是从设计到内容，都非常有特色。
这种条件下，网民们有条件去挑选他们喜爱和认可的网站，并决定作为这些网站的“回头客”。
在如此激烈的竞争之中，一个可用性强的、独特创新的网站设计成为网站长期发展的必要条件之一。
第一章前言
随着Internet的迅猛发展,网页设计技术已成为计算机学习的重要内容之一.近几年来,网页设计技术一直在推陈出新.不断有新技术被推出并应用,实在令人眼花缭乱.这些网页设计技术可以分为静态网页技术和动态网页技术两种.静态网页技术一般是指HTML和CSS技术.采用静态网页技术的网页只能在网页中展示文字和图片,但它却是所有网页设计的基础技术.动态网页技术是指让网页能够按照用户的需求做出动态响应的技术,例如JavaScript,VBScript及ASP等技术都属于动态网页技术的范畴.目前,大部分制作网页的方式,都是运用网页设计软件,这些软件的功能相当强大,使用非常方便.不论是那一种网页设计软件,最后都是将所设计的网页转化为HTML,CSS,JavaScript/VBScript和ASP。
网页设计是指使用标识语言（markuplanguage），通过一系列设计、建模、和执行的过程将电子格式的信息通过互联网传输，最终以图形用户界面（GUI）的形式被用户所浏览。
简单来说，网页设计的目的就是产生网站，什么是网站呢，就是服务器内的一系列网页的组合，终端用户发出请求后[[服务器通过传输特定的网页向用户传输所需的信息。
简单的信息如文字，图片（GIF，JPEG，PNG）和表格，都可以通过使用HTML/XHTML/XML放置到网站页面上。
而更复杂的信息如vectorgraphics,动画，视频，声频则需要插件程序例如Flash,QuickTime,Javarun-timeenvironment,等等，这些插件程序也是通过HTML/XHTML/XML植入网页的。
随着浏览器和W3C标准一致性的改善，XHTML/XML（可扩展标识语言）与CSS（层叠样式表）共同用作网页内容的设计已经被广泛的接受和使用。
最新的标准和建议则是朝着浏览器的能力扩充和改善发展，使之能够不需要插件程序也能够给用户传输多媒体信息和更多的选择。
通常，网页可以分为静态网页和动态网页。
静态网页页面上的内容和格式一般不会改变，只有网管可根据的需要更新页面。
动态网页的内容随着用户的输入和互动而有所不同，或者随着用户，时间，数据修正等而改变。
网页上的内容也可以由用户通过使用客户端描述语言（JavaScript,JScript,Actionscript,）来改变。
当然更普遍的是由服务器端的描述语言（Perl，PHP,ASP,JSP,ColdFusion,等）进行编译，从而对动态网页的内容进行改变。
无论是客户端还是服务器端的改变都需要使用较为复杂的应用软件。
第二章网页设计的基础知识
2.1万维网和浏览器
WWW是环球信息网（WorldWideWeb）的缩写，也可以简称为Web，中文名字为“万维网”。
另外，WWW也是世界气象监视网的英文简称。
InternetExplorer，简称IE或MSIE，是微软公司推出的一款网页浏览器。
InternetExplorer是使用最广泛的网页浏览器，虽然自2004年以来它丢失了一部分市场占有率。
在2005年4月，它的市场占有率约为85%。
InternetExplorer是微软的新版本Windows操作系统的一个组成部分。
在旧版的操作系统上，它是独立、免费的。
从Windows95OSR2开始，它被捆绑作为所有新版本的Windows操作系统中的默认浏览器。
2.2IP地址和域名
域名
表示的组织或机构的类型
域名
表示的组织或机构的类型
com
商业机构
firm
商业或公司
edu
教育机构或设施
store
商场
gov
非军事性的政府机构
web
和WWW有关的实体
int
国际性机构
arts
文化娱乐
mil
军事机构或设施
arc
消遣性娱乐
net
网络组织或机构
info
信息服务
org
非赢利性组织机构
nom
个人
2.3HTML概述与基本结构
2.3.1HTML的概述
HTML的英语意思是：
HypertextMarkedLanguage，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。
超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作.HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准.用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，自1990年以来HTML就一直被用作ＷＷＷ（是WorldWideWeb的缩写，也可简写WEB、中文叫做万维网）的信息表示语言，使用HTML语言描述的文件，需要通过WEB浏览器显示出效果。
2.3.2HTML的基本结构
一个HTML文档是由一系列的元素和标签组成，元素名不区分大小写，HTML用标签来规定元素的属性和它在文件中的位置。
HTML超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。
2.4文本
文本指的是网页的文字内容部分，其中包括文本的内容、格式、字体样式、连接等。
2.4.1文本的显示
图2-1文本在IE中默认效果
在网页直接输入没有定义任何样式与属性的文本内容，其显示效果和浏
览器的设置有关。
其默认的文本显示效果如图2-1所示。
如果更改浏览器的设置，则文本显示效果会相应的改变。
单击“查看”菜单，在打开的下拉菜单中选择“文字大小”选项，如图2-2所示，单击其中的
“最大”选项，此时网页中的文本效果如图2-3所示。
在浏览器中进行其他的设置也可以改变网页中文本的显示效果。
单击“查看”
菜单中选择“编码”选项，选择其中的“其他”选项。
图2-2IE中显示字体大小的菜单1
图2-3更改IE设置后文本的显示效果
2.4.2文本的格式
在网页中可以为文本设置各种格式，其中包括文本中字体的选择、字体的大小、文本的颜色、行高等。
在浏览器中，文本内容的字体要依赖浏览者操作系统中的字体，所以最好不要定义特殊字体，通常使用“宋体”。
2.5图像
网页中使用的图像可以分为两个部分：
一部分是起修饰作用的图像，一般在页面中起美化作用：
另一部分是作为内容的图像，其中有些内容部分的文本内容，因为涉及到特殊的字体，所以也要用图像的方式来显示。
2.5.1矢量图和位图
计算机中显示的图形一般可以分为两大类——矢量图和位图。
矢量图使用直线和曲线来描述图形，这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等，它们都是通过数学公式计算获得的。
例如一幅花的矢量图形实际上是由线段形成外框轮廓，由外框的颜色以及外框所封闭的颜色决定花显示出的颜色。
由于矢量图形可通过公式计算获得，所以矢量图形文件体积一般较小。
位图：
又称光栅图，一般用于照片品质的图像处理，是由许多像小方块一样的"像素"组成的图形。
由其位置与颜色值表示，能表现出颜色阴影的变化。
在PHOTOSHOP主要用于处理位图。
2.5.2网页设计中常用的图片格式
（1）BMP格式:
Windows系统下的标准位图格式,未经过压缩，一般图像文件会比较大。
在很多软件中被广泛应用.
（2）JPEG格式：
也是应用最广泛的图片格式之一，它采用一种特殊的有损压缩算法，将不易被人眼察觉的图像颜色删除，从而达到较大的压缩比（可达到2:
1甚至40:
1），因为JPEG格式的文件尺寸较小，下载速度快,所以是互联网上最广泛使用的格式!
（3）GIF格式：
最大的特点是不仅可以是一张静止的图片,也可以是动画，并且支持透明背景图像，适用于多种操作系统，“体型”很小，网上很多小动画都是GIF格式。
但是其色域不太广,只支持256种颜色。
2.6多媒体
网页中使用的多媒体包括音频文件、视频文件、Flash动画等内容，其中使用最多的是Flash动画。
2.6.1音频多媒体内容
在网页中音频文件可以直接作背景使用。
如果要再其他浏览器中使用音频文件，则需要使用播放器。
2.6.2Flash动画
在网页中使用的Flash动画非常多。
Flash动画可以用来制作站点的片头、Logo、Banner、页面中的广告等内容。
2.6.3视频多媒体内容
在网页中无法直接播放视频内容。
如果要播放内容，必须使用相应的播放器。
2.7超链接
HTML文件中最重要的应用之一就是超链接，超链接是一个网站的灵魂，web上的网页是互相链接的，单击被称为超链接的文本或图形就可以链接到其它页面。
超文本具有的链接能力,可层层链接相关文件，这种具有超级链能力的操作，即称为超级链接。
超级链接除了可链接文本外，也可链接各种媒体，如声音、图象、动画，通过它们我们可享受丰富多采的多媒体世界。
2.8脚本
脚本一般在网页中用来实现某种特殊的效果或功能。
通常使用的是JavaScript和VBScript，使用Dreamweaver等网页制作软件，可以直接在页面中添加脚本。
脚本一般用来完成一个或多个相应的动作。
第三章网页设计的一般步骤
3.1需求分析
需求分析是制作一个网站的第一步。
在制作网站之前，首先要了解客户的需要和要求。
这些必要的信息包括客户所要表达的理念、界面显示的内容和栏目的要求、网站功能方面的要求等。
根据客户的具体情况，需求也会有所差别。
3.2制作页面效果图
制作页面效果图的目的是向客户展示页面的显示效果，以便客户对页面设计提出具体的修改意见。
使用效果图的好处在于便于修改，并且方便直观。
常使用到的软件是Photoshop和Fireworks，本文以Photoshop为主。
3.3制作Flash动画
在网页中使用的多媒体内容主要为Flash动画。
因为Flash动画内容可以在页面中直接使用，而其他的多媒体内容都需要在客户端安装相应的播放器来支持。
3.4切图
在制作静态网页之前，要对效果图进行切片。
目的主要是制作页面中使用的修饰图片。
主要工具是Photoshop。
3.5制作静态Web页面
静态网页是实际存在的，无需经过服务器的编译，直接加载到客户浏览器上显示出来。
静态页面需要占一定的服务器空间，且不能自主管理发布更新的页面,如果想更新网页内容,要通过FTP软件把文件DOWN下来用网页制作软件修改。
制作静态页面通常使用的软件是Dreamweaver。
一般是HTML页面，文件的后缀名为.html。
3.6添加程序
添加程序的目的是使页面能够和服务器中的资源进行交互，一般要涉及对数据库的操作。
根据使用的程序语言不同，网页中的使用程序可以分为ASP程序、ASP.NET程序、JSP程序、PHP程序等。
3.7Web站点的发布、推广和维护
客户对网页的所有功能和页面都确认后，就可以正式发布制作好的站点了。
网站的推广和维护也是网站建设中相当重要的部分。
针对站点的性质和不同的需求，推广和维护的方法也不尽相同。
其中推广的方法包括XX等搜索引擎上的推广、相关论坛推广、邮件推广等。
维护需指定专业人士来做定期的维护。
第四章软件与硬件的设施
4.1硬件
操作系统：
MicrosoftWindows7旗舰版
设备：
4.2软件
4.2.1MacromediaDreamweaver8
Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver8的发布，更坚定Dreamweaver在该领域的地位。
它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。
（1）灵活的编写方式
Dreamweaver具有灵活编写网页的特点，不但将世界一流水平的“设计”和“代码”编辑器合二为一，而且在设计窗口中还精化了源代码，能帮助用户按工作需要定制自己的用户界面。
（2）可视化编辑界面
Dreamweaver是一种所见即所得的HTML编辑器，可实现页面元素的插入和生成。
或视化编辑环境大量减少了代码的编写，同时亦保证了其专业性和兼容性，并且可以对内部的HTML编辑器和任何第三方的HTML编辑器进行实时的访问。
无论用户习惯手工输入HTML源代码还是使用可视化的编辑界面，Dreamweaver都能提供便捷的方式使用户设计网页和管理网站变得更容易。
（3）功能更多的CSS支持——CSS可视化设计、CSS检查工具
（4）动态跨浏览器验证
当保存时系统自动检查当前文档的跨浏览器有效性，可以指定何种浏览器为测试用浏览器，同时系统自动检验以确定页面有没有目标浏览器不支持的tags或CSS结构。
动态跨浏览器有效性检查功能可以自动核对tags和CSS规则是否适应目前的主浏览器。
（5）强大的WEB站点管理功能
（6）内建的图形编辑引擎
（7）Dreamweaver的集成特性
Dreamweaver8继承了Fireworks、Flash和Shockwave的集成特性，可以在这些Web创作工具之间自由地切换，轻松地创建美观实用的网页。
（8）丰富的媒体支持能力
可以方便地加入Java、Flash、Shockwave、ActiveX以及其他媒体。
Dreamweaver具有强大的多媒体处理功能，在设计DHTML和CSS方面表现得极为出色，它利用JavaScript和DHTML语言代码轻松地实现网页元素的动作和交互操作。
Dreamweaver还提供行为和时间线两种控件来产生交互式响应和进行动画处理。
（9）超强的扩展能力
Dreamweaver还支持第三方插件，任何人都可以根据自己的需要扩展Dreamweaver的功能，并且可以发布这些插件。
4.2.2AdobePhotoshopCS5
AdobePhotoshop是公认的最好的通用平面美术设计软件。
由Adobe公司开发设计。
其用户界面易懂，功能完善，性能稳定，所以，在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面工具。
Photoshop的专长在于图像处理，而不是图形创作。
有必要区分一下这两个概念。
图像处理是对已有的位图图像进行编辑加工处理以及运用一些特殊效果，其重点在于对图像的处理加工；图形创作软件是按照自己的构思创意，使用矢量图形来设计图形，这类软件主要有Adobe公司的另一个著名软件Illustrator和Autodesk公司的Coreldraw。
PhotoshopCS5新增的特性及功能:
2010年4月12日北京时间23时，AdobeCreativeSuite5设计套装软件正式发布。
AdobeCS5总共有15个独立程序和相关技术，这些组件中我们最熟悉的可能就是Photoshop了，PhotoshopCS5有标准版和扩展版两个版本。
PhotoshopCS5标准版适合摄影师以及印刷设计人员使用，PhotoshopCS5扩展版除了包含标准版的功能外还添加了用于创建和编辑3D和基于动画的内容的突破性工具。
PhotoshopCS5可以帮助您创建出具有影响力的图像。
轻松完成复杂选择。
删除任何图像元素，神奇般地填充区域。
实现逼真的绘图。
借助最新的摄影工具创建出令人赞叹的HDR图像、删除杂色、添加粒状和创建晕影。
体验64位系统中的卓越性能。
PhotoshopCS5加入了全面改进后的高清视频渲染引擎Mercury，尤其是其视频处理软件PremierePro。
Mercury可以利用显卡的图形处理能力加速对高清格式视频的编解码和播放，当然不是所有的显卡，由于和NVIDIA之前达成的协议，Mercury只支持NVIDIA的显卡。
PSCS5的另一个亮点是新增了一款软件FlashCatalyst，这款新的软件将作为Flash的另一个选择专门为设计师和美工量身定做，以挑战微软ExpressionStudio。
PhotoshopCS5为摄影师、艺术家、以及一些高端的设计用户带来了一系列全新的高级功能。
下面就让我们来看一看Adobe带来的伟大功能吧：
（1）自动镜头更正：
Adobe从机身和镜头的构造上着手实现了镜头的自动更正，主要包括减轻枕形失真（pincushiondistortion），修饰曝光不足的黑色部分以及修复色彩失焦（chromaticaberration）。
当然这一调节也支持手动操作，用户可以根据自己的不同情况进行修复
升级会员 