个人博客网站完整设计

《个人博客网站完整设计》由会员分享，可在线阅读，更多相关《个人博客网站完整设计（22页珍藏版）》请在装配图网上搜索。

1、个人博客网站完整设计个人博客是博客们个人思想、情感、心得、见闻的收藏和展览室，是摆放个人资料的网络硬盘，是个人进入网络的入门处，也是世人了解个人博客主人的窗口。因此，个人博客网站的设计应能实现个人博客的上述功能。那么，应怎样设计个人博客网站呢？一、构建三大网页：1、首页。这是个人博客网的门户。2、栏目分类网页。个人的思想、情感、见闻等是多方面的，这就有必要对日志进行分类。否则，就会杂乱无章。3、单篇日志网页。这是日志内容放置之所。二、设置首页。首页设计的原则应是：简而全。很多人在设计首页时，搞得花里胡哨。这种页面看是好看，功能也很齐全，但他人进入其网站如堕入乱花丛中，分不清东南西北。笔者认为，

2、首页的设计既要功能齐全，又要给人清爽、条理的感觉。要做到这一点，在设计首页时，“简”字要随时放在心上，切忌“繁”“花”字当心。首页的板块应由三大块组成：1、头部板块。这一板块由两部分构成，其一是博客介绍。有了介绍，他人一进入网站，便知你的博客的大致内容，以便决定是否继续浏览。人们常说：时间就是金钱。对于现代人来说，时间非常宝贵，没有多少人愿意花很多时间、精力去做无益的事。因此，你有必要把自己博客的内容、特色简要展示给读者，以便留住需要这类信息的人并让其驻足下来详细浏览你的博客。其二是导航部分。这一板块特别重要。当读者进入你的网站，必然要根据自己的需要选取阅读信息。如果没有导航栏，那么，当读者进

3、入你的网站，就难以迅速地获取他所需要的信息，因而也就不会有耐心继续停留。我的个人博客导航栏设计如下：（1）css部分：/*=首页导航条样式=*/div#dhlfont-family: Arial,Helvetica,sans-serif;font-size:9pt;width: 764px;color: #ffffff;height: 22px;margin: 0px auto 0px auto;padding:0px ;text-align: center;background-image: url (line-height: 20px;position: relative;left:-21

4、8px;top:-1858px;border:1px solid #009966;a.dhllymargin: 0px 3px 0px 3px;padding: 0px ;font-family: Arial, Helvetica, sans-serif;font-size: 10pt;color: #FFFFFF;line-height: 18px;text-align: center;text-decoration: none;a.dhlly:visitedmargin: 0px 3px 0px 3px;font-size: 10pt;list-style-type: none;color

5、: #FFFFFF;text-decoration: none;a.dhlly:hover margin: 0px 3px 0px 3px;font-size: 10pt;color: #FFFFFF;text-decoration: none;（2）htm代码：| a class=dhlly href= | a class=dhlly href= | a class=dhlly href= | a class=dhlly href= | a class=dhlly href= | a class=dhlly href= | a class=dhlly href= | a class=dhll

6、y href= | a class=dhlly href= | a class=dhlly href= | a class=dhlly href=2、功能板块。（1）日期显示。有些人由于各种原因，连日子也记不清了。如果设置有日期显示，那么一进入网页，就可以知道今天是几月几日星期几。如果需要农历的人，可以一并设置农历显示。（2）登录入口。方便自己也方便他人登录。（3）留言、评论栏和友情链接。方便与他人交流。（4）Email入口。现代人，已经离不开Email,设置这一入口，既方便自己也方便他人进入个人邮箱。我的邮箱设置代码为： 请选择你的邮箱 网易50M 帐 号:密码:（5）链接网站。要使自己的博

7、客成为网络的入口处，这一设置不能缺少。（6）背景音乐。很多人喜欢一边上网，一边欣赏音乐。在设置背景音乐时，一定要能控制播放、控制曲子列表。不同的人喜欢的曲子也不一样，况且有些人自己正在播放自己喜欢的曲子。如果不能控制播放，音乐就成了混放的局面，因而也就成了一种噪音，就会干扰他人的雅兴。为什么又要能控制曲子列表呢？因为人们对音乐的喜好是不同的。如果不能控制曲子列表，那么，你就得强迫自己或他人听不喜欢的曲子。我的音乐播放器代码：(A)js部分：mymusic1.js代码： /曲名及地址/mid = new Array();mid0=;mid1=音乐地址;mid2=音乐地址;mid3=音乐地址;mi

8、d4=音乐地址;mid5=音乐地址;mid6=音乐地址;mid7=音乐地址;mid8=音乐地址;title = new Array();title0=.停止播放;title1=望江南;title2=别怕我伤心;title3=笑傲江湖;title4=黄昏;title5=姑苏行;title6=不得不爱;title7=阳关三叠;title8=沧海一声笑;/打开网页时检察曲名/function cmid() var ind = midi.select.optionsmidi.select.selectedIndex.value ;midiselect.innerHTML = ; song.innerH

9、TML =曲名:+ titleind +; mymusic2.js代码： index=Math.floor(Math.random() * mid.length); document.write();document.write(曲名:+ titleindex +); mymusic3.js代码： var j;for(j=0; jmid.length; j+)var k = j+1;document.write( +k+.+titlej+);为了减少htm代码、方便更换曲子列表，笔者把这三个js文件通过“文件上传”功能在后台上传。（B）htm代码： *背景音乐选择或停止播放* 2、日志板块。各

