《网页中的文字和图像.ppt》由会员分享，可在线阅读，更多相关《网页中的文字和图像.ppt（22页珍藏版）》请在三一办公上搜索。
1、第2章 网页中的文字和图像 网络世界五彩缤纷，涌现出大量优秀精美的网页。大量的网络信息，无非就是通过文本、图像、动画等网页元素来呈现，其中，文本和图像是网页中最为重要的设计元素。本章介绍文字和图像在网页中的应用，主要内容包括：网页中的文字 在网页中使用图像 图像的编辑,2.1 网页中的文字文字是网页中最基础的信息载体，浏览者主要通过文字了解网页的内容。虽然利用图形文字也可以达到同样的效果，甚至超出纯文本的效果，但是网页文字的优势还是无法被取代的。因为纯文本所占用的存储空间非常小，浏览纯文本网页时，占用的网络带宽较少，能快速地被用户打开。,2.1.1 应用文字在网页中应用文字有三种方法：直接输入
2、、粘贴剪贴板中的文字、导入Word文档。1直接输入2粘贴剪贴板中的文字3导入Word文档,2.1.2 课堂实例设置段落效果在网页设计时，文字段落制作的层次分明，才能让浏览者更好地阅读。也使得网页看起来整洁、美观。对于段落的设置，主要有几个方面的内容。段落的对齐方式、段落行间距设置、文本缩进的设置等。1对齐文本2段落行间距和换行标签 3文本缩进,在body：,在head：body line-height:160%;word-spacing:12px;,2.1.3 课堂实例设置文字标题HTML的标题标签主要用来快速设置文本标题的格式，典型的形式是，它用来设置第一层标题，设置第二层标题，以此类推。1
3、在代码视图直接定义标题标签,2在属性面板中设置标题,图1-20 在“属性”面板中设置标题,2.1.4 课堂实例设置文字格式文字字体、颜色、粗体、斜体和下画线等是最基本的文字格式，在网页中设置合适的文字格式，也是保证网页漂亮外观的关键。1字体标签编辑器：文本工具栏-单击字体标签编辑器 2在设计视图设置文字格式:属性面板3.利用css 样式编辑器做特效文字:css样式面板-新建css 模糊效果：Blur(Add=true,Direction=135,Strength=15)阴影字：DropShadow(Color=gray,OffX=1,OffY=1,Positive=1);阴影效果：Shadow
4、(Color=darkred,Direction=135);光晕效果：Glow(Color=blue,Strength=6);波纹效果：Wave(Add=false,Freq=4,LightStrength=2,Phase=3,strength=6);Add是否要波形样式扭曲,取值为true or false;Freq波纹数；LightStrength光影的效果0100；Phase 角度变形百分比0100；Strength变形强度。,2.1.5 使用段落列表列表是HTML中组织多个段落文本的一种方式，列表分成编号列表和项目列表，前一种列表用数字顺序为列表中的项目进行编号，而后一种列表则在每个列
5、表项目之前使用一个项目符号。1编号列表,专家点拨：编号列表又称为有序列表，使用标签创建编号列表。具体使用方法是：列表项目一列表项目二列表项目三列表项目四,2项目列表,专家点拨：项目列表使用标签创建编号列表。具体使用方法是：列表项目一列表项目二列表项目三,2.1.6 设置页面属性页面属性的设置主要控制页面的整体外观，包括背景、标题等。Dreamweaver 8提供了【页面属性】对话框，在这个对话框中提供了多种页面属性的设置方法。1设置背景图片2设置页面标题3设置页面边距,2.2 使用图像在网页设计中，图像的重要性仅次于文字，也是使用非常频繁的页面元素。本节介绍在网页插入图像的方法以及设置图像的尺
6、寸和边框的方法。2.2.1 网页中常见的图像格式网页中使用的图像可以是GIF、JPEG、BMP、TIFF、PNG等格式的图像文件，而目前使用最广泛的主要是GIF、JPEG和PNG三种格式。,2.2.2 在网页中使用图像 图像也是网页元素中的重要组成部分，在网页中插入图像可以使网页更好地表现网站的主题思想，使版面变得更加丰富多彩，吸引更多的浏览者。在网页中使用图像时，要考虑图像在页面中的整体效果。1插入图像2设置图像的尺寸和边框,2.3 图像的编辑 在网页中使用了图像以后，经常需要对图像做进一步的编辑，以达到满意的效果。2.3.1 设置图文混排、图像边距、图片特效1设置图文混排,2设置图像边距,
7、3.利用css滤镜做图片特效,Alpha滤镜Alpha滤镜用于改变目标元素的透明度，也就是将目标元素与背景融合。语法：ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,starty=starty,finishx=finishx,finishy=finishy)Alpha滤镜的参数如下：Opacity：设置透明度。范围是0100，0表示完全透明，100表示完全不透明。FinishOpacity：与Opacity一起使用的选择性参数。当同时设置Opacity和FinishOpacity时，可以制作
8、出透明渐变的效果；其属性值也是0100，0表示完全透明，100表示完全不透明。Style：设置渐变风格。同时设置了Opacity和FinishOpacity产生透明渐变时，它主要是用来指定渐变的显示形状，0代表均匀渐变，1代表线形渐变，2代表放射渐变，3代表直角渐变。StartX和StartY：用来设置水平和垂直方向的渐变起始位置。FinishX和FinishY：用来设置水平和垂直方向的渐变结束位置。加载Alpha滤镜后的效果如图3.46所示,图3.46 加载Alpha滤镜的前后的图片效果图3.46的效果代码为：Alpha(Opacity=10,FinishOpacity=90,Style=1
9、,StartX=0,StartY=0,FinishX=80,FinishY=80)；,3.利用css滤镜做图片特效,FlipH，FlipV滤镜语法：filter:fliph,filter:flipv 作用：分别是水平翻转和垂直翻转。效果如图3.47所示。,(a)原图(b)水平翻转,3.利用css滤镜做图片特效,Gray，Invert，Xray滤镜语法：filter:gray,filter:invert,filter:xrayGray滤镜是将一张图片变成灰度图；Invert滤镜是把对象的可视化属性全部翻转，包括色彩、饱和度和亮度值；Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮，也就是所谓的
10、X光片。Gray，Invert，Xray滤镜效果如图所示。,(a)原图(b)Gray滤镜效果图(c)Invert滤镜效果图(d)Xray滤镜效果图,2.3.2 优化图像和图像剪裁1使用Fireworks优化图片2图片裁剪,2.3.3 插入和使用图像占位符图像占位符是在准备好将最终图像添加到Web 页面之前使用的图形，通过使用图像占位符，可以在真正创建图像之前确定图像在页面上的位置和大小。1插入图像占位符2替换图像占位符2.3.4 利用图片切片快速制作网页,本章练习,练习1 美化文字格式制作文字网页，加入网页标题、背景图片，设置文字格式，段落行间距、字符距等效果，如图1-80所示。请按照图中的提示信息进行制作。,图1-80 美化文字格式,练习2 美化文字格式用ps切片图片制作一个网页，加入一定的文字特效,练习3 图文并茂 制作一个图文并茂的网页，效果如图1-81所示。注意这里要应用图像属性中的左对齐和右对齐项设置图文并茂的网页效果。,图1-81 图文并茂,
