[转]制作LBS模板教程

最新推荐文章于 2022-01-10 11:26:52 发布

yiping2000

最新推荐文章于 2022-01-10 11:26:52 发布

阅读量1.6k

点赞数

文章标签： wrapper css dreamweaver 浏览器 float firefox

作者：shea
制作LBS模板教程 [1]
写个LBS的模板制作教程吧,不为啥,想写就写要写的漂亮~~~
本教程尽量写到详细,所以一些东西写的很罗嗦,是按照给啥也不懂的人准备的,碰到我写的罗嗦而你又知道的地方请跳过.
另外要写的东西太多了,所以打算每天写一点儿,从CSS文件的头部写起...
今天先写个头,看看有没有人看...
-----------------------------------------------------------------------------------------------------------------------
// 这个符号的说明
本文中出现的//符号,表示一段的标题.
<!—这个符号的说明-->
本文中出现的<!—XXXX -->是注释,也就是一些说明.

// 动手之前的准备工作以及工作环境

1. 不算太”笨”的人一个,不算太慢的电脑一台,并安装好IIS和LBS.

<!—
IIS是什么?
IIS全称是Internet Information Service,也就是英特网信息服务,这里可以给LBS提供在本地调试的服务器环境.

怎样安装IIS?
需要一张系统安装盘.然后打开控制面板->添加或删除程序->窗口左边的添加/删除Windows组件->Internet信息服务(IIS) ,选中就可以了,期间需要从系统安装盘中提取文件.

IIS安装完成后的设置.
打开控制面板->管理工具->Internet信息服务->左边窗口中选中那个默认网站->右键点属性->弹出的窗口中选择主目录->然后找到本地路径,把它改成你放置LBS的文件夹.打开浏览器,在地址栏输入 localhost/lbs/ 如果出现LBS的默认界面即成功,否则检查一下主目录的地址和地址栏的输入地址是否有误.
这里挺简单的,一弄就好.
-->

2. Dreamweaver(建议!虽然使用记事本都可以改,但DW中的诸多功能还是给象咱这种懒人很大的方便),图形处理软件(随便了,难到你Blog里一点儿图片都不用?),其他软件应该就没有了.

// OK,准备工作做完,我们开始一步步制作模板了.这里我们制作一个新的模板,名字就叫做NEW吧.
1. 打开图形处理软件,比如Photoshop,ImageReady之类的,在里面制作出模板的外观.这里就省略不仔细说了,下面是我们新模板的整体图片,随便做的,一笑而过.

整体图片做好以后在图形处理软件中,按照各个部分所需要的图片进行切图并保存到XXX/lbs/styles/new/images/ 里,这里也不详细描述了,自己怎么喜欢怎么来,考验个人审美能力和设计能力的时候到了!!!

2. 在Dreamweaver中新建CSS文件并保存到XXX/lbs/styles/new/ 里,命名为styles.css,这样我们就可以在LBS后台->Global Settings -> CSS Style Sheet 里输入styles/new/styles.css,选择好了我们的CSS文件,在浏览器中预览.耶?惨不忍睹!没关系,是因为你新建的CSS文件里面什么都没有设定,下面我们开始来设定Blog里的CSS.

<!—
什么是CSS?
CSS是Cascading Style Sheets（层叠样式表单）的简称,我们可以用它来控制网页的外观,而不必去修改网页的内容,是”居家旅行,杀人灭口”的必备工具.
-->

3. 开始设定CSS文件,这里你可以拷贝一份LBS自带模板的CSS文件内容,也可以参照LBS的页面结构图来自己写,这里我们就自己写了.大家可以自己上网搜索CSS手册,来查看CSS具体的应用规则和写法.其实很简单的说.

