HTML应用案例分析

1、教 案 用 纸网页排版8 学时需项目三审阅人任务二：题 授 课课处理文字和图片 DW用学时4授课时间星期一第1-4节 年2012 3月5日目 亠 与求 教学的耍1.文本的概念和基本操作2.图片的常见格式3.图片的基本操作教学重点图片的基本操作2. 1.文本的基本操作点 教学难图片的基本操作法授课方一体化教具仪器计算机、投影仪教学过程、内容分析、授课提纲记附.教学：组织授讲考勤，填写日志，复习旧课，讲授新课习复 旧课：HTML标记新课：DW 处理文字和图片用平顶山工业职业技术学院 教学方法内 容手段时间分配【教学设计】向学生演示三个项目的效果图，分阶段分析这三个网页中文本的字体、字号、颜色、对齐

2、方式等，图片的宽度、高度、边距、对齐、 边框等属性，每个阶段演示完毕后，老师做示范操作。讲解、示范操作完毕 后布置课后作业。第一步：文本概说 （10分钟左右）第二步：展示项目1效果图，并分析文本属性（5分钟左右）第三步：教师示范操作、答疑（15分钟左右）第四步：图片概说 （10分钟左右）第五步：展示项目2效果图，并分析图片属性（6分钟左右）第六步：教师示范操作、答疑（15分钟左右）第七步：展示项目3效果图，并分析文本属性和图片属性（8分钟左右）第八步：教师示范操作、答疑（18分钟左右）第九步：布置作业 （3分钟左右）【教学过程】 一、文本及其操作1、文本的基本概念 是一种基本的网页元素2、文本

3、的基本操作Dreamweaver 8中对文本的输入及编辑，与 Word极其相似（1 ）换行A自动换行：在输入文字时，若某一行的长度超过了Dreamweaver窗口的显示范围，文字将自动换到下一行。B利用” Enter ”键换行：在输入文字后按” Enter ”键，文字成 段，且上下段之间空一行。C利用” Shift+Enter ”键换行：如果想要将文字手动换行，中间又 不能出现空白行，可以按 ” Shift+Enter ”键。（2 ）插入特殊的字符有时为了内容的需要，要在网页中插入一些键盘上没有的特殊字符，在 Dreamweaver 8中，这些特殊字符可以通过”插入” HTML” ” 特殊字符

4、”命令来插入。（3）删除、移动和复制文本可以用工具按钮，也可以用菜单命令。3、查找/替换文本的内容如果要在文档中查找或替找某个文字，选择”编辑”查找与替换”命令。4、设置文本格式在Dreamweaver 4.0中设置文本格式可以通过属性面板，类似与 Microsoft Word中对文本的属性设置，包括段落的格式、字体、字号、字的 颜色、字体加粗/倾斜、对齐方式（左对齐/居中/右对齐）、文字所链接 的路径或URL等。平顶山工业职业技术学院教学方法 内容学教段时间分配范例1 :将文件“实战演练1.txt ”的内容拷贝到新网页中，将“内容提 要”作为标题，居中对齐，“本书采用” “首先” “本书适用

5、于”作为三个段 落的起首，首行缩进2个汉字；“目录”作为一个标题，居中对齐，其以下 的内容每章/节/小节都要换行，居左对齐。然后，将所有的“数据库”一词替换为“ DATABASE ”。二、图片及其操作1、图片的格式网站常见/常用的四种格式：Bmp,jpg,gif,png2、图片的主要操作：(1)插入图片单击“插入”菜单下的“图像”按钮，如图1所示：1 Dreamweaver 8插入图像 图所示：将弹出此对话框，如图 2选择图像源文件对话框2 图”“在站点里面找到需要的图片，单击确定。平顶山工业职业技术学院.教学方法教 学 内 容手段时间分配(2)设置图像的属性所示：选中图像后，在属性面板中就显

6、示岀了图像的属性，如3. 睡111工阖昶3声凶目bU!IS|3 WiM H图3图像属性“图像”下的文本框用来设置图像的ID，一般情况下不填。“宽”文本框用来设置图像的宽度，可填入数值，单位是像素。“高”文本框用来设置图像的高度，可填入数值，单位是像素。“源文件”用来设置这个图像的路径。“链接”用来设置这个图像的超链接，“目标”用来设置超链接的打开方式，有关超链接的详细说明请参见后面章节的介绍。当图像无法显示时， 将显示这段及图像下与其正文其他页面元及图像右侧与其右方其他页面元“替代”文本框用来设置图像的替代文本，可输入一段文字,文字。“垂直边框”文本框图用来设置图像上与其上方其他页面元素， 素

