HTML 应用案例分析.docxVIP

教案用纸

网页

网页排版8学时需项目三审阅人

任务二：题授课课处理文字和图片DW用

学

时

4

授课时间星期一第1-4节年20223月5日

教1.文本的概念和基本操作2.图片的常见格式3.图片的基本操作

学目

的与

要求

教学重点图片的基本操作2.1.文本的基本操作

点教学难图片的基本操作

法授课方一体化

教具仪器计算机、投影仪

教学过程、内容分析、授课提纲

记附．

教

教学：组织

考勤，填写日志，复习旧课，讲授新课

新课：

DW处理文字和图片用

习复旧课：HTML标记授讲

平顶山工业职业技术学院

教学方法

教学方法

时间分配

学

内

容

手段

【教学设计】向学生演示三个项目的效果图，分阶段分析这三个网页中

文本的字体、字号、颜色、对齐方式等，图片的宽度、高度、边距、对齐、边框等属性，每一个阶段演示完毕后，老师做示范操作。讲解、示范操作完毕后布置课后作业。

第一步：文本概说(10分钟摆布)

第二步：展示项目1效果图，并分析文本属性(5分钟摆布)

第三步：教师示范操作、答疑(15分钟摆布)

第四步：图片概说(10分钟摆布)

第五步：展示项目2效果图，并分析图片属性(6分钟摆布)

第六步：教师示范操作、答疑(15分钟摆布)

第七步：展示项目3效果图，并分析文本属性和图片属性(8分钟左右)

第八步：教师示范操作、答疑(18分钟摆布)

第九步：布置作业(3分钟摆布)

【教学过程】

一、文本及其操作

1、文本的基本概念

是一种基本的网页元素

2、文本的基本操作

Dreamweaver8中对文本的输入及编辑，与Word极其相似

(1)换行

A自动换行：在输入文字时，若某一行的长度超过了Dreamweaver

窗口的显示范围，文字将自动换到下一行。

B利用”Enter”键换行：在输入文字后按”Enter”键，文字成段，且上下段之间空一行。

C利用”Shift+Ente键换行：如果想要将文字手动换行，中间又不能浮现空白行，可以按”Shift+Ente键。

(2)插入特殊的字符

有时为了内容的需要，要在网页中插入一些键盘上没有的特殊字符，在Dreamweaver8中，这些特殊字符可以通过”插入”→”HTML”→”特殊字符”命令来插入。

(3)删除、挪移和复制文本

可以用工具按钮，也可以用菜单命令。

3、查找／替换文本的内容

如果要在文档中查找或者替找某个文字，选择”编辑”→”查找与替换”命令。

4、设置文本格式

在Dreamweaver4.0中设置文本格式可以通过属性面板，类似与MicrosoftWord中对文本的属性设置，包括段落的格式、字体、字号、字的颜色、字体加粗／倾斜、对齐方式(左对齐／居中／右对齐)、文字所链接的路径或者URL等。

内平顶山工业职业技术学院

内

教学方法

容学教

段手

时间分配

范例1：将文件“实战演练1.txt”的内容拷贝到新网页中，将“内容提要”作为标题，居中对齐，“本书采用”“首先”“本书合用于”作为三个段落的起首，首行缩进2个汉字；“目录”作为一个标题，居中对齐，其以下的内容每章/

节/小节都要换行，居左对齐。然后，将所有的“数据库”一词替换为

“DATABASE”。

二、图片及其操作

1、图片的格式

网站常见/常用的四种格式：Bmp,jpg,gif,png

2、图片的主要操作：

(1)插入图片

单击“插入”菜单下的“图象”按钮，如图1所示：

1Dreamweaver8插入图象图

所示：将弹出此对话框，如图2

选择图象源文件对话框2图

”“在站点里面找到需要的图片，单击确定。

平顶山工业职业技术学院．

教学方法

教学方法

学

内

容

手段

时间分配

(2)设置图象的属性

所示：选中图象后，在属性面板中就显示出了图象的属性，如3

图3图象属性

“图象”下的文本框用来设置图象的ID，普通情况下不填。

“宽”文本框用来设置图象的宽度，可填入数值，单位是像素。

“高”文本框用来设置图象的高度，可填入数值