王朝百科
分享
 
 
 

网站制作

王朝百科·作者佚名  2009-10-24  
宽屏版  字体: |||超大  

第一步:确定网站主题做网站,首先必须要解决的就是网站内容问题,即确定网站的主题。美国《个人电脑》杂志(PC Magazine)评出了99年度排名前100位的全美知名网站的十类题材:第1类:网上求职;第2类:网上聊天/即时信息/ICQ;第3类篬url]网上社区/讨论/邮件列表;第4类:计算机技术;第5类:网页/网站开发;第6类:娱乐网站;第7类:旅行;第8类:参考/资讯;第9类:家庭/教育;第10类:生活/时尚。我们可以参看上面的分类,继续细分。如果自己在某些方面有兴趣,或掌握的资料较多,也可以做一个自己感兴趣的东西,一者,你可以有自己的见解,做出自己的特色;二者,在制作网站时不会觉得无聊或者力不从心。兴趣是制作网站的动力,没有创作热情,很难设计制作出优秀的作品。

对于内容主题的选择,要做到小而精,主题定位要小,内容要精。不要去试图制作一个包罗万象的站点,这往往会失去网站的特色,也会带来高强度的劳动,给网站的及时更新带来困难。记住:在互联网上只有第一,没有第二!

有些网站设计都在网站上加入许多不相关的内容,想以此吸引浏览者,但往往会适得其反。

第二步:做好网站规划规划的内容应该主要包括但不局限于如下几项:

1、域名和主机的选择(域名需要依靠网站主题以及用户范围来选择,主机则根据网站在大小、安全、稳定上的需求)

2、网站的定位(如定位于赢利性网站,还是企业网站,或是公益性的……)

3、网站的用途(是用来赢利的,还是做产品线上营销的,或是做品牌推广和整合的)

4、网站的发展目标 (需要达到的目标,需要为这个目标而努力的)

5、网站的拓扑图构画(网站包括哪些栏目,采用什么样的制作结构)

6、网站制作技术的采用(用哪种语言开发,在什么平台上开发)

7、网站的推广(需要做具体什么样的工作去推广网站,是否需要在前期开发的时候就考虑到后期的推广,如SEO专家的建议)

8、网站的维护(是自主维护,还是外包维护,维护的内容包括哪些,后期改版的时间间隔安排等)

9、网站安全 (网站定期进行安全检测及备份等安全操作)

第三步:选择好域名域名是网站在互联网上的名字,是在互联网上相互联络的网络地址。一个非产品推销的纯信息服务网站,其所有建设的价值,都凝结在其网站域名之上。失去这个域名,就将前功尽废

目前,做个人网站的很多都依赖免费个人空间,其域名也是依赖免费域名指向,如网易的虚拟域名服务,其实这对个人网站的推广与发展很为不利,不光是它“适时”开启的窗口妨碍了浏览者的视线和好感,让人一看就知道是个人网站,而且也妨碍了网页的传输速度。所以,就我个人观点来说,首先花点钱去注册一个域名,独立的域名就是个人网站的第一笔财富,要把域名起得形象、简单、易记。

第四步:掌握建网工具网络技术的发展带动了软件业的发展,所以用于制作Web页面的工具软件也越来越丰富。从最基本的HTML编辑器到现在非常流行的Flash互动网页制作工具,各种各样的Web页面制作工具,下面是几款具有代表性的网页制作器:

1.HTML编辑器。虽然HTML代码复杂,编辑和调试要花费大量的时间,但因HTML的稳定性、广泛支持性及可创建复杂的页面效果,仍受高级网页制作人员的青睐。就目前来说,有众多的编辑器供选择,这些编辑器广泛支持复杂页面创建及高级HTML规范,使用较为普遍的有Hotdog等专业HTML编辑器。

2.所见即所得的网页编辑器。其中以Microsoft Frontpage为代表,它具有如Word一样的操作界面,熟知Word功能的操作者,只要稍加培训就能轻松编制网页。而且,Frontpage还能解析网页的HTML源代码,并提供了预览支持。但Frontpage的一些特殊显示功能并不能在其它非IE浏览器下实现。所以Frontpage是一款非常适合初、中级网页制作人员使用的工具软件。

3.现在非常流行的Macromedia公司(已被Adobe公司收购)出品的Flash互动网页制作工具。这是是一款功能非常强大的交互式矢量多媒体网页制作工具。能够轻松输出各种各样的动画网页,它不需要特别繁杂的操作,也比JAVA小巧精悍!但它的动画效果、互动效果、多媒体效果十分出色。而且还可以在Flash动画中封装Mp3音乐、填写表单等;并且由于Flash编制的网页文件比普通网页文件要小得多,所以大大加快了浏览速度。这是一款十分适合动态Web制作的工具。

4.Dreamweaver: Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器,它是第一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

