电子商务网页设计与制作 教案第5次课 HTML基础（三）.docx

《电子商务网页设计与制作 教案第5次课 HTML基础（三）.docx》由会员分享，可在线阅读，更多相关《电子商务网页设计与制作 教案第5次课 HTML基础（三）.docx（6页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、湖南商务职业技术学院教案授课章节及主题HTML基础（三）课次5教学 目标知识目标1 .掌握块级元素与内联元素的区别；2 .掌握滚动元素marquee、区块元素Div、图像元素img、文本区块元素span 的使用；能力目标1 .能够进行简单的Html网页文档编辑；2 .能够制作滚动效果和图文内容；素养目标1 .培养学生清晰有序的逻辑思维；2 .培养学生数据分析与总结的意识；3 .培养学生系统分析与解决问题的能力。学情 分析知识基础学生已经具备了一定的计算机操作能力和Photoshop、Dreamweaver软件 的基本操作技能，对网页设计有一些基本的了解，能够创建站点和网页文件， 能进行简单的网

2、页编辑。学生特点1 .学生爱学习爱思考爱表达，喜欢动手实践，但学生自律性不强，遇到困难时 畏难。2 .软件课程知识绝大部分同学掌握较好，少部分同学操作不太熟练。3 .解决复杂问题能力弱，缺乏知识迁移能力。教学 重点1、滚动元素2、区块元素div3、文本区块元素span教学 难点Div元素与span元素的区别教学 方法讲授法案例演示法讨论法实践法线上线下混合式教学资 源与平 台教学平台超星学习通 https:www. xueyinonline. com/detai 1/221724252参考书1 .电子商务网页设计与制作，电子工业出版社2 .HTML5+CSS3网页设计与制作，人民邮电出版社参考

3、网络 资源1 .菜鸟教程：https :www. runoob. com/2 .虎课网:https: /huke88. com/教学过程设计环节教学内容教师活动学生活动1、选人回答：请问图中代码的预览效果会是什么样知识 回顾 (15m in)的？请大家写在纸上，拍照，进行回复。（知识回顾1）llll2222l2、选人回答：请问图中代码的预览效果会是什么样 的？请大家写在纸上，拍照，进行回复。（知识回顾2）2223334443、选人回答：下图调查表中性别选项出现了男和女都 可以选择的现象，分析什么原因，怎么解决这个问题？(知 识回顾3)用户注册姓名 密码学历：备注:画。男。女|S5LD知识 准备

4、 (30m in)1、常见的块级元素(1)滚动元素marqueeMarquee标签的基本语法如下：marquee滚动的文本或者图像/marqueeMarquee中可以添加以下属性：onmouseover= th i s. stop () ”：用来设置鼠标移入该区域 时停止滚动。onmouseout= uthi s. start () 用来设置鼠标移出该区域1.【课堂活动】教 师通过开展各种 课堂活动回顾上 次课知识点。1.学生积极 参与课堂活 动。1 .【知识讲授】 教师讲解常见的 Html元素相关 知识点。2 .【实例演示】 教师演示各个元 素的代码编写。3 .【课堂讨论】1 .听取教师 讲

