一起CSS

当前位置:一起CSS

门户网站与大型网站的CSS架构与组织

日期:2008-10-18 分类:CSS

对于大型门户,海量信息平台及多模块,多区域化网站,更需要对CSS,XHTML的标准化,符合语意的HTML框架,复用性强的CSS代码,这些才能保障你的网站,具有很好的“地基”。

第一部:关于构建CSS框架我们要实现的目的:

1.实现标准化,具备主流平台适应性的前端实现;
2.快速开发,在站点风格确定后,前端不应该成为整个项目里瓶颈;
3.重构的需求,尽可能的让类和区块样式可重用;
4.分离结构和表现的需求,遵守了语义化结构的约定;
5.构架完全符合金融网特色的CSS框架。
6.对代码进行必要的搜索引擎优化。

第二部:关于CSS命名的一些约定:

1.不使用大写形式的类名和id名;
2.尽可能使用描述性的英文单词的组合作为类名和id名;
3.id名及类名的多个英文单词之间使用“_”短横线分隔;
4.按区域进行描述编号 例:main01_div01_ul01 (可以理解为主体第一区域 第一DIV下的第一个UL)

下来我们要对整个网站及设计稿进行分析,去做符合自己门户结构特色的CSS框架。我们以新浪网为例子进行站点结构分析,整个页面分为:首页,更多页,内容页,专题页,数据中心,新闻中心,频道页,广告……

我们对这些页面进行整理,去发现他们的公共部分:CSS的样式,及区域,模块的碎片。我们需要做的是把这些公有的部分提出来,我们可以把CSS分以下几类:

主体样式表:sjweb.css
font(字体样式,字号,颜色的集合)
layout(框架结构 集合)
global(全局默认样式集合)
component(组成页面部分样式表,模块碎片集合)
这些讲统统的被import到sjweb.css主体样式表里,主体样式表做为一个loader加载新的外来样式,比如广告样式表。

这样这些页面只需要写一点点 属于自己特殊要求的CSS样式代码就可以了。

在构建这个CSS框架的时候有很多细节的东西最好能统一化,比如:行间距,模块之间间隔距离等。

下面是某门户网的首页结构图:

规则:

1.所有area之间,模块之间,间距上下左右为:8 Pixel ;
2.新闻列表颜色#333 ;
3.新闻列表行间距20 pixel;
……等等

调整环境:IE7,ff,IE6,IE5.x,Opera。

PS:其实更多是你在构建的时候细节上的问题,好了不多说了。呵呵。

文章摘自:http://www.sjweb.cn/

查看:549 评论:1

wordpress自动升级成功

日期:2008-09-26 分类:未分类

开始使用wordpress是的版本是2.5.1,现在已经更新到2.6.2,由于不太懂wordpress,又没有升级过wordpress,在论坛上又看到很多wordpress在升级过程中或升级之后遇到这样那样的问题,所以我迟迟没有升级。

前两天偶然知道Wordpress Automatic Upgrade这个插件,据说是一个可以让wordpress自动升级的插件。我很惊讶,我在怀疑这个插件到底行不行,是不是真的有这么神奇。怀疑归怀疑,为了不麻烦自己,我抱着试试的态度装上了这个插件。装上之后按常规的方法启用插件,可是到设置里却没有看到这个插件。怎么搞的?难道就是这样的?难道它就正在帮我升级了?然而浏览我的wordpress却依然可以访问(如果正在升级,会出现网站正在维护的提示),查看源代码提示版本也仍是2.5.1。继续捣鼓了几下,还是没有任何反应,就没有理它了。

今天登陆wordpress后台,突然发现管理导航下比以前多了一行英文提示,又看到Upgrade这个单词,我就怀疑是Wordpress Automatic Upgrade插件的作用,我点击“Click me”后转到一个英文页面,由于不上很懂英文,所以找了个在线翻译,翻译了几句,知道这确实就是Wordpress Automatic Upgrade开始升级的页面,于是我就开始自动升级起来。为了防止升级过程中出现问题,所以我小心翼翼的进行着。一遇到看不懂的地方就进行翻译。最终,我的wordpress升级成功,整个过程不超过5分钟。

有了这个插件,wordpress升级就不那么麻烦了,太好了。

查看:1,151 评论:11 标签:

更具亲和力的文字隐藏方法

日期:2008-09-26 分类:CSS

文字隐藏应用广泛,但常用的方法没有什么亲和力。

常用文字隐藏方法的缺陷:

1、display:none

这种方法搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略;

屏幕阅读器会忽略被隐藏的文字。

2、visibility: hidden

这种方法隐藏了文字却仍然占据物理空间。

更好的方法:

overflow:hidden

.class{
display:block;/*统一转化为块级元素*/
width:0;
height:0;
overflow:hidden;
}

从代码似乎就可以看出更具亲和力,因为它是自动隐藏,而不是强制隐藏。

相关链接

http://www.mattcutts.com/blog/seo-mistakes-unwise-comments/

http://sonspring.com/journal/accessible-display-none

http://www.456bereastreet.com/archive/200510/google_seo_and_using_css_to_hide_text/

查看:547 评论:没有评论

web设计辅助利器——FF必备插件

日期:2008-09-25 分类:未分类

1、firebug 1.05中文版

可以说是FF最强大的插件之一,无论是查看DOM结构、调节样式、调试JavaScript,Firebug都无愧是“拿莫温(NO.1)”。

2、web developer1.1.6中文版

仅次于Firebug的网页开发设计者工具。功能众多而且强劲。看着这令人眼花缭乱的插件设置窗口,就能一窥它的强大。推荐网页开发者和网页设计者使用,能够帮助你方便的对页面进行调整和完善。

