网页的版式设计—文字的格式化

  网页的版式设计---文字的格式化

  编者按:很多从事网页设计的计算机专业人员,对于网页的制作技术驾轻就熟,但对于网页富有艺术性和个性的设计却感到力不从心。特别是没有经过艺术设计专业训练的网页制作者,在掌握了网页制作技术的情况下,都渴望将自己的网页制作得更具创意和美感。目前关于网页制作的讨论和介绍,多以讲解软件的技术性操作为主要内容,侧重艺术方面的非常之少。

  文字的格式化

  1.字号、字体、行距

  字号大小可以用不同的方式来计算,例如磅(point)或像素(pixel)。因为以计算机的像素技术为基础的单位需要在打印时转换为磅,所以,建议采用磅为单位。

  最适合于网页正文显示的字体大小为12磅左右,现在很多的综合性站点,由于在一个页面中需要安排的内容较多,通常采用9磅的字号。较大的字体可用于标题或其他需要强调的地方,小一些的字体可以用于页脚和辅助信息。需要注意的是,小字号容易产生整体感和精致感,但可读性较差。

  网页设计者可以用字体来更充分地体现设计中要表达的情感。字体选择是一种感性、直观的行为。但是,无论选择什么字体,都要依据网页的总体设想和浏览者的需要。

  粗体字强壮有力,有男性特点,适合机械、建筑业等内容;细体字高雅细致,有女性特点,更适合服装、化妆品、食品等行业的内容。在同一页面中,字体种类少,版面雅致,有稳定感;字体种类多,则版面活跃,丰富多采。关键是如何根据页面内容来掌握这个比例关系。

  从加强平台无关性的角度来考虑,正文内容最好采用缺省字体。因为浏览器是用本地机器上的字库显示页面内容的。作为网页设计者必须考虑到大多数浏览者的机器里只装有三种字体类型及一些相应的特定字体。而你指定的字体在浏览者的机器里并不一定能够找到,这给网页设计带来很大的局限。解决问题的办法是:在确有必要使用特殊字体的地方,可以将文字制成图像,然后插入页面中。

  行距的变化也会对文本的可读性产生很大影响。一般情况下,接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12,即用字10点,则行距12点。这主要是出于以下考虑:适当的行距会形成一条明显的水平空白带,以引导浏览者的目光,而行距过宽会使一行文字失去较好的延续性。

  除了对于可读性的影响,行距本身也是具有很强表现力的设计语言,为了加强版式的装饰效果,可以有意识地加宽或缩窄行距,体现独特的审美意趣。例如,加宽行距可以体现轻松、舒展的情绪,应用于娱乐性、抒情性的内容恰如其分。另外,通过精心安排,使宽、窄行距并存,可增强版面的空间层次与弹性,表现出独到的匠心。

  行距可以用行高(line-height)属性来设置,建议以磅或默认行高的百分数为单位。例如:{line-height:20pt}、{line-height:150%}。

  2.文字的整体编排

  页面里的正文部分是由许多单个文字经过编排组成的群体,要充分发挥这个群体形状在版面整体布局中的作用。从艺术的角度可以将字体本身看成是一种艺术形式,它在个性和情感方面对人们有着很大影响。在网页设计中,字体的处理与颜色、版式、图形等其他设计元素的处理一样非常关键。从某种意义上来讲,所有的设计元素都可以理解为图形。

  (1)文字的图形化

  字体具有两方面的作用:一是实现字意与语义的功能,二是美学效应。所谓文字的图形化,即是强调它的美学效应,把记号性的文字作为图形元素来表现,同时又强化了原有的功能。作为网页设计者,既可以按照常规的方式来设置字体,也可以对字体进行艺术化的设计。无论怎样,一切都应围绕如何更出色地实现自己的设计目标。

  将文字图形化、意象化,以更富创意的形式表达出深层的设计思想,能够克服网页的单调与平淡,从而打动人心。

  (2)文字的叠置

  文字与图像之间或文字与文字之间在经过叠置后,能够产生空间感、跳跃感、透明感、杂音感和叙事感,从而成为页面中活跃的、令人注目的元素。虽然叠置手法影响了文字的可读性,但是能造成页面独特的视觉效果。这种不追求易读,而刻意追求“杂音”的表现手法,体现了一种艺术思潮。因而,它不仅大量运用于传统的版式设计,在网页设计中也被广泛采用。

  (3)标题与正文

  在进行标题与正文的编排时,可先考虑将正文作双栏、三栏或四栏的编排,再进行标题的置入。将正文分栏,是为了求取页面的空间与弹性,避免通栏的呆板以及标题插入方式的单一性。标题虽是整段或整篇文章的标题,但不一定千篇一律地置于段首之上。可作居中、横向、竖向或边置等编排处理,甚至可以直接插入字群中,以新颖的版式来打破旧有的规律。

  (4)文字编排的四种基本形式

  页面里的正文部分是由许多单个文字经过编排组成的群体,要充分发挥这个群体形状在版面整体布局中的作用。

  两端均齐:文字从左端到右端的长度均齐,字群形成方方正正的面,显得端正、严谨、美观。

  居中排列:在字距相等的情况下,以页面中心为轴线排列,这种编排方式使文字更加突出,产生对称的形式美感。

时间: 2024-09-24 05:01:35

网页的版式设计—文字的格式化的相关文章

网页的版式设计(五)

