HTML网页制作讲义

* 第10章小结

标签中的常用属性：name,action,method 输入元素的类型，各元素的属性 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网页的标签讲究配对，开始，结束 2)HTML网页和人一样，由头部和主体两部分组成 * 向学员解释： 标签一般由两部分组成：标签和属性， 例如： …. BODY就是标签， bgcolor=“green”就是属性，属性可选，还可以多个。 * 演示：字体Font的用法，参见TG4-Source文件夹中“字体“用例。强调三个属性： 1)Face字体 2)size 大小 3)color 颜色 * * 演示： 自动刷新的例子：网页代码详见TG4-Source文件夹中的用例。 向学员说明：网页中的其他代码是JavaScript，后续章节会讲解。 * 讲解要点： 引入话题：如果一个城市的天气气候每天一成不变，都是夏天或冬天，这样好吗？ 引导：学生可能会说四季如春，当然好啊，引导：天气气候应该动态变化，“四季分明”， 这才适合自然界生物的生长，我们的网页也是如此，样式不能一成不变，应给人一种鲜活的动态感受，吸引浏览者。 1.使用DHTML的目的是实现动态网页，使网页产生一些动态效果， 演示动态效果：参见TG6-Source文件夹中“超链接变色”和“超链接背景切换” 用例 1)超链接变色：鼠标移过去超链接会变色。 2 )超链接背景切换：上机我们将做此练习，鼠标移过去，背景切换。 2.DHTML包括三部分内容： HTML、层叠样式表、脚本语言 * 提问：我们以前学习的

标段落标签显示时是什么颜色？ 回答：毫无疑问，黑色。 告诉学员： 1)如果把网页内容比喻为一个女孩的话，样式就好比这位女孩穿的衣服。 女孩喜欢用漂亮的衣装来打扮自己，同样，我们的网页也需要华丽的样式来包装。 2)

等标签都是默认为黑色白底，如果希望改变这些默认效果，就必须自定义新的样式。 演示：参考TG6-Source文件夹中的”什么是样式“用例。 * * 提问：我们以前学习的

标段落标签显示时是什么颜色？ 回答：毫无疑问，黑色。 告诉学员： 1)如果把网页内容比喻为一个女孩的话，样式就好比这位女孩穿的衣服。 女孩喜欢用漂亮的衣装来打扮自己，同样，我们的网页也需要华丽的样式来包装。 2)

等标签都是默认为黑色白底，如果希望改变这些默认效果，就必须自定义新的样式。 演示：参考TG6-Source文件夹中的”什么是样式“用例。 * 提问：我们刚才的行内样式表可以让个别段落与众不同，但是有缺陷： 如果我们希望所有的段落都采用统一的样式呢？ 引导：在每个

标签后都加上相同的样式代码，太麻烦了。怎么办？ 很简单，把统一的样式放在

标签内，让本网页的所有段落

标签共享同一样式。 这就是我们要讲的内嵌样式表。 告诉学员： 1)选择器：表明此样式作用于哪个HTML标签。 2)样式规则之间用分号分割开 3)定好样式后，它将对本网页内所有的同类标签(如

)起作用。 演示：参考TG6-Source文件夹中的”什么是内嵌样式“用例。 * * 讲解要点： 1)先演示：参考TG6-Source文件夹中的”HTML选择器“用例。 2)指出： 品种特征－

下面的三段都是段落

， 3)提问：我们应该采用哪些标签的样式呢？ 4)回答：显然是

和

标签。 5)讲解关键代码