聊城市长虹电脑学校[考证晋级]

如何树立网站风格呢？我们可以分这样几个步骤：

第一，确信风格是建立在有价值内容之上的。一个网站有风格而没有内容，就好比绣花枕头一包草，好比一个性格傲慢但却目不识丁的人。你首先必须保证内容的质量和价值性。这是最基本的，无须置疑。

第二，你需要彻底搞清楚自己希望站点给人的印象是什么。可以从这几方面来理清思路：

1.如果只用一句话来描述你的站点，应该是:_____________
参考答案：
有创意，专业，有(技术)实力，有美感，有冲击力
2.想到你的站点，可以联想到的色彩是：________________
参考答案：
热情的红色，幻想的天兰色，聪明的金黄色
3.想到你的站点，可以联想到的画面是：________________
参考答案：
一份早报，一辆法拉利跑车，人群拥挤的广场，杂货店
4.如果网站是一个人，他拥有的个性是：________________
参考答案：
思想成熟的中年人，狂野奔放的牛仔，自信憨厚的创业者
5.作为站长，你希望给人的印象是：____________________
参考答案：
敬业，认真投入，有深度，负责，纯真，直爽，淑女
6.用一种动物来比喻，你的网站最象：__________________
参考答案：
猫(神秘高贵)，鹰(目光锐利)，兔子(聪明敏感)，狮子(自信威信)
7.浏览者觉得你和其他网站的不同是：__________________
参考答案：
可以信赖，信息最快，交流方便，
8.浏览者和你交流合作的感受是：______________________
参考答案：
师生，同事，朋友，长幼。

你可以自己先填写一份答案，然后让其他网友填写。比较后的结果会告诉你：你网站现在的差距，弱点及需要改进的地方。

第三，在明确自己的网站印象后，开始努力建立和加强这种印象。
经过第二步印象的的量化后，你需要进一步找出其中最有特色特点的东西，就是最能体现网站风格的东西。并以它作为网站的特色加以重点强化，宣传。例如：再次审查网站名称，域名，栏目名称是否符合这种个性，是否易记。审查网站标准色彩是否容易联想到这种特色，是否能体现网站的性格等等。具体的做法，没有定式。我这里提供一些参考：

1.将你的标志logo,尽可能的出现在每个页面上。或者页眉，或者页脚，或则背景。
2.突出你的标准色彩。文字的链接色彩，图片的主色彩，背景色，边框等色彩尽量使用与标准色彩一致的色彩。
3.突出你的标准字体。在关键的标题，菜单，图片里使用统一的标准字体。
4.想一条朗朗上口宣传标语。把它做在你的banner里，或者放在醒目的位置，告诉大家你的网站的特色是...
5.使用统一的语气和人称。即使是多个人合作维护，也要让读者觉得是同一个人写的。
6.使用统一的图片处理效果。比如，阴影效果的方向，厚度，模糊度都必须一样。
7.创造一个你的站点特有的符号或图标。比如在一句链接前的一个点，可以使用,.。☆※○◇□△→（区位码里自己参看）等等。虽然很简单的一个变化，却给人与众不同的感觉，(为什么我没有想到呢？)
8.用自己设计的花边，线条，点
9.展示你网站的荣誉和成功作品。
10.告诉网友关于你的真实的故事和想法。

风格的形成不是一次定位的，你可以在实践中不断强化，调整，修饰，直到有一天，网友们写信告诉你：我喜欢你的站点，因为它很有风格！

● 创意(idea)是网站生存的关键。这一点相信大家都已经认同。然而作为网页设计师，最苦恼的就是没有好的创意来源。

注意，这里说的创意是指站点的整体创意，(因为这个创意而产生这个站点，或者相同的内容，推出的创意不同),网页的平面设计创意我将在后面的版面布局窍门里介绍。

创意到底是什么，如何产生创意呢？

创意是引人入胜，精彩万分，出奇不意的；
创意是捕捉出来的点子，是创作出来的奇招....
这些讲法都说出了创意的一些特点，实质上，

○创意是传达信息的一种特别方式。

