DIV+CSS制作专业信息网站的制作规范

css|规范

专业信息网站制作规范

一. 导航要求

在此站点的每一个页面都出现
内容包括:主页,网站介绍,站点视图,联系方式,反馈,搜索工具,常见问题解答,实际内容栏目(包括相关站点链接、新闻页)
栏目如果采用图标,下面应附有文字说明,以避免图像表达不清。
无任何链接内容的不做成按钮的形式
纯文本like用常用颜色。避免在链接处使用特殊的颜色。应该使用标准、醒目的颜色。
屏幕上显示的页面所对应的按钮应该相应变成灰色、突出显示或以其它方式表示出来。
每个页面都应包括: 版权及网站管理员的E-mail地址。
每个页面都应包括代表"返回"或"前进"的箭头。

二. 内容要求

1.网站介绍

背景介绍
栏目介绍(提供连接)

2. SITE MAP(站点结构图)

结构图(提供连接)

3. CONTACT PAGE(联系方式页)

网站管理员的E-mail地址(根据需要加入其它职能负责的E-mail)
通信地址,联系人,传真、电话号码等。

4. FEEDBACK FORMS(反馈表)Reasons :

姓名:
年龄:
职业:
单位:
联系方式:
意见建议:
根据实际就以上各项作调整,力求简洁有效

5. 实际内容,及栏目设置要求

在每页中都要包含相关的,引人入胜的内容。特别是当你要销售一种产品的时候,每个页面都要用详细的内容和图像精心修饰一番。
网页上的语言尽量通俗易懂。
用符号突出特别重要的内容,不要过多,保持页面的简洁。
不要把你的站点建成单纯的网上公司介绍,适当发布行业信息。

6. FAQs(常见问题解答)

将所有问题列于页面的上部,并将每个问题与答案链接在一起。
对专业用语及技术术语进行解释。
回答共性问题节省网管和访问者的时间和精力。

7. SEARCHING MECHANISMS(搜索工具)

在搜索框中键入关键词语或词组,在点击查寻按钮后,本站相关的网页列表就会出现在屏幕中。
有效查寻的说明。

8. 新闻

在最新更新的信息边加注一个亮丽的小图标 - “新!”。
为最新消息创建单独页面,并在一段时间后将新闻放置于适当的目录下。
在主页或每个页面下加注一行文字,表明本站点或每个单独的页面最近一次被更新的时间。

9. RELEVANT LINKS(相关站点链接)

提供其它网站链接,以提供更多相关信息。
每个链接做简要说明,并对它被链接的原因进行阐述。
每周对各链接站点作定期的访问,删除那些死站点。
为你的站点创建纯文本的版本。

三. VI标准化要求

logo 及中英文标准字体 (包括应用范例)
网站标准色(包含扩展范例)
链接图标(尺寸pixels: 88x318x60 )各两个(包括应用范例)

四. 网页制作技术要求

