《网页美工设计Photoshop+Flash+Dreamweaver从入门到精通》——1.5 文字与图像版式设计

简介:

本节书摘来自异步社区《网页美工设计Photoshop+Flash+Dreamweaver从入门到精通》一书中的第1章,第1.5节,作者: 安道通 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.5 文字与图像版式设计

网页美工设计Photoshop+Flash+Dreamweaver从入门到精通
文本是人类重要的信息载体和交流工具,网页中的信息也是以文本为主。虽然文字不如图像直观形象,但是却能准确地表达信息的内容和含义。在确定网页的版面布局后,还需要确定文本的样式,如字体、字号和颜色等,还可以将文字图形化。

1.5.1 文字的字体、字号、行距
网页中,中文默认的标准字体是“宋体”,英文是The New Roman。如果在网页中没有设置任何字体,在浏览器中将以这两种字体显示。

字号大小可以使用磅(point)或像素(pixel)来确定。一般网页常用的字号大小为12磅左右,较大的字体可用于标题或其他需要强调的地方,小一些的字体可以用于页脚和辅助信息。需要注意的是,小字号容易产生整体感和精致感,但可读性较差。

无论选择什么字体,都要依据网页的总体设想和浏览者的需要。在同一页面中,字体种类少,版面雅致,有稳重感,字体种类多,则版面活跃,丰富多彩。如何布局的关键是根据页面内容来掌握相关比例关系。

变化的行距也会对文本的可读性产生很大影响。一般情况下,接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12,即字用10点,则行距用12点,如图1-14所示,否则行距太小字体看着很不舒服,而行距适当放大后字体感觉比较合适。


92c46b3d430c570ae3fa1605d6b206602ac6098f

行距可以用行高(line-height)属性来设置,建议以磅或默认行高的百分数为单位,如20pt或150%。
**
1.5.2 文字的图形化**
所谓文字的图形化,即把文字作为图形元素来表现,能起到强化原有功能的作用。作为网页设计者,既可以按照常规的方式来设置字体,也可以对字体进行艺术化的设计。无论怎样,一切都应该围绕如何更出色地实现自己的设计目标。

将文字图形化,以更富创意的形式表达出深层的设计思想,能够避免网页的单调与平淡,从而打动人心,图1-15所示为图形化的文字。


7462b01ca30500769adbc86f9cda50802c8c0401
相关文章
|
移动开发 前端开发 JavaScript
Dreamweaver制作网页的步骤
Dreamweaver软件制作网页的步骤
119 0
|
JavaScript
dreamweaver能制作移动网页吗?
dreamweaver能制作移动网页吗?
64 0
Dreamweaver网页色彩的搭配
Dreamweaver网页色彩的搭配
93 0
带你读《Photoshop+Dreamweaver淘宝天猫网店美工与广告设计一本通 : 实战版》之三:商品图像的修复与修饰
本书是一本从网店装修实际需求出发编写的实例型教程,以Photoshop和Dreamweaver为软件环境,详细讲解了它们在网店装修中的应用,帮助读者快速掌握网店图像处理和页面排版的核心技能。本书内容实用,图文并茂,可操作性强,适合网店店长、网店美工等希望快速掌握网店装修和推广技术的读者阅读和学习,也可作为大专院校相关专业或电商培训机构的教学参考书。
|
存储 编解码
带你读《Photoshop+Dreamweaver淘宝天猫网店美工与广告设计一本通 : 实战版》之二:商品图像的快速调整
本书是一本从网店装修实际需求出发编写的实例型教程,以Photoshop和Dreamweaver为软件环境,详细讲解了它们在网店装修中的应用,帮助读者快速掌握网店图像处理和页面排版的核心技能。本书内容实用,图文并茂,可操作性强,适合网店店长、网店美工等希望快速掌握网店装修和推广技术的读者阅读和学习,也可作为大专院校相关专业或电商培训机构的教学参考书。
带你读《Photoshop+Dreamweaver淘宝天猫网店美工与广告设计一本通 : 实战版》之一:写在处理之前
本书是一本从网店装修实际需求出发编写的实例型教程,以Photoshop和Dreamweaver为软件环境,详细讲解了它们在网店装修中的应用,帮助读者快速掌握网店图像处理和页面排版的核心技能。本书内容实用,图文并茂,可操作性强,适合网店店长、网店美工等希望快速掌握网店装修和推广技术的读者阅读和学习,也可作为大专院校相关专业或电商培训机构的教学参考书。

热门文章

最新文章