另外,个人网站制作者还需了解W3C的HTML4.0规范、CSS层叠样式表的基本知识、javascript、VBScript的基本知识。对于常用的一些脚本程序如ASP、CGI、PHP也要有适当了解,还要熟练使用图形处理工具和动画制作工具以及矢量绘图工具,并能部分了解多种图形图像动画工具的基本用法,熟练使用FTP工具以及拥有相应的软硬件和网络知识也是必备的。

当然,互联网还是一个免费的资料库。编制网页需要多种多样的按钮、背景还有各种各样图形、图片。如果这些都要靠自己完成,既浪费时间又浪费金钱,而且还需要强大的图形、图片制作技术。所以,为了省却这些麻烦,网站制作者完全可以从网上下载各种精美实用的图片、按钮、背景等网页素材。

第五步:确定网站界面界面就是网站给浏览者的第一印象,往往决定着网站的可看性,在确定网站的界面时要注意以下三点:

1.栏目与板块编排

构建一个网站就好比写一篇论文,首先要列出提纲,才能主题明确、层次清晰。网站建设初学者,最容易犯的错误就是:确定题材后立刻开始制作,没有进行合理规划。从而导致网站结构不清晰,目录庞杂混乱,板块编排混乱等。结果不但浏览者看得糊里糊涂,制作者自己在扩充和维护网站也相当困难。所以,我们在动手制作网页前,一定要考虑好栏目和板块的编排问题。

网站的题材确定后,就要将收集到的资料内容作一个合理的编排。比如,将一些最吸引人的内容放在最突出的位置或者在版面分布上占优势地位。栏目的实质是一个网站的大纲索引,索引应该将网站的主体明确显示出来。在制定栏目的时候,要仔细考虑,合理安排。在栏目编排时需要注意的是:

●尽可能删除那些与主题无关的栏目;

●尽可能将网站内最有价值的内容列在栏目上;

●尽可能从访问者角度来编排栏目以方便访问者的浏览和查询;辅助内容,如站点简介、版权信息、个人信息等大可不必放在主栏目里,以免冲淡主题。

另外,板块的编排设置也要合理安排与划分。板块比栏目的概念要大一些,每个板块都有自己的栏目。举个例子:ENET硅谷动力(www.enet.com.cn)的站点分新闻、产品、游戏、学院等板块,每个板块下面又各有自己的主栏目。一般来说,个人站点内容较少,只要分个栏目也就够了,不需要设置板块。如果有必要设置板块的,应该注意:

●各板块要有相对独立性;

●各板块要有相互关联;

●各板块的内容要围绕站点主题;

2.目录结构与链接结构

网站的目录是指建立网站时创建的目录。例如:在用Frontpage建立网站时都默认建立了根目录和Images子目录。目录的结构是一个容易忽略的问题,大多数站长都是未经规划,随意创建子目录。目录结构的好坏,对浏览者来说并没有什么太大的感觉,但是对于站点本身的维护,以后内容的扩充和移植有着重要的影响。所以建立目录结构时也要仔细安排,比如:

●不要将所有文件都存放在根目录下。有网站制作者为了方便,将所有文件都放在根目录下。这样就很容易造成:文件管理混乱,搞不清哪些文件需要编辑和更新,哪些无用的文件可以删除,哪些是相关联的文件,影响工作效率;上传速度变慢,服务器一般都会为根目录建立一个文件索引,如果将所有文件都放在根目录下,那么即使只上传更新一个文件,服务器也需要将所有文件再检索一遍,建立新的索引文件,很明显,文件量越大,等待的时间也将越长。

●按栏目内容建立子目录。子目录的建立,首先按主栏目建立。友情连接内容较多,需要经常更新的可以建立独立的子目录。而一些相关性强,不需要经常更新的栏目,例如:网站简介、站长情况等可以合并放在一个统一目录下。所有程序一般都存放在特定目录,例如:CGI程序放在cgi-bin目录,所有提供下载的内容也最好放在一个目录下,便于维护管理。

●在每个主目录下都建立独立的Images目录。一般来说,一个站点根目录下都有一个默认地Images目录。将所有图片都存放在这个目录里很是不方便,比如在栏目删除时,图片的管理相当麻烦。所以为每个主栏目建立一个独立的Images目录是方便管理的。原因很简单,就是方便维护与管理。

其它需要注意的还有:目录的层次不要太深,不要超过3层;不要使用中文目录,使用中文目录可能对网址的正确显示造成困难;不要使用过长的目录,太长的目录名不便于记忆;尽量使用意义明确的目录,以便于记忆和管理。

网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上,但可以跨越目录。形象的说:每个页面都是一个固定点,链接则是在两个固定点之间的连线。一个点可以和一个点连接,也可以和多个点连接。更重要的是,这些点并不是分布在一个平面上,而是存在于一个立体的空间中。一般的,建立网站的链接结构有两种基本方式:

●树状链接结构(一对一),这类似DOS的目录结构,首页链接指向一级页面,一级页面链接指向二级页面。这样的链接结构浏览时,一级级进入,一级级退出,条理比较清晰,访问者明确知道自己在什么位置,不会“不知身在何处”,但是浏览效率低,一个栏目下的子页面到另一个栏目下的子页面,必须回到首页再进行。

●星状链接结构(一对多),类似网络服务器的链接,每个页面相互之间都建立有链接。这样浏览比较方便,随时可以到达自己喜欢的页面。但是由于链接太多,容易使浏览者迷路,搞不清自己在什么位置,看了多少内容。

因此,在实际的网站设计中,总是将这两种结构混合起来使用。网站希望浏览者既可以方便快速地达到自己需要的页面,又可以清晰地知道自己的位置。所以,最好的办法是:首页和一级页面之间用星状链接结构,一级和二级页面之间用树状链接结构。关于链接结构的设计,在实际的网页制作中是非常重要一环,采用什么样的链接结构直接影响到版面的布局。

3.进行形象设计

网站的设计可以从以下几点出发:

●设计网站标志(LOGO)。LOGO是指网站的标志,标志可以是中文、英文字母,也可以是符号、图案等。标志的设计创意应当来自网站的名称和内容。比如:网站内有代表性的人物、动物、植物,可以用它们作为设计的蓝本,加以卡通化或者艺术化;专业网站可以以本专业有代表的物品作为标志。最常用和最简单的方式是用自己网站的英文名称作标志,采用不同的字体、字母的变形、字母的组合可以很容易制作好自己的标志。

●设计网站色彩。网站给人的第一印象来自视觉冲击,不同的色彩搭配产生不同的效果,并可能影响到访问者的情绪。“标准色彩”是指能体现网站型象和延伸内涵的色彩,要用于网站的标志,标题,主菜单和主色块。给人以整体统一的感觉。至于其它色彩也可以使用,但应当只是作为点缀和衬托,绝不能喧宾夺主。一般来说,一个网站的标准色彩不超过3种,太多则让人眼花缭乱。适合于网页标准色的颜色有:蓝色,黄/橙色,黑/灰/白色三大系列色。

●设计网站字体。和标准色彩一样,标准字体是指用于标志,标题,主菜单的特有字体。一般网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格,可以根据需要选择一些特别字体。制作者可以根据自己网站所表达的内涵,选择更贴切的字体。需要说明的是:使用非默认字体只能用图片的形式,因为很可能浏览者的计算机里没有安装特别字体,那么辛苦设计制作便可能付之东流了。

●设计网站宣传语。也可以说是网站的精神、主题与中心,或者是网站的目标,用一句话或者一个词来高度概括。用富有气势的话或词语来概括网站,进行对外宣传,可以收到比较好的结果。

第六步:确定网站风格“风格”是抽象的,是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI(标志,色彩,字体,标语)、版面布局、浏览方式、交互性、文字、语气、内容价值等等诸多因素,网站可以是平易近人的、生动活泼的也可以是专业严肃的。不管是色彩、技术、文字、布局,还是交互方式,只要你能由此让浏览者明确分辨出这是你网站独有的,这就形成了网站的“风格”。

风格是有人性的,通过网站的色彩、技术、文字、布局、交互方式可以概括出一个站点的个性:是粗犷豪放的,还是清新秀丽的;是温文儒雅的,还是执著热情的;是活泼易变的,还是墨守成规的。

总之,有风格的网站与普通网站的区别在于:在普通网站上你看到的只是堆砌在一起的信息,你只能用理性的感受来描述,比如信息量多少,浏览速度快慢等;在有风格的网站上你可以获得除内容之外的更感性的认识,比如站点的品位,对浏览者的态度等。

在明确自己想给人以怎样的印象后,要找出网站中最有特色的东西,就是最能体现网站风格的东西。并以它作为网站的特色加以重点强化、宣传。总之,风格的形成不是一次定位的,你可以在实践中不断强化、调整、改进。

第七步:有创意的内容选择好的内容选择需要有好的创意,作为网页设计制作者,最苦恼的就是没有好的内容创意。网络上的最多的创意即是来自于虚拟同现实的结合。创意的目的是为了更好的宣传与推广网站,如果创意很好,却对网站发展毫无意义,那么,网站设计制作者也应当放弃这个创意。另外,主页内容是网站的根本之所在,如果内容空洞,即使页面制作地再怎样精美,仍然不会有多少用户。从根本上说,网站内容仍然左右着网站流量,内容为王(Content Is King)依然是个人网站成功的关键。

第八步:选购网站空间

这个一步应该是和选好域名的时候已经确定网站空间放在那里。在网络服务器上开辟出一定配额的磁盘空间供用户放置网站、文件等内容,最基本的虚拟主机功能包含web访问和文件传输功能。

网站制作入门

1、什么是首页?

