网页美工设计-字体设计课件

项目项目3 3 网页字体设计网页字体设计 任务任务1 1 千变万化的字体设计千变万化的字体设计 课件课件（建议（建议2 2学时）学时）项目3 网页字体设计 任务1 千变万化的字体设计 课件（建议学习目标学习目标1.了解网页字体以及字体的编排 。2.掌握网页字体的设计原则 。3.掌握不同风格的字体在不同页面中的应用 。4.学会常见字体的特效设计 。学习目标1.了解网页字体以及字体的编排。知识准备知识准备了解网页中的字体案例欣赏案例欣赏下图为以字体为主的网页。知识准备了解网页中的字体案例欣赏下图为以字体为主的网页 知识准备知识准备了解网页中的字体案例分析案例分析 （1 1）表现形式：）表现形式：用字体和简易图形作为网页界面的主要表现目标。（2 2）色彩运用：）色彩运用：色彩上采用黑色、橙色和灰色相结合的设计方式。（3 3）栏目设置：）栏目设置：依据易用性原则，设置了网站的各要素。（4 4）动态效果设计：）动态效果设计：当鼠标点击导航，图片和具体内容时，轻松进入站点，简单，明了，易于操作。知识准备了解网页中的字体案例分析（1）表现形式：用字体知识准备知识准备了解网页中的字体理论概要理论概要 （1 1）字体设计：）字体设计：字体字号字体的粗细字距和行距（2 2）字体编排设计）字体编排设计:两端对齐 一端对齐 居中对齐 文字绕图 自由编排（3 3）字体的风格：）字体的风格：动感活力 稳重规范 随意潇洒 活泼可爱 雅致端庄 简单大方（4 4）文字编排中常见的设计方式文字编排中常见的设计方式:（5 5）字体色彩设计）字体色彩设计:（6 6）网页字体的设计原则）网页字体的设计原则:知识准备了解网页中的字体理论概要（1）字体设计：字 字体字体字号字号字体的粗细字体的粗细字距和行距字距和行距 字体字号字体的粗细字距和行距 两端对齐两端对齐 一端对齐一端对齐 居中对齐居中对齐 文字绕图文字绕图 自由编排自由编排 两端对齐 一端对齐 居中对齐 文字绕图 动感活力动感活力 稳重规范稳重规范 随意潇洒随意潇洒 活泼可爱活泼可爱 雅致端庄雅致端庄 简单大方简单大方 动感活力 稳重规范 随意潇洒 活泼可爱 同等重量，级别的内容，文字大小，粗细的变化需统一，同等重量，级别的内容，文字大小，粗细的变化需统一，以便浏览者分清主从关系，更好的理解文字内容和所传达以便浏览者分清主从关系，更好的理解文字内容和所传达的信息。的信息。运用通栏方式编排文字，页面显得规整有序，更利于浏运用通栏方式编排文字，页面显得规整有序，更利于浏览者阅读；运用分栏方式编排文字，可丰富网页版面。览者阅读；运用分栏方式编排文字，可丰富网页版面。字体编排与网站色彩、风格需统一，例如女性网站可选字体编排与网站色彩、风格需统一，例如女性网站可选用秀丽的细体字；男性网站可选用挺拔的粗体字；儿童网用秀丽的细体字；男性网站可选用挺拔的粗体字；儿童网站可选用可爱的艺术字。站可选用可爱的艺术字。艺术字体的运用可增添页面的独特魅力，特立独行的艺艺术字体的运用可增添页面的独特魅力，特立独行的艺术字可给浏览者强烈的视觉冲击力，从而加深对网站得印术字可给浏览者强烈的视觉冲击力，从而加深对网站得印象。象。不同程度的倾斜字体可以给浏览者不同的视觉效果，并不同程度的倾斜字体可以给浏览者不同的视觉效果，并为网页注入新的活力，增添网页的动感和韵味。为网页注入新的活力，增添网页的动感和韵味。同等重量，级别的内容，文字大小，粗细的变化需统一，以便浏 对比色的运用对比色的运用 多种颜色字体的配置效果多种颜色字体的配置效果 利用强调色突出网站的特别信息利用强调色突出网站的特别信息 对比色的运用 多种颜色字体的配置效果 利用强调色突出字体是网页的重要组成部分，字体设计的好坏直字体是网页的重要组成部分，字体设计的好坏直接影响网页的美观及内容的有效传播，所以设计接影响网页的美观及内容的有效传播，所以设计字体的时候要遵循以下几个基本原则：字体的时候要遵循以下几个基本原则：设置字体时，尽可能使用通俗易懂的常用字体，设置字体时，尽可能使用通俗易懂的常用字体，避免繁杂凌乱，防止字体失去可读性功用。避免繁杂凌乱，防止字体失去可读性功用。设置字体时，不宜选择过多种字体，以设置字体时，不宜选择过多种字体，以3 3种以种以内为宜；内为宜；设置字体时，根据实际情况选择字号，不宜过设置字体时，根据实际情况选择字号，不宜过大或过小；大或过小；设置字体时，字体要与网站的主题统一，以便设置字体时，字体要与网站的主题统一，以便更好的传递信息。更好的传递信息。字体是网页的重要组成部分，字体设计的好坏直接影响网页的美观及任务任务1 1：千变万化的字体设计 本任务是修改网页中文字的字体、字号和位置 ，如下图所示。任务1：千变万化的字体设计 本任务是修改网页中文字的字体、字任务分析任务分析本任务将是修改网页中文字的字体、字号和位置，感受网页中千变万化的文字效果。该图为一美容机构网站的局部截取图。从网站的布局，图片的配置到色彩的整体搭配都非常美观，但是由于网页中文字的使用不当，使网页看起来失色不少。在视觉传达的过程中，文字除了传递信息的功能外，还具有传达情感的功能，因此它必须有视觉上得美感。设计精良，美观的文字使人感到愉悦，从而获得良好的心理反应更好的发挥功效。任务分析本任务将是修改网页中文字的字体、字号和位置，感受网页任务实施任务实施1.打开素材图片。2.修改文字字体。3.修改文字字号。4.修改文字位置。5.改变字体颜色。参照教材中参照教材中“任务实施任务实施”，尝试操作，完成网页中字体的修改。，尝试操作，完成网页中字体的修改。任务实施1.打开素材图片。参照教材中“任务实施”，尝试操作，拓展探索拓展探索根据任务1的实例，重新设计编排网页中的文字。要求字体的设计与网页的整体风格既和谐统一，又要富有一定的变化，从而起到有效传递信息和美化页面的作用。拓展探索根据任务1的实例，重新设计编排网页中的文字。总总 结结1.网页中常见的字体有哪些？2.网页中常见的字体编排有哪些方式？3.网页中字体设计原则是什么？4.字体、字号的运用。总 结1.网页中常见的字体有哪些？