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

附页： 授课周次课程章节 第 1 周 授课时间 年 月 日至 年 月 日 第 1 次课：认识网页、了解网站 第 2 次课：了解网页制作方法与网页设计基础 第 1 次课：拓宽学生对网页、网站的认识 教学目的 第 2 次课：掌握网页制作的方法，熟悉网页设计的工作流程 第 1 次课： 网页、网站的定义； 网页的构成要素； 内容提要 不同类型网站的特征归纳总结 及板书设计 第 2 次课： 代码制作网页和软件制作网页的两种方法 网页设计的工作流程 网店美工的标准第 1 次课： 重点：网页基本元素 难点：归纳总结不同网站类型的特征重点、难点 解决方案：学做合一，实践任务 及解决方案 第 2 次课： 重点：网页制作方法；设计网页的基础知识 难点：制作网页的两种方法；网页设计的工作流程解决方案：学做合一，实践任务 号分配1认识网页、了解网站45 号 分配 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 的工作界面二、网页设计的含义 从网页布局来看，网页的基本构成要素包括 Logo、导航条、广告、按钮、文本、图片、动画、超链接、表单、音频和视频等，将这些构成要素有机整合在一起，形成具有美感和交互性的页面，这就是通常所说的网页设计。