分类文档:Arsue风格设计教程 5篇

风格设计教程(5):侧导航栏设计
2012年07月05日 16:14

在读本文之前,请确保您已经通读了《风格设计教程(3):整体风格设计必读》。本文与前几篇的《风格设计教程》系列有所不同的是,本文需要使用本机修改、在线修改这2种方式相结合。

首先,侧导航栏的宽度,可以参考《风格设计教程(2):如何改变Arsue Blog的宽度》。默认的宽度为:Blog正文区域670像素,侧导航栏280像素。它的值在/t/css.php中设定,还有一组值可以参考:750+200,也就是Blog正文区域750像素,侧导航栏200像素。左右两栏位置互换,请参考《风格设计教程(1):左右两栏位置互换》。改变宽度,需要在本机调试,然后再上传到服务器,因为调试需要花很多的时间。

在线更新的部分。请打开Blog管理后台,找到“参数设置”。首页和内页的最新的评论、Blog存档,内页的近期的主题,首页的博客统计、友情链接,这些部分默认都是开启的,都可以分别在“参数设置”中将这些部分去掉。其中,去掉/开启的方法以及它们的参数设置请见:

  1. 首页和内页:最新的评论Blog存档
  2. 内页:近期的主题
  3. 首页:博客统计友情链接

首页侧导航栏的include包含文件是/e/t/r.php,内页侧导航栏的include包含文件是/t/r.php。请注意:这2个文件通常是不能直接手动修改的,因为这2个文件是由程序动态生成,当您修改这2个文件之后,这2个文件可能随时会被覆盖,导致您的修改丢失。只有当最新的评论、Blog存档,内页的近期的主题,首页的博客统计、友情链接这5部分全部关闭时,才可以直接修改/e/t/r.php和/t/r.php,当这5部分全部关闭时,相当于侧导航栏变为全手动更新。

如果侧导航栏采用200像素的宽度,则必须把Blog存档首页的友情链接分别设置为1栏,默认为2栏。这是因为侧导航栏的宽度变窄后,原来的2栏放不下了。

在线更新的部分。侧导航栏的上端、下端、分类和标签的添加方法:请打开Blog管理后台的首页,找到“编辑相关网页文件”,可以看到这4部分:侧导航栏的上端、内页侧导航栏的下端、首页侧导航栏的下端、侧导航栏的分类和标签,如下图:

其中,侧导航栏的上端,对首页和内页均起作用。导航栏的下端,首页和内页的内容不一样,需要单独编辑。侧导航栏的分类和标签的链接的修改,请见这篇

在线修改完毕之后,将服务器上的文件打成压缩包,下载到本机做备份。

固定链接 | 发表评论(0) | Trackback(0)

风格设计教程(4):上下导航栏设计
2012年06月27日 10:17

在读本文之前,请确保您已经通读了《风格设计教程(3):整体风格设计必读》,里面有“代码出现次数检测”工具的使用方法,以及本机配置环境的方法。

上下导航栏的修改,对整体风格有着很大的决定性的作用。也就是说,所有网站的整体结构,都是大同小异的,只要对上下导航栏进行设计,网站的风格就会有翻天覆地的变化。可见,上下导航栏的设计有着很重要的作用。Arsue网页的上导航栏的文件位于/t/s.php,下导航栏的文件位于/t/h.php。

先把s.php复制一遍,用来做备份。然后使用EmEditor打开s.php,并且先将EmEditor的默认打开编码设置为UTF-8。其中,s.php的第一句:ob_start('ob_gzhandler');表示所有网页启用GZIP,error_reporting(0);表示所有网页关闭报错。在EmEditor中按Ctrl+F,查找“div”这3个字符,这时,所有的“div”字符都会变成高亮。

如何删除原有的一组<div>和</div>?在HTML代码中,每个<div>元素,必须有一个对应的</div>元素,使其闭合,否则网页的结构可能就会变乱,您也可以在网上搜索div元素的教程。<div>和</div>之间,可以嵌入一个或者多个元素,例如<div><div></div></div>。每一个</div>元素,都是与它前面最邻近的一个<div>相关联,是对称排列的。所以删除<div>元素时,要删除与之相关联的</div>元素。例如下图,连线部分,即表示相对应的每组<div>和</div>:

上图是s.php中的一些div元素的示意图,要特别注意的是,在默认的Arsue程序中,s.php和h.php等被包含的文件中,有一些<div>和</div>元素的数量不相等,但是整个网页的<div>和</div>数量是相等的,所以s.php和h.php等文件中的<div>和</div>标签,不能单独删除其中的一个。也就是说,当删除一个<div>时,必须删除与它相对称的</div>,否则,网页结构会变乱。

了解每个<div>和</div>的作用,是读懂HTML代码的必要步骤。如何了解每个<div>和</div>的作用?使用IE浏览器打开任意的一个网页(因为大多数的网页中均包含s.php和h.php),然后“查看源文件”,同样,使用EmEditor的查找功能,查找“div”,使所有的“div”字符变成高亮。然后依次删除<div>,以及和它相对应的</div>,直到整个网页的所有<div>和</div>都被删除。通过删除<div>和</div>的方法,可以逐渐看清楚每个<div>和</div>的作用。如果一遍看不清楚,通常反复2-3遍,就可以完全读懂这个网页的HTML代码了。

当您熟悉或熟练了<div>和</div>的使用方法,就可以自由删除或者增加<div>和</div>元素了,就可以自由地编辑s.php和h.php了。请打开/t/css.php,可以看到CSS的定义,本文涉及到的一些样式表从/t/css.php中摘录如下:

#nd{float:left}
#nd{text-align:left;word-wrap:break-word}
#nd{width:950}

#fe{float:left}
#fr{float:right}

<div id=nd></div>,这一组元素在Arsue网页中代表的含义是创建一个950像素的通栏。网页默认的宽度也是950像素,这个通栏与网页宽度相等,也就是说这个通栏是一栏的。<div id=fe>,表示这个div元素不回行,这就是DIV+CSS的基本原理,也是最重要的用法。2栏的内容,可以使用这样的方式:

<div style="float:left"></div>
<div style="float:left"></div>

上述代码可以产生table元素的2个单元格的效果。由于#fe的定义为#fe{float:left},这里我们就可以简化为<div id=fe></div><div id=fe></div>。在所有网页中,当需要2栏、3栏、4栏的部分,都可以用这个方法产生多栏的效果。为什么要用DIV产生多栏,而不用table?因为在IE浏览器里,DIV里的内容,是一边下载一边显示,table的内容需要下载完毕之后才能显示,所以使用DIV可以让人感觉到显示的速度更快。

使用div产生多栏效果,与table还有一点不同的是,这之个</div>之后的内容不会回行,</table>之后的内容则会回行。解决的方法有2种:1.给这些多栏的div元素设定宽度,多栏的宽度加起来,正好要等于它所在的外层单元格的宽度;2.或者在这些多栏的div后面,建立一个通栏,这个通栏的宽度正好要等于它所在的外层单元格的宽度。

在上面的代码中,#fe{float:left}表示使一个元素左对齐,#fr{float:right}表示使一个元素右对齐。在Arsue程序的所有文件中,<??>,?号里的内容,是PHP程序部分。?号之外的内容,全部是HTML部分。在HTML部分,超链接经常会有<a href=/……>这样的形式,连接图片也有<img src=/……>这样的形式。等号后面的第一个/,表示根目录。由于Arsue是在本机的虚拟主机下开发和调试的,所以等号后面的第一个/,使用起来很方便,也可以被各搜索引擎正常收录。

如何在网页中连接图片?请在网上搜索img元素的教程。HTML代码是<img src=/g/abc.gif>,或者<img src=http://www.aaa.com/def/abc.jpg>这样的形式,由于Linux主机区分英文大小写,文件夹或者文件名最好请使用英文小写。这些图片请通过FTP上传至您的网站空间,最好要使图片的主站分开,以方便网站的长远发展,这样也可以使您的博客浏览速度更快,图片可以启用一个二级域名,例如img.abc.com。

每一次增加或者删除div元素,都要用“代码出现次数检测”工具来检测<div>和</div>的数量,必须确保整个网页的<div>和</div>的数量相等。请注意,这里并不是要使s.php或h.php中的这2个元素相等,而可以打开任意的一个网页(因为大多数的网页中均包含s.php和h.php),例如博客首页,要用IE访问博客首页,而不要用EmEditor打开程序文件。

