网页设计规范.doc
网页设计规范.doc
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
- 网页 设计规范
- 资源描述：
-
网站制作 Apple QQ:345374621 网页设计规范参考 总论 2 一、目 录 结 构 规 范 2 1. 网站目录划分 2 2. 多级目录 2 3. 目录、文件的命名规范 2 二、文 件 命 名 原 则 2 1. 命名原则的指导思想 2 2. 路径/文件名设定 3 3. 各路径下的开始文件 3 4. html 文件的命名原则 3 5. 图片的命名原则 3 三、一 般 原 则 4 1. 表格问题 4 2. 首行缩进 4 3. 图片 4 4. 字号 4 5. 中英文混排时 4 6. 行距 4 7. 网站中的路径 5 四、代 码 编 写 规 范 5 1. 首页head区代码规范 5 2. 页面内容部分代码规范 5 3. CSS 文件的格式样例代码 6 4. CSS的命名规范及部分简写说明 6 5. CSS和JS尽量采取外部调用 7 总论 参考网上的一些文章和部分门户网站规范，结合用户浏览习惯以及实际策划、设计、使用中的经验，制订了《网站设计规范参考》，本规范既是一个开发规范，也是一个脚本语言参考，本规范并不是一个一成不变的必须严格遵守的条文，特殊情况下要灵活运用，做一定的变通。但是，请大家千万不要随意更改规范。如果有任何问题，请及时与我联系，我会及时更改本规范的相关代码样例和文档。 一、目 录 结 构 规 范 1. 网站目录划分 在网站根目录中开设images 、js 、css、temp子目录 ☆ images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志、banner 条、菜单、按钮等等； ☆ css 子目录中放css文件，如果站点模板多尽量分成多个css文件调用； ☆ js 子目录中一般放javascript文件； ☆ temp 子目录放客户提供的各种文字图片等等原始资料。temp 目录中的文件往往会比较多，建议以时间为名称开设目录，将客户陆续提供的资料归类整理。 ☆ 广告、交换链接、banner等图片保存到images下adv目录 2. 多级目录 在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images 和media 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。 3. 目录、文件的命名规范 除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文为指导，尽量避免用拼音命名。 二、文 件 命 名 原 则 1. 命名原则的指导思想 命名原则的指导思想是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。 2. 路径/文件名设定 路径/文件名称需与栏目菜单名称具有相关性。一律采用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文翻译为优先，尽量避免使用拼音作为目录名称 3. 各路径下的开始文件 各路径下的开始文件，命名为index.* 静态文件为index.html，动态文件为 index.asp,index.aspx,index.php,index.jsp 4. html 文件的命名原则 下面以“新闻”（包含“国内新闻”和“国际新闻”）这个栏目来说明html 文件的命名原则 ： ☆ 在根目录下开设news目 录 ☆ 第一条缺省新闻取名index.htm ☆ 所有属于“国内新闻”的新闻依次取名为：china_1.htm, china_2.htm, … ☆ 所有属于“国际新闻”的新闻依次取名为：internation_1.htm, internation _2.htm, … ☆ 如果文件的数量是两位数，请将前九个文件命名为：china_01.htm, china_02.htm 以保证所有的文件能够在文件夹中正确排序。 ☆需定期更新的页面文件或文本采用：名称缩写＋(年份)＋月份＋日期＋序号，如： news081508.* 5. 图片的命名原则 ☆ 名称分为头尾两两部分，用下划线隔开。 ☆ 头部分表示此图片的大类性质，例如广告、标志、菜单、按钮等等。 ☆ 一般来说: 放置在页面顶部的广告、装饰图案等长方形的图片我们取名：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 三、一 般 原 则 1. 表格问题 在排布表格之前，请大家一定要好好思考一个最佳的方案，表格的嵌套尽量控制在三层以内，并且应该尽量避免 <colspan> <rowspan> 两个标记。一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用 <tbody>标记，以便能够使这个大表格分块显示。 2. 首行缩进 排版中我们经常会遇到需要进行首行缩进的处理，不要使用空格或者全角空格来达到效果，规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上 <p> 标记，注意，请不要省略 </p> 结束标记 。 3. 图片 采用gif,jpg格式，每幅图片要有本图片的说明文字(alt=””)，这样如果图片不能正常显示，也可知道图片处代表什么意思。原则上，禁止用 <img width=? height=?> 来人为干预图片显示的尺寸，而且建议 <img> 标签中不要带上width 和height 两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当网页还未加载图片时，不会留出图片的站位大小，可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的，不会有这个现象），尤其是当图片的尺寸较大时，这种现象会很明显，所以当预料到这种会明显导致网页抖动的情况会发生时，请大家务必在最后给 <img>附上 width 和 height 属性。 4. 字号 所有的字号都应该用样式表来实现，尽量不要在页面中出现 <font size=?> 标记。 5. 中英文混排时 中英文混排时，我们尽可能的将英文和数字定义为verdana 和arial 两种字体。 6. 行距 建议用百分比来定义，常用的两个行距的值是line-height:140%到180%之间。 四、代 码 编 写 规 范 我们应该有一个代码整体风格一致的概念，不同时期编写的代码风格应保持一致，以及同一个工作组中不同的开发人员编写的脚本风格保持一致以便随时查找、修改。 1. 首页head区代码规范 head区是指首页HTML代码的<head>和</head>之间的内容。 head区必须加入的标识 1）公司版权注释 <!--- The site is designed by yourcompany,Inc 05/2007 ---> 2）网页显示字符集 例如： 简体中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312"> 繁体中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=BIG5"> 英 语：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> 3）网站简介 <META NAME="DESCRIPTION" CONTENT="网站的简介"> 4）搜索关键字 <META NAME="keywords" CONTENT="关键字1,关键字2..."> 5）网页的css规范 <LINK href="commom/style.css" rel="stylesheet" type="text/css"> 网页标题 <title>网页标题</title> 收藏夹图标 <link rel = "Shortcut Icon" href="favicon.ico"> 2. 页面内容部分代码规范 在写 <table> 互相嵌套时，对于单独的一个<table>来说，<table><tr>对齐，<td> 缩进两个半角空格，<td> 中如果还有嵌套的表格，<table>也缩进两个半角空格，如果<td>中没有任何嵌套的表格，</td> 结束标记应该与 <td> 处于同一行，不要换行， 如我们注意在源代码中不应有这样的代码： <td><img src=”../images/sample.gif”> </td> 而应该是这样的： <td><img src=”../images/sample.gif”></td> 这是因为浏览器认为换行相当于一个半角空格，以上不规范的写法相当于无意中增加一个半角空格，如果确实有必要增加一个半角空格，也应该这样写： <td><img src=”../images/sample.gif”> </td> 属于同一个级别 的 <table> 一定是左首对齐的，另外不允许没有任何内容的空的单元格存在，高度大于等于12px 的单元格应该 在 <td> 和 </td> 之间写一个空格。如果高度小于12px, 则应该 在 <td> 和 </td> 之间插入一个1*1 大小的透明的gif 图片，这是因为某些浏览器认为空单元格非法而不会予以解释。如果代码顺序较乱，在DW3中可以通过command->apply souce formatting进行重新整理！ 3. CSS 文件的格式样例代码 <style type="text/css"> <!— p { text-indent: 2em; } body { font-family: "宋体"; font-size: 12px; color: #000000; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px} table { font-family: "宋体"; font-size: 12px; line-height: 20px; color: #000000} a:link { font-size: 12px; color: #FFFFFF; text-decoration: none} a:visited { font-size: 12px; color: #99FFFF; text-decoration: none} a:hover { font-size: 12px; color: #FF9900; text-decoration: none} a:active { font-size: 12px; color: #FF9900; text-decoration: none} a.1:link { font-size: 12px; color: #3366cc; text-decoration: none} a.1:visited { font-size: 12px; color: #3366cc; text-decoration: none} a.1:hover { font-size: 12px; color: #FF9900; text-decoration: none} a.1:active { font-size: 12px; color: #FF9922; text-decoration: none} .blue { font-family: "宋体"; font-size: 10.5pt; line-height: 20px; color: #0099FF; letter-spacing: 5em} --> </style> a:link a:visited a:hover a:actived 的排列顺序一定要严格照上面的样例代码。 为了保证不同浏览器上字号保持一致，字号建议用像素px来定义，一般使用中文宋体12px 和14.7px。 4. CSS的命名规范及部分简写说明 以下结构可以组合使用，例如：左列标题lefttitle；底部导航footernav 书写原则是： 1.一律小写； 2.尽量用英文； 3.不加中杠； 4.尽量不缩写，除非一看就明白的单词 ； 5.如果可以话，最好加上中文说明； 页头：header 登录条：loginbar 标志：logo 侧栏：sidebar 广告：banner 主 导 航：mainnav 导航：nav 顶 导 航：topnav 子导航：subnav 菜单：menu 子菜单：submenu 菜单内容：menucontent 搜索：search 滚动：scroll 页面主体：main 内容：content 标签页：tab 文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guide 服务：service 热点：hot 新闻：news 下载：download 注册：regsiter 状态：status 按钮：btn 投票：vote 合作伙伴：partner 友情链接：friendlink 页脚：footer 版权：copyright 容 器：container/box 搜索关键字：keyword 搜索范围：range 标签文字：tagTitle 标签内容：tagcontent 当前标签：tagcurrent/currenttag 列 表：list 当前位置：currentpath 侧 边 栏：sidebar 图 标：icon 注 释：note 登 录：login 注 册：register 列 定 义：column_1of3 (三列中的第一列) column_2of3 (三列中的第二列) column_3of3 (三列中的第三列) 5. CSS和JS尽量采取外部调用 所有的css尽量采取外部调用 <LINK href=" common /style.css" rel="stylesheet" type="text/css"> 所有的javascript脚本尽量采取外部调用 <SCRIPT LANGUAGE="JavaScript" SRC="common/xxxxx.js"></SCRIPT>展开阅读全文
咨信网温馨提示：1、咨信平台为文档C2C交易模式，即用户上传的文档直接被用户下载，收益归上传人（含作者）所有；本站仅是提供信息存储空间和展示预览，仅对用户上传内容的表现方式做保护处理，对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿，我们不确定上传用户享有完全著作权，根据《信息网络传播权保护条例》，如果侵犯了您的版权、权益或隐私，请联系我们，核实后会尽快下架及时删除，并可随时和客服了解处理情况，尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确)，网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据，个别因单元格分列造成显示页码不一将协商解决，平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺，下载前须认真查看，确认无误后再购买，务必慎重购买；若有违法违纪将进行移交司法处理，若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传，付费前请自行鉴别，如您付费，意味着您已接受本站规则且自行承担风险，本站不进行额外附加服务，虚拟产品一经售出概不退款（未进行购买下载可退充值款），文档一经付费（服务费）、不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印，是因预览和防盗链等技术需要对页面进行转换压缩成图而已，我们并不对上传的文档进行任何编辑或修改，文档下载后都不会有水印标识（原文档上传前个别存留的除外），下载后原文更清晰；试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓；PPT和DOC文档可被视为“模板”，允许上传人保留章节、目录结构的情况下删减部份的内容；PDF文档不管是原文档转换或图片扫描而得，本站不作要求视为允许，下载前可先查看【教您几个在下载文档中可以更好的避免被坑】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用；网站提供的党政主题相关内容(国旗、国徽、党徽－－等)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
6、文档遇到问题，请及时联系平台进行协调解决，联系【微信客服】、【QQ客服】，若有其他问题请点击或扫码反馈【服务填表】；文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“【版权申诉】”，意见反馈和侵权处理邮箱：1219186828@qq.com；也可以拔打客服电话：0574-28810668；投诉电话：18658249818。
实名认证
平台协调中心【客服】
自信AI助手
微信客服
客服QQ
发送邮件
意见反馈
链接地址：https://www.zixin.com.cn/doc/7029238.html