《Web前端开发》教学讲义 Web前端设计基础 项目一-2.docxVIP

教学课题 项目1 HTML文档结构—1.3项目实施、1.4项目拓展 授课班级 授课时间 教学目标 知识目标 1.了解HTML 5结构中head标签部分代码的应用； 2.了解和掌握使用CSS代码对文本和图片进行格式设置； 3.制作出简单的HTML 5网页。 能力目标 1.培养学生自主学习、分析问题和解决问题的能力； 2.培养学生熟练运用所学知识的能力。 德育目标 1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质； 2.培养学生的团队合作精神。 学情分析 学生已经通过上节课的学习，了解和掌握了HTML基本概念、编写方法及浏览HTML文件的方法，已经初步了解HTML。 本节课是对上面所学知识的巩固和实际应用，通过项目实施和项目拓展制作标准的和简单的HTML5网页以及运用简单的CSS代码对文本和图片进行格式设置。 教学重点 1.Sublime编辑器的使用； 2.掌握制作HTML 5网页的基本步骤； 3.掌握使用CSS代码对文本和图片进行格式设置。 教学难点 1.Sublime编辑器的使用技巧； 2.使用CSS代码对文本和图片进行格式设置。 教学方法 项目教学法、多媒体辅助教学法、讲练结合法 教学过程 教学环节 教学内容 师生活动 新课导入 给学生展示标准的和简单的HTML5网页页面，以及运用简单的CSS代码对文本和图片进行格式设置后的网页页面，以此导入本节课的操作内容。 教师提出问题，学生可分组讨论，协作探究。 技能学习 一、标准的HTML 5网页 Step01 启动Sublime程序，执行“文件”菜单中的“新建”命令或使用Ctrl + N组合键新建一个文件，执行“文件”菜单中的“保存”命令或使用Ctrl + S组合键保存文件名称为1-3.html。 Step02 输入“!”，按【TAB】键就会按照HTML 5规范自动创建如下代码。 !DOCTYPE html html lang=en head meta charset=UTF-8 titleDocument/title /head body /body /html Step03 修改title网页标题、meta元信息和注释内容，并在网页的主体中添加内容，代码如下： !DOCTYPE html html lang=en head meta charset=UTF-8 !--设置浏览器的阅读编码-- titleWeb前端设计/title !--设置网站首页的标题-- meta name=keywords content=Web前端设计,前端设计,Web设计 !--设置网站的关键字-- meta name=description content=Web前端设计，和有梦想的人一起学习HTML5、CSS3和JavaScript技术。 !--网站描述-- /head body h3Web前端设计特点/h3 p Web前端设计，紧跟时代步伐br Web前端设计，源自企业需求br Web前端设计项目驱动教学，所需即所学，所学即所用。br /p /body /html Step04 再次执行“文件”菜单中的“保存”命令或使用快捷键Ctrl + S保存文件。 Step05 在页面中右击，从弹出的快捷菜单中选择“在浏览器中打开”命令，效果如图所示。 二、简单的HTML 5网页 Step01 用Sublime编辑器创建一个文件，保存名称为1-4.html。 Step02 输入“!”，按【TAB】键就会按照HTML 5规范自动创建代码，修改网页标题，输入主体内容，代码如下： 1 !DOCTYPE html 2 html lang=en 3 head 4 meta charset=UTF-8 5 title简单的HTML 5网页/title 6 /head 7 body 8 h2悯农二首/h2 9 h4唐代：李绅/h4 10 p 11 春种一粒粟，秋收万颗子。br 12 四海无闲田，农夫犹饿死。br 13 /p 14 p 15 锄禾日当午，汗滴禾下土。br 16 谁知盘中餐，粒粒皆辛苦？br 17 /p 18 img src=images/minnong.jpg alt= 19 /body 20 /html Step03 保存网页，在chrome浏览器预览，效果如图所示。 三、 项目拓展 Step01 分析需求 首先要对左边的文字进行大小、颜色的设置，右边图片大小的设置，然后让右边的图片和左边的文字并排显示在一行。 Step02 用Sublime编辑器创建一个文件，保存名称为1-5.html，输入“！”按Tab健，修改title标签内容为“