《Web前端设计》教案正文.docVIP

PAGE PAGE 64 江西工业职业技术学院教案 课程名称 Web前端开发 授课时间 第 1 周 第 1 次 授课章节 第一章 Web前端开发概述，第二章 HTML5基础 教学目的 知识目标 理解web前端概念， 了解主要浏览器产品， 理解web标准， 掌握组成web前端的三大语言， 掌握web前端开发工具， 掌握HTML的基础语法 掌握文本控制标签 技能目标 1.会下载安装开发工具， 2.会使用浏览器浏览HTML文件， 3.会编写简单的网页 教学重点 Web标准，web前端的三大语言，HTML的基础语法 教学难点 如何创建页面，页面中基本标签的使用方法 教学方法 案例讲解法，演示法 教具 计算机，多媒体 教学过程设计 （含时间分配） （2学时） 1.Web前端开发相关概念 1.1浏览器的介绍 1.1.1 浏览器的概念； 1.1.2 浏览器的发展； 1.1.3 浏览器内核； 1.1.4常用的浏览器。 1.2 URL、WWW、网站的概念 结构 （HTML） 1.3 Web标准 表现 （CSS） 行为 （Javascript） 2.Web前端开发相关技术 2.1 HTML概念及版本 2.2 CSS概念及版本 2.3 Javascript介绍 3.Web前端开发工具 3.1 NotePad 3.2 Text Pad 3.3 web Storm 3.4 Dreamweaver 4.HTML语法基础 4.1 HTML文档结构 标题段落标签 4.2 文本控制标签 文本格式化标签 特殊字符标签 心得 作业 1.在浏览器中查看常用网站的页面效果和源文件 2.下载安装试用相关软件 备注 江西工业职业技术学院教案 课程名称 Web前端开发 授课时间 第 1 周 第 2 次 授课章节 实验一 使用文本控制标签制作简单的网页 教学目的 知识目标 1.掌握HTML的基础语法 2.掌握文本控制标签 技能目标 1.熟悉开发工具-- Dreamweaver_CC， 2.能够熟练使用文本控制标签制作简单的网页 教学重点 HTML的基础语法，文本控制标签的使用 教学难点 教学方法 案例讲解法，演示法 教具 计算机，多媒体 教学过程设计 （含时间分配） 实验内容1：熟悉Dreamweaver_CC 实验内容2：编写第一个网页 代码： html head title我的第一个页面/title /head body /body /html 实验内容3：使用标题段落标签 3.1 使用标题标签hi显示各级标题 语法格式：hi标题/hi 部分代码： body h1这是第一级标题/h1 h2这是第二级标题/h2 …… h6这是第六级标题/h6 /body 注：可使用align属性控制文本的对齐方式 3.2 使用段落标签p控制文本的位置 语法格式：p段落内容/p 代码略 实验内容4：使用文本格式化标签美化网页 换行标签br 水平线标签hr 常用文本格式化标签： 字形标签（课本P15表2-3） div标签 span标签 代码略 心得 作业 练习本次实验内容，综合运用文本控制标签编写网页 备注 江西工业职业技术学院教案 课程名称 Web前端开发 授课时间 第 2 周 第 1 次 授课章节 第二章 HTML5基础 教学目的 知识目标 熟悉掌握常用的标签及属性 技能目标 熟练使用常用标签编写网页 教学重点 HTML常用标签及属性 教学难点 路径的表示方法 教学方法 案例讲解法，演示法 教具 计算机，多媒体 教学过程设计 （含时间分配） 1.1 图片标签 1.1.1 图片的格式与分辨率 GIF 1.1.2网页中使用最广泛的图片格式 JPEG