您所在位置网站首页 > 海量文档  > 艺术时尚 > 设计素材

HTML网页制作方法.ppt 77页

本文档一共被下载: ,您可全文免费在线阅读后下载本文档。

  • 支付并下载
  • 收藏该文档
  • 百度一下本文档
  • 修改文档简介
全屏预览

下载提示

1.本站不保证该用户上传的文档完整性,不预览、不比对内容而直接下载产生的反悔问题本站不予受理。
2.该文档所得收入(下载+内容+预览三)归上传者、原创者。
3.登录后可充值,立即自动返金币,充值渠道很便利
* 提问:根据上述效果图,先抽选一名学员在白板上画出在网页中的显示效果, 其余学员在纸上上书写答案。教员巡视学员基本做完 ,集中评讲 ,给出如图所示的效果图。给予学员鼓励。 参见: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; 表示边框

发表评论

请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片

“原创力文档”前称为“文档投稿赚钱网”,本站为“文档C2C交易模式”,即用户上传的文档直接卖给(下载)用户,本站只是中间服务平台,本站所有文档下载所得的收益归上传人(含作者)所有【成交的100%(原创)】。原创力文档是网络服务平台方,若您的权利被侵害,侵权客服QQ:3005833200 电话:19940600175 欢迎举报,上传者QQ群:784321556