body {
background:#EEEEDC;

<!—设定背景颜色,这里可以使用图片做背景,比如写成background:url(images/body_bg.gif) #EEEEDC repeat;
url的意思是设定括号内的路径,一定要正确;后面跟着颜色的代码,是防止背景图片下载过慢或遗失或路径错误或被屏蔽时能够显示出来的颜色;repeat的意思是重复,当然你也可以repeat-x水平重复或者repeat-y垂直重复更或者no-repeat不重复,只显示一张背景图片.
-->

margin:0;
padding:0;

<!—关于margin和padding的区别,相当于英语当中的in front of和in the front of,如下图.-->

text-align:center;



}

制作LBS模板教程 [2]

看来还是有人看的,那么我们继续吧,请注意曰志标题的编号,我直接新起曰志写的,按顺序看没错.
-------------------------------------------------------------------------------------------------------------------

table, td, div {

<!—这里设定了表格table,表格单元td和div标签的CSS样式-->

font:12px Arial,Tahoma,sans-serif;

<!—这里设定了table,td和div标签里的字体和尺寸.
字体可以设置成你喜欢的字体,比如Tahoma,Vendana等,但是要注意,请设置成系统自带的字体,不然别人看到的跟你看到的会不一样,除非你在blog上单独提供字体的下载;
尺寸可以设置成px,pt,百分比等,我一般设成绝对尺寸12px,大小显示中文刚刚好.
这里的写法采用了CSS缩写,否则要分成font-size和font-family两部分来分别设置.
-->

color:#3E370B;

<!—设定在table,td和div标签里的字体颜色,如果某些地方需要单独设置怎么办?没有关系,CSS会服从最近的一级标签样式的设定.-->

}

td {
word-break:break-all;

<!—打断字体的长度,防止字体突出表格.-->

}

a:link, a:visited {

<!—这里设置全部超级链接的一般状态和访问过状态的样式.
如果有一个以上的标签样式相同,我们可以连在一起写,像这样,中间用逗号分隔开就好了.
-->

text-decoration:none;

<!—超级链接没有下划线,如果要有的话,可以赋值为underline..-->


color:#060;



}

a:hover {
text-decoration:none;
color:#393;
}

img {
border:0;

<!—设定img标签没有边框.我们看到在使用图片作为超级链接的时候,图片周围会有一圈难看的边框,这里可以设置成没有,或者改变边框的颜色/样式/宽度等-->

}

OK,到这里我们就定义完了网页全局的设置,定义了整体页面{body}的背景和颜色,定义了整体的字体和字体尺寸,定义了超级链接的样式等等.
一般来说,制作新模板CSS的时候,最开始就是要写这些内容了.下面我们开始一步步的定制具体页面部分的内容.
先是首页,首先我们要了解一下首页的页面布局,是由哪些CSS标签控制,并且它们之间的从属关系如何.我们可以看这里 http://www.voidland.com/blog/layout/default.htm
看的头晕没关系,我们来看这个简单的,还是以我们在绘图软件中制作的例子来分析.

OK,了解了基本结构之后,我们开始从最底下的层开始写,body在前面已经设定好了,那么我们开始写#wrapper部分的CSS.

#wrapper {
background:url(images/wrapper_bg.gif) #FFF repeat-y;

<!—设定了wrapper部分的背景和颜色,背景图片是这一张,让它沿竖着的方向重复显示-->

width:720px;
margin:0 auto;

<!—这里继承了body里设置的text-align:center一项,我们设定wrapper距离上下都是0,距离左右自动调节,这样wrapper部分就会在浏览器里居中了.
这里也是采用了缩写,应该是margin:0 auto 0 auto;分别对应了上,右,下,左.padding也可以这样缩写.比如padding:2px;的意思是上下左右各空出2个象素的距离,padding:2px 3px;的意思是上下空出2个象素的距离,左右空出3个象素的距离,0px或者0pt等赋值为0的可以不写单位.
-->

position:relative;

<!—这里设定wrapper部分在浏览器中的位置是相对的,具体属性值请自行查阅-->

text-align:center;
}

#innerWrapper {}

