项目2 “博客”页面制作_第1页
项目2 “博客”页面制作_第2页
项目2 “博客”页面制作_第3页
项目2 “博客”页面制作_第4页
项目2 “博客”页面制作_第5页
已阅读5页，还剩5页未读， 继续免费阅读

下载本文档

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

文档简介

1、黑马程序员网页设计与制作项目教程（HTML+CSS+JavaScript）（第2版）教学设计课程名称： 网页设计与制作项目教程（HTML+CSS+JavaScript）（第2版）授课年级： XXXX年级 授课学期： 第X学期 教师姓名： 某某老师 2020年12月课题名称项目二 “博客”页面制作计划课时6课时教学引入博客也被称为网络日记，是一种深受欢迎的网络交流方式。在博客中，博主（博客账号的拥有者）可以记录技术感悟、旅游随笔、心情写照等。随着互联网用户的激增，博客已经成为一种全新的生活、工作、学习的方式。最近热爱旅游的小思想要制作一个关于旅游的个人博客页面，来分享一些旅游心情随笔。由于之前没

2、有接触过网页制作，小思决定先从HMTL语法、基本格式、基础标签学起，等夯实基础之后，再着手“博客”页面的制作。教学目标l 知识目标使学生掌握HTML文档基本格式，对HTML文档格式有一个基本的认识。使学生了解HTML文档头部相关标签，知道一些常用头部标签的作用。l 技能目标使学生掌握图像标签的用法，能够制作图文混排页面。使学生掌握网页中文本的字体、字号和颜色的设置方法。教学重点l HTML标签的属性l 页面格式化标签l <div>标签l 图像标签l 绝对路径和相对路径l 【项目实现】制作“头部”模块l 【项目实现】制作“博主简介”模块l 【项目实现】制作“旅游随笔”模块l 【项目实

3、现】制作“驴友评论”模块l 【项目实现】制作“页脚”模块教学难点l 绝对路径和相路径教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程第一、二课时（HTML文档基本格式、HTML标签、HTML标签的属性、HTML标签的关系、HTML文档头部相关标签、页面格式化标签、文本样式标签、文本格式化标签、特殊字符标签、<div>标签、常用图像格式、图像标签、相对路径和绝对路径、切图）一、复习巩固 教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课HTML作为一门标签语言，主要用来描述网页中的文字、图像等信息。网页中所有的结构搭建都

4、是通过HTML标签来完成的。因此我们想要制作网页，首先要认识HTML。本节将对HTML文档基本格式、HTML标签等知识进行讲解，使大家进一步认识HTML。三、新课讲解 知识点1-HTML文档基本格式教师通过展示PPT中的图片，讲解HTML文档基本格式。（1） 教师讲解HTML文档基本格式l <!DOCTYPE>文档类型声明l <html>根标签l <head>头部标签l <body>主体标签。（2） 教师讲解简化后的HTML5文档基本格式。 知识点2-HTML标签教师通过展示PPT讲解HTML标签。（1） 双标签：由开始和结束两个标签符号组成的标

5、签。（2） 单标签：用一个标签符号即可完整的描述某个功能的标签。 知识点3-HTML标签的属性教师通过展示PPT讲解HTML标签的属性。（1） HTML标签属性的作用：为HTML标签设置属性的方式可以增加更多的显示样式。（2） HTML标签添加属性的基本语法格式：<标签名 属性1="属性值1" 属性2="属性值2" >内容</标签名>知识点4-HTML标签的关系教师通过PPT讲解HTML标签的关系。（1） 嵌套关系：一个双标签里面有包含了其他的标签。（2） 并列关系：两个标签处于同一级别，并且没有包含关系。知识点5-HTML文档头

6、部相关标签教师通过PPT讲解HTML文档头部相关标签。（1） <title>标签：用于设置HTML页面的标题。（2） <meta />标签：用于定义页面的元信息。知识点6-页面格式化标签教师通过PPT讲解页面格式化标签。（1） 标题标签l 基本语法格式：<hn align="对齐方式">标题文本</hn>l align属性的取值：left、center、right。l 使用标题标签的注意事项（2） 段落标签基本语法格式：<p align="对齐方式">段落文本</p>（3） 水平线标

7、签l 基本语法格式：<hr 属性="属性值" />l <hr />标签的常用属性：align、size、color、width（4） 换行标签l 换行标签“<br />”可以使文本内容强制换行显示。l 使用换行标签的注意事项。知识点7-文本样式标签教师通过PPT讲解文本样式标签。（1） 基本语法格式：<font 属性="属性值">文本内容</font> （2） 常用属性：face、size、color。（3） 使用<font>标签的注意事项知识点8-文本格式化标签教师通过PPT讲解常

8、见的文本格式化标签。（1） <b></b>和<strong></strong>（2） <i></i>和<em></em>（3） <s></s>和<del></del>（4） <u></u>和<ins></ins>知识点9-特殊字符标签教师通过PPT讲解特殊字符标签。特殊字符描述字符的代码空格符&nbsp;<小于号&lt;>大于号&gt;&和号&amp;￥

