HTML教程..pptVIP

* 讲解要点： 1）DIV也称为层标签，表示一层区域。语法为： DIV id=“层编号” style=“postion:…指定层所在的位置…；z-index=n (指定在Z轴方向的编号)” ….包含的内容 /DIV 2）DIV是容器标签，它可以包括（容纳）段落P、标题H1、图片IMG、文字等内容，如图所示。 所以还称为块级容器标签。 3)告诉学员，层的位置了解，因为实际设计页面时需要DreamWeaver插入层(可演示如何插入)，强调z-index的含义 * 讲解要点： 1）SPAN是一个行内元素，它不能包含段落、标题、表格等，显示时也不会引起换行。 最常见的使用方式是嵌入在某个标签中，突出显示某部分文本，甚至某个字符。 例如，文本内容“H2所有韩款童装10元/件起拍H2”中， 我们希望突出显示客户关心的价格数字“10”，就可以H2标签中插入SPAN，单独修饰”10”。 2）告诉学员：关于SPAN的样式只需了解，一般也通过DreamWeaver来辅助设计。 * * 课堂练习HTML代码: 1.抽选1位学员在白板上书写HTML代码,其他学员在练习本上练习. 2.巡视学员完成进度 3.集中评讲,给予学员鼓励 4.注意掌握时间. 参见：TG5-Source文件夹中的“表格课堂练习”用例。 * 提问： 1.我们前面学习过表单，请问表单有什么用途？ 引导回答： 1)在用户注册某种服务或活动时收集姓名、地址、电话号码、电子邮件地址和其他信息 2)在用户购买商品时收集信息 3)收集关于网站的反馈信息 2.表单使用哪个标签？有哪些属性？ 引导：学员可能回答不全，引出表单的属性讲解。 * * * * * * 提问：根据上述效果图，先抽选一名学员在白板上画出在网页中的显示效果， 其余学员在纸上上书写答案。教员巡视学员基本做完 ，集中评讲 ，给出如图所示的效果图。给予学员鼓励。 参见：TG5-Source文件夹中的“代码阅读”用例 * * 课堂练习HTML代码: 1.抽选1位学员在白板上书写HTML代码,其他学员在练习本上练习. 2.巡视学员完成进度 3.集中评讲,给予学员鼓励 4.注意掌握时间. 参见：TG5-Source文件夹中的“表单课堂练习”用例。 * 提问学员: 买钻石送给女朋友的,到这里来.哈哈.引出框架网页. 演示：框架，参见：TG5-Source文件夹中的“框架” 用例。 讲解要点: 1)上方:顶部框架,一般用于广告 2)左侧框架,一般用于导航链接 3)右侧框架,一般用于显示详细内容 4)点击左侧链接时,一般在右侧框架显示对应的链接内容. 5)每个窗口都对应一张网页. 请问,采用框架结构有什么好处? 引导回答: 1）一个浏览器窗口分为多个独立的区域,内容组织有条理. 2）告诉学员，遗憾的是，不是所有的浏览器都支持框架，并且，如果浏览器窗口被划分为过多的子窗口，会影响网页的整体美观 ，网页设计者常常用表格布局来代替它， 所以我们只需要了解。 * * * * * 讲解要点： 引入话题：如果一个城市的天气气候每天一成不变，都是夏天或冬天，这样好吗？ 引导：学生可能会说四季如春，当然好啊，引导：天气气候应该动态变化，“四季分明”， 这才适合自然界生物的生长，我们的网页也是如此，样式不能一成不变，应给人一种鲜活的动态感受，吸引浏览者。 1.使用DHTML的目的是实现动态网页，使网页产生一些动态效果， 演示动态效果：参见TG6-Source文件夹中“超链接变色”和“超链接背景切换” 用例 1）超链接变色：鼠标移过去超链接会变色。 2 )超链接背景切换：上机我们将做此练习，鼠标移过去，背景切换。 2.DHTML包括三部分内容： HTML、层叠样式表、脚本语言 * 后面一页幻灯片演示效果 * 还可以演示：动态脚本效果，参见参见TG6-Source文件夹中“动态脚本” 用例 告诉学员：这就是依靠JavaScript实现的动态效果， JavaScript 我们后面会讲解。 * 提问：我们以前学习的P标段落标签显示时是什么颜色？ 回答：毫无疑问，黑色。 告诉学员： 1）如果把网页内容比喻为一个女孩的话，样式就好比这位女孩穿的衣服。 女孩喜欢用漂亮的衣装来打扮自己，同样，我们的网页也需要华丽的样式来包装。 2）PH1等标签都是默认为黑色白底，如果希望改变这些默认效果，就必须自定义新的样式。 演示：参考TG6-Source文件夹中的”什么是样式“用例。 * 重点提一下：文本属性、边框属性（后面的幻灯片讲”细边框样式时“会用到）。 * * 讲解要点： 1）强调什么场合用：希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。 2）强调如何用：在HTML标签后面直接加上 ”styl