分享
 
 
 

网站建设全攻略系列之从入门到进阶

王朝html/css/js·作者佚名  2006-11-23
窄屏简体版  字體: |||超大  

六.使用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文件里做修改就可以使所有加了以上代码的网页自动更新了!

七.使用表格定位

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

和标记,但实际上套用表格更简单一些,虽然精确度不及前者。很多大的站点都使用表格来定位文字和图片,制作时很直观,效果不错。但值得注意的是,当你的页面很大的时候,千万别在整个网页上用一个大的表格套很多小表格!因为如果浏览器在接受数据时发现表格,就必须知道表格的结构,也就是说要把整张表格的内容都接受完毕才显示其内容,之前会给浏览者一张“白板”看,很多人因为没耐心等待而转去看其他站点了。所以分用几个小表格,让他们可以分别显示,收到多少显示多少,浏览者可以在等待的时候看先收到的部分,这样一来就增加了浏览者继续等待的信心。但是你觉得分别显示页面会破坏整体的美感,那就用大表格吧!^_^

八.站点地图

即使导航栏条理分明,结构合理,但对于内容较多的站点来说,还是做一份站点的导航地图,才对得起访客。在站点地图里,你可以详细的介绍素有的栏目,以及每个栏目里分别包括些什么小栏目或是含有什么样的具体内容,应该尽力写得详实明了,让人有一目了然的感觉才达到我们的目的,不要担心版面不够,因为整个地图版面存在的理由就在于此(如果没有起到它应起的作用,还不如不要呢)。

九.使用模版

很多刚开始做网站的朋友往往在收集了大量的素材后,立即投入制作,生成了绝大部分成品网页,但由于经验不足或其他什么原因,做完了才发现问题,只好一个个网页的修改,结果浪费了巨大的精力。所以笔者建议:在完成了所有的构思以后,先要做一个模版网页,在这个网页里包括了所有网页的公共元素(比如LOO、导航栏、更新时间、推荐栏目、外接的CSS样式表的链接、加入收藏夹、返回首页、站点地图、E-mail地址、滚动的状态栏、广告条、版权信息等等),之后只要复制多份,填入不同的内容就相对轻松多了。

建议:如果页面太多而没有给每个网页写TITLE的话,FrontPage2000就会自动给每个网页加上按“new page 1”、“new page 2”的顺序排列的TITLE,很不美观和规范,或是使人产生“站长是个懒鬼”的想法。所以,在制作模版的时候,就可以在TITLE里加上一句无论放在哪个页面里都合适的欢迎词(比如“欢迎您的光临!”之类)。这样一来,网页才不会让人当成“半成品”来看待。^_^

十.少用JAVA

虽然使用JAVA可以做出许多精彩的网页特效,但由于现在JAVA程序的处理速度实在让人不敢恭维,往往是等上老半天还看不到网页的内容,更有甚者,在漫长的等待后,浏览器提示APPLET不能启动。过分追求技巧和特效,结果却适得其反,把最重要的内容给拉下了,这种做法显然是不可取的。

十一.控制图片的大小

除了文字说明,图片就是我们网页上最重要的内容了。许多漂亮的字体,浏览器可能并不支持,所以要用图片的方式来显示;单纯的文字网页信息量巨大,浏览者很难快速地了解网页想要表达的内容,但通过图片就能比较形象地把意思传达给浏览者了。此外统一风格(每个网页使用相同的LOGO)、美化网页(用色彩鲜艳的花边修饰网页边框、分隔大段的文本)、烘托气氛等作用也是文字说明无法做到的,特别是GIF089a格式保存的图片,不但可以制造动画效果、活泼网页的气氛,还能够在显示较大的图片时逐渐的显示,先显示分辨率比较低的图片,让浏览者有个初步了解,知道自己等待的是什么?究竟有没有必要再等待?这对于速度相对较慢的中国互联网来说是一件天大的好事。