3、cssviewer 1.0.3中文版

也是一个很强的CSS查看插件。

4、Aardvark

可以查看网页上鼠标出的元素的类型,id和应用的class。

5、ColorZilla

网页取色工具。

6、JavaScriptDebugge

javascript调试工具,在这方面比FireBug更强大些。

7、JSView

可以查看当前页面的外部js和css,对开发者来说很有有帮助。

查看:721 评论:5

web标准的开始——DOCTYPE

日期:2008-09-22 分类:未分类

今天在论坛上解决一个问题时,又看到他的网页没有加上DOCTYPE,于是在回复里加了一句提醒。

我们浏览的大多数网站,或者用Dreamweaver创建一个新的网页文档时,源码的顶部都会有DOCTYPE声明,但是很多人没有注意它,甚至在创作时候直接将它删掉,其实这往往就是噩梦的开始,很有可能会引发一系列的问题。我在制作过程中就遇到很多因为没有加DOCTYPE声明而引发的奇怪问题,这些问题说都说不清楚。就拿行内元素来说,在加有DOCTYPE声明的文档中,它是没有高度和宽度的(这个是正确的),但不加DOCTYPE声明,给它定义高度和宽度是有效的。

不加上DOCTYPE声明,那么各个浏览器会以各自默认的DOCTYPE解释文档,这就出现了差异,不兼容。所以DOCTYPE声明是很重要的。下面具体认识一下DOCTYPE:

一、什么是DOCTYPE

DOCTYPE是Document Type(文档类型)的简写,在页面中,用来指定页面所使用的XHTML(或者HTML)的版本。要想制作符合标准的页面,一个必不可少的关键组成部分就是DOCTYPE声明。只有确定了一个正确的DOCTYPE,XHTML里的标识和CSS才能正常生效。

二、DOCTYPE的规则

DOCTYPE声明的写法遵循一定的规则,它指出阅读程序应该用什么规则集来解释文档中的标记。在Web文档的情况下,“阅读程序”通常是浏览器或者校验器这样的一个程序,“规则”则是w3c所发布的一个文档类型定义(dtd)中包含的规则。

每个dtd都包括标记、attributes、properties等内容,它们用于标记web文档的内容;此外还包括一些规则,它们规定了哪些标记能出现在其他哪些标记中。每个web建议标准(比如html 4 frameset和xhtml 1.0 transitional)都有自己的dtd。

以下是从手册上摘抄的规则:

语法:

HTML  顶级元素  可用性 "注册//组织//类型 标签//定义  语言""URL"

可能值:

- 顶级元素:指定 DTD 中声明的顶级元素类型。这与声明的 SGML 文档类型相对应。 HTML 默认。HTML。

- 可用性:指定正式公开标识符(FPI)是可公开访问的对象还是系统资源。 PUBLIC 默认。可公开访问的对象。SYSTEM 系统资源,如本地文件或 URL。

- 注册:指定组织是否由国际标准化组织(ISO)注册。 + 默认。组织名称已注册。

- 组织名称未注册。Internet 工程任务组(IETF)和万维网协会(W3C)并非注册的ISO组织。(组织:指定表明负责由 !DOCTYPE 声明引用的 DTD 的创建和维护的团体或组织的名称,即 OwnderID、IETF、W3C)

- 类型:指定公开文本类,即所引用的对象类型。 DTD 默认。DTD。

- 标签:指定公开文本描述,即对所引用的公开文本的唯一描述性名称。后面可附带版本号。 

- 定义:指定文档类型定义。

1、Frameset 框架集文档;

2、Strict 排除所有 W3C 专家希望逐步淘汰的代表性属性和元素,因为样式表已经很完善了;

3、Transitional 包含除 frameSet 元素的全部内容。

- 语言:指定公开文本语言,即用于创建所引用对象的自然语言编码系统。该语言定义已编写为 ISO 639  语言代码(大写两个字母)。 EN 默认。英语。

- URL:指定所引用对象的位置。

为了获得正确的DOCTYPE声明,关键就是让dtd与文档所遵循的标准对应。例如,假定文档遵循的是xhtml 1.0 strict标准,文档的doctype声明就应该引用相应的dtd。另一方面,如果doctype声明指定的是xhtml dtd,但文档包含的是旧式风格的html标记,就是不恰当的;类似地,如果doctype声明指定的是html dtd,但文档包含的是xhtml 1.0 strict标记,同样是不恰当的。

三、选择什么样的DOCTYPE

如上例所示,XHTML 1.0中有3种DTD(文档类型定义)声明可以选择:过渡的(Transitional)、严格的(Strict)和框架的(Frameset)。这里分别介绍如下。

1、过渡的

一种要求不很严格的DTD,允许在页面中使用HTML4.01的标识(符合xhtml语法标准)。过渡的DTD的写法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2、严格的

一种要求严格的DTD,不允许使用任何表现层的标识和属性,例如<br/>等。严格的DTD的写法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3、框架的

一种专门针对框架页面所使用的DTD,当页面中含有框架元素时,就要采用这种DTD。框架的DTD的写法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

使用严格的DTD来制作页面,当然是最理想的方式。但是,对于没有深入了解Web标准的网页设计者,比较合适的是使用过渡的DTD。因为这种DTD还允许使用表现层的标识、元素和属性,比较适合大多数网页制作人员。

四、需要注意的问题

一定要将DOCTYPE声明放在XHTML文档的顶部,上面哪怕多个HTML注释标记都不行。最好示例代码也加上DOCTYPE,否则效果会有差异。

引用部分摘自:http://www.sjweb.cn/article/2.htm

查看:1,072 评论:没有评论

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved