首页  ·  知识 ·  前端
网站制作和网页设计中的一些推荐规范
网友       编辑:dezai   图片来源:网络
font-size: 16px 01 命名规范 文件命名的原则:以

01 命名规范

文件命名的原则:以最少的字母达到最容易理解的意义。
一般文件及目录命名规范:
每一个目录中应该包含一个缺省的html 文件,文件名统一用index.html
文件名称统一用小写的英文字母、数字和下划线的组合
尽量按单词的英语翻译为名称。例如:feedback(信息反馈),aboutus(关于我们)
多个同类型文件使用英文字母加数字命名,字母和数字之间用_分隔。例如:news_01.htm。注意,数字位数与文件个数成正比,不够的用0补齐。例如共有200条新闻,其中第18条命名为news_018.htm
也可以用目录来区分不同的终端页面,比如 html/Article/01.html 或者 html/Product/01.html

图片的命名规范 :
名称分为头尾两两部分,用下划线隔开。
头部分表示此图片的大类性质。例如: 放置在页面顶部的广告、装饰图案等长方形的图片我们取名:banner ;标志性的图片我们取名为:logo ;在页面上位置不固定并且带有链接的小图片我们取名为button ;在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名:menu ;装饰用的照片我们取名:pic ;不带链接表示标题的图片我们取名:title 依照此原则类推。

尾部分用来表示图片的具体含义,用英文字母表示。例如:banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg.
有onmouse效果的图片,两张分别在原有文件名后加"_on"和"_off"命名。

其它文件命名规范
js的命名原则以功能的英语单词为名。例如:登陆页面使用的相关JS文件:login.js,注意:为了防止maxthon之类的浏览器屏蔽广告内容,取名应避免ad.后缀名

02 目录结构规范

目录建立的原则:以最少的层次提供最清晰简便的访问结构。
目录的命名以小写英文字母,下划线组成。(参照命名规范)
根目录一般只存放index.htm以及其他必须的系统文件
每个主要栏目开设一个相应的独立目录
根目录下的images用于存放各页面都要使用的公用图片,子目录下的images目录存放本栏目页面使用的私有图片
所有JS,ASP,PHP等脚本存放在根目录下的scripts目录
所有CGI程序存放在根目录下的cgi-bin目录
所有CSS文件存放在根目录下style目录
每个语言版本存放于独立的目录。例如:简体中文gb
所有flash, avi, ram, quicktime 等多媒体文件存放在根目录下的media目录
各种不同用途和功能的文件归类存放至不同的文件夹,也有利于在服务器端设置不同的访问权限来提高网站的安全性

03 尺寸规范

尺寸规范请根据您的实际情况调整:
页面标准如今基本都是按按1024*768分辨率制作,推荐尺寸为980*580px
页面长度原则上不超过3屏,宽度不超过1屏
全尺寸banner为468*60px,半尺寸banner为234*60px,小banner为88*31px,另外160*120、120*90,120*60也是小图标的标准尺寸
图片当然是在保证清晰度的情况下,文件越小越好。

04 首页代码规范

首页的代码关键在head区,head区是指首页HTML代码的<head>和</head>之间的内容。
head区必须加入的标识
公司版权注释 <!--- The site is designed by yourcompany,Inc 03/2001 --->
网页显示字符集 例如:
简体中文:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
原始制作者信息 <META name="author" content="webmaster@yoursite.com">
网站简介 <META NAME="DESCRIPTION" CONTENT="这里填您网站的简介">
搜索关键字 <META NAME="keywords" CONTENT="关键字1,关键字2,关键字3,...">
网页的css规范 <LINK href="style/style.css" rel="stylesheet" type="text/css">
网页标题 <title>这里是你的网页标题</title>

head区可以选择加入的标识
设定网页的到期时间。一旦网页过期,必须到服务器上重新调阅。
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
禁止浏览器从本地机的缓存中调阅页面内容。
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
用来防止别人在框架里调用你的页面。
<META HTTP-EQUIV="Window-target" CONTENT="_top">
自动跳转。
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.68design.net">
5指时间停留5秒。

网页搜索机器人向导.用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。
<META NAME="robots" CONTENT="none">
CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。
收藏夹图标
<link rel = "Shortcut Icon" href="favicon.ico">
JS调用规范
所有的javascript脚本尽量采取外部调用
<SCRIPT LANGUAGE="JavaScript" SRC="script/xxxxx.js"></SCRIPT>

CSS书写规范
所有的CSS的尽量采用外部调用
<LINK href="style/style.css" rel="stylesheet" type="text/css"> 书写时重定义的最先,伪类其次,自定义最后(其中a:link a:visited a:hover a:actived 要按照顺序写)便于自己和他人阅读。

本文作者:网友 来源:网络
CIO之家 www.ciozj.com 微信公众号:imciow
    >>频道首页  >>网站首页   纠错  >>投诉
版权声明:CIO之家尊重行业规范,每篇文章都注明有明确的作者和来源;CIO之家的原创文章,请转载时务必注明文章作者和来源;
延伸阅读
也许感兴趣的
我们推荐的
主题最新
看看其它的