门户网站与大型网站的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

时间: 2025-01-31 10:57:43

门户网站与大型网站的CSS架构与组织的相关文章

一、大型网站技术架构演化

大型网站系统的特点 1.高并发,大流量 2.高可用:7*24小时不间断服务,不宕机 3.海量数据储存及管理 4.网络复杂 5.安全性 6.易扩展,可伸缩:需求快速变更,发布频繁 7.渐进式发展:脸谱网是宿舍,谷歌是斯坦福大学实验室,淘宝是马云家 一句话,高可用,高性能,易扩展,可伸缩且安全的网站. 大型网站架构演化发展历程 1.初始阶段     单机服务器:应用程序+数据库+文件都在一台服务器上. 2.应用服务和数据服务分离     应用服务器,文件服务器和数据库服务器. 中间通过通信的是:HT

网站运营:大型网站常用的五种推广方法

推广|网站运营 大型网站常用的五种推广方法   不同类型的网站,其推广方法的选择也是不同的,对于大型网站而言,那几种方法是最有效的呢?     1.搜索引擎优化:     由于大型网站的信息量非常的大,它的页面可能是上百万个页面,其每个页面都包含有相应得关键词,所以如果这些页面都能够从搜索引擎优化的角度来设计的话,将会帮助网站从搜索引擎中获得非常大的流量.比如IT.com.cn网站,目前每天能够从搜索引擎中获得几十万IP的流量.     平均而言,搜索引擎给网站带来的流量,占其新流量的75%左右

大型网站排名优化方法

中介交易 SEO诊断 淘宝客 云主机 技术大厅 在网站优化中,SEO策略方法影响到最终的优化效果.SEO策略不管对中小网站还是大型网站都是重要的,而对于大型网站,制定一个好的SEO策略方法尤为重要. 一.首先我们来看第一部分:关键词分析. 关键词分析是所有网站排名优化必须掌握的一门功课,大型网站虽然有海量的数据,但是每个页面都需要进行关键词分析,除了网站优化之外,策划.编辑也需要具备一定的关键词分析能力. 我们来看关键词分析的基本原则: 1. 调查用户的搜索习惯:这是一个重要的方面,只有了解用户

大型网站系统架构演化之路

大型网站系统架构演化之路 前言 一个成熟的大型网站(如淘宝.天猫.腾讯等)的系统架构并不是一开始设计时就具备完整的高性能.高可用.高伸缩等特性的,它是随着用户量的增加,业务功能的扩展逐渐演变完善的,在这个过程中,开发模式.技术架构.设计思想也发生了很大的变化,就连技术人员也从几个人发展到一个部门甚至一条产品线.所以成熟的系统架构是随着业务的扩展而逐步完善的,并不是一蹴而就:不同业务特征的系统,会有各自的侧重点,例如淘宝,要解决海量的商品信息的搜索.下单.支付,例如腾讯,要解决数亿用户的实时消息传

大型网站系统架构的演进(一)(转)

前言 写这篇文章的目的是想用来帮助自己思考和理清头绪,以及如何从一个简单的网站架构演进发展成一个大型网站架构,主要侧重在技术方面  简单的网站 由于我没有做过php,那么就以jsp为例,jsp做网站前端,以电子商务网站为例,描述一个简单的网站架构  前端 jsp+css+js  后端 java ssh  Web容器 tomcat  数据库 mysql  开发人员,美工1个,前端一个,java一个  部署方案为:  一台服务器,部署tomcat和mysql  架构图如下:  应用和数据库分布式部署

大型网站图片服务器架构的演进(转)

  在主流的Web站点中,图片往往是不可或缺的页面元素,尤其在大型网站中,几乎都将面临"海量图片资源"的存储.访问等相关技术问题.在针对图片服务器的架构扩展中,也会历经很多曲折甚至是血泪教训(尤其是早期规划不足,造成后期架构上很难兼容和扩展). 本文将以一个真实垂直门户网站的发展历程,向大家娓娓道来. 构建在Windows平台之上的网站,往往会被业内众多技术认为很"保守",甚至会有点.很大部分原因,是由于微软技术体系的封闭和部分技术人员的短视造成的(当然,主要还是人

大型网站的架构

我们知道,对于一个大型网站来说,可伸缩性是非常重要的,怎么样在纵向和横向有良好的可伸缩性,就需要在做架构设计的时候考虑到一个分的原则,我想在多个方面说一下怎么分: 首先是横向的分: 1. 大的网站化解为多个小网站:当我们一个网站有多个功能的时候,可以考虑把这个网站拆分成几个小模块,每一个模块可以是一个网站,这样的话我们到时候就可以很灵活地去把这些网站部署到不同的服务器上. 2. 静态动态分离:静态文件和动态文件最好分离开成2个网站,我们知道静态网站和动态网站对服务器来说压力的侧重不同,前者可能重

[转贴]浅析大型网站的架构

一个小型的网站,比如个人网站,可以使用最简单的html静态页面就实现了,配合一些图片达到美化效果,所有的页面均存放在一个目录下,这样的网站对系统架构.性能的要求都很简单,随着互联网业务的不断丰富,网站相关的技术经过这些年的发展,已经细分到很细的方方面面,尤其对于大型网站来说,所采用的技术更是涉及面非常广,从硬件到软件.编程语言.数据库.WebServer.防火墙等各个领域都有了很高的要求,已经不是原来简单的html静态网站所能比拟的. 大型网站,比如门户网站.在面对大量用户访问.高并发请求方面,

一个大型网站的一个活动栏目的架构选型

问题描述 最近考虑给一个大型网站做一个活动栏目,独立一套系统,低层架构基本上都没有什么问题,不过我个人想在WEB上面搞一点创新和冒险,由于不是很有把握,所以特来请教网上的高人.其实WEB上面也没有什么独特的创新,就是我设想系统反馈的都是XML格式的内容,然后利用XSLT在客户端来传换成传统的html+css.感觉这样搞有以下几个好处: 1,人员的安排上面可以实现较彻底的mvc分离 2,理论上能够提高网站的访问速度 3,系统与系统之间的聚合会更加容易以及直观 4,酷 5,网站语义化 但困扰我的是: