《网页设计与制作项目教程（HTML+CSS+Bootstrap）》 项目二教案3.docVIP

课题序号 6 教学班级 教学课时 2 教学形式 新授 课 题 名 称 项目二 创建《太湖美》网站 任务三 编辑代码、丰富页面 使用教具 机房 教学目的 熟记html中常用的标签及属性 熟练编辑代码 能灵活设计和编辑简单的页面 教学重点 熟练编辑代码 能灵活设计和编辑简单的页面 教学难点 能灵活设计和编辑简单的页面 更新、补充、 删节内容 课前准备 教案 课外作业 板 书 设 计 教 学 感 想 课堂教学安排 教学环节 主 要 教 学 内 容 教学手段与方式 导入 新授 讲授 案例介绍 任务实施 操作演示 评价 作业 拓展 在了解HTML的基本概念、基本格式的基础上，进一步编辑代码，美化和丰富页面。 1．制作导航栏； 2．丰富网站内容； 3．实现超链接； 知识准备一 HTML的常用标签介绍 1．超链接标签a a 标签定义超链接，用于从一张页面链接到另一张页面。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。 a 元素最重要的属性是 href 属性，它指示链接的目标。 例： a href=url链接文本/a a href=/访问新浪网/a a href=mailto:hzhang@163.com指向E-mail地址的超级链接/a a href=#设置空链接/a 在所有浏览器中，链接的默认外观是： 未被访问的链接带有下划线而且是蓝色的 已被访问的链接带有下划线而且是紫色的 活动链接带有下划线而且是红色的 小贴士：被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）。在W3C的推荐标准中，建议使用 CSS 来设置链接的样式。 2. 样式标签style style 标签用于为 HTML 文档定义样式信息。在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。type 属性是必需的，定义 style 元素的内容。唯一可能的值是 text/css。style 元素位于 head 部分中。 3．音频标签audio audio 标签定义声音，比如音乐或其他音频流。audio 标签定义声音，比如音乐或其他音频流。可以在开始标签和结束标签之间放置文本内容，这样不支持的浏览器就可以显示出不支持该标签的信息。实例效果如图2.2.3所示： 例：audio src= ../others/tailake.mp3 autoplay controls loop你的浏览器不支持audio标签/audio 任务一：制作导航栏 1．以“记事本方式”打开index.html，为网页设置导航栏，代码如下，在记事本代码输入的位置的如图2.2.4所示： p style=text-align:center 历史背景nbsp;nbsp;nbsp;nbsp;歌词介绍nbsp;nbsp;nbsp;nbsp;社会影响/p 任务二：丰富网站内容 1.在files文件夹中新建记事本文件，文件名设为gc.html，制作网站的“歌词介绍”分页。 2．在gc.html文件上单击右键，以记事本方式打开，编辑代码，设置网页的标题为“歌词介绍”，网页背景图片bg.jpg。 html head title歌词介绍/title /head body style=background:url(../images/bg.jpg) /body /html 3．添加标题文本“太湖美歌词”，以及与index.html中相同的导航栏，并设置标题文本的样式，代码如下所示： p style=text-align:center;color: #FFFFFF;font-size: 24px;font-family: 黑体;太湖美歌词/p p style=text-align:center 历史背景nbsp;nbsp;nbsp;nbsp;歌词介绍nbsp;nbsp;nbsp;nbsp;社会影响 /p 4．保存记事本文件，在浏览器中预览网页gc.html 5．添加“歌词”，并使正文文字在网页中居中显示。代码如下： p style=text-align:center;font-family:仿宋; font-size: 16px; line-height:180% strong 太湖美啊太湖美br/ 美就美在太湖水br/ 水上有白帆哪br/ 水下有红菱哪br/ 水边芦苇青br/ 水底鱼虾肥br/ 湖水织出灌溉网br/ 稻香果香绕湖飞br/ 哎咳唷br/ 太湖美呀太湖美br/ 太湖美呀太湖美br/ 美就美在太湖水br/ 红旗映绿波哪br/ 啊春风湖面吹哪br/ 啊水是丰收酒br/ 湖是碧玉杯br/ 装满深情盛满爱br/ 捧给祖国报春晖br