比如Webdesigner(网页设计师)，我们将其中的E字母大写一下: wEbdEsigEr，感觉怎么样，这其实就是一种创意！

创意并不是天才者的灵感，而是思考的结果。根据美国广告学教授詹姆斯的研究，创意思考的过程分五阶段：
1.准备期--研究所搜集的资料，根据旧经验，启发新创意；
2.孵化期--将资料咀嚼消化，使意识自由发展，任意结合；
3.启示期--意识发展并结合，产生创意；
4.验证期--将产生的创意讨论修正；
5.形成期--设计制作网页，将创意具体化。

○创意是将现有的要素重新组合。
比如，网络与电话结合，产生IP电话。从这一点上出发，任何人，包括你和我，都可以创造出不同凡响的创意。而且，资料越丰富，越容易产生创意。就好比万花筒，筒内的玻璃片越多，所呈现的图案越多。你如果有心可以发现，网络上的最多的创意来自与现实生活的结合(或者虚拟现实)，例如在线书店，电子社区，在线拍卖。你是否想到了一种更好的创意呢？

创意思考的途径最常用的是联想，这里提供了网站创意的25种联想线索：

1.把它颠倒 2.把它缩小 3.把颜色换一下 4.使它更长
5.使它闪动 6.把它放进音乐里 7.结合文字音乐图画 8.使它成为年轻的
9.使它重复 10.使它变成立体 11.参加竞赛 12.参加打赌
13.变更一部分 14.分裂它 15.使它罗曼蒂克 16.使它速度加快
17.增加香味 18.使它看起来流行 19.使它对称 20.将它向儿童诉求
21.价格更低 22.给它起个绰号 23.把它打包 24.免费提供
25.以上各项延伸组合
-------------(转载自樊志育《广告制作》)

需要一提的是：创意的目的是更好的宣传推广网站。如果创意很好，却对网站发展毫无意义，好比给奶牛穿高跟鞋，那么，我们宁可放弃这个创意！

关于风格和创意，可以讲得还有许多。感兴趣的网友可以自己找一些广告设计方面的书阅读。希望本文能帮助您对网站的设计有一个更新的认识和提高。谢谢！

首页的设计

在我们全面考虑好网站的栏目，链接结构和整体风格之后，我们就可以正式动手制作首页了。
有这么一句俗语：良好的开端是成功的一半。
在网站设计上也是如此，首页的设计是一个网站成功与否的关键。人们往往看到第一页就已经对你的站点有一个整体的感觉。是不是能够促使浏览者继续点击进入，是否能够吸引浏览者留在站点上，全凭首页设计的功力了。
所以，首页的设计和制作是绝对要重视和花心思的。阿捷的经验是：一般首页设计和制作占整个制作时间的40%。你宁可多花些时间在早期，以免出现全部做好以后再修改，那将是最浪费精力的事。

　　这里，先插一个“封面”的问题。封面是指没有具体内容，只放一个logo点击进入或者只有简单的图形菜单的首页。
是否需要为站点设计一个“封面”？阿捷的个人观点是：没必要！
除非你是很艺术类的站点，或者可以确信内容独特，可以吸引浏览者进一步点击进入的站点，否则的话，封面式的首页并不会给你的站点带来什么好处。我们上网浏览需要的是快速，有价值的信息，如果等待xx分钟，只显示出一个粗劣的“ENTER”图标，那么相信没有人会再耐心等待进入下一页。

　　因为首页的重要性，阿捷将着重用８篇文章来仔细讨论有关首页设计的方方面面，大致提纲如下：

　　○版面布局的窍门
　　○色彩的搭配
　　○字体的设置和表格的嵌套
　　○细微之处见功力
　　○考虑不同的浏览器和分辨率
　　○设计好你的banner和位置
　　○meta标签的重要性
　　○首页设计的小建议

　　今天，只是关于首页设计的一个引子。让我们来大致了解一下首页设计的步骤。
首页，从根本上说就是全站内容的目录，是一个索引。但只是罗列目录显然是不够的，如何设计好一个首页呢？一般的步骤是：

