网页设计电子教案2.docVIP

《网页设计与制作》课程教案 情境一 用html语言进行基本网页制作 课时 12 任务2 林书豪个人网页制作 课时 4 教学目标 知识目标 熟悉图像标记img的基本语法、掌握超链接标记a…/a 能力目标 能在网页中正确插入图像，会制作各种形式的超链接 素质目标 耐心细致的工作态度，严谨认真的工作作风 教学重点 图像标记img、超链接标记a…/a 教学难点 锚点标记链接的实现 教学手段 凌波多媒体教学，网络教学手段 教学方法 讲授法、案例教学、演示法、任务驱动、讲练结合 教 学 基 本 内 容 教学实施 一、复习上节课的主要内容（10分钟） 1.xhtml的基本规范 2.html文档的基本结构 二、讲授新课(80分钟) （一）html标记 1.html特定文字样式标记（5分钟） b…/b、i…/i、u…/u等 2. html特殊字符实体(5分钟) 屏幕显示符号 字符实体代码 屏幕显示符号 字符实体代码 lt; quot; gt; ’ apos; amp; 空格 nbsp; 3.标记div…/div和span…/span(5分钟) 4.meta标记(5分钟) 5．图像标记img /（10分钟） (此处需要注意图片的路径一定要准确，所插入的图片一定要位于站点文件夹内，为了养成良好的习惯，建议在站点文件夹下建立images文件夹，用于保存网站用到的 图片；另外。网页制作中的常用图片有三种格式：jpg、gif、png，三种图片的特点要了解) 教师首先进行上节课的内容回顾，此时通过提问学生来检查了解学生知识的掌握情况。 第二部分主要由老师来讲解各个标记的作用并演示，使学生感觉直观和形象，便于学生接受。 教学方法：教学过程中采用讲授法、演示法教学手段：利用凌波多媒体软件播放PPT。 教 学 基 本 内 容 教学实施 6.超链接标记（重点掌握）（25分钟） a…/a,网页的灵魂，通过在文本、图像、flash等网页元素上设置超级链接实现页面内、页面间的跳转以及资源的访问。 a href=/?target=_blank title=nokia诺基亚官方网站/a Href：链接所指的url地址，可以使用绝对路径和相对路径 Target：指定打开链接的目标窗口，取值_parent（在父窗口中打开）、_blank（在新窗口打开）、_self（在原窗口中打开，默认值）、_top（在浏览器的整个窗口中打开） Name：用于创建锚点，指定锚点名称 Title：指定指向链接时所提示的文字 内部链接：　a href=news/index.html主页/a 外部链接：　a href= /index.html?网易163/a 锚记链接，用于页面内跳转： 　　　a name=锚记名称 /a 　　　a href =#锚记名称链接文字/a 邮件链接： 　a href= mailto: webmaster@163.com 联系我们/a 设为首页的超链接（在JavaScript处讲） 加入收藏的超链接（在JavaScript处讲） 7、列表标记（20分钟） 列表标记可以将网页中相关的信息有条不紊地组织起来。作为块级元素，在DIV+CSS的网页设计中列表标记的使用非常普遍。 无序（项目）列表标记ul…/ul、li…/li 有序（编号）列表标记ol…/ol 定义列表标记dl…/dl、dt…/dt、dd…/dd 8. 文档类型（2分钟） 当我们用Dreamweaver新建一html文档时，查看源代码，会发现代码最上部有如下这句话： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd这句话标明本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，因为浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHTML的语法。许多在制作页面时，往往喜欢把这句删除掉，在这里建议大家一定要保留这句话，删除它后可能引起某些样式表失效或其它意想不到的问题。 语言编码接下来我们还会发现这样一句话： meta http-equiv=Content-Type content=text/html; charset=gb2312 / 它标示文档的语言编码。这里的gb2312告诉浏览器，本文档采用简体中文编码；还有一种常用的编码是编码，它是国际通用的编码。不管我们采用哪种编码，有一点就是包含的css样式表和其它文件也必须和本文档的编码一样，不就会出现乱码。”的制作（50分钟） 1.教师展示林书豪个人网页，演示其中的超链接功能，将制作过程中用到的素材及指导书传