网页设计与制作教案1.docVIP

PAGE PAGE 7 授课周次 第1周 授课时间 年 月 日至 年 月 日 课程章节 第1次课：认识网页、了解网站 第2次课：了解网页制作方法与网页设计基础 教学目的 第1次课：拓宽学生对网页、网站的认识 第2次课：掌握网页制作的方法，熟悉网页设计的工作流程 内容提要 及板书设计 第1次课： 1.网页、网站的定义； 2.网页的构成要素； 3.不同类型网站的特征归纳总结 第2次课： 1.代码制作网页和软件制作网页的两种方法 2.网页设计的工作流程 3.网店美工的标准 重点、难点 及解决方案 第1次课： 重点：网页基本元素 难点：归纳总结不同网站类型的特征 解决方案：学做合一，实践任务 第2次课： 重点：网页制作方法；设计网页的基础知识 难点：制作网页的两种方法；网页设计的工作流程 解决方案：学做合一，实践任务 教学内容 时间分配 序号　 教 学 内 容 学时分配 1 认识网页、了解网站 45 2 使用代码制作网页 45 3 使用软件制作网页 45 4 了解网页设计基础 45 5 教学手段 第1次课：多媒体教学 第2次课：多媒体教学 教学形式 （在右栏勾选） 理实一体（√）理论教学（ ） 实验（ ）实训（ ） 上机（ ） 作业 作业完成方式 书面（ ）电子（√） 教学后记 第1次课： 第2次课： 附页： 序号 具体内容（课堂组织和教学过程设计） 授课改进意见及实时教学效果记录 第一次课 认识网页、了解网站、使用代码制作网页 第一步，问题导入（10分钟） 以问题“平时喜欢在网上做什么？试问成长于信息化时代的你面对浩瀚如海的信息和四通八达的互联网，你真正了解什么是网页、什么是网站吗？面对五花八门的网页，你知道这些网页是怎么做出来的吗”为引入，与学生互动，引出本节课内容。 第二步，知识讲解（35分钟） 知识讲解要点如下： 一、网页的概念 网页(web)是网站上的某一个页面，是万维网中的一“页”，它是一个纯文本文件，是向访问者传递信息的载体，以超文本和超媒体为技术，采用HTML、CSS、XML等语言来描述组成页面的各种元素，包括文字、图像、音乐等，并通过客户端浏览器进行解析，从而向浏览者呈现网页的各种内容。 二、网页的元素 三、网站的定义 网站(Website)是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。是一个存放在网络服务器上完整信息的集合体，它包含一个或多个网页。 网页是网站中的一页，是构成网站的基本元素。 网站由以下三部分组成：网站域名；网站程序；网站空间。 四、网站的分类 五、使用代码制作网页—HTML 1、HTML的概念 HTML即Hypertext Markup Language，是超文本标记语言，用于描述网页文档的一种标记语言，它不是一种编程语言，而是一种标记语言?(markup language)。 2、HTML文档的基本结构 html 开头文件声明 head 开头 文件声明 title无标题文档/title /head 正文 body 正文 …… /body /html 3、了解常用的HTML标识 第三步，课堂实践（35分钟） 1、请浏览淘宝网、京东商城、1号店、苏宁电器这些网页，并记录这些网页中都包含了哪些元素。 2、请浏览有偿资讯类网站、功能型网站、综合类、办公类网站的代表网站，并将这些网站的首页以截图的形式保存下来。 3、制作一个简单网页。在记事本中输入以下代码： HTML HEAD TITLE简单页面/TITLE /HEAD BODY BGCOLOR=”BLACK” TEXT=”WHITE” 你好！ /BODY /HTML 并将网页截图保存。 第四步，教师总结（10分钟） 总结本次课内容，强调网页、 网站的关系，回顾网页中的构成元素，对不同类型网站的特征总结。 第二次课 使用软件制作网页、了解网页设计基础 第一步，问题导入（10分钟） 引导学生回顾上次课的知识点，通过提问“除了使用代码制作网页，还有没有其他便捷方法来制作网页？”，引出本节课的教学内容。 第二步，知识讲解（35分钟） 知识讲解要点如下： 一、网页制作软件—dreamweaver CS6 是针对专业网页设计师特别设计的一款视觉化网页开发工具，利用它可以轻而易举地制作出跨平台限制和跨越浏览器限制的充满动感的网页。 1、Dreamweaver CS6的初识界面 2、Dreamweaver CS6的工作界面 二、网页设计的含义 从网页布局来看，网页