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