10、大博客网默认的日志显示方式是按日期先后显示。这种日志显示方式有三大缺点：（1）不便于浏览。由于没有分类，各类日志混杂在一起，不便于选择性地阅读信息。（2）信息容量小。（3）不美观，也不适合人们已经习惯了的分类阅览方式。博客网（）开放css代码和htm代码，因此，博客能根据自己的需要和爱好，自己设置个性化的日志显示方式。这是很多博客甘愿忍受博客网当前存在的各种问题的困扰，也不弃之而去的关键性原因。日志分类显示，则克服了日期显示方式的缺陷，正因为如此，很多博客虽然屡经分栏失败，仍不放弃。现在博客网流行的日志分栏代码，不知是什么原因，很多个人博客尽管是原版克隆但就是很难成功。笔者也同样遭遇这一问题。

11、好几个月前，我是步邻居、DOB之后首批用当前流行的分栏日志自动显示的，但自博客网加入了博客搜索之类的东东后，就再也无法用了。不知是什么原因，无论如何修改代码，硬是不行。因此，只好另辟捷径。我的首页日志分栏代码如下：(A)首页css部分： /*=自定义日志样式=*/*=日志分栏样式=*/.rzlmfloat:left;width:272px;height:350px;overflow: hidden;margin: 0px;padding:0px;border-left:1px solid #94A6BD;border-right:1px solid #94A6BD;/*=日志标题样式=*/.r

12、zbtfont-family: Arial,Helvetica,sans-serif;font-size: 9pt;height:20px;color:#FF0000;border:1px solid #009966; margin: 0px;padding:2px 0px 0px 5px;filter:progid:DXImageTransform.Microsoft.gradient (startColorStr:#9acd32,EndColorStr :#ffffff00,GradientType:1); .myimgfloat:right;height:7px;width:38px;b

13、order:0;padding: 6px 5px 0px 0px;/*=日志内容样式=*/#myulwidth: 271px; height:250px; overflow: hidden; text-align: left; margin:0px; padding: 0; white-space: nowrap;.myli list-style-type: none;margin-left: 3px;padding:5px 0px 0px 20px;line-height: 22px;background: url( no-repeat 2px 10px; text-align: left;

14、 white-space: nowrap;li spandisplay:none; (B)htm代码（用于分栏的日志代码）： 金融经济人文思索基础理论政经要闻产业经济网文摘录区域经济音图欣赏 (C)JS代码：金融经济栏目js代码：document.write(a href= 医治股市痼疾刻不容缓); document.write(a href= 作者：青叶 2005-10-06 10:52:12); document.write(a href= 作者：青叶 2005-10-04 13:37:51); document.write(a href= 2005-08-19 10:08:21); do

15、cument.write(a href= 作者：青叶 2005-08-16 21:08:52); document.write(a href= 作者：龙润寰 2005-08-02 21:39:05); document.write(a href= 作者：青叶 2005-07-23 08:25:53); document.write(a href= 作者：龙润寰 2005-05-22 23:31:10); document.write(a href= 作者：龙润寰 2005-05-18 00:20:21); document.write(a href= 作者：龙润寰 2005-04-04 21:

16、29:44); document.write(a href= 作者：龙润寰 2005-04-04 21:20:43); document.write(a href= 作者：龙润寰 2005-04-02 09:26:48);二、设置栏目分类网页。博客网默认的索引页是按年度将全部日志显示在一页。这一索引网页，有两个不便之处：1、没有栏目导航，要查找某栏目日志需要往下拉网页。2、按年度分类全部显示，那么，要查找同类日志需要在各年度寻找。我的索引页是按日志类别分年显示。笔者自认为这种索引页的特点是：直观、清楚。我的索引页是通过日志方式实现的，其代码如下：1、导航栏：（1）css代码：（加在单篇日志cs

17、s里）/*=导航条样式=*/div#dhtfont-family: Arial,Helvetica,sans-serif;font-size:9pt;color: #ffffff;width:765px; height: 25px;margin: 0px ;padding:0px 5px 0px 5px;text-align: center;background-image: url(./inc/bttp.JPG);line-height: 20px;position: relative;left:2px;top:-101px;border:1px solid #009966;a.dhtlym

18、argin: 0px 2px 0px 3px;padding: 0px ;font-family: Arial, Helvetica, sans-serif;font-size: 10pt;color: #FFFFFF;line-height: 18px;text-align: center;text-decoration: none;a.dhtly:visitedmargin: 0px 2px 0px 3px;font-size: 10pt;list-style-type: none;color: #FFFFFF;text-decoration: none;a.dhtly:hover mar

19、gin: 0px 2px 0px 3px;font-size: 10pt;color: #FFFFFF;text-decoration: none;（2）用于索引页的日志导航条htm代码：| a class=dhtly href= | 基础理论 | 产业经济 | 金融经济 | 区域经济 | 发展经济 | 人文思索 | 政经要闻 | 网文摘录 | 电脑技巧 | 音图欣赏 | 2、索引页内容代码（写在导航条代码之下）：这里的js就是首页日志部分的js文件。三、单篇日志网页： 默认的单篇日志是没有导航栏的，或者说导航是不全的，因而不便于读者进入其它栏目阅读信息。因此，有必要自己动手重新设计导航条。单篇日志的导航条与前述索引页导航条相同。在写日志内容时，把导航条代码加在前面即可。url=绿野经济:用哲学思维观察社会，以草根眼光点评世界/url