9、人民币&yen;©版权&copy;®注册商标&reg;°摄氏度&deg;±正负号&plusmn;×乘号&times;÷除号&divide;²平方2（上标2）&sup2;³立方3（上标3）&sup3;教师在讲解时，讲解不推荐空格符“&nbsp;”的原因。知识点10-<div>标签教师通过PPT讲解<div>标签。<div>标签可以简单理解成一个容器，可以容纳网页中的文本模块、图像模块，从而实现网页的规划

10、和布局。知识点11-常用图像格式教师通过PPT讲解网页中常用的图像格式。（1） GIF格式：支持动画。（2） PNG格式：体积更小，支持alpha透明。（3） JPEG格式：颜色多。知识点12-图像标签教师通过PPT讲解图像标签。（1） 图像标签的基本语法格式：<img src="图像URL" />（2） 图像标签的属性：l src：指定图像的路径。l alt：图像不能显示时的替换文本。l title：鼠标悬停时显示的内容。l width：设置图像的宽度。l height：设置图像的高度。l border：设置图像边框的宽度。l vspace：设置图像顶部和底部

11、的空白（垂直边距）。l hspace：设置图像左侧和右侧的空白（水平边距）。l align：将图像对齐到左边。知识点13-绝对路径和相对路径教师通过PPT讲解绝对路径和相对路径。（1） 绝对路径：绝对路径就是网页上的文档或目录在盘符（即C盘、D盘等）中的真正路径。（2） 相对路径：相对路径就是相对于当前文档的路径，相对路径没有盘符，通常是以HTML网页文档为起点，通过层级关系描述目标图像的位置。设置方法如下：l 图像和html文档位于同一文件夹；l 图像位于html文档的下一级文件夹；l 图像位于html文档的上一级文件夹。知识点14-切图教师通过PPT讲解切图的步骤。（1） 选择切片工具（2

12、） 绘制切片区域（3） 导出切片。四、归纳总结Ø 教师回顾本节课所讲的内容，并通过提问的方式引导学生解答问题并给予指导。Ø 学生交流，针对自己遇到的难点向老师提问，老师进行解答。五、布置作业Ø 教师通过高校教辅平台（）发放测试题以巩固本节课的学习内容。Ø 预习下节课的内容。第三课时（【项目实现】：页面建设准备工作、【项目实现】：制作“头部”模块、【项目实现】：制作“博主简介”模块）一、复习巩固 教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需直接引入的方式导入新课在制作“博客”页面之前，小思需要做一些页面建设的准备工作，主

13、要包括网站素材整理、页面结构分析、页面布局等。准备完毕我们就从头部开始进行制作。三、新课讲解知识点1-【项目实现】：页面建设准备工作教师展示PPT，讲解页面建设准备工作。（1） 网站素材整理l 网站站点建立l “博客”页面切图（2） 页面结构分析（3） 页面布局知识点2-【项目实现】：制作“头部”模块教师带领学生制作“头部”模块（1） 效果分析：教师带领学生对“头部”模块进行分析。（2） 模块制作：教师带领学生对“头部”模块进行制作。知识点3-【项目讲解】：制作“博主简介”模块教师带领学生制作“博主简介”模块（1） 效果分析：教师带领学生对“博主简介”模块进行分析。（2） 模块制作：教师带领学

14、生对“博主简介”模块进行制作。三、归纳总结Ø 教师回顾本节课所讲的内容，并通过提问的方式引导学生解答问题并给予指导。Ø 学生交流，针对自己遇到的难点向老师提问，老师进行解答。四、布置作业Ø 让学生针对本节课所学内容进行练习巩固。Ø 让学生分小组讨论并总结在操作中遇到的困难，列出3条。第四课时（【项目实现】：制作“旅游随笔”模块、【项目实现】：制作“驴友评论”模块、【项目实现】：制作“页脚”模块）一、复习巩固 教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过温故知新的方式导入新课回顾上节课制作的模块，针对难点再次说明。这节课继

15、续往下进行，制作“旅游随笔”模块、“驴友评论”模块和“页脚”模块。三、新课讲解 知识点1-【项目实现】：制作“旅游随笔”模块教师带领学生制作“旅游随笔”模块（1） 效果分析：教师带领学生对“旅游随笔”模块进行分析。（2） 模块制作：教师带领学生对“旅游随笔”模块进行制作。知识点2-【项目实现】：制作“驴友评论”模块教师带领学生制作“驴友评论”模块（1） 效果分析：教师带领学生对“驴友评论”模块进行分析。（2） 模块制作：教师带领学生对“驴友评论”模块进行制作。知识点3-【项目实现】：制作“页脚”模块教师带领学生制作“页脚”模块（1） 效果分析：教师带领学生对“页脚”模块进行分析。（2） 模块制作：教师带领学生对“页脚”模块进行制作。四、归纳总结Ø 学生交流，针对自己遇到的难点向老师提问，老师进行解答。Ø 教师对整章内容进行总结，并结合课后练习巩固本章学习内容。五、布置作业Ø 让学生针对本节课所学内容进行练习巩固。Ø 让学生分小组讨论本节课的

人人文库> 全部分类> 教育资料 > 作文作品

温馨提示

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

最新文档

评论

0/150

提交评论