霍元甲北美票房:网页设计全攻略

网页设计全攻略

一,网页背景设计全攻略网页中的背景设计是相当重要的，尤其是对于个人主页来说，一个主页的背景就相当于一个房间里的墙壁地板一样，好的背景不但能影响访问者对网页内容的接受程度，还能影响访问者对整个网站的印象。如果你经常注意别人的网站，你应该会发现在不同的网站上，甚至同一个网站的不同页面上，都会有各式各样的不同的背景设计。究竟都有哪些不同样式的背景，还有它们的设计方法都是怎样的呢，现在就由我来为大家作一个比较完整的总结。 　

　 1.颜色背景　　颜色背景的设计是最为简单的，但同时也是最为常用和最为重要的，因为相对于图片背景来说，它有无与伦比的显示速度上的优势。在网页文件中，一般通过标签来指定页面的颜色背景，其HTML 语法为：　　　　其中的"color"表示不同的颜色，可以用各种不同的颜色表示方法，比较常用的有直接用颜色的英文名称，如blue、yellow、black等等，还可以用颜色的十六进制表示方法，如#0000FF、#FFFF00、 #000000等等，此外还可以用百分比值法和整数法，其效果都是一样的。　　颜色背景虽然比较简单，但也有不少地方需要注意，如要根据不同的页面内容设计背景颜色的冷暖状态，要根据页面的编排设计背景颜色与页面内容的最佳视觉搭配等等。　　

     2.沙纹背景　　沙纹背景其实属于图片背景的范畴，它的主要特点是整个页面的背景可以看作是局部背景的反复重排，在这类背景中以沙纹状的背景是为常见，所以我们将其统称为沙纹背景。　　初学主页制作者都有这样的经历，当试图把自己的照片作为页面的背景是，却发现浏览器上显示出来的不仅仅是一个照片，而是同一照片在水平和竖直方向上的反复排列。这就是浏览器处理图片背景时的规律方法，利用这一规律我们可以用一小块图片作为页面背景，让它自动在页面上重复排列，铺满整个页面，从而使网页的体积大大减小。　　读者到现在恐怕都已经知道了沙纹背景的原理和实现方法，就是找一个小的图片，越小越好，但注意要使最后的背景看起来要像一个整体，而不是若干图片的堆砌。其实现的HTML语法如下：　　　　其中的"picture"表示背景图片的URL路径。　　

    3.条状背景　　条状背景与沙纹背景是比较相似的，它适用于页面背景在水平或竖直方向上看是重复排列的，而在另一方向上看则是没有规律的。它也是利用浏览器对图片背景的自动重复排列，与沙纹背景所不同的是它只让图片在一个方向上重复排列。　　以在竖直方向上排列为例，首先用图像处理软件做一个从左到右为蓝白渐变的水平条状图片，其长度与页面的宽度相当。也通过　　　　将其设为页面背景，经浏览器显示后，就成为整个页面从左到右蓝白渐变的分栏颜色背景。当然，也可以用类似的方法实现条状背景在水平方向上的重复排列。　　

     4.照片背景　　把自己或朋友的照片作为页面的背景让大家看到，是有点令人激动的事情，但浏览器对图片的自动重复排列却使这一愿望难以实现。怎么办呢？只有想不到的，没有做不到的，这里我们用上一点简单的 CSS。在网页文件的……之间加入下面的CSS语句: 　　 　　这样，在网页页面中，就可以看到你的照片位于页面的正中间，而且在拉动浏览器窗口的滚动条时，照片仍然位于页面的正中间而不随页面内容一起滚动。如果你觉得照片位于页面的正中间不满意，你也可以随意地调整它在页面中的位置，只需要调整"background-position"的值就可以了。　