一般来说,一张网页上的图片总体积不应该超过50KB,这样光图片的下载将花去浏览者近10秒的时间(按使用56K的MODEM计算,不过56K的MODEM在中国已经是标准配置了),而即使加上文字也多不了多少时间,对于习惯了慢如蚂蚁的网络的用户是可以接受的。因此,可以说图片是造成网页下载速度过慢的“罪魁祸首”。所以,必须在美观和速度之间做出选择,两者都要兼顾,大家自己平衡吧^_^

十二.选择使用框架

框架(FRAME)也叫帧页,是现在制作网页是较为常用的一种技术。该技术可以把浏览器窗口划分为几个小窗口,每一个窗口都显示一个网页的内容,并分别设置大小、有无滚动条等信息。这样就方便了设计网站的结构,可以在上方的框架里放置网站的LOGO,在左面的框架里显示导航栏,而在下方的框架里安置版权信息。当然这只是一个比较公式化的设计,每个人可以根据自己的实际需要和创意来做安排。而且浏览时,可以指定链接的网页在哪个框架里显示,从而避免了网页上相同内容的重复下载,而这些内容往往是LOGO、BANNER等体积较大,需要很长下载时间的图片。这对于提高网页显示速度和网络传输效率方面都有着积极的意义。

尽管这是种方便网站设计者的技术,但对于浏览者来说就不一定了。因为框架技术是一种新兴技术,很多浏览器还不支持它,也就是是说,有一部分的浏览者并不能正常的看到你那美仑美奂的网页。所以,笔者建议:为了这些网友,尽量不要使用框架。如果实在要用,就一定要记得在框架网页的HTML代码里加上<NOFRAMES>元素,在<NOFRAMES>里可以设定当浏览器不支持框架的时候在浏览器里显示的替代内容,让没有使用最新版本的用户也可以看到网页的内容。

十三.发布更新消息

更新消息可以通过多种方式传达给浏览者,最常用的就是在主页上逐条列出最新的内容,或是专门做一个“最近更新”的网页,在网页上详细地介绍最几一次、几次更新的内容,并提供通往新内容的链接。

还有一种方法用的也比较普遍,但一般需要存放站点的服务器方面支持提交表单才行。就是浏览者通过提交表单的方式,将自己具体的联系方法送到站长指定的E-MAIL、CGI、文本文件等目的地,然后再由站长定期或在更新后,向这些地址发送网站最近更新的消息,让浏览者知道是否真的有自己感兴趣的内容,是否值得花费时间和金钱去浏览你的网站。既方便了浏览者,又显得站长很专业、很尽责。

十四.坚持经常更新

更新包括两方面的内容:

首先是内容,即使是内容丰富多彩的站点,也需要经常更新。因为浏览者不可能喜欢你网站所有的内容,大多数网友只喜欢其中的一小部分,而且也只浏览这一小部分,所以你要经常把新的内容加进去,来满足网友的需求。当然有会有例外,一些专门提供下载服务的站点相对而言就不是特别需要经常的更新了,因为供网友下载的大多是流行音乐的MP3、游戏DEMO、商业软件的BETA等体积很大的文件,网友光是下载这些文件就要花上很长很长的时间。记得有一次,笔者找到一个很大的MP3下载站点,一下子往网络蚂蚁里加入了近80首MP3,之后的一个月笔者就再也没去过那个站点,直到所有的MP3下载完毕为止。但如果你做的不是这样的下载站点的话(一般的个人主页也不太可能提供大量的下载,毕竟上传也要花很多人民币~~),就必须要经常更新了。

其次是维护,也可以说是对网站结构、美工方面的更新。没人会喜欢老是看到相同的页面,而且还可能是不怎么漂亮的页面。时间久了,内容多了,也会需要对站点的结构、导航做些调整的。

建议:如果真的是很忙,没时间天天更新,希望能在主页上留一个“站长自述”的版块,没天抽出一小会儿,为浏览者写几句话,甚至可以写自己的生活日记。浏览者就会觉得站长和自己距离很近,是个很亲切友好的人。

十五.注意文件名的长度

