《HTML-应用案例分析》由会员分享，可在线阅读，更多相关《HTML-应用案例分析（6页珍藏版）》请在金锄头文库上搜索。
1、教 案 用 纸项目三 网页排版 需 8 学时审阅人授 课 课 题任务二：用 DW 处理文字和图片学时4授 课 时 间2012年 3 月 5 日 星期 一 第 1-4 节教学目的与要求1. 文本的概念和基本操作 2. 图片的常见格式 3. 图片的基本操作 教 学 重 点1. 文本的基本操作 2. 图片的基本操作教 学 难 点图片的基本操作授 课 方 法一体化教 具 仪 器计算机、投影仪教学过程、内容分析、授课提纲附 记组 织 教 学：考勤，填写日志，复习旧课，讲授新课复 习 旧 课：HTML标记讲 授 新 课：用 DW 处理文字和图片平顶山工业职业技术学院教 学 内 容教学方法手 段时间分配【教
2、学设计】 向学生演示三个项目的效果图，分阶段分析这三个网页中文本的字体、字号、颜色、对齐方式等，图片的宽度、高度、边距、对齐、边框等属性，每个阶段演示完毕后，老师做示范操作。讲解、示范操作完毕后布置课后作业。 第一步：文本概说 （ 10 分钟左右） 第二步：展示项目 1 效果图，并分析文本属性 （ 5 分钟左右） 第三步：教师示范操作、答疑 （ 15 分钟左右） 第四步：图片概说 （ 10 分钟左右） 第五步：展示项目 2 效果图，并分析图片属性 （ 6 分钟左右） 第六步：教师示范操作、答疑 （ 15 分钟左右） 第七步：展示项目 3 效果图，并分析文本属性和图片属性 （ 8 分钟左右） 第
3、八步：教师示范操作、答疑 （ 18 分钟左右） 第九步：布置作业 （ 3 分钟左右） 【教学过程】一、文本及其操作 1 、文本的基本概念 是一种基本的网页元素 2 、文本的基本操作 Dreamweaver 8 中对文本的输入及编辑，与 Word 极其相似（ 1 ）换行 自动换行：在输入文字时，若某一行的长度超过了 Dreamweaver 窗口的显示范围，文字将自动换到下一行。 利用 ”Enter ” 键换行：在输入文字后按 ” Enter ” 键，文字成段，且上下段之间空一行。 利用 ” Shift+Enter ” 键换行：如果想要将文字手动换行，中间又不能出现空白行，可以按 ” Shift+
4、Enter ” 键。 （ 2 ）插入特殊的字符 有时为了内容的需要，要在网页中插入一些键盘上没有的特殊字符，在 Dreamweaver 8 中，这些特殊字符可以通过 ” 插入 ” ”HTML” ” 特殊字符 ” 命令来插入。 （ 3 ）删除、移动和复制文本 可以用工具按钮，也可以用菜单命令。 3 、查找替换文本的内容 如果要在文档中查找或替找某个文字，选择 ” 编辑 ” ” 查找与替换 ” 命令。 4 、设置文本格式 在 Dreamweaver 4.0 中设置文本格式可以通过属性面板，类似与 Microsoft Word 中对文本的属性设置，包括段落的格式、字体、字号、字的颜色、字体加粗倾斜、
5、对齐方式（左对齐居中右对齐）、文字所链接的路径或 URL 等。 平顶山工业职业技术学院教 学 内 容教学方法手 段时间分配范例 1 ：将文件“实战演练 1.txt ”的内容拷贝到新网页中，将“内容提要”作为标题，居中对齐，“本书采用”“首先”“本书适用于”作为三个段落的起首，首行缩进 2 个汉字；“目录”作为一个标题，居中对齐，其以下的内容每章 / 节 / 小节都要换行，居左对齐。然后，将所有的“数据库”一词替换为“ DATABASE ”。二、图片及其操作 1 、图片的格式 网站常见 / 常用的四种格式： Bmp,jpg,gif,png 2 、图片的主要操作： （） 插入图片 单击“插入”菜单
6、下的“图像”按钮，如图 1 所示： 图 1 Dreamweaver 8 插入图像 将弹出此对话框，如图 2 所示： 图 2 选择图像源文件对话框 在站点里面找到需要的图片，单击“确定”。 平顶山工业职业技术学院教 学 内 容教学方法手 段时间分配（）设置图像的属性 选中图像后，在属性面板中就显示出了图像的属性，如 3 所示： 图 3 图像属性 “图像”下的文本框用来设置图像的 ID ，一般情况下不填。 “宽”文本框用来设置图像的宽度，可填入数值，单位是像素。 “高”文本框用来设置图像的高度，可填入数值，单位是像素。 “源文件”用来设置这个图像的路径。 “链接”用来设置这个图像的超链接，“目标”
7、用来设置超链接的打开方式，有关超链接的详细说明请参见后面章节的介绍。 “替代”文本框用来设置图像的替代文本，可输入一段文字，当图像无法显示时，将显示这段文字。 “垂直边框”文本框图用来设置图像上与其上方其他页面元素，及图像下与其正文其他页面元素的距离。 “水平边距”文本框是用来设置左侧与其左方其他页面元素，及图像右侧与其右方其他页面元素距离。 “边框”文本框图用来设置图像边框的宽度，可输入数值，单位是像素。默认图像边框宽度为“ 0 ”，也就是没有图像边框。 “低解析度源”用来设置这个图像还没显示品质代图像，当图像很大时，可以给图像设置一个较小的低品质替代图像。在图像还没显示出来之前，较小的低品
8、质替代图像能迅速显示。 单击图像属性检查器中的 按钮，即把图像设置成浏览器左对齐；单击图像属性检查器中的 按钮，即把图像设置成浏览器居中对齐；单击图像属性检查器中的 按钮，即把图像设置成浏览器右对齐；单击图像属性检查器中的 按钮，即把图像设置成浏览器两端对齐。 （） 调整图像在网页中的相对位置 范例 2： 用菜单和工具 2 种方法插入图片 ji.jpg 和 daoying.jpg ，同行并排，图片 ji.jpg 的高 =200 ，宽 =350 ，右对齐； daoying.jpg 的高 =200 ，宽 =300 ，左对齐；然后用“裁剪”工具图片 ji.jpg 的光亮部分保留，去掉其左边不亮部分，
9、再将其高 =200 ，宽 =350 ；将图片 ji.jpg 的亮度 =20 ，对比度 =25 ，锐化 =5 ；图片 shan.jpg, 边框 =2 ，垂直边距 =150 ，水平边距 =3 。 图 4 范例 2 效果平顶山工业职业技术学院教 学 内 容教学方法手 段时间分配三、文本和图片的混合操作 图 5 范例 3 原图 图 6 范例 3 效果图 范例 3： 要求： 阿拉斯加（ Alaska ） : 格式 : 段落 字体 华文彩云 大小 :36(px) 颜色 :#000066 （ Alaska ） : 格式 : 段落 字体 Times New Roman 大小 :36(px) 颜色 :#0000
10、66 水平线 : 宽 : 80% 高 :5 对齐 : 居中对齐 阴影 : 无 * 在寒冷的阿拉斯加，不但可以看到晶莹剔透的冰雕、完全用冰盖起来的 ICE HOTEL ，还可以看到美丽的极光。你能想象住在完全由冰盖起来的旅馆里是什么感觉吗？ 格式 : 段落 字体 默认 大小 :16(px) 颜色 :#000000 * 冰雕 : 格式 : 段落 字体 : 方正舒体 大小 :36(px) 颜色 : #FF6600 ICE HOTEL: 格式 : 段落 字体 : 方正舒体 大小 :36(px) 颜色 : #FF3399 极光 : 格式 : 段落 字体 : 方正舒体 大小 :36(px) 颜色 : #6
11、699CC * 极光是由于太阳风与极圈内的磁场产生反应而形成的光，它时而白色，时而是蓝色也有可能是五颜六色的。虽然阿拉斯加非常寒冷但是每年去那里的游客仍然络绎不绝，为的就是欣赏这难得一见的极光。 平顶山工业职业技术学院教 学 内 容教学方法手 段时间分配格式 : 段落 字体 : 方正舒体 大小 :18(px) 颜色 : #0033CC 极光 : 格式 : 段落 字体 : 华文彩云 大小 :36(px) 颜色 : #00FF00 寒冷 : 格式 : 段落 字体 : 方正舒体 大小 :36(px) 颜色 : #00FF00 难得一见 : 格式 : 段落 字体 : 方正舒体 大小 :36(px) 颜
12、色 : #00FF00 *谁也不会想到在寒冷的阿拉斯加竟然会有天然的室外温泉，在零下几十度的气温下，能够泡在温暖的温泉里喝上一杯咖啡，我想也是一件非常惬意的事情吧！ 格式 : 段落 字体 : 方正舒体 大小 :18(px) 颜色 : #0033CC 温泉 格式 : 段落 字体 : 华文彩云 大小 :36(px) 颜色 : #FF9900 咖啡 格式 : 段落 字体 : 华文彩云 大小 :36(px) 颜色 : #FF9900 事情 格式 : 段落 字体 : 华文彩云 大小 :36(px) 颜色 : #FF9900 *图片处理 :jiguang.jpg 宽 :450 高 :221 对齐 : 右对齐 亮度 =-1 ，对比度 =1 ，锐化 =0 Shan.jpg: 宽 :300 高 :198 对齐 : 左对齐 亮度 =1 ，对比度 =2 ，锐化 =2 ，边框 =1 【小结】本次课主要讲解文本和文本的属性 , 图片的属性和操作。【作业】 1. 文本有哪些主要属性？ 2. 图片有哪些主要属性？ 3. 如何裁剪图片？平顶山工业职业技术学院
