WEB的周期制作流程
做好一个SITE首先必须充分了解SITE内容为基础,并建立在完整的工作计划基础上完成,所以如何做好的站点光凭表面的认识是不够的,必须通过更进一步对站点发展规划做更深层的调查以及客户的来源(包括客户的层次,做何总类型的站点),作为一个标准的设计师,有整体的设计思想以及创意构思的完整过程,通过长时间的看各个站点的设计风格来最后将所要做的内容和风格的设想。按照公司发展的方向和目标决定颜色和风格(尽量能突出公司形象)以概括的思路来整体完成对整个SITE的设计工作!
具体的制作步骤:
首先你必须翻阅大量的关于这个SITE的文档资料,可以将这些资料自己归纳总结,自己先定一小套方案(可以写在自己的每天的工作记录里)制订一套或者多套的设计思路,具体可以和程序员共同探讨得以完善整个构想,遇到部分有建设性的建议要迅速记录下,有必要一提的是关于抄袭风格的问题!以个人习惯不喜欢进行抄袭特别觉得没有自己思想和想法,但是纯粹的抄袭和结构的抄袭也存在许多大的站点。很多问题并不是说你偷懒而去抄袭因为每个人对于美的看法和想法都不同,你可以对一些无名之辈加以点触!但如果你对那些闻名的设计师的品评如果稍有些过分就要遭到指责,之所谓他是大师!
1.首先可以在个人NOTE上写些草稿画些草图供自己筛选使用。
2.可以从自己的制作经验和好的站点上吸收点对色彩以及界面的直观化概念,从而制订一个自己认为可行性的方案。
3.挑选几个在电脑里完成样品,然后输出几份让总监先审核,总监通过筛选后,将结合设计师的思路同总裁商议,决定最后制作方向并定稿。
4.然后制订完成工作日期,以及分工部署安排,并交付实施。(中间如有修改,必须提前通知设计师,否则将会延工误时)
按照制作SITE的复杂程度来具体的安排工作时间:(只包括设计规范不包含程序完成时间)
星期一:
制作站点界面,制作样版一套并和程序员进行沟通,排除结构和制作上的难题。
星期二:
完成另一方案,同样制作样版完成计划。
星期三:
与总监探讨站点上的瑕砒以及修补站点上的漏洞。
星期四:
进入调试阶段将整个SITE的剩下部分逐步完善并交付使用。
星期五:
总结整个制作过程,以便下次更好的完成下个站点。
在设计界面上的过程:
必须选择和客户产品更新换代以及相一致的风格和颜色,譬如:做商务站点就必须用些成稳的颜色,(橄榄绿,群青)在背景上可选用比较中性的颜色,在工具条的放置上可以稍微发挥点构思在按钮的形状以及内容里,然后将颜色和风格统一起来,使人看起来感觉大气而不庸俗。(必须通过长期的实践和善于观察)做娱乐性站点就要以活泼的颜色强烈的对比效果突出整个站点的气氛,尽量使用暖色调,跳跃活泼的图案也可以引起别人的兴趣。合理的搭配和内容的相辅相成是形成整个站点的必须成分。当然在设计上必须还要能让用户感觉亲切人性化的特点,这才是能抓住客户的最佳方法。工具毕竟是工具,能掌握控制工具的必须是看设计师的灵魂所在位置,不要过分依赖工具,多些抽象思维多些生活灵感的点滴才是设计要素的核心。
UML辅助网站规划和设计指南(图图暂缺)
一、概述
Web网站往往具有复杂与高度动态的特点。为了让Web应用在短时间之内开始运作,开发周期应该尽量地短。许多时候,开发者直接进入编写代码这一阶段,却不去仔细考虑自己想要构造的是什么样的网站以及准备如何构造:服务器端代码往往是毫无准备的即兴式编写,数据库表也是随需随加,整个应用的体系有时候呈现一种无规划状态。然而,只要我们运用一些建模技术和软件工程技术,就能够让开发过程更加流畅,确保Web应用将来更容易维护。
UML(Unified Modeling Language,统一建模语言)是一种通用的可视化建模语言,用于对软件进行描述、可视化处理、构造和建立软件系统的文档。UML适用于各种软件开发方法、软件生命周期的各个阶段、各种应用领域以及各种开发工具。UML能够描述系统的静态结构和动态行为:静态结构定义了系统中重要对象的属性和操作以及这些对象之间的相互关系;动态行为定义了对象的时间特性和对象为完成目标任务而相互进行通信的机制。UML不是一种程序设计语言,但我们可以用代码生成器将UML模型转换为多种程序设计语言代码,或使用反向生成器工具将程序源代码转换为UML模型。
本文介绍用UML为Web网站建模的一些方法。全面采用UML技术是一个复杂的过程,但UML的某些部分很容易使用,而且它能够帮助你用更少的时间构造出更好的系统。
为了示范UML在网站建设中的应用,本文将构造一个支持无线用户、提供各个地区天气报表和交通流量报表的网站。本文不准备详细介绍UML本身。但为了方便起见,附录中简要介绍了常见的UML符号和术语。要了解更多有关UML的信息,请参见文章最后的参考资源。
二、规划阶段
不论你是从头开始构造网站、移植网站还是增加某个重要的功能,为了确保设计决策的最优化,进行一些先期规划是必要的。如果你和其他人协作完成一项工程,就工作总量及其分配达成明确的共识具有不可估量的作用。在规划期间,你应该努力对系统的以下方面形成正确的认识:
用户和角色。
应用需求。
各个界面之间的转换流程。
要用到的工具和技术。
2.1 用户
了解使用系统的用户是很重要的。不仅系统分析要求你接触一些用户(通过问卷调查、email,或者面对面交谈),而且你经常还要让系统能够控制不同的用户角色和权限。通过对用户进行分类并了解他们的需求,你就可以找出线索来确定数据库的安全机制、功能限制方法、用户界面分组、培训和帮助需求、对具体内容的需求,甚至还可以从侧面了解到潜在广告客户的分布。
图1:参与者/角色 层次图
上图显示了几组不同的网站用户(在UML中称为Actor,即参与者)。在这里,最普通的用户类型(“Site User”)位于图的顶端,实线箭头表示generalization关系(“泛化”关系,参见本文附录说明,下同),它表示Site User又可以具体分成两类用户:Guest,Registered User。这两类用户共有的特征在“Site User”参与者中说明,而Guest和Registered User各自私有的特征则在对应的参与者中说明。通常,你可以直接为参与者加上说明文档,无需单独编写说明用户的文档,但具体与你所用的UML工具有关。在本例中,Registered User又可以细分为Wireless User和Administrator两种类型,系统对这些用户的处理方式应有所不同。
2.2 定义需求
在正式开始编写代码之前,你应该对准备构造一个怎样的系统有一个清晰的认识。虽然在编写代码的同时也可以逐步完成这一工作,而且这种做法也很有吸引力,但借助图形和文字资料事先集体进行讨论效率要高得多。为网站编写详细的需求说明往往不那么合算,但你应该有时间画出几个草图、写下几段注解去说明网站准备提供的服务。这就要用到Use Case图(用例图)。Use Case可以看成一组功能――它可能对应网站上的一个页面、一个必须编写的程序,或者网站上可能发生的一个动作(比如,验证用户登录,改变用户的配置文件,清除过期的帐号,等等)。下面就是一个能够帮助你规划网站的Use Case图。注意,该图并没有显示出网站的所有Use Case,通常我们需要多个Use Case图才能描述完整的网站功能。
图2:Use Case图
即使是在这样一个简单的Use Case图中,我们也能够轻松地表达出大量的信息。例如,include关系说明两个Use Case包含同样的身份验证功能;extend关系说明天气页面可能以WML或者HTML格式显示;generalization关系说明各个具体的表现过程将遵从“Render HTML Page”或者“Render WML Page”所描述的基本行为规则以达到维持统一的风格效果和统一宏观行为模式的目的。
上图也显示出无线用户能够访问网站中其他用户不能访问的某些区域。在这个Use Case图中,只有无线用户能够访问交通流量报表。这是因为我们已经得知只有在旅途中的移动用户才需要交通流量报表,而且不想再花时间把交通流量报表制作成其他标记语言形式。由此,“Get Traffic Report”Use Case不需要分成WML和HTML两种显示形式,它可以直接包含“Render WML Traffic Report”这个Use Case。
一般地,你应该为这些Use Case加上简单的说明。具体地说,你应该描述每一个Use Case里将要发生什么,谁可以使用它,它如何启动、如何停止,以及某些时候可能发生的特殊事件(称为variation,即变化)。
2.3 用户界面组织
在制作Use Case的过程中,你会得到一些指示网站需要哪些用户界面的线索。也许你早就有了设计某些页面的绝妙主意,但Use Case帮助我们从另外一个角度来看问题。用户是否确实需要那么多的界面?某个页面是否过于复杂?网站的导航设施是否简单易用,即从主页访问常用服务是否很方便?在勾画界面草图、制作网站原型之前,你应该先在Use Case图中解决这些问题。
当Use Case逐渐清晰时,我们就可以开始勾画出网站的大致结构。有些人会强调说页面和文件应该用相应的构件图(Component Diagram)建模,其实类图(Class Diagram)工具也很方便。请参见下图:
图3:用户界面及其布局
在上图中,各种网站服务被捆绑到了不同的网站区域:
/ - 网站的根
/common/ - 公用的图形、脚本、CSS文件等
/maps/ - 地图数据
/traffic/ - 交通流量报表
/weather/ - 天气报表
该图还显示了在页面之间传递的参数。regionId是一个很重要的参数,它代表着用户感兴趣的地区(可能是一个国家、城市或者省份)。regionId在页面之间传递地区信息,使得用户能够从指定地区的天气报表跳转到交通流量信息。至于网站的common区域,你可以看到指针指向的是整个包(package)而不是区域中的单个文件,这是一种减少混乱的简化方法,因为所有其它的包都要用到大部分(如果不是全部的话)/common/区域中的文件。
用户界面布局图能够帮助你避免网站混乱,它对于规划网站是很有用的。而且,一旦确定了一种有效的网站结构组织方式,它还可以作为一个固定的模式在多个网站上应用。
2.4 工具选择
对于小型网站,选择工具和技术相当简单。特别是由于投资的原因,只有少数几种工具组合才具有现实意义――Apache,MySQL或者PostgreSQL,PHP、Perl或JSP/Servlet。当前最流行的组合是Apache + PHP + MySQL,有许多低价位的Web托管服务支持并主要集中在这种工具组合上。而对于规模较大的网站,在投资应用软件之前,它必须对各种工具进行更严格的评估和测试。下面是一个构件图的例子,它可以用来说明网站的体系结构。这个图形虽然简单,但它已经描述出了当前大多数网站的体系结构,对于你的网站,重新制作该图可能也没有必要,因为再也没有什么与众不同的内容值得加入这个图形了。
图4:网站体系结构图
讨论软件的整个生命周期已经超出了本文的范围,但应该指出的是,建立应用原型和界面模型应该在这个时候就开始。务必记下有关网站结构和页面布局的一些想法,因为最终你会想要为布局(菜单,导航条,页面整体布局等)编写一些公用的代码。另外,如果你正在转到新的工具和技术,建立原型的工作能够让你确保设计的可行性,确信已经就新工具的使用对开发组成员进行了足够的培训。
三、设计阶段
设计阶段应该与分析阶段交迭。一旦对自己所要构造的系统有了较多的认识,你就应该开始拟定设计思路。先100%地分析系统再进入设计阶段是没有意义的。需求总是不断地发展,而设计本身有时也会推动需求的发展(反之亦然)。所有的开发者都在进行某种类型的设计――只不过有些开发者直接以编程代码的形式进行设计。虽然这也能够完成任务,但它使得管理复杂工程和在工作组之内分配任务变得非常困难。先花一点时间通过设计图构造系统模型,以后你将获得巨大的回报。
3.1 为未来而设计
许多开发者花费在代码调试和改写上的时间超过了编写代码的时间,如果从一个以上网站的建设来看这个问题,情况就尤其严重了。好的网站设计能够以结构、组织方式和代码重用的形式应用到多个网站上。然而,如果代码只是匆匆忙忙堆砌而成,从现有代码长期获益的机会就减少了。要对网站进行设计规划,一种很有效的方法是画出类图(Class Diagram)。下图显示了类图通常要用到的许多重要关系。
图5:类图
说明如下:
Renderer类是一个抽象类(用斜体字显示)。这意味着Renderer类不能直接使用,程序只能创建其子类的实例(即new Region())。为了满足把页面内容显示到不同类型浏览器的需要,所有用来生成内容的页面都必须从Renderer类派生。
WeatherReport类创建并拥有Region对象,这通过代表聚合关系(Aggregate Relationship)的黑色菱形显示出来,它表示一个对象拥有并创建其他对象。
方法名字前面的加号(“+”)表示该方法是公用方法,可以被其他对象或者函数调用;减号(“-”)表示方法或者变量是私有的,只能由同一对象内部的成员函数访问。?*** HP中方法和变量是公用的,但我们应该总是把变量看成私有,避免从对象外部直接访问变量。
HTMLWeatherReport类依赖于HTMLUtils类。依赖关系(dependency)表示一个类要创建另一个类的实例或者调用另一个类的方法。
类图中的每一个类应该注明:所有的方法(以及所有的变量,如有的话),方法的访问属性(public,private或者protected),方法的返回值类型,方法的参数,变量的类型。函数写在前面,如果类有变量的话,则一般随后在一个分开的方框中列出。
即使你所构造的不是一个面向对象的系统,你仍就可以用类图建立系统的模型。类能够方便地描述出各种包含关系和你所编写的函数文件。虽然此时类图不再显示继承、构成/聚合等面向对象系统特有的关系,但它可以用依赖关系描述出文件之间的调用关系。
3.2 运行时的系统模型
有些时候,我们需要显示出应用的各个部件如何在运行时协作完成任务。前面的类图显示了类之间的关系,但它没有显示出调用出现的次序,也没有显示出来自一个函数的结果可能决定下一次调用的目标。为了在更动态的层面上描述系统,UML提供了许多其他类型的图。对于Web网站设计来说,情节图(Scenario Diagram)特别有用。情节图分成两种:协作图(Collaboration Diagram),序列图(Sequence Diagram)。一般地,我们不会建立系统所有交互过程的模型,情节图只用来描述系统最复杂的部分,或用来概括出代码的一般调用模式。例如,我们可能要示范特定的页面如何与验证用户身份的代码协作,或者要显示页面如何调用公用代码(工具性的框架代码)以保持统一的外观和风格。
协作图和序列图分别举例如下。
图6:协作图
上面的协作图显示了从Web网站获取天气报表的一般过程。注意该图忽略了一些不重要的方法,因为我们只对处理过程中的关键步骤感兴趣。你可以根据编号“1”到“1.3.3.4”找出各个函数的执行次序。一些人喜欢以“1,2,3,……”形式对执行步骤编号,但一般而言,用“1,1.1,1.2,2,2.1,……”的形式显示出调用栈的深度是一种更好的选择,这种编号方式能够更清楚地显示出程序的控制转换过程。例如,上图显示出report()方法调用了WMLUtil以及Region对象中的许多方法:在通过一系列的查询和内容生成函数为指定地区生成报表之前,我们调用了WMLUtil中的buildHeader(...)函数;最后我们调用的是WMLUtil模块的buildFooter(...),然后返回report()方法,最后返回getPage()。你可以为协作图加上更多的细节说明,比如返回值、约束、条件等。
图7:序列图
就图形所传达的信息而言,次序图和协作图非常相似。事实上,许多UML建模工具能够从协作图生成次序图,或者相反。次序图与协作图的主要不同之处在于:在次序图上,事件的发生次序一目了然,非常直观。另外,次序图中还可以加入生存周期和时间方面的详细信息,比如延迟、线程并发、对象的构造和删除等。
在决定选用次序图还是协作图的时候,考虑以下几点有助于你作出最合适的选择:
如果要显示代码中与时间或线程密切相关的问题,选择次序图。
如果要显示对象之间的交互模式,选择协作图。
如果要显示几个或者大量对象之间的交互过程,选择次序图。
如果要显示少量对象之间的大量消息传递或交互过程,选择协作图。
3.3 应用部署的规划
正如本文前面“工具选择”部分所提到的,大多数Web网站的体系结构并不复杂。尽管如此,部署图(Deployment Diagram)在两个方面仍旧很有用:网站结构,文件组织。对于文件组织,前面讨论界面规划时已经提到它也可以用类建模工具进行规划。下面给出一个简单的构件图供参考,但根据网站的需要和复杂程度的不同,你可能不需要它。
图8:构件图
3.4 设计原则
UML只是一个工具。如果使用得法,UML能够帮助我们轻松地构造出更好的网站。然而,要设计出优秀的网站,关键仍在于要有一个好的设计原则或理念。
“提高类的内聚力,减少不同类之间的联系”这一点在谈到好的面向对象设计原则时经常被反复引用。一个内聚的类包含那些在目标和作用域上都紧密相关的行为和信息。它意味着你不应该把构造UI的代码和实现数学算法的代码混合到一起,你应该尽力把所有与用户紧密相关的信息封装到UserAccount类。内聚式设计是一个重要的设计原则,原因有很多:它有助于减少类之间的依赖关系,使得设计更直观、更容易理解,方便了向其他开发者介绍整个设计,减少了开发者同一时刻需要操作的类的数量,等等。例如,如果你要改变网站的用户身份验证机制,只修改单个文件中的一个类无疑要比修改多个文件、多个类更加方便。
“减少不同类之间的联系”意味着使类或者文件之间的交互减到最少。它不仅使得整个设计容易理解,而且也方便了代码的维护。请考虑下面这个例子:
图9:设计实例A
除非深入了解了上述各个类的用途,要估计这些类的内聚程度是不可能的。然而,从这些类之间的关系可以看出,这个设计方案已经成功地减少了不同类之间的联系。类之间的交互被减到了最少,从而使得系统的行为很容易理解。更重要的是,修改任意一个类时受影响的类数量都减到了最少(例如,修改D类只直接影响B类)。另外,要访问D类中的功能,我们无需知道任何有关E、F或G类的情况。作为比较,请考虑下图:
图10 设计实例B
显然,在这个设计实例中,类之间的联系是相当紧密的。一旦对D1类作了修改,为了检查这种修改对其他类的影响,我们必须对其他类进行广泛的测试。
只有在实践中不断锻炼才能避免出现过于复杂的设计,但注意以下几点有助于达到这一目标:
提高类的内聚力。不要把密切相关的功能分散到多个文件和类之中。
采用直观、有意义的名字。如果其他人不能了解类、函数或者变量的作用,不管类的结构是多么完美,整个设计仍缺乏直观性。过多地采用缩写词会影响设计的可理解性。
不要害怕改写代码。有些时候,在几个类之间移动一些函数能够大大地简化代码。
类应该保持紧凑、简洁。代码膨胀是类缺乏内聚力的一种征兆。过于庞大的类、模块或者文件往往缺乏明确的用途和目标。
让其他人复查你的设计。其他人可能有新的想法,或者为你指出你以为显而易见但别人却不能明白的问题。
在早期设计阶段不要考虑太多的性能问题。与一个笨拙的、为了昨天所出现的问题而优化的设计相比,一个简洁、经过精心调整的设计更容易进行性能优化。注意这并不是建议把性能问题抛到脑后,而是建议把细节优化问题留到工程后期考虑。
四、UML工具
下面是一些值得考虑的UML建模工具:
Microsoft Visio:Visio Professional 2000现在开始提供内建的UML支持。如果考虑Visio绘图工具的其他各种用途,这是一个相当有价值的工具。如果你使用2000以前的版本,你可以在这里找到Visio Stencil and Template for UML。
Rational Rose:这是一个推荐使用的工具,但对于许多小型Web工程来说它显得很昂贵。有了Rational Rose这样的工具,改进和维护设计、从模型生成报表、在平行协作环境中与他人共同进行建模工作就很方便了。
MagicDraw:一个基于Java的廉价UML建模工具。
Together:与C/C++和Java联系密切,支持UML建模。
Objecteering UML:一个免费的个人UML产品。
System Architect:一个很受欢迎的高端UML建模工具,支持双向工程(Round-trip Engineering)。
五、附录:常用UML符号和参考资源
下面这个表格简要介绍了常用的UML符号和关系。要了解有关UML概念和各种面向对象术语的详细说明,请参见后面的参考资源。
符号 说明
Package
包。用来聚集和组织模型中的一个部分(Use Case,类,等等)。
Actor
参与者。它代表一个用户或者其他外部的激励器。
Use Case
用例。Use Case描述了系统某一部分的行为。一般地,Use Case记录对某个系统功能的需求,而这个功能由对动作或者事件的应答示范。
<<include>> Relationship
包含关系。标注为<<include>>关系的Use Case关系能够引入其他Use Case的功能。这是一种方便的分割Use Case、避免单个Use Case过于庞大的方法。
<<extend>> Relationship
扩充关系。标注为<<extend>>关系的Use Case关系能够在不重复现有Use Case的各种描述和需求的情况下,使现有Use Case的行为特殊化。
Dependency
依赖。正如其字面意义,它表示一个事物依赖另一个事物。这意味着一个事物了解另一个事物,并需要另外一个事物才能发挥功能。
Note
注解。在UML图中提供注解的目的是以简短的说明阐明图表的内容。
Component
构件。构件一般代表一个软件单元,它可能是一个DLL、一个执行文件,或者是一个数据库。
Node
节点。节点一般代表一台机器,这台机器具有运行一个或者多个系统构件的能力。
Class
类。UML中的类与面向对象编程中的类一样,即它定义并封装了一组行为和属性。类在运行时被实例化从而创建出对象。
Object
对象。对象是类的实例。例如,“MyClass myObj = new MyClass; ”创建了一个myObj对象。
Generalization
泛化。父类能够派生出(或称为特殊化)具有更多特殊行为的子类,此时父类即为子类的超类(或子类的泛化版本)。
Interface
接口。接口定义了一组可以从外部访问的行为。类、库、执行文件、数据文件都可以由接口来描述。接口本身并不实现任何功能,它只是和声明实现该接口的对象订立了一个必须实现哪些行为的契约。
Abstract Class
抽象类。抽象类不能直接实例化,但允许派生出具体的、有实际功能的类。
Association
关联。关联就是把两个或以上的类连接起来。你可以为两个类之间的这种关系提供更具体的信息。关联是两个或多个特定类元之间的关系,它描述了这些类元的实例的联系。在一个关联中同一个类可以出现在多个位置上。
Aggregation
聚合。聚合关系表示某个对象属于其他对象所有。
专业信息网站制作规范
一. 导航要求
* 在此站点的每一个页面都出现
* 内容包括:主页,网站介绍,站点视图,联系方式,反馈,搜索工具,常见问题解答,实际内容栏目(包括相关站点链接、新闻页)
* 栏目如果采用图标,下面应附有文字说明,以避免图像表达不清。
* 无任何链接内容的不做成按钮的形式
* 纯文本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: 88x31468x60 )各两个(包括应用范例)
四. 网页制作技术要求
* 主要页面要写 <title>(主页要写上企业中英文名称)
* 主要页面<meta>字段便于搜索引擎查找。
* <img>的长宽值和alt属性,使不能看图的用户也可以读懂页面。
* 以最流行的浏览器的最普及版本为标准,同时照顾低版本浏览器。
为不同的浏览器分别制作不同的页面,以获得尽可能多的浏览量。
* 尽量使用广泛支持的技术。页面适应不同的屏幕分辨率。
* 不使用过小的字体
不使用过大的图片、动画、声音
不使用过长的滚屏
网页制作规范及流程
--主页备份 Works
1、txt 文本
2、scan 扫描图片
3、psd 设计原图(包括AI、Flash、Banner等等)
4、htm 网页文件
5、htm_old* 旧的网页文件备份
--html的目录结构
1、打开网页排版软件Dreamweaver的site网站管理视窗,按栏目内容建立子目录;
2、在每个主目录下都建立独立的images目录,不要将所有文件都存放在根目录下;
3、所有的文件夹名和文件名用小写字母,并取与中文意义对应的英文文件名。
--HTML源代码
1、字符集的设定:中文版用GB简体码gb2312,英文版用iso-8859-1字符集;
2、每个页面都要写标题<title>,不同页面根据其主题注不同的标题;
3、外国公司的首页面注上<meta>字段便于搜索引擎查找(如:description、keyword);
4、要包含全部图标<img>的长宽值和alt属性(注释文本)。
--表格的应用
1、整个页面不要都套在一个表格里,尽量拆分成多个表格;
2、表格嵌套层次尽量要少;
3、能用表格定位的尽量少用层。
--使用分栏(frame)
避免分栏边界被隐藏,使一些栏目内容也被隐藏起来。
--文字
1、用css定义字体大小、行间距(建议使用"外部链接"方式,将css的设定作成一个单独的文件,在每个页面里都调用它);
2、避免文字错误和内容放置错误(以客户资料和制作要求为准);
3、中文文本每行开始空两格。
--图片
颜色丰富或渐变的图片(如产品图片等),建议用JPG格式;颜色单调的图片(如LOGO、文字按钮等),建议用GIF格式。
--链接
1、不要有错误链接、出不来的图像(包括由于文件名大小不一致或路径不对引起的错误);
2、所有次页面包含一个返回首页的链接。
--效果与速度
1、网页应该保持较小的字节数,过大的文件分成若干个页面;
2、在不影响图片效果的前提下合理压缩图形文件。
--浏览器兼容性
同时兼顾IE和Netscape两种浏览器及多种分辨率等情况,避免排版出错。
--其它
确认公司简介包含公司全部相关信息,包括通信地址、电话、E-mail和联系人等。
网站技术规范
一、前言
编写"网站技术在线"网站技术规范的目的是为自己提供网站建设和维护的技术规范,改善"网站技术在线"网站的总体质量和更新效率。不仅为此,我想为各位网友展示网站建设的标准化(当然我也只是提供一个参考)。个人网站有自己的风格与爱好,也正是个性的存在体现出网站的魅力,但如果过分的自由发挥,想到什么做什么,将给整个网站日后的管理和维护带来混乱,这就好象当年面向过程编程思想出现前,程序设计陷入了紊乱的泥潭,无数优秀程序员在其中苦苦挣扎,还是被其淹没一样,网站的管理和维护将陷入无休止的修补中。
本文提到的规范并非一成不变的,可根据具体情况变通的,随着web技术的发展,新的技术应用,规范也会随之变化的。
二、网站的总体组织结构
为了便于网站的维护,以下是网站的总体组织结构的规范:
1、网站的组织
一个组织结构良好的网站既是一个便于管理的网站。网站的预先规划一定要做好,文件、目录的命名既要符合www服务器的规定,又要清晰有逻辑性。如有的网站后缀要求为“.html”,而非“.htm”。
.目录结构不要太深,因为太深的目录结构会导致较长的URL。
.强烈建议有页面增加简短注释语。便于以后的更新和增加网页的易读性。而注释并不会下载至客户端,不影响浏览速度.
.多数页共有的部分置于SSI(Server Side Include)包含文件中,如每页的头部、尾部导航条,版权信息和广告条。这样做的目的是方便以后的更改,如要更改导航条的链接,只需修改SSI文件即可,提高了效率。由于个人网站不能够自己确定SSI包含文件,它需要服务器端配置,所以可以用Dreamweaver提供的Library库文件的包含功能,达到相同的效果。
.采用外链的CSS(Cascading Style Sheet),对CSS的引用统一为<link rel=stylesheet"/etc/81channel.css">。
.建议多数页面共有的javascript或Vbscript采用外链。这样可以减少浏览器读代码的时间。
.不要用嵌套超过3层的表格和太复杂的表格.嵌套表格太多,浏览器解释html代码的时间越长,正确显示页面的时间越长.我们可以注意到很多网站先显示上面部分,再逐渐显示下面的内容,其实就是用表格造成的.
2、目录结构
.原则上,相近的内容放在同一目录下,目录名总以小写的英文字符串命名且不含空格和特殊字符(下划线和破折号除外),最好不要超过8个字符。
.网站根目录下包含以下几个目录:
library 本网站的共享文件如所有的SSI、CSS和Librsry文件置于本目录下。
images 本网站的共享的图片及主页的图片置于本目录下。
scripts 本网站所有的asp、php等脚本和cgi程序置于此目录中。
zh_cn 本网站的简体中文版置于此目录下。
下面对zh_cn目录结构做详细分解:
column_name 本网站某频道的相关内容置于此目录下(其下可以填加如images的图片子目录)
右边为网站目录结构的图示:
http://go5.163.com/~wtonline/zh_cn/web/images/stucture.gif
.对目录级资源的引用在url的尾部要有下划线,以避免服务器的重定向,从而节省时间。如:
<a href="dirctory/">next</a>
3.文件、目录命名规则:
.所有的文件、目录的命名总以小写的英文字符串命名且不含空格和特殊字符(下划线和破折号除外),最好不要超过8个字符。
.所有的html文件后缀统一为“.htm”,其它文件的后缀使用相应的格式,如:.php、.jpg等。
.文件名用代表其含义的英文单词,不易翻译的用关键字拼音。
4、url链接
.概念定义:
带域名的绝对路径链接,如:
<a href="81Channel">http://www.81channel.com/index.htm";>81Channel首页</a>
不带域名的绝对路径链接,如:
<a href="/zh_cn/index.htm">81Channel首页</a>
(注意路径前有“/”)
相对路径链接,如:
<a href="zh_cn/index.htm">81Channel首页</a>
.本网站引用网站内部的资源采用的相对路径链接,引用别的资源采用带域名的绝对路径链接,尽量不用不带域名的绝对路径链接,因为我不能了解提供个人主页的网站的设置,为保险起见。
.链接别的资源采用域名而不用IP地址的形式。非要用IP地址的话,这IP地址必须是Internet的合法地址。
.绝对不能用下列形式的链接(图片的src也不能用此形式):
<a href="file:///c%7c/my document/test.htm">测试链接</a>
----以上链接用的是file://本地驱动器,对用户而言是不可见的。
5、信息的反馈
由于个人网站一般不支持asp、php或cg缓i,既是表单提交只好采用邮件地址链接的形式,如:action="mailto:[email protected]"
三、页面设计规范
整个页面的设计可分为7部分:网站标识(logo),频道标题,日期,导航,广告,内容区,版权信息。
1、标识(logo)
标识是品牌的象征,突出网站鲜明的个性、整体的构思,标识统一置于左上角,文件名为"imageslogo.jpg",各频道可以有自己的logo标识,要突出频道的特色。
2、频道标题(title)
采用图片形式,其链接采用热点地图链接,在dreamweaver中可以非常方便的设置热点链接.
3、日期
日期部分采用javascript脚本编程显示;
4、导航
.导航要简单、清晰、开放、逻辑性强,不要用超过3层的链接,又不是做商业网站追求PV,节省用户宝贵的时间。
.用于导航的文字要简明扼要,含盖的范围不要太广,且应限制在一行以内。
.保证每页都有到网站首页的链接,利?*** istory面版返回,不要堆砌太多的链接,让用户无所侍从。
.突出最近更新的信息,可以加上更新时间或New标识。
.页面顶部和尾部导航条代码放在Library库文件highchannel.lbi和lowchannel.lbi中,分别引用。
5、广告
由于本网站是个人网站,所以必须有提供空间的网站的广告,如163、263的logo,尽量把它放置于一单独的弹出式窗口中,如下形式调用:window.open(para参数表)
6、内容区(content)
.正文内容全部定义为9pt大小(不能为默认),标题为加粗的10pt,其字体为默认字体(让用户自己决定)。
7、版权信息
纯粹是为了避免下面的内容太空,加上它,不仅充实了内容,而且使网站看上去比较规范。
8、其它注意事项
.设计工具用Dreamweaver3.0、Flash、Photoshop等。
.页面要兼容两种浏览器,但以IE为主。(像Layer层技术就不能用了,Netscape不支持)
.整个页面布局合理,保持均衡,但又要突出重点。
.一般,页面背景用浅色和纯色且直接用16进制颜色定义,不要用色图定义。
.每个页面都要定义简明准确的Title。
.保持干净的html代码,可以自动和手动清除多余tag。
.页面的长度<=3屏,建议采用锚链接(anchor)到其它页或用分页显示,并增加“上一页”、“下一页”等的链接
.页面的宽度<=1屏。
.建议整个页面大小(含图片)<60k,html代码部分<40k,测试其下载时间<=15秒(33.6kb/s)
.图片的尺寸<150*150像素,从性能角度考虑,分别采用.jpg和.gif格式。同时,图片要用Firework等专用工具“减肥”处理,其大小<=6k。
.图片要与文本内容相关,图片的尺寸大小要与内容文本保持均衡。
.正在建设的网页,不开通其链接,不要链接到“正在建设中”等一类的页面。
.不要使用BLINK标记。
四、Html编码规范
.建议采?*** TML4.0规范。
1、meta标记
meta提供一些搜索引擎可以利用的信息,搜索引擎主要使用两个属性Description和Keywords,如:
.<meta name="description" content="在这里描述网站的特性">
.<meta name="keywords" content="关键字、关键字、etc...">
.另外还有三种非常有用的meta标记:
.<meta http-equiv="content-type" content="text/html;charset=gb2312"> __定义字符集
.<meta http-equiv="pragma" content="no-cache"> __禁止使用页面缓存
.<meta http-equiv="refresh" content="10;URL=http://www.163.com"> __10秒钟后自动重定向到http://www.163.com
2、专用标记的使用规定
为了保证页面对浏览器的兼容性,不要使用某种浏览器专用的标识,如:marquee,layer,nobr等等。
3、Frame
不建议使用Frame帧结构,因为Frame不便于维护且容易迷惑用户,只有在使用比如聊天室之类的特殊页面时才采用。
4、表格
.再次强调不要使用太多的嵌套表格和复杂的表格。
.表格的定义使用像素。不要采用百分比,因为它会因为屏幕的大小自动调整。
5、图片
.所有的图片都要定义高度和宽度,并加替代文本即要定义Alt="替代文本",同时替代文本要与主题一致。
.在使用<a href=...这样的标识时,如果包含图象,中间不要加回车符,应使之保持在一行内。
五、高级Web技术使用规范
在使用一些先进的Web技术时,原则是:保证下载速度,浏览器兼容性,照顾多数的用户。
.不限制javascript或Vbscript的使用,但是不同浏览器对其支持不同,注意其兼容性,并做测试。
.复制外来的javascript时,要检查其安全性。
.使用cgi是要考虑其安全性和效率,尤其使用某些免费的cgi程序是,一定要先反复测试。
.cookie用于识别、跟踪和支持访问者,通过cookie你可以了解用户的访问路径,收集和存储用户的喜好,但要考虑到用户关闭cookie的情况处理,非要用cookie,应提供全面的解决办法。
.强烈推荐使用flash动画,不仅生成的文件小,而且效果很好。
.Java是一种跨平台的面向对象的编程语言,它在Web中的应用主要是Java Applet,但是Java Applet的下载速度较慢,谨慎使用。
.php是一种跨平台的服务器端嵌入式脚本语言,将php模块编译进Web服务器,执行效率较高,建议使用。
.在服务器端,最好打开SSI解析,但不要使用过多的SSI嵌套。不能使用SSI时,可以用include Library(包含库文件)代替,效果要差一些。
.网站采用外链CSS文件81channel.css,便于统一网站的风格和修改风格。
六、质量保证
网站设计好后,在没改版前,所有的变动仅限于主页的正文栏目和相应的内容细节文档,内容细节文档是在模版可编辑区上变动。模版一旦设计好后,所有的工作都应在模版上进行。
.谨慎对首页、频道和内容细节模版的改动。
1、频道发布的流程
.在Wps2000上对原始文档进行生成、编辑,得到beta 1,拷贝到剪贴版中。
.在Dreamweaver上打开内容细节模版,使用Ctrl+shift+V粘贴beta 1,进一步进行编辑,另存为文档。
.打开首页、频道模版,填加相应的文档链接,保存即可。
.清理多余的图片和HTML代码,并用Dreamweaver初检链接情况,注意链接的问揭�求�?
.测试环境(即服务器环境)为Win2000+IIS5.0或Linux+Appache环境,分别测试其具体表现。
2、重点测试项目
.下载时间测试,采用33.6kb/s的modem,主要对首页测试,建议下载时间<=20秒。
.浏览器兼容性测试,主要是IE4.0/5.0,NETSCAPE4.0以上。
.链接测试,主要在编辑时就做好链接测试。
.导航、页面布局、内容合法和正确性等项目测试。
3、网站更新
.日常网站的更新只能用Dreamweaver的模版功能,保证生成页面的规范性和代码的简洁。(目前我在准备用php编一个内容编辑器,类似商业网站的新闻编辑器,有兴趣或有相关资料的朋友请与我联系,谢谢!)
.更新模版时要对原始模版备份,便于失误后及时的恢复。
.当网站有大的改变时,如页面风格、导航、功能的变化,应及时备份和测试。
技术概念详解
RUP=Rational Unified Process:
统一过程管理
UI
用户界面
UML
统一建模语言
Unicode(统一编码)
一种字符编码系统,可用于转换、处理和显示用当今世界的多种语言书写的文本。统一编码字符通常使用 16 位无符号整数来进行编码。
Unified Modeling Language(统一建模语言,UML)
统一建模语言 [UML99]。 在 Rational Unified Process 词汇表中,用该符号来表示统一建模语言中的定义
电子商务一词的定义是:
构建可实现业务流程自动化的系统(有时称为业务工具)所涉及的活动。
电子商务技术
促进电子商务发展的主要技术是 Internet,但许多其他的技术也必不可少,这些技术尽管并不是一定针对于电子商务的,但却是其重要的组成部分。这些支持技术包括客户机/服务器。
? 数据库管理。
? 编程语言,例如 HTML、XML、Java。
? 用脚本编写的服务器页面和 Servlet,例如 Microsoft 的 Active Server Pages、Java Server Pages。
? 对象通信协议,例如 OMG 的公用对象请求中介体系结构 (CORBA)、Java 标准的远程方法调用 (RMI) 或 Microsoft 的分布式构件对象模型 (DCOM)。
? 构件,例如 Microsoft 的 ActiveX/COM。
? Web 应用程序框架,例如 IBM 的 WebSphere 或 Microsoft 的 WinDNA。
软件构架
在计算的算法和数据结构之外,设计并确定系统整体结构成为了新的问题。结构问题包括总体组织结构和全局控制结构;通信、同步和数据访问的协议;设计元素的功能分配;物理分布;设计元素的组成;定标与性能;备选设计的选择。
系统在其环境中的最高层概念。构架还包括“符合”系统完整性、经济约束条件、审美需求和样式。它并不仅注重对内部的考虑,而且还在系统的用户环境和开发环境中对系统进行整体考虑,即同时注重对外部的考虑。
在 Rational Unified Process 中,软件系统的构架(在某一给定点)是指系统重要构件的组织或结构,这些重要构件通过接口与不断减小的构件与接口所组成的构件进行交互
Web 应用程序
站在本文的角度,我们将 Web 应用程序大体定义为 Web 系统(Web 服务器、网络、HTTP、浏览器),在这个系统中,用户的输入(导航和数据输入)会影响到业务状态。该定义试图将 Web 应用程序确立为一个具有业务状态的软件系统,并且它的“前端”基本上是通过 Web 系统传递的。
Web 应用程序与 Web 站点,甚至是与动态 Web 站点的区别都要涉及到使用。Web 应用程序实现的是业务逻辑,它的使用改变了业务的状态(其状态为系统捕获)。这是很重要的,因为它确定了建模工作的重点。Web 应用程序执行业务逻辑,因此大多数重要的系统模型都侧重于业务逻辑和业务状态,而不是表示细节。表示很重要(否则系统将毫无用处),不过应尽量将业务和表示所关注的问题区分开。如果表示问题是重要的,甚至是复杂的,那么也需要对它们建模,但不必将它们作为业务逻辑模型的构成部分。此外,用于表示的资源更注重外观设计,而与实施业务规则关系不大。
Web 应用程序的基本构架:
Web 应用程序的基本构架包括浏览器、一个网络和一个 Web 服务器。浏览器向服务器请求“Web 页”。每一页都是内容和以 HTML 表达的格式指令的组合。一些页包括客户端脚本,它们由浏览器解释。这些脚本为显示的页定义了其他动态行为,而且它们经常与浏览器、页内容和页中包含的其他控件(Applet、ActiveX 控件和插件)交互。用户查看页中的内容,并与其交互。有时,用户在页的字段元素中输入信息,并提交给服务器处理。用户还可以通过超链接导航到系统的其他页,与系统进行交互。无论是哪种情况,用户都在向系统提供输入,这样就可能改变系统的“业务状态”。
建模
通过简化一些细节,模型可以帮助我们理解系统。如何选择建模对象对理解问题和提供解决方案有重大影响。Web 应用程序与其他软件密集型系统一样,通常由用例模型、实施模型、部署模型、安全模型等一组模型来表示。Web 系统还另有一个专用模型,即站点图。站点图是对贯穿整个系统的 Web 页和导航路线的抽象。
构件
是系统中实际存在的可更换部分,它实现特定的功能,符合一套接口标准并实现一组接口。构件代表系统中的一部分物理实施,包括软件代码(源代码、二进制代码或可执行代码)或其等价物(如脚本或命令文件)。在图中,构件表示为一个带有标签的矩形。
网页设计的八种陋习
一、不要为图像加入太长的交互文本
使用“ALT=”为图像加入交互文本是一个好习惯,因为并不是所 有的人都打开图像载入开关的,这时候这些交互文本给了用户一个有 用的提示,特别是一些连接。但有部分网页制作者为图像加入了很长 的交互文本,当用户载入图像时,这并不影响结果;但如果用户不载 入图像,浏览器就会将所有的文本都显示出来,以致超出了它本来的 宽度、或高度,对网页原来的排版影响很大。
例如广州市某免费个人主页提供商的网页,我开始在关闭图像载 入的情况下访问,结果该网页乱七八糟,而且需要使用滚动条才能全 部浏览,每个文字连接都被前面的图像逼得排成两行,很不顺眼!后来我打开图像载入再去访问该站时,发现网页原来很整齐。那些用文 件名和长度作为交互文本的图像只是一些长度、宽度都很小的装饰图 案,但因为交互文本太长了,所以才造成了混乱!
二、不要将连接全部摆在图像中
以往的网页中的连接都是文字,而且用下划线以资识别。但不久人们就讨厌了这些文字连接,于是都采用了图像连接。后来,更加嫌一个图像一个连接太麻烦了,于是将所有的连接到摆进了一个图像中去。但与上忌情况一样,不是所有的人都打开图像载入,如果你把所有的连接到摆在图像中去,而没有任何同样功能的文字连接的话,用户也许会很不知所措。
某网上男孩子的网页,可能是考虑到这个情况,于是把包含在图 像中的连接作为交互文本列了出来―――呀!足有1000多像素的宽度 。结果我没有用鼠标去“探索”―――其实可以用TAB键去寻找这些 连接―――而是退了出来。与其怕部分用户望而止步写了那么多的交 互文本,为什么就不可以增加一些同样目的的文字连接呢?
三、不要使用自动滚动
曾经到过一个内容“丰富”的网页,它几乎使用了所有曾经在 《中国计算机报》中出现过的网页制作技巧:现在的时间、访问了的 时间、等等。不过有一个不是使用得很好的,就是窗口的自动滚动。 我只是想发个邮件给网页的主人,但我却无法使滚动条停下来让我点 击连接,于是我花了很久才“命中”窗口中的E-mail连接―――真 后悔军训的时候没有练好射击!也许自动滚动可以炫耀一下本事,但 就没有什么实际价值了。用户有鼠标,可以自己移动滚动条,网页制 作者们可以少操心。
四、不要用延时效果的javascript
现在的网页制作者为了使网页更加具有影响力,都疯狂地加入javascript 。以现在的猫奔跑的速度而言,这些脚本也算不了什么,用户不会介 意。但是,如果这些脚本可能导致延时的话,用户的态度就不同了。 因为这些延时不会因为猫的快慢而改变,任何用户都必须望着屏幕上 的“杂耍”完了才可以继续。头一两次还会觉得:WELL,棒极了!但 后来,……某个国人网页的首页在载入时窗口的底色―――窗口里面 没有任何内容―――由白色逐渐变成黑色,整个过程耗费了几秒,嘿! 别小看这几秒,我能检查了全部的邮箱了!
五、不要依赖浏览器
唉!其实留意《中国计算机报》的话,应该看过这类的警告。但 事实上,太多的网站首页中加入了“请在123*456分辨率下使用789 浏览器浏览本网站”的文字。我是安装了IE、NC、和Opera,因为我 要制作网页,需要它们来检验网页的在这些浏览器下的可读性。但一 般用户不会安装那么多的浏览器,更加不会牢记着哪个网站需要用哪 个浏览器浏览 网页设计是一门艺术,一门大众(流行)艺术!就好比音乐,只 使用一种乐器、没有歌声,当然也会有人喜欢,但是流行音乐更多的 是采用各种乐器,加上歌手的歌声,这样才会被更加多的普罗大众所 接受,对吗?
也许不可能让网页在使用所有的浏览器浏览都有一样的效果,但 尽量地去达到该目的,会让网页在这个浏览器下有这样的特色、在另 一个浏览器下又有不同的特色,这是网页制作者的工作,不是吗?
六、不要滥用留言簿
别误会,虽然我的个人网页由于服务器的问题不能使用留言簿, 但我绝对不是妒忌!那次在某个网友的网页上留言,提交之后发现我 的留言和个人的部分资料立即送了上留言网页,和其他以前的留言一 起展示出来。首先,我的个人资料之所以告诉你是因为想与你交个朋 友,但未经任何提示的情况下就全部摆了上网,好象不是很友善。其 次,更重要的是,我在该留言网页上发现了某个人的言论似乎很偏激, 有反革命嫌疑―――这样做是很危险的!你的网页有没有违法成分你 自己可以控制,但其他访问者的言论是你所难以估计的,万一被其他 别有居心的人利用来进行反动宣传,这样你岂不成了“同伙”!
有鉴于此,我奉劝所有使用留言簿的网友,慎之又慎啊!
七、不要忘记版权
现在,网上的侵犯知识产权问题非常猖獗,某N字头免费个人网 页提供商上的网页尤其严重―――甚至有盗版光盘贩卖呢!为此一些 新的免费个人网页提供商就要求用户在申请时提交详细的、真实的个资料,以防备不可预计的事情发生。
不少的网友都很轻视知识产权,觉得自己是个人,大公司不会计 较的。但,《中华人民共和国计算机信息网络国际联网安全保护管理 办法》中第四条规定“任何单位和个人不得利用国际联网危害国家安 全、泄露国家秘密,不得侵犯国家的、社会的、集体的利益和公民的 合法权益,不得从事违法犯罪活动。”所以,如果你的网页需要引用 别人的东西的话,要么你就和他联系一下,征求意见;要么就在明显 的位置注明其版权归属。这并非多余,这是你的网页“长寿”的秘方!
当然,如果是你自己制作的图像或自己撰写的文章,你绝对有权 声明版权归你自己所有!
八、不要懒于更新
某个N字头的个人网页聚居地上有很多的网页都是很久前建立而至今没有更新过的,姑且不说这是浪费公用资源的行为,访问过这些 网页的人看见网页主人如此懒惰,你说他还会再去访问吗?谁能确定 下次访问不会又是这般模样呢?因特网上的资源如此浩瀚,谁会去访问一个“从”不更新的网页呢? 我诚意地奉劝那些“霸占”了公用的个人网页存放地方的人,如 果你们真的那么忙,为何不让出空间,给新的网友更多发展的机会呢?
如何为网上广告做标题
中小企业的规模不大,可用于广告、宣传的资金有限,所以在传统媒体上,很难和资金实力雄厚的“大哥大”一较高低,顶多做些个不起眼的小幅广告或分类广告,营销效果不易出来。有了互联网,中小企业多了个廉价的营销利器。随着互联网技术的普及,它覆盖的受众面越来越全面,熟练掌握网上营销技巧的中小企业,就会更加如鱼得水。
这是后话,先说眼前的。很多中小企业、有创新精神的网上企业家,来函说自己的努力委实不小,为什么结果并不怎么理想呢?我请来函者把所说的广告、宣传文案发过来我看一看,结果发现,且不说其他的方面是否有问题,光是广告标题,就都有些共同的毛病:四平八稳,平平淡淡,毫无吸引力!
“做标题”是专业编辑的一项基本功,内容是否吸引人,与标题做得好不好有很大关系。对编辑来说,做标题是一种功夫,也是一种乐趣。文章都编好了,接下来的工序是做标题,有时候灵感来了,或者苦思冥想之后,终于憋出个精彩标题,那感觉,真是爽!提起这个话头,要说的是标题是 “做”出来,是要付出辛勤汗水的,是画龙点睛之“睛”。
对于商业广告来说,标题是广告的生命线,对于广告的投放效果,更有着举足轻重的影响。说广告好不好,全看标题的功夫也不为过,因为很多企业、产品形象广告,没多少文字,全看标题的表现力。所以,做广告标题,是广告文案专家的看家本领。“人头马一开,好事自然来”十个字,脍炙人口,是一则十分经典的广告文案。作者是谁?业界轶闻说,是香港的黄沾,据说就这十个字,值十几万。十里洋场的旧上海,也出现过不少经典的广告文案作品,“饭后一支烟,赛过活神仙”就是一则流传很广的广告语。
作为新型的网上企业家,你应该了解标题之于广告的重要性。实际上,网上的商业环境,给网上广告标题提出了更大的挑战,因为网友可选择的信息很多,而且目前的技术水平,还没有达到声音、图像文件与文本文件水乳交融、任意收取的程度,你需要在广告标题上下更多的功夫,才能拽注人家的注意力。
这并不是说,需要你有专业人士那样的文案、创意水准。描述性广告文案,应该是网上广告的基本组成或落脚点。做好基本文案,打好基础,是最要紧的。在这个基础之上,再来考虑广告标题的事情。
先说说名号。
要做好网上的广告标题,最基本的技巧,是抓准并表现出你的产品(服务)给广告受众最大的益处,或者说,你先得把握准,你的产品(服务)最大的诱人之处是什么?你的“卖点”是什么?这个分析清楚了,你的标题就八九不离十了。
你必须把你产品(服务)中最诱人的方面在标题中呈献出来。价格低?产品好?还是服务周到?你的引人之处究竟在哪儿?想清楚,判断准,然后想法做到标题里。这样,你才能从一开始就紧紧抓注人家的注意力。
有个读者给我的文案很长,方面方面说得颇细致,一切四平八稳,没有什么特别可圈可点的地方。看着看着,我发现其中藏着这样的简短信息,说顾客有抽奖机会,奖品包括电视、电脑、游戏机。于是,我立即把他原来的标题改为“免费电视、电脑、游戏机要不要?”因为这是整篇广告文案中最吸引人的细节!后来这位读者来函说,换了标题后,效果十分明显。
再给你举个例子。我所在的 ChinaByte有个频道举办征文活动,要求的“征文”可以是一句话、一段话、一篇文章,最高奖品是一部价值近 7000元的移动电话。原来的标题很平淡,说的是欢迎参加什么什么征文。后来我把它改了一下,大意是“说句话,赢手机”,推出后反应踊跃。后来,这个标题因故进行了调整,再回到平平淡淡的状态,反应立即冷下来。
所以,网上广告标题的秘诀就是,把你最好的、最吸引人的东西亮出来!
很简单,是吧?OK,有一点补充很重要:这里讨论的广告标题,其规律其实完全适用于网页上的标题,请你举一反三,细细揣摩,争取一通百通。
网站规划书浅析
一个网站的成功与否与建站前的网站规划有着极为重要的关系。在建立网站前应明确建设网站的目的,确定网站的功能,确定网站规模、投入费用,进行必要的市场分析等。只有详细的规划,才能避免在网站建设中出现的很多问题,使网站建设能顺利进行。
网站规划是指在网站建设前对市场进行分析、确定网站的目的和功能,并根据需要对网站建设中的技术、内容、费用、测试、维护等做出规划。网站规划对网站建设起到计划和指导的作用,对网站的内容和维护起到定位作用。
网站规划书出应该尽可能涵盖网站规划中的各个方面,网站规划书的写作要科学、认真、实事求是。
网站规划书包含的内容如下:
一、建设网站前的市场分析
1、相关行业的市场是怎样的,市场有什么样的特点,是否能够在互联网上开展公司业务。
2、市场主要竞争者分析,竞争对手上网情况及其网站规划、功能作用。
3、公司自身条件分析、公司概况、市场优势,可以利用网站提升哪些竞争力,建设网站的能力(费用、技术、人力等)。
二、建设网站目的及功能定位
1、为什么要建立网站,是为了宣传产品,进行电子商务,还是建立行业性网站?是企业的需要还是市场开拓的延伸?
2、整合公司资源,确定网站功能。根据公司的需要和计划,确定网站的功能:产品宣传型、网上营销型、客户服务型、电子商务型等。
3、根据网站功能,确定网站应达到的目的作用。
4、企业内部网(Intranet)的建设情况和网站的可扩展性。
三、网站技术解决方案
根据网站的功能确定网站技术解决方案。
1、采用自建服务器,还是租用虚拟主机。
2、选择操作系统,用unix,Linux还是Window2000/NT。分析投入成本、功能、开发、稳定性和安全性等。
3、采用系统性的解决方案(如IBM,HP)等公司提供的企业上网方案、电子商务解决方案?还是自己开发。
4、网站安全性措施,防黑、防病毒方案。
5、相关程序开发。如网页程序ASP、JSP、CGI、数据库程序等。
四、网站内容规划
1、根据网站的目的和功能规划网站内容,一般企业网站应包括:公司简介、产品介绍、服务内容、价格信息、联系方式、网上定单等基本内容。
2、电子商务类网站要提供会员注册、详细的商品服务信息、信息搜索查询、定单确认、付款、个人信息保密措施、相关帮助等。
3、如果网站栏目比较多,则考虑采用网站编程专人负责相关内容。 注意:网站内容是网站吸引浏览者最重要的因素,无内容或不实用的信息不会吸引匆匆浏览的访客。可事先对人们希望阅读的信息进行调查,并在网站发布后调查人们对网站内容的满意度,以及时调整网站内容。
五、网页设计
1、网页设计美术设计要求,网页美术设计一般要与企业整体形象一致,要符合CI规范。要注意网页色彩、图片的应用及版面规划,保持网页的整体一致性。
2、在新技术的采用上要考虑主要目标访问群体的分布地域、年龄阶层、网络速度、阅读习惯等。
3、制定网页改版计划,如半年到一年时间进行较大规模改版等。
六、网站维护
1、服务器及相关软硬件的维护,对可能出现的问题进行评估,制定响应时间。
2、数据库维护,有效地利用数据是网站维护的重要内容,因此数据库的维护要受到重视。
3、内容的更新、调整等。
4、制定相关网站维护的规定,将网站维护制度化、规范化。
七、网站测试
网站发布前要进行细致周密的测试,以保证正常浏览和使用。主要测试内容:
1、服务器稳定性、安全性。
2、程序及数据库测试。
3、网页兼容性测试,如浏览器、显示器。
4、根据需要的其他测试。
八、网站发布与推广
1、网站测试后进行发布的公关,广告活动。
2、搜索引掣登记等。
九、网站建设日程表
各项规划任务的开始完成时间,负责人等。
十、费用明细
各项事宜所需费用清单。
以上为网站规划书中应该体现的主要内容,根据不同的需求和建站目的,内容也会在增加或减少。在建设网站之初一定要进行细致的规划,才能达到预期建站目的。
网站策划书参考
网站总策划
首先在做网站之前给要做的网站一定准确的定位,没有方向的船哪边的风都不会是顺风。所以给网站定位,明确建站目地是第一步要做的。给网站做定位时,与公司决策层人士共同讨论,以便于让上层领导能对网站的发展方向有一定的把握,同时最好调动公司其他部门一起参于讨论,及时从公司立场提出好的见意,结合到策划中去。一个公司的好坏与部门之间工作结合的是否紧密是有着很大关系的!
前期信息收集
在明确建站目的和网站定位以后,开始收集相关的意见,跟公司其他部门结合,跟公司的实际情况结合,这样可以发挥网站的最大作用。
这一步是前期策划中最为关键的一步,因为做网站一定是为公司服务的,所以收集其他部门的意见和想法是最为必要的,这一步需要整理成文档,可以让其他部门配合提交一份本部门需要在网上开辟的栏目计划书,这份计划书呢,一定要考虑充分,因为如果要把网站做为一个正式的站点来运营的话,所做的每一项栏目的设置都应该是有规划的,如果考虑不充分会导至以后突如其来的新加内容破坏网站的整体规划和风格,这也并不意味着网站成形后是不许添加栏目的,只是在添加的过程中需要跟网站的情况结合着来,也最好是当初策划时考虑全面!
具体分栏目策划
收集完其它各部门的相关信息以后,对其进行整理,整理以后找出重点,根据重点以及公司业务的侧重点,结合网站定位来敲定网站的分栏目需要有哪几项,可能开始时会因为栏目较多进而难以确定最终需要哪几项,这又是一个讨论的过程,需要大家在一起把自己的意见说出来,一起反复比较,给定下来的内容进行归类,形成网站栏目的树状列表用以清淅表达站点结构。
然后以同样的方法,来讨论二层栏目下的子栏目,对它进行归类,并逐一确定每个二级分栏目的主页面需要放哪些具体的东西,二级栏目下面的每个小栏目需要放哪些内容,让栏目负责人能够很清楚的了解本栏目的每个细节和每个栏目,大家讨论完以后,就应由栏目负责人来按照讨论过的结果写栏目规划书,栏目规划书要求写得详细,具体。并有统一的格式,以备网站留档,这次的策划书只是第一版本,以后在制作的过程当中如果出现问题及时修改该策划书,并且也需要留档。策划书要求有电子版和书面版两份。
下面就是需要说一下策划书设计到的具体内容。每个栏目的策划书应该是格式统一的。
第一,是栏目概述,其中包括栏目定位,栏目目的,服务对像,子栏目设置,首页内空,分页内容!这一部分起到一个索引的作用,让领导看起来能对栏目有一个大概的整体把握和了解。
第二,为栏目详情。栏目详情就是把每一个子栏目的具体情况描述一下,其中包括到各个子栏目的名称,
栏目目的,(把子栏目的目的写清楚)
服务对像,(用以明确栏目的发展方向,更好的为达到目的而做哪些具体内容)
内容介绍,(详细说明本子栏目的具体内容)
资料来源,(说明该栏目的内容来源是什么,以保证栏目开展下去不会出现没有内容的情况)
实现方法,(讲述实现这个栏目的具体方法)
有关问题,(栏目负责人在栏目的策划过程当中想到的,目前尚未解决的问题)
重点提示(重点提示美工人员或编程人员需要注意的地方,或需要结合的地方,也可是栏目策划人员对该子栏目在这些方面的良
好见意)
第三,相关栏目,这一项是用以说明本栏目和其它栏目之间的结合,沟通,之所以要有这一项是想通过各个栏目之间的联系,来加强网站的整体性。第四,参考网站,标明本栏目参考了哪些网站,或可以参考哪些网站。并一定要说明参考其它网站的哪些优点,哪些地方是我们在建设过程当中应该注意的。决不是只写上一个网址就可以了!
第四,最后一项为附录,用以记录这个文档的历史修改过程,和改了哪些内容。
好了,策划书的内容格式就这么多了,可能会觉得多了些繁锁了些,不过,要知道策划书是写给我们自己的,不是为了让别人看,而是我们网站在以后的建设过程中的一个依据。有了这个策划书以后的工作我们可以很轻松的解决! 具体设计制作(包括页面设计,制作,编程)
再接下来,需要做的就是让页面设计人员跟根每个栏目的策划书来设计页面,重申一下,在设计之前应该让栏目负责人把需要特殊处理的地方和设计人员讲明!在设计页面时设计人员一定要根据策划书把每个栏目的具体位置和网站的整体风格确定下来,为了让网站有整体感,应该在网页中放置一些贯穿性的元素,最终要拿出至少三种不风格的方案,每种方案应该考虑到公司的整体形象,与公司的精神相结合。设计方案拿出以后,由大家讨论定稿。
设计完成下一步是实现,由制作人员负责实现网页,并制作成模版。在这个过程实现的同事,栏目负责人应该开始收集每个栏目的具体内容并整理。模版制作完成后,由栏目负责人往每个栏目里面添加具体内容。
网站的建设计应该是同时进行的,这如何统筹是一个比较重要的问题。在上面所讲述的过程进行的同时,网站的程序人员应该正是处于开发程序的阶段,如果实现的这个过程中出现什么问题编程人员应和制作人员及时结合,以免程序开发完成后发现问题要进行大规模的反工。
整合测试
接下来,当两边的工作都完成以后,就是整合。把程序和页面时行整合。整合完以后,需要内部测试,测试完成,没有问题以后就可以o k啦!