　 5.复合背景　　如果你在练习上面的“照片背景”时“不小心”也设置了标签里的颜色背景，那么你看到了什么？颜色背景还起作用吗？对，你能看到你的照片浮于你设的颜色背景之上，二者能够同时正常地显示出来。这就是复合背景的魅力，更为吸引人的是，当你所设置的图片背景因为某种不可知的因素而不能正常显示的时候，浏览器能够自动用你所设置的颜色背景取而代之。它的设计方法，就不用我再多说了吧！ 

     6.局部背景 　　前面我们所说的背景都是整个页面的背景，能不能在页面上为某个局部的内容设置属于它自己的背景呢？回答是肯定的。　　最为常见的是在表格的设计当中，我们可以为表格设置一个不同于页面的背景，甚至在不同的表格单元中，我们也可以设置各个表格单元自己的背景。请看下面这个表格例子： 　　在浏览器中的显示效果如图所示,可以看到,不但对于表格整个来说有不同于页面的背景,就是每一个单元格也可以设置各不相同的背景。　　除此之外，我们还可以单独为某个文字段落设置背景，甚至为这个文字段落中的某几个文字设置自己的背景，是不是有点相当不错，这也需要用上一些CSS。请先看一下下面的这个例子：　　 STYLE="BACKGROUND:black url(../images/bg.jpg);COLOR:black}"> 　　记得毛主席有这么一首诗：" 坐地日行八万里，巡于遥看一千河。 "伟人就是了不起，… …几万里就出去了。 　　在浏览器中的显示效果如图所示，现在是不是有点兴奋了，啊，原来文段也可以有自己的背景。只要你愿意，你就可以为页面的任何一个部分定义自己的背景，从而把页面打扮得更加漂亮和吸引人。　　说到这，关于网页背景设计的问题也就说得大概也就差不多了，但新的网页制作技术也在不断涌现，说不定今天你看了这篇文章，明天就觉得它太过时了。笔者写这篇文章，目的是引起广大网页制作者对背景设计的注意，毕竟，背景对网页来说实在是太重要了，当然，网站还是要以内容为第一的。 

二.    网页色彩搭配的内涵 网页的色彩搭配往往是网友们感到头疼的问题，尤其是那些完全没有美术基础的网友。到底用什么色彩搭配好看呢？让我们来看看网友54雨寒的高见吧！

(一)、红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的色。红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的色。 

1、在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。

 2、在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。 

