第2章 图像与超链接

1、预 科图像与超链接图像与超链接第二章第二章回顾与检查 HTML由那些元素组成？ 使用Dreamweaver制作网页时有几种编辑模式？ HTML中常见的特殊符号有哪些？ 在HTML中可以设定几种标题类型？本章任务 制作百度首页 当当网图书页面 制作添加链接的百度首页本章目标 掌握图像的创建方法 学会制作图文混排的页面 掌握超级链接的创建方法图像与HTML 图像的应用场合 新闻图片 产品说明 LOGO设计 Banner设计 广告宣传 图像的作用 图文并茂、直观、生动向HTML中插入图像 图像的插入的步骤 在设计模式下，选择“插入”“图像” 选择图片位置 设置辅助功能属性 教师演示操作过程图像的路径

2、 路径的几种情况 图像与网页在相同的目录下图像的路径 图像位于网页目录下的某个子目录图像的路径 图像位于网页目录之上图像相关属性 图像的基本属性 图像地址 图像尺寸 可替换的文本图像地址 图像地址 通过“源文件”指定图像存放路径 通过“源文件”修改图像的路径图像尺寸 图像尺寸 插入图像后，图像为默认尺寸显示 可通过宽高属性进行调整文本替换 文本替换 文本用于在图片无法正常显示时的提供的说明 可通过设置进行修改演示案例-百度首页 页面效果演示案例-百度首页 思路分析 在网页适当位置插入百度图片 按照页面效果添加文字 插入百度搜索图片 在网页末尾插入工商图标 在网页空白区域内输入内容 教师讲解实现

3、思路并演示HTML的图文混排 图文混排的属性设置 边距 对齐方式边距 边距 图像与文字默认无边距，导致很紧密 设置边距，保持图像与文字的间距，确保页面美观对齐方式 常见的对齐方式 左对齐 右对齐 居中对齐演示案例-制作“怪笑小说”页面 页面效果演示案例-制作“怪笑小说”页面 思路分析 设置图像的对齐方式 设置图像与文字的间距 图文混排的美观 教师演示操作步骤超级链接 什么是超级链接 超级链接又称超链接 使相互独立的页面可以互相访问超级链接 超链接的创建 选中需要设置连接的文本 在属性面板中设置连接对象链接的目标窗口 常见的超链接窗口打开方式 _blank:在弹出的新窗口中显示打开的内容 _se

4、lf:在本窗口中显示打开的内容 教师演示操作步骤链接的应用 使用超链接打开电子邮件 电子邮件：以“mailto：”作为链接的起始 教师演示操作步骤链接的应用 书签标记 又称锚记或锚点 用于页面指定位置内容的访问 教师演示案例效果链接的应用 创建锚记的步骤一 在指定位置，选择“插入”“命名锚记”链接的应用 查看锚记命名效果 命名锚记后，在设计模式中显示锚记标示链接的应用 创建锚记的步骤二 为锚记添加链接，格式为：#+锚记名称 教师演示操作步骤链接的应用 空链接 以链接形式显示，但无具体的指向 使用#表示空链接链接的应用 图像链接 使用图像代替文本实现链接效果 选中图片，在属性面板中进行设置 图像链接默认带有边框，通过设置属性面板进行调整 教师演示操作步骤演示案例-带链接的百度首页 页面效果 为百度首页添加超链接 思路分析 首先按照效果制作无链接的首页 分别为图片和文字添加链接 设置图像链接的边框宽度为0 教师演示操作步骤总结 请简要描述如何在HTML页面中插入图像？ 图文混排有几种常见方式？如何进行调整？ 超链接的作用是什么？如何设置超链接？ 常见的超链接有哪些分类？作业 课后作