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

本文主要是介绍《网页美工设计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

这篇关于《网页美工设计Photoshop+Flash+Dreamweaver从入门到精通》——1.5 文字与图像版式设计...的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/265462

相关文章

Python基于微信OCR引擎实现高效图片文字识别

《Python基于微信OCR引擎实现高效图片文字识别》这篇文章主要为大家详细介绍了一款基于微信OCR引擎的图片文字识别桌面应用开发全过程,可以实现从图片拖拽识别到文字提取,感兴趣的小伙伴可以跟随小编一... 目录一、项目概述1.1 开发背景1.2 技术选型1.3 核心优势二、功能详解2.1 核心功能模块2.

MyBatis设计SQL返回布尔值(Boolean)的常见方法

《MyBatis设计SQL返回布尔值(Boolean)的常见方法》这篇文章主要为大家详细介绍了MyBatis设计SQL返回布尔值(Boolean)的几种常见方法,文中的示例代码讲解详细,感兴趣的小伙伴... 目录方案一:使用COUNT查询存在性(推荐)方案二:条件表达式直接返回布尔方案三:存在性检查(EXI

Python中OpenCV与Matplotlib的图像操作入门指南

《Python中OpenCV与Matplotlib的图像操作入门指南》:本文主要介绍Python中OpenCV与Matplotlib的图像操作指南,本文通过实例代码给大家介绍的非常详细,对大家的学... 目录一、环境准备二、图像的基本操作1. 图像读取、显示与保存 使用OpenCV操作2. 像素级操作3.

C/C++的OpenCV 进行图像梯度提取的几种实现

《C/C++的OpenCV进行图像梯度提取的几种实现》本文主要介绍了C/C++的OpenCV进行图像梯度提取的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录预www.chinasem.cn备知识1. 图像加载与预处理2. Sobel 算子计算 X 和 Y

c/c++的opencv图像金字塔缩放实现

《c/c++的opencv图像金字塔缩放实现》本文主要介绍了c/c++的opencv图像金字塔缩放实现,通过对原始图像进行连续的下采样或上采样操作,生成一系列不同分辨率的图像,具有一定的参考价值,感兴... 目录图像金字塔简介图像下采样 (cv::pyrDown)图像上采样 (cv::pyrUp)C++ O

使用Python实现网页表格转换为markdown

《使用Python实现网页表格转换为markdown》在日常工作中,我们经常需要从网页上复制表格数据,并将其转换成Markdown格式,本文将使用Python编写一个网页表格转Markdown工具,需... 在日常工作中,我们经常需要从网页上复制表格数据,并将其转换成Markdown格式,以便在文档、邮件或

Python+wxPython构建图像编辑器

《Python+wxPython构建图像编辑器》图像编辑应用是学习GUI编程和图像处理的绝佳项目,本教程中,我们将使用wxPython,一个跨平台的PythonGUI工具包,构建一个简单的... 目录引言环境设置创建主窗口加载和显示图像实现绘制工具矩形绘制箭头绘制文字绘制临时绘制处理缩放和旋转缩放旋转保存编

POI从入门到实战轻松完成EasyExcel使用及Excel导入导出功能

《POI从入门到实战轻松完成EasyExcel使用及Excel导入导出功能》ApachePOI是一个流行的Java库,用于处理MicrosoftOffice格式文件,提供丰富API来创建、读取和修改O... 目录前言:Apache POIEasyPoiEasyExcel一、EasyExcel1.1、核心特性

python+OpenCV反投影图像的实现示例详解

《python+OpenCV反投影图像的实现示例详解》:本文主要介绍python+OpenCV反投影图像的实现示例详解,本文通过实例代码图文并茂的形式给大家介绍的非常详细,感兴趣的朋友一起看看吧... 目录一、前言二、什么是反投影图像三、反投影图像的概念四、反向投影的工作原理一、利用反向投影backproj

Flutter实现文字镂空效果的详细步骤

《Flutter实现文字镂空效果的详细步骤》:本文主要介绍如何使用Flutter实现文字镂空效果,包括创建基础应用结构、实现自定义绘制器、构建UI界面以及实现颜色选择按钮等步骤,并详细解析了混合模... 目录引言实现原理开始实现步骤1:创建基础应用结构步骤2:创建主屏幕步骤3:实现自定义绘制器步骤4:构建U