3、在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。

 4、在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。二、黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。黄色是各种色彩中，最为娇气的一种色。只要在纯黄色中混入少量的其它色，其色相感和色性格均会发生较大程度的变化。 1、 在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失，趋于一种平和、潮润的感觉。 2、 在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。 3、 在黄色中加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。 4、 在黄色中加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。三、蓝色的色感冷嘲热讽，性格朴实而内向，是一种有助于人头脑冷嘲热讽静的色。蓝色的朴实、内向性格，常为那些性格活跃、具有较强扩张力的色彩，提供一个深远、广埔、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。 1、 如果在橙色中黄的成份较多，其性格趋于甜美、亮丽、芳香。 2、 在橙色中混入小量的白，可使橙色的知觉趋于焦躁、无力。四、绿色是具有黄色和蓝色两种成份的色。在绿色中，将黄色的扩张感和蓝色的收缩感相中庸，将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。 1、 在绿色中黄的成份较多时，其性格就趋于活泼、友善，具有幼稚性。 2、 在绿色中加入少量的黑，其性格就趋于庄重、老练、成熟。 3、 在绿色中加入少量的白，其性格就趋于洁净、清爽、鲜嫩。五、紫色的明度在有彩色的色料中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。 1、 在紫色中红的成份较多时，其知觉具有压抑感、威胁感。 2、 在紫色中加入少量的黑，其感觉就趋于沉闷、伤感、恐怖。 3、 在紫色中加入白，可使紫色沉闷的性格消失，变得优雅、娇气，并充满女性的魅力。六、白色的色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色，都会影响其纯洁性，使其性格变的含蓄。 1、 在白色中混入少量的红，就成为淡淡的粉色，鲜嫩而充满诱惑。 2、 在白色中混入少量的黄，则成为一种乳黄色，给人一种香腻的印象。 3、 在白色中混入少量的蓝，给人感觉清冷、洁净。 4、 在白色中混入少量的橙，有一种干燥的气氛。 5、 在白色中混入少量的绿，给人一种稚嫩、柔和的感觉 6、 在白色中混入少量的紫，可诱导人联想到淡淡的芳香三,网站建设 1、 构思篇 　　着手做主页之前一定要对自己将来的主页有个完整的构思，切忌随心所欲，想到什么做什么。那样的话，要么做到一半就难以为继，半途而废，要么作出的主页也是杂乱无章。 　　首先，应为自己的主页确定一个主题，如关于电脑、音乐等，以防做成一个大杂烩，不仅加大了寻找素材的难度，而且也为将来网站的维护带来困难。其次，应该给自己的主页确定几个栏目，并依据这 些栏目，设计出整个网站的主体框架，这个框架应保证访客浏览主页时，随时能到他想去的任何一个栏目。再次，要注意背景与正文颜色的对比度以提高页面的可读性，并注意把最重要的信息放在显眼的地 方。最后，就是关于页面布局的构思，包括使用普通页面还是采用框架，何处插入图片、文字或超级链接等。这些可由个人自己确定，这将形成整个网站的风格。但有一点一定要注意，应尽量使页面保持整 洁，标识清晰，切忌凌乱， 宁可少放些东西，否则，容易让访客不知所措。 　　2、 准备篇 　　作主页是个系统工程，要涉及许多方面。因此在不具备一些条件的情况下千万不要着手。简单的说必须具备以下条件： 　　1、 方便的上网途径，制作主页的素材、工具相当一部分来自网上。而且主页还要在上网调试中不断完善，即使完成主页后，还要经常地上网维护. 　　2、 至少一个E- mail 信箱。（可不要告诉我说你没有哦！）。 　　3、 申请到一个理想的免费主页存放空间。这一点比较关键，因为它不仅是将来主页的存放场所，而且主页上一些功能的实现还要依赖于这些场所所提供的服务。然而要申请到理想的场所还是不容易的。判断存 放场所好坏的标准有以下几条： 　　 ①接通速度，②服务器稳定性，③是否提供CGI（公共网关接口）权限及安装Microsoft Frontpage Server Extension,④ 提供空间的大小（一般应选择10M以上），然而据我的尝试发现，国内几十家存放空间提供商中绝大部分已停止接受新的申请（多由于空间不足或担心影响接入速度），在综合考虑个方面因素之后，我将向?蠹彝萍鲆韵铝郊遥汉贤嬷襤http://home.hn.cninfo.net/(速度极快，不限空间)和Webprovider—http://www.webprovider.com(可以申请到顶级域名如：http://www.yourname.com，只是会弹出广告条 ）。 　　4、 工具篇 　　为了制作主页，我共试用了一百多种工具软件，但你再也不必重蹈覆辙了。在此我想向你推荐以下几款，它们是我试用后还留在硬盘上的。 　　1、 网页制作工具。对我们这些不 懂HTML的人来说，首推微软的Frontpage 98/2000,其标化的工具栏布局，类似于OFFICE系列，而且所见即所得，很容易上手。至于其它制作工具整体上不如Frontpage，因此不作推荐。 　　2、 至于图形工具，我们则有较多选择。大体上可分三类。一类是平面图形工具，这类工具论功能首推Photoshop,其强大的功能足以应付任何图形加工工作，当然要熟练地应用它可不是件容易的事。因此我再向 大家推荐一款，那就是Paintshop,它可谓是简装的Photoshop,功能不少而且更易使用。另一类是动画工具，最简单易用的要数Ulead的GifAnimator 3.0（其试用版可以从http://www.ulead.com/下载，可免费使用15天文件大小为2M）,其Animation Wizard能使您轻松地将多幅图像组成动画。同样好用的还有Paintshop中随带的Animator-shop，也具有将图像组成动画的能力。另外，如果您能弄到Photoshop的最新版即5.5版， 那么其附带的专门用于网页动画设计的Image Ready 2.0也是一个不错的选择。其界面同Photoshop几乎相同，使用方法也有类似的地方，而且它与Photoshop实现了一体化，可以同Photoshop相互切换，并与之共享过程(History)，对喜欢用Photoshop的朋友， Image Ready 2.0不容错过。第三类是三维图像工具，由于网页对三维图像要求不高，而且主要涉及文字方面，因此，只需用Ulead Cool 3D就足以应付，其正式版可轻松产生几十种3D文字特效，而且，可对文字进行几十种动画处理，并可与Photoshop共享滤镜，功能十分强大实用。 　　3、 Javascript特效工具。为了让主页更加丰富多彩，然离不开Javascript。相信你我都不懂Javascript。但没关系，我们可以找到不57、 少的傻瓜工具。这里向大家推荐一款国人编写的Javascript工具——古龙茶。它提供了30种特效，包括动感超级链接、弹出欢迎信息、自动刷新、显示最后更新时间等,使用非常方便。 发布篇 　　做好主页后，将主页上传到申请好的存放空间应该不是件难事。一般免费主页提供商都提供两种上传方式。一种是http传输方式。使用这种方式只需由浏览器进入提供商主页，登录到自己的帐户上，选 择http传输方式后，就可以直接选择自己硬盘上的文件上传了。另一种方式是FTP上传。我向大家推荐的FTP工具是CuteFtp（其最新版3.0版的下载地址是：ftp://202.102.230.19/ftpgj/cute3032b.exe）， CuteFtp支持多个文件上传和直接窗口拖放。 　　5、推广篇 　　主页做得再好，如果没有访客或访客稀少，当然是一大缺憾，网络上的原则是“酒香也怕巷子深”，因此，主页推广工作就显得尤为重要。推广主页途径有两条：登录搜索引擎和广告交换。给自己主页 带来大量访客的最佳途径就是在各大搜索引擎，如搜狐（http://www.sohu.com）、悠游（http://www.goyoyo.com）。要登记自己的主页，您只需进入搜索引擎的主页，填完一份申请表后，就可以静候佳音 了。一般国内的搜索引擎会在2—7天内将您的主页加入其数据库，并给您发封确认信。登录成功够，您就可以静候大量访客光临了。另一条途径是广告交换，所谓广告交换就是在您的主页上显示广告提供商 提供的广告条幅，每显示一次您自己的广告条幅就可以在别人的主页上显示0.5至1次不等。国内这样的广告商不少，著名的名网盟（http://www.webunion.com）、酷站（http://166.111.72.30/）等。您可以访问广告商的主页，在填写了一张申请表后您就可以获得一段广告代码，您必须将这断代码加入您的主页中。要进行广告交换您还必须为自己的主页设计一个广告条幅，它就是您为自己主页所做的广告。 一般为GIF图像，尺寸为400*40或468*60像素，文件大小应相应控制在10K或7K以下。如果您没有这方面的经验，建议您去Smart 　　　Click(http://www.smartclicks.com/bestban/current.html)看看那些优秀条幅都有哪些可以借鉴之处。将您做好的条幅按广告提供商的要求上传以后，访客就可以通过点击您的广告条幅访问您的主 页了。 　　特别提示 

