第二章网页中的文字和图像.pptVIP

第2章 网页中的文字和图像 网络世界五彩缤纷，涌现出大量优秀精美的网页。大量的网络信息，无非就是通过文本、图像、动画等网页元素来呈现，其中，文本和图像是网页中最为重要的设计元素。 本章介绍文字和图像在网页中的应用，主要内容包括： 网页中的文字 在网页中使用图像 图像的编辑;2.1 网页中的文字 文字是网页中最基础的信息载体，浏览者主要通过文字了解网页的内容。虽然利用图形文字也可以达到同样的效果，甚至超出纯文本的效果，但是网页文字的优势还是无法被取代的。因为纯文本所占用的存储空间非常小，浏览纯文本网页时，占用的网络带宽较少，能快速地被用户打开。;2.1.1 应用文字 在网页中应用文字有三种方法：直接输入、粘贴剪贴板中的文字、导入Word文档。 1．直接输入 2．粘贴剪贴板中的文字 3．导入Word文档;2.1.2 课堂实例??―设置段落效果 在网页设计时，文字段落制作的层次分明，才能让浏览者更好地阅读。也使得网页看起来整洁、美观。 对于段落的设置，主要有几个方面的内容。段落的对齐方式、段落行间距设置、文本缩进的设置等。 1．对齐文本 2．段落行间距和换行标签 br / 3．文本缩进;2.1.3 课堂实例――设置文字标题 HTML的标题标签主要用来快速设置文本标题的格式，典型的形式是h1/h1，它用来设置第一层标题，h2/h2设置第二层标题，以此类推。 1．在代码视图直接定义标题标签 ;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是否要波形样式扭曲,取值为true or false;Freq波纹数 ；LightStrength光影的效果0~100 ；Phase 角度变形百分比0~100；Strength变形强度。;2.1.5 使用段落列表 列表是HTML中组织多个段落文本的一种方式，列表分成编号列表和项目列表，前一种列表用数字顺序为列表中的项目进行编号，而后一种列表则在每个列表项目之前使用一个项目符号。 1．编号列表 ;2．项目列表 ;2.1.6 设置页面属性 页面属性的设置主要控制页面的整体外观，包括背景、标题等。Dreamweaver 8提供了【页面属性】对话框，在这个对话框中提供了多种页面属性的设置方法。 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．设置图文混排 ;3. 利用css滤镜做图片特效; 图3.46 加载Alpha滤镜的前后的图片效果 图3.46的效果代码为： Alpha(Opacity=10, FinishOpacity=90, Style=1, StartX=0, StartY=0, FinishX=80, FinishY=80)；;3. 利用css滤镜做图片特效;3. 利用css滤镜做图片特效;2.3.2 优化图像和图像剪裁 1．使用Fire