模板代码标准.doc

模板代码标准 目录 一、模板封皮－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－2 1、页面标准 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－2 2、元素/占位符 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－3 二、模板页面－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－4 1、页面标准 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－5 2、元素/占位符 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－5 （其中：绿色字为重要代码，粉色字为注释，灰色框内为css代码，黄色框内为html代码） 一、模板封皮 1、页面标准 背景图片居中设置，举例： .indexback{ width:800px;（图片长度） height:400px;（图片高度） margin:-200px 0px 0px -400px;（长、高减半，数字前加“－”） position:absolute; top:50%; left:50%; background:url(img/back.jpg) no-repeat; } 2、元素/占位符 ?网站的中文名：占位符——$show_Cn_title$，举例： .course_name_cn{ line-height:40px; font-size:30px; width:600px; overflow:hidden;（文字过长隐藏，加上下面两个显示省略号，ff不支持省略号） white-space:nowrap; text-overflow:ellipsis; } ?网站的适用课程：占位符——$fit_Course$，举例： .fit_course{ line-height:20px; width:600px; overflow:hidden;（文字过长隐藏） white-space:nowrap; text-overflow:ellipsis; } ?网站访问量：占位符——$show_Course_Hits$ （标准：同上） ?进入课程网站：占位符——$show_Enter$ （标准：要有鼠标划过状态，具体样式根据psd页面来） 二、模板页面 1、页面标准 课程网站基本框架：（指普通页面，特殊页面设计不包含在内） top：中文名、适用课程、访问量、导航条、有flash的banner content：左边——二级菜单 /右边——当前位置、搜索、detail footer：ABLE COURSE CENTER 样式表开头必设 body { margin:0px; padding:0px; font-family:tahoma,宋体; font-size:12px;（除了中文名、菜单外所有字体大小均为12px） color:#a1bde5;（根据psd页面的内容文字颜色设置） } ul{ list-style:none; }网站居中设置，举例： .top{ margin:0px auto 0px auto;（居中） width:976px; height:134px; background:url(img/top.jpg) no-repeat; } 2、元素/占位符 ?网站的中文名：占位符——$show_Cn_title$ （标准：同封皮） ?网站的适用课程：占位符——$fit_Course$ （标准：同封皮） ?网站访问量：占位符——$show_CourseInfo$ （标准：同封皮） ?导航条：占位符（10个，其中前8个为教师可设置的栏目，后2个是互动栏目） $show_TopMenu_1$ $show_TopMenu_2$ $show_TopMenu_3$ $show_TopMenu_4$ $show_TopMenu_5$ $show_TopMenu_6$ $show_TopMenu_7$ $show_TopMenu_8$ $show_ResourceLib$ $show_LiveSpire$ 举例： .topmenu{ width:940px; height:45px; } .topmenu ul{ margin:0px;（ul，li均不设样式，照搬就行，样式都写在li a中） padding:0px; } .topmenu li{ float:left;