网页设计与制作实用教程 教学课件 ppt 作者 马绍惠 第3章 文本与图像.ppt

第3章 文本与图像 学习要求 本章重点 了解Dreamweaver基本网页的编辑 熟悉文本和图像的插入 掌握文本和图像的属性设置 有关文本和图像的操作 主要内容  3.1 文本的编辑 3.2 图像的操作 3.3 鼠标经过图像的制作 3.1 文本的编辑 Dreamweaver允许将特殊字符插入到文档中，方法是单击菜单栏“插入” → “HTML” →“特殊字符”菜单命令，会弹出“插入其他字符”对话框。选择所需要的特殊字符，单击“确定”按钮完成特殊字符的插入。 序列表，即项目列表和编号列表，定义项目列表的方法是将插入点放在要添加列表的位置，单击“文本”→“列表”菜单命令，然后在打开的如图3-3所示的子菜单选择所需的列表类型命令，则指定列表项的前导字符出现在文档窗口中，键入列表项文本，然后按【Enter】键创建其他列表项。要结束项目列表，可将插入点移到最后一行末尾，按两次【Enter】键完成列表。 6.设置和更改字体 选中要设置字体的文本，单击 “文本”→“字体”菜单命令，在弹出的子菜单中选择相应的字体即可。利用“属性”面板，也可以实现对文本字体的设置。在“属性”面板的“字体”下拉列表中选择相应字体选项即可，如果字体列表中没有想要的字体，可以选择下拉列表中“编辑字体列表”选项打开图3-4所示“编辑字体列表”对话框，添加字体类型。 主要内容  3.1 文本的编辑 3.2 图像的插入 3.3鼠标经过图像的制作 3.2 图像的操作 图像在网页中通常起到画龙点睛的作用,它能装饰网页,而且它能够表达出一种文字无法说明的思想，表达整个网站的风格。 图像的插入 将插入点放置到要插入图像的位置，单击 “插入”→“图像”菜单命令，弹出如图3-6 所示的“选择图像源文件”对话框。然后在该对话框中选择需要的图片。如果将该对话框下方的“预览图像”复选框选中，则在选中一个图片文件后，则可通过对话框右侧的“图像预览”栏预览该图片的效果。若所选取的图像不在站点目录下，单击“确定”按钮后会弹出一个信息提示框如图3-7所示，单击“确定”按钮，将图片保存到站点目录下，否则在浏览器中预览的时间，将看不到图片。 将图片保存到站点目录后，系统还会弹出一“图像标签辅助功能属性”对话框如图3-8所示，在该对话框中输入“替换文本”和关于图片地址的“详细说明”，单击“确定”按钮即可将图像插入到文档中。当用户端的浏览器不支持显示该图像时，将用输入的替换文本来替换图像。 在Dreamweaver中，若想要在某位置插入的图像还未准备好，为了方便网页布局，可先用图像占位符为其设置好位置。方法是单击“插入”→“图像占位符”菜单命令，在弹出的 “图像占位符”对话框中，设置图像占位符的各参数，单击“确定”即可。 图像属性的设置 把图像插入到文档中后，为了使它适合整个网页的布局，还需要对它的属性进行设置。选中要设置属性的 图片，得到其“属性”面板如图3-9，可设置有关图像的属性。 图3-9 图像“属性“面板 1.调整图像大小 调整图像大小操作将使图像在当前页面布局中更加合理。“属性”面板中的“宽”和“高”属性显示的是该图像在当前文档中的尺寸大小，单击 可以恢复图像原始大小，在Dreamweaver中插入图像时，默认的图像大小都是原始大小，插入图像时，默认的图像大小都是原 始大小，插入后可以根据需要输入“宽”和“高”的值，也可以手动调整图像的大小。方法是选中图像后，图像的底部、右侧及右下角出现调整图像大小的控制柄，拖动控制柄可调整图像的大小。 2.对齐图像和文字 图像同文字之间的对齐操作对版面的控制非常重要。要设置图像同文本的对齐方式首先要在文档中选中图像，然后从“属性”面板中选中“对齐”下拉列表中，选择需要的对齐方式。 3.锐化图像 锐化将增加对象边缘的像素的对比度，从而增加图像清晰度或锐度。选择图像后单击图像属性检查器中的“锐化”按钮 ,将弹出“锐化”对话框。可以通过拖动滑动块控件或在文本框中输入一个0到10之间的值，来指定图像的锐化程度，然后单击“确定”按钮即可。 4.裁剪图像 Dreamweaver 8.0支持裁剪位图文件图像。单击“属性”面板中的 图标或单击“修改”→“图像”→“裁剪” 菜单命令，所选图像周围会出现裁剪边界及裁剪控制点，如图3-10所示。 拖动裁剪控制点直到裁剪边界框包含的图像区域符合所需大小，按【Enter】键确认裁剪选区域，得到裁剪后的效果如图3-11所示。裁剪后的图像会改变硬盘上的源