风格设计教程(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条评论:

发表评论:
名字: (*必填)
博客: (可省,仅限于Blog地址)
验证码: r72e24v86i17s1e81 (*必填)

正文:

    记住信息? 否   回复第

直接发送Trackback

程序简介: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%以上的服务器费用。