《网页设计与制作案例教程（第2版） 》教案 第12课 网页列表与超链接（三）_第1页
《网页设计与制作案例教程（第2版） 》教案 第12课 网页列表与超链接（三）_第2页
《网页设计与制作案例教程（第2版） 》教案 第12课 网页列表与超链接（三）_第3页
《网页设计与制作案例教程（第2版） 》教案 第12课 网页列表与超链接（三）_第4页
《网页设计与制作案例教程（第2版） 》教案 第12课 网页列表与超链接（三）_第5页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

12第12第课网页文本、图像与多媒体（三）12（三12（三）网页文本、图像与多媒体第课PAGE4PAGE4PAGE5PAGE512第12第课网页文本、图像与多媒体（三） 课题网页列表与超链接(三）课时2课时（90min）教学目标知识技能目标：（1）掌握使用DreamweaverCC为网页添加导航栏的方法（2）能够制作简单纵向导航栏（3）能够制作简单横向导航栏（4）能够制作带下拉菜单的横向导航栏思政育人目标：（1）保持积极的学习态度，增强自身工作能力。（2）了解“绿水青山就是金山银山”的相关信息，增强热爱自然、保护自然的意识。教学重难点教学重点：使用DreamweaverCC为网页添加导航栏教学难点：制作带下拉菜单的横向导航栏教学方法情景模拟法、问答法、讨论法、练习法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：传授新知（23min）小组互助（15min）第2节课：

任务实施（25min）

实践探索（15min）

课堂小结（3min）

作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP，查阅资料，了解在DreamweaverCC中如何添加导航栏【学生】按照教师要求完成课前任务通过课前的预热，让学生了解所学软件，激发学生的学习欲望考勤

（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入

（10min）【教师】提出以下问题：在网页中超链接的种类有哪些？【学生】思考、举手发言横向导航栏，纵向导航栏，带有下拉菜单的导航栏。通过问题导入，引导学生思考，调动学生的主观能动性，了解本节课要学习的内容传授新知

（23min）【教师】通过学生的发言，引入新的知识点，介绍使用DreamweaverCC制作导航栏的步骤一、制作简单纵向导航栏纵向导航栏即导航链接垂直放置，相当于一个模块的侧边栏，通常是针对主体导航栏的二次细分。制作导航栏时，为了得到具有格式化的效果，通常需要改变元素的显示方式。这时，需为元素设置display属性，属性值none表示不显示该元素；inline是默认值，表示将该元素转换为行内元素；block表示将该元素转换为块级元素；inline-block表示将该元素转换为行内块元素，行内块元素即为可显示在一行内的块级元素。（详见教材）【教师】演示使用DreamweaverCC制作简单纵向导航栏的方法（1）在DreamweaverCC中创建一个名为“nav1.html”的网页文档，将其网页标题修改为“纵向导航栏”。（2）在<body>标签中添加一个<nav>标签，然后在其中添加一个<h1>标签，输入文本“快速访问”。在<h1>标签下方添加一个id属性值为nav_a的<div>标签，并在其中添加10个<a>标签。（3）打开“CSS设计器”面板，在“源”窗格中单击“添加CSS源”按钮，在展开的列表中选择“在页面中定义”选项，网页文档的<head>标签中生成<style>标签，在该标签中添加样式。（4）添加body选择器，设置页面的背景颜色为“#fffae8”。（5）添加nav选择器，设置导航栏的样式。（6）（7）添加nav_aa选择器，设置导航栏中超链接的样式。（8）添加nav_aa:last-child选择器，设置导航栏中最后一个超链接的样式。（详见教材）【学生】观察、记录、理解【课堂互动】教师提出以下问题：【学生】聆听、思考、举手回答【教师】对学生的回答进行总结二、制作简单横向导航栏横向导航栏的应用非常广泛，一般网页的页眉部分都会选择使用通版的横向导航栏，统领整个页面的效果【教师】演示使用DreamweaverCC制作简单横向导航栏的方法（1）在DreamweaverCC中创建一个名为“nav2.html”的网页文档，将其网页标题修改为“横向导航栏”。（2）签；接着在<div>标签中添加一个无序列表并添加7个列表项；最后为每一个列表项都添加一个<a>标签。（3）打开“CSS设计器”面板，在“源”窗格中单击“添加CSS源”按钮，在展开的列表中选择“在页面中定义”选项，网页文档的<head>标签中生成<style>标签，在该标签中添加样式。（4）添加nav选择器，设置导航栏整体的背景颜色为“#2F4F4F”。（5）加div选择器，设置导航栏容器元素的。（6）添加ul选择器，设置导航栏列表的的样式。（7）添加li选择器，设置导航栏列表项的。（8）添加li:hover选择器，设置鼠标移动至列表项上时的样式。（详见教材）【学生】观察、记录、理解三、制作带下拉菜单的横向导航栏对于内容较多的网页，一层导航栏无法将导航内容全部显示出来，这时一些网站会通过制作下拉菜单将导航栏进行折叠来节省空间，同时丰富导航栏的功能。【教师】演示使用DreamweaverCC制作带下拉菜单的横向导航栏的方法（1）在DreamweaverCC中创建一个名为“nav3.html”的网页文档，将其网页标题修改为“带下拉菜单的横向导航栏”。（2）在<body>标签中添加一个<nav>标签；然后在<nav>标签中添加一个class属性值为nav_t的<div>标签，并在该<div>标签中再添加一个class属性值为t_d的<div>标签；接着在第二个<div>标签中添加一个class属性值为til的<a>标签，并在<a>标签下方添加一个class属性值为down的<div>标签；最后在第三个<div>标签中添加5个<a>标签，表示下拉菜单的子选项。（3）参考本书配套素材“项目五”→“任务三”→“nav3F.html”文件，继续添加剩余的导航项目。（4）参考本书配套素材“项目五”→“任务三”→“nav3F.html”文件，继续添加剩余的导航项目。（5）打开“CSS设计器”面板，在“源”窗格中单击“添加CSS源”按钮，在展开的列表中选择“在页面中定义”选项，网页文档的<head>标签中生成<style>标签，在该标签中添加样式。（6）添加nav选择器，设置导航栏的背景颜色为“#E7E7E7”，如图5-45所示。（7）添加.nav_t选择器，设置导航栏容器元素的宽度为“550px”，外边距为“0auto”。（8）添加.t_d选择器，设置导航栏选项容器元素的显示方式为“inline-block”。（9）添加.til选择器，设置导航栏选项超链接的样式。（10）添加.til选择器，设置导航栏选项超链接的样式。（11）添加.downa选择器，设置导航栏子选项超链接的显示方式。（12）添加.downa:hover选择器，设置当鼠标指针移动至导航栏子选项超链接上时超链接的背景颜色为“#e7e7e7”。（13）添加.t_d:hover.til选择器，设置当鼠标指针移动至导航栏选项上时选项的样式。（详见教材）【学生】观察、记录、理解【学生】聆听、思考、记忆通过讲解，让学生了解如何使用DreamweaverCC添加导航栏小组互助（15min）【教师】组织学生以小组为单位根据教材“制作常见导航栏”部分的内容，保存网页，设置导航栏【学生】阅读、思考、上机操作，由组内最先完成操作的学生帮助其他学生完成操作【教师】进行巡视，解答学生的问题以学生为主体，针对学生接受能力的差异性，让优秀学生带动其他学生掌握知识点第二节课任务实施

（25min）【教师】演示使用DreamweaverCC在网页中添加列表与超链接，并对其进行分析（1）打开本书配套素材，将其中的“ilook.ste”站点附加到DreamweaverCC中。（2）打开index.html网页文档，将插入点置于<header>→<nav>标签中，添加一个无序列表，并为其添加9个列表项，每个列表项中再各添加一个超链接，分别输入导航内容。（3）在index.css文件中添加.nav-listli选择器，设置导航栏列表项的左外边距为“30px”，浮动为（向左浮动），字体粗细为“bold”，字号大小为“16px”；添加.nav-listli:hovera选择器，设置当鼠标指针移动至导航栏列表项上时超链接的文本颜色为“#FC2736”。（详见教材）【学生】观察、记录、理解，上机操作【教师】巡堂指导，及时解决学生的问题通过任务实施，让学生们主动参与学习，熟悉使用

DreamweaverCC在网页中添加列表和超链接，设置其样式的步骤实践探索

（15min）【教师】组织学生为“图书交易网”的主页制作导航栏【学生】参照任务实施的步骤上机操作【教师】巡堂指导，及时解决学生的问题学生通过实践探索，使学生进一步巩固所学知识，了解更多关于网页导航栏的知识课堂小结

（3min）【教师】简要总结本节课的要点本节课了解了导航栏的类型，并在实践中练习了如何添加导航栏。希望大家在课下多加练习，熟练掌握利用DreamweaverCC

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论