下载掌阅APP，畅读海量书库
立即打开
小白已经初步学习了网页设计与制作的基础知识，制作的网页中包含许多文本内容，看上去不够美观，老师告诉他这是因为使用的网页元素太单一，可以尝试添加适当的图片美化网页。于是，在老师的建议和帮助下，小白开始学习在网页中添加与编辑图片的相关知识，制作图文混排的网页。
本次任务是使用Dreamweaver CS6制作图文混排的网页，要完成该任务必须先掌握在网页中使用图片的常见方法，然后学会对网页图片进行编辑处理，最后学会对网页中的文本与图片进行简单排版。
因此，本任务可以分解为两个活动：在网页中使用图片；制作图书介绍页。
（1）创建一个名称为“项目 2-1”的本地站点，本地站点文件夹为D盘下的“Task2-1”文件夹，默认图像文件夹路径设置为D：\Task2-1\images。
（2）如图 2.1所示，新建一个网页文件，输入文字、添加图片和各种图像对象并设置网页的背景，最后将网页文件以“task2-1-1.html”为文件名保存到“项目 2-1”站点根目录下。
图 2.1
1.直接添加图片
图片在网页中的第 1种使用方法是直接添加。网页中能添加的图片文件格式比较多，常见的格式有以下 3种（见图 2.2）：
● JPG（全称是Joint Photographic Experts Group，联合图像专家组）是一种高效压缩的图片格式，其优点是颜色丰富，文件容量小，下载速度快，缺点是不具透明效果。
● GIF（全称是Graphics Interchange Format，可交换的图像格式）是目前大量使用的网页图片格式之一，其优点是文件容量小，可以透明显示，还可以支持动画，缺点是表现的颜色比JPG格式少得多。
● PNG（全称是Portable Network Graphics，便携网络图像）结合了JPG和GIF的优点，不仅具有JPG处理精美图片的优势，而且具有GIF能透明显示的特点，因此应用较广泛，逐渐成为网页图片的主要格式。
图 2.2
2.插入图像占位符
图片在网页中的第 2种使用方法是插入图像占位符。在网页文档中添加图片时，如果图片不确定或者还没设计出来，但可以确定图片的位置、尺寸时，可以先在该位置上插入临时的“图像占位符”进行占位，如图2.3所示；然后等图片确定后再进行替换，如图2.4所示。
图 2.3
图 2.4
3.创建鼠标经过图像
图片在网页中的第 3种使用方法是创建鼠标经过图像。鼠标经过图像由原始图像和鼠标经过图像两部分组成，当鼠标光标在图片范围之外时显示原始图像；当鼠标光标经过图片时显示鼠标经过图像，在“替换文本”文本框中输入文本，同时，单击“按下时，前往的URL”文本框后面的“浏览”按钮，在打开的对话框中选择链接路径或直接在文本框中输入URL，如图 2.5所示。
图 2.5
4.将图片设置为网页的背景
图片在网页中的第 4种使用方法是将图片设置为网页的背景。依次单击“修改”→“页面属性”菜单命令（或按Ctrl+J键），选择一张图片作为网页的背景，如图2.6所示，其中“重复”选项分为以下 4种：
● no-repeat：图片作为网页背景不重复只显示 1次。
● repeat：图片作为网页背景在x轴、y轴即水平、垂直方向重复显示，为默认选项。
● repeat-x：图片作为网页背景在x轴即水平方向重复显示。
● repeat-y：图片作为网页背景在y轴即垂直方向重复显示。
图 2.6
（1）打开Dreamweaver CS6软件，依次单击“站点”→“新建站点”菜单命令，在打开的“站点设置对象”对话框中设置站点名称为“项目 2-1”，单击“本地站点文件夹”文本框后面的“浏览文件夹”按钮，在打开的对话框中选择D盘，然后在D盘新建一个文件夹“Task2-1”，如图 2.7所示。
图 2.7
（2）单击“高级设置”→“本地信息”选项，单击“默认图像文件夹”文本框后面的“浏览文件夹”按钮，定位到D盘的“Task2-1”文件夹，在“Task2-1”文件夹中再新建一个子文件夹“images”，以后网页中添加的图片都会自动保存在“images”文件夹中，最后单击“保存”按钮即可，如图 2.8所示。
图 2.8
（3）新建一个HTML文档，将新建的HTML文档切换至“设计”视图模式，并以“task2-11.html”为文件名保存。
（4）在“文档工具栏”中的“标题”文本框中，将“无标题文档”更改为“网页图片的使用”。
（5）在文档窗口中输入相应的文字，并将输入的文字设置为“标题 3”格式，按Shift+回车键换行，单击“插入”→“图像”菜单命令（或单击“常用”工具栏中的“图像”按钮，或按组合键Ctrl+Alt+I），如图 2.9所示。
图 2.9
（6）在“选择图像源文件”对话框的查找范围中选择图片所在的位置，图片素材为“Chapter02\素材文件\任务 1\活动 1\双 11.jpg”，点选需要插入的图片，如图 2.10所示。
图 2.10
（7）在弹出的“图像标签辅助功能属性”对话框中补充信息，单击“确定”按钮即可。其中“替换文本”的作用是当浏览网页时图片不能正常显示或者当鼠标移动到图片时显示的提示文本，“详细说明”文本框可输入图片的详细路径及名称，方便网页开发者查阅、修改，如图 2.11所示。
图 2.11
（8）在图片的最右侧按回车键，输入相应的文字，并将文字设置为“标题 3”格式，按Shift+回车键换行，单击“插入”→“图像对象”→“图像占位符”菜单命令（或单击“常用”工具栏中的“图像占位符”按钮），输入名称、宽度、高度，设置颜色和替换文本，再单击“确定”按钮，如图 2.12所示。
图 2.12
（9）图像占位符上显示了图片的名称以及大小，在图像占位符的区域内双击左键，在对话框的查找范围中选择图片所在的文件夹，点选需要插入的图片即可替换图像占位符，图片素材为“Chapter02\素材文件\任务 1\活动 1\双 12.jpg”，如图 2.13所示。
图 2.13
（10）在第 2张图片的最右侧按回车键，输入相应的文字，并将文字设置为“标题 3”格式，按Shift+回车键换行。单击“插入”→“图像对象”→“鼠标经过图像”菜单命令（或单击“常用”工具栏中的“鼠标经过图像”按钮），在弹出的对话框中设置“原始图像”和“鼠标经过图像”的图片，图片素材为“Chapter02\素材文件\任务 1\活动 1\”目录下的“行李箱.jpg和女包.jpg”；然后再设置“替换文本”和“按下时，前往的URL”两个选项，最后单击“确定”按钮即可，如图 2.14所示。
图 2.14
（11）单击“修改”→“页面属性”菜单命令（或者按快捷键Ctrl+J），在弹出的“页面属性”对话框中单击“背景图像”后面的“浏览”按钮；在“选择图像源文件”对话框中找到要设为背景的图片文件；图片素材为“Chapter02\素材文件\任务 1\活动 1\网页背景.jpg”，并单击“确定”按钮，如图 2.15所示。
图 2.15
（12）保存网页文件并在浏览器中浏览网页效果，最终效果如图 2.1所示。
在制作网页过程中，要注意选取具有代表性、较清晰、大小适宜的图片。如果图片素材还没确定，可以采用图像占位符预留出位置，鼠标经过图像尽量选取两张大小基本一致的图片，将图片设置为网页的背景时可以选取一张较小、可重复的图片加快网页打开的速度。
如图 2.16所示，完成图书介绍网页的制作，完成后以“task2-1-2.html”为文件名保存到“项目 2-1”站点的根目录下。
图 2.16
1.图片的HTML标签
图片的HTML标签如图 2.17所示。
图 2.17
● “img”代表图片，是单标签。
● “src”代表图片的存放路径。
● “alt”代表替换文本，用来设置当前鼠标移到图片上时所显示的提示文本。
● “width”代表图片的宽度，默认单位是像素。
● “height”代表图片的高度，默认单位是像素。
● “align”代表图片的对齐方式，常见的值可以设置为：top（顶端）、bottom（底部）、middle（中间）、left（左对齐）、right（右对齐）。
● “hspace”代表图片左侧和右侧的水平边距，默认单位是像素。
● “vspace”代表图片顶部和底部的垂直边距，默认单位是像素。
2.图片的简单编辑
网页中的图片除了可以通过HTML标签进行设置以外，也可以通过属性栏中各个选项进行处理，同时还有一些内置工具可以对图片进行简单编辑，如图 2.18所示。
图 2.18
● 裁剪：先选中图像，再单击
按钮，在弹出的对话框中单击“确定”按钮，图片上会出现选框，选框以外的区域是被裁剪掉的，用鼠标拖动选框的控点可以调整大小。
● 亮度和对比度：单击后，在出现的对话框中拖动滑块可以调整图片的明暗以及对比度。
● 锐化：可使图片的棱角更加分明，增加图片的清晰度。
（1）打开Dreamweaver CS6软件并新建一个HTML文档，将新建的HTML文档切换至“设计”视图模式，并以“task2-1-2.html”为文件名保存到“项目 2-1”的站点根目录下。
（2）在“文档工具栏”中的“标题”文本框中，将“无标题文档”更改为“图书简介”。
（3）在文档窗口中输入文字“图书简介”，选择文字，在“属性”面板的“格式”下拉列表框中选择“标题 1”。
（4）按回车键插入一张图片（素材为“Chapter02\素材文件\任务 1\活动 2\图书.png”），输入“替换文本”和“详细说明”。
（5）用鼠标点击选中图片，在“属性”面板中锁定尺寸约束，将图片的宽设置为 350 px，如图 2.19所示。
图 2.19
（6）将光标定位在图片右侧按回车键，输入相应文本，冒号前的文字加粗（快捷键“Ctrl+B”），选中所有文字，然后单击“属性”面板上的“项目列表”按钮，“格式”选择“段落”，如图2.20所示。
图 2.20
（7）鼠标选中图片右击，在弹出的快捷菜单中选择“对齐”→“左对齐”，如图 2.21所示。
图 2.21
（8）观察和调整图片与文字的距离，鼠标选中图片右击，在弹出的快捷菜单中选择“编辑标签＜img＞”，在弹出的“标签编辑器-img”对话框中设置“水平边距”和“垂直边距”的值，如图 2.22所示。
图 2.22
（9）保存网页文件并在浏览器中浏览网页效果，最终效果如图 2.16所示。
初学者制作图文混排的网页时，要学会对图片进行简单的大小、亮度、锐度等调整，同时注意调整图片和文字的对齐方式。对于文字、图片较多的复杂网页，还需要在后面学习表格、DIV、CSS等美化排版网页的知识。