一般来说,我们使用的Windows98、ME、2000、NT和Linux等操作系统均支持长文件名、大写的和中文文件名,但大多数提供免费主页的服务器都不支持长文件名大写的和中文文件名。也就是说,如果使用了服务器不支持的文件名格式,会造成你辛苦做成的网页成为“死页”,别人将无法访问这些网页,即使是你自己也不能浏览,当然你还是可以对之行使服务开放给你的FTP权利(包括改名、删除等)。

另外需要注意的是,很多服务器对于主页的命名都有特别的要求,最常见的是index.htm,其他还可能有index.html、default.htm、default.html、welcome.htm、welcome.html等。如果服务器向用户开放CGI、ASP和PHP的权限的话,还会有以asp和php3等结尾的网页名出现。

所以在不太清楚服务器情况的时候,为了避免出现无法访问的网页,最好还是使用在DOS下通用的8。3命名规则较为保险。

十六.广告代码

面对中国目前不匪的上网费用,大多数的网友不是缩衣节食,就是尽力克制自己上网的冲动。但随着上网时间的增加,接触到的新事物也在不断增加,忽然有朋友发现上网也能挣些美元(不管最后是不是真的到手,但这确实是个能缓解上网费用过高的办法)。就是在自己的主页上加一段广告代码,只要访客能适时地点击广告,一个月下来,就能为站长带来那么几个美元补贴上网费,不过可能要过好几个月才能收到支票。

但需要注意的是,有些朋友为了多赚些美元,就自己拼命点击广告条,但他们不知道在极短的时间里有太大的点击率、这些点击全出自同一个IP地址,又或是你的广告条放的位置不符合广告商的要求的话,你就将收不到支票,并且会被广告公司加入黑名单。结果自然是“赔了夫人又折兵”,既赚不到美元,又花了自己的时间和精力(点击广告时花费的)。

即使靠广告条能增加收入,但也要考虑到由于大家都和你有相同的想法,所以在Internet上早就是广告满天飞了,现在的网友可是一看到广告就反感,接着是连看也不看你的网站里有些什么内容就键入别的地址了。因此很可能发生的是,放了广告代码后,非但没收到美元,反而连自己的访客也给吓走了,有句老话就是形容这种情况的:“偷鸡不成蚀把米”^_^

可是,就算不放置为自己谋福利的广告条,但提供主页空间给你的那个网站的那个广告你还是得放在主页上的,不然的话,很可能会不经通知就删除你的主页空间哦! 了解了以上几个方面后,再来将一些实用技巧。

十七. 实用技巧篇

1.特色ICO

每次看到好的网页总想把它保存在收藏夹里方便以后再去,但时间一久,太多的链接就让人眼花缭乱了,没办法,删!你不想让自己的网页也遭到这样的命运吧?

具体方法:

先打开网页的HTML源文件,在和之间找个空的地方点一下鼠标,(千万别点在<>里),输入:

保存退出。其中“logo.ico”替换成你自己的ICO图标文件的路径。最后记得把网页和ICO图标文件都上传到网上就行了,不过ICO的路径不要变。

这样一来,当别人把你的网页保存到收藏夹的时候看到的不再是千篇一律的HTML文件的图标了,怎么样,很跳吧?^_^

2.设为主页

在网页显眼的地方加上“设为主页”的链接一定会增加被设为主页的机会,毕竟在IE菜单栏上操作太麻烦了,而现在只需要点击一下鼠标。

具体方法:

在网页HTML源文件的和之间的空白处点击鼠标,输入:

设为主页

保存退出。其中的“http://www.webjx.com”替换成你自己的主页;“设为主页”替换成你想要的文字说明或是图片链接。 如果想更霸道些,就把“onclick”改成“onmouseover”试试,不过可能会引起访客的反感哦!自己衡量利弊吧^_^

3.加入收藏夹

原理和设为主页差不多。 具体方法: 在网页HTML源文件的和之间的空白处点击鼠标,输入:

加到收藏夹

保存退出。其中的“http://www.webjx.com”替换成你自己的主页;“这是加到收藏夹实例”替换成你想要的文字说明(在收藏夹里显示的说明);“加到收藏夹”替换成你想要的文字说明或是图片链接。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有