网页中的文字和图像.ppt

第2章网页中的文字和图像网络世界五彩缤纷，涌现出大量优秀精美的网页。大量的网络信息，无非就是通过文本、图像、动画等网页元素来呈现，其中，文本和图像是网页中最为重要的设计元素。本章介绍文字和图像在网页中的应用，主要内容包括：网页中的文字在网页中使用图像图像的编辑,2.1网页中的文字文字是网页中最基础的信息载体，浏览者主要通过文字了解网页的内容。虽然利用图形文字也可以达到同样的效果，甚至超出纯文本的效果，但是网页文字的优势还是无法被取代的。因为纯文本所占用的存储空间非常小，浏览纯文本网页时，占用的网络带宽较少，能快速地被用户打开。,2.1.1应用文字在网页中应用文字有三种方法：直接输入、粘贴剪贴板中的文字、导入Word文档。1直接输入2粘贴剪贴板中的文字3导入Word文档,2.1.2课堂实例设置段落效果在网页设计时，文字段落制作的层次分明，才能让浏览者更好地阅读。也使得网页看起来整洁、美观。对于段落的设置，主要有几个方面的内容。段落的对齐方式、段落行间距设置、文本缩进的设置等。1对齐文本2段落行间距和换行标签3文本缩进,在body：,在head：bodyline-height:160%;word-spacing:12px;,2.1.3课堂实例设置文字标题HTML的标题标签主要用来快速设置文本标题的格式，典型的形式是，它用来设置第一层标题，设置第二层标题，以此类推。1在代码视图直接定义标题标签,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(Color=darkred,Direction=135);光晕效果：Glow(Color=blue,Strength=6);波纹效果：Wave(Add=false,Freq=4,LightStrength=2,Phase=3,strength=6);Add是否要波形样式扭曲,取值为trueorfalse;Freq波纹数；LightStrength光影的效果0100；Phase角度变形百分比0100；Strength变形强度。,2.1.5使用段落列表列表是HTML中组织多个段落文本的一种方式，列表分成编号列表和项目列表，前一种列表用数字顺序为列表中的项目进行编号，而后一种列表则在每个列表项目之前使用一个项目符号。1编号列表,专家点拨：编号列表又称为有序列表，使用标签创建编号列表。具体使用方法是：列表项目一列表项目二列表项目三列表项目四,2项目列表,专家点拨：项目列表使用标签创建编号列表。具体使用方法是：列表项目一列表项目二列表项目三,2.1.6设置页面属性页面属性的设置主要控制页面的整体外观，包括背景、标题等。Dreamweaver8提供了【页面属性】对话框，在这个对话框中提供了多种页面属性的设置方法。1设置背景图片2设置页面标题3设置页面边距,2.2使用图像在网页设计中，图像的重要性仅次于文字，也是使用非常频繁的页面元素。本节介绍在网页插入图像的方法以及设置图像的尺寸和边框的方法。2.2.1网页中常见的图像格式网页中使用的图像可以是GIF、JPEG、BMP、TIFF、PNG等格式的图像文件，而目前使用最广泛的主要是GIF、JPEG和PNG三种格式。,2.2.2在网页中使用图像图像也是网页元素中的重要组成部分，在网页中插入图像可以使网页更好地表现网站的主题思想，使版面变得更加丰富多彩，吸引更多的浏览者。在网页中使用图像时，要考虑图像在页面中的整体效果。1插入图像2设置图像的尺寸和边框,2.3图像的编辑在网页中使用了图像以后，经常需要对图像做进一步的编辑，以达到满意的效果。2.3.1设置图文混排、图像边距、图片特效1设置图文混排,2设置图像边距,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时，可以制作出透明渐变的效果；其属性值也是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,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滤镜是让对象反映出它的轮廓并把这些轮廓加亮，也就是所谓的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美化文字格式制作文字网页，加入网页标题、背景图片，设置文字格式，段落行