<!—对于可以不必设置的部分标签,我个人建议还是写上,内容为空好了,这样整个CSS的结构会更完整,以后修改的时候也方便.-->

Wrapper部分写完了,下面是header头部的部分.先来分析一下头部的结构.

在我们的新模板中,直接使用了.blog-header部分的背景图片作为blog的LOGO,所以#blogLogo,h1.blog-title和.blog-desc部分就设定了隐藏.如果不是采用.blog-header部分的背景图片作为blog的LOGO呢?当然就不隐藏了…废话啊~~~

#header {}
#blogLogo {
display:none;

<!—羞涩的匿了-->
}

.blog-header {
background:url(images/header_bg.gif) #FFF no-repeat;
width:210px;
height:110px;
margin:0 auto;
}

h1, .blog-desc {
display:none;
}

#menu {
background:url(images/menu_bg.gif) #EEEEDC no-repeat;

<!—这里我直接使用了一张图片作为menu的背景-->

width:660px;
height:22px;
margin:10px auto;
}

#menu ul {
margin:0;
padding:0 0 0 10px;
text-align:left;
font-size:11px;
font-weight:bold;
}

#menu li {
display:inline;

<!—由于menu的内容是用li来控制的,这里我们需要它们在水平方向上显示.-->

list-style:none;

<!—默认li每一项的前面都有一个符号表示,我们设置成没有-->

line-height:22px !important;

<!—line-height是设置每一行的高度;!important是针对firefox浏览器进行声明,凡增加了这个标记的样式,IE不会识别,从而实现不同的效果,当然这里是为了在两种浏览器下实现同样效果而增加的-->

line-height:20px;

<!—为什么设定两个line-height呢?是因为IE和代表先进生产力的Firefox对CSS的理解不同,不太好说,自己去搜索关于IE盒元素的bug吧.-->

padding:0 10px;

<!—让每个选项之间间隔20(10+10)个象素.-->
}

OK,header部分写完了,footer部分就不再叙述了,注意的是需要在#footer里面的css语句里增加clear:both;一项,这是清除所有的浮动特性继承,后面在写sidebar和content的时候我会说明一下这语句的作用.

制作LBS模板教程 [3]

下面,我们该进行中间部分{mainWrapper}了.
#mainWrapper {
width:660px;
<!—这里我们直接定义了宽度,其实也可以使用margin或padding来空出两侧额外的空间,但我们前面在#wrapper中设置了text-align:center,所以这里就直接定义宽度,并利用margin:0 auto;来整体居中了 -->

margin:0 auto;
text-align:left;
<!—在#mainWrapper所包含的空间内,我们暂时不需要居中了,所以直接靠左对齐.-->
}

接下来定义#sidebar和#content的宽度.
如果你研究过LBS自带的模板的CSS文件可以发现,这里的设置有点繁琐,我们来简单的,不用定义那么多,只定义两个标签就足够正常实现Toogle Sdiebar的功能了.
先来定义侧栏{#sidebar}的宽度,并让它浮动在右边.如果你喜欢侧栏在左边的,可以把float属性改成left,相应的,后面的#content的浮动属性就要改成右边.

#sidebar {
width:160px;
float:right;
}
#content {
width:460px;
float:left;
}

我们先来扩充#sidebar中的内容,看一下#sidebar的结构.

在侧栏中,每一类部分的内容都被.panel标签所包含,并且每一类内容都额外有不同的标签所定义,这样我们就可以实现侧栏每一类内容不同的外观,大家知道了就好,在我们的新模板中,暂时还是使用同一个外观,这样只需要定义一个.panel的属性就可以了.

