回麻雀苑主页 到麻雀苑-搜狐博客
在众多网页设计的教材中，都以讲授怎样使用FrontPage或Dreamweaver等工具软件设计制作网页的过程为主，忽视了网页设计规范的详细介绍。教师们在教学中自然而然也就把教学重点放在了软件的掌握和使用上。因此学生们设计制作的网站不符合规范的情况非常多，尤其是低年级多学生更加严重。他们觉得学会了FrontPage和网页设计三剑客的使用，就掌握了网页设计的技术。孰不知这是一种严重缺腿的技能。
网页设计和其他任何工作都有他自身的规矩。比如一个木匠制作一个写字台，他应该熟练掌握锛、凿、斧、锯、刨等各种木材加工的工具，但更要了解写字台用于何处，构成它的台面、框架、抽屉、柜橱等各种部件使用什么材质的木料，每种部件使用多少方料、板料、薄板，每种木料的数量和长、宽、高尺寸，还应了解需要多少、什么样的胶、合页、拉手等辅料。因此他应该先有一张图纸，从图纸分解出每个部件的数据资料，再将部件的资料分解得出所需各种木料的材质、规格、尺寸。然后他才能够开料、备料、加工，之后将按规格加工好的木料组合成部件，最后将部件组装成一个完整的写字台。为此我们看到他经历了需求分析、整体设计、具体设计、准备并加工原材料、制作部件、组装成完整的成品几个步骤。而在每个步骤中，都有相应规矩。我们设计制作网页，同样有类似的过程和相应的规矩。
网页设计制作在当前社会是一种按照明确规范进行工作的过程。但有些教材和教师的讲授忽视了规范的存在。规范被忽视是因为这些人认为我们讲授的是技术和技能，“设计规范”是将来学生就业后自然就会掌握的东西，没有给以重视。还有就是这些规范很多人本身也不太清楚，有些规范又是约定俗成的，不是什么硬性的规定。但我们从事的是职业技术教育，不能让学生设计制作出的网页不合格，要使学生就业就能从容的面对社会需求。因此我们应重视这个问题。下面是我大量观察各种网站，从互联网上搜集相关资料，整理出来的一些看法，提出来供大家参考。网页设计的规范大致可以分为如下的几个方面：
1.制作过程的规范
2.文件组织的规范
3.命名的规范
4.尺寸、大小的规范
5.其他规范
站点设计制作过程的规范：
站点的设计制作要先进行需求分析。了解站点开设的目的，确定主题和构成的内容。第二步进行整体规划设计，确定站点的结构。要将所有的内容分成几个栏目和若干层次，画出站点的结构图。在结构设计中要注意结构层次的合理，每个单元都有自己的主题及适当的幅面。第三步收集、编辑所需的素材。所有的文字、图片、动画、视频材料要备齐，然后编辑整理成所需的规格和尺寸，一定注意“兵马未动，粮草先行”，材料的编辑整理同样有规范要求，后面将具体说明。第四步设计制作主页。主页的上端要有明显的主题文字或图片，下端要有版权、联系方式，网页的内容要以引导用户浏览整个网站的链接为主，尤其是网站开设的栏目，要用导航栏的形式安排在主页的上端主题下。第五步分别设计下层的各个网页。每个网页设计制作 都要先布局再添加内容。第六步添加完善主页、各个网页之间的超级链接，要形成整体完善的导航系统，不能出现任何一条走不通的支路。第七步网站整体测试。要保证所有的超级链接、图片、动画、视频有效。要尽量将站点放置在局域网的Web服务器，使用客户机进行浏览测试。第八步申请域名，将站点发布上传到互联网指定服务器。
在具体的站点设计制作中，一定要先创建站点，再设计制作主页，然后再设计制作其他的网页。每个网页的设计制作，都必须先布局，再添加内容，最后进行链接。
站点文件组织的规范
网站由若干网页文件构成，再加上图片文件，一个小站点也有几十个文件。站点在计算机硬盘上表现为一个文件夹，如果将所有文件都堆放在站点文件夹内，就非常零乱，也为今后站点的更新带来很多麻烦。规范的组织文件，要求在站点文件夹中开设若干子文件夹，将不同的文件分明别类的管理起来，一般开设如下文件夹：
images文件夹：放不同栏目的页面都要用到的公共图片；
common文件夹：放css、js,、jsp、include 等公共文件；
media 文件夹：放flash, avi, quick time 等多媒体文件 。
在站点文件夹中一般应按照首页的栏目结构，给每一栏目开设一个子文件夹，存放html文档，如果栏目的文件较多，就在栏目文件夹中，开设images 和media 的子文件夹，用以放置此栏目专有的图片和多媒体文件。
主页文件（index.htm）不放在任何一个子文件夹内，而是直接放在站点根文件夹内，它是唯一不在子文件夹内的html文档。
文件命名的规范
所有的文件名都必须为小写字母；
如果文件名字母间需要加连线，应为下划线；
文件名中不应该出现空格和汉字，否则在链接时就会链接不上；
主页（索引文件）统一使用index.htm文件名。index.htm文件一般不制作具体内容，它是站点的门面和总览页，以表现站点风范、站点的导航、内容提要为主。
其他网页的文件名，一般应按主页栏目名的英语翻译取单一单词为名称。例如：关于我们 aboutus.htm；信息反馈 feedback.htm；产 品 product.htm等。也可以使用汉语拼音或汉语拼音的缩写取代英文单词。例如：公司介绍 gongsijieshao.htm或gsjs.htm；产品目录：chanpinmulu.htm或cpml.htm；留言：liuyan.htm等等。但无论如何不能使用汉字作文件名。
图片文件命名原则，在公用的images中，要使用栏目文件夹明+_+英文单词或汉语拼音构成。例如：一个花店网站中有aiqing（爱情）、jiankang（健康）等栏目文件夹，用于爱情栏目中的牡丹花 aiqing_mudan.gif，用于健康栏目中的康乃馨 jiankang_kangnaixin.gif。当使用成组的系列图片时，要使用字母加编号的方法命名。例如一组钢笔的图片 pen1.jpg、pen2.jpg、pen3.jpg，或是gb1.jpg、gb2.jpg、gb3.jpg。
鼠标感应效果图片命名规范为"图片名+_+on/off"。例如：menu1_on.gif以及menu1_off.gif等等。
尺寸、大小的规范
早期的页面标准是640×480 px，目前已经基本淘汰。当前的标准为800×600 px。近两年有一个1024×768 px较新标准有人使用，但互联网上很少出现。因此我们要按800×600 px分辨率制作。这个标准制作的页面，实际尺寸为760×420px。
页面长度原则上不超过3屏，宽度不得超过1屏 （在屏幕的浏览器窗口中，只能出现垂直滚动条，而不能出现水平滚动条）。
Banner图片：大型468×60px，中型234×60px，小型88×31px。
图标的标准尺寸120×90 px或120×60px。
LOGO：大型120×90 px，中型120×60 px，小型88×31 px。
每个非首页静态页面含图片文件得字节不超过60K，大型banner图片不超过14K，目的是提高下载的速度。
其他的一些规范
网页中的图片要经过优化，再插入到页面上。主要目的是缩小图片文件的字节数，提高下载速度。
网页中的插入的图片不能改变原图片的纵横比，也就是不能使图片变形。
主页上的超级链接，要使用弹出新窗口的方式调出下层网页。一般不使用切换的方式，造成主页窗口的关闭。而同一层网页之间的调用，不使用弹出新窗口的方式，要直接切换调用。非主页调用下层网页，要根据实际情况确定调用的方式。
过长的文字页面，要将文字分成章节、段落，使用书签（锚点）技术，方便用户点击链接，能够直接转到所需的章节进行阅读。
和站点无关的文字、图片、超级链接，再精彩也不要插入。因为它只能冲淡你设计制作站点的作用，或使浏览者成为站点的匆匆过客。
站点中所有网页的设计风格，要保持一致，色彩的应用和布局的方式，在视觉上对站点风格一致性影响较大。
除非特殊需要，没有完成的站点不能发布送到互联网上，使得许多链接出现“待建设中”，只能造成浏览用户的失望和大量流失。
以上的一些看法，是很多网页设计制作者，多年来在实践中用经验和教训换来的。整理出来供大家参考，或许对于编写新得教材，向学生进行讲授有一点帮助。不正确的地方，欢迎大家的批评指正。
北京信息职业技术学院 网络工程系 段保珠
2006-05-04
在网页设计中要重视“规范设计”
作者：老麻雀 2006-8-7 0:01:11
在网页设计中要重视“规范设计”在众多网页设计的教材中，都以讲授怎样使用FrontPage或Dreamweaver等工具软件设计制作网页的过程为主，忽视了网页设计规范的详细介绍。教师们在教学中自然而然也就把教学重点放在了软件的掌握和使用上。因此学生们设计制作的网站不符合规范的情况非常多，尤其是低年级多学生更加严重。他们觉得学会了FrontPage和网页设计三剑客的使用，就掌握了网页设计的技术。孰不知这是一种严重缺腿的技能。
网页设计和其他任何工作都有他自身的规矩。比如一个木匠制作一个写字台，他应该熟练掌握锛、凿、斧、锯、刨等各种木材加工的工具，但更要了解写字台用于何处，构成它的台面、框架、抽屉、柜橱等各种部件使用什么材质的木料，每种部件使用多少方料、板料、薄板，每种木料的数量和长、宽、高尺寸，还应了解需要多少、什么样的胶、合页、拉手等辅料。因此他应该先有一张图纸，从图纸分解出每个部件的数据资料，再将部件的资料分解得出所需各种木料的材质、规格、尺寸。然后他才能够开料、备料、加工，之后将按规格加工好的木料组合成部件，最后将部件组装成一个完整的写字台。为此我们看到他经历了需求分析、整体设计、具体设计、准备并加工原材料、制作部件、组装成完整的成品几个步骤。而在每个步骤中，都有相应规矩。我们设计制作网页，同样有类似的过程和相应的规矩。
网页设计制作在当前社会是一种按照明确规范进行工作的过程。但有些教材和教师的讲授忽视了规范的存在。规范被忽视是因为这些人认为我们讲授的是技术和技能，“设计规范”是将来学生就业后自然就会掌握的东西，没有给以重视。还有就是这些规范很多人本身也不太清楚，有些规范又是约定俗成的，不是什么硬性的规定。但我们从事的是职业技术教育，不能让学生设计制作出的网页不合格，要使学生就业就能从容的面对社会需求。因此我们应重视这个问题。下面是我大量观察各种网站，从互联网上搜集相关资料，整理出来的一些看法，提出来供大家参考。网页设计的规范大致可以分为如下的几个方面：
1.制作过程的规范
2.文件组织的规范
3.命名的规范
4.尺寸、大小的规范
5.其他规范
站点设计制作过程的规范：
站点的设计制作要先进行需求分析。了解站点开设的目的，确定主题和构成的内容。第二步进行整体规划设计，确定站点的结构。要将所有的内容分成几个栏目和若干层次，画出站点的结构图。在结构设计中要注意结构层次的合理，每个单元都有自己的主题及适当的幅面。第三步收集、编辑所需的素材。所有的文字、图片、动画、视频材料要备齐，然后编辑整理成所需的规格和尺寸，一定注意“兵马未动，粮草先行”，材料的编辑整理同样有规范要求，后面将具体说明。第四步设计制作主页。主页的上端要有明显的主题文字或图片，下端要有版权、联系方式，网页的内容要以引导用户浏览整个网站的链接为主，尤其是网站开设的栏目，要用导航栏的形式安排在主页的上端主题下。第五步分别设计下层的各个网页。每个网页设计制作 都要先布局再添加内容。第六步添加完善主页、各个网页之间的超级链接，要形成整体完善的导航系统，不能出现任何一条走不通的支路。第七步网站整体测试。要保证所有的超级链接、图片、动画、视频有效。要尽量将站点放置在局域网的Web服务器，使用客户机进行浏览测试。第八步申请域名，将站点发布上传到互联网指定服务器。
在具体的站点设计制作中，一定要先创建站点，再设计制作主页，然后再设计制作其他的网页。每个网页的设计制作，都必须先布局，再添加内容，最后进行链接。
站点文件组织的规范
网站由若干网页文件构成，再加上图片文件，一个小站点也有几十个文件。站点在计算机硬盘上表现为一个文件夹，如果将所有文件都堆放在站点文件夹内，就非常零乱，也为今后站点的更新带来很多麻烦。规范的组织文件，要求在站点文件夹中开设若干子文件夹，将不同的文件分明别类的管理起来，一般开设如下文件夹：
images文件夹：放不同栏目的页面都要用到的公共图片；
common文件夹：放css、js,、jsp、include 等公共文件；
media 文件夹：放flash, avi, quick time 等多媒体文件 。
在站点文件夹中一般应按照首页的栏目结构，给每一栏目开设一个子文件夹，存放html文档，如果栏目的文件较多，就在栏目文件夹中，开设images 和media 的子文件夹，用以放置此栏目专有的图片和多媒体文件。
主页文件（index.htm）不放在任何一个子文件夹内，而是直接放在站点根文件夹内，它是唯一不在子文件夹内的html文档。
文件命名的规范
所有的文件名都必须为小写字母；
如果文件名字母间需要加连线，应为下划线；
文件名中不应该出现空格和汉字，否则在链接时就会链接不上；
主页（索引文件）统一使用index.htm文件名。index.htm文件一般不制作具体内容，它是站点的门面和总览页，以表现站点风范、站点的导航、内容提要为主。
其他网页的文件名，一般应按主页栏目名的英语翻译取单一单词为名称。例如：关于我们 aboutus.htm；信息反馈 feedback.htm；产 品 product.htm等。也可以使用汉语拼音或汉语拼音的缩写取代英文单词。例如：公司介绍 gongsijieshao.htm或gsjs.htm；产品目录：chanpinmulu.htm或cpml.htm；留言：liuyan.htm等等。但无论如何不能使用汉字作文件名。
图片文件命名原则，在公用的images中，要使用栏目文件夹明+_+英文单词或汉语拼音构成。例如：一个花店网站中有aiqing（爱情）、jiankang（健康）等栏目文件夹，用于爱情栏目中的牡丹花 aiqing_mudan.gif，用于健康栏目中的康乃馨 jiankang_kangnaixin.gif。当使用成组的系列图片时，要使用字母加编号的方法命名。例如一组钢笔的图片 pen1.jpg、pen2.jpg、pen3.jpg，或是gb1.jpg、gb2.jpg、gb3.jpg。
鼠标感应效果图片命名规范为"图片名+_+on/off"。例如：menu1_on.gif以及menu1_off.gif等等。
尺寸、大小的规范
早期的页面标准是640×480 px，目前已经基本淘汰。当前的标准为800×600 px。近两年有一个1024×768 px较新标准有人使用，但互联网上很少出现。因此我们要按800×600 px分辨率制作。这个标准制作的页面，实际尺寸为760×420px。
页面长度原则上不超过3屏，宽度不得超过1屏 （在屏幕的浏览器窗口中，只能出现垂直滚动条，而不能出现水平滚动条）。
Banner图片：大型468×60px，中型234×60px，小型88×31px。
图标的标准尺寸120×90 px或120×60px。
LOGO：大型120×90 px，中型120×60 px，小型88×31 px。
每个非首页静态页面含图片文件得字节不超过60K，大型banner图片不超过14K，目的是提高下载的速度。
其他的一些规范
网页中的图片要经过优化，再插入到页面上。主要目的是缩小图片文件的字节数，提高下载速度。
网页中的插入的图片不能改变原图片的纵横比，也就是不能使图片变形。
主页上的超级链接，要使用弹出新窗口的方式调出下层网页。一般不使用切换的方式，造成主页窗口的关闭。而同一层网页之间的调用，不使用弹出新窗口的方式，要直接切换调用。非主页调用下层网页，要根据实际情况确定调用的方式。
过长的文字页面，要将文字分成章节、段落，使用书签（锚点）技术，方便用户点击链接，能够直接转到所需的章节进行阅读。
和站点无关的文字、图片、超级链接，再精彩也不要插入。因为它只能冲淡你设计制作站点的作用，或使浏览者成为站点的匆匆过客。
站点中所有网页的设计风格，要保持一致，色彩的应用和布局的方式，在视觉上对站点风格一致性影响较大。
除非特殊需要，没有完成的站点不能发布送到互联网上，使得许多链接出现“待建设中”，只能造成浏览用户的失望和大量流失。
以上的一些看法，是很多网页设计制作者，多年来在实践中用经验和教训换来的。整理出来供大家参考，或许对于编写新得教材，向学生进行讲授有一点帮助。不正确的地方，欢迎大家的批评指正。
北京信息职业技术学院 网络工程系 段保珠
2006-05-04
游客于2008-3-28 13:49:12写道：| 发文时请务必注意： 一、遵守国家相关法律规定，如 《北京地区互联网站电子公告服务倡议书》， 《全国人大常委会关于维护互联网安全的决定》 及中华人民共和国其他各项有关法律法规。一旦违犯法律法规，您将承担一切因您的行为而直接或间接导致的民事或刑事法律责任，本站工作人员有义务配合相关部门，提供必要的技术资料（如IP地址等）。 二、自觉遵守爱国、守法、自律、真实、文明的原则，严禁发表有人身攻击倾向、有造谣生事嫌疑的言论，严禁发表虚假广告、色情、网络传销性质的内容，本站管理人员有权删除违反规定的内容或取消违规网友的发文权限甚至删除其ID。 |
段保珠 版权所有 E-mail:dbz@sina.com
阿酷科技 Arkoo.com 提供底层技术
阿酷科技 Arkoo.com 提供底层技术