网页图像及其属性
网站页面属性设置
页面属性设置创建网页后，需首先对整修页面的属性进行设置，如外观、链接等。
外观主要是指网页中文本采用的字体、字号、颜色，网页背景的颜色，网页背景图像等。
下面我们讲解如何设置网页的外观。
选择修改菜单下的页面属性命令。
在弹出的页面属性对话框中即可进行页面属性的设置。
在外观栏大小下拉列表框中可以选择页面中文本字体的大小，这里选择12。
保持其后的下拉列表中的单位像素（pz）。
单击文本颜色按钮，打开颜色选择器。
使用滴管工具选择一种颜色作为文本的颜色，如蓝色（＃0000FF）。
在背景颜色文本框中输入背景颜色，如“＃FFFFFF”（白色）。
单击背景图像文本框后的浏览按钮。
弹出选择图像源文件对话框。
在查找范围下拉列表框中选择站点所在文件夹，在文件列表中双击放置图像的文件夹，如“pic”。
然后在文件列表中选择需要的图像，这里选择“pagebg.gif”图像。
在站点下可以先创建一个专门放置图像及动画素材的文件夹。
然后事先将需要的素材放在其中，再执行插入图像等操作时，就可以很好的避免浏览网页时不能显示图像的问题。
单击确定按钮完成背景图像的设置，返回到页面属性对话框中。
在左边距文本框中设置网页页面与浏览器左边界的距离。
一般设置为0。
在上边距文本框中设置网页页面与浏览器上边界的距离，一般设置为0。
单击确定按钮即可完成设置。
链接是指超级链接文本初始显示的颜色，当鼠标指向它时显示的颜色及单击它后显示的颜色等。
打开页面属性对话框后，选择其左侧的分类列表中链接选项。
切换至页面属性链接对话框。
单击加粗按钮可以将链接文本加粗显示。
在大小下拉列表框中选择9选项，在其后的下拉列表框中选择点数（pt）选项。
在链接颜色文本框中输入链接文本初始显示的颜色（＃0000FF）在变换图像链接文本框中输入当鼠标指针位于时显示的颜色（＃663399）。
在已访问链接文本框中输入当鼠标单击链接文本后显示的颜色（＃FF0000）。
在活动链接文本框中输入当鼠标在链接文本上单击时显示的颜色（＃9900FF）。
项目四(网页文本、图像与多媒体)
（7）text-align属性用于设置文本的水平对齐方式。属性值有4个，left是默认值，表示左对齐；right表示右对齐； center表示居中对齐；justify表示两端对齐。
（8）text-decoration属性用于设置文本划线。属性值有4个，none表示默认效果；underline表示下划线效果； overline表示上划线效果；line-through表示贯穿线效果。
（9）text-indent属性用于设置文本的缩进。属性值为表示缩进大小的数值与单位（一般为em，表示一个字符）。
（10）text-shadow属性用于设置文本阴影。该属性有4个值，依次为h-shadow、v-shadow、blur与color。 其中，h-shadow表示阴影的水平偏移量，v-shadow表示阴影的垂直偏移量，这两个属性值都可以为负值，0
border-radius属性用于设置元素的圆角。属性值为数值加单位，设置该属性时可
03 以直接在属性后输入属性值（表示同时设置四个方向角的圆角），也可以在下方
的矩形元素示意图上设置特定方向角的圆角。
CSS3中新增了一些属性用于设置元素的变形与过渡效果，从而展示动画效果，提升页面趣味性。
01 变形:在CSS3中，使用transform属性即可实现元素的平移、缩放与旋转等变形效果。属性值有以下几种:
各级别标题标签与段落标签的页面效果
3．文本格式化标签
HTML5中提供了一些文本格式化标签，如<strong>（粗体）、<em>（倾斜）标签，使Dreamweaver CC添加这两种标签的方法如下:
01 打开本书配套素材“项目四”→“任务一”文件夹，右击“ex1.html”文件，在弹出的快捷菜单中选择
网页中的图像
图像标记 alt属性
alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。 添加alt 属性主要有两个方面的作用： ✓ 一是由于一些原因，如网速太慢、浏览器版本过低等，可能造成网页中的图的内容来分析网页的内容，这样可以帮
在 HTML中，图像由 <img> 标签定义，其功能是向网页中插入一幅图像。
空标签，意思是说，它只包含 属性，并且没有闭合标签。
属性 值
src URL alt text
描述 规定显示图像的URL。 规定图像的替代文本。
图像标记 src属性
通常新建一个如“pic”、“images”等文件夹，专门用来存放图像文件。 我们还可以根据需要，在此文件夹下，创建其它的文件夹，以分门别类的存放图像文件。
总结
网页中的图像
图像格式
01
如何使用图像标签在网页中插入图像
02
图像标签：<img>
作业与思考
请在网页中练习插入三张图像， 并添加上面介绍的几个属性。 熟悉一下图像标签的使用方法吧。
<img src="images\rose.jpg" alt="玫瑰花绽放”
width=“300” height="80">
<img src="images\rose.jpg" alt="玫瑰花绽放”
width=“300”>
不是等比例缩放
图像标记 title属性
作用：给图片添加当鼠标悬停在图片上时出现提示信息的效果。
<img src="images\rose.jpg" alt="玫瑰花绽放”
width=“300” title="玫瑰花">
《网页设计与制作》教案-第5讲 图像的操作(一)
第5讲图像的操作（一）1.1教学目标：◆知识目标1.认识图像，掌握在页面中插入图像的方法2.掌握图像各属性的作用和交换图像的设置。
◆技能目标1.能够根据页面显示效果在适当位置插入图像元素。
◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点：2.掌握图像各属性的作用和交换图像的设置。
1.3 教学难点交换图像的设置。
1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。
1.7教学过程：一、激趣导入，揭示课题前一章节把Dreamweaver MX的工作环境做了一个详细介绍，相信同学们对网页制作软件的界面有了一个清晰的认识，万事开头难，一个好的站点不仅有全局规划，而且一个功能强大的网站，需要多方面知识的积累，首先找一个已经做得比较好的网站，把整个链接过程演示给学生，让他们感受到网站其实做起来也不难，只要用心就可以，关键是主线要清晰。
二、使用图像图像和文字是网页中最重要的两个元素。
一个高质量的网页是离不开图像的。
制作精良的图像可以大大增强网页的美观性，令网页更加生动多彩。
在页面中如何用漂亮的图像来吸引人们的视线是每个网站都需要面对的问题。
一幅好的图片，胜过千言万语，反映在网页上也是如此。
在这里“好的”这个词包含了三方面的含义：一是指合适的，用一幅毫不相干的图像只会起到画蛇添足的作用；二是指正确的，用一个文件量很大的图像或者格式错误的图像，只会让浏览者对你的网页火冒三丈；三是指漂亮的。
0.1认识图像要在文档中正确使用图像，首先要了解一些Internet相关的图像知识。
由于图像在磁盘中的压缩方式和存储方式的不同，加上许多图像处理软件又有自己专门的格式，所以图像的标准有很多种。
目前在Internet上最为常见的图像包括JPG、JPEG、GIF和PNG等几种，在网页上使用的图像一般有JPEG、GIF、PNG等。
网页中图像的格式
网页中使用的图像可以是JPEG、GIF、PNG、BMP、TIFF等格式的图像文件，美观的图片会为网站添加新的活力。
给用户带来更直观的感受。
但是网页上的图片如果过多，也会影响网站的浏览速度，所以要合理适当的使用图像。
JPEG/JPG是网页设计中常见的图像格式，它支持数百万种颜色，因此最适合数码图片，具有颜色过渡的图像和任何需要256种以上颜色的图像。
GIF是网页中最常用的图像格式，它最多可以包含256中颜色，同时还可以包含一块透明的区域和多个动画帧，因此GIF格式通常适用于卡通，徽标，包含透明区域的图形以及动画，一般网站的标志都是用GIF格式。
GIF格式最大的优点就是可以制作动态的图像，它可以将数张静态图片作为动画帧串联起来，转换成一个动画文件。
GIF的另一个格式的优点就是可以将图片以交错的方式在网页中显示，所谓交错显示就是指当图片尚未下载完成时，浏览器就会先以马赛克的形式将图片慢慢显示，让浏览者可以大概猜出显示图片的雏形，此时浏览者可以选择要不要继续等待下载此图片，还是先去浏览其他网页。
PNG是网页中的通用格式，最多可以支持32位的颜色，可以包含透明度或ALPHA通道，同时它也是网页制作的默认文件格式，但是其中包含的特定附加信息，如果没有插件支持，浏览器可能无法正常显示这种格式的图片。
BMP文件格式是Windows环境中交换与图有关的数据的一种标准，因此在Windows环境中运行的图形图像软件都支持BMP图像格式。
由于BMP它采用位映射存储格式，除了图像深度可选以外，不采用其他任何压缩，因此，BblP文件所占用的空间很大。
所以网页中不能过多使用此格式，否则会严重影响网站浏览速度。
1.JPG格式比较适合用来存储照片。
颜色丰富，压缩比高，文件尺寸较小。
2.GIF格式可以用来做动画。
颜色种类少，256种，尺寸小。
3.PNG可以用来做小图标（icons），按钮，背景等等。
因为包含alpha通道，所以支持图片透明。
网页的组成元素有哪些-有什么组成元素-具体介绍
网页的组成元素有哪些-有什么组成元素-具体介绍在〔制定〕网页时要组织好页面的基本元素，其常见的元素包括文字、图片、动画、音频、视频、超链接等，这些元素在网页中都占据着相对重要的位置。
以下是关于网页的组成元素有哪些的具体介绍。
(1)文本。
文本是网页中最常见的元素之一，也是网页内容的核心部分。
在制定网页时，应合计到文字的字体、字号、颜色、段落、层次等属性。
(2)图像。
图像是用来美化网页的主要元素，具有生动、直观等特点，在网页中合理使用图像，不仅可以产生一定的视觉冲击力，而且可以简化页面内容，从而传达出用文字难以表达的信息。
(3)动画。
动画是网页上最活跃的元素，通常状况下，吸引访问者最有效的方法是制作优秀的、有创意的动画。
网页中使用的动画文件一般采纳GIF动画格式或Flash动画格式。
(4)视频、音频。
随着网络带宽的增加，在网页中嵌入视频和音频元素，可以提升网页的多媒体效果，更加直观、生动、准确、特别地表达网页内容，受到浏览者的欢迎。
(5)Logo。
网站Logo相当于网站的图形标识，它可以显示网站名称、英文网址、网站理念等信息。
(6)Banner 。
Banner多用于展示网络广告的内容，又称网络图片广告，常位于Logo的右侧，多采纳GIF或Flash动画建立的动画元素，其形状、颜色应与整个页面的布局和色调一致。
(7)超链接。
超级链接(简称超链接或链接)是网页中最重要和最基本的元素之一。
超链接可以使一些孤立的网页产生一定的互相联系，从而使各个网页形成一个有机的整体。
当鼠标指针移动到设置有超链接的对象(如文字、图片、标题、动画等)时，鼠标指针会变成一个手指形，只要单击鼠标就可以打开超链接的网页。
(8)按钮。
按钮实质上也是一种超链接，通过按钮的形式可以直观地提示浏览者进行操作。
(9)导航栏。
导航栏实际上是一组采纳超链接技术的网页对象，包括文字、图像、按钮等。
它们有效地连接了网站或其他网站的内容，使你可以在各部分或各网站之间快速切换。
网页制作第5单元 图像
第5单元图像课程目标：●掌握在网页中插入图像●掌握影像地图的使用●掌握轮换图像的使用●掌握导航条的制作●掌握图片相册的制作建议学时：理论4学时，实践4学时。
5.1 插入图像及设置图像属性5.1.1 插入图像在网页中插入图像的操作十分简单，既可以使用工具栏的【图像】按钮，然后找到要插入的图片文件，再也可以使用菜单【插入】|【图像】，还可以直接从文件面板中拖动图像文件到正在编辑的页面上。
虽然图像文件的格式有很多，但在网页上通常只使用三种格式：jpg、gif、png等。
将图像插入到网页时，Dreamweaver8会自动在HTML源代码中生成对该文件的引用，打开代码视窗可看到类似如下的代码：<img src="images/IMG001.JPG" />即为引用images文件夹中的img001.jpg文件。
在网页制作中，为了确保文件引用的正确性，图像文件必须位于当前站点文件夹中，如果图像文件不在当前站点文件夹，系统会提问是否要将此文件复制到当前站点文件夹，此时应回答“是”，否则当站点上传后会找不到该图像文件。
5.1.2 设置图像属性选中插入的图像，属性面板为图像的属性面板，如图5-1所示，使用该面板可对插入的图像进行设置。
图5-1 图像属性面板宽、高：选定图像的当前尺寸，如果插入后更改过图像的大小，则宽、高旁边的“重设大小”按钮变成可选。
提示：建议不要更改插入后图像的尺寸，这样一是容易产生图像变形，二是即使插入后尺寸改小，也不可能改变网页文件实际的大小。
因此，图像在插入前应使用专门的图像编辑软件（如Photoshop、Firework等）修改好。
垂直边距、水平边距，是指图像与其它对象（如文字等）之间的距离。
源文件，即插入到网页中的文件全名，包含了图像文件的相对路径和文件名。
替换：在该文本框中可以输入图像的替换文字。
这样，当图像没有被显示时，相应区域会显示替换文字以提示浏览者这里将显示的内容。
网页设计与制作(Dreamweaver)《插入网页基本要素之图像与超链接》
超链接
超级链接是网页中的精华部分，当光标移至浏览器中的超级链接时，光
标会变成一只手的形状，此时单击链接便可以打开链接所指向的目标网
页。
没有它每个网页都要输入很长的URL地址。没有超链接，就无法通过单击的方式 遨游Web世界，而如果没有了单击的功能，Web就会是死水一潭。
在左边选择文件类型，右边单击左上方的加号图像编辑器
设置及启用外部图像编辑器：
设置不同类型图像文件编辑器：选择“编辑／ 首选参数／文件类型/编辑器”…… 通过外部图像编辑器对图像文件进行修改:
启用图像编辑器：选取图像→单击属性面板中 的“编辑”按钮即可启动相应编辑器，并打开 图像文件，进行修改。
插入网页基本要素之图像与超链接
插入网页基本要素之图像与超链接
图像的编辑与属性设置
单击选中图像，在属性面板中，设置图像的属性： 给图片增加提示：选中图像→在属性面板的“替代”中输入提示文字，在浏览器中，鼠标指向这个图片时，就会出现文字提示。 另外，有时，不显示图片后，可以显示该说明文字。
插入网页基本要素之图像与超链接
图像的编辑与属性设置
插入网页基本要素之图像与超链接
超链接的类型
1 页间链接：利用该链接可 以跳转到其他文档或文件，如图 形、电影、PDF或声音文件。
2 页内链接：也被称为锚记链接，利用它 可以跳转到本站点指定文档的位置。
4 空链接及脚本链接
它允许用户附加行为至对象或创 建 一 个 执 行 JavaScript 代 码 的 链 接。
插入网页基本要素之图像与超链接
图像的编辑与属性设置
单击选中图像，在属性面板中，设置图像的属性： 放大、缩小图像大小：拖动控制点或直接在属性面板中输入宽度与高度的像素值； 等比例放大、缩小图像大小：按住Shift同时拖动右下角控制点； 恢复图像大小：删除其属性面板中的宽度、高度值，即可恢复到原来的大小。 “边框”是以像素为单位的图像边框的宽度。默认为无边框，相当于加一个相框。 “编辑”启动在“外部编辑器”参数选择中指定的图像编辑器并打开选定的图像。
网页基本页面属性
第4章 创建和编辑网页文档
2.路径 创建超链接必须先了解链接与被链接载体
的路径。在一个网站中，路径通常有3种表示 方式：绝对路径、根目录相对路径和文档目录 相对路径。 (1)绝对路径。 (2)根目录相对路径。 (3)文档目录相对路径。
第4章 创建和编辑网页文档
4.4.2 创建超级链接 Dreamweaver 提供多种创建超链接的方法，
打开现有的文档有以下几种方法： 1.在“文档”窗口中打开选择的文档 2.导入Word文档 3.在资源管理器中打开文档
第4章 创建和编辑网页文档
4.1.3 设置页面属性 页面属性是指网页的一般属性信息，例如，网 页标题、网页背景颜色、背景图像、超链接颜色、 跟踪图像等。
1.设置网页标题及编码 2.设置网页其他属性
在新的大小和形状下的品质。 16.亮度和对比度：调整图像的亮度和对比度设置。 17.锐化：调整图像的清晰度。
第4章 创建和编辑网页文档
4.3.3 插入图像占位符 在Dreamweaver中插入图像占位符的基本操作： 1.将光标置于要插入图像占位符的位置，在插入工具栏的“常用”分类中 选择“图像占位符”按钮或选择“插入”菜单中的“图像对象”中的“图 像占位符”命令，打开“图像占位符”对话框。 2.在对话框中进行设置： (1)在“名称”文本框中，输入要作为图像占位符的标签文字显示的文本。 名称可有可无，必须以字母开头，且只能包含字母和数字；不允许使用空 格和高位 ASCII 字符。 (2)在“宽度”和“高度”文本框中，以像素为单位键入数字以设置图像 大小。 (3)为图像占位符选择一种颜色，可以使用颜色选择器或直接输入颜色的 十六进制值(如 #FF0000)或输入网页安全色名称(如 red)。 (4)在“替代文本”中，为使用只显示文本的浏览器的访问者输入描述该 图像的文本。 3．单击“确定”。网页文档中即会出现图像占位符。
HTML5网页设计与制作教学课件第5章定义网页图片
5.2 定义网页图片
5.2.2 定义图片边框
2. 边框颜色和宽度 【随堂练习 】
在浏览器中预览显示效果，如图5-5所示。
图5-5 定义各边边框颜色的效果
5.2 定义网页图片
5.2.3 定义图片透明度
CSS3以前的版本没有定义图像透明度的标准属性，不过各个主要浏览器都自定义了专有透 明属性。下面简单地说明一下。
● IE浏览器 IE浏览器使用CSS滤镜来定义透明度，属 性用法如下所示。
● FF浏览器 FF浏览器定义了“-moz-opacity”私有 属性，该属性可以设计透明效果，属性用法 如下所示。
5.2 定义网页图片
5.2.3 定义图片透明度
● W3C标准属性 W3C在CSS 3版本中增加了定义透明度 的opacity属性，属性用法如下所示。
5.2 定义网页图片
5.2.2 定义图片边框
1. 边框样式 【随堂练习 】
在浏览器中预览，可以比较虚线和点线的效果，如图5-3所示。
图5-3 比较边框样式效果
5.2 定义网页图片
5.2.2 定义图片边框
1. 边框样式 【随堂练习 】
当单独定义对象的某边边框样式时，可以使用单边边框属性：
border-top-style （顶部边框样式）
步骤1 新建一个网页，保存为 test.html，在<body>内使用 <img>标签插入两幅相同的图片， 代码如下所示。
步骤2 在<head>标签内添加<style type="text/css">标签，定义一个内部样 式表，然后输入下面的代码，定义两个类 样式，用来设计图片边框效果，代码如下 所示。
其中，transparent属性值表示背景 色透明，该属性值为默认值。 color表示 指定颜色，为任意合法的颜色值。例如， 设计网页背景色为灰色，则可以设计如下 样式，代码如下所示。
网页图像及其属性
网页中的图像及其属性导入语：网页中有图像才显得生动，并且图像还具有直观、生动的特点。
图像还可以跨越语言的差异，但图像的增加会使网页的下载时间大大增加，所以设计网页要考虑图像的数量和大小。
网页中的图片格式有：GIF格式：一般用于标题或卡通，可以有效利用透明像素。
JPEG/JPG格式：全彩的影像压缩格式，可以选择不同的压缩比率。
PNG格式：Fireworks固有的格式，图片的透明度可以自由更改。
图像也和文本一样有自己的属性，如名称、对齐、边框等。
主要内容：网页中的图像图像属性2.3 网页中的图像2.3.1 插入普通图像1、插入式图像方法：【文件】|【常用】|【图像】，选择图片即可插入到网页中。
2、占位图像占位图像是在有了整体构图，但图像还没有准备好时使用，发布之前要用图像代替。
方法：【文件】|【常用】|【图像占位符】，会弹出以下对话框，以输入名称、大小、颜色和替换文本。
替换文本是用来简要说明图片的文字。
用图像替换占位符时应该确保图像与占位符同样大小。
2.3.2 插入背景图像该方式显示的图像不影响文本的输入及其他元素的创建。
方法：【属性】|【页面属性】|【背景图像】背景图像会覆盖背景颜色，但如果背景图像为透明，则显示背景颜色。
2.3.3 插入鼠标经过图像方法：【插入】|【常用】|【鼠标经过图像】，设置图像名称、原始图像、鼠标经过图像、替换文本及链接（链接可以不设置）。
2.3.4 插入导航条导航条的作用，显示网站主要栏目，并实现栏目的跳转。
方法：【插入】|【常用】|【导航条】，设置如图参数。
导航元件：添加的项目。
项目名称：可为栏目名称，也可以是默认名称。
状态图像：最初的图像。
鼠标经过图像：鼠标指针在上停留或滑过的图像。
按下图像：鼠标单击时的图像。
替换文本：鼠标停留时显示的简要说明。
按下时，前往的URL：链接文件的路径。
预载图像：下载网页时下载图片，否则会有延时。
插入：插入方式为垂直插入还是水平插入。
使用表格：用表格方式插入导航条项目。
更新版)最新XXX《Dreamweaver网页设计》机考网考试题题库及答案
更新版)最新XXX《Dreamweaver网页设计》机考网考试题题库及答案最新国家开放大学电大《Dreamweaver网页设计》机考网考试题题库及答案，100%通过。
1.Dreamweaver的模板文件的扩展名是.dwt。
2.在插入文件中的Flash动画中，不能在属性面板中设置动画的循环播放次数属性。
3.决定层的显示/隐藏的属性是Visibility。
4.在选定第1个单元格后，按下Ctrl键，并用鼠标单击其他要选择的单元格可以实现选择多个不连续的单元格。
5.格式化表格的作用是为表格套用已经设置好的样式。
6.关于CSS的说法错误的是使用Dreamweaver只能可视化创建CSS样式，无法以源代码方式对其进行编辑。
7.关于绝对路径的使用，不正确的说法是使用绝对路径的链接不能链接本站点的文件，要链接本站点文件只能使用相对路径。
8.在Dreamweaver中，超级链接标签具有四种不同的状态，不属于标签状态的是bgm。
最近，XXX推出了一门名为《Dreamweaver网页设计》的课程，其中包含了机考和网考试题题库及答案，通过率高达100%。
1.Dreamweaver使用.dwt作为模板文件的扩展名。
2.在插入Flash动画时，属性面板无法设置动画的循环播放次数属性。
3.显示/隐藏层的属性是Visibility。
4.您可以按下Ctrl键并单击要选择的其他单元格，以选择多个不连续的单元格，如下图所示。
5.表格格式化的作用是为表格套用已经设置好的样式。
6.关于CSS，错误的说法是使用Dreamweaver只能可视化创建CSS样式，无法以源代码方式进行编辑。
7.关于绝对路径的使用，不正确的说法是使用绝对路径的链接不能链接本站点的文件，只能使用相对路径链接本站点文件。
8.在Dreamweaver中，超级链接标签有四种不同的状态，其中不属于标签状态的是bgm。
删除了格式错误的段落和错误的选项。
对每个问题进行了简洁的改写。
网页设计与制作)实验2文本操作与图像操作
ABCD
学会了使用图像编辑软件 进行基本的图像处理，如 裁剪、调整大小、添加水 印等。
增强了团队合作和沟通能 力，通过小组讨论和分享， 共同完成了实验任务。
本实验的不足与改进
在HTML和CSS文本操作中 ，对于高级样式的应用还不 够熟练，需要进一步练习和
实践。
1
在图像处理方面，对于一些 高级技巧和工具的应用还不 够了解，需要深入学习和探
索。
在网页布局和排版中，还需 提高对用户体验的关注度， 以设计出更符合用户需求的 网页。
需要加强团队合作和沟通能 力的培养，提高小组协作效 率。
下一步的计划
深入学习HTML和CSS的高级 应用，提高网页设计的水平。
学习更多的网页布局和排版 原则，提高网页设计的美观 度和用户体验。
探索更多的图像处理技巧和 工具，提高图像处理能力。
网页设计与制作实验2： 文本操作与图像操作
目录
Contents
• 实验介绍 • 文本操作 • 图像操作 • 实例展示 • 实验总结
01 实验介绍
实验目的
01
掌握HTML和CSS的基本语法和标签，能够编写简单 的网页。
02
学会使用文本和图像元素在网页中添加内容，并对 其进行样式设置。
03
理解网页布局和排版的原理，能够实现简单的网页 布局。
03 图像操作
图像插入与调整
插入图像
在网页编辑器中，选择插入图像功能，上传 本地图片或使用在线图片链接。
图像位置调整
使用定位属性，如"float"或"position"，来 控制图像在页面上的位置。
调整图像大小
通过调整图像的宽度和高度属性，改变图像 的尺寸。
图像标签基本特点和相关属性
HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签<img/>以及和它相关的属性。
图像标签的基本语法格式如下。
<imgsrc="图像URL"/>在上面的语法中，src属性用于指定图像文件的路径和文件名，img标签的必需属性。
要想在网页中灵活地使用图像，仅仅依靠src属性远远不够的。
为此HTML还为<img/>标签准备了其他的属性，具体如表2-5所示。
表1<img/>标签的属性表1对<img/>标签的常用属性了简要的描述，对它们进行详细讲解，具体如下：1.图像的替换文本属性alt有时页面中的图像可能无法正常显示，如图片加载，浏览器版本过低等。
因此为页面上的图像替换文本个很好的习惯，在图像无法显示时告诉用户该图片的信息，这就需要使用图像的alt属性。
2.图像的宽度和高度属性width、height通常情况下，如果不给<img/>标签设置宽高属性，图片就会按照它的原始尺寸显示，此外，也可以通过width和height属性用来定义图片的宽度和高度。
通常们只设置其中的一个属性，另一个属性则会依据前一个设置的属性将原图等比例显示。
如果同时设置两个属性，且其比例和原图小的比例不一致，显示的图像就会变形或失真。
3.图像的表框属性border默认情况下图像没有边框的，通过border属性可以为图像边框、设置边框的宽度，4.图像的边距属性vspace、hspace在网页中，由于排版需要，有时候还需要调整图像的边距。
HTML中通过vspace 和hspace属性可以分别调整图像的垂直边距和水平边距。
5.图像的对齐属性align图文混排网页中很常见的，默认情况下图像的底部会与文本的行文字对齐，如图1所示。
图1图像标签的默认对齐但在网页时需要经常实现图像和文字环绕，例如左图右文，这就需要使用图像的对齐属性align。
设置图像属性_Dreamweaver网页制作教程_[共2页]
![设置图像属性_Dreamweaver网页制作教程_[共2页]](https://img.taocdn.com/s3/m/f16352e267ec102de3bd8913.png)
入所需数据改变图像大小，或选择图像后直接拖动图像四周的控制柄进行调整。
67
按钮即可，如图4-11所示。
图４－１１ 插入Ｆｉｒｅｗｏｒｋｓ ＨＴＭＬ文档
4.1.6 设置图像属性
在Dreamweaver中选择网页文档中的图像后，在“属性”面板中可编辑图像的各种属性， 如图4-12所示。
图４－１２ 图像“属性”面板
“属性”面板中各选项的含义分别介绍如下。 ◎ ID：为图像重新命名，以便在Dreamweaver中进行行为或脚本撰写语言操作时引用该
图像与多媒体元素的应用 第4章
操作技巧
设置鼠标经过图像时，一定要注意两点：原始图像和鼠标经过图像的尺寸应保 持一致；原始图像和鼠标经过图像的内容要有一定的关联。一般可通过操作提示更 改颜色和字体等方式设置鼠标经过的前后图像效果。
“插入鼠标经过图像”对话框中共有6个属性设置项目，分别如下。 ◎ 图像名称：用于设置图像的“名称”属性，也就是图像的ID。 ◎ 原始图像：用于设置原始图像的URL，指向原始状态下的图像文件。 ◎ 鼠标经过图像：用于设置鼠标经过时切换的图像URL，指向当鼠标经过该图像元素
能直接通过Dreamweaver来编辑使用Fireworks制作的网页。在Dreamweaver中选择【插入】
→【图像对象】→【Fireworks HTML】菜单命令，打开“插入Fireworks HTML”对话框，
在“Fireworks HTML文件”文本框中输入文件的地址或单击
按钮选择文件位置，单击
时，切换显示的图像文件。 ◎ 预载鼠标经过图像：用于优化切换效果，预先将“鼠标经过图像”下载到本地。 ◎ 替换文本：用于设置alt信息，当图像无法显示时，将显示该信息。 ◎ 按下时，前往的URL：用于设置目标URL地址，即图像的链接地址。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页中的图像及其属性
导入语：网页中有图像才显得生动，并且图像还具有直观、生动的特点。
图像还可以跨越语言的差异，但图像的增加会使网页的下载时间大大增加，所以设计网页要考虑图像的数量和大小。
网页中的图片格式有：GIF格式：一般用于标题或卡通，可以有效利用透明像素。
JPEG/JPG格式：全彩的影像压缩格式，可以选择不同的压缩比率。
PNG格式：Fireworks固有的格式，图片的透明度可以自由更改。
图像也和文本一样有自己的属性，如名称、对齐、边框等。
主要内容：
网页中的图像
图像属性
2.3 网页中的图像
2.3.1 插入普通图像
1、插入式图像
方法：【文件】|【常用】|【图像】，选择图片即可插入到网页中。
2、占位图像
占位图像是在有了整体构图，但图像还没有准备好时使用，发布之前要用图像代替。
方法：【文件】|【常用】|【图像占位符】，会弹出以下对话框，以输入名称、大小、颜色和替换文本。
替换文本是用来简要说明图片的文字。
用图像替换占位符时应该确保图像与占位符同样大小。
2.3.2 插入背景图像
该方式显示的图像不影响文本的输入及其他元素的创建。
方法：【属性】|【页面属性】|【背景图像】
背景图像会覆盖背景颜色，但如果背景图像为透明，则显示背景颜色。
2.3.3 插入鼠标经过图像
方法：【插入】|【常用】|【鼠标经过图像】，设置图像名称、原始图像、鼠标经过图像、替换文本及链接（链接可以不设置）。
2.3.4 插入导航条
导航条的作用，显示网站主要栏目，并实现栏目的跳转。
方法：【插入】|【常用】|【导航条】，设置如图参数。
导航元件：添加的项目。
项目名称：可为栏目名称，也可以是默认名称。
状态图像：最初的图像。
鼠标经过图像：鼠标指针在上停留或滑过的图像。
按下图像：鼠标单击时的图像。
替换文本：鼠标停留时显示的简要说明。
按下时，前往的URL：链接文件的路径。
预载图像：下载网页时下载图片，否则会有延时。
插入：插入方式为垂直插入还是水平插入。
使用表格：用表格方式插入导航条项目。
加号、减号：添加或减少一个项目。
修改导航条的方法：【修改】|【导航条】。
2.3.5 插入分层图像
1、插入PSD格式图像同普通图像。
2、将Photoshop选区图像复制到网页中，使用复制粘贴的方法。
3、将Photoshop切片图像复制到网页中，使用复制粘贴的方法。
2.4 图像属性
2.4.1 图像基本属性
选择图像，【属性】面板显示相应的格式属性。
各选项名称及功能如下：
图像名称：区别网页中不同的图像。
宽和高：图像显示在网页中的大小。
源文件：显示的图片名称。
链接：设置为链接图片时的文件路径。
对齐：左对齐、居中、右，相对于文本的各种对齐。
替代：说明性文本，可让用户决定是否等待图片下载。
其它功能为创建热点链接时使用。
2.4.2 图像编辑功能
编辑：启动外部软件编辑。
裁剪：裁剪不必要的部分。
亮度和对比度：修改亮度及对比度。
锐化：调整图像清晰度。
课堂练习：
见书2.6 制作网页导航条、2.7 制作图文并茂的童话故事。
小结：
本节课主要学习在网页中添加图片和设置其属性，主要学习普通图像、占位符、背景图像、鼠标经过图像、导航条、分层图像。
作业：
书上P48一题3、4、5；二题3、4、5；三题3、4、5；四题2。