.panel {
margin:0 0 10px 0;
<!—使每一类内容之间的间距相差10个象素,相当于margin-bottom:10px;我一般是使用前一种写法,这样调整的时候方便一点儿. -->
}
.panel h5 {
background:url(images/panelh5_bg.gif) #EEEEDC no-repeat;
<!—使用一张图片来做每一类内容标题的背景-->

width:150px;
height:21px;
line-height:21px;
<!—调整行高,使标题正好位于背景图片的中间(高度方向) -->
padding:0 0 0 10px;
<!—标题向右便宜10个象素,否则就跑到最左边去了-->

}
h5 {
<!—这里才是调整标题的字体大小和颜色,注意的是使用h?的时候,IE和Firefox浏览器会赋予不同的margin空间,我们一般需要在这里注明margin的大小.-->
font-size:11px;
font-weight:bold;
color:#060;
margin:0;
}
.panel-content {
margin:3px 0;
padding:0 10px;
line-height:150%;
}
.panel-content ul {
margin:0;
padding:0;
}
.panel-content li {
list-style:none;
margin:0;
padding:0;
}
就这样,我们的侧栏现在的外观是这样的

看看曰历部分,都靠左边对齐了,我们找到曰历部分的样式,再来设定.
#calendar {
text-align:center;
}
现在已经居中了,这里还可以根据你的需要,继续调整年份,星期,曰期等的样式,我偷个懒,就这样吧.

开始正文部分{#content}的修改,先来公告{#announce的部分}.
老规矩,先看结构

可以看到,.announce包含了.annonce-content,而同时.announce-content也包含了.announce-time.
我们先来定义.announce,考虑到公告的内容长度是不确定的,所以最好不要使用一个固定的背景来表现,我们这里这样来定义.
.announce {
background:url(images/announce_bg.gif) left top #F5F5EB no-repeat;
<!—实际上的announce_bg.gif图片

我们让它靠左靠上对齐,并设置成背景不重复,再定义背景颜色.-->
padding:5px;
border:1px solid #C7C7B8;
<!—来个边框,这里一个border就相当于直接定义了border-top,border-right,border-bottom,border-left -->
}
让公告时间浮动到右边去
.announce-time {
font-size:11px;
float:right;
}看看效果如何?

注意时间那里是不是不好看?这是因为时间标签被.announce-content标签所包含的缘故,如果你能忍受那就这样吧,如果不能忍受,那么我们来修改一下LBS根目录中default.asp这个文件.放心,修改过后,你使用其他模板的时候,这里一样会正常显示,就根没改过一样.
打开default.asp文件,找到第22行
<div class="announce-time"><%=theCache.settings["announceDate"]%></div>
把这一句剪切到第21行,也就是<div class="announce-content">这一句的前面,保存,再刷新一下浏览器看看.

这样时间就跑到右上角了,整体看起来也好看多了.公告部分就到此为止了,再来是正文部分,先来看结构.

从上到下三个标签,分别是.article-top,.textbox,.article-bottom,分别包含
.article-top:.pages / .view-mode
.textbox: .textbox-title ( textbox-title h4 / textbox-label )
.textbox-content
.textbox-bottom
.article-bottom:.pages
代码如下,很简单的几个设置,就不一一解释了.注意的是textbox里面有一句clear:both;
是因为前面设置了.pages和.view-mode的浮动属性,这里必须取消浮动属性的继承,否则.pages和.view-mode两部分内容会分别浮动在textbox的内容上.
.article-top {
margin:5px 0;
}
.pages {
float:left;
font-size:11px;
}
.view-mode {
float:right;
}
.article-bottom {
border-top:1px solid #EEEEDC;
}
.textbox {
clear:both;
border-top:1px solid #EEEEDC;
}
.textbox-title {
padding:10px 0;
}
.textbox-title h4 {
margin:0;
padding:0;
font-size:14px;
font-weight:bold;
float:left;
}
.textbox-label {
float:right;
font-size:11px;
}
.textbox-content {
clear:both;
margin:20px 0;
line-height:150%;
}
.textbox-bottom {
font-size:11px;
margin:0 0 5px 0;
}
现在,我们的首页基本上完工了,看看效果吧.