首页是指一个网站的主索引页,是令访客了解网站概貌并引导其调阅重点内容的向导。首页设计要求在保障整体感的前提下,根据大多数人的阅读习惯以色彩、线条、图片等要素将导航条、各功能区以及内容区进行分隔。首页设计采用客户的既定标准色,注重协调各区域的主次关系,以营造高易用性与视觉舒适性的人机交互界面为终极目标。

2、什么是形象页?

形象页是指一个网站的欢迎页面,可引入的元素大致有:企业名称、LOGO、形象图片、网址、宣传语、首页链接、其他语种页面链接等。将客户选定的元素创造性地布局后进行整体化设计,建立亲和、亮丽的视觉效果,达到提高企业形象,宣传企业理念的功效。

3、什么是入口页?

入口页又称Coverpage,顾名思义如果把网站比作一本杂志,入口页(Coverpage)就是封面了。此页面的元素通常只有企业的名称,企业的LOGO以及表现企业形象的背景图片。

适用于突出体现企业形象、企业理念或者为了让网站艺术型。但不适用于功能性强、交互频繁的站点。

4、网页同Word页面是一样的吗?

网页是由HTML(超文本标记语言)编写的。过去制作网页都要有专门的技术人员一行一行代码的编写非常费事,而如今有了FrontPage 和DreamWeaver这样可视化的编辑工具使得不再那么困难,同时也可以实现更多强大的功能。

5、什么叫网站策划?

网站是企业发布信息、收集反馈、提供服务的综合平台。信息结构的设置能否符合访客的使用习惯将在很大程度上影响网站的实际功效。我们将圈定客户网站的主要目标访客群体后进行网站整体结构及栏目的策划,出具详细的各页页面布局图与细节说明,并据此与客户讨论布局、设计风格、以及各页面间的勾接关系等。

6、什么叫形象页设计?

形象页是指一个网站的欢迎页面,可引入的元素大致有:企业名称、LOGO、形象图片、网址、宣传语、首页链接、其他语种页面链接等。将客户选定的元素创造性地布局后进行整体化设计,建立亲和、亮丽的视觉效果,达到提高企业形象,宣传企业理念的功效。

7、什么叫栏目页设计?

据网站结构及信息类别的分类,确定需要独立设计的栏目页和内容页模板文件的总数。设计中兼顾并继承首页的设计风格,保障模板在各具体页面套用过程中的适用性和灵活性。

8、什么叫动态效果?

在策划阶段根据不同页面的需要,设置Javascript、DHTML特效若干。例如:走马灯、分时问好、弹出窗口等。各种特效不分难易,采用统一价格计算。

9、什么是Flash动画?

Flash动画是一种矢量动画格式,它是用Macromedia公司的Flash4软件编辑而成,具有体积小、兼容性好、直观动感、互动性强大、支持MP3音乐等诸多优点,是当今最流行的Web页面动画格式

10、LOGO知识介绍

一、什么是LOGO:翻开字典,我们可以找到这样的解释:“ logo: n.标识语 ”。在电脑领域而言,LOGO是标志、徽标的意思。而本站主要所收集的LOGO,是互联网上各个网站用来与其它网站链接的图形标志。

二、LOGO的作用:1.LOGO是与其它网站链接以及让其它网站链接的标志和门户。

INTERNET之所以叫做“互联网”,在于各个网站之间可以联接。要让其他人走入你的网站,必须提供一个让其进入的门户。而LOGO图形化的形式,特别是动态的LOGO,比文字形式的链接更能吸引人的注意。在如今争夺眼球的时代,这一点尤其重要。

2.LOGO是网站形象的重要体现。

试问一个衣冠楚楚的人怎么能让自己的名片污渍不堪?就一个网站来说,LOGO即是网站的名片。而对于一个追求精美的网站,LOGO更是它的灵魂所在,即所谓的“点睛”之处。

3.LOGO能使受众便于选择。

一个好的LOGO往往会反映网站及制作者的某些信息,特别是对一个商业网站来话,我们可以从中基本了解到这个网站的类型,或者内容。在一个布满各种LOGO的链接页面中,这一点会突出的表现出来。想一想,你的受众要在大堆的网站中寻找自己想要的特定内容的网站时,一个能让人轻易看出它所代表的网站的类型和内容的LOGO会有多重要。

三、LOGO的国际标准规范:为了便于INTERNET上信息的传播,一个统一的国际标准是需要的。实际上已经有了这样的一整套标准。其中关于网站的LOGO,目前有三种规格:

1.88*31 这是互联网上最普遍的LOGO规格,本站所收集的均是这种大小。

2.120*60 这种规格用于一般大小的LOGO。

3.120*90 这种规格用于大型LOGO。

四、LOGO的制作工具和方法