设计|网页 3.图像的编排 (1)四角与中轴四点结构 页面的四个角与对角线.中轴四点及水平与垂直的中轴线,具有支配页面结构的作用. 四角是页面边界相交形成的四个点,把四角连接起来的斜线即对角线,交叉点为页面中心.中轴四点指经过页面中心的垂直线和水平线的端点.这四个点可上.下.左.右移动. 通过四角与中轴四点结构的不同组合.变化,可以求得多样的页面结构.在图像排版时紧紧抓住这八个点,可以突出网页的形式美感,网页的版式设计.视觉流程的筹划也得到相应简化.   (2)块状组合与散点组合结构 块状组合,

PS基础教程:制作3D质感版式设计文字效果

仔细观察我们就会发现这种文字渐变效果在很多网页和版式设计上都能找得到它的应用,效果很简单却很实用,适合初学者.让我们看看在Photoshop里是怎么做到的. 效果1 效果2. 1.新建一张画布,大小自定义. 2.为了衬托文字需要添加一个暗色调的渐变背景色 [1] [2] [3]  下一页

PS制作3D质感版式设计文字效果教程

仔细观察我们就会发现这种文字渐变效果在很多网页和版式设计上都能找得到它的应用,效果很简单却很实用,适合初学者.让我们看看在Photoshop里是怎么做到的. photoshop教程效果1 效果2. 1.新建一张画布,大小自定义. 2.为了衬托文字需要添加一个暗色调的渐变背景色 分类: PS文字教程

网页的版式设计---网页的排版与布局

网页的版式设计---网页的排版与布局 很多朋友都想向我学习如何做网页,我知道他们的意思就是说要想向我学习如何用做网页的软件,如dreamweaver.flash.firework.photoshop等等,这些纯技术的东西我不想多谈,因为如今技术的发展一日千里,就是这种应用软件也是发展升级得非常的快. 今天的很多认为是较难实现的功能也许经过软件升级之后就可以很方便的实现.我想强调的是关于网页排版布局方面的必要的知识,很多初学者都忽视这方面,以为技术就能代表一切,能够知道怎么用这个做网页的工具就能够

网页的版式设计(一)

设计|网页 编者按:很多从事网页设计的计算机专业人员,对于网页的制作技术驾轻就熟,但对于网页富有艺术性和个性的设计却感到力不从心.特别是没有经过艺术设计专业训练的网页制作者,在掌握了网页制作技术的情况下,都渴望将自己的网页制作得更具创意和美感.目前关于网页制作的讨论和介绍,多以讲解软件的技术性操作为主要内容,侧重艺术方面的非常之少.经过作者同意,从这一期开始,我们选载<网页艺术设计>一书的部分章节,从最基本的内容讲起,希望对广大网页制作者有所助益. 一.文字的格式化 1.字号.字体.行距 字号

网页的版式设计(三)

设计|网页 3.文字的强调 (1) 行首的强调 将正文的第一个字或字母放大并作装饰性处理,嵌入段落的开头,这在传统媒体版式设计中称之为"下坠式".此技巧的发明溯源于欧洲中世纪的文稿抄写员.由于它有吸引视线.装饰和活跃版面的作用,所以被应用于网页的文字编排中.其下坠幅度应跨越一个完整字行的上下幅度.至于放大多少,则依据所处网页环境而定. (2) 引文的强调 在进行网页文字编排时,常常会碰到提纲挈领性的文字,即引文(也称为眉头).引文概括一个段落.一个章节或全文大意,因此在编排上应给予特殊

网页的版式设计(二)

设计|网页 3.文字的强调 (1) 行首的强调 将正文的第一个字或字母放大并作装饰性处理,嵌入段落的开头,这在传统媒体版式设计中称之为"下坠式".此技巧的发明溯源于欧洲中世纪的文稿抄写员.由于它有吸引视线.装饰和活跃版面的作用,所以被应用于网页的文字编排中.其下坠幅度应跨越一个完整字行的上下幅度.至于放大多少,则依据所处网页环境而定. (2) 引文的强调 在进行网页文字编排时,常常会碰到提纲挈领性的文字,即引文(也称为眉头).引文概括一个段落.一个章节或全文大意,因此在编排上应给予特殊

网页的版式设计(八)

设计|网页 6.倾斜型 页面主题形象或多幅图片.文字作倾斜编排,形成不稳定感或强烈的动感,引人注目. 7.对称型 对称的页面给人稳定.严谨.庄重.理性的感受. 对称分为绝对对称和相对对称.一般采用相对对称的手法,以避免呆板.左右对称的页面版式比较常见. 四角型也是对称型的一种,是在页面四角安排相应的视觉元素.四个角是页面的边界点,重要性不可低估.在四个角安排的任何内容都能产生安定感.控制好页面的四个角,也就控制了页面的空间.越是凌乱的页面,越要注意对四个角的控制.  8.焦点型 焦点型的网页版式

网页的版式设计(七)

设计|网页 三.版式的基本类型 网页版式的基本类型主要有骨骼型.满版型.分割型.中轴型.曲线型.倾斜型.对称型.焦点型.三角型.自由型十种. 1.骨骼型 网页版式的骨骼型是一种规范的.理性的分割方法,类似于报刊的版式.常见的骨骼有竖向通栏.双栏.三栏.四栏和横向的通栏.双栏.三栏和四栏等.一般以竖向分栏为多.这种版式给人以和谐.理性的美.几种分栏方式结合使用,既理性.条理,又活泼而富有弹性.  2.满版型 页面以图像充满整版.主要以图像为诉求点,也可将部分文字压置于图像之上.视觉传达效果直观而强