h.php文件的修改方法,与s.php完全同理。

固定链接 | 发表评论(0) | Trackback(0)

风格设计教程(3):整体风格设计必读
2012年06月27日 09:21

Arsue Blog程序的结构,前台是DIV+CSS结构,每个页面是由上端导航栏、主体部分(正文部分)、侧导航栏、下端导航栏这4部分组成。由于结构比较清晰简洁,所以易于修改为您自己喜欢的风格。《风格设计教程》系列的文章,并不太多,所以在您做修改之前,最好先通读《风格设计教程》系列的所有文章,因为有很多的重要步骤是分布在多篇文章中,而没有重复,地址是http://blog.cn.arsue.com/category/style/。风格设计需要花费相当多的时间,所以最好在您有灵感的时候再做设计,平时多更新Blog的文字内容会更有益处。

由于“代码出现次数检测”工具在昨天开始上线,所以从现在开始正式深入编写风格设计的教程。“代码出现次数检测”这个工具十分重要,它的作用主要是用来检测网页中<div>和</div>的数量,这2个标签的数量必须相等。如果没有这个工具,就需要一个一个地去数网页中有多少个<div>和</div>;有了“代码出现次数检测”工具,可以节省您大量的时间。如何使用?当需要检测<div>和</div>的数量时,必须用IE浏览器打开网页(每次有修改之后要按F5刷新一次),在网页空白处点击鼠标右键→“查看源文件”,然后把整页的HTML代码复制到“代码出现次数检测”工具中,直接点击“开始检测”即可。代码出现次数检测工具的地址是:http://tool.cn.arsue.com/count/

在做风格设计时,由于有大量的修改,必须在本机做调试,网页要随时做备份(备份的方法是把网页文件复制一遍),然后再通过FTP上传。本机调试的环境是“Apache+PHP+虚拟主机”,开发软件是文本工具EmEditor,请严格按照这篇来配置http://blog.cn.arsue.com/petal/3,并且必须将EmEditor的默认打开编码设置为UTF-8。使用IE浏览器进行预览,按F5刷新可以看到修改后的效果。

Arsue程序的代码,是高度精简的。要做修改,最快的学习方法就是充分利用原有的代码,了解这些代码的含义,然后稍做修改就完成了。HTML和CSS,一共至少需要4个月~半年的时间,才可以熟练掌握,所以风格的设计是需要一定时间的。

能否使用FrontPage和Dreamweaver等可视化网页编辑软件来编辑Arsue的网页?不可以的。因为这些网页程序无法在这些软件中运行,必须在Apache+PHP+本机的虚拟主机+浏览器中运行。对于网页的初学者,可以在FrontPage和Dreamweaver等软件中练习HTML代码的编写,然后将代码复制到Arsue的网页中。对于非初学者,直接手写代码是最好的。

下列这些文章,是各部分的修改教程,正在更新中:
风格设计教程(4):上下导航栏设计
风格设计教程(5):侧导航栏设计

固定链接 | 发表评论(0) | Trackback(0)

风格设计教程(2):如何改变Arsue Blog的宽度
2012年06月13日 07:23

Arsue Blog标准版在发布时,使用的固定宽度,是经过精心设计的,网页总宽度为950像素,Blog正文区域的宽度是670像素,侧导航栏的宽度是280像素。当然,您可以改变这些值,来改变Blog的宽度。在此,需要对Arsue Blog的CSS作一下说明,您就可以改变这些值了。

本文只需要更改/t/css.php这个文件,由于改动较大,首先请在本机做调试,并且随时做备份,然后再通过FTP上传,本机调试的环境和开发软件请严格按照这篇来配置http://blog.cn.arsue.com/petal/3。css.php的页面过期缓存时间为1小时,修改完毕之后需要按F5刷新或者清空IE缓存,可以立即生效。

修改时,请用EmEditor软件,同时必须按照这一篇的最后一段对EmEditor软件进行设置:http://blog.cn.arsue.com/petal/3。然后,使用IE浏览器进行预览,请按F5刷新。

打开css.php,请找到这一行:

#el,#nd{width:950}#n1{width:670}#n2{width:280}#nr{width:135}