　1、 切在主页上放置大量大尺寸的图片。由于受国内网络带宽的限制，绝大部分用户上网速度较慢。对于图片的下载正常的下载速度是3-5K/秒左右， 因此每页尤其是首页的下载量应控制在30K以下。因为很难想象一位访客在等待半分钟甚至一分钟后还有兴趣呆在您的主页。 　

　2、 用Frontpage制作主页时，一定要学会应用表格。因为只有使用表格您才能方便有效地安排好图片、文字的布局。一张图片， 一段文字都应尽量放入表格的一个单元格中。您可以使用拆分、合并、插入单元格等功能，自由设计页面的布局。 

　　3、 为了了解并监控主页访客情况，您不妨为自己的主页申请一个计数器和几个统计器。在主页上加上计数器可以直观地表明目前为止共有几名访客访问您的主页，而加入统计器后，您可以通过点击主页上统计 器的图标访问您自己的个人帐户，从而了解到访客数、访客地区、时段分布、访客来源等等许多详细的报告。计数器的申请有很多选择，建议您去“焦作信息港”的个人天地去看看（http://202.102.230.1 5/personl/），统计器则特别向您推荐以下几个:酷站统计(http://166.111.72.30/)、SuperStats（http://www.superstats.com）。 　

　4、 不妨在主页上设一个留言区，以便访客提出意见和建议并提供自己的个人信息，以提高主页的交互性。留言板可以通过Frontpage中的表单功能实现。 　

　5、 在您将主页上传前， 一定要注意， 文件名的大小写，因为网上存放空间使用的是UNIX系统， 而UNIX系统是区分大小写的，因此如果您主页上的链接指向的文件名同实际文件名大小写不符就会出现链接不上的情况，而您在自己的电脑上调试时并不能发现这点，因此一定要特别注意。建议您一开始就 给所有的文件名统一使用大写或小写，以免以后造成不必要的麻烦。 　

