Web 页面的开发流程及规范.docx

资源描述

Web 页面的开发流程及规范.docx

《Web 页面的开发流程及规范.docx》由会员分享，可在线阅读，更多相关《Web 页面的开发流程及规范.docx（15页珍藏版）》请在冰点文库上搜索。

Web 页面的开发流程及规范.docx

Web页面的开发流程及规范

一、页面开发流程

在写页面之前要先仔细的观察下页面，在心里对页面要有布局一下。

比如下边这个页面：

我们看到这个页面，要知道这个页面要怎么布局的才能合理:

1）最外层我们要用一个大的盒子包裹起来要定义---->wrap

2）然后头部（关注微信和下边logo包括导航条）---->header

①关注微信那块用---->sub_header

②下边就是导航用---->nav

3）下边就是我们的主体部分（banner和登录框）---->main（content）

①主题图片用---->banner

②登录框就用---->login

4）底部这部分内容就用---->footer

DOCTYPEhtml>

微信

logo+导航

第一个单词以小写字母开始；第二个单词的首字母大写或每一个单词的首字母都采用大写字母

2）、属性的值一定要用双引号（""）括起来，且一定要有值如class="divcss5",id="divcss5"

3）、每个标签都要有开始和结束，且要有正确的层次，排版有规律工整

4）、表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等

到

的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。

6）、给每一个表格和表单加上一个唯一的、结构标记id

7）、给图片最好加上alt标签

8）、尽可能减少div嵌套,如欢迎访问XXX,您的用户名是用户名完全可以用以下代码替代:

欢迎访问XXX,您的用户名是用户名

;

9）、尽量使用英文命名原则

10）、尽量不缩写，除非一看就明白的单词

2.CSS样式文件命名如下

Css样式命名有两种“.”和“#”。

无论是使用“.”（小写句号）选择符号开头命名，还是使用“#”（井号）选择符号开头命名都无所谓，但我们最好遵循，主要的、重要的、特殊的、最外层的盒子用“#”（井号）选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名，同时考虑命名的CSS选择器在HTML中重复使用调用

样式一般分为三种：

1行内样式2内嵌样式3外部样式

行内样式：

即在标记的style属性中设定css样式，

100px;text-align:

center;">

内嵌样式：

页面中各种元素的设置集中写在和之间的用包括

外部样式：

是专门在外边写一个样式然后页面用

公共样式用base.css

首页用index.css

3.相对网页布局重要部分CSS样式命名：

外套wrap------------------用于最外层

容器：

container------------------用于盒子模型

头部header----------------用于头部

主要内容main------------用于主体内容（中部）

左侧main-left-------------左侧布局

右侧main-right-----------右侧布局

导航条nav-----------------网页菜单导航条

内容content---------------用于网页中部主体

底部footer-----------------用于底部

4.网页样式常用的命名规则

1、链接样式定义：

link_white（白色）；link_black（黑色）；link_blue（蓝色）等等；

如有重复的后面加阿拉伯数字；如link_red01有下划线的如：

linkred

　　2、文字样式定义：

font_red（红色）；font_red_14（红色14号字）；font_red_14b（红色14号加粗）

　　3、边框样式定义：

border_red_tblr（红色四个边）；border_red_blr（红色底左右三边）；border_red_lr（红色左右两个边）；border_red_b（红色底一个边）等等；

　4、表单样式定义：

text_100（文本字段宽为100）；textarea_200_red（文本区域宽为200有红色边框）；select_100（列表宽为100）；button_150（按钮宽150）；

　　5、线的样式定义：

line_X（横线）；line_Y（竖线）；line_X_red（红色横线）；line_X_red2（两个像素的红色横线）；说明：

在line中只定义虚线，实线在border中定义

6.外边距（margin）的定义ml_10（margin-left）左边距，mr_10（margin-right）右边距，mt_10（margin-top）上边距，mb_10（margin-bottom）

7内边距（padding）定义：

pl_10（padding-left）左边距，pr_10（padding-right）右边距，pt_10（padding-top）上边距，pb_10（padding-bottom）

5.图片命名

　　1、导航命名：

menu.jpg如：

menubg.jpg（导航的背景图）

　　2、会员登录：

loginbg.jpg（会员登陆的背景图）

　　3、搜索命名：

search.jpg如：

search_bg.jpg（搜索的背景图）

　　4、小图标：

ico_数字.jpg如：

ico_001.jpg

　　5、线的命名：

line_X_颜色.jpg如：

line_X_red.jpg（红色横向虚线）说明：

line只命名虚线

　　line_Y_red.jpg（红色纵向虚线）

　　6、广告命名：

ad_数字.jpg如：

