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

。授课周次第1周授课时间年 月 日至 年 月 日课程章节第1次课：认识网页、了解网站第2次课：了解网页制作方法与网页设计基础教学目的第1次课：拓宽学生对网页、网站的认识第2次课：掌握网页制作的方法，熟悉网页设计的工作流程内容提要 及板书设计第1次课： 1.网页、网站的定义；2.网页的构成要素；3.不同类型网站的特征归纳总结第2次课： 1.代码制作网页和软件制作网页的两种方法2.网页设计的工作流程3.网店美工的标准重点、难点 及解决方案第1次课： 重点：网页基本元素难点：归纳总结不同网站类型的特征解决方案：学做合一，实践任务第2次课： 重点：网页制作方法；设计网页的基础知识难点：制作网页的两种方法；网页设计的工作流程解决方案：学做合一，实践任务教学内容 时间分配序号教 学 内 容学时分配1认识网页、了解网站452使用代码制作网页453使用软件制作网页454了解网页设计基础455教学手段第1次课：多媒体教学第2次课：多媒体教学教学形式（在右栏勾选）理实一体（）理论教学（ ）实验（ ）实训（ ） 上机（ ）作业作业完成方式书面（ ）电子（）教学后记第1次课：第2次课：附页：序号具体内容（课堂组织和教学过程设计）授课改进意见及实时教学效果记录第一次课 认识网页、了解网站、使用代码制作网页第一步，问题导入（10分钟）以问题“平时喜欢在网上做什么？试问成长于信息化时代的你面对浩瀚如海的信息和四通八达的互联网，你真正了解什么是网页、什么是网站吗？面对五花八门的网页，你知道这些网页是怎么做出来的吗”为引入，与学生互动，引出本节课内容。第二步，知识讲解（35分钟）知识讲解要点如下：一、网页的概念网页(web)是网站上的某一个页面，是万维网中的一“页”，它是一个纯文本文件，是向访问者传递信息的载体，以超文本和超媒体为技术，采用HTML、CSS、XML等语言来描述组成页面的各种元素，包括文字、图像、音乐等，并通过客户端浏览器进行解析，从而向浏览者呈现网页的各种内容。 二、网页的元素三、网站的定义网站(Website)是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。是一个存放在网络服务器上完整信息的集合体，它包含一个或多个网页。网页是网站中的一页，是构成网站的基本元素。网站由以下三部分组成：网站域名；网站程序；网站空间。四、网站的分类五、使用代码制作网页HTML1、HTML的概念HTML即Hypertext Markup Language，是超文本标记语言，用于描述网页文档的一种标记语言，它不是一种编程语言，而是一种标记语言(markup language)。 2、HTML文档的基本结构 开头文件声明 无标题文档 正文 3、了解常用的HTML标识第三步，课堂实践（35分钟）1、请浏览淘宝网、京东商城、1号店、苏宁电器这些网页，并记录这些网页中都包含了哪些元素。 2、请浏览有偿资讯类网站、功能型网站、综合类、办公类网站的代表网站，并将这些网站的首页以截图的形式保存下来。3、制作一个简单网页。在记事本中输入以下代码： 简单页面 你好！ 并将网页截图保存。 第四步，教师总结（10分钟）总结本次课内容，强调网页、 网站的关系，回顾网页中的构成元素，对不同类型网站的特征总结。第二次课 使用软件制作网页、了解网页设计基础第一步，问题导入（10分钟）引导学生回顾上次课的知识点，通过提问“除了使用代码制作网页，还有没有其他便捷方法来制作网页？”，引出本节课的教学内容。第二步，知识讲解（35分钟）知识讲解要点如下：一、网页制作软件dreamweaver CS6是针对专业网页设计师特别设计的一款视觉化网页开发工具，利用它可以轻而易举地制作出跨平台限制和跨越浏览器限制的充满动感的网页。1、Dreamweaver CS6的初识界面2、Dreamweaver CS6的工作界面二、网页设计的含义从网页布局来看，网页的基本构成要素包括Logo、导航条、广告、按钮、文本、图片、动画、超链接、表单、音频和视频等，将这些构成要素有机整合在一起，形成具有美感和交互性的页面，这就是通常所说的网页设计。三、网页设计工作流程1、设计阶段：（1）选择主题；（2）雏形设计；（3）收集和加工素材。2、制作阶段：（1）选择网页制作工具；（2）制作网页。3、检测阶段4、发布阶段四、网页美工标准网页美工是指精通美学，具有良好的创意和一定程度的审美观，并且会photoshop，flash，dreamwaver等网站制作软件的网站制作人员。 必备技能：基础美术：素描（石膏几何体、静物写生）；色彩（色彩构成、简单色彩静物写生）。软件基础：Photoshop网页配色及排版设计；Illustrator网页设计；Dreamweaver网页制作软件。必备知识： 1.色彩的平衡与呼应 2.常用的色彩搭配3.注意页面的分块 4.网页安色的运用 5.色彩模式 第三步，课堂实践（35分钟）1、利用dreamweaver软件制作一个如图所示的页面2、某女装厂为拓展业务，将开拓网上市场，计划开发一个电子商务企业网站，试利用纸上布局法设计一个电子商务公司的首页，并上交纸质布局图。第四步，教师总结（10分钟）总结本次课软件制作网页、网页设计工作流