五. 具体细节篇
1.导航栏的设计
每次增加新的栏目或是对原有栏目的调整,都要对所有的页面更新。刚开始可能还算轻松,因为没几个页面,但当有几十、几百个网页后,这工作量实在太大了!如果偷懒只更新几个主要的网页,访问量就会剧减。
笔者首先想到的是FLASH可以做出漂亮的导航按钮,所有的页都用一样的导航栏,以后只要更新这个FLASH动画就可以使整个网站的页面都得到更新。但实际使用后发现FLASH造成网页的体积过大,在加上网站LOGO,商业BANNER……使网页变的臃肿不堪。
这办法不太好,于是笔者又考虑做个JavaScript的导航栏,体积又很小。假设我们要做一个包含“动漫专栏”、“游戏天地”、“音乐同人”、“交友直通车”四个栏目的导航栏:
首先是便于更新,所以要做个外接的JavaScript脚本,至于用到的语句就只有document.write(“”),新建一个文本文件,打开,输入: document.write(" ");
document.write("动漫专栏"); /*在“ ”里的是HTML格式的元素,该元素定义了一个锚(Anchor),也就是把“动漫专栏”作为一个超链接,“HREF”属性指定“动漫专栏”链接到的其他资源上,也就是“http://richardddd.easthome.net”。(以下相同)*/
document.write(" ");/*该行是让链接之间保持一个空格,使链接的下划线不至于连在一起。也可以把空格该成“|”等来制造各种效果*/
document.write("游戏天地");
document.write(" ");
document.write("音乐同人");
document.write(" ");
document.write("交友直通车");
完成后,选择“文件”菜单的“另存为”,在对话框的“文件名”中输入“navigation.js”,“文件格式”里选“*.*”,于是,外接的JS脚本就写好了。
接下来就是把JS链接到我们主页的HTML源代码里了。
具体做法:
在和之间,选择想要让导航栏显示的地方,定位,输入:
保存退出。随后就是测试的工作了。双击主页,看看效果,导航栏是否出现在我们想要的位置上。效果如下:
动漫专栏 游戏天地 音乐同人 交友直通车
注意:
1.在navigation.js里,除了HTML格式本来就必须有的空格外,最好不要有别的空格(包括全角的空格)或是回车,不然的话,装载网页时可能会提示出错。如果觉得语句太长,想让脚本看得清楚些而使用回车时,可以在每行末用“\”来结束,再打回车。
2.这个navigation.js要和网页放在同一目录下,如果要放在不同的目录,就要在网页里的那段代码里navigation.js的前面加上该文件的路径。
导航栏真的是网站里非常重要的一环,如果少了导航栏,你的站点将会是一个漆黑的、让人摸不到东西南北的大迷宫(大家玩过仙剑吧,和那个迷宫是一样的:)。即使是经验丰富的老鸟,也会被弄得不知所措,说不定还会以为你的站点就这么一页呢。所以为了方便访问者,同时也是为了你的网站能有更多的回头客,首先就必须做出分类明确、位置醒目的导航栏,把你的站点的风采以及你自己的才华完全展现出来。其次还要保持导航栏的便于更新,因为随着时间的推移,你的站点内容会越来越丰富多彩,总得重新整理整理吧,让自己的网页随时保持在最方便访问的位置,而不是层层的链接之下。想想看,要是访问者为了找到自己感兴趣的内容必须点上5、6次鼠标的话,那你肯定就失去他了
2.留下联系方法
留下E-mail或其它联系方法(比如电话号码、联系地址等),给了访客一个发泄对你站点的不满的机会,同时也可以方便访客通过这些渠道把网站的BUG反馈给你,之后让你能及时修改调整。
但建议不要留下ISP给你的E-mail信箱,因为这个信箱在邮件超出限定的容量时,要收取相当高的费用。如果你的访客中有人因为对你站点的不满,而给你发邮件炸弹的话,你就有得受了!所以最好只留免费的信箱,比如新浪网就提供容量达50M的免费信箱,即便有人攻击也没什么大不了的——用WEB方式登陆新浪后,再删除就行了,就算真的被炸了,还可以重新申请(反正不收钱)。反观攻击者,要塞满50M的邮箱也够他累的了^_^
如果你平时使用ICQ或是OICQ的话,不妨也把号码留在网页上,因为这种点对点的传输方式比E-mail更迅速、更直接,会使向你反馈意见的朋友觉得很亲切。
3.使用统一的风格
CI(corporate identity)意思是通过视觉来统一整体的形象,包括LOGO、色彩、广告语等可以作为标志性的东西。这原是广告学里的一个专用名词,但用在网站设计上也很恰当。背景颜色、字体颜色大小、导航栏、版权信息、标题、注脚、版面布局,甚至文字说明使用的语气这些方面都要注意前后一致,或者说前后协调。
4.色彩的搭配
暖色系:红、橙、橙黄、黄等色彩表现温馨、和煦、热情。
中性系:黄绿、绿等色彩表现舒适、和谐。
寒色系:青绿、蓝绿、蓝等色彩表现宁静、清凉、高雅。
一般来说,学过美术的人对于色彩的选择和搭配方面比较具有优势,但这也不是绝对的,只要平时注重自己审美观的培养,即使不是专业人员一样可以有好的创作。再退一步,你不是专业人士,也没有这方面的天赋,其实也没关系,你可以使用大家一致公认的经典组合(如黑底白字),即使缺少新意,也不会让人觉得不舒服。
但必须注意的是,在整个站点的色彩选择上,应该尽量使用同一种色系的,色彩种类以不超过三、四种为界限。
适当的对比色可以增加文字的可阅读性,但如果对比太强的话,就不适于长篇文本的阅读,并会对浏览者的视力造成很大的伤害!
5.使用CSS控制整体格式
CSS(Cascading Style sheets,层叠样式表)是为网站制作者带来福音的好东东!它最大的特点是可以使网页的内容和结构版面控制相脱离,大量的减少网页中重复使用的HTML代码,从而减小网页的体积,这对于在网上传输是非常有利的。同时CSS可以使用外接*.CSS文件的方法使一次性修改大批量的网页成为可能,这就意味着你可以经常地改变网站的界面(包括文字、色彩、背景图片等),而每次只需要上传一个体积很小的CSS文件就行了!
所以,笔者在这里极力向大家推荐使用!接着就简单扼要地介绍常用功能。
具体方法:
新建一个文本文件,打开,输入:
body {
font-size: 10pt; //标记里的字体大小为10pt;
background-color: rgb(255,255,255); //网页背景颜色为白色;
background-image: url('back.gif') //背景图片为与网页同一目录下的“back.gif”;
}
table {
border: 0; //表格的边框隐藏;
width: 100%; //表格宽度为100%;
text-align: left; //表格文本对齐方式为靠左;
}
th {
font-size: 11pt; //表头字体为11pt,较普通字体稍大;
color: FFFFFF; //表头背景色为RGB:FFFFFF;
text-align: center; //表头文本队旗方式为居中;
}
a {text-decoration: none} //链接无下划线;
a.visited {color: rgb(153,52,43);} //点击过的链接的颜色;
a.active {color: rgb(153,0,255);} //点击着的链接的颜色;
A.hover {
COLOR: #ffba75; //鼠标经过时链接的颜色;
TEXT-DECORATION: underline //鼠标经过时链接加下划线;
}
完成后,选择“文件”菜单的“另存为”,在对话框的“文件名”中输入“base.css”,“文件格式”里选“*.*”,于是,外接的CSS层叠样式表就写好了。
接着,在网页的HTML代码里的和之间加上:
保存退出。以后只要在CSS文件里做修改就可以使所有加了以上代码的网页自动更新了
6.使用表格定位
想要一张整齐的网页需要做定位工作,有人使用
10.控制图片的大小
除了文字说明,图片就是我们网页上最重要的内容了。许多漂亮的字体,浏览器可能并不支持,所以要用图片的方式来显示;单纯的文字网页信息量巨大,浏览者很难快速地了解网页想要表达的内容,但通过图片就能比较形象地把意思传达给浏览者了。此外统一风格(每个网页使用相同的LOGO)、美化网页(用色彩鲜艳的花边修饰网页边框、分隔大段的文本)、烘托气氛等作用也是文字说明无法做到的,特别是GIF089a格式保存的图片,不但可以制造动画效果、活泼网页的气氛,还能够在显示较大的图片时逐渐的显示,先显示分辨率比较低的图片,让浏览者有个初步了解,知道自己等待的是什么?究竟有没有必要再等待?这对于速度相对较慢的中国互联网来说是一件天大的好事。
一般来说,一张网页上的图片总体积不应该超过50KB,这样光图片的下载将花去浏览者近10秒的时间(按使用56K的MODEM计算,不过56K的MODEM在中国已经是标准配置了),而即使加上文字也多不了多少时间,对于习惯了慢如蚂蚁的网络的用户是可以接受的。因此,可以说图片是造成网页下载速度过慢的“罪魁祸首”。所以,必须在美观和速度之间做出选择,两者都要兼顾,大家自己平衡吧^_^
11.选择使用框架
框架(FRAME)也叫帧页,是现在制作网页是较为常用的一种技术。该技术可以把浏览器窗口划分为几个小窗口,每一个窗口都显示一个网页的内容,并分别设置大小、有无滚动条等信息。这样就方便了设计网站的结构,可以在上方的框架里放置网站的LOGO,在左面的框架里显示导航栏,而在下方的框架里安置版权信息。当然这只是一个比较公式化的设计,每个人可以根据自己的实际需要和创意来做安排。而且浏览时,可以指定链接的网页在哪个框架里显示,从而避免了网页上相同内容的重复下载,而这些内容往往是LOGO、BANNER等体积较大,需要很长下载时间的图片。这对于提高网页显示速度和网络传输效率方面都有着积极的意义。
尽管这是种方便网站设计者的技术,但对于浏览者来说就不一定了。因为框架技术是一种新兴技术,很多浏览器还不支持它,也就是是说,有一部分的浏览者并不能正常的看到你那美仑美奂的网页。所以,笔者建议:为了这些网友,尽量不要使用框架。如果实在要用,就一定要记得在框架网页的HTML代码里加上
相关视频
相关阅读 Windows错误代码大全 Windows错误代码查询激活windows有什么用Mac QQ和Windows QQ聊天记录怎么合并 Mac QQ和Windows QQ聊天记录Windows 10自动更新怎么关闭 如何关闭Windows 10自动更新windows 10 rs4快速预览版17017下载错误问题Win10秋季创意者更新16291更新了什么 win10 16291更新内容windows10秋季创意者更新时间 windows10秋季创意者更新内容kb3150513补丁更新了什么 Windows 10补丁kb3150513是什么
热门文章 Wordpress本地安装教程dx1.5如何设置二级域名
最新文章
hbuilder有哪些快捷键Wordpress本地安装教程
Wordpress本地安装教程expression web 4文档乱码解决方法dz 2.5“收藏本版”关闭小对话框无法关闭解在制作安装软件之前,您必须先将易语言存盘,
人气排行 如何使用multipart/form-data格式上传文件Photoshop PS图层混合模式详解(非常详细)ISAPI_Rewrite3使用教程网站里添加收藏和设为首页代码桌面快捷方式图标不见了C#获取执行程序所在的当前路径的方法详解(XMLHttpRequest)进行跨域请求方法如何用远程桌面连接进行传输文件
查看所有0条评论>>