电子商务网页设计与制作 教案 第6次课 HTML基础（四）

湖南商务职业技术学院教案

1、先选人再抢答文字滚动的HTML元素是哪一个？

2、先选人再抢答实现一张名为tu.jpg的图片从下往上滚动的代码是什么？

3、先选人再抢答滚动文本移动时，当鼠标在文本上时，停止滚动；当鼠标从文字上移开时，继续滚动请将以上代码写出来拍照回复

4、先选人再抢答DIV与SPAN的区别是什么？

5、先选人再抢答在网页中插入一张名为cat.jpg的图片，并设置宽度为200像素，高度为150像素，图片的替换文本是“小猫，你好！请写出实现代码，拍照上传

6、先选人再抢答“鼠标经过图像”怎么实现？链接元素a超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分超级链接对话框各属性意义如下“文本对应a/a中的链接内容，在此输入链接显示文本“链接”对应href属性，在此输入本地链接目标地址或者网络地址“目标”对应target属性，在此输入目标框架名，也可以选择既有5个值之一，其中_blank表示在新窗口中打开被链接文档，用得最多默认值为_self表示在相同的框架中打开被链接文档.parent表示在父框架集中打开被链接文档_top在整个窗口中打开被链接文档new指定新的目标链接是否应该打开一个新窗口，或于一个现有的窗口打开新的选项卡注意_blank与news的区别在于target二new始终在同一个新窗口，targey_blank始终在不同的新窗口“标题”对应title属性，在此输入链接的标题，指鼠标移到链接上方时显示的文本在网页实际运用过程中，链接可以分为空链接、内部链接、外部链接、电子邮件链接、锚链接等形式空链接空链接指的是链接目标地址为“#，一般在设计师还没有确定链接目标时，可以使用空链接进行暂时替代内部链接知识检测10min授课章节及主题HTML基础

（四）课次6教学目标知识目标.掌握块级元素与内联元素的区别；.掌握滚动元素marquee、区块元素Div、图像元素img、文本区块元素span的使用；能力目标.能够进行简单的Html网页文档编辑；.能够制作滚动效果和图文内容；素养目标.培养学生清晰有序的逻辑思维；.培养学生数据分析与总结的意识；.培养学生系统分析与解决问题的能力学情分析知识基础学生已经具备了一定的计算机操作能力和Photoshop、Dreamweaver软件的基本操作技能，对网页设计有一些基本的了解，能够创建站点和网页文件，能进行简单的网页编辑学生特点.学生爱学习爱思考爱表达，喜欢动手实践，但学生自律性不强，遇到困难时畏难.软件课程知识绝大部分同学掌握较好，少部分同学操作不太熟练.解决复杂问题能力弱，缺乏知识迁移能力教学重点

1、链接元素a的各项属性

2、链接的各种类型教学难点内部链接、外部链接和锚记链接的创建教学方法讲授法案例演示法讨论法实践法线上线下混合式教学资源与平台教学平台超星学习通https:〃www.xueyinonline.com/detai1/221724252参考书.《电子商务网页设计与制作》，电子工业出版社.《HTML5+CSS3网页设计与制作》，人民邮电出版社参考网络资源.菜鸟教程https:〃www.runoob.com/.虎课网:https://huke

88.com/教学过程设计环节教学内容教师活动学生活动内部链接指的是链接目标地址为本地站点内的网页文件，每一个网站都有很多的内部链接，合理组织好内部链接能够给网站带来良好的访问感受•外部链接外部链接指的是链接目标地址为本站站点外的网页文件比如百度http://www.baidu.com等外部链接常见的方式是友情链接，可以点击相应链接进入其它网站地址以下代码为外部链接，点击“百度”文本会跳转到http://www.baidu.com页面ahref=http:〃www上aidu.comtitle=n百度”target=_blank”百度v/a注意href属性如果是外部链接，网址前面必须要增加“http://，不然访问不到目标地址•电子邮件链接电子邮件链接可以启动电子邮件程序书写邮件，并将其发送到指定地址以下代码为电子邮件链接效果，点击链接文本会启动电子邮件程序进行邮件的书写与发送ahref=nmailto:yx@

163.comnyx@

163.com/a另外一种方法，直接点击“插入”菜单中的“电子邮件链接”选项，在弹出的对话框中输入相应的参数值，也可以实现电子邮件链接效果•锚链接锚链接的目标地址是文档中的命名锚记，利用这种链接，可以跳转到当前文档或者其他文档的某一指定位置锚链接在很多长网页中经常使用，网页内容太多，要快速返回页面顶部，可以先在网页顶部放一个命名锚记，然后在需要返回的地方添加锚链接，就可以返回到页面顶部了.先选人再抢答链接元素是指哪一个？.先选人再抢答设置一个空链接的语句是什么？请拍照回复.先选人再抢答在一个新窗口中打开pagel.html网页的代码是什么？请拍照回复.先选人再抢答href属性的意思是什么？.先选人再抢答点击“商务职院”链接文字时，在一个新窗口中打开“湖南商务职业技术学院”网站的代码是什么？请拍照回复

1.【课堂活动】教师通过开展各种课堂活动检测本次课知识点

1.学生积极参与课堂活动.先选人再抢答锚记名称可以是中文？对还是错？.先选人再抢答:在网页中插入名为mytop的锚记，请写出代码，拍照回复.先选人再抢答当前网页中有名为mytop的锚记，如何跳转到此锚记？请写出代码，拍照上传.先选人再抢答若pagel.htmlm网页中有名为mytop的锚记，如何跳转到此锚记？请写出代码，拍照上传s技能训练技能训练（35m点HTMLM础

（四）练习请同学们完成以下练习第一步在电脑新建文件夹mySite在mySite中新建images与style两个子文件夹；第二步打开DW软件，新建站点，与mySite映射；第三步新建HTML文件，完成以下实例效果的实现代码效果L【发布任务】教师在学习通发布技能任务

2.【实践指导】L学生查看技能训练任务l|!D0CnPEhtalPUBLIC**//13C//DTDXHTML

1.0Transittonal//DT来回巡视，及时

2.完成技能in2\htclxsuns=http:vw.or11999xhtau3head4metahttp-eauiv=*Coatent-Type*conteat=*texthtml.char$et=utf-8*/5kHe倒接的分类ft/headj•body3pahref=*s*target=\blenk$ttSvoCp内IE链接ahref=*pagel.htrcl-target=*_blank*PACElaXptip外F链接iahr©f=*http wr.baidu.coa*target=°.b】ank百度aX，12电子视件链簌ahreOAiko yxCl

63.coc母我或！ap13P14pTOPaname飞opid=top*/a/p15ptnbsp;/p16pahrefJwtop〉女境Q/p17ptnbsp;Cp:PAGH外sea电电子就48M性■耳也国.！H汜MS:TOPtLi帮助学生解决问题训练题1B1/body19/ht«l第四步保存为html文件第五步通过不同浏览器查看第六步请同学完成以上练习题，提交I、截图dreamweaver软件中彳

2、截图网页在浏览器中的预

3、压缩mySite文件夹；将以上三个内容上传提交网页效果作业€码的“拆分视图”；在效果；课堂小结3min通过对本次课的学习，让学习者了解了HTML的各个常见元素HTML是网页设计的核心基础，请学习者真正理解每一个标签的含义与使用方法作业布置.继续完成技能训练任务，并提交至学习通.预学下一次课的内容教学反思。