第八章 8.2 页眉和文本文字-高二《网页美工-网页色彩与布局设计》同步教学课件 （电子工业出版社·第2版）

页 眉 3 PART 1 页 眉 Page Header 页眉是网页顶端的文本和图像，是浏览者最先看到的网页信息，是网页设计至关重要的组成部分。现在的页眉已经不局限于单纯的logo和菜单放置了，页眉的概念被重新定义，突破局限的设定和富有创新趣味的图片让页眉的设计冲破空间的限制，给浏览者留下深刻印象。下面一一给大家分析不同页眉的展示效果。 2 8.3 页眉 1.图8-16所示的页眉中充分体现了网站自身的香甜气氛，正如导航栏中所写“闭着眼睛点，道道都好吃”，甚至不需要看下面的内容就能大致通过图片和装饰猜出网站的风格。 页 眉 Page Header 3 8.3 页眉 图8-16 西贝官网 2. 如图8-17所示页面，页眉就轻松多了，并且与传统页眉不同，看不到导航栏在哪里，单独拿出来看还以为是一张漫画，实际上用这种好玩的漫画来反映枯燥无味的化学，让对科学毫无兴趣的人也感到妙趣横生。 图8-17轻松气氛页眉 页 眉 Page Header 4 8.3 页眉 8.3 页眉 3.如图8-18所示的页眉，设计师着实花费了一番心思，将这些男装服饰的许多元素与空间恰当地组合起来确实是一个不错的创意，也正切合了网站的主题：尊重自然与传统手工制作方式、推崇多元的设计、表现手法、永葆追求时尚之心苦。 图8-18切实主题页眉 页 眉 Page Header 5 8.3 页眉 4. 几乎每个人都希望自己生活简单一点，如图8-19所示这个网站的页眉恰好遵循了这一原则，简单，以一个俯视的角度展现了工作、设计中的一种状态，简单做，往往也不差。 图8-19简单风格页眉 页 眉 Page Header 6 8.3 页眉 5.如图8-20所示页面，这个页眉的导航栏几乎看不见，但这个页眉却做得很有意思，像是进入一个神秘的店铺，一个似乎是有很多故事的掌柜在柜台里等待你的问话，神秘又好奇的气息扑面而来，冲着这个页眉，这个网站也不会做得差到哪去。 图8-20神秘气氛页眉 页 眉 Page Header 7 文本文字 4 PART 网页中文字的设计形式 网页中文字布局形式 文字应用案例分析 网页中文字布局形式 8 文本文字 Textual Worf 一个网站需要怎么传达信息，可能就是非文字莫属了，出现了文字，就会出现文字排版、字体选择、字体颜色、大小与粗细等细节。而这些细节，往往是非常重要的细节。好的文字设计及排版不仅能够准确地传达出设计者的心意，而且能使浏览者在浏览网页时能够有一个好的心情。 文字无非逃不开两个方面，实用性与创意性。实用性自不必多数，不需要花哨的颜色和设计，能够让浏览者一眼就看出表达内容就是很好地文字设计，国内多用于宋体、黑体、楷体等字体，这些字体用于显示屏中是最使人眼睛舒服的一种设定，符合中国人看字的习惯。 9 8.4 网页中文字的设计形式 以人民网和新华网为例，如图8-21、图8-22所示，新闻网站是最需要准确明了传达信息的，所以创意性就稍微让步，因此这两个国内权威的新闻网站就运用了黑体与宋体的结合，标题等惯例都用了黑体来表现，而小标题使用宋体加粗来区分正文与小标题，正文自然就运用宋体来表现。 图8-21 人民网网站的字体 图8-22 新华网的网站字体 文本文字 Textual Worf 10 虽说新闻网站大多都运用冷静、客观的黑体和宋体，但并不是所有的网站都习惯走大众化，比如天猫和一号店，如图8-23、2-24所示，典型的电商网站，就不能如此冷酷无情的堆一堆字体上去，把文字带上装饰、运用综艺体、圆体这种娱乐性较强的文字把页面打扮得绚丽美观，才是吸引顾客的首选。 文本文字 Textual Worf 11 8.4 网页中文字的设计形式 图8-23 天猫网站的字体 图8-24 唯品会网站的字体 8.4.1网页中文字的设计形式 页面里的正文部分是由许多单个文字经过编排组成的群体，要充分发挥这个群体形状在版面整体布局中的作用。从艺术的角度可以将字体本身看成是一种艺术形式，它在个性和情感方面对人们有着很大影响。在网页设计中，字体的处理与颜色、版式、图形等其他设计元素的处理一样非常关键。从某种意义上来讲，所有的设计元素都可以理解为图形。下面主要阐述常见的几种文字处理方法。 文本文字 Textual Worf 12 8.4.1网页中文字的设计形式 1.文字的图形化 字体具有两方面的作用：一是实现字意与语义的功能，二是美学效应。所谓文字的图形化，即是强调它的美学效应，把记号性的文字作为图形元素来表现，同时又强化了原有的功能。作为网页设计者，既可以按照常规的方式来设置字体，也可以对字体进行艺术化