说明如下:

  1. #el,#nd这里,是页面的总宽度。
  2. #n1是Blog正文区域的宽度,#n2是侧导航栏的宽度。#n1和#n2相加的和,必须等于#nd的值,例如默认的670+280=950。
  3. #nr的值,是用于侧导航栏分2栏时,每栏的宽度,例如友情链接、Blog存档这里。需要注意的是,侧导航栏的宽度默认为280像素,在《风格设计教程(1)》一文中提到的#ne的值,设置侧导航栏的右边距为10像素,所以#nr的值最大只能是(280-10)/2=135,如果超过这个值,页面就会出现侧导航栏跑到网页下方的情况。可以是135,或者小于135。

css.php中#na和#ne的值,在《风格设计教程(1)》中有提到,它们默认的值如下:

#na{padding:0 15 0 10}#ne{padding:0 10 0 0}

#na{padding:0 15 0 10}表示Blog正文区域的右边距是15像素,左边距是10像素;#ne{padding:0 10 0 0}表示侧导航栏的右边距是10像素。这2个值是比较合理的,通常无需更改。

固定链接 | 发表评论(0) | Trackback(0)

风格设计教程(1):左右两栏位置互换
2012年06月12日 17:43

从现在开始写Arsue Blog的风格设计教程,之所以现在才开始写,是因为之前写的35篇Blog的内容是更重要的,希望大家耐心等候这个博客的更新;也请大家开始关注这些教程里对CSS(样式表)的说明,如果您之前没有CSS的基础,通过这些教程也能够学习到一些CSS的知识。

Arsue Blog标准版发布的时候,默认的风格是左右两栏,如下图:

本文要实现左右两栏位置互换,需要更改/t/css.php的文件,首先最好在本机做调试,并且随时做备份,然后再通过FTP上传,本机调试的环境和开发软件请严格按照这篇来配置http://blog.cn.arsue.com/petal/3。css.php的页面过期缓存时间为1小时,修改完毕之后需要按F5刷新或者清空IE缓存,可以立即生效。在css.php可以找到这一行:

#n1,#n2{float:left}#na{padding:0 15 0 10}#ne{padding:0 10 0 0}

说明:#n1对应的区域是如上图中Blog正文的部分,#n2对应的区域是右侧的导航栏,float:left是DIV+CSS中最常用的语句,作用是使div元素不回行;#na对应的区域是#n1内的一个最外层的div,这里的padding对应的四个值的顺序分别是:上右下左(可参考样式表手册中的padding),例如padding:0 15 0 10的含义是上边距0像素,左边距15像素,下边距0像素,左边距10像素;#ne对应的区域是右侧导航栏内的一个最外层的div,使右侧导航栏的右边距为10像素。

了解了上述的#n1,#n2,#na,#ne的作用,就可以改变它们的值。将上述那行删除,改为:

#n1,#n2{float:right}#na{padding:0 10 0 15}#ne{padding:0 0 0 10}

这样就可以使网页的左右两栏位置互换,如下图:

固定链接 | 发表评论(0) | Trackback(0)

程序简介:Arsue是一个快速、超低负载、易于安装和备份的博客程序,可快速地运行在低价的虚拟主机,PHP+NoSQL构架,核心程序5K以内,主程序20K以内,全动态页面,国内外大多数的Linux+Apache+PHP的主机均可运行。获得此程序,可以在这里预定

最新的评论:
Arsue教程(4):如何关闭/开启评论
Arsue教程(3):Arsue Blog程序如何第一次安装
Arsue教程(20):参数设置 - 两次发帖的时间间隔
Arsue教程(13):参数设置 - 按月存档管理
Arsue教程(7):如何更改Blog文档的路径
Arsue教程(19):如何添加友情链接
Arsue教程(31):如何在一个分类/标签下添加一篇文章
Arsue教程(25):“在线升级”使用说明(图解)
Arsue教程(30):文章分类和标签
Arsue教程(29):最新评论审核平台

分类:
Arsue教程 | Arsue的属性 | 程序艺术谈
风格设计教程 | Arsue程序更新

Blog存档:

Copyright © 2012 arsue.com 版权所有。Arsue是一个基于PHP+NoSQL构架的快速、超低负载的Blog程序,它可以节省您每年50%以上的服务器费用。