网页的版式设计---文字的格式化
编者按:很多从事网页设计的计算机专业人员,对于网页的制作技术驾轻就熟,但对于网页富有艺术性和个性的设计却感到力不从心。特别是没有经过艺术设计专业训练的网页制作者,在掌握了网页制作技术的情况下,都渴望将自己的网页制作得更具创意和美感。目前关于网页制作的讨论和介绍,多以讲解软件的技术性操作为主要内容,侧重艺术方面的非常之少。
文字的格式化
1.字号、字体、行距
字号大小可以用不同的方式来计算,例如磅(point)或像素(pixel)。因为以计算机的像素技术为基础的单位需要在打印时转换为磅,所以,建议采用磅为单位。
最适合于网页正文显示的字体大小为12磅左右,现在很多的综合性站点,由于在一个页面中需要安排的内容较多,通常采用9磅的字号。较大的字体可用于标题或其他需要强调的地方,小一些的字体可以用于页脚和辅助信息。需要注意的是,小字号容易产生整体感和精致感,但可读性较差。
网页设计者可以用字体来更充分地体现设计中要表达的情感。字体选择是一种感性、直观的行为。但是,无论选择什么字体,都要依据网页的总体设想和浏览者的需要。
粗体字强壮有力,有男性特点,适合机械、建筑业等内容;细体字高雅细致,有女性特点,更适合服装、化妆品、食品等行业的内容。在同一页面中,字体种类少,版面雅致,有稳定感;字体种类多,则版面活跃,丰富多采。关键是如何根据页面内容来掌握这个比例关系。
从加强平台无关性的角度来考虑,正文内容最好采用缺省字体。因为浏览器是用本地机器上的字库显示页面内容的。作为网页设计者必须考虑到大多数浏览者的机器里只装有三种字体类型及一些相应的特定字体。而你指定的字体在浏览者的机器里并不一定能够找到,这给网页设计带来很大的局限。解决问题的办法是:在确有必要使用特殊字体的地方,可以将文字制成图像,然后插入页面中。
行距的变化也会对文本的可读性产生很大影响。一般情况下,接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12,即用字10点,则行距12点。这主要是出于以下考虑:适当的行距会形成一条明显的水平空白带,以引导浏览者的目光,而行距过宽会使一行文字失去较好的延续性。
除了对于可读性的影响,行距本身也是具有很强表现力的设计语言,为了加强版式的装饰效果,可以有意识地加宽或缩窄行距,体现独特的审美意趣。例如,加宽行距可以体现轻松、舒展的情绪,应用于娱乐性、抒情性的内容恰如其分。另外,通过精心安排,使宽、窄行距并存,可增强版面的空间层次与弹性,表现出独到的匠心。
行距可以用行高(line-height)属性来设置,建议以磅或默认行高的百分数为单位。例如:{line-height:20pt}、{line-height:150%}。
2.文字的整体编排
页面里的正文部分是由许多单个文字经过编排组成的群体,要充分发挥这个群体形状在版面整体布局中的作用。从艺术的角度可以将字体本身看成是一种艺术形式,它在个性和情感方面对人们有着很大影响。在网页设计中,字体的处理与颜色、版式、图形等其他设计元素的处理一样非常关键。从某种意义上来讲,所有的设计元素都可以理解为图形。
(1)文字的图形化
字体具有两方面的作用:一是实现字意与语义的功能,二是美学效应。所谓文字的图形化,即是强调它的美学效应,把记号性的文字作为图形元素来表现,同时又强化了原有的功能。作为网页设计者,既可以按照常规的方式来设置字体,也可以对字体进行艺术化的设计。无论怎样,一切都应围绕如何更出色地实现自己的设计目标。
将文字图形化、意象化,以更富创意的形式表达出深层的设计思想,能够克服网页的单调与平淡,从而打动人心。
(2)文字的叠置
文字与图像之间或文字与文字之间在经过叠置后,能够产生空间感、跳跃感、透明感、杂音感和叙事感,从而成为页面中活跃的、令人注目的元素。虽然叠置手法影响了文字的可读性,但是能造成页面独特的视觉效果。这种不追求易读,而刻意追求“杂音”的表现手法,体现了一种艺术思潮。因而,它不仅大量运用于传统的版式设计,在网页设计中也被广泛采用。
(3)标题与正文
在进行标题与正文的编排时,可先考虑将正文作双栏、三栏或四栏的编排,再进行标题的置入。将正文分栏,是为了求取页面的空间与弹性,避免通栏的呆板以及标题插入方式的单一性。标题虽是整段或整篇文章的标题,但不一定千篇一律地置于段首之上。可作居中、横向、竖向或边置等编排处理,甚至可以直接插入字群中,以新颖的版式来打破旧有的规律。
(4)文字编排的四种基本形式
页面里的正文部分是由许多单个文字经过编排组成的群体,要充分发挥这个群体形状在版面整体布局中的作用。
两端均齐:文字从左端到右端的长度均齐,字群形成方方正正的面,显得端正、严谨、美观。
居中排列:在字距相等的情况下,以页面中心为轴线排列,这种编排方式使文字更加突出,产生对称的形式美感。
左对齐或右对齐:左对齐或右对齐使行首或行尾自然形成一条清晰的垂直线,很容易与图形配合。这种编排方式有松有紧,有虚有实,跳动而飘逸,产生节奏与韵律的形式美感。左对齐符合人们阅读时的习惯,显得自然;右对齐因不太符合阅读习惯而较少采用,但显得新颖。
绕图排列:将文字绕图形边缘排列。如果将退底图插入文字中,会令人感到融洽、自然。
3.文字的强调
(1) 行首的强调
将正文的第一个字或字母放大并作装饰性处理,嵌入段落的开头,这在传统媒体版式设计中称之为“下坠式”。此技巧的发明溯源于欧洲中世纪的文稿抄写员。由于它有吸引视线、装饰和活跃版面的作用,所以被应用于网页的文字编排中。其下坠幅度应跨越一个完整字行的上下幅度。至于放大多少,则依据所处网页环境而定。
(2) 引文的强调
在进行网页文字编排时,常常会碰到提纲挈领性的文字,即引文(也称为眉头)。引文概括一个段落、一个章节或全文大意,因此在编排上应给予特殊的页面位置和空间来强调。引文的编排方式多种多样,如将引文嵌入正文的左右侧、上方、下方或中心位置等,并且可以在字体或字号上与正文相区别而产生变化。
(3)个别文字的强调
如果将个别文字作为页面的诉求重点,则可以通过加粗、加框、加下划线、加指示性符号、倾斜字体等手段有意识地强化文字的视觉效果,使其在页面整体中显得出众而夺目。另外,改变某些文字的颜色,也可以使这部分文字得到强调。这些方法实际上都是运用了对比的法则。
4.文字的颜色
在网页设计中,设计者可以为文字、文字链接、已访问链接和当前活动链接选用各种颜色。例如,如果你使用Frontpage编辑器,默认的设置是这样的:正常字体颜色为黑色,默认的链接颜色为兰色,鼠标点击之后又变为紫红色。使用不同颜色的文字可以使想要强调的部分更加引人注目,但应该注意的是,对于文字的颜色,只可少量运用,如果什么都想强调,其实是什么都没有强调。况且,在一个页面上运用过多的颜色,会影响浏览者阅读页面内容,除非你有特殊的设计目的。
颜色的运用除了能够起到强调整体文字中特殊部分的作用之外,对于整个文案的情感表达也会产生影响。这涉及到色彩的情感象征性问题,限于篇幅,在这里不做深入探讨。
另外需要注意的是文字颜色的对比度,它包括明度上的对比、纯度上的对比以及冷暖的对比。这些不仅对文字的可读性发生作用,更重要的是,你可以通过对颜色的运用实现想要的设计效果、设计情感和设计思想。
- 网站推广之网页优化篇/网页设计—网页的排版与布局优化2006-3-4
- 网站推广之网页优化篇/网页设计—网页导航设计优化2006-3-4
- 网站推广之网页优化篇/网页设计—平衡、对比、连贯和留白优化2006-3-4
- 网站推广之网页优化篇/网页设计—网页分辨率设置优化2006-3-4
- 网站推广之网页优化篇/网页设计—网页优化之关键词的运用技巧2006-3-4
- 网站推广之网页优化篇/网页设计—文字的格式化2006-3-4
- alt 中的注释文字换行的方法[图]2006-3-4
- asp图片验证码2006-3-4
- blog的rss2.0 2006-3-4
- asp 查看服务器文件2006-3-4
- 网站推广--网页针对搜索引擎的加注技巧
- Google发布在线网页制作工具[图]
- 粉可爱的韩国插画欣赏(一) [图]
- 粉可爱的韩国插画欣赏(二)[图]
- 粉可爱的韩国插画欣赏(三)[图]
- 粉可爱的韩国插画欣赏(四)[图]
- 苹果NANA的精彩插画作品欣赏[图]
- 苹果NANA的精彩插画作品2[图]
- 王华精彩平面设计欣赏:《白光系列》1[图]
- 王华精彩平面设计欣赏2[图]
- 王华精彩平面设计欣赏:《白光系列》3[图]
- 王华精彩平面设计欣赏4[图]
- 风里面的白嫁衣-漂亮新娘! [图]
- 王华设计欣赏3[图]
- 王华设计欣赏《夜精灵》4[图]
- 韩国Q版插画欣赏<三>[图]
- 韩国Q版插画欣赏<二>[图]
- 韩国Q版插画欣赏<一>[图]
- asp图片验证码
- blog的rss2.0
- 利用ASP打造站内搜索引擎
- 用ASP建立站内搜索
- asp程序错误详细说明例表
- 一套韩国壁纸设计[图]
- 香港经典插画作品[图]
- 时尚插画家—梁毅作品展[图]
![清风楼书(一)[图]--平面广告](http://www.fansart.com/uploadfile/200642868655905.gif)
清风楼书(一)
![painter超级可爱的上色过程(韩国)[图]--CG插画](http://www.fansart.com/uploadfile/200641150378565.jpg)
painter超级可爱的上色过程(韩国)
![古典楼书(精品欣赏)(1)[图]--平面广告](http://www.fansart.com/uploadfile/200641153842877.jpg)
古典楼书(精品欣赏)(1)
![美国插画师kevindart作品(1)[图]--CG插画](http://www.fansart.com/uploadfile/200641156499109.jpg)
美国插画师kevindart作品(1)
![美国插画师kevindart作品[图]--CG插画](http://www.fansart.com/uploadfile/200641156355093.jpg)
美国插画师kevindart作品

荷兰著名画家Anton Pieck插画
![非常可爱的儿童插画(1)[图]--CG插画](http://www.fansart.com/uploadfile/200641157447221.jpg)
非常可爱的儿童插画(1)
![回忆紫禁城里那些逝去的[图]--中国艺术](http://www.fansart.com/uploadfile/200641159463469.jpg)
回忆紫禁城里那些逝去的
![国粹京剧脸谱表情[图]--界面设计](http://www.fansart.com/uploadfile/200641164370797.jpg)
国粹京剧脸谱表情
![高傲的玫瑰-温碧霞[图]--摄影艺术](http://www.fansart.com/uploadfile/200641232299455.jpg)
高傲的玫瑰-温碧霞
![北邦插画欣赏(1)[图]--CG插画](http://www.fansart.com/uploadfile/200641335800545.jpg)
北邦插画欣赏(1)
![yashasi插画作品欣赏[图]--CG插画](http://www.fansart.com/uploadfile/200641366906025.jpg)
yashasi插画作品欣赏
![cg插画欣赏[图]--CG插画](http://www.fansart.com/uploadfile/200641433658593.jpg)
cg插画欣赏
![溯源居广告欣赏--小红人[图]--平面广告](http://www.fansart.com/uploadfile/200641453136345.jpg)
溯源居广告欣赏--小红人
![房地产广告设计-之水墨风格1[图]--平面广告](http://www.fansart.com/uploadfile/200641457308753.jpg)
房地产广告设计-之水墨风格1
![泊林花园推广故事绘本(1)[图]--CG插画](http://www.fansart.com/uploadfile/200642041664949.jpg)
泊林花园推广故事绘本(1)
![泊林花园推广故事绘本(2)[图]--CG插画](http://www.fansart.com/uploadfile/200642042197577.jpg)
泊林花园推广故事绘本(2)
![万科西山庭院.格.沉.尊[图]--平面广告](http://www.fansart.com/uploadfile/200642133015939.jpg)
万科西山庭院.格.沉.尊
![2006夏日流行时尚,创意无限街头华丽[图]--时装魅影](http://www.fansart.com/uploadfile/200642261089093.jpg)
2006夏日流行时尚,创意无限街头华丽
![水木清华地产广告欣赏[图]--平面广告](http://www.fansart.com/uploadfile/200642634295921.jpg)
水木清华地产广告欣赏