好像目前并没有专门制作LOGO的软件,其实也并不需要这样的一种软件。我们平时所使用的图像处理软件或者还加上动画制作软件(如果你要做一个动画的LOGO的话)都可以很好地胜任这份工作,如PHOTOSHOP、FIREWORKS等。而LOGO的制作方法也和制作普通的图片及动画没什么两样,不同的只是规定了它的大小而已。

五、一个好的LOGO应具备的条件:Poorfish认为,一个好的LOGO应具备以下的几个的条件,或者具备其中的几个条件:

1.符合国际标准(废话)

2.精美、独特

3.与网站的整体风格相融

4.能够体现网站的类型、内容和风格

11、什么叫javascript?

JavaScript 是一种居于 Java 程序语言的脚本语言。JavaScript 语言设计出来是用在居于 web 的网页(包括客户端和服务器端)上的,这个文档里的内容只涉及了客户端的 JavaScript(它是被嵌入到网页中的 HTML 代码中,并且由浏览器来执行的脚本语言)。

JavaScript 语言可以设计和访问一个 web 页面中的所有元素,如:图片元素(images)、 表单元素(form elements)、链接(links)等等。 这些对象属性等在 JavaScript 程序运行中可以被复制、修改。JavaScript 还可以捕捉客户端用户对当前网页的动作,如:鼠标的点击动作或者键盘的输入动作等等。JavaScript 的这些功能使我们能够对用户的输入等动作做出想对应的反应动作,从而实现一些交互性,还有一些平常经常用到的 JavaScript 的例子,如鼠标移动、表单过滤、动画等等。

12、网页设计是不是越华丽越好?

不是这样,对于大多数企业来讲设计网页的目的传达给来访者更多的实际的信息也就是内容,这样才能让来访者更好的了解企业并发生互动的可能。所以说网页的形式是为内容而服务的。设计精美的网页可以吸引来访者的视线,而过于华丽则有些喧宾夺主了。

就像有些创意独特的时装手表,你已无法用它来判断时间。在企业网站策划中应该考虑设计精美的同时,考虑网站线索的清晰,使用的方便,功能的体现等因素。

网站制作必须要注意的事项:

你应当有一个很清晰的网站介绍,告诉访问者你的网站能够提供些什么,以便访问者能找到想要的东西。但是,许多设计者都没有这样做。有效的导航条和搜索工具使人们很容易找到有用的信息,这对访问者很重要。告诉访问者你所提供的正是他们想要的信息。

20 “网站一旦发布,网站设计的优点和缺陷全都公布于世。没有什么方法使你能够比从自己的错误、倾听其他人的建议和用户反馈意见中学到更多的东西。” ——专家忠告

21 闪烁让人头痛

通过使用标识可以吸引访问者对你的主页特殊部分的注意,但这也让你的访问者头痛。如果你想使访问者再次光顾你的网站,就少用此方法。

22 背景颜色

背景颜色也会产生一些问题,可能会使网页难于阅读。你应当坚持使用白色的背景和黑色的文本,另外还应当坚持使用通用字体。

23 向前和向后按钮

应当避免强迫用户使用向前和向后按钮。你的设计应当使用户能够很快地找到他们所要的东西。绝大多数好的站点在每一页同样的位置上都有相同的导航条,使浏览者能够从每一页上访问网站的任何部分。

24 “坚持你的信念。严格遵守各种规则。避免想当然。绝不停止学习。” ——专家忠告

25 点击记数器

不要轻易考虑在你的网站上放置一个醒目的点击记数器。你设计网站是为了给访问者提供服务,而不是推销你自己认为重要的东西。大多数浏览者认为计数器毫无意义,它们很容易被做假,浏览者也不想看广告。如果你显示你的网站是多么受欢迎,你最好提供一个链接,显示访问日志。

26 不要用框架

与记数器一样,框架在网页上越来越流行。在大多数网站上,在屏幕的左边有一个框架。但是设计者立刻就发现,在使用框架时产生了许多的问题。使用框架时如果没有17英寸的显示屏几乎不可能显示整个网站。框架也使得网站内个人主页不能够成为书签。也许更重要的是,搜索引擎常常被框架混淆,从而不能列出你的网站。

27 去掉图像

在浏览器中即使去掉了图像功能,也要保证访问者能够在你的网站上获得满意的效果。对于那些使用ISDN连接并且关掉了图像功能的访问者,还能获得好的网页加载性能。可以通过在网页底部提供另外的链接和使用替代文字,而不是图像来满足访问者的需要。

28 重复使用图像

一些网站由于使用大量不重复的图像而错过了使用更好的技巧的机会。在创建商标时,在网页上多次使用同样的图像是一个好的方法,并且一旦它们被装入,以后重新载入就会很快。

29 避免使用过大的图像

不要使用横跨整个屏幕的图像。避免访问者向右滚动屏幕。占75%的屏幕宽度是一个好的建议。

30 “避免使用炫耀的技巧。” ——专家忠告

31 选择使用Flash动画