主要页面要写 title(主页要写上企业中英文名称)
主要页面meta字段便于搜索引擎查找。
img的长宽值和alt属性,使不能看图的用户也可以读懂页面。
以最流行的浏览器的最普及版本为标准,同时照顾低版本浏览器。为不同的浏览器分别制作不同的页面,以获得尽可能多的浏览量。
尽量使用广泛支持的技术。页面适应不同的屏幕分辨率。
不使用过小的字体
不使用过大的图片、动画、声音
不使用过长的滚屏

  网站设计工程的规范与管理

  随着互联网的发展,网站制作作为一个行业已经悄悄的兴起,越来越多的网站制作任务需要网页制作公司完成,越来越多的问题出现在网站制作的过程中。例如:不能按期完成制作,不能使客户满意,费用超出预算等等。仔细分析原因,发现大部分失败的原因有以下几点:

   a.忽视客户的不断变化的需求;

   b.没有保留历史文档作决策参考;

   c.忽视监督项目进度;

   d.忽视不断的测试和修改;

   e.没有使用专业的项目管理软件,靠主观决策。

   问题发现了,有没有一个好的解决办法可以减少失误,控制和管理网站制作呢?

   网站开发制作是一个很复杂的工作,可以将它看做一个项目来管理。作者参考了国际国内有关项目管理的资料,发现软件工程的管理方法和规范与网站建设项目最接近,因此我们在仔细研究软件工程后,针对网站建设的特点和重点,整理出一套网站建设管理和控制的方法,定名为网站工程(WebSite Project简称WP )。

   网站工程

   什么是网站工程,简单的说就是网站项目的管理和控制方法;是一种特殊的,标准的操作程序。建立网站工程的目的在于保证网站建设的高效率,高质量,低风险。

   网站工程标准的实行,不但使客户得益,更使得网站制作行业趋向规范化,它将对行业相关的每个人都有益,包括项目经理,网页设计师,程序员和编辑。

   下面,就按照一个项目从洽谈到提交完成的顺序来介绍:
   1.项目立项/客户的需求说明书

   1.1.项目立项

   我们接到客户的业务咨询,经过双方不断的接洽和了解,并通过基本的可行性讨论够,初步达成制作协议,这时就需要将项目立项。较好的做法是成立一个专门的项目小组,小组成员包括:项目经理,网页设计,程序员,测试员,编辑/文档等必须人员。项目实行项目经理制。

   1.2.客户的需求说明书

   第一步是需要客户提供一个完整的需求说明。很多客户对自己的需求并不是很清楚,需要您不断引导和帮助分析。曾经有一次,我问客户:“您做网站的目的是什么?”他回答:“没有目的,只是因为别人都有,我没有!”。这样的客户就需要耐心说明,仔细分析,挖掘出他潜在的,真正的需求。

   配合客户写一份详细的,完整的需求说明会花很多时间,但这样做是值得的,而且一定要让客户满意,签字认可。把好这一关,可以杜绝很多因为需求不明或理解偏差造成的失误和项目失败。糟糕的需求说明不可能有高质量的网站。那么需求说明书要达到怎样的标准呢?简单说,包含下面几点:

   a.正确性:每个功能必须清楚描写交付的功能;

   b.可行性:确保在当前的开发能力和系统环境下可以实现每个需求;

   c.必要性:功能是否必须交付,是否可以推迟实现,是否可以在削减开支情况发生时"砍"掉;

   d.简明性:不要使用专业的网络术语;

   e.检测性:如果开发完毕,客户可以根据需求检测。

   2.网站总体设计

   在拿到客户的需求说明后,并不是直接开始制作,而是需要对项目进行总体设计,详细设计,出一份网站建设方案给客户。总体设计是非常关键的一步。它主要确定:

   a.网站需要实现哪些功能;

   b.网站开发使用什么软件,在什么样的硬件环境;

   c.需要多少人,多少时间;

   d.需要遵循的规则和标准有哪些。

   同时需要写一份总体规划说明书,包括:

   a.网站的栏目和版块;

   b.网站的功能和相应的程序;

   c.网站的链接结构;

   d.如果有数据库,进行数据库的概念设计;

   e.网站的交互性和用户友好设计。

   在总体设计出来后,一般需要给客户一个网站建设方案。很多网页制作公司在接洽业务时就被客户要求提供方案。那时的方案一般比较笼统,而且在客户需求不是十分明确的情况下提交方案,往往和实际制作后的结果会有很大差异。所以应该尽量取得客户的理解,在明确需求并总体设计后提交方案,这样对双方都有益处。网站建设方案的包括以下几个部分:

   a.客户情况分析;

   b.网站需要实现的目的和目标;

   c.网站形象说明;

   d.网站的栏目版块和结构;

   e.网站内容的安排,相互链接关系;

   f.使用软件,硬件和技术分析说明;

   g.开发时间进度表;

   h.宣传推广方案;

   i.维护方案;

   j.制作费用;

   k.本公司简介:成功作品,技术,人才说明等。

   当您的方案通过客户的认可,那么恭喜你!您可以开始动手制作网站了。但还不是真正意义上的制作,你需要进行详细设计。

   附:国外网站的定价方法

   如何制定网站价格?对于那些小企业,价格开得太高,他们会吓跑,开的太低,自己得不到利润。由于行业竞争的无序性,国内现在的价格千奇百怪,有1000元制作整个商务网站的,也有2000元一页的快刀斩客。国外网页制作公司是如何指定网站制作价格的呢?

   首先是根据员工工资,各项费用,利润率来计算每小时工作成本,即:总价 = 工资 + 费用 + 利润

   举例说明:

   假设公司的月支付工资为5000元,费用为5000元,希望的利润率为20%,一月工作时间为22*8=176小时,根据调查,一般网页制作公司有20-40%时间为非工作时间。实际工作的时间为

   176*(1-25%)=132

   所以,每工作小时成本是:

   (5000+5000)*(1+20%) / 132 =90.90元

   当你了解了每小时工作成本,开价格就心里有数了。国外常见报价方法分三种:套餐法,时间法,项目评估法。

   套餐法:也称页面法,指定明确的页面数,图像数,链接数,功能等。这个办法最通用,但不是一个好办法,因为按照页面计价,解释很含糊 :(

   时间法:就是按照每小时成本计算。但是这种方法经常会遭到客户的质疑和拒绝,实行起来比较困难。

   项目评估法:将整个项目拆成一个一个小工作,评估工作的技能难度,计算完成时间,再根据每小时成本计价。

相关文章:浅论网站工程的管理与规范(下)

   网站详细设计

   总体设计阶段以比较抽象概括的方式提出了解决问题的办法。详细设计阶段的任务就是把解法具体化。详细设计主要是针对程序开发部分来说的。但这个阶段的不是真正编写程序,而是设计出程序的详细规格说明。这种规格说明的作用很类似于其他工程领域中工程师经常使用的工程蓝图,它们应该 包含必要的细节,例如:程序界面,表单,需要的数据等。程序员可以根据它们写出实际的程序代码。(这里不详细展开说明)

   1.整体形象设计

   在程序员进行详细设计的同时,网页设计师开始设计网站的整体形象和首页。

   整体形象设计包括标准字,Logo,标准色彩,广告语等。 首页设计包括版面,色彩,图像,动态效果,图标等风格设计,也包括banner,菜单,标题,版权等模块设计。首页一般设计1-3个不同风格,完成后,供客户选择。

   记住:在客户确定首页风格之后,请客户签字认可。以后不得再对版面风格有大的变动,否则视为第二次设计。

   2.开发制作

   到这里,程序员和网页设计师同时进入全力开发阶段,需要提醒的是,测试人员需要随时测试网页与程序,发现Bug立刻记录并反馈修改。不要等到完全制作完毕再测试,这样会浪费大量的时间和精力。项目经理需要经常了解项目进度,协调和沟通程序员与网页设计师的工作。

   3.调试完善

   在网站初步完成后,上传到服务器,对网站进行全范围的测试。包括速度,兼容性,交互性,链接正确性,程序健壮性,超流量测试等,发现问题及时解决并记录下来。

   为什么要记录文档呢?其实本软件工程本身就是一个文档,是一个不断充实和完善的标准。通过不断的发现问题,解决问题,修改,补充文档,使这个标准越来越规范,越来越工业化。进而使得网站开发趋向规范,趋向合理。

   4.宣传推广

   宣传推广的基本方法有:

   a.网页里设置适当的META标签;

   b.各搜索引擎登录;

   c.准备新闻稿件在各新闻公告板发表;

   d.合理使用Email邮件列表;

   e.广告条交换;

   f.付费广告。

   至此,网站项目建设完毕,将有关网址,使用操作说明文档等提交客户验收。如果需要维护,另行签定维护项目。

   (附)维护

   网站成功推出后,长期的维护工作才刚刚开始,我们需要做到的是:

   a.及时响应客户反馈;例如可以采取Email自动回复功能,然后在1-3个工作日里解决问题,再次回复;

   b.网站流量统计分析和相应对策;

   c.尽量推广和使用您的网址;

   d.网站内容的及时更新和维护。

   1.网站目录规范

   目录建立的原则:以最少的层次提供最清晰简便的访问结构。

   a.根目录。根目录指DNS域名服务器指向的索引文件的存放目录。根目录只允许存放index.html和main.html文件,以及其他必须的系统文件;

   b.每个语言版本存放于独立的目录;

   c.每个主要功能(主菜单)建立一个相应的独立目录;

   d.当页面超过20页,每个目录下存放各自独立images目录.共用的图片放在根目录下的images目录下;

   e.所有的js文件存放在根目录下统一目录script;

   f.所有的CSS文件存放在各语言版本下的style目录

   g.所有的CGI程序存放在根目录并列目录cgi_bin目录

   2.文件命名规范

   文件命名的原则:以最少的字母达到最容易理解的意义。

   a.索引文件统一使用index.html文件名(小写)。index.html文件统一作为"桥页",不制作具体内容,仅仅作为跳转页和meta标签页。主内容页为main.htm;

   b.菜单图片名称按菜单名的英语翻译为名称。例如:

   关于我们 aboutus

   信息反馈 feedback

   产 品 product

   所有单英文单词文件名都必须为小写,所有组合英文单词文件名第二个起第一个字母大写;

   c.所有文件名字母间连线都为下划线

   d.图片命名原则以图片英语字母为名。大小原则写同上。

   e.js的命名原则以功能的英语单词为名。例如:广告条的js文件名为:ad.js

   f.所有的CGI文件后缀为.cgi。

   3.链接结构规范

   链接结构的原则:用最少的链接,使得浏览最有效率。

   首页和一级页面之间用星状链接结构,一级和二级页面之间用树状链接结构。超过三级页面,在页面顶部设置导航条。

   4.尺寸规范

   a.页面标准按800*600分辨率制作,实际尺寸为778*434px

   b.每个标准页面为A4幅面大小,即8.5X11英寸

   c.大banner为468*60px,小banner为88*31px

   head区是指首页HTML代码的< head>和< /head>之间的内容。

   必须加入的标签:

   a.公司版权注释

   < !--- The site is designed by Maketown,Inc 06/2000 --->

   b.网页显示字符集

   简体中文:< 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">

   c.网页制作者信息

   < META name="author" content="webmaster@webjx.com">

   d.网站简介

   < META NAME="DESCRIPTION" CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx">

   e.搜索关键字

   < META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">

   f.网页的css规范

   < LINK href="/style/style.css" rel="stylesheet" type="text/css">

   g.网页标题

   < title>xxxxxxxxxxxxxxxxxx< /title>

   写在最后

   以上仅仅是网页教学网的经验和心得总结,而且偏重了设计方面。网站工程是一个复杂和全面的规范,还有许多方面和细节需要不断完善和规范,比如:网站工程的风险控制,网站项目的质量管理和人员考核,项目的分解和分配,网站的营销策划等等。希望通过这里的抛砖引玉,吸引更多的网站项目管理者来参与讨论,贡献自己的经验和见解,使我们的行业更加成熟,更加规范。

时间: 2024-12-11 10:14:39

DIV+CSS制作专业信息网站的制作规范的相关文章

div+css实现软件公司网站蓝色导航菜单代码

 本文实例讲述了div+css实现软件公司网站蓝色导航菜单代码.分享给大家供大家参考.具体如下: 这是一款基于div+css实现的软件公司网站蓝色导航菜单,非常大气的菜单,鼠标移过菜单的时候,菜单的背景就变化了,觉得挺实用,也比较好看的菜单,除了软件公司可使用,企业一类的站都可以用. 运行效果截图如下: 具体代码如下:   复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

在DIV+CSS排版中新闻列表的制作方法

css 最终效果: 2005年5月30日 新闻标题01 2005年5月30日 新闻标题02 2005年5月30日 新闻标题03 2005年5月30日 新闻标题04 CSS代码: .list{ margin: 0px 10px 20px; text-align: left; } .list ul{ list-style-type: none; margin: 0px; padding: 0px; } .list li{ background: url(/imagelist/06/31/gu432q

在DIV+CSS排版中新闻列表的制作方法_CSS/HTML

CSS代码: .list{ margin: 0px 10px 20px; text-align: left; } .list ul{ list-style-type: none; margin: 0px; padding: 0px; } .list li{ background: url(/news/images/line.gif) repeat-x bottom; /*列表底部的虚线*/ width: 100%; } .list li a{ color: #777777; display: b

DIV+CSS布局网页对网站SEO的影响

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 SEO主要就是通过对网站的结构,标签,排版等各方面的优化,使Google等搜索引擎更容易搜索网站的内容,并且让网站的各个网页在GOOGLE等搜索引擎中获得较高的评分,从而获得较好的排名.DIV+CSS网页布局对SEO有哪些影响呢? 代码精简 使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道.代码精简所带来的直接好处

DIV+CSS网页布局对于网站的好处

  一.代码精简 采用DIV+CSS布局使代码很精简,这一点相信对此方法熟透的朋友都有所了解的都知道,css文件可以在每一个网页中使用,只要调用就可以,采用table表格修改一些页面的话就很麻烦了,如果是一个门户网站的话,要手动改很多页面,而且看着那些表格也会感觉很乱也很浪费时间,但是这要是在css中只要改一个代码就可以了 二.表格嵌套 使用Table布局,为了达到一定的视觉效果,不得不套用多个表格,这样不仅表格会很多,还很乱;所以使用table为了达到很好的视觉效果,就要嵌套很多表格,这就会有

比较详细的DIV+CSS布局网页对网站SEO的影响_网站应用

SEO主要就是通过对网站的结构,标签,排版等各方面的优化,使Google等搜索引擎更容易搜索网站的内容,并且让网站的各个网页在GOOGLE等搜索引擎中获得较高的评分,从而获得较好的排名.DIV+CSS网页布局对SEO有哪些影响呢? 代码精简 使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道.代码精简所带来的直接好处有两点:一是提高spider爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处;二是由于能高效的爬行,就会受到spider喜欢,这样对收录数量

DIV+CSS网页布局及网站设计常犯错误

1.导航菜单使用图片.FLASH 导航菜单使用图片.FLASH当然比纯文本来得好看一些,但是搜索引擎并不认识你的图片和FLASH.如果你非要使用漂亮的图片来做导航的话,可以使用背景替换的方法(我会在下次谈到这一个方法的):如果你要使用FLASH做导航,那我就没你办法了.建议做一个导航菜单链接的xml文提交到搜索引擎. 2.不恰当地使用图片 为了网页美观,经常会到处贴满图片,这样做是不正确的,与内容无关的图片能少就少吧.我们可以把这些图片做成容器的背景. 3.内容里特殊字体的运用 我承认楷体很漂亮

重新认识网站制作过程中采用div+css的布局方式

伴随着"div+css"在互联网的流行,"网站重构"的春风吹遍了华夏大地,一时间互联网上风声鹤唳,"div+CSS"俨然已成为一种网站制作过程中采用一种布局的"时尚",数一万计的网站都不约而同地开始了自己的"网站重构".然而打开这些网站的源代码,看到哪些形形色色源代码,却时常令人哑然失笑-- 当我们看到有嵌套6.7层的div布局,有成百上千的表现css--现在关于div+css标准的书籍也是越来越多,除了极

网站建设制作与优化 主机选择有学问

中介交易 SEO诊断 淘宝客 云主机 技术大厅 前几天接到一个意向客户咨询,说一个朋友告诉他一些优化方法,自己尝试了几个月,关键词在百度上的排名似乎没有太大变化.分析一下他们提供的网址,发现网站似乎每天都有原创内容更新,反向链接已经被谷歌收录的大约有300多一些,结构布局也还行.按道理说,这样的网站,以及长达三四个月的坚持,网站排名没有理由不上去,肯定还有其他的原因.在沟通客户告诉我,网站会时常打开比较慢,偶尔会宕机,有一次因为备案的问题被关了两个星期.问题找到了,网站主机出了问题,也就是因为网