网页制作项目5

项目5制作图文混排网页项目描述

知识储备

实践向导

能力拓展

退出项目小结

图像是网页元素中的另一重要组成部分，在网页中插入图像可以使网页更好地表现网站的主题思想，使版面变得丰富多彩，吸引更多的浏览者。图像文件的格式有很多种，但实际上在网页中常使用的图像文件格式只有GIF、JPG和PNG这三种，因为这三种图像文件都是经过压缩，因此文件比较小，利于网络上传输与观看。在网页中使用图像时，要考虑图像在页面中的整体效果。本项目制作“中国庐山”图文混排网页。返回项目描述返回5.2.1插入图像5.2.2设置图像属性5.2.3插入相关图像元素返回5.2知识储备5.2知识储备5.2.1插入图像在网页中插入图像的操作步骤如下：（1）将光标定位在文档中要插入图像的位置。（2）执行下列操作，菜单方式为单击“插入”菜单，选择“图像”选项。面板快捷方式为在“插入”面板的“常用”模式下，单击“图像”按钮。返回（3）弹出“选择图像源文件”对话框，单击“文件系统”单选按钮，表示从本地硬盘上选择图像文件。在该对话框中，选择需要插入的图像。返回（4）单击“确定”按钮后，弹出“图像标签辅助功能属性”对话框，替换文本处可以为空，单击“确定”即可。（5）切换到“代码”视图，可以看到图像对应的HTML代码。返回5.2.2设置图像属性如果插入到网页的图片大小不符合网页排版的要求，就需要在DreamweaverCS5中对图像进行缩放操作。在属性面板中设置图像大小，在HTML文档中插入图像后，选择“设计”视图，选中要调整大小的图像，打开图像“属性”面板，在图像“属性”面板中重新输入一个“宽”和“高”的值，就可以改变图像的大小，使用鼠标可以进行更为直观的缩放操作，具体步骤如下：（1）在HTML文档中插入图像后，单击“设计”视图，然后用鼠标单击要进行缩放的图像，在图像上会出现3个控制句柄。（2）将光标放在控制句柄上，出现双箭头的形状后，拖动控制句柄，即可调整图像大小。（3）按住Shift键，拖动右下方控制句柄可以等比例放大、缩小图像。返回图像“属性”面板常见选项说明如下：“图像”选项：设置图像的名称或ID，一般情况可以不输入。“宽”和“高”选项：设置图像的宽度和高度，默认单位是像素。“源文件”选项：显示当前图片文件的地址。“链接”选项：指定图像的超链接地址。“替换”选项：设置图像的注释文本。“编辑”选项：启动图像编辑器并打开选定的图像。“地图”选项：包含“地图”文本框和“热点工具”，文本框中可以输入图像地图的名称，热点工具可以在图片中插入热点区域。“垂直边距”和“水平边距”选项：以像素为单位在图像的四周添加边距。“目标”选项：指定打开链接网页的框架或窗口。“边框”选项：设置图像的边框宽度。“对齐”选项：设置图像的对齐方式。返回5.2.3插入相关图像元素1．插入“鼠标经过图像”（1）“鼠标经过图像”可以实现图像轮换特效，给页面增添动态效果。先准备好两幅大小相同的图片，将光标定位到要插入轮换图像的位置。单击“插入”菜单，选择“图像对象”选项，在子菜单中单击“鼠标经过图像”命令。或者单击“插入”面板，选择“常用”项，单击“鼠标经过图像”按钮。（2）弹出“插入鼠标经过图像”对话框，可以重新给图像起一个名称。单击“原始图像”右侧“浏览”按钮，载入一幅原始图像。单击“鼠标经过图像”右侧“浏览”按钮，载入一幅要进行轮换的图像。返回如果选中“预载鼠标经过图像”复选框，在下载页面时，轮换的图像也同时会被下载到缓存中。如果输入“替换文本”，则当在轮换图像上暂停鼠标时，会出现该文本。“按下时，前往的URL”右侧文本框中，如果输入网页的URL地址，单击图像时，会进入到链接的页面。单击“确定”按钮，即完成了动态轮换图像的设置。返回2．插入图像占位符图像占位符是在准备好将最终图像添加到Web页面之前使用的图形，通过使用图像占位符，可以在真正创建图像之前确定图像在页面上的位置和大小。“插入图像占位符”对话框如图所示。返回任务5-1制作图文混排网页“中国庐山”页面。具体操作步骤如下：1．启动DreamweaverCS5，单击菜单“文件”→“新建”命令，弹出“新建文档”对话框，设置网页标题为“庐山”，然后输入文本，设置好文本格式，保存为5-1.html。返回5.3实践向导2．插入图片（1）将光标放在要插入图像的位置，选择菜单栏中“插入”→“图像”命令。（2）出现“选择图像源文件”对话框后，在“查找范围”选择文件所在的位置，在列表中选择“53.jpg”

文件名，显示效果。返回3．在页面中插入鼠标经过图像。（1）选中文本下方位置，点击菜单“插入”→“图像对象”→“鼠标经过图像”。（2）弹出“插入鼠标经过图像”对话框，分别设置“原始图像”和“鼠标经过图像”。（3）选择插入图像，在属性面板设置对齐方式为右对齐即可。具体效果如图所示。返回4．设置背景图像选择菜单“修改”→“页面属性”，弹出“页面属性”对话框，选中“外观（CSS）”，设置背景图像，如图所示。5．单击“确定”按钮，保存页面，按【F12】显示最终效果图。返回制作“万里长城”网页，通过制作该网页，可以掌握文本设置、图像加载、移动、复制、删除和属性设置等基本操作。“万里长城”网页的显示效果如图所示。返回5.4能力拓展