许多使用比较慢的计算机的访问者发现动画图标很容易耗尽系统资源,使网站的操作变得很困难,因此,应该给用户一个跳过使用Flash动画的选择。

32 尽量少使用Flash插件

虽然许多Web设计者认为Flash功能很强大,并且Netscape5.0将支持Flash,在使用时不必再下载任何插件。 但是,最好还是取消使用Flash做各接口的想法。

33 让用户先预览小图像

如果不得不放置大的图像在网站上,就最好使用Thumbnails软件,把图像的缩小版本的预览效果显示出来,这样用户就不必浪费金钱和时间去下载他们根本不想看的大图像。

34 动画与内容应有机结合

确保动画和内容有关联。它们应和网页浑然一体,而不是干巴巴的。动画并不只是Macromedia Director等制作的东西的简单堆积。

35 慎用声音

声音的运用也应得到警惕。内联声音是网页设计者的另一个禁地。因为过多地使用声音会使下载速度很慢,同时并没有带给浏览者多少好处。首次听到鼠标发出声音可能会很有趣,但是多次以后肯定会很烦人。使用声音前,应该仔细考虑声音将会给你带来什么。

36 少用Java 和AxtiveX

在网页上应尽量少使用Java 和AxtiveX。因为并不是每一种浏览器都需要使用它,只有那些Netscape 和Explorer的早期版本的使用者才需要它。另外Mac在处理Java时也存在问题,过分地使用Java,会使Mac崩溃。

网页设计中HTML常范的五个错误

1.网页背景色的设置

犯错机率:很大

普遍性:较广

犯错可能性:懒/不知道

2.Align center(自动居中)的滥用

犯错机率:非常大

普遍性:非常广

犯错可能性:以为方便/以为好用

3.重复使用实现相同功能的代码、或杂七杂八的乱套代码

犯错机率:非常普遍

普遍性:非常普遍

犯错可能性:复杂多样

4.表格不正确嵌套

犯错机率:一般

普遍性:普遍

犯错可能性:对这个不了解

5.写代码缩进的时候,不是使用Tab而是使用空格

犯错机率:一般

普遍性:较少

犯错可能性:不知道Tab更好用

使用空格有二大坏处:1、缩进速度慢、修改速度慢。2、增大网页体积,会影响速度。

十个最重要的网站制作技巧复杂的网站设计总是很花时间,高级效果为设计增色不少,但如果用得不对,只会影响用户对重点内容的关注。高级效果可能正好是一项好的设计的冲击力所在,但即便如此,也还是需要一些更简单的效果与其配合。

简单的效果和技巧是建造当今设计的基石。比方说,如果你都不知道如何正确选择颜色和文字效果,灿烂的星光效果又能有什么用? 本着"Less is more"的理念,我们为你精选了十个简单好用的设计技巧,它们能大大提升你设计的专业性和感染力。

基础先行。 学会走之前要先学会爬,让我们从最基础的简单有效的网站设计的概念开始。

1. 增加对比

很可惜,添加额外的对比是最被忽视和弃用的技巧之一。

Joost de Valk 采用了细的高对比度边线,让访客能更容易区分页面的不同区域。在上图中放大了的部分,你可以看到,大多数时候这种对比只是一条1像素的高亮线挨着1像素的暗线。

不过,这个页面上的“More”和“Go”按钮与周围的对比度太小,即使你刻意在找也很容易被忽略掉。

WordPress 为页面中最受欢迎的链接 “Download(下载)” 使用了对比色。 这种红色在冷灰色调的页面中自己跳了出来。但这红色在明度方面有所收敛,避免了影响页面整体效果。

如果你对于该不该使用对比犹豫不决,就把这一决定过程当做是化妆。你要做的不是让人们大吼“看呐,对比色!”,你需要的是自然而然的吸引他们注意页面中重要的内容,高亮出已经存在的重点。

2. 渐变

技术的发展为所有想使用渐变的人提供了各种创造渐变的工具。但渐变真的很好么?

Media Temple 网站的每一个页面都使用了渐变,不过其渐变使用的节制和精妙才是设计成功的关键。logo,大标题,按钮和背景都有细微的或者镜像的渐变,以强调内容。最复杂的渐变用在了那些简单的120像素宽的按钮(子页面中的“ACTIVATE”和“LEARN MORE”)上,因为它们是需要访客注意的重点。

Commission Junction的渐变运用远没有Media Temple的细致,而且采用了过于丰富的渐变类型:

从黑色到灰色的水平线性渐变,位于页面顶部 页眉处的绿色径向渐变 登陆框背景的“CJ” 标志上方模糊的斜向渐变 输入框背景中淡淡的垂直线性渐变 导航条背景的垂直渐变 Webinar广告中明亮的线性渐变 另一个垂直线性减弱,用在了大标题处 这种设计有点冒险,大部分渐变式有用的,但还是存在一些问题。最突出的一点是,设计丧失了一致性。同选择可辨性强的色彩组合一样的道理,设计师也需要为每个项目选择合适的渐变组合。