5、解知识 占-八、92 .积极参与 课堂活动。网页当中插入一 条红色的宽度为 100px ,高度为 10像素的水平 线，将代码写在 纸上拍照回复。3.【课堂讨论工 站点根目录(E:mysite)中 有一张图片(tp. jpg),现在 要将这个图片插 入到网页中并将 它滚动起来，请 同学写出代码拍 照回复。时继续滚动。a I ign=left (center | r ight | top | bottom:用来设置滚动内 容的对齐方式。d i rect i on=left | r i ght | up | down:设置滚动内容的滚动方 向.behav i or=a I ternate | scr

6、o I I | s I i de:设置滚动的方式, alternate表示在两端之间来回滚动，scrol I表示由一端 滚动到另一端，会重复，si ide表示由一端滚动到另一 端，不会重复。bgcolor设置活动字幕的背景颜色，背景颜色可用RGB、16进制值的格式或颜色名称来设置。height = n :设置滚动区域的高度。hspace = n:设置活滚动区域所在位置距离父容器水平边 框的距离。scrol I amount=n:设置滚动内容的滚动速度，单位为 pixels (像素)。scrol Idelay=n:设置滚动内容滚动两次之间的延迟时 间，单位mi I I i second (毫秒)

7、。width5：设置滚动区域的宽度。vSpace=n:设置活滚动区域所在位置距离父容器垂直边框 的距离。loop = n:设置滚动的次数，当loop=7表示一直滚动下 去，默认为7。只要在marquee标签之间添加要进行滚动的文字或者图像 即可。而且可以在标签之间设置这些文字的字体、颜色 等。例如：我是滚动文本! marquee onmouseover二this, stop ()z， onmouseout=/，this. start ()/marquee注意：marquee标签不是HTML3. 2的一部分，并且只支持 MSIE3以后内核，所以如果使用非IE内核浏览器(如 Netscape)可能

8、无法看到效果。(2)水平线元素hr水平线标记，用于在页面中插入一条水平标尺线，使页 面看起来整齐明了。基本语法：标签定义HTML文档中的一个分隔区块或者一 个区域部分。常用于组合块级元素，以便通过CSS来对这 些元素进行格式化。注意：元素经常与CSS 一起使用，用来布局网 页，我们会在后面的任务中经常使用到。2、常见的HTML内联元素内联元素又称之为行内元素，即一个挨着一个，都在同 一行按从左至右的顺序显示，不单独占一行。常见的内联元素有链接元素a、图像元素img、强调元 素em、文本内区块元素span、与换行元素br等。(1)图像元素imgimg元素在网页中嵌入一幅图像。从技术上讲，vimg

9、 标签并不会在网页中插入图像，而是从网页上链接图像。 vimg标签创建的是被引用图像的占位空间。vimg标签有两个必需的属性：src属性和alt属性。 其中alt属性规定图像的替代文本，src属性规定显示图像 的地址。img标签的基本语法如下：vimg src=图像文件的地址” Ht二“替换的文本” / (2)文本内区块元素spanspan标签被用来组合文档中的内联元素，以便通过 样式来格式化它们。span标签没有固定的格式表现。当对 它应用样式时，它才会产生视觉上的变化。HTML5. (K/span的应用将会越来越多！ 如果不对span应用样式，那么span元素中的文本 与其他文本不会任何视

10、觉上的差异。尽管如此，上例中的 span元素仍然为p元素增加了额外的结构。可以为span应用id或class属性,这样既可以增 加适当的语义，又便于对span应用样式。class与id 属性两者的主要差异是，class用于多个元素，而id用 于标识单独的唯一的元素，在第二单元任务1CSS选择符中 我们会重点讲解。注意：Div元素与span元素的区别如下：div是一个块级元 素，可以包含段落、标题、表格，乃至诸如章节、摘要和备 注等。而span是内联元素，span的前后是不会换行的，它 没有结构的意义，纯粹是应用样式，当其他内联元素都不合 适时，可以使用span。块级元素相当于内联元素在前后各加

11、一个换行。其实， 块级元素和内联元素也不是一成不变的，只要给块级元素 定义display: inline,块级元素就成了内联元素,同样地, 给内联元素定义了 display:block就成了块级元素了。知识 检测（10m in）1、投票：设置水平线高度的属性是（）A height B size C width2、选人回答：请问图中代码的预览效果会是什么样的？请 大家写在纸上，拍照，进行回复。（知识检测2图片）内容内容 2P3:3P3 W43、我们在编辑网页时，如果插入了一张站点以外的图片， 这是会弹出如下图的提示，我们应该选择是还是否呢？，如 果选择否，会发生什么情况呢？（知识检测3图片）Dr

12、eamweaverX文件位于站点web的根文件夹以外 当您发布站点时可能不能访问。您的根文件夹是：G:mysiteX您愿意将该文件复制到根文件夹中吗？技能 训练 （30m in）技能训练四点HTML基础（三）练习请同学们完成以下练习：第一步：在电脑新建文件夹mySite,在my Site中新建 images与style两个子文件夹；第二步：打开DW软件，新建站点，与mySite映射；L【发布任务】 教师在学习通发 布技能任务。2.【实践指导】 来回巡视，及时 帮助学生解决问 题。1 .学生查看 技能训练任 务。2 .完成技能 训练题。第三步：新建HTML文件，完成以下实例效果的实现:(1 )滚

13、动元素marquee的实例2 国二酗 IMB。启也10!DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitlonal/EN*atitle)滚动元 Itnarquee 的实例“title. 曰 宋代朱胜日寻芳U,无力光景一“新等网识号东风面.万鬟千红总是春：宋代聚黑胜日尊芳槌.无边光盘一酊喊.郭闰识御与又面.万家干红里是春.(2) HTML水平线hr、区块元素div与span实例1、区块亓素div我是一个DtvE块， 我也CTDivZ坟2、区块元烹span&是一个埃场元素.可以包含段落、标裳、袅格.乃至it扣， 节.梅曼和备(135.而“是门U元索.”

14、的前后是不会建行 的.它也有培帕01意义,吨转是应用W式.当X也内联元会都 不合诙时,11以使用”.3、水平线元素hrKTML水平线hr、区块元索dv与3时lw 区块元索divdiv”我是一个DIV区块！ 我也是一个DIV区块！ 2,区块元lt，pandiv是一个块级元素,可以包含段落.标息,表格.乃至得力节.将要和善注等而span是内联元素. span的前后是不会操行的.它设有诂构的意义，纯 粹是它用棒式.当其他内联元索馆不合适时.可以使用，pan. 3w水平线元素hr(3)找两张图片，试试“鼠标经过图像”效果。(插入-图像二鼠标经过图像)。第四步：保存为html文件，分成1个文件或者3个文 件保存皆可。第五步：通过不同浏览器查看网页效果。第六步：请同学完成以上练习题，提交作业：1、截图dreamweaver软件中代码的“拆分视图”；2、截图网页在浏览器中的预览效果；3、压缩mySite文件夹；将以上三个内容上传提交。课堂 小结 (3mi n)通过对本次课的学习，让学习者了解了 HTML的各个常见元素。HTML是网页设计的核心 基础，请学习者真正理解每一个标签的含义与使用方法。作业布置1 ,继续完成技能训练任务，并提交至学习通2.预学下一次课的内容教学 反思