HTML网页制作方法.ppt

下载文档 降价啦

14
0
约2.92万字
约 77页
2019-08-11 发布于山东
举报
版权申诉
保障服务

HTML网页制作方法.ppt

1、本文档共77页，可阅读全部内容。
2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击这里二次下载。
4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。

* 提问：根据上述效果图，先抽选一名学员在白板上画出在网页中的显示效果，其余学员在纸上上书写答案。教员巡视学员基本做完，集中评讲，给出如图所示的效果图。给予学员鼓励。参见：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）<P><H1>等标签都是默认为黑色白底，如果希望改变这些默认效果，就必须自定义新的样式。演示：参考TG6-Source文件夹中的”什么是样式“用例。 * 重点提一下：文本属性、边框属性（后面的幻灯片讲”细边框样式时“会用到）。 * * 讲解要点： 1）强调什么场合用：希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。 2）强调如何用：在HTML标签后面直接加上 ”style“属性即可，除了<P>以外，其他标签用法也是如此。演示：参考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）实现如图所示的细边框效果，我们想想能不能用HTML选择器。文本框和密码框对应的标签都是<INPUT>标签。 2）引导：确实是可以的，但是我们的按钮对应的HTML标签也是<INPUT>，这样按钮也会变成细边框了，所以不行，怎么办，采用类样式，引出类样式。 3) 提问：哪我们一起看看，应该涉及到哪些样式呢？ 4）引导：前面我们讲过的边框样式，边框颜色，字体的颜色就可以了，然后给出源代码。讲解要点： 1）类选择器的定义格式，border: 1px solid; 表示边框