[细节篇]菜鸟建站全攻略-从入门到精通

[细节篇]菜鸟建站全攻略-从入门到精通

五. 具体细节篇

　　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．使用表格定位

　　想要一张整齐的网页需要做定位工作，有人使用