7、的距离。“水平边距”文本框是用来设置左侧与其左方其他页面元素, 素距离。“边框”文本框图用来设置图像边框的宽度，可输入数值，单位是像素。默认图像边框宽度为“ 0 ”，也就是没有图像边框。“低解析度源”用来设置这个图像还没显示品质代图像，当图像很大时，可以给图像设置一个较小的低品质替代图像。在图像还没显示岀来之前，较小的低品质替代图像能迅速显示。=单击图像属性检查器中的按钮，即把图像设置成浏览器左对齐；单击图像属丨按钮，即把图像设置成浏览器居中对齐；单击图像属性检查器中的性检查器中的黑皇按钮，即把图按钮，即把图像设置成浏览器右对齐；单击图像属性检查器中的 像设置成浏览器两端对齐。(3)调整图像在

8、网页中的相对位置范例2:用菜单和工具 2种方法插入图片ji.jpg和daoying.jpg ，同行并排，图片ji.jpg的高=200，宽=350，右对齐；daoying.jpg的高=200，宽=300，左对齐；然后用“裁剪”工具图片ji.jpg的光亮部分保留，去掉其左边不亮部分，再将其高=200，宽=350 ;将图片ji.jpg的亮度 =20，对比度 =25，锐化 =5 ；图片shan.jpg,边框 =2，垂直边距 =150，水平边距 =3。Il H.IT图4范例2效果平顶山工业职业技术学院教学方法容 内 学 教手 段时间分配三、文本和图片的混合操作原图范例3 图5o上二:f 2 ：八厨風预I

9、 (Alaska)在够的冋空斷加.利卽预倉封是劉出的：. 珂.先全CE 49TLL.込1以垂對旻加“二 . 滋套空以侄在克宝色禅辭鼻的廉馆里悬什么亟剪呜i * 乂起久员軽*的A 1 少九.r 4 f ?rw*住.迢52a-si-jn :$3殉h飼如 * 卜z介丫4 t 7/t T.紐需比1俺催$ 1-fe； fl *0$图 6 范例 3 效果图范例 3 ： 要求：阿拉斯加( Alaska ) : 格式 : 段落 字体 华文彩云 大小 :36(px) 颜色 :#000066 ( Alaska ) : 格式 : 段落 字体 Times New Roman 大小 :36(px) 颜色 :#00006

10、6 水平线 : 宽 : 80% 高 :5 对齐 : 居中对齐 阴影 : 无*在寒冷的阿拉斯加，不但可以看到晶莹剔透的冰雕、完全用冰盖起来的 ICEHOTEL ，还可以看到美丽的极光。你能想象住在完全由 冰盖起来的旅馆里是什么感觉吗？ 格式 : 段落 字体 默认 大小 :16(px) 颜色 :#000000*冰雕 : 格式 : 段落 字体 : 方正舒体 大小 :36(px) 颜色 : #FF6600ICE HOTEL: 格式 : 段落 字体 : 方正舒体 大小 :36(px) 颜色 : #FF3399 极光 : 格式 : 段落 字体 : 方正舒体 大小 :36(px) 颜色 : #6699CC*

11、极光是由于太阳风与极圈内的磁场产生反应而形成的光， 它时而白色， 时而是蓝色也有可能是 五颜六色的。 虽然阿拉斯加非常寒冷 但是每年去那里的游客仍然络 绎不绝， 为的就是欣赏这 难得一见的极光。 平顶山工业职业技术学院 教学方法 容 教学 内 段 手时间分配格式：段落字体：方正舒体大小：18(px)颜色：#0033CC极光：格式：段落字体：华文彩云大小：36(px)颜色：#00FF00寒冷：格式：段落字体：方正舒体大小：36(px)颜色：#00FF00难得一见：格式：段落字体：方正舒体大小：36(px)颜色： #00FF00*谁也不会想到在寒冷的阿拉斯加竟然会有天然的室外温泉，在零下几十度 的气温下，能够泡在温暖的温泉里喝上一杯咖啡， 我想也 是一件非常惬意 的事情吧！格式：段落字体：方正舒体大小：18(px)颜色：#0033CC温泉格式：段落字体：华文彩云大小：36(px)颜色：#FF9900 咖啡格式：段落字体：华文彩云大小：36(px)颜色：#FF9900事情格式：段落字体：华文彩云大小：