第4章处理文本详解.ppt

4.1 文字在网页中的表现形式 4.2 在网页中输入文本 4.2 在网页中输入文本 4.2 在网页中输入文本 4.2 在网页中输入文本 4.3 插入特殊文本对象 4.3 插入特殊文本对象 4.3 插入特殊文本对象 4.3 插入特殊文本对象 4.3 插入特殊文本对象 4.3 插入特殊文本对象 4.3 插入特殊文本对象 4.4 设置文本属性 4.4 设置文本属性 4.4 设置文本属性 4.5 CSS设计文字样式 4.5 CSS设计文字样式 4.5 CSS设计文字样式 4.5 CSS设计文字样式 4.5 CSS设计文字样式 4.5 CSS设计文字样式 4.5 CSS设计文字样式 4.6 CSS设计文本的段落样式 4.6 CSS设计文本的段落样式 4.6 CSS设计文本的段落样式 4.6 CSS设计文本的段落样式 4.6 CSS设计文本的段落样式 4.6 CSS设计文本的段落样式 字体设计的一般原则 4.7 CSS滤镜设计特效文字 4.7 CSS滤镜设计特效文字 4.7 CSS滤镜设计特效文字 4.7 CSS滤镜设计特效文字 4.7 CSS滤镜设计特效文字 4.7 CSS滤镜设计特效文字 4.7 CSS滤镜设计特效文字 4.8 实现文字滚动 （1）为了保证全球范围内都可以正常浏览网页，内容文字很少使用艺术字体，英文往往采用Times New Roman字体，中文一般采用宋体，个别地方也可使用黑体或隶书等。 （2）大标题，小内文；粗标题，细内文；字体少，字形少。 （3）字体要与网站内容、图片文字等相协调，保持统一风格。 （4）文字的色彩要与背景有一定差异，保持可见性、易读性。 （5）全文排版最忌讳不分段，将一堆文字堆积在一起。 （6）字体大小要适中，保持页面整洁，阅读舒适。 滤镜是对CSS的扩展，与Photoshop中滤镜相似，可用很简单的方法对页面中的文字进行特效处理。使用CSS滤镜属性可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上，由Filter属性控制。 1.阴影：为图像设置阴影效果。其语法为： filter:DropShadow(color=阴影颜色,Offx=参数值,Offy=参数值,Positive=参数值） （1）color：设置阴影的颜色 （2）Offx/ Offy ：设置阴影相对于图像移动的水平/垂直距离 （3）Positive：布尔值，0指为透明像素生成阴影；1指不透明像素生成阴影。 2.模糊：设置块级元素的方向和位置上产生动感模糊的效果。 filter:blur(add=参数值,direction=方向值,strength=强度值） （1）add：布尔值，设置滤镜是否激活，可为True或False （2）direction ：设置模糊参数，按顺时针方向以45度为单位进行积累 （3）strength：只能使用整数指定，代表有几个像素的宽度将受到影响，默认为5个 3.光晕：设置在对象周围发光的效果。 filter:glow(color=颜色代码, strength=强度值） （1）color：设置发光的颜色 （2）strength：设置发光的强度，取值范围为1~255，默认值为5 4.遮罩：为对象建立一个覆盖于表面的膜，实现一种颜色框架的效果。 filter:Mask(color=颜色代码） color：最后遮罩显示的颜色 LOGO * LOGO 图 像 文本 网 页 视频 动 画 超链接 音频 表格、表单、导航、条、悬停按钮、Java特效、AxtiveX组件等 2.内容文字 用于展示网页内容的信息载体，网页制作时，由网页制作软件Dreamweaver输入完成，其样式的设置一般是通过CSS进行控制。 1.特效文字 用文字传达信息并起到装饰作用时，就必须将文字进行特效处理，使其给具有文字的外观，又具有图像的艺术效果。特效文字通常作为网站标题文字、广告文字或导航文字出现，很少用于主体内容，其设计要符合平面设计原则，兼顾网站整体风格，协调统一。 1.输入文本的两种方法 （1）直接输入法：在网页编辑窗口中直接用键盘输入文本。 （2）复制法：使用Dreamweaver的文本复制功能，将其他应用程序生成的文本复制粘贴到网页编辑窗口来进行排版工作。 2.输入文字时的注意事项 （1）文本的编码方式：根据用户语言的不同，选择不同的文本编码方式，错误的文本编码方式将使中文字体显示为乱码，具体步骤如下： 单击【属性】面板上的“页面属性”按钮，打开“页面属性”对话框，在左侧的“分类”列表中选择“标题/编码”选项，在“编码”下拉列表中可以选择页面的编码格式。默认情况下，在Dreamweaver CS5中新建的HTML页面，默认的页面编码格式为UTF-8，是