第4章网页中文本与图像的控制

1、网页设计与制作教程（Dreamweaver+Photoshop+Flash）第4章 文本与图像控制机械工业出版社4.1 文本控制1插入与编辑文本2插入特殊字符4.1.1 插入文本与特殊字符插入特殊字符1创建超链接2创建邮件链接邮件链接是一种特殊的链接，在网页中单击这种链接后，不是跳转到其他页面，而是自动打开Outlook Express或其他E-mail软件，并且在新邮件窗口中自动添加电子邮件链接中的邮箱地址。3创建锚链接锚链接就是创建命名锚记（简称锚点），它所起到的作用就是在文档中进行定位，单击这些创建了命名锚记的链接后，就可以快速访问指定位置。4.1.2 创建超链接4.1 文本控制4.1.

2、3 CSS控制文本的常见属性及其应用属性说明font-family设置网页使用字体的类别font-size设置文本的字体大小font-weight设置字体的粗细font-style设置文本的字体样式color设置文本的颜色text-indent设置文本块首行的缩进line-height设置行高text-decoration设置添加到文本的装饰效果text-align设置文本的水平对齐方式表4-1 常见的有关文本控制的属性4.1 文本控制图4-18 当前页面结构 图4-19 CSS规则4.1 文本控制1字体的类型标题没有定义字体，即默认字体此行文字定义了“文鼎POP-4”字体，但系统没有安装该字

3、体，此时该行字体使用默认字体显示4.1 文本控制4.1 文本控制2字体的大小、行高与颜色图4-21 当前页面结构图4-22 CSS规则 图4-23 预览效果4.2 图像控制4.2.1 插入图像 在插入图像之前，首先了解一下在网页制作中常见的图像格式： GIF格式：该文件格式最多使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，。 JPEG格式：该文件格式是用于摄影或连续色调图像的较好格式，这是因为JPEG文件可以包含数百万种颜色。 PNG格式：该文件格式是一种替代GIF格式的无专利权限制的格式，它包括对索引色、灰度、真彩色图像以及alpha通道透明度的支持。4.2 图像控制4.

4、2.2 设置图像属性在Dreamweaver CS5中选择某一图像，按下组合键Ctrl+F3，打开如图4-35所示的“属性”面板。图4-35 “属性”面板4.2 图像控制4.2.3 绘制热点区域图4-37 设置热点属性图4-38 鼠标悬停热点区域时的效果 4.2 图像控制4.2.4 插入鼠标经过图像4.2 图像控制4.2.5 CSS控制图像的常见属性及其应用1图像的边框与大小2背景图像属性说明background简写属性，作用是将背景属性设置在一个声明中background-color设置元素的背景颜色background-image把图像设置为背景background-position设置背

5、景图像的起始位置background-repeat设置背景图像是否重复，以及如何重复background-attachment设置背景图像是否固定或者随着页面的其余部分滚动表4-2 背景属性4.2 图像控制4.2.5 CSS控制图像的常见属性及其应用3图像超链接 图像超链接指的是将图像设置为超链接的形式，当鼠标移开和悬停在该超链接上时，分别呈现不同的效果。4.3 图文混排 图文混排最为核心的地方就是让文字围绕图像进行排列，而要实现这种效果就必须让图像脱离文本流，即使图像具有浮动（float）属性。4.4 课堂综合练习 图文混排最为核心的地方就是让文字围绕图像进行排列，而要实现这种效果就必须让图

6、像脱离文本流，即使图像具有浮动（float）属性。4.5 课堂综合实训 图文混排最为核心的地方就是让文字围绕图像进行排列，而要实现这种效果就必须让图像脱离文本流，即使图像具有浮动（float）属性。人有了知识，就会具备各种分析能力，人有了知识，就会具备各种分析能力，明辨是非的能力。明辨是非的能力。所以我们要勤恳读书，广泛阅读，所以我们要勤恳读书，广泛阅读，古人说古人说“书中自有黄金屋。书中自有黄金屋。”通过阅读科技书籍，我们能丰富知识，通过阅读科技书籍，我们能丰富知识，培养逻辑思维能力；培养逻辑思维能力；通过阅读文学作品，我们能提高文学鉴赏水平，通过阅读文学作品，我们能提高文学鉴赏水平，培养文学情趣；培养文学情趣；通过阅读报刊，我们能增长见识，扩大自己的知