Web前端开发HTML5 CSS3教案网页设计基础教案.doc

课程名称 WEB前端开发（1） 课次 1 任务、项目、课题名称 网页设计基础 课时 2学时 教学内容 网页的相关知识　　　　　　　　　　　　　 网站设计流程　　　 　　 Dreamweaver操作界面 教学目标 掌握网页的相关知识　　　　　　　　　　　　　 了解网站设计流程　　　 　　 熟悉Dreamweaver操作界面 教学重点 网页相关概念 教学难点 网站设计流程 教学活动及主要环节 学生活动 导入新课：（2分钟） 1．有无制作过网页？ 2．以前学过的网页课程？ 课程介绍：(10分钟) 本学期主要学习如下内容： 1）HTML5 2）Dreamweaver CC2018网页制作编辑软件的使用 3） CSS的使用 4) DIV+CSS网页布局 考试方法：平时成绩（50）+期末考试（50） 平时50分：到课率10分+提交实验作业10分+上课表现10分+作品20分 新授： 一、网页展示与认识（展示百度、淘宝官网，历届学生的优秀作品）（10分钟） 在学习创建网站、制作网页之前，我们先浏览几个网站，对这些网站的主页进行分析，了解优秀网页的布局结构、色彩搭配、导航栏的设计、动画效果等。 二、相关概念（15分钟） 1、IP地址和域名 2、URL：统一资源定位符 3、HTTP： 超文本传输协议，提供一种发布和接收 HTML页面的方法。 4、网站、网页与主页：主页通常用index.htm或index.html表示。 5、HTML:超文本标记语言，在网页空白位置单击鼠标右键，选择“查看源文件”命令即可查看网页源代码。（学生操作） 6.WEB标准：包括结构标准（HTML）、表现标准(CSS)和行为标准(JAVASCRIPT). 三、 HTML5概述（13分钟） HTML5主要优势：（1）良好的移植性 （2）更直观的结构。（3）内容和样式分离。（4）新的表单元素。（5）更方便地嵌入音频和视频。 （6）矢量图绘制。 （演示canvas画布） 四、常用的浏览器（5分钟） 三大浏览器：IE、火狐FireFox、谷歌Chrome（推荐使用）。 总结：（5分钟） 本节介绍与网页有关的一些基本常识和基本概念，介绍HTML的基本工作原理，以及常用的网页制作工具、网页设计流程等。 作业： 理解IP地址、域名、URL、HTTP、HTML的概念。 预习： 　　1.3　DW工具的使用 学生回答，参与互动 动手操作，任意打开一个网页，查看网页源代码 学生一起操作，实现教学做一体化