具体细节篇
1.导航栏的设计
2.使用CSS控制整体格式
3.使用表格定位
4.使用模版
5.少用Java
6.选择使用框架
7.留下联系方法
8.使用统一的风格
9.色彩的搭配
实用技巧篇
1.特色ICO
2.解决乱码
3.为图片加注释
4.显示替代图片
5.用Wingdings字体作画
具体细节篇
1.导航栏的设计
每次增加新的栏目或是对原有栏目进行调整,都要将所有的页面更新。刚开始可能还算轻松,因为没几个页面,但当有几十、几百个页面后,这工作量实在是太大了。如果偷懒只更新几个主要的网页,访问量就会剧减。Flash可以做出漂亮的导航按钮,如果让所有的页面都用一样的导航栏,以后只要更新这个Flash动画就可以使整个网站的页面都得到更新。但是使用Flash造成网页的体积过大,再加上网站Logo,商业Banner……这样一来会使网页变得臃肿不堪。所以这办法不太好,如果条件允许可以考虑做个体积较小的Javascript的导航栏。
2.使用CSS控制整体格式
CSS(Cascading StyleSheets,层叠样式表)是为网站制作者带来福音的好东西。它最大的特点是可以使网页的内容和结构版面控制相脱离,大量减少网页中重复使用的HTML代码,从而减小网页的体积,这对于在网上传输是非常有利的。同时CSS可以使用外接*.CSS文件的方法使一次性修改大批量的网页成为可能,这就意味着你可以经常改变网站的界面(包括文字、色彩、背景图片等),而每次只需要上传一个体积很小的CSS文件就行了。
3.使用表格定位
要做出一张整齐的网页需要定位,有人使用
和标记,但实际上套用表格更简单一些,虽然后者精确度不及前者。很多大的站点都使用表格来定位文字和图片,制作时很直观,效果不错。但值得注意的是,当你的页面很大的时候,千万别在整个网页上用一个大的表格套很多小表格。因为如果浏览器在接受数据时发现表格,就必须知道表格的结构,也就是说要把整张表格的内容都接受完毕才显示其内容,之前会给浏览者一张“白板”看,很多人因为没耐心等待而转去看其他站点了。所以分用几个小表格,让它们可以分别显示,收到多少显示多少,浏览者可以在等待的时候看先收到的部分,这样一来就增加了浏览者继续等待的信心。但是如果你觉得分别显示页面会破坏整体的美感,那就用大表格吧。
4.使用模版
很多刚开始做网站的朋友往往在收集了大量的素材后,立即投入制作,生成了绝大部分成品网页,但由于经验不足或其它什么原因,做完了才发现问题,只好一个个网页地修改,结果浪费了巨大的精力。所以在完成了所有的构思以后,先要做一个模版网页,在这个网页里包括了所有网页的公共元素,如:LOGO、导航栏、更新时间、推荐栏目、外接的CSS样式表的链接、加入收藏夹、返回首页、站点地图、E-mail地址、滚动的状态栏、广告条、版权信息等等。之后只要复制多份,填入不同的内容就相对轻松多了。
顺便提一句,如果页面太多而没有给每个网页写Title的话,FrontPage2000就会自动给每个网页加上按“new page 1”、“new page 2”的顺序排列的Title,很不美观规范,或是使人产生“站长是个懒鬼”的想法。所以,在制作模版的时候,就可以在Title里加上一句无论放在哪个页面里都合适的欢迎词。
5.少用Java
虽然使用Java可以做出许多精彩的网页特效,但由于现在Java程序的处理速度实在让人不敢恭维,往往是等上老半天还看不到网页的内容,更过分的是在漫长的等待后,浏览器提示Applet不能启动。过分追求技巧和特效,结果却把最重要的内容给拉下了,这种做法显然是不可取的。
6.选择使用框架
框架(Frame)也叫帧页,是现在制作网页时较为常用的一种技术。该技术可以把浏览器窗口划分为几个小窗口,每一个窗口都显示一个网页的内容,并分别设置大小、有无滚动条等信息。这样就方便了设计网站的结构,可以在上方的框架里放置网站的LOGO,在左面的框架里显示导航栏,而在下方的框架里安置版权信息。当然这只是一个比较公式化的设计,每个人可以根据自己的实际需要和创意来做安排。而且浏览时,可以指定链接的网页在哪个框架里显示,从而避免了网页上相同内容的重复下载,而这些内容往往是Logo、Banner,需要较长的下载时间。这对于提高网页显示速度和网络传输效率方面都有着积极的意义。
但框架技术是一种新兴技术,很多旧版本的浏览器都还没支持它,有一部分浏览者并不能正常看到你那美仑美奂的网页。所以在使用时,一定要记得在框架网页的HTML代码里加上元素,在里可以设定当浏览器不支持框架的时候在浏览器里显示的替代内容,让没有使用最新版本的用户也可以看到网页的内容。
||||||7.留下联系方法
留下E-mail或其它联系方法(比如电话号码、联系地址等),给访客一个发泄对你站点不满的机会,同时也可以方便访客通过这些渠道把网站的Bug反馈给你,之后让你能及时修改调整。
但建议不要留下ISP给你的E-mail信箱,因为这个信箱在邮件超出限定的容量时,要收取相当高的费用。如果你的访客中有人因为对你点的站点不满,而给你发邮件炸弹的话就麻烦了。所以最好只留免费的信箱,就算真的被炸了,还可以重新申请。
如果你平时使用ICQ或是OICQ的话,不妨也把号码留在网页上,因为这种点对点的传输方式比E-mail更迅速、更直接,会使向你反馈意见的朋友觉得很亲切。
8.使用统一的风格
CI(Corporate Identity)意思是通过视觉来统一整体的形象,包括LOGO、色彩、广告语等可以做为标志性的东西。这原是广告学里的一个专用名词,但用在网站设计上也很恰当。背景颜色、字体颜色大小、导航栏、版权信息、标题、注脚、版面布局,甚至文字说明使用的语气方面都要注意前后一致,或者说前后协调。
9.色彩的搭配
暖色系:红、橙、橙黄、黄等色彩表现温馨、和煦、热情。
中性系:黄绿、绿等色彩表现舒适、和谐。
冷色系:青绿、蓝绿、蓝等色彩表现宁静、清凉、高雅。
一般来说,学过美术的人在色彩的选择和搭配方面比较具有优势,但这也不是绝对的,只要平时注重自己审美观的培养,即使不是专业人员一样可以有好的创作。再退一步,你不是专业人士,也没有这方面的天赋,其实也没关系,你可以使用大家一致公认的经典组合(如黑底白字),即使缺少新意,也不会让人觉得不舒服。但必须注意的是,在整个站点的色彩选择上,应尽量使用同一色系的,色彩种类以不超过4种为界限。
适当的对比色可以增加文字的可阅读性,但如果对比太强的话,就不适于长文本的阅读,并会对浏览者的视力造成很大的伤害!
实用技巧篇
1.特色ICO
每次看到好的网页总想把它保存在收藏夹里以方便以后再去。但时间一久,太多的链接就让人眼花缭乱了,没办法,只有删。你不想让自己的网页也遭到这样的命运吧?
具体方法:先打开网页的HTML源文件,在和之间输入:
,再保存退出,其中“logo.ico”会被替换成你自己的ICO图标文件的路径。最后记得把网页和ICO图标文件都上传到网上就行了,但ICO的路径不要变。
2.解决乱码
大陆和台湾地区虽然都使用中文,但在电脑网络上的编码方式却有很大的不同,前者使用的是GB2312码(国标码),而后者用的是BIG5码(大五码),两者互相不兼容,这就使通过网络在两地之间交流变得很不方便,出现了乱码的E-mail和网页。要正确显示两种编码不但要求用户的计算机安装相关软件,还要做相关设置,并且每次都要手动切换,很不方便。其实,只要在网页中加上一行代码就至少可以避免每次手动切换的麻烦了。
具体方法:在网页HTML源文件的和之间的空白处点击鼠标,输入:
,保存退出。这样就可以强制浏览者用GB码来看你的网页,只要他的计算机安装了相关的IE字符包就能正常显示国标码了。如果想显示的是BIG5码,只要把“gb2312”替换成“big5”就行了。
3.为图片加注释
这不但适用于图片,还可以针对网页上所有的链接,在浏览者将鼠标放在图片或链接上的时候自动显示的一小段预先准备的文本,可以是对图片本身的解释,也可以告知链接通向哪儿。
具体方法:打开网页的HTML源文件,在标记里加上:alt="image information",之后保存退
出,其中的image information替换为每(下转59页)(上接56页)个图片的具体解释。如果是文字链接需要加注释,在标记里加上:title="link information",再保存退出,其中link information就是注释内容。
4.显示替代图片
如果要显示的图片体积太大,可以用一个体积较小的图片在原图片位置先作替代性的显示,使浏览者可以在先看到这些信息的同时,再等待原图片的下载。
具体方法:打开网页的HTML源文件,在标记里加上:LOWSRC="http://art.jz173.com/web_dev/v/standin.gif",再保存退出,其中的http://art.jz173.com/web_dev/v/standin.gif就是用来替换的图片。
5.用Wingdings字体作画
Wingdings字体可以让普通的ASCII码以一些简单预定图形的方式在浏览器里显示,如果我们用Wingdings字体来替代部分图片的话,必然将大大加快网页的下载速度,因为只要看看HTML源文件就会知道网页上的图形只是一小段代码而已。
不过需要注意的是,IE对于Wingdings字体的支持很好,而Netscape可能会出现一些显示上的问题。