　6、 关于IE与Netscape的兼容问题。用Frontpage做好主页后一定要注意在Netscape Navigator中浏览一下，因为Frontpage在Netscape中还不能完全作到所见即所得。因此您有必要调整一下主页在Netscape中的显示效果，以考虑到相当一部分使用Netscape Navigator的访客。 网页设计时应注意哪些问题 网页设计，根据个人爱好以及网页内容的不同，版面的设计布置千变万化，换一下背景就是另一种感觉，什么样的布局好看，没有定式。笔者根据自己的经验体会特总结出如下要点： 

　　1.网页内容的选择要不落俗套。 放眼望去，网上的许多个人主页简直就是"杂货店".内容包罗万象,题材千篇一律.人人都是"软件下载",个个都有"网络导航"，从头到尾找不出一丝“鲜”意.所以，我们在设计网页时，要把功夫下在选材上。选材要尽量做到“少”而“精”,又必须突出“新”，如能坚持天天更新的话,我相信这样的网页一定会受到大家的欢迎。 　

　2.内容确定下来以后，不要着急开始制作页面。我们应该对整个版面规划设计一下，好好的想一想，主题是什么，大概内容该怎么安排，接着最好在纸上把这个框架画出来——这就是排版。排版是很重要的，没有一条清晰的主线，那么整个版面将是混乱一团。 　

　3.整个页面的主线理好以后，我们还必须对它进行补充，以保证页面的完整性和整体性。比方说，页面的标题内容要简洁明了，使人一看就能明白该网站有没有自己所需要的东西；遇到长文本时，用划线把它分隔开，以便人能一目了然地看清楚；重点段落要突出显示，这样人就能有选择性地获取信息；在网页上留下通讯地址或Ｅ－ＭＡＩＬ地址，有利于用户和你交流；网页中使用商标，不能侵犯版权；以上都是要考虑的一些细节问题。同时特别要考虑到以后网站的维护更新要方便。 　

　4.制作时,内容不要和其他网站的内容相同,适当加入一些自己的文章,评论和见解,会使大家更加相信您,尊重您.例如翻译一些英文教程,写作一些软件的用法,分析一些实例制作过程.毕竟是个人主页,要体现您的个性,风格,让大家了解,接受您的观点,是个人主页的精神所在! 　

　5.图象的制作要兼顾大小和美观，一般来说，掌握好photophop这个强大的工具，再配合其它一些专用图象软件如ulead、paint shop pro等，不难制作出漂亮的精美的图片。但图片是为主页内容服务的，不要让整个版面太花花绿绿，喧宾夺主。在网上就可以找到很多图片、图库和动画。 

　　6.不要使用大幅面的Java程序,能够用javascript替代效果的则尽量不要使用java.因为目前来讲java的运行速度实在慢的让人无法忍受，往往使浏览者没有耐心等页面全部显示出来，这样你的精心设计便毫无效果啦！ 　

　7.单张图片不要超过30k,每页图片总量不要超过60k(一般情况).据统计分析,每页不超过60k图片的网页,其下载速度是可以让人接受的.所有的图片都必须"减肥"小图片(100x40)一般可以控制在6k以内,动画控制在15K以内,较大的图片可以"分割"成小图片.合理采用jpg和gif格式也是至关重要的,色彩鲜艳高分辨率的用jpg,色彩单调低分辨率的用gif,采用gif89a格式的图片在download时能交错显示. 　

 8.图片的下载较慢,要想使用户在图象没有传下来之前，就能够知道图象上的内容，我们就必须为图片加注解.这样一来，在图象没有显示出来时,可以通过注解的标注来帮助浏览者知道这是关于什么内容的图片,以方便用户作出选择，是否需要等待,是否可以点击.特别考虑到纯文本浏览者浏览的方便。 

　 9.设计Web页面时，一定要用640×480和800×600的分辨率来 分别观察。许多浏览器使用640×480的分辨率，尽管在800×600高分辨率下一 Web页面看上去很具吸引力，但在640×480的模式下可能会黯然失色。作一点小小的努力，设计一个在不同分辨率下都能正常显示的网页。