前一段还算是蛮充实的，时间不多(虽然不知道被我藏哪了-_-#)，这里我就拿我负责的一个比较完整的项目简单的整理一下网页制作这部分文档，如下便是：

目录建立的原则

  • 以最少的层次提供最清晰简便的访问结构
  • 基本的文件我们用这些文件夹将其归类划分 [ css ] 、 [ images ] 、[ script ] 、[ fla ]

w-01.gif

  • 确保整个文件树的简洁有序，命名尽量采用简短英文，尽量避免简写、缩写，一律小写
  • html 文档的扩张名均以 .html 结尾
  • 每个栏目首页以栏目名命名

例如，积分商城下的首页 shop/shop.html

  • 多个同类型文件使用英文字母加数字命名，字母和数字之间用_分隔

例如，news_01.html

开发环境的统一

  • 统一文档类型
    • HTML编码类型采用目前主流的 XHTML 1.0 Transitional 格式
    • 尽量采用国际通用的 utf-8 编码格式
  • 避免因开发工具的不同所造成的差异
    • 编写前应事先声明开发工具
    • 避免因工具不同Tab键造成的缩进程度不同，统一使用4个空格位的缩进度
    • 避免过分缩进(一些常见的编辑器会对 <html> 标签下的 <body> 进行缩进)

CSS样式文档组织结构

通过合理有效的组织样式文档结构，控制样式文档的优雅降级，使得网站能更好的符合浏览器的解析要求，同时方便日后的维护工作。

基础样式 （base.css）//加载给所有页面最基础的样式

模块样式 （module.css）//同类页面及相似页面的共同样式

页面级样式 （list.css 、member.css 、shop.css 、service.css）

所有独立页面使用自己独有的样式文件，命名以页面功能或所在模块为基准

  • 首页 的样式文档组织结构，如下：

p-01.gif

//结合首页的特性，仅加载了base.css 和 home.css，文档home.css用来给予首页的独有的样式。

  • 产品专区系列&列表页 的样式文档组织结构，如下：

p-02.gif

//通过给product&list（产品专区系列&列表页）页面加载list.css样式文档，来提供给此系列独有的样式。

  • 会员专区系列 的样式文档组织结构，如下：

p-03.gif

//通过给member（会员专区系列）页面加载member.css样式文档，来提供给此系列独有的样式。

  • 积分商城系列 的样式文档组织结构，如下：

p-04.gif

//通过给shop（积分商城系列）页面加载shop.css样式文档，来提供给此系列独有的样式。。

  • 客户服务系列 的样式文档组织结构，如下：

p-05.gif

//通过给service（客户服务系列）页面加载service.css样式文档，来提供给此系列独有的样式。

  • 以上样式文件均由上至下逐级加载，不可随意调换位置，后期新样式入应在其后置入。

HTML文档的布局规划

  • 两栏第一种布局：主内容在左边，侧栏在右边，如下图

b-01.gif

//将主内容content放置于左侧，使得用户能很好的聚焦于主内容content区块，这种布局将主内容content放在左边，辅助内容放置在右边以rightbar命名，如：产品专区系列页面 。

  • 两栏第二种布局：主内容在右边，侧栏在左边，如下图

b-02.gif

//将侧边栏放置于左侧，使得用户能很方便的操作以快速查看适合的信息，这种布局将主内容content放在右边，辅助内容放置在左边以leftbar，如：客户服务系列页面

  • 通栏单列布局，如下图

b-03.gif

//这种布局在container容器中仅放置了主内容content，减少干扰因素，提供清晰的环境，以便用户更快速的锁定进入下一步操作，如：产品介绍页。

Box盒模型

  • 简洁的box，未添加任何前缀

box-1.gif

//HTML代码部分

code-html-1.gif

//有上面这段代码可以看出，我们通过更换box-skin-yel（yel在这里代表yellow）可以很方便的控制box的皮肤，注释fillet style所包含的代码部分用来控制圆角标签，如：投保指南页面下的“温馨提示”这个box

  • 通过为box添加前缀ms，设置特定的盒子ms-box

box-2.gif

//HTML代码部分

code-html-2.gif

//这里的class=”lt”为左部圆角，class=”rt”为右部圆角，底部class=”ms-btm”可以用来添加扩展，如：更多链接。

Css Sprites拼合优化

  • 通过Css Sprites有效的减小页面请求次数，如下图

css-sp-1.gif

//这里我们列举的是通过Css Sprites技术将多个图标拼合在一张图片上进行优化处理（具体规格为50px的等边网格分布），有效的将原本需要多次http request的页面请求，降为只需加载一次即可完成同类所需的全部加载，以提升网站的性能。

bg_nav_menu.jpg

//上图为全站navigation的特效图片优化，同样的还有button的优化，优化的源文件保存在（../ Css Sprites拼合源文件）文件夹下。

Css语句缩写

  • 颜色

color:#333333;    缩写为  color:#333

  • 盒子（常用的四种写法）

property:value1;   //表示所有边都是一个值value1

property:value1 value2;   //表示top和bottom的值是value1,right和left的值是value2

property:value1 value2 value3;   //表示top的值是value1，right和left的值是value2，bottom的值是value3

property:value1 value2 value3 value4;   //四个值依次表示top,right,bottom,left

  • 边框 (border)

border-width:1px;

border-color:#ccc;

border-style:solid;

可以缩写为一句: border:1px solid #ccc;

  • 背景 (background)

background-color:#f00;

background-image:url(background.gif);

background-repeat:no-repeat;

background-attachment:fixed;

background-position:0 0;

可以缩写为一句:background:#f00 url(background.gif) no-repeat fixed 0 0;

语法是background:color image repeat attachment position;

  • 字体 (font)

font-style:italic;

font-variant:small-caps;

font-weight:bold;

font-size:1em;

line-height:140%;

font-family:”Lucida Grande”,sans-serif;

可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

// 注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。

  • 列表(list)

取消默认的圆点和序号可以这样写

list-style:none;

list-style-type:square;

list-style-position:inside;

list-style-image:url(image.gif);

可以缩写为一句：list-style:square inside url(image.gif)

习惯的设立 （如注释、代码排列等）

  • 注释
  • 通过注释有效的组织管理代码文档，将相关的文档放归类在一起，以便阅读与修改，示例供参考

/**************************************/
/*                                  Globals                               */
/**************************************/

/***************************************/
/*                                   Header                                 */
/***************************************/

/***************************************/
/*                               Navigation                             */
/***************************************/

/***************************************/
/*                         Main Content                               */
/***************************************/

/***************************************/
/*                                     Footer                                */
/***************************************/

//这里将多个CSS文件合并在一个文档，以便通过减小请求次数，达到优化的目的。

  • 通过适当的注释将合并后的文档进行有效的组织管理，方便日后查找、维护
  • 尽量避免特殊符号的使用
  • 代码排列及结构

所编代码按照字母的排序A-Z来编写，如下面的例子：

div.test1 {

text-align: left;

margin: 5px;

z-index: 1;

padding: 0 8px;

border: 1px solid #ccc;

}

div.test2 {

border: 1px solid #ccc;

margin: 5px;

padding: 0 8px;

text-align: left;

z-index: 1;

}

//在多行代码的情况下，按照字母排序(如div.test2)来编写的代码，会更易于查找

  • 代码结构上配合上一条提到的字母的排序方式，采用多行编写，对于一个标签下的CSS属性 ≤3 时，我们将其编写在同一行内，合理的节省空间
  • 每个标签的后面和左花括号之间加上一个空格便于区分查找

例如，div.test1 { 中 “div.test1” 和 “{“ 之间用空格隔开

  • 每个Css属性后面加上均分号，即便是一组属性的最后一个，避免后期添加因遗漏而导致的错误

根目录下的 readme.txt

  • 详细记录了web开发过程中的更新内容；
  • 首次更新对重要文档给出适当的解释（重要文件的关联部分)
PS：box部分用了position属性来实现圆角，这样一来在IE6中不得不去添加width属性以解决错位问题(但并不是所有)
下次在更新这里吧，阴雨天睡觉看起来是个不错的选择O(∩_∩)O~

Random Posts

Loading…