ad001.jpg

CSS样式整理

1.字体属性：

（font）

大小{font-size:

x-large;}（特大）xx-small;（极小）一般中文用不到，只要用数值就可以，单位：

PX、PD

样式{font-style:

oblique;}（偏斜体）italic;（斜体）normal;（正常）

行高{line-height:

normal;}（正常）单位：

PX、PD、EM

粗细{font-weight:

bold;}（粗体）lighter;（细体）normal;（正常）

文字颜色：

{color:

Red;}（文字颜色）可用英文表示，也可用颜色色值（#fff）；

变体{font-variant:

small-caps;}（小型大写字母）normal;（正常）

大小写{text-transform:

capitalize;}（首字母大写）uppercase;（大写）lowercase;（小写）none;（无）

修饰{text-decoration:

underline;}（下划线）overline;（上划线）line-through;（删除线）blink;（闪烁）

字间距{letter-spacing:

normal;}数值/*这个属性似乎有用，多实践下*/

对齐{text-align:

justify;}（两端对齐）left;（左对齐）right;（右对齐）center;（居中）

缩进{text-indent:

数值px;}

例：

DOCTYPEhtml>

你走之后一个夏季熬成一个秋，我的书上你的正楷眉清目秀，一字一字宣告我们和平分手，好委婉的交流还带一点征求，

你已成风幻化的雨下错了季候，明媚的眼眸里温柔化为了乌有，一层一层院墙把你的心困守，如果没法回头这样也没不妥。

ssssssssAAAAAAAAAA

那年夏天

结果：

2.背景属性：

（background）

色彩{background-color:

#FFFFFF;}

图片{background-image:

url（）;}

重复{background-repeat:

no-repeat;}

滚动{background-attachment:

fixed;}（固定）scroll;（滚动）

位置{background-position:

left;}（水平）top（垂直）;

简写方法{background:

#000url（..）repeatfixedlefttop;}/*简写·这个在阅读代码中经常出现，要认真的研究*/

3框架样式（BoxStyle）

序号中文说明标记语法

1边界留白{margin:

margin-topmargin-rightmargin-bottommargin-left}

2补　　白{padding:

padding-toppadding-rightpadding-bottompadding-left}

3边框宽度{border-width:

border-top-widthborder-right-widthborder-bottom-widthborder-left-width}　　

宽度值：

thin|medium|thick|数值

4边框颜色{border-color:

数值数值数值数值}　　数值：

分别代表top、right、bottom、left颜色值

5边框风格{border-style:

none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}

6边　　框{border:

border-widthborder-stylecolor}

上边框{border-top:

border-top-widthborder-stylecolor}

右边框{border-right:

border-right-widthborder-stylecolor}

下边框{border-bottom:

border-bottom-widthborder-stylecolor}

左边框{border-left:

border-left-widthborder-stylecolor}

7宽　　度{width:

长度|百分比|auto}

8高　　度{height:

数值|auto}X

9内边距padding：

上右下左

10外边距margin：

上右下左；

11浮动{float:

left|right|none}

12清　　除{clear:

none|left|right|both}

13居中{margin:

0auto}

14鼠标形状{cursor:

hand}（手形状）

4．Position（定位）

Css的定位{position:

fixed|relative|absolute}

它们分别是静态（static），绝对定位（absolute），固定（fixed），相对定位（relative）。

position:

relative;相对定位

相对定位占据文档流，就是说定位的东西位移了，在它本该出现的位置浏览器还是会渲染出一个占位的框框！

position:

absolute;绝对定位

据对定位是将元素从原来的位置拖出来，不占据文档流，在原来位置不会留下占位框。

但是绝对定位在窗口大小不同、分辨率不同时会出现错位。

正确的方法：

相对定位嵌套绝对定位，这样绝对定位的元素总是对应它的父元素的位置，在不同分辨率下不会错位：

--------------------------------------------

// <父元素，相对定位>

//<子元素,绝对定位>

--------------------------------------------

例子（div是父级、img是子元素）：

css:

-------------------------------------

#myid{

width:

200px;height:

100px;

background:

red;

position:

relative父级相对定位}

#myidimg{

图片是div的子级，给他绝对定位

position:

absolute;left:

-25px;

}

重叠的元素

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序：

z-index的值越大其对应的图层越在上边。

DOCTYPEhtml>

Thisisaheading

因为图像元素设置了z-index属性值为-1,所以它会显示在文字之后。

6.列表.HTML的列表元素是一个由列表标签封闭的结构，包含的列表项由

datalist要与input标签一起使用，当鼠标的焦点在datalist框内，输入选项中的首选字母，它会自动出现该字母的选项，具有提示功能。