网站设计思想.docx
《网站设计思想.docx》由会员分享，可在线阅读，更多相关《网站设计思想.docx（17页珍藏版）》请在冰点文库上搜索。
网站设计思想
网页设计思想
是网站中的一「页」，通常是HTML格式（文件扩展名为.html或.htm或.asp或.aspx或.php或.jsp等）。
网页通常用图像档来提供图画。
网页要使用网页浏览器来阅读。
简介
网页是构成网站的基本元素，是承载各种网站应用的平台。
通俗的说，您的网站就是由网页组成的。
如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。
所谓网站（Website），就是指在网际网路（因特网）上，根据一定的规则，使用HTML等工具制作的用於展示特定内容的相关网页的集合。
简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯（信息），或者利用网站来提供相关的网路服务（网络服务）。
人们可以通过网页浏览器来访问网站，获取自己需要的资讯（信息）或者享受网路服务
什么是网页?
现在在你眼前，出现在显示器上的这个"东西"，就是一个网页。
网页实际是一个文件，它存放在世界某个角落的的某一台计算机中，而这台计算机必须是与互联网相连的。
网页经由网址（URL）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前。
构成网页的元素:
文字与图片是构成一个网页的两个最基本的元素。
你可以简单的理解为：
文字，就是网页的内容，图片，就是网页的美观。
除此之外，网页的元素还包括动画、音乐、程序等等。
在网页上点击鼠标右键，选择菜单中的"查看源文件"，就可以通过记事本看到网页的实际内容。
可以看到，网页实际上只是一个纯文本文件，它通过各式各样的标记对页面上的文字、图片、表格、声音等元素进行描述（例如字体、颜色、大小），而浏览器则对这些标记进行解释并生成页面，于是就得到你现在所看到的画面。
为什么在源文件看不到任何图片？
网页文件中存放的只是图片的链接位置，而图片文件与网页文件是互相独立存放的，甚至可以不在同一台计算机上。
网页的类型.
通常我们看到的网页，都是以htm或html后缀结尾的文件，俗称HTML文件。
不同的后缀，分别代表不同类型的网页文件，例如以CGI、ASP、PHP、JSP甚至其他更多。
网页的分类
网页有多种分类,我们笼统意义上的分类是动态和静态的页面,原则上讲静态页面多通过网站设计软件来进行重新设计和更改,相对的比较滞后，当然现在有网站管理系统，也可以生成静态页面~我们称这种静态页面为伪静态。
动态页面通过网页脚本与语言自动处理自动更新的页面，比方说贴吧，他就是通过网站服务器运行程序，自动处理信息，按照流程更新网页。
关于网页：
当你每次上网时，都会在历史纪录里留下纪录，保存在C盘主要文件的一个文档里，删除时只要右键删除就可以了。
[编辑本段]网页设计
网页设计--------网站是企业向用户和网民提供信息（包括产品和服务）的一种方式,是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。
企业的网址被称为"网络商标"，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。
企业网站设计显得极为重要，下面是一些网站设计中应注意的原则。
一、明确建立网站的目标和用户需求
Web站点的设计是展现企业形象、介绍产品和服务、体现企业发展战略的重要途径，因此我们必须明确设计站点的目的和用户需求，从而做出切实可行的设计计划。
我们会根据消费者的需求、市场的状况、企业自身的情况等进行综合分析，以"消费者（customer）"为中心，而不是以"美术"为中心进行设计规划。
在设计规划时我们会考虑：
建设网站的目的是什么？
为谁提供服务和产品？
企业能提供什么样的产品和服务？
网站的目的消费者和受众的特点是什么？
企业产品和服务适合什么样的表现方式（风格）？
二、网页设计总体方案主题鲜明
在目标明确的基础上，完成网站的构思创意即总体设计方案。
对网站的整体风格和特色作出定位，规划网站的组织结构。
Web站点应针对所服务对象（机构或人）的不同而具有不同的形式。
有些站点只提供简洁文本信息；有些则采用多媒体表现手法，提供华丽的图像、闪烁的灯光、复杂的页面布置，甚至可以下载声音和录像片段。
好的Web站点把图形表现手法和有效的组织与通信结合起来。
为了做到主题鲜明突出，要点明确，我们将按照客户的要求，以简单明确的语言和画面体现站点的主题；调动一切手段充分表现网站点的个性和情趣，办出网站的特点。
Web站点主页应具备的基本成分包括：
页头：
准确无误地标识你的站点和企业标志；Email地址：
用来接收用户垂询；联系信息：
如普通邮件地址或电话；版权信息：
声明版权所有者等。
充分利用已有信息，如客户手册．公共关系文档．技术手册和数据库等。
网页设计的要点
网页设计的两大要点是：
整体风格和色彩搭配。
一、确定网站的整体风格
网站的整体风格及其创意设计是最难以学习的。
难就难在没有一个固定的模式可以参照和模仿。
给你一个主题，任何两人都不可能设计出完全一样的网站。
风格（style）是抽象的。
是指站点的整体形象给浏览者的综合感受。
这个"整体形象"包括站点的CI（标志、色彩、字体、标语）、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等等诸多因素。
举个例子：
我们觉得网易是平易近人的，迪斯尼是生动活泼的，IBM是专业严肃的。
这些都是网站给人们留下的不同感受。
在这里，我提供给大家一些参考经验：
1．将你的标志logo，尽可能的放在每个页面上最突出的位置。
2．突出你的标准色彩。
3．总结一句能反映贵站精髓的宣传标语！
4．相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的！
二、网页色彩的搭配
无论是平面设计，还是网页设计，色彩永远是最重要的一环。
当我们距离显示屏较远的时候，我们看到的不是优美的版式或者是美丽的图片，而是网页的色彩。
关于色彩的原理有许多，在此我们不可能一一阐述，大家可以看看相关设计书籍，有利于系统地理解。
在此我们仅仅想告诉大家一些网页配色时的小技巧。
1．用一种色彩。
这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。
2．用两种色彩。
先选定一种色彩，然后选择它的对比色。
3．用一个色系。
简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。
在网页配色中，还要切记一些误区：
1．不要将所有颜色都用到，尽量控制在三至五种色彩以内。
2．背景和前文的对比尽量要大（绝对不要用花纹繁复的图案作背景），以便突出主要文字内容。
三、网页设计的工具
1.dreamweaver,用与编辑HTML、ASP、JSP、PHP时的辅助工具
2.Frontpage跟dreamweaver一样，不过个人感觉还是dreamweaver好。
3.FLASH网页需要画面流动时的首选择
4.PS图象处理软件，一般网页都需要有图片相搭配，PS是款很强大的工具。
5.FW跟PS一样都是图象处理软件，但FW偏向与对网页的处理。
[个人喜欢PS]
网站设计成功要素
设计一个网站，应该考虑下列九条基本因素，这些因素对网站的成功与否有着重要影响。
1.整体布局
网站主页就好象是宣传栏或者店面--对访问者产生第一印象，都希望尽量给人留下好的印象，不是吗？
一般来说，好的网站应该给人有这样的感觉：
干净整洁；
条理清楚；
专业水准；
引人入胜。
网页应该力求抓住而不是淹没浏览者的注意力，过多的闪烁、色彩、下拉菜单框、图片等会让访问者无所适从--离开是最好的选择，就象一些商店，播放震耳欲聋的发烧音乐，你要做的唯一决定就是离开那里，越快越好。
2.信息
无论商业站点还是个人主页，你必须给人们提供有一定价值的内容才能留住访问者，因为我们人类总是惟利是图，第一个问题总是：
"对我有什么用处？
"
所以你必须提供某些有价值的东西，当然并不是说必须提供某些免费的物品--免费书籍、免费入场券、免费度假等，这些"有价值的东西"可以是：
信息；
娱乐；
劝告；
对一些问题的帮助；
提供志趣相投者联络的机会；
链接到有用的网页，等等。
如果你经营的是企业网站，需要提供关于产品或服务的信息：
容易理解；
容易查询；
容易订货。
3.速度
我们都知道，页面下载速度是网站留住访问者的关键因素，如果20-30秒还不能打开一个网页，一般人就会没有耐心。
至少应该确保主页速度尽可能快，最好不要用大的图片。
应该时时提醒自己，网站首页就象一个广告牌。
当开车经过一个广告牌时，没有时间阅读上面的详细说明，也不可能赞赏其复杂的图案，广告标志从眼前一闪而过，必须在一瞬间给人留下印象。
网**问者也是"一闪而过"，保证你的首页简单而快速。
网上有许多关于如何增加速度的文章--检查下载速度，放弃一切显著减慢主页速度的资料。
4.图形和版面设计
图形和版面设计关系到对主页的第一印象，图象应集中反映主页所期望传达的主要信息。
如果有系列商业站点，你不必让过分显眼的动画出现在首页--但如果你的网站是游戏站点，动画将是必不可少的一部分内容。
图片是影响网页下载速度的重要原因，根据经验，把每页全部内容控制在30K左右可以保证比较理想的下载时间。
图象在6-8K之间为宜，每增加2K会延长1秒钟的下载时间。
颜色也是影响网页的重要因素，不同的颜色对人的感觉有不同的影响，例如：
红色和橙色使人兴奋并使得心跳加速；
**使人联想到阳光，是一种快活的颜色；
考虑到你希望对浏览者产生什么影响，请为网页选择合适的颜色。
阅读西方格式文本时，眼睛从左上方开始，逐行浏览到达由下方，插入图象时不要忘记这种特性。
任何具有方向性的图片应该放置在网页中对眼睛最重要的地方，如果在左上角放置一幅小鸟的图片，鸟嘴应该放在把浏览者目光引向页面中部的地方，而不是把视线引走。
这种思路可以用于所有图片：
面部应该"看"网页的中部；
汽车的"停靠"面向网页中部；
道路、领带等等图片的放置都应该在有助于吸引目光从左向右、从上向下移动。
一般总是把网站导航条放置在页面左边，也是出于这种考虑--不断地出现在浏览者的视野之中。
5.文字的可读性
我们仍然用广告牌的比喻来说明，文字要在广告牌上突出，周围应该留有足够的空间。
也许你曾到过一些网站，要么拥挤不堪的文字觉得好象只有把脑袋钻进去才能阅读，要么深色的背景给人的感觉好象处于非常狭窄的空间里，而且让人的心情感觉很压抑。
某些背景色的令人阅读困难；紫色、橙色和红色让人眼花缭乱。
文字的颜色也很重要，不同的浏览器有不同的显示效果，有些在你的浏览器上很漂亮的颜色在其他浏览器上可能无法显示。
参考报纸的编排方式，为方便或快速阅读将你的内容分栏设计，甚至两栏也要比一满页的视觉效果要好。
另一种能够提高文字可读性的因素是你所选择的字体，通用的字体（Arial,TimesNewRoman,GaramondandCourier）最易阅读，特殊字体用于标题效果较好，但是不适合正文（试想浏览整页的Gothic,Script,Westminster,orCloister会是怎样的感受）。
因为阅读费力，你的眼睛很快就会疲劳，不得不转移到其他页面。
明白我的意思了吗？
6.网页标题的可读性
必须尽量使你的网页易于阅读，除了分栏之外（将页面纵向分割），也需要利用标题和副标题将文档分段。
为所有标题和副标题设置同一字体，并将标题字体加大一号，所有标题和副标题都采用粗体，这样便于识别标题（字体加大加粗）和副标题（粗体，与正文字体大小相同），使浏览者一眼就可以看到要点，以便找出并继续阅读有兴趣的内容。
标题的重要性可见一斑，要认真写好每个标题！
也可以将整句采用粗体或用不同的颜色突出某些内容，不过不要用难以阅读的颜色。
7.导航
由于人们习惯于从作到右、从上到下阅读，所以主要的导航条应放置在页面左边，对于较长页面来说，在最底部设置一个简单导航也很有必要（只要两项就够了：
主页|页面顶部）。
确定一种你满意的模式之后，最好将这种模式应用到同一网站的每个页面，这样，浏览者就知道如何寻找信息。
8.保护个人信息声明和客户推荐信
对于商业网站来讲，最重要的事情之一是确保潜在客户的信心，你应该明确地告诉人们，如何对其兴趣、爱好，尤其个人**保密，很有必要专门用一个页面详细陈述你的保护个人信息声明，包括对访问者的email地址保密、如何接受定单、如何汇总信息、汇总这些信息的目的、谁可以看到这些信息等基本内容。
访问者也想知道你的产品或服务现有客户的反映，所以如果能引用与你关系融洽的客户对你的积极评价，对你的可信度将很有帮助。
不要害怕向顾客索取推荐信--人们都愿意自己的意见有价值。
你可以把客户的推荐信另设计为一个网页，作为对客户提供推荐信的回报，在这里链接到客户的网站--这也是一种"双赢"。
9.词语
一个网站如果只有漂亮的外观而词语错误连篇、语法混乱，同样是失败的，对于网站所有者和负责人将产生很坏的影响，人们会用许多贬义词来评价你：
粗心大意、懒惰、外行、没水平等等。
你愿意把自己辛苦挣来的钱花在一个连自己的网站都马马虎虎的人吗？
你可以按照上述步骤改进你的网站制作技巧；
你可以请人对你的工作进行校对、编辑；
你也可以请人为你制作网页；
总之，上述步骤在很多方面对你会有所帮助，不要因为对某些步骤的疏忽而影响你的网站的整体效果。
保存网页的技巧
我们在上网过程中遇到精彩的文章、图片、flash常常会把它们保存下来已备日后查看。
保存网页的基本方法就是用浏览器带的保存功能。
点击浏览器的菜单文件->另存为，输入文件名，保存类型可以选择网页，全部（*.htm;*.html）Web档案，单个文件（*.mht）文本文件（*.txt）。
保存网页的过程中常见的问题：
网页不能保存、保存失败，有些网页禁止了鼠标右键，不能复制。
采用浏览器自带的"另存为"保存网页的时候，有时进度条前进速度非常缓慢，最后提示"保存网页失败"，这中情况主要是由于网速慢或对方的服务器忙导致有部分文件不能下载引起的。
网页采用脚本禁止了"Ctrl+v"和右键菜单功能，有些网页不仅禁止使用右键菜单功能，而且禁止使用了鼠标拉选文字的功能。
除了采用浏览器自带的"另存为"保存网页之外还可以通过下列方法来保存网页，可以有效解决网页不能复制、保存失败等问题。
1、将网页保存为图片。
如果想要完整保存页面，通过屏幕拷贝的方式将网页保存为图片不失为一种很好的方法，这特别适合做设计的人员，需要看的是网页的整体。
2、保存部分有用内容。
事实上我们保存网页时往往是仅需保存网页中的正文部分，整个网页内容一大堆，正文也就一小部分。
一种办法就是用"拷贝"、"粘贴"的方法将正文复制到word然后保存。
你想象过只要点一下鼠标即可完成保存你需要的正文部分，不用你手工"拷贝"、"粘贴"呢？
现在保存网页也讲人工智能，智能化的网页保存工具网童就实现了这样的功能，他能够自动识别并提取网页正文内容，在浏览器中点击鼠标右键，选择"网童，取网页正文"，网页正文在一个新的窗口中显示可编辑、保存。
还可以一键将网页保存为word文件，保存的是干干净净的网页正文，而且还包括下一页，省去很多的复制、粘贴操作。
3、批量保存网页内容。
要想批量保存网页内容那只能采用第三方工具了，浏览器本身不提供这种功能。
最常见的就是下载工具了，如网际快车、迅雷，建立一个网页下载列表然后后下载工具下载。
这种方法只能下载链接指向的html文件，不能下载关联的图片等文件。
第二种方法就是网络爬虫，这种工具可以把自动抓取网页及其相关链接的文件。
上面这两种方法都有一个问题就是只要是指向的链接都取，不能区分是否有用。
批量保存网页内容最好的方法就是采用智能型的网页保存工具--网童。
事实上我们保存网页经常只需要网页的正文内容，保存工具应当自动的智能化的识别网页正文内容，然后自动提取这些信息。
网童不但可以批量保存网页而且自动提取正文内容并把网页内容汇编在一起。
如果你经常需要保存网页或者你对网页技术不是非常熟悉建议采用专门的网页保存工具，傻瓜式的一键搞定。
提升网页可用性的方法
权威研究结果表明：
人们在线的阅读习惯和平时的阅读习惯是完全不一样的。
访问者通常是在非常随意的状态下快速浏览你
的网页的，他们急于获取真实的、实用的，并且是有价值的信息。
如果他们不能及时地获取所需信息，那么，他们将离开你
的网页。
下面的3点方法将会给你带来帮助，它会让你为你的访问者提供所需信息，指出提升网页可用性的方法。
1.精简的文本描述
你所写的文章必须围绕一个主题，这可以方便访问者快速获取主旨信息和中心思想。
好好想想如何把文章改得精简得体以便
于访问者阅读。
这里告诉你一个可行的办法，尽量把一段文章在3-4行之内叙述完整，然后再另起一行写下面一段。
2.便于快速浏览的文本
网络用户一般不会在线精读文本内容，他们通常是快速浏览。
因此，应该尽量使用简短、醒目的文本。
举个例子来说，可以
通过超链接的形式将重要的信息从页面中分离出来，这样做会使得这段重要信息显得非常醒目。
将一个段落以重点列表的形
式表示也是一种非常可行的方法。
学会在你的重点词组前方加一个起强调作用的圆点。
还有一点，学会在页面中使用副标题
，当你浏览网页时，将重点挑选出来，并将它们写在标题标签内，"标题2"和"标题3"的效果最好，但是"标题1"标签的
效果也会相当不错，这样做会可以给整个页面的信息分出层次，以帮助阅读者在简单地浏览页面之后快速地获取所需信息。
3.必须要客观公正
这里要提到的"客观公正"指的是：
在你的网页上放上与你网页内容相关的链接，让访问者做出**的选择：
是继续留在你
的网页上，还是去别的网页上寻找信息。
这对于你--网页的所有者来说，并不是一件坏事；因为你可以为访问者指明确切
的方向。
好好按照上面说的把你的网页改进一下。
我相信，网页的可用性一定会大大提升；同时，你的访问者也会非常感激你，并且
会很愿意与你进行往来。
[编辑本段]教你快速成长为一名厉害的网页设计师
笔者曾经是一个网页设计的菜鸟，经过自己不断的摸索和实践，现在已经可以独立制作一个完整的静态站点，并且给学校的N（N＞5）个部门、院系和外面的公司做网站，虽然不是一个完全意义上的WebDesigner（网页设计师），但是完成一些要求不是很专业、不是十分完美的站点已经是小事儿了（嘿嘿，是不是有自吹自擂之嫌），自己心里已经是小有成就感了，所以自封为准WebDesigner！
自认为成长过程还算快，所以把本人的经历向大家介绍一下，给那些有志于此的朋友们一些参考意见。
循序渐进学知识
先学一学HTML，找本自己能看懂的教材，浏览为主，不用记住所有的概念，只要记住使用原理就行了，这一阶段，估计三天就够了；然后用两天时间学CSS，方法同上；进而再花些时间了解一下JavaScript。
然后就可以用记事本尝试写几个网页，记住这时千万不要用那些可视化工具，比如FrontPage、Dreamweaver（那些以后再学）。
有一个提高自己"写网页"的捷径，就是上各大网站，把网页保存下来（什么？
你说你不会保存网页？
就是"文件→另存为"），然后打开保存下来的网页，点击右键→查看源文件，看看人家的网页是怎么写的，然后模仿他们的写法，不断规范自己的代码。
嘿嘿，这个方法不错吧。
先好好模仿一下吧。
接下来该学一下Fireworks了。
建议一开始就到网上找些实例教程，这些实例教程一般都介绍得很详细，跟着它一步一步做下来，每学会一个实例就掌握了几项操作，而且也有了自己的作品，很有成就感的，长期积累下来对自己的提高很有帮助。
学Fireworks主要是学图片处理，比如加一些效果，还有很重要的就是切图，这对于初学者是很重要的。
这时还可以结合Dreamweaver进行学习，你就可以体会到Dreamweaver和Fireworks的无缝集成了。
利用这些工具多做几个网页，你就可以达到一定水平了。
要是想让你的网页多一些炫目的效果，建议你学一下Flash，难度并不大，而且要是前面的JavaScript基础打得好的话，学到Flash中Acti**cript时，你会有一种似曾相识的感觉，因为这两种语法几乎是一模一样的。
到这时，相信你就可以真正领会到"网页三剑客"的威力了。
在实践中不断提高
要是每天能拿出两个小时来学习，完成以上这些学习估计只要20天就差不多了。
要是天赋高的话（比如说像我这样的，呵呵），那需要的时间就更少了。
接下来该实习了，找个地方锻炼一下自己，比如可以去一些公司干干兼职，或是给自己的单位设计一下主页等。
最好是能进入一个正规的开发团队，你就会学会如何以团队合作的方式开发网站，特别是怎样和程序组合作，把页面与后台程序数据库配合起来。
可能你会担心自己是新手，人家会嫌弃你，没关系，只要努力去找，总会有机会的。
到此，你就基本可以称作是一个"准WebDesigner"了，不过要从根本上提高自己，最好去学学美术，这是当一个网页设计师的基本功。
笔者刚开始做网页纯粹是自娱自乐，但在这个过程中，我逐渐开始深深喜欢上了这项工作。
这个学习过程是人生的一笔宝贵财富，至少我是这么认为的。
[编辑本段]网站设计65条原则
01明确内容
如果你想成为一个网站设计者，并正想建一个网站的话，首先应该考虑网站的内容，包括网站功能和你的用户需要什么。
你的整个设计都应该围绕这些方面来进行。
02抓住用户
如果用户不能够迅速地进入你的网站，或操作不便捷，网站设计就是失败的。
不要让用户失望而转向你的对手的网站。
03优化内容
内容是核心。
大约在两年以前，企业网站就像一本广告册子，更槽糕的是，网站使用了大量的图片，似乎要几个世纪才能下载完。
比如某网站在设计的某些方面是成功的，但是内容太贪乏，并且要花很长时间才能找到所要的东西，因此不能算是一个成功的网站。
04快速下载
没有什么比要花很长时间下载页面更槽糕的了。
作为一条经验，一个标准的网页应不大于60K，通过56K调制解调器加载花30秒的时间。
有的设计者说网页加载应在15秒内。
05网站升级
时刻注意网站的运行状况。
性能很好的主机随着访问人数的增加，可能会运行缓慢。
但是，如果你不想失去访问者的话，一定要仔细计划好你的升级计划。
06坚持基本原则
即使你不懂HTML语言，你只需购买一个有版权的所见即所得的网页设计工具，如AdobePageMill或MicrosoftFrontPag
升级会员 