新网页设计与制作项目实训教程 教学课件 严加琼 曾金发 项目5.pptVIP

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