HTML 应用案例.doc

教 案 用 纸 项目三 网页排版 需 8 学时 审阅人 授 课 课 题 任务二：用 DW 处理文字和图片1. 文本的概念和基本操作 2. 图片的常见格式 3. 图片的基本操作 1. 文本的基本操作 2. 图片的基本操作图片的基本操作用 DW 处理文字和图片【教学设计】 　　向学生演示三个项目的效果图，分阶段分析这三个网页中文本的字体、字号、颜色、对齐方式等，图片的宽度、高度、边距、对齐、边框等属性，每个阶段演示完毕后，老师做示范操作。讲解、示范操作完毕后布置课后作业。 　　第一步：文本概说 （ 10 分钟左右） 　　第二步：展示项目 1 效果图，并分析文本属性 （ 5 分钟左右） 　　第三步：教师示范操作、答疑 （ 15 分钟左右） 　　第四步：图片概说 （ 10 分钟左右） 　　第五步：展示项目 2 效果图，并分析图片属性 （ 6 分钟左右） 　　第六步：教师示范操作、答疑 （ 15 分钟左右） 　　第七步：展示项目 3 效果图，并分析文本属性和图片属性 （ 8 分钟左右） 　　第八步：教师示范操作、答疑 （ 18 分钟左右） 　　第九步：布置作业 （ 3 分钟左右） 【教学过程】一、文本及其操作 　　1 、文本的基本概念 　　是一种基本的网页元素 　　2 、文本的基本操作 　　Dreamweaver 8 中对文本的输入及编辑，与 Word 极其相似　　（ 1 ）换行 　　Ａ　自动换行：在输入文字时，若某一行的长度超过了 Dreamweaver 窗口的显示范围，文字将自动换到下一行。 　　Ｂ　利用 ”Enter ” 键换行：在输入文字后按 ” Enter ” 键，文字成段，且上下段之间空一行。 　　Ｃ　利用 ” Shift+Enter ” 键换行：如果想要将文字手动换行，中间又不能出现空白行，可以按 ” Shift+Enter ” 键。 　　（ 2 ）插入特殊的字符 　　有时为了内容的需要，要在网页中插入一些键盘上没有的特殊字符，在 Dreamweaver 8 中，这些特殊字符可以通过 ” 插入 ” → ”HTML” → ” 特殊字符 ” 命令来插入。 　　（ 3 ）删除、移动和复制文本 　　可以用工具按钮，也可以用菜单命令。 　　3 、查找／替换文本的内容 　　如果要在文档中查找或替找某个文字，选择 ” 编辑 ” → ” 查找与替换 ” 命令。 　　4 、设置文本格式 　　在 Dreamweaver 4.0 中设置文本格式可以通过属性面板，类似与 Microsoft Word 中对文本的属性设置，包括段落的格式、字体、字号、字的颜色、字体加粗／倾斜、对齐方式（左对齐／居中／右对齐）、文字所链接的路径或 URL 等。 范例 1 ：将文件“实战演练 1.txt ”的内容拷贝到新网页中，将“内容提要”作为标题，居中对齐，“本书采用”“首先”“本书适用于”作为三个段落的起首，首行缩进 2 个汉字；“目录”作为一个标题，居中对齐，其以下的内容每章 / 节 / 小节都要换行，居左对齐。然后，将所有的“数据库”一词替换为“ DATABASE ”。二、图片及其操作 　　1 、图片的格式 　　网站常见 / 常用的四种格式： Bmp,jpg,gif,png 　　2 、图片的主要操作： 　　（１） 插入图片 　　单击“插入”菜单下的“图像”按钮，如图 1 所示： 　　　　图 1 Dreamweaver 8 插入图像 　　将弹出此对话框，如图 2 所示： 　　　　图 2 选择图像源文件对话框 　　在站点里面找到需要的图片，单击“确定”。 教 学 内 容 教学方法 手 段 时间分配 （２）设置图像的属性 　　选中图像后，在属性面板中就显示出了图像的属性，如 3 所示： 　　　　图 3 图像属性 　　“图像”下的文本框用来设置图像的 ID ，一般情况下不填。 　　“宽”文本框用来设置图像的宽度，可填入数值，单位是像素。 　　“高”文本框用来设置图像的高度，可填入数值，单位是像素。 　　“源文件”用来设置这个图像的路径。 　　“链接”用来设置这个图像的超链接，“目标”用来设置超链接的打开方式，有关超链接的详细说明请参见后面章节的介绍。 　　“替代”文本框用来设置图像的替代文本，可输入一段文字，当图像无法显示时，将显示这段文字。 　　“垂直边框”文本框图用来设置图像上与其上方其他页面元素，及图像下与其正文其他页面元素的距离。 　　“水平边距”文本框是用来设置左侧与其左方其他页面元素，及图像右侧与其右方其他页面元素距