例如,大的水平渐变(1)引导眼睛横向注视页面。这本没有什么问题,但就在此渐变的正下方又出现了把视线吸引到中心的径向渐变(2)和把视线引导到右下角的斜向渐变(3)。这会给访客造成困扰,起伏变化的视觉流(visual flow)也削弱了可读性。

使用渐变时,保证好的视觉流很重要:请保守而精致地使用渐变。最重要的一点,仅当对整体设计有帮助时才使用渐变。

3. 色彩

合理使用颜色很有挑战性。在挑选完美的色彩组合和为各种色调找到合适位置的过程中,时间哗啦啦地就流走了。

Realmac Software 大胆地在404页面采用了全色系渐变。这样做有以下原因:首先,Realmac已经将页面背景设成了中性灰色,更重要的是,页面其余部分没有明显的色彩的,除了蓝色的文字链接和一些零星的毫无冲击力的色彩。

全谱色彩渐变完美地吸引了人们的注意。它保持了简单性,有着灰色的配合,也不会让眼睛感到不适。但在一项设计中采用四种或五种以上的颜色通常都显得太过了。除非你非常确信你的设计需要那么多颜色,还是采用简单的四色组合比较好。

当你在设计中克制而明智地使用色彩时,吸引访客对重要项目的注意力就变得相当容易。在 Interspire的 “About Us(关于我们)” 页面中,访客的注意力被迅速吸引到页面顶部LOGO那红色的一点上,然后是标题,然后是页面右边的LOGO照片。

在字体上花点功夫。字体的艺术博大精深,远远超出我们大部分人的想象。字体中超出x高度部分(ascenders )和边位(side bearings)处的创作空间巨大,你可以在此处添加一些有趣的细节。不过还是运用接下来的一些技巧更重要。

4. 字符间距

字符间距,或者称为字距调整 (kerning),能对标题、段落、logo等文字相关内容造成巨大影响。其远不止每个字符之间的距离那么简单。

Krop’s 的新作品集创建器,在处理文字的时候,十分吝啬空间。该网站上大部分基于文字的图片中的字符间距都很小,使叙述内容显得更为简洁有力。

上图表现了字符间距对你的设计可能产生的负面影响。小而无抗锯齿的字体如果没有适当的字符间距,将更加难以阅读。

如果你以前没有在意,试试现在对你设计中的字符间距做一些调整,你会为调整后带来的不同而震惊。推荐图片中使用“Myriad Pro” 字体,HTML文字中使用“Trebuchet MS”字体进行尝试。

5. 大小写

改变字母大小写不过是按一下Shift或者Caps Lock键的功夫,但很少有设计师好好利用了这一技巧的潜能。

MSNBC’s 对大小写的使用很值得参考。logo是全小写的,页面其他部分的字体大小写更有着微妙的变化。页面上方的大横幅通告,一般用大写字母写着“WATCH LIVE(观看直播)”或者 “BREAKING NEWS(最新消息)” 。这些通告都是非常重要的内容,这种方式很好地吸引了访客的注意。

另外,采用纯大写的按钮,让他们的小按钮足够清楚易读。 在这种5像素高的应用里,小写字母,如a, m, x,可能只有2到3像素高,非常难以辨认。

继续关注新闻站点, CNN 在字体大小写上缺少变化来平衡页面。导航条是全部大写的,但页面中的其余部分则很传统地几乎全部采用了首字母大写。

6. 消锯齿

虽然技术上比较复杂,消锯齿仍可以归纳为“使边缘平滑”,在各种设计中都有运用到。在Web设计的世界里,是否消锯齿部分决定于文字是要出现在图片还是HTML文字中。另有一个让事情变得复杂的情况,部分浏览器或操作系统会自动在一定程度上消锯齿,但总的来说,HTML文字是不具有抗锯齿功能的。

Stockxpert 非常聪明地在广告页面中部分使用消锯齿,而部分文字不消锯齿。大部分文字都有平滑边缘,但页面顶部和底部的小字则保留了锯齿。同上面说的MSNBC按钮一个道理,5像素高的文字需要有尽量锐利的边缘来保持可读性。这种情况中的模糊或平滑边缘会让眼睛很累,最终放弃阅读。

混搭是王道! 完美的东西一般都显得很假或者乏味。树木的枝叶并不完全对称;任何形式的照明都不会产生平衡的影子;照相机镜头有时会让部分景物模糊,以及产生镜头光晕…… 有些设计需要干净的人造风格,另一些则需要混搭一点。

7. 制造瑕疵

任何人都能在使用一台电脑十分钟后告诉你它并不完美。但在设计过程中,电脑可以为你创造完美的结果。在你最喜欢的设计工具中使用直线工具时,只需要采用默认设置,你就能画出特定两点间的完美直线。

