HTML网页制作.ppt

* 第10章小结 form标签中的常用属性：name,action,method input输入元素的类型，各元素的属性 Text,password File Checkbox,radio Button,submit,reset Image 多行文本域标签及各种属性 下拉列表标签、下拉列表选项标签、各种属性（Size、Multiple、Selected） * 设计如图所示表单界面 .input1 { background-color:F7F1E7; border:1px solid #0000ff; } * 参考答案： 学员很可能回答不全，教员给以鼓励，同时给予补充完整。 1）表单用于收集客户端浏览者的信息；表单有action动作、method方法属性。 2）文本框分为：单行文本框、密码框、文本域（多行文本框） 3）使用最多字符数（最多长度）属性。 4）单选按钮用于多选一，而复选框预允许多选多。 * 1.提问：HTML语言是用来做什么？ 引导：做网页。 顺便告诉学员，DreamWeaver能自动生成HTML代码，但是有时我们还是需要人工修改HTML代码。我们在实现动态网页时，更需要理解、阅读HTML代码，因此非常重要。 2.强调HTML的功能： 规定网页内容的显示格式。 * 向学员解释： 1)HTML网页的标签讲究配对，HTML开始，/HTML结束 2）HTML网页和人一样，由头部HEAD和主体BODY两部分组成 * 向学员解释： 标签一般由两部分组成：标签和属性， 例如： BODY bgcolor=“green” …. /BODY BODY就是标签， bgcolor=“green”就是属性，属性可选，还可以多个。 * 演示：字体Font的用法，参见TG4-Source文件夹中“字体“用例。强调三个属性： 1)Face字体 2）size 大小 3）color 颜色 * * 演示： 自动刷新的例子：网页代码详见TG4-Source文件夹中的用例。 向学员说明：网页中的其他代码是JavaScript，后续章节会讲解。 * 讲解要点： 引入话题：如果一个城市的天气气候每天一成不变，都是夏天或冬天，这样好吗？ 引导：学生可能会说四季如春，当然好啊，引导：天气气候应该动态变化，“四季分明”， 这才适合自然界生物的生长，我们的网页也是如此，样式不能一成不变，应给人一种鲜活的动态感受，吸引浏览者。 1.使用DHTML的目的是实现动态网页，使网页产生一些动态效果， 演示动态效果：参见TG6-Source文件夹中“超链接变色”和“超链接背景切换” 用例 1）超链接变色：鼠标移过去超链接会变色。 2 )超链接背景切换：上机我们将做此练习，鼠标移过去，背景切换。 2.DHTML包括三部分内容： HTML、层叠样式表、脚本语言 * 提问：我们以前学习的P标段落标签显示时是什么颜色？ 回答：毫无疑问，黑色。 告诉学员： 1）如果把网页内容比喻为一个女孩的话，样式就好比这位女孩穿的衣服。 女孩喜欢用漂亮的衣装来打扮自己，同样，我们的网页也需要华丽的样式来包装。 2）PH1等标签都是默认为黑色白底，如果希望改变这些默认效果，就必须自定义新的样式。 演示：参考TG6-Source文件夹中的”什么是样式“用例。 * * 提问：我们以前学习的P标段落标签显示时是什么颜色？ 回答：毫无疑问，黑色。 告诉学员： 1）如果把网页内容比喻为一个女孩的话，样式就好比这位女孩穿的衣服。 女孩喜欢用漂亮的衣装来打扮自己，同样，我们的网页也需要华丽的样式来包装。 2）PH1等标签都是默认为黑色白底，如果希望改变这些默认效果，就必须自定义新的样式。 演示：参考TG6-Source文件夹中的”什么是样式“用例。 * 提问：我们刚才的行内样式表可以让个别段落与众不同，但是有缺陷： 如果我们希望所有的段落都采用统一的样式呢？ 引导：在每个P标签后都加上相同的样式代码，太麻烦了。怎么办？ 很简单，把统一的样式放在HEAD标签内，让本网页的所有段落P标签共享同一样式。 这就是我们要讲的内嵌样式表。 告诉学员： 1）选择器：表明此样式作用于哪个HTML标签。 2）样式规则之间用分号分割开 3）定好样式后，它将对本网页内所有的同类标签（如P）起作用。 演示：参考TG6-Source文件夹中的”什么是内嵌样式“用例。 * * 讲解要点： 1）先演示：参考TG6-Source文件夹中的”HTML选择器“用例。 2）指出： 品种特征－H2 下面的三段都是段落P， 3）提问：我们应该采用哪些标签的样式呢？ 4）回答：显然是H2和P标签。 5）讲解关键代码，也可以打开源文件讲解。 * 提问： 1）实现如图所示的细边框效果，我们想想能不能用H