●确定首页的功能模块
●设计首页的版面
●处理技术上的细节
　　
　　一).确定首页的功能模块。
　　首页的内容模块是指你需要在首页上实现的主要内容和功能。一般的站点都需要这样一些模块：
网站名称(logo), 广告条(banner), 主菜单(menu),
新闻(what’s new), 搜索(search), 友情链接(links),
邮件列表(maillist),计数器(count), 版权(copyright).
　　选择哪些模块，实现哪些功能，是否需要添加其他模块都是首页设计首先需要确定的。
　　　
　　二).设计首页的版面
　　在功能模块确定后，开始设计首页的版面。就象搭积木，每个模块是一个单位积木，如何拼搭出一座漂亮的房子，就看你的创意和想象力了。
　　设计版面的最好方法是：找一张白纸，一支笔，先将你理想中的草图勾勒出来，然后再用网页制作软件实现。

　　三).处理技术上的细节　　　
　　阿捷经常收到的来信问题就是：我制作的主页如何能在不同分辨率下保持不变形，如何能在IE和NC下看起来都不至于太丑陋，如何设置字体和链接颜色....等等,阿捷将在下面几篇文章里为大家详细介绍。

　　　　　　　
版面布局的原理

设计首页的第一步是设计版面布局。
就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。
虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础
依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。

版面指的是浏览器看到的完整的一个页面（可以包含框架和层）。因为每个人的显示器
分辨率不同，所以同一个页面的大小可能出现640*480像素,800*600像素,1024*768像素等不
同尺寸。

布局，就是以最适合浏览的方式将图片和文字排放在页面的不同位置。
你可能注意到：“最适合”是一个不确定的形容词，什么才是最适合的呢？抱歉的是
阿捷不能也不可能给您一个完整的正确的答案。就好比有人希望知道成功的秘诀是什么，
成功者只能建议您用什么方法，什么途径才能最容易获得成功，而不可能有一步成功的
秘诀告诉您。

我们在设计思考系列文章第四篇讲过站点整体的创意，版面布局也是一个创意的问题，
但要比站点整体的创意容易，有规律的多。让我们先来了解一下版面布局的步骤：

一.草案

新建页面就象一张白纸，没有任何表格，框架和约定俗成的东西，你可以尽可能的发挥
你的想象力，将你想到的景象画上去(我们建议您用一张白纸和一支铅笔，当然用作图
软件photoshop等也可以)。这属于创造阶段，不讲究细腻工整，不必考虑细节功能，只以
粗陋的线条勾画出创意的轮廓即可。尽你的可能多画几张，最后选定一个满意的作为继续
创作的脚本。

二.粗略布局

在草案的基础上，将你确定需要放置的功能模块安排到页面上。(注：功能模块我们在
首页设计-引子中提过，主要包含网站标志,主菜单,新闻,搜索,友情链接,广告条,邮件列表,
计数器,版权信息等)。注意，这里我们必须遵循突出重点、平衡谐调的原则，将网站标
志，主菜单等最重要的模块放在最显眼，最突出的位置，然后在考虑次要模块的排放。

三.定案

将粗略布局精细化，具体化。（*你的智慧和经验，旁敲侧击多方联想，才能作出具
有创意的布局。）

在布局过程中，我们可以遵循的原则有：

1、正常平衡---亦称匀称。多指左右、上下对照形式，主要强调秩序，能达到安定
诚实、信赖的效果。
2、异常平衡---即非对照形式，但也要平衡和韵律，当然都是不均整的，此种布局能
达到强调性、不安性、高注目性的效果。
3、对比---所谓对比，不仅利用色彩、色调等技巧来作表现，在内容上也可涉及古与
今、新与旧、贫与富等对比。
4、凝视---所谓凝视是利用页面中人物视线，使浏览者仿照跟随的心理，以达到注视
页面的效果，一般多用明星凝视状。
5、空白---空白有两种作用，一方面对其他网站表示突出卓越，另一方面也表示网页品
位的优越感，这种表现方法对体显网页的格调十分有效。
6、尽量用图片解说---此法对不能用语言说服、或用语言无法表达的情感，特别有效。
图片解说的内容，可以传达给浏览者的更多的心理因素。