这个怀旧Ace牌的教程提供了很多步骤来让这张牌看起来不完美。不得不说,这一过程并不简单。不过其中的概念十分简单——让事物显得老旧,创造不完美,给你的作品以独特的肌理。

这张蝴蝶照片看起来就像是20世纪中期拍摄的,另一个不完美的例子。其实它是用数码相机拍摄的,使用了一些滤镜和颜色调整,赋予其怀旧效果。

为设计创造艺术风格化的瑕疵比你想象中要容易。你只需要将素材变成灰色或褐色,再添加一点细节……

8. 模糊

如果你还在为如何让内容突出、消隐而一筹莫展,请试试各种不同的模糊方式。通过模糊前景、模糊背景,甚至整个设计,你可以动态地增加你的项目的冲击力。模糊的焦点,需要至少部分地相关联。通过模糊一个元素,焦点被带向另一内容。

Ios V2 壁纸使用简单的模糊创造平静的、生机勃勃的感官。一些明锐的线条用来形成图像的焦点,而模糊的背景对于壁纸的整体效果至关重要。

模糊亦可形成深度和层次覆盖的感觉。 Windows Vista的Aero效果将窗口后面的内容模糊掉,形成很酷的漫反射玻璃效果。使用高斯模糊 即可创造类似效果

9. 对齐

即使我们强调保证整洁和直线,你仍然有需要为你的设计添加一些额外趣味。

这个示例标志中的“logo”几个字母被提到了右上角。更改设计元素的对齐方式可以让它们更容易被记住,更容易被人们讨论起,结果是让整个设计更高效。

这一技巧并不只是用于文字。部分设计师在思考一项设计概念时会利用模板化内容或者个人工作习惯。这可以加快给客户回应的速度,但也经常会限制了创意——尤其是在内容对齐方面。

Icon Designer通过旋转某些元素让自己与众不同。这一页面很容易成为稀松平常的无聊之作,但简单的几个旋转让它趣味十足。

现在的网页大部分是700到900像素宽,一般在浏览器中居中,并且是方盒子式的构造。大部分案例中,这样做使内容安排有序,但也有一些站点,需要设计师考虑跳出盒子,创造特色。

10. 消除累赘

这可能是最重要也最被忽视的设计技巧了。去掉不必要的部分,也是最难做的部分之一。

通过去掉所有不必要的部分, CSS Remix只留下了必要部分,可以同时展示7个大广告 (128 * 96 像素),,53个favico广告 (16 *16 像素) ,以及一大群网站(56个)——全部在页面上方1000像素内!甚至网站的logo都被削减到了53乘 7 像素。

生活中也是如此,好事做得太好就不是一件好事了。上面的logo太小以至于难以辨认,特色站点也难以同彼此区分开来。奇怪的是,页面顶部的Twitter feed,相对于站点logo和导航来,又过分突出。

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
如何用java替换看不见的字符比如零宽空格​十六进制U+200B
 干货   2023-09-10
网页字号不能单数吗,网页字体大小为什么一般都是偶数
 干货   2023-09-06
java.lang.ArrayIndexOutOfBoundsException: 4096
 干货   2023-09-06
Noto Sans CJK SC字体下载地址
 干货   2023-08-30
window.navigator和navigator的区别是什么?
 干货   2023-08-23
js获取referer、useragent、浏览器语言
 干货   2023-08-23
oscache遇到404时会不会缓存?
 干货   2023-08-23
linux下用rm -rf *删除大量文件太慢怎么解决?
 干货   2023-08-08
刀郎新歌破世界纪录!
 娱乐   2023-08-01
js实现放大缩小页面
 干货   2023-07-31
生成式人工智能服务管理暂行办法
 百态   2023-07-31
英语学习:过去完成时The Past Perfect Tense举例说明
 干货   2023-07-31
Mysql常用sql命令语句整理
 干货   2023-07-30
科学家复活了46000年前的虫子
 探索   2023-07-29
英语学习:过去进行时The Past Continuous Tense举例说明
 干货   2023-07-28
meta name="applicable-device"告知页面适合哪种终端设备:PC端、移动端还是自适应
 干货   2023-07-28
只用css如何实现打字机特效?
 百态   2023-07-15
css怎么实现上下滚动
 干货   2023-06-28
canvas怎么画一个三角形?
 干货   2023-06-28
canvas怎么画一个椭圆形?
 干货   2023-06-28
canvas怎么画一个圆形?
 干货   2023-06-28
canvas怎么画一个正方形?
 干货   2023-06-28
中国河南省郑州市金水区蜘蛛爬虫ip大全
 干货   2023-06-22
javascript简易动态时间代码
 干货   2023-06-20
感谢员工的付出和激励的话怎么说?
 干货   2023-06-18
 
>>返回首页<<
 
 
静静地坐在废墟上,四周的荒凉一望无际,忽然觉得,凄凉也很美
© 2005- 王朝网络 版权所有