风格设计教程(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)

Arsue教程(37):侧导航栏中分类和标签的链接修改

2012年07月05日 15:19

侧导航栏中分类和标签的链接,如下图:

如何修改这些链接?请打开Blog管理后台的首页,找到“编辑相关网页文件→侧导航栏的分类和标签”,如下图画红圈的部分:

网页编辑器中的内容:

在网页编辑器中,可以看到<p id=i>这句代码。它在Arsue程序的CSS文件中的定义是#i{margin:9 0 0},代表上边距9像素。超链接href=/,等号后面的/,表示网站的根目录。如果想增加分类的链接,可以在原有的代码再增加一段代码,如这样的形式:

<p id=i><b>标签:</b><br><a href=/tag/标签/>标签</a>

如果将上述这个“网页编辑器”中的代码全部删除,则侧导航栏的分类和标签的链接的这个区域,会消失。

固定链接 | 发表评论(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)

代码出现次数检测工具使用示例

2012年06月26日 15:46

Arsue推出的网页工具中,有“代码出现次数检测”工具,地址是:http://tool.cn.arsue.com/count/

使用方法:直接在“请输入整页或整段的PHP程序、或者HTML代码”下方输入网页的HTML代码,就可以检测{和},<div和</div出现的次数。其中,{和}出现的次数必须相等,<div和</div出现的次数也必须相等。示例,如下图:

检测的结果如下图:

也可以在“要检测的代码”输入指定的代码。

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

Arsue Blog程序第8期在线升级已推出

2012年06月24日 14:33

第8期的在线升级,更新了1个程序文件。本期主要是修正管理后台的登录程序,新的程序改为连接输错5次密码,将无法登录,需要等到15分钟之后才能登录;并且,通过站外的表单域,将无法登录,可减少被攻击的机率。

为了提高安全级别,Blog的管理后台的地址绝对不能公开,一旦泄露,就要马上更改Blog管理后台的地址和密码。更改Blog管理后台的地址的方法是:连接FTP,直接给管理后台的文件夹改名即可。修改密码的方法:在Blog管理后台有一个“修改密码”的链接。

用户可以通过管理后台的“在线升级”功能,它是全自动更新的,完成后的Arsue Blog版本为1.008.T2。

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

Arsue教程(36):禁止词和封闭IP

2012年06月22日 09:07

Arsue程序具有精确的禁止词和封闭IP功能,它对Blog的留言、留言板的留言和回复均起作用。在Arsue管理后台上端导航栏有一个“禁止词和封闭IP”的链接,打开之后,如下图:

目前共包含11项功能,需要注意的是,下列所有的数据,条目之间都要用回车隔开,例如下图是IP地址和词语的正确格式的范例:

在此,简要一一作说明。

禁止词管理:

  • 留言中包含:这里有3组数据:禁止词语、高危禁止词、出现长的验证码。禁止词语,是用户的留言中包含这当中任何一个词语,都会提示禁止此关键词;高危禁止词与禁止词语的作用完全一样,所不同的是每个词语中的每个字要用[号隔开,这个[号在程序执行中会被替换删除掉,高危禁止词的作用是避免国内服务器检查人员不必要的扫描,以减少不必要的纠纷;出现长的验证码,用户的留言中包含这当中任何一个词语,验证码都会变得很长。
  • 名字中包含:名字中不能包含的字符。
  • 名字等于:会出现长的验证码(最多1020行,阻止不欢迎的用户)。

封闭IP管理:

  • IP地址等于:封闭9天(最多1020行),请写具体IP地址,非IP段,请及时清除,因为用户的IP地址是动态的,同一个IP地址在不同时段可能会被同城的其他用户获取。
  • 名字等于:封闭9天(最多1020行),封闭999天(最多1020行)。请输入不欢迎的用户的名字,下次这位用户再用这个名字留言时,会被封闭IP 9天或者999天。
  • 留言中包含:包含关键词封闭15天、包含关键词封闭999天。同样,每个关键词之间要用回车隔开。当用户的留言中包含这些关键词时,会直接被封闭IP 15天或者999天。
  • 用户网址包含:网址中包含关键词封闭15天(即用户留言时的博客地址)。

当用户被封闭IP之后,留言时会提示“数据库繁忙”,留言页面也会提示评论关闭;封闭IP,主要是在用户下次留言时起作用。

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

Arsue教程(35):如何修改分类/标签的路径

2012年06月21日 08:54

分类的路径默认为http://www.abc.com/category/name/,标签的路径默认为http://www.abc.com/tag/name/。其中,category和tag这两个值都是可以修改的,修改时必须通过管理后台修改。以分类功能为例,标签功能的操作步骤同理。在Arsue Blog管理后台上端导航栏有一个“文章分类和标签”的链接,打开之后如下图:

如上图,在“分类的路径”后面可以看到“请点击修改”,然后输入新的路径名称即可。

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

Arsue教程(34):如何删除一个分类/标签

2012年06月21日 08:39

以分类功能为例,标签功能的操作步骤同理。在Arsue Blog管理后台上端导航栏有一个“文章分类和标签”的链接,打开之后如下图:

点击“所有分类的管理”或者“查找一个分类”。在相关的分类的地方,点击“删除”。如下图:

执行此操作后,在这个分类或者标签下,已有的文章ID会被清空,但是文章不会被删除。

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

Arsue教程(33):如何添加一个标签

2012年06月21日 08:29

在Arsue Blog管理后台上端导航栏有一个“文章分类和标签”的链接,打开之后找到“标签管理”,如下图:

找到“添加一个标签”,其中,目录名可以使用中文。如下图:

如何获得新添加的标签的地址?可以点击“所有标签的管理”或者“查找一个标签”,找到“访问”的链接。

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

下一页 | 末页 (6页)

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

文章总数:57   评论总数:12
正文字数:2万字   链接被引用:2

友情链接:

 

最新的评论:
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存档:

订阅RSS

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