LBS^2 个性化皮肤制作教程A

[ 2008-01-17 00:56:00 | 作者: admin ]

【调整阅览字体大小】: | |

=========================
类  型:LBS^2 个性化皮肤制作教程A
发 布 者 :igone
作者主页http://www.igone.com.cn/lbs/
=========================

原作者:shea 修改:igone(蓝色字体部分)

本教程尽量写到详细,所以一些东西写的很罗嗦,是按照给啥也不懂的人准备的,碰到我写的罗嗦而你又知道的地方请跳过.另外要写的东西太多了,所以打算每天写一点儿,从CSS文件的头部写起...今天先写个头,看看有没有人看...

-----------------------------------------------------------------------------------------------------------------------
// 这个符号的说明
本文中出现的//符号,表示一段的标题.
<!—这个符号的说明-->
本文中出现的<!—XXXX -->是注释,也就是一些说明.

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

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

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

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

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


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

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

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

2. 在Dreamweaver cs3中新建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;

<!-- 这里设定整体居中,是为了在Firefox浏览器下达到跟IE浏览器下同样的效果,当然实现的方法有很多,这里是我经常用的,很简单的设定,并不能做到完全一样.-->

如果不想使用浏览器的默认设置,统一显示样式,一般还需要定义字体以及字符大小,具体如下.-->
font-size: 12px;
font-family: Tahoma, Arial;

<!--
目前LBS的字符大小基本上是12px,以前最流行的是9.5,后来是11px.表示长度的相对单位有em,ex以及px,绝对单位有pt、cm等。解释如下:
长度是指水平或垂直方向的度量。 长度值的格式(本规范中表示为<length>)为:一个可选的符号字符('+'或'-','+'是缺省的符号),紧接在后的是一个<number>(小数点可有可无),紧接在后的是一个单位标识符(如px,deg等等)。在'0'长度之后,单位标识符可以省略。

某些属性允许负的长度值,不过这将使格式化模型变得复杂,并可能伴随着与实现相关得限制。如果不能支持负的长度值,它应该被转换到最接近的可以被支持的值。
有两种类型的长度单位:相对的和绝对的。 相对长度单位规定一个长度相对于另外一个长度属性。使用相对单位的样式表在从一个媒介转移到另一个媒介(如从计算机显示器到激光打印机)时,定比会相对简单一些。
相对单位有:
em:相关字体的'font-size'
ex:相关字体的'x-height'
px:相对于浏览设备的像素点
例子:
H1 { margin: 0.5em } /* em */
H1 { margin: 1ex } /* ex */
P { font-size: 12px } /* px */
'em'单位等于应用该单位的元素的经计算的'font-size'属性。例外情况是'font-size'值本身出现了'em',这时它参考其父元素的字体尺寸。它可以用作垂直和水平的度量。(在印刷文本中,这个单位也有时被称为四方宽度。) 如果body中出现em/ex标识,'em'和'ex'参考属性的初始值,即相对于浏览器的默认字符。
'ex'单位定义为字体的'x-height'。之所以叫x-height,是因为它通常等于小写字母'x'的高度。不过,即使字体中没有x字母,'ex'还是会有定义。
例子:
规则:
H1 { line-height: 1.2em }
指H1元素的行高比H1元素的字体尺寸大20%。另一方面:
H1 { font-size: 1.2em }
指H1元素的字体尺寸比H1元素继承来的字体尺寸大20%。
像素点单位相对于浏览设备的分辨率。在大多数情况下是指计算机的显示器。
例子:
下面的规则中,计算出的H1元素的'text-indent'值是36pt,而不是45pt,如果H1是BODY元素的子元素的话。
BODY {
font-size: 12pt;
text-indent: 3em; /* i.e., 36pt */
}
H1 { font-size: 15pt }
绝对长度单位只有在其输出媒介的物理特性已知的情况下才有用。绝对单位有:
in:英寸——1英寸等于2.54厘米。
cm:厘米
mm:毫米
pt:点——CSS2所使用的点等于1/72英寸。
pc: 十二点——1 pica等于12个点。
例子:
H1 { margin: 0.5in } /* 英寸 */
H2 { line-height: 3cm } /* 厘米 */
H3 { word-spacing: 4mm } /* 毫米 */
H4 { font-size: 12pt } /* 点 */
H4 { font-size: 1pc } /* picas */
如果指定的长度不被支持,用户端必须将其近似为实际值。
font-family是字体,一般建议使用通用家族字体。也可以使用非通用家族的字体,比如宋体,使用非通用家族的字体必须使用双引号,如font-family: "宋体"。
-->


}

  今天暂时就讲到这里,明天继续!

  备注:此文原始资料来自博客营销网,本站进行了重新编辑!

返回顶部

评论Feed 评论Feed: http://lbs.goeswell.cn/fans/feed.asp?q=comment&id=234
UTF-8 Encoding 引用链接: 点击查看引用链接

这篇文章没有评论。

发表
表情图标
[smile] [confused] [cool] [cry]
[eek] [angry] [wink] [sweat]
[lol] [stun] [razz] [redface]
[rolleyes] [sad] [yes] [no]
[heart] [star] [music] [idea]
UBB代码
转换链接
表情图标
悄悄话
用户名:   密码:   注册? 验证码 * 请输入验证码