07-网页设计与制作案例教程—教案.doc

PAGE

PAGE111

网页设计与制作案例教程

网页设计与制作案例教程—实训教案

第1章

第1讲任务

2课时

标题：网站建设基本概念

教学目标

知识目标：

了解网站建设基本概念

掌握网页设计要素

熟悉网页设计流程

技能目标：

熟练浏览网页及搜索不同类型的网页，理解网页的本质

教学重点：

掌握网页设计中的要素

教学难点：

网页版式及网页布局的规划

教学准备：课件及教学实训素材计算机机房

教学内容

学生活动

一、网站建设基本概念

1.网站建设：

2.网页：

3.浏览器：

列举常用的浏览器

4.网址：

5.主页：

二、网站分类

1.按功能分类

2.按性质分类

3.按行业分类

三、网页的本质

浏览并保存其他网页内容，了解网页的本质。

四、网页的组成元素

通过网页的浏览，知道一般网页的基本组成元素包括：网页标题、页头、网站标志、导航栏、主内容区(文本信息，图片，视频)、表单、超链接等。

五、制作网页常用工具

1．常用的网页制作工具：如Dreamweaver、Frontpage、HTML语言。

2.常用的网页美化工具：图片编辑工具，如Photoshop；动画制作工具，如Flash、Cool3d、GifAnimator等；网页特效工具，如有声有色等。

六、网页设计中的要素

1．网站栏目规划

2.网页版式规划?

3.网页布局规划

通过课件展示经典网页布局

4.网页的色彩规划

七、网站设计流程

网页设计流程要领：确定网站主题、选择好域名、掌握建网工具、有创意的内容选择、推广自己的网站

案例赏析

1、艺术类网站案例描述和分析

2、体育类网站案例描述和分析

3、时尚类网站案例描述和分析

4、商业类网站案例描述和分析

5、儿童类网站案例描述和分析

6、饮食类网站案例描述和分析

八、课堂小结

首先要确定网站面向的浏览群体，这是一个网站的定位。我们制作的网页一定要根据浏览者的喜好确定网站风格和内容。就网站的风格而言既可以是温馨的，也可以是炫酷的。就网站的内容而言，要先把浏览者最关心的问题设置为一级栏目，其次再在一级栏目中详细划分次要内容。其次，在确立好了网页的内容之后，确保形式要和内容统一，网页形式可以多种多样，可以是图文并茂的，也可以是单以文字或者图片为主，但都要紧紧围绕内容进行设定。网页中图像和文字之间的位置关系也称之为布局关系，归纳起来有左右对称结构布局，“同”字型结构布局，“回”字型结构布局，“匡”字型结构布局，自由式结构布局和“另类”结构布局。网页做为一种视觉传达形式，色彩环节是必不可少的，一个成功的网页，合理的色彩规划功不可没。当我们兼顾到了以上原则之后，再发挥一下自己的想象力，相信我们已经掀开了网页制作的面纱

九、实操作业：

请为淘宝网站制作一张栏目规划表，并上交。

导课提问

通过“新浪网主页”让学生理解网站的基本概念。

让学生回答网页的本质是什么？

第2章

第1讲教学案例

2课时

创建“我的班级”站点及网页

教学目标

知识目标：

1.掌握站点的规划、创建和管理等操作

2.熟悉并掌握DreamweaverCS6的操作界面

?

技能目标：

熟悉新建网页文档、保存网页文档和设置网页文档属性等基本操作

教学重点：

网页文档的新建、保存以及设置网页文档属性等基本操作

教学难点：设置网页文档属性

教学准备：

课件及教学实训素材

教学内容

学生活动

一、案例制作

步骤1启动DreamweaverCS6后，选择【站点】→【创建站点】命令。打开【站点设置对象】对话框，默认使用向导功能没置站点。

步骤2在【站点名称】后面的文本框中输入内容．作为要建立的站点名称。

步骤3单击【本地站点文件夹】后面的【浏览】，打开【选择根文件夹】对话框，选择本地站点文件夹的保存位置。

步骤4在【站点设置对象】对话框中的【本地站点文件夹】后面可以看到新设定的站点存放位置。

步骤5单击【保存】按钮。

二、教师活动：

1.在讲案例制作过程中，融入DreamweaverCS6工作界面的讲解。DreamweaverCS6，其工作界面是由标题栏、菜单栏、插入面板、文档工具栏、文档窗口、状态栏、属性面板、面板组、帮助中心和扩展管理器等的各组成部分。

2.DreamweaverCS6创建站点

（1）规划站点

（2）建立站点的方法

方法1：使用向导建立站点；

方法2：使用高级设置建立站点

（3）在文件面板中站点根目录下文件夹及文件的管理。文件夹和文件的创建、删除、重命名、移动等操作

3.DreamweaverCS6管理站点

（1）切换站点

（2）复制站点

（3）删除站点

（4）导入导出站点

学生跟随教师的演示操作

第2讲

举一反三