网页设计与制作.docx
《网页设计与制作.docx》由会员分享，可在线阅读，更多相关《网页设计与制作.docx（12页珍藏版）》请在冰豆网上搜索。
网页设计与制作
网页设计与制作简要步骤与疑难解答
第一步：
确定网站主题
做网站，首先必须要解决的就是网站内容问题，即确定网站的主题。
美国《个人电脑》杂志（PCMagazine）评出了99年度排名前100位的全美知名网站的十类题材：
第1类：
网上求职；第2类：
网上聊天/即时信息/ICQ；第3类和仙缜?
讨论/邮件列表；第4类：
计算机技术；第5类：
网页/网站开发；第6类：
娱乐网站；第7类：
旅行；第8类：
参考/资讯；第9类：
家庭/教育；第10类：
生活/时尚。
我们可以参看上面的分类，继续细分。
如果自己在某些方面有兴趣，或掌握的资料较多，也可以做一个自己感兴趣的东西，一者，你可以有自己的见解，做出自己的特色；二者，在制作网站时不会觉得无聊或者力不从心。
兴趣是制作网站的动力，没有创作热情，很难设计制作出优秀的作品。
规划的内容应该主要包括但不局限于如下几项：
1、域名的选择
2、网站的定位（如定位于赢利性网站，还是企业网站，或是公益性的……）
3、网站的用途（是用来赢利的，还是做产品线上营销的，或是做品牌推广和整合的）
4、网站的发展目标（需要达到的目标，需要为这个目标而努力的）
5、网站的拓扑图构画（网站包括哪些栏目，采用什么样的制作结构）
6、网站制作技术的采用（用哪种语言开发，在什么平台上开发）
7、网站的推广（需要做具体什么样的工作去推广网站，是否需要在前期开发的时候就考虑到后期的推广，如SEO专家的建议）
8、网站的维护（是自主维护，还是外包维护，维护的内容包括哪些，后期改版的时间间隔安排等）
9、网站安全（网站定期进行安全检测及备份等安全操作）
[编辑本段]第三步：
选择好域名
域名是网站在互联网上的名字。
一个非产品推销的纯信息服务网站，其所有建设的价值，都凝结在其网站域名之上。
失去这个域名，就将前功尽废
第四步：
掌握建网工具
网络技术的发展带动了软件业的发展，所以用于制作Web页面的工具软件也越来越丰富。
从最基本的HTML编辑器到现在非常流行的Flash互动网页制作工具，各种各样的Web页面制作工具，下面是几款具有代表性的网页制作器：
1.HTML编辑器。
虽然HTML代码复杂，编辑和调试要花费大量的时间，但因HTML的稳定性、广泛支持性及可创建复杂的页面效果，仍受高级网页制作人员的青睐。
就目前来说，有众多的编辑器供选择，这些编辑器广泛支持复杂页面创建及高级HTML规范，使用较为普遍的有Hotdog等专业HTML编辑器。
2.所见即所得的网页编辑器。
其中以MicrosoftFrontpage为代表，它具有如Word一样的操作界面，熟知Word功能的操作者，只要稍加培训就能轻松编制网页。
而且，Frontpage还能解析网页的HTML源代码，并提供了预览支持。
但Frontpage的一些特殊显示功能并不能在其它非IE浏览器下实现。
所以Frontpage是一款非常适合初、中级网页制作人员使用的工具软件。
3.现在非常流行的Macromedia公司（已被Adobe公司收购）出品的Flash互动网页制作工具。
这是是一款功能非常强大的交互式矢量多媒体网页制作工具。
能够轻松输出各种各样的动画网页，它不需要特别繁杂的操作，也比JAVA小巧精悍！
但它的动画效果、互动效果、多媒体效果十分出色。
而且还可以在Flash动画中封装Mp3音乐、填写表单等；并且由于Flash编制的网页文件比普通网页文件要小得多，所以大大加快了浏览速度。
这是一款十分适合动态Web制作的工具。
4.Dreamweaver:
Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
另外，个人网站制作者还需了解W3C的HTML4.0规范、CSS层叠样式表的基本知识、javascript、VBScript的基本知识。
对于常用的一些脚本程序如ASP、CGI、PHP也要有适当了解，还要熟练使用图形处理工具和动画制作工具以及矢量绘图工具，并能部分了解多种图形图像动画工具的基本用法，熟练使用FTP工具以及拥有相应的软硬件和网络知识也是必备的。
当然，互联网还是一个免费的资料库。
编制网页需要多种多样的按钮、背景还有各种各样图形、图片。
如果这些都要靠自己完成，既浪费时间又浪费金钱，而且还需要强大的图形、图片制作技术。
所以，为了省却这些麻烦，网站制作者完全可以从网上下载各种精美实用的图片、按钮、背景等网页素材。
[编辑本段]第五步：
确定网站界面
界面就是网站给浏览者的第一印象，往往决定着网站的可看性，在确定网站的界面时要注意以下三点：
1.栏目与板块编排
构建一个网站就好比写一篇论文，首先要列出提纲，才能主题明确、层次清晰。
网站建设初学者，最容易犯的错误就是：
确定题材后立刻开始制作，没有进行合理规划。
从而导致网站结构不清晰，目录庞杂混乱，板块编排混乱等。
结果不但浏览者看得糊里糊涂，制作者自己在扩充和维护网站也相当困难。
所以，我们在动手制作网页前，一定要考虑好栏目和板块的编排问题。
网站的题材确定后，就要将收集到的资料内容作一个合理的编排。
比如，将一些最吸引人的内容放在最突出的位置或者在版面分布上占优势地位。
栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。
在制定栏目的时候，要仔细考虑，合理安排。
在栏目编排时需要注意的是：
●尽可能删除那些与主题无关的栏目；
●尽可能将网站内最有价值的内容列在栏目上；
●尽可能从访问者角度来编排栏目以方便访问者的浏览和查询；辅助内容，如站点简介、版权信息、个人信息等大可不必放在主栏目里，以免冲淡主题。
另外，板块的编排设置也要合理安排与划分。
板块比栏目的概念要大一些，每个板块都有自己的栏目。
举个例子：
ENET硅谷动力（）的站点分新闻、产品、游戏、学院等板块，每个板块下面又各有自己的主栏目。
一般来说，个人站点内容较少，只要分个栏目也就够了，不需要设置板块。
如果有必要设置板块的，应该注意：
●各板块要有相对独立性；
●各板块要有相互关联；
●各板块的内容要围绕站点主题；
2.目录结构与链接结构
网站的目录是指建立网站时创建的目录。
例如：
在用Frontpage建立网站时都默认建立了根目录和Images子目录。
目录的结构是一个容易忽略的问题，大多数站长都是未经规划，随意创建子目录。
目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的维护，以后内容的扩充和移植有着重要的影响。
所以建立目录结构时也要仔细安排，比如：
●不要将所有文件都存放在根目录下。
有网站制作者为了方便，将所有文件都放在根目录下。
这样就很容易造成：
文件管理混乱，搞不清哪些文件需要编辑和更新，哪些无用的文件可以删除，哪些是相关联的文件，影响工作效率；上传速度变慢，服务器一般都会为根目录建立一个文件索引，如果将所有文件都放在根目录下，那么即使只上传更新一个文件，服务器也需要将所有文件再检索一遍，建立新的索引文件，很明显，文件量越大，等待的时间也将越长。
●按栏目内容建立子目录。
子目录的建立，首先按主栏目建立。
友情连接内容较多，需要经常更新的可以建立独立的子目录。
而一些相关性强，不需要经常更新的栏目，例如：
网站简介、站长情况等可以合并放在一个统一目录下。
所有程序一般都存放在特定目录，例如：
CGI程序放在cgi-bin目录，所有提供下载的内容也最好放在一个目录下，便于维护管理。
●在每个主目录下都建立独立的Images目录。
一般来说，一个站点根目录下都有一个默认地Images目录。
将所有图片都存放在这个目录里很是不方便，比如在栏目删除时，图片的管理相当麻烦。
所以为每个主栏目建立一个独立的Images目录是方便管理的。
原因很简单，就是方便维护与管理。
一般的，建立网站的链接结构有两种基本方式：
●树状链接结构（一对一），这类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。
这样的链接结构浏览时，一级级进入，一级级退出，条理比较清晰，访问者明确知道自己在什么位置，不会“不知身在何处”，但是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须回到首页再进行。
●星状链接结构（一对多），类似网络服务器的链接，每个页面相互之间都建立有链接。
这样浏览比较方便，随时可以到达自己喜欢的页面。
但是由于链接太多，容易使浏览者迷路，搞不清自己在什么位置，看了多少内容。
3.进行形象设计
网站的设计可以从以下几点出发：
●设计网站标志（LOGO）。
LOGO是指网站的标志，标志可以是中文、英文字母，也可以是符号、图案等。
标志的设计创意应当来自网站的名称和内容。
比如：
网站内有代表性的人物、动物、植物，可以用它们作为设计的蓝本，加以卡通化或者艺术化；专业网站可以以本专业有代表的物品作为标志。
最常用和最简单的方式是用自己网站的英文名称作标志，采用不同的字体、字母的变形、字母的组合可以很容易制作好自己的标志。
●设计网站色彩。
网站给人的第一印象来自视觉冲击，不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。
“标准色彩”是指能体现网站型象和延伸内涵的色彩，要用于网站的标志，标题，主菜单和主色块。
给人以整体统一的感觉。
至于其它色彩也可以使用，但应当只是作为点缀和衬托，绝不能喧宾夺主。
一般来说，一个网站的标准色彩不超过3种，太多则让人眼花缭乱。
适合于网页标准色的颜色有：
蓝色，黄/橙色，黑/灰/白色三大系列色。
●设计网站字体。
和标准色彩一样，标准字体是指用于标志，标题，主菜单的特有字体。
一般网页默认的字体是宋体。
为了体现站点的“与众不同”和特有风格，可以根据需要选择一些特别字体。
制作者可以根据自己网站所表达的内涵，选择更贴切的字体。
需要说明的是：
使用非默认字体只能用图片的形式，因为很可能浏览者的计算机里没有安装特别字体，那么辛苦设计制作便可能付之东流了。
●设计网站宣传语。
也可以说是网站的精神、主题与中心，或者是网站的目标，用一句话或者一个词来高度概括。
用富有气势的话或词语来概括网站，进行对外宣传，可以收到比较好的结果。
[编辑本段]第六步：
确定网站风格
“风格”是抽象的，是指站点的整体形象给浏览者的综合感受。
这个“整体形象”包括站点的CI（标志，色彩，字体，标语）、版面布局、浏览方式、交互性、文字、语气、内容价值等等诸多因素，网站可以是平易近人的、生动活泼的也可以是专业严肃的。
不管是色彩、技术、文字、布局，还是交互方式，只要你能由此让浏览者明确分辨出这是你网站独有的，这就形成了网站的“风格”。
风格是有人性的，通过网站的色彩、技术、文字、布局、交互方式可以概括出一个站点的个性：
是粗犷豪放的，还是清新秀丽的；是温文儒雅的，还是执著热情的；是活泼易变的，还是墨守成规的。
在明确自己想给人以怎样的印象后，要找出网站中最有特色的东西，就是最能体现网站风格的东西。
并以它作为网站的特色加以重点强化、宣传。
总之，风格的形成不是一次定位的，你可以在实践中不断强化、调整、改进。
[编辑本段]第七步：
有创意的内容选择
好的内容选择需要有好的创意，作为网页设计制作者，最苦恼的就是没有好的内容创意。
网络上的最多的创意即是来自于虚拟同现实的结合。
创意的目的是为了更好的宣传与推广网站，如果创意很好，却对网站发展毫无意义，那么，网站设计制作者也应当放弃这个创意。
另外，主页内容是网站的根本之所在，如果内容空洞，即使页面制作地再怎样精美，仍然不会有多少用户。
从根本上说，网站内容仍然左右着网站流量，内容为王（ContentIsKing）依然是个人网站成功的关键。
第八步：
选购网站空间
这个一步应该是和选好域名的时候已经确定网站空间放在那里。
在网络服务器上开辟出一定配额的磁盘空间供用户放置网站、文件等内容，最基本的虚拟主机功能包含web访问和文件传输功能。
网站制作入门
1、什么是首页?
首页是指一个网站的主索引页，是令访客了解网站概貌并引导其调阅重点内容的向导。
2、什么是形象页？
形象页是指一个网站的欢迎页面，可引入的元素大致有：
企业名称、LOGO、形象图片、网址、宣传语、首页链接、其他语种页面链接等。
3、什么是入口页？
入口页又称Coverpage，顾名思义如果把网站比作一本杂志，入口页（Coverpage）就是封面了。
此页面的元素通常只有企业的名称，企业的LOGO以及表现企业形象的背景图片。
适用于突出体现企业形象、企业理念或者为了让网站艺术型。
但不适用于功能性强、交互频繁的站点。
4、网页同Word页面是一样的吗？
网页是由HTML（超文本标记语言）编写的。
过去制作网页都要有专门的技术人员一行一行代码的编写非常费事，而如今有了FrontPage和DreamWeaver这样可视化的编辑工具使得不再那么困难，同时也可以实现更多强大的功能。
5、什么叫网站策划？
网站是企业发布信息、收集反馈、提供服务的综合平台。
信息结构的设置能否符合访客的使用习惯将在很大程度上影响网站的实际功效。
6、什么叫形象页设计？
形象页是指一个网站的欢迎页面，可引入的元素大致有：
企业名称、LOGO、形象图片、网址、宣传语、首页链接、其他语种页面链接等。
将客户选定的元素创造性地布局后进行整体化设计，建立亲和、亮丽的视觉效果，达到提高企业形象，宣传企业理念的功效。
7、什么叫栏目页设计？
据网站结构及信息类别的分类，确定需要独立设计的栏目页和内容页模板文件的总数。
设计中兼顾并继承首页的设计风格，保障模板在各具体页面套用过程中的适用性和灵活性。
8、什么叫动态效果？
在策划阶段根据不同页面的需要，设置Javascript、DHTML特效若干。
例如：
走马灯、分时问好、弹出窗口等。
各种特效不分难易，采用统一价格计算。
9、什么是Flash动画？
Flash动画是一种矢量动画格式，它是用Macromedia公司的Flash4软件编辑而成，具有体积小、兼容性好、直观动感、互动性强大、支持MP3音乐等诸多优点，是当今最流行的Web页面动画格式
10、LOGO知识介绍
一、什么是LOGO:
翻开字典，我们可以找到这样的解释：
“logo:
n.标识语”。
在电脑领域而言，LOGO是标志、徽标的意思。
而本站主要所收集的LOGO，是互联网上各个网站用来与其它网站链接的图形标志。
二、LOGO的作用:
1.LOGO是与其它网站链接以及让其它网站链接的标志和门户。
INTERNET之所以叫做“互联网”，在于各个网站之间可以联接。
要让其他人走入你的网站，必须提供一个让其进入的门户。
而LOGO图形化的形式，特别是动态的LOGO，比文字形式的链接更能吸引人的注意。
在如今争夺眼球的时代，这一点尤其重要。
2.LOGO是网站形象的重要体现。
试问一个衣冠楚楚的人怎么能让自己的名片污渍不堪？
就一个网站来说，LOGO即是网站的名片。
而对于一个追求精美的网站，LOGO更是它的灵魂所在，即所谓的“点睛”之处。
3.LOGO能使受众便于选择。
一个好的LOGO往往会反映网站及制作者的某些信息，特别是对一个商业网站来话，我们可以从中基本了解到这个网站的类型，或者内容。
在一个布满各种LOGO的链接页面中，这一点会突出的表现出来。
想一想，你的受众要在大堆的网站中寻找自己想要的特定内容的网站时，一个能让人轻易看出它所代表的网站的类型和内容的LOGO会有多重要。
三、LOGO的国际标准规范：
为了便于INTERNET上信息的传播，一个统一的国际标准是需要的。
实际上已经有了这样的一整套标准。
其中关于网站的LOGO，目前有三种规格：
1.88*31这是互联网上最普遍的LOGO规格，本站所收集的均是这种大小。
2.120*60这种规格用于一般大小的LOGO。
3.120*90这种规格用于大型LOGO。
四、LOGO的制作工具和方法
好像目前并没有专门制作LOGO的软件，其实也并不需要这样的一种软件。
我们平时所使用的图像处理软件或者还加上动画制作软件（如果你要做一个动画的LOGO的话）都可以很好地胜任这份工作，如PHOTOSHOP、FIREWORKS等。
而LOGO的制作方法也和制作普通的图片及动画没什么两样，不同的只是规定了它的大小而已。
五、一个好的LOGO应具备的条件：
Poorfish认为，一个好的LOGO应具备以下的几个的条件，或者具备其中的几个条件：
1.符合国际标准（废话）
2.精美、独特
3.与网站的整体风格相融
4.能够体现网站的类型、内容和风格
11、什么叫javascript？
JavaScript是一种居于Java程序语言的脚本语言。
JavaScript语言设计出来是用在居于web的网页（包括客户端和服务器端）上的，这个文档里的内容只涉及了客户端的JavaScript（它是被嵌入到网页中的HTML代码中，并且由浏览器来执行的脚本语言）。
12、网页设计是不是越华丽越好？
不是这样，对于大多数企业来讲设计网页的目的传达给来访者更多的实际的信息也就是内容，这样才能让来访者更好的了解企业并发生互动的可能。
所以说网页的形式是为内容而服务的。
设计精美的网页可以吸引来访者的视线，而过于华丽则有些喧宾夺主了。
就像有些创意独特的时装手表，你已无法用它来判断时间。
在企业网站策划中应该考虑设计精美的同时，考虑网站线索的清晰，使用的方便，功能的体现等因素。
网站制作必须要注意的事项：
你应当有一个很清晰的网站介绍，告诉访问者你的网站能够提供些什么，以便访问者能找到想要的东西。
但是，许多设计者都没有这样做。
有效的导航条和搜索工具使人们很容易找到有用的信息，这对访问者很重要。
告诉访问者你所提供的正是他们想要的信息。
20“网站一旦发布，网站设计的优点和缺陷全都公布于世。
没有什么方法使你能够比从自己的错误、倾听其他人的建议和用户反馈意见中学到更多的东西。
”——专家忠告
21闪烁让人头痛
通过使用标识可以吸引访问者对你的主页特殊部分的注意，但这也让你的访问者头痛。
如果你想使访问者再次光顾你的网站，就少用此方法。
22背景颜色
背景颜色也会产生一些问题，可能会使网页难于阅读。
你应当坚持使用白色的背景和黑色的文本，另外还应当坚持使用通用字体。
23向前和向后按钮
应当避免强迫用户使用向前和向后按钮。
你的设计应当使用户能够很快地找到他们所要的东西。
绝大多数好的站点在每一页同样的位置上都有相同的导航条，使浏览者能够从每一页上访问网站的任何部分。
24“坚持你的信念。
严格遵守各种规则。
避免想当然。
绝不停止学习。
”——专家忠告
25点击记数器
不要轻易考虑在你的网站上放置一个醒目的点击记数器。
你设计网站是为了给访问者提供服务，而不是推销你自己认为重要的东西。
大多数浏览者认为计数器毫无意义，它们很容易被做假，浏览者也不想看广告。
如果你显示你的网站是多么受欢迎，你最好提供一个链接，显示访问日志。
26不要用框架
与记数器一样，框架在网页上越来越流行。
在大多数网站上，在屏幕的左边有一个框架。
但是设计者立刻就发现，在使用框架时产生了许多的问题。
使用框架时如果没有17英寸的显示屏几乎不可能显示整个网站。
框架也使得网站内个人主页不能够成为书签。
也许更重要的是，搜索引擎常常被框架混淆，从而不能列出你的网站。
27去掉图像
在浏览器中即使去掉了图像功能，也要保证访问者能够在你的网站上获得满意的效果。
对于那些使用ISDN连接并且关掉了图像功能的访问者，还能获得好的网页加载性能。
可以通过在网页底部提供另外的链接和使用替代文字，而不是图像来满足访问者的需要。
28重复使用图像
一些网站由于使用大量不重复的图像而错过了使用更好的技巧的机会。
在创建商标时，在网页上多次使用同样的图像是一个好的方法，并且一旦它们被装入，以后重新载入就会很快。
29避免使用过大的图像
不要使用横跨整个屏幕的图像。
避免访问者向右滚动屏幕。
占75%的屏幕宽度是一个好的建议。
30“避免使用炫耀的技巧。
”——专家忠告
31选择使用Flash动画
许多使用比较慢的计算机的访问者发现动画图标很容易耗尽系统资源，使网站的操作变得很困难，因此，应该给用户一个跳过使用Flash动画的选择。
32尽量少使用Flash插件
虽然许多Web设计者认为Flash功能很强大，并且Netscape5.0将支持Flash，在使用时不必再下载任何插件。
但是，最好还是取消使用Flash做各接口的想法。
33让用户先预览小图像
如果不得不放置大的图像在网站上，就最好使用Thumbnails软件，把图像的缩小版本的预览效果显示出来，这样用户就不必浪费金钱和时间去下载他们根本不想看的大图像。
34动画与内容应有机结合
确保动画和内容有关联。
它们应和网页浑然一体，而不是干巴巴的。
动画并不只是MacromediaDirector等制作的东西的简单堆积。
35慎用声音
声音的运用也应得到警惕。
内联声音是网页设计者的另一个禁地。
因为过多地使用声音会使下载速度很慢，同时并没有带给浏览者多少好处。
首次听到鼠标发出声音可能会很有趣，但是多次以后肯定会很烦人。
使用声音前，应该仔细考虑声音将会给你带来什么。
36少用Java和AxtiveX
在网页上应尽量少使用Java和AxtiveX。
因为并不是每一种浏览器都需要使用它，只有那些Netscape和Explorer的早期版本的使用者才需要它。
另外Mac在处理Java时也存在问题，过分地使用Java，会使Mac崩溃
升级会员 