您的位置: 首页 > 技术文档 > 网页制作 > 怎样管理好样式
web标准常见问题集合 回到列表 解读absolute与relative
用户名:
密 码: 忘记密码
注册会员 游览论坛 论坛帮助
 怎样管理好样式

作者:小毅 时间: 2006-11-12 文档类型:原创 来自:蓝色理想
浏览统计 total:5004 | year:5004 | Quarter:5004 | Month:187 | Week:48 | today:48

作者小毅的博客:http://andymao.com/ 

    学习WEB标准的朋友一般都是从学习CSS开始,为什么呢?因为CSS是一种很有意思的语言,它能让我们的网页千变万化。也许我们一开始的接触只是因为链接的样式修改,然后慢慢发现CSS的强大而又简单,于是我们用它来控制整个网页的布局、排版、色彩、图片等等工作。学习了CSS之后我们又会发现XHTML的结构更为重要,一个好的XHTML结构可以让CSS少费很多事。同时也会避免网页在不同浏览器之间的差异。于是又开始学习XHTML代码,并且不断的去摸索着XHTML的结构的特点。会写CSS了,也懂得XHTML结构的重要性并能灵活应用的时候,是不是就可以了呢。也许这时我们就会发现其实样式的管理同样非常的重要。

    大家也许都已经有了自己的管理方式,因为所要应用的网页类型的不同可能管理的思路也不一样,这里我只是把我的样式管理做一个整理。算是给大家提供一个可以参考与研究的范例,给对于没有形成自己的管理方式的朋友们提供一个参照范本。

    我的样式管理是针对于单一项目、单一的风格体系的网站,一般这样的网站都是中小型的网站,风格是上一致的。对于大型网站,或是风格差异很大的网站体系是不适用的。我们在做样式之前首先要想到样式的易维护性。一旦需要修改就必需要快速方便,修改工作的成本是很高的,所以我们要尽量避免这样的工作所占用时间的扩大。那我们就有必要把样式与结构代码分开。下面看一下我的目录分配方法:

    其中,[images] 是存放xHTML中出现的图片,[jonStyle]我统称之为主题包,在样式包中包括了[CSS]、[img]、[js]分别存放CSS样式表、样式表中所引用的图片、网页中所用的JS。这里存放图片的[img]与外面的[images]虽然都是存放图片的,但是这里的图片的性质却是不一样的。[img]是CSS中所引用的图片,所有的图片的显示与否都与CSS样式有关,他的归属性是,[img]里的图片是归属于CSS的,而不是XHTML的。而CSS是不会引用[images]中的图片。[images]中的图片只归属于xHTML,xHTML也不要直接使用[img]中的图片。

    这里把[js]也放在了[jonStyle]文件夹中也许会有人觉得不妥,我的考虑是这样的:行为与样式本都是使得这个XHTML的结构能多姿多彩。当我们需要更换皮肤的时候,也有可通这个行为也是需要更换的。比如:在第一套方案中,某个区块的内容是要上下滚动的,然而在第二套方案中,这个区块就需要左右滚动。那么这个行为也需要与样工一起更换。当然实际应用的时候不一定是这么简单理由。

    基本上大的结构是这这样的。那么样式表的结构又是怎么样的呢?我是这样来划分的:样式包中有一个base.css(基本共用样式)module.css(模块样式)forms.css (表单样式)mend.css(补丁样式)print.css(打印样式)

    其中base.css是一个基本的样式,也就是所有网页的共性样式,这个样式与module.css配合基本上可以显示正常的页面。表单的划分,也可以有利于对不同地方的表单的样式管理。WEB标准涉及兼容性,所以需要有样式补丁当然还有针对性的这里就不一一列举。最后一个的打印样式,是提供给打印设置使用的。

    我通过这样的划分,在对于维护与网站的样工更新上,就显得非常的容易,基本上可以在不需要程序人员的参与下就可以完成对网站的皮肤的更换。如果一个网站同时具备很多个主题包,那么只要简单的在XHTML中更换主题包的名称就可以使用不同的样式。这与网站的程序相配合将可以做出非常好的,具有很强扩展性的应用网站来!

    以上内容所讲的比较局限,希望对大家的样式管理上有一点帮助!

出处:蓝色理想
责任编辑:colinivy

◎进入论坛网页制作网站综合版块参加讨论

作者文章 更多作者文章
解读absolute与relative
XHTML代码的基本应用
以图换字的几个方法及思路
对称与平衡美学的思考
如何开始标准之路
热门搜索:CSS Fireworks 设计比赛 网页制作 Dreamweaver Studio8 Flash
站点最新 站点最新列表
采访eico studio[2]
Photoshop滤镜制作彩色拉丝效果
详细介绍IE7新支持的选择器
如何设置液晶显示器的刷新率?
2006GUIC最佳团队揭晓
中国巩义网站设计比赛结果
Photoshop人物合成技巧
酒瓶的创意设计
介绍几个曲线图
如何写好“帮助中心”的内容
栏目最新 栏目最新列表
Photoshop滤镜制作彩色拉丝效果
详细介绍IE7新支持的选择器
Photoshop人物合成技巧
介绍几个曲线图
RSS 在线阅读器开发实例
Bad Tags — 有害的标签
Photoshop照片修复技巧——上色篇
Photoshop照片修复技巧——修补篇
Fireworks 打造逼真M4A1
陈旧照片制作及泛黄色调的调节

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

本文总共有 6 条评论,现在显示最新的 5 条。评分:- llllllllllllllllllll + 评分人数: 1 ,平均分: 5.00


wzjcool Publish at 2006-11-24 9:38:48
好,顶一下,但更清楚一点就更好了

可否教教DIV+CSS?
sasumi Publish at 2006-11-22 11:34:22
不错哦. . . 学习ing
ausure Publish at 2006-11-15 17:06:06
添加个字体样式啊,font.css
choyi Publish at 2006-11-14 11:46:50
不错!~

xtyy Publish at 2006-11-13 18:05:25 评分5
能力很强。思维能力很强。

查看全部评论

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
Don't Make Me Think 第2版
《Flash第一步系列》
《交互设计之路》
《Dreamweaver 从基础到实践》
《色彩管理》
《情感化设计》
《GUI设计禁忌》