以上的设计原则，虽然枯燥，但是我们如果能领会并活用到页面布局里，效果就大不
一样了。比如，
○网页的白色背景太虚，则可以加些色快；
○版面零散，可以用线条和符号串联；
○左面文字过多，右面则可以插一张图片保持平衡；
○表格太规矩，可以改用导角试试。
经过不断的尝试和推敲，你的网页一定会亮丽起来的哦:)
看看我们经常用到的版面布局形式：

1.T结构布局。所谓T结构。就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，
右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字母T,所以我们称之为T形布
局。这是网页设计中用的最广返的一种布局方式。(图略)
这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩
呆板，如果细节色彩上不注意，很容易让人看之无味。

2.口型布局。这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，
右面放友情连接等，中间是主要内容。(图略)
这种布局的优点是充分利用版面，信息量大(我的主页首页即属于这种布局)。缺点是页面拥挤，
不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站。

3.三型布局。这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将
页面整体分割为四部分，色块中大多放广告条。

4.对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于
设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。

5.POP布局。POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面
的设计中心。常用于时尚类站点，比如ELLE.com。优点显而易见：漂亮吸引人。缺点就是速度慢。
作为版面布局还是值得借鉴的。

以上总结了目前网络上常见的布局，其实还有许许多多别具一格的布局，关键在于你的创意和
设计了。对于版面布局的技巧，这里提供四个建议，您可以自己推敲：

1.加强视觉效果
2.加强文案的可视度和可读性
3.统一感的视觉
4.新鲜和个性是布局的最高境界

网页字体的设置

　　大家好，网页设计思考栏目今天继续第八讲。我们上次讨论了首页设计的版面布局和色彩的搭配，今天我们来谈谈字体。

　　●字体(Font)的设置是网页制作新手遇到的第一个难点。如何控制字体大小，如何取消超链接字体的下划线是网友来信问得最多的。好，我们来彻底研究一下字体的各个方面：

　　○字符集的设定。
　　在查看html文件原代码时，我们经常可以在文件头<head>和</head>之间看到这么一句代码：
　　<meta http-equiv=Content-Type content=text/html; charset=gb2312>
　　这段代码的作用是什么呢？是否可以删除呢？
　　其实这是meta标签的设定语句，是给浏览器看的。它的作用就是告诉浏览器：这个HTML文件是采用gb2312字符集制作的。当浏览器读到这一代码，便以gb2312字符集来解释和翻译网页原代码，然后我们就可以看到正确的网页。所以这个meta语句是非常重要的，尽量不要
删除。
　　gb2312就是我们最熟悉的GB简体码，英文是iso-8859-1字符集。其它还有BIG5,UTF-8,Shift-JIS,EUC,KOI8-2等字符集，分别用于不同的字体显示。

　　○字体的使用。
　　在网页里，字体的定义语句是：<font face=Arial>显示文字</font>
　　其中Arial就是一种字体的名称。
　　默认的浏览器定义的标准字体是中文宋体和英文times new Roma字体。也就是说，如果你没有设置任何字体，网页将以这两种标准字体显示。同时，着两种字体也可以在任何操作系统和浏览器里正确显示。

windows另外自带了40多种英文字体和5种中文字体。这些字体，你也可以在网页里自由使用和设置。凡是使用windows操作系统的浏览器都可以正确显示这些字体，但在其它操作系统里，如unix 则不能完全正确显示。

　　如果你需要用一种特殊的字体来体现你的风格，那么如何让大家可以真正看到你的设计页面呢？解决的办法是：用图片。
　　将需要用这种字体的地方用图片代替，以保证所有人看到的页面是同一效果。

　　○字体的样式(style)。
字体的样式有四种：正常体(regular),斜体(Italic),粗体(Bold),粗斜体(Bold Italic)。设置方法很简单，阿捷就不多罗嗦了。

　　○字体的效果。
　　这里指通过html语言设定可以直接显示的效果，在html里的语句设定为：
　　<span style=text-decoration: overline>显示文字</span>
　　其中，overline是指上划线效果。其它常用的效果还有：underline(下划线)，uppercase(大写)等等。

　　○字体大小的控制。
　　字体大小的控制是本节的重点。

　　一般字体默认的大小是12pt(镑).用<font size=+1>语句可以将文字增大2pt。这种方法我们都已经掌握了。而现在网络上最流行的小中文字体大小为9pt，是如何设定的呢？有三种方法：

　　1.用<span style=font-size:9pt>显示文字</span>语句来设定。
　　显然这种方法非常麻烦，你必须为每段文字都设定大小。

　　 2.用CSS层叠样式表。CSS是DHTML的一个组成部分，它可以定义整个页面的字体显示风格和大小。是较为简便的方法。比如，这里需要设定整个页面文字大小为9pt,只要将下面这段代码加入html代码的<head>和</head>之间：

　　　<style type=text/css><--
　　　body {FONT-SIZE: 9pt}
　　　th　{FONT-SIZE: 9pt}
　　　td　{FONT-SIZE: 9pt}
　　　--></style>

其中FONT-SIZE:9pt指字体的大小为9镑

　　3.第二种方法已经简化了许多步骤，但是仍然不是最理想的方法，因为你必须在每个页面的head区都放置这么一段代码，扩大了文件的字节。另外这样的做法还有一个重大缺点，就是如果我需要修改整个站点的字体大小，就必须一页一页的改！

　　所以推荐给你最终也是目前最好的方法---外部摸板文件调用法。
　　“外部摸板调用”就是说你将css的设定作成一个单独的文件，在每个页面里都调用它。一旦你需要修改字体大小，只要修改一个.css文件，几百个页面就同时修改了。(这种方法类似子程序调用编写过程序的网友很容易理解:)

　　调用的具体方法如下：
(1)将上面的css代码copy成一个mycss.txt文件，然后修改后缀名为mycss.css
(2)在html文件的<head></head>之间插入<LINK href=mycss.css rel=stylesheet type=text/css>，
语句调用mycss.css(注意有关路径的设置正确)OK!

　　○字体超链接样式的设定。
　　通常在网页的<body>中设置连接的颜色，如：
<body link=#FF00FF vlink=#FF0000 alink=#008080>
其中：link -- Hyperlink（连接）的颜色
　　　vlink-- visited Hyperlink（已访问过的连接）颜色
　　　alink-- active Hyperlink （当前活动的连接）颜色
　　　颜色用rgb的16进制码表示如红色是#FF0000。

　　同样用CSS可以更简便的设定网页超连接的样式，看下面这段代码
<style type=text/css>
A:link {TEXT-DECORATION: none;COLOR: #0000FF}
A:visited {TEXT-DECORATION: none;COLOR: #000000}
A:active {TEXT-DECORATION: none;COLOR: #FF0000}
A:hover {COLOR: #FF0000}
</style>
　　将它插入html文件的head区就可以了。其中link设定的是有超链接的颜色;visited是访问过的超链接颜色；active是鼠标移上去的颜色；hover是鼠标点击时的颜色。而text-decoration:none是指取消超链接的下划线显示。

　　关于CSS的设定还有更多的用法和技巧，比如在同一页中设定不同的字体大小和超链接颜色，请学习有关CSS的专门知识在这里我们不在冗述。

　　●上面已经介绍了字体在技术上的各个方面。有关字体的设计使用，目前还没有一个成熟的理论，下面是几条网页设计中字体的使用原则，仅供参考：

　　1.不要使用超过3种以上的字体。字体太多则显得杂乱，没有主题。
　　2.不要用太大的字。因为版面是宝贵，有限的，粗陋的大字体不能带给访问者更多信息。
　　3.不要使用不停闪烁的文字。想让浏览者多停留一会儿的话，就不要使用闪烁的文字。
　　4.原则上标题的字体较正文大，颜色也应有所区别。

网站设计知识