网站美工设计基础 第4章网页版式设计的图文魅力 第4章网页版式设计的图文魅力 学习目标 本章侧重介绍版式设计的基本要素、类型及形式法则； 了解网页的界面空间；掌握网页的版式构成与设计；培养学 习者对优秀网页版式分析和模仿能力。在完成基础知识教学 任务的同时，着重提高学习者对网页版式设计的认识和理解， 加强对学习者实际动手能力的培养，使之最终能设计出优秀 网页。 学习要求 掌握：网页版式的基本类型和网页内容的编排。 理解：版式设计的形式法则。 了解：版式设计的基本要素、网页的界面空间。 1402-15珠海广播电视大学信息工程系杨晓安 冈✉D☒
网站美工设计基础 第4章 网页版式设计的图文魅力 14-02-15 珠海广播电视大学信息工程系 杨晓安 学习目标 本章侧重介绍版式设计的基本要素、类型及形式法则； 了解网页的界面空间；掌握网页 的版式构成与设计；培养学 习者对优秀网页版式分析和模仿能力。在完成基础知识教学 任务的同时，着重提高学习者对网页版式设计的认识和理解， 加强对学习者实际动手能力的培养，使之最终能设计出优秀 网页。 学习要求 掌握：网页版式的基本类型和网页内容的编排。 理解：版式设计的形式法则。 了解：版式设计的基本要素、网页的界面空间。 第4章 网页版式设计的图文魅力
网站美工设计基础 第4章网页版式设计的图文魅力 ■4.1版式设计的视觉要素和造型要素 ■4.2版式设计的审美形式原理 ■4.3网页的版式设计 ■本章实训 14-02-15 珠海广播电视大学信息工程系杨晓安 >DI
网站美工设计基础 第4章 网页版式设计的图文魅力 14-02-15 珠海广播电视大学信息工程系 杨晓安 4．1 版式设计的视觉要素和造型要素 4．2 版式设计的审美形式原理 4．3 网页的版式设计 本章实训
网站美工设计基础 第4章网页版式设计的图文魅力 4.1版式设计的视觉要素和造型要素 ■4.1.1版式设计的视觉要素 文字、图形和色彩是版式设计中最基本的视觉 要素。它们有着各自不同的功能和作用。文字是 非常有效的传送信息的方式，具有很强的说服力， 而图片和色彩可以使设计更加美观、更具吸引力， 可以更直观、生动地将信息表达出来。在设计的不 同类型中，文字、图片和色彩这三大要素的表达方 式各有不同，因此，设计者在处理版面时，必须掌 握各要素的特征，以便于更有效、更合理地表现与 传达主题思想和设计意图。 14-0215珠海广播电视大学信息工程系杨晓安 ☑✉D阿
网站美工设计基础 第4章 网页版式设计的图文魅力 14-02-15 珠海广播电视大学信息工程系 杨晓安 4．1 版式设计的视觉要素和造型要素 4．1．1 版式设计的视觉要素 文字、图形和色彩是版式设计中最基本的视觉 要素。它们有着各自不同的功能和作用。 文字是 非常有效的传送信息的方式，具有很强的说服力， 而图片和色彩可以使设计更加美观、更具吸引力， 可以更直观、生动地将信息表达出来。在设计的不 同类型中，文字、图片和色彩这三大要素的表达方 式各有不同，因此，设计者在处理版面时，必须掌 握各要素的特征，以便于更有效、更合理地表现与 传达主题思想和设计意图
网站美工设计基础 第4章网页版式设计的图文魅力 1.文字 文字是版式设计中的重要构成部分。它不仅是语言信息 的载体，也是具有视觉识别特征的符号系统，更是一种高尚 的艺术表现形式。文字的作用已提升到启迪性和宣传性、引 领人们的审美时尚的新视角。文字是版面的核心，也是视觉 传达最直接的方式，运用经过精心处理的文字材料，完全可 以制作出效果很好的版面，而不需要任何图形。因此，文字 设计是增强视觉传达效果，提高作品的诉求力，赋予版式审 美价值的一种重要构成技术。 ■(1)字体和字号 ◆ 字体是文字最基本的元素，字体的设计、选用是版式构 成的基础。在版式设计中，字体首先作为造型元素而出现， 在运用中不同字体造型具有不同的独立品格，给予人不同的 视觉感受和比较直接的视觉诉求力。 40215珠海广播电视大学信息工程系杨晓安
网站美工设计基础 第4章 网页版式设计的图文魅力 14-02-15 珠海广播电视大学信息工程系 杨晓安 1．文字 文字是版式设计中的重要构成部分。它不仅是语言信息 的载体，也是具有视觉识别特征的符号系统，更是一种高尚 的艺术表现形式。文字的作用已提升到启迪性和宣传性、引 领人们的审美时尚的新视角。文字是版面的核心，也是视觉 传达最直接的方式，运用经过精心处理的文字材料，完全可 以制作出效果很好的版面，而不需要任何图形。因此，文字 设计是增强视觉传达效果，提高作品的诉求力，赋予版式审 美价值的一种重要构成技术。 (1)字体和字号 字体是文字最基本的元素，字体的设计、选用是版式构 成的基础。在版式设计中，字体首先作为造型元素而出现， 在运用中不同字体造型具有不同的独立品格，给予人不同的 视觉感受和比较直接的视觉诉求力
网站美工设计基础 第4章网页版式设计的图文魅力 ■字号是区分文字规格大小的名称，字号大小可以用不同的方 式来计算，例如点数也称磅(point)或像素(pixel)。现在电脑 排版系统的字号多数以点数来计算的。1点为0.35mm,书 籍上正文用的比较多的是五号字，为10.5点，3.69mm。 字号的大小直接影响到阅读效果和版面美观，因此要根据内 容和阅读对象来确定字号的大小。 (2)字距与行距 字距和行距的变化也会对文本的可读性产生很大影响，是 设计师设计品位的直接体现。一般情况下，接近字体尺寸的行 距设置比较适合正文。行距的常规比例为10：12，即用字10 点，则行距12点。适当的行距会形成一条空白带，以引导浏览 者的目光，而行距过宽会使一行文字失去较好的延续性。 字距和行距本身也是具有很强表现力的设计语言，为了加 强版式的装饰效果，可以有意识地加宽或缩窄字距和行距，体 现独特的审美意趣。 14-02-15 珠海广播电视大学信息工程系杨晓安
网站美工设计基础 第4章 网页版式设计的图文魅力 14-02-15 珠海广播电视大学信息工程系 杨晓安 字号是区分文字规格大小的名称，字号大小可以用不同的方 式来计算，例如点数也称磅(point)或像素(pixel)。现在电脑 排版系统的字号多数以点数来计算的。1点为0．35 mm，书 籍上正文用的比较多的是五号字，为10．5点，3．69mm。 字号的大小直接影响到阅读效果和版面美观，因此要根据内 容和阅读对象来确定字号的大小。 (2)字距与行距 字距和行距的变化也会对文本的可读性产生很大影响，是 设计师设计品位的直接体现。一般情况下，接近字体尺寸的行 距设置比较适合正文。行距的常规比例为10：12，即用字10 点，则行距12点。适当的行距会形成一条空白带，以引导浏览 者的目光，而行距过宽会使一行文字失去较好的延续性。 字距和行距本身也是具有很强表现力的设计语言，为了加 强版式的装饰效果，可以有意识地加宽或缩窄字距和行距，体 现独特的审美意趣
网站美工设计基础 第4章网页版式设计的图文魅力 ■如图4一1对部分字母放大作为产宁两 装饰和活跃版面的作用；图4 自然，增加亲切感；图4一3略 的部分文字，不失庄重，但又 字号的英文，使杂志封面丰富 化，把记号性的文字作为图形 功能；图4一6文字与文字间经 下一，爱 跃感，体现了一种艺术思潮。 20.30.40岁 让你海个年 都富有 精明理财术 图4一1放大部分字母图4一2随意的手写体 14-02-15 珠海广播电视大学信息工程系杨晓安
网站美工设计基础 第4章 网页版式设计的图文魅力 14-02-15 珠海广播电视大学信息工程系 杨晓安 如图4—1对部分字母放大作为文字强调，有吸引视线、 装饰和活跃版面的作用；图4—2多种随意的手写体，贴近 自然，增加亲切感；图4—3略带变化的广告体标题和切开 的部分文字，不失庄重，但又显生动；图4—4不同字体和 字号的英文，使杂志封面丰富、活泼；图4—5将文字图形 化，把记号性的文字作为图形元素来表现，强化了原有的 功能；图4—6文字与文字间经过叠置后，产生空间感、跳 跃感，体现了一种艺术思潮。 图4—1 放大部分字母 图4—2 随意的手写体
网站美工设计基础 第4章网页版式设计的图文魅力 时尚 EALTH 健康 時 图4一3变化的广告体标题图4 R 8周年珍藏号 S.UTH S RA IA 图4一5文字图形化图4一6文字间进行叠置 14-02-15 珠海广播电视大学信息工程系杨晓安
网站美工设计基础 第4章 网页版式设计的图文魅力 14-02-15 珠海广播电视大学信息工程系 杨晓安 图4—3 变化的广告体标题 图4—4 不同字体字号的处理 图4—5 文字图形化 图4—6 文字间进行叠置
网站美工设计基础 第4章网页版式设计的图文魅力 ② 点著中心接待中心实验中心数研中心 星 htm:/www.openedu. 4地这广福电视大学助您 com.cn/ 学业、事业更上一层楼！ 首页1电大介绍专业介绍引铝生报名教务管理考试信息平合支持论坛 ⊙用户名登录O学号登录 密码： 9©拉师注泄取回草码营录帮助查学呈 扶术服务热线400-680-179 色8国家精品课程 公售Bulletin Board ⑨精影专溪 ·离散数学 关于举九我片由大同行”广 《离敢数学》课程学习平台 。货币银行学 。电视大学学生数码摄影大赛的通 ·经济数字基甜 88电大在线 B 第一届文法类教师忧秀论文评选 ·公司财务 ·200秋工商、会计、金融 ·西方经济学 ·国际法（国际公法） 中央广播电视大学课程答疑论号 。芳动法学 于费 ·综合英语 ·开放教育统设课程试评工作总结双向视频会议 。关于召开“我与电大同行”广播电视大学学生数码摄影大赛视频 红会大宇 会议的通知 ‘腰致大宇百我品短 更多专题 ·汉语言文学专业网上培训66人获论文答辩主持人资格 更多 雪专业生页 UD三学生频道 学生常见间题 ·英语（本利 中教育电视台电大课程搭出表 ·为什么我的学生行为计 ·数字与应用数学（本） 查询在转时0？ 。论左使用和教学活动须知 ·计算机科学与技本利 爱交鑫李生能用手用孩师使用手市 单向视频 09.04201230-1320 。中央电大教学平台使用帮 ·数育管理本利 病理学 单向视频 0904211230-1320 14-02-15 珠海 播电视大学信息工程系 杨晓安
网站美工设计基础 第4章 网页版式设计的图文魅力 14-02-15 珠海广播电视大学信息工程系 杨晓安 http://www.gdrtvu.com.cn/index.asp http://www.openedu.com.cn/
网站美工设计基础 第4章网页版式设计的图文魅力 ■如图4一7,4一8示意不同字号和间距的文字设计； ■图4一9为形象字体，根据文字的意思或内容进行艺术创造 的字体，内容与形式达到和谐的统一； ■图4一10为意象字体，将特定的文字个性化，一目了然地 展示文字的内容，产生更多的回味。 图4一7不同字号和间距的文字设计（一）图4一8不同字号和间距的文字设计（二） 14-02-15 珠海广播电视大学信息工程系杨晓安
网站美工设计基础 第4章 网页版式设计的图文魅力 14-02-15 珠海广播电视大学信息工程系 杨晓安 如图4—7，4—8示意不同字号和间距的文字设计； 图4—9为形象字体，根据文字的意思或内容进行艺术创造 的字体，内容与形式达到和谐的统一； 图4—10为意象字体，将特定的文字个性化，一目了然地 展示文字的内容，产生更多的回味。 图4—7 不同字号和间距的文字设计(一) 图4—8 不同字号和间距的文字设计(二)
网站美工设计基础 第4章网页版式设计的图文魅力 图4-9 象形字体图4-10意象字体 危零中 14-02-15 珠海广播电视大学信息工程系杨晓安
网站美工设计基础 第4章 网页版式设计的图文魅力 14-02-15 珠海广播电视大学信息工程系 杨晓安 图4-9 象形字体 图4-10 意象字体