文档介绍：Allyes网建架构规范
目录
1 页面结构 4
综合页面 5
列表页面 6
内容页面 7
2 结构代码 8
页首代码 9
布局代码 9
内容模块代码 10
3 样式代码 11
全局样式 12
模块样式 12
布局样式 12
其它通用样式 12
4 行为脚本代码 13
框架 14
全局代码 14
页面插件 14
2
目录
服务器交互 14
5 目录结构及文件命名 15
目录编排结构 16
网页文件 16
图像文件 17
样式表文件 17
脚本代码文件 17
3
页面结构
1
页面基本布局结构
4
页面结构
1
综合页面
1 wrapper
页面整体框架,用以定义整个网页背景图案、颜色等
2 pagewrapper
页面内容框架,设置页面内容的显示宽度、内容
3 headwrapper
页首框架,包含Logo、导航、搜索栏、用户信息等
4 logo title
定义页面标题或Logo
5 navigator sbox
页面主导航搜索栏等
6 pagecontent
页面主体内容部分
7 kvbanner
页面横幅、推荐内容模块
8 module
页面内容模块
9 footwrapper
页尾框架包含底部导航、版权信息等内容
5
1 wrapper
2 pagewrapper
3 headwrapper
4 logo title
5 navigator sbox
6 pagecontent
7 kvbanner
8 module
9 footwrapper
页面结构
1
列表页面
灰色线框部分内容同综合页面
其它内容包括:
1 siderbar
边栏,提供相关信息及功能的列表
2 sidemodule
边栏模块
3 content
页面主体内容
4 contentlist
内容列表
6
1 sidebar
2 sidemodule
3 content
4 contentlist
页面结构
1
内容页面
灰色线框部分内容同内容页面
页面主要内容为archive部分页面正文
7
archive
结构代码
2
页面HTML代码布局、命名方式等
8
结构代码
2
页首代码
页首代码包括页面最上端的文档声明、<head>标签中的代码。
文档声明至于页面最上端,在<html>标签之上。通常使用的文档声明类型为 Transitional、 Strict、 Transitional、 Strict、、HTML5等。
页面外部载入的样式代码和行为脚本需要在<head>标签中定义。<head>标签中另外需要定义页面字符集、页面title,互联网公开浏览的页面需要定义keywords、description等页面SEO信息。
9
布局代码
布局代码用于定义页面的显示框架,固定页面模块的位置等。
布局代码通常定义唯一的ID,通常的命名方式为:
wrapper: 页面主框;
page-wrapper: 页面定位框架;
head-wrapper: 页首框架;
page-content: 页面主体内容框架;
side-wrapper: 页面边栏框架;
content-wrapper: 页面正文框架;
foot-wrapper: 页脚框架;
side-col1: 边栏第一行模块外框;
side-last: 边栏底部模块外框;
col1-3: 页面主体第一行第三个模块外框;
side-newslist: 边栏新闻列表等。
结构代码
2
10
内容模块代码
内容模块代码用于包含页面图文内容等,根据其功能定义Class属性,如:
main-navigator: 页面主导航模块;
side-module: 边栏内容模块;
module-w200: 宽度200的页面内容模块等。
模块中不同的页面内容需要使用不同的标签来表示,标签使用方式为:
<div>: 显示模块,用于定义页面布局框架,包装模块内容等;
<h1>: 站点标题,站点Logo;
<h2>: 页面标题,页面主内容标题;
<h3>~<h6>: 模块标题;
<em>: 斜体文本;
<strong>: 加粗文本;
<p>: 文字段落;
<blockquote>: 引用缩进图文内容;
<dl>: 定义列表;
<dt>: 定义列表标题;
<dd>: 定义列表内容;
<o