全国职业技术学院排名-猫眼看天下

网页制作课程教案


【篇一：网页制作课教案】

海宁市高级技工学校特色授课教案

1

2

3

【篇二：《网页设计基础》完整教案(201309版)】


武汉城市职业学院教学教案

《网页设计与制作》

院系： 信息技术系 专业： 多媒体技术专业班级： 11多媒体技术
教师： 胡文鹏 学年： 2012-2013学年上学期

一、课程整体教学设计

建议：

1、说课，介绍课程内容设计

2、介绍相关的概念和软件，学会赏析网页

3、介绍基本工具dw的使用，制作简单的文本 网页、图文混排网页，
使学生有一定的dw基础。

4、网站规划和设计流程

5、网页配色方案，效果图设计， 6、切片、布局等

一、课程信息

课程名称：网页设计与制作 学分：4 学时：68学时 课程类型：专
业课程 授课对象：11多媒体

先修课程:《photoshop》、《flash》、《计算机基础》、《美术
基础》、。 后修课程: 《网站开发与建设》、《动态网页制作》等
二、课程设计

1．课程目标

本课程的教学目标是：培养学生静态网页网站开发与维护的实际工
作 能力，使学生具备计算机及其它相关专业课学习和应用中所必需
的网页制作与网站设计的基本知识和基本 技能，初步形成解决实际
应用问题的能力，为以后的相关专业课学习和工作打下基础，为以
后发 展的软件新技术提供平台，并注意渗透思想教育，逐步培养学
生的辩证思维，加强学生的团队精神和职业 道德观念。

2．教学目标

（1）知识目标

了解网页设计行业的总体特征，并能说

出网页设计师的基本技能要求； 能说出网页设计与制作的一般方法
和流程； 能陈述相关的基本概念； 能欣赏和分析各种类型的网页；
能陈述网页设计中的色彩应用理论； 能正确素材在网页制作中的作
用； 能说出网页布局的几种典型形式； 能熟练说出切片时的几个要
点；

能陈述书写网站策划书应注意的问题； 能说出在网上申请域名的具
体步骤；

（2）能力目标 能书写网站策划书；

能手绘网页草图，并在photoshop中制作效果图； 能利用网络工
具收集需要的各种素材；

能使用photoshop设计网页界面中的logo、页面效果图和页眉等；
能利用flash等软件制作简易的gif与swf动画，并插入到网页中；
能熟练使用fireworks进行网页切片，并导入到dreamweaver； 能
熟练使用dreamweaver的基本功能制作网页； 能利用表格或单元
格工具进行网页布局与版式设计； 能制作框架网页；

能在网页中添加合适的超级链接；

能看懂并编写简单的html代码，能修改复杂的html代码； 能使用
css工具修饰网页； 能熟练管理站点； 能在网上申请域名； 通过多
种工具上传网站；

（3）素质目标

培养学生的沟通能力和协作精神； 培养学生勤于思考、认真做事的
良好作风； 培养学生勇于创新、敬业乐业的工作作风； 培养学生具
有良好的职业道德和较强的工作责任心； 培养学生自主学习能力和
知识应用能力；

培养学生理论联系实际的工作作风、严肃认真的科学态度以及独立
工作的能力； 训练和培养团队协作精神和共同开发网站的综合能力；

3．模块化教学内容设计

三、教学材料

教 材：文东，《dreamweaver cs3网页设计基础与项目实训》，
北京：科学出版社，2010年4月

参考资料：张洪斌 等，《基于工作过程的网页设计与制作教程》，
北京：机械工业出版社，2010年4月

四、教学组织形式

集中授课与分组训练相结合，课内授课、校外实习与观看录像相结
合。

采用模块化 教学模式，课堂教学与现场教学相结合，课内项目训练
与实习项目训练相结合，任务驱动，学、练同步， 做到理论与实践
一体化。既考虑理论知识体系，又紧紧围绕能力目标与综合项目组
织教学，通过 项目分解和提炼，以项目练习实现能力目标和知识目
标。

五、考核方案

本课程采用形成性考核和终结性考核相结合的方法进行考核。

形成性考核(平时成绩)：占40%；出勤、听课情况、上课提问回答
情况、作业完成情况等。 终结性考核（作品考核成绩）：占60%；
根据各小组的网站质量进行考核。

附1：《网站设计与制作》期末考核标准

重要时间：网站完成时间为**月**日，期末考评时间为**月**日

【篇三：《网页制作工具》参考教案】


《网页制作工具》参考教案

教学主题

网页制作工具（1）（frontpage和dreamweaver的使用）

教案设计

赵志

教案编号

13

适用年级

高二年级

教学课时

1课时

教材分析

概述：通过网页设计，了解并熟悉网页设计软件的基本使用方法，
掌握常用工具的使用方法 重点：初步了解网页设计软件
dreamweaver中层和时间轴的设置，体会动态网页设计 难点：层和
时间轴的设置

学习目标

1、掌握网页制作软件dreamweaver的基本使用方法

2、学会设计和制作简单的动态网页

所需资源和环境

网络资源

使用搜索引擎查找网页设计相关的信息（包括图片、文字、视频等）

常规资源

1、浙江教育出版社2004版《信息技术基础》第五章5.3.1节配套
光盘

2、教材配套教师用书

3、小组合作学习任务单

教学支撑环境

计算机网络教室、所有计算机能够上网、多媒体网络教室软件或者
投影仪

教学设计

教学引导问题设计

问题

目的

你知道网页上面文字的滚动效果是怎么制作出来的吗？

激发学生的好奇心

你知道如何让网页中的一幅图片动起来？

引导学生设计动态网页中图片运动的效果

你知道有哪些网页动态效果？

为学生的课后探究学习做铺垫

你知道用dreamweaver软件如何预览你设计的动态网页？

体会动态网页的效果，进一步完善网页设计

教学过程设计

教师活动

学生活动

1、新课导入

展示全国 中小学电脑制作活动中的优秀的网页制作《母亲河》，激
发学生制作网页的兴趣。“工欲善其事，必先利 其器”从而引出制作
网页需要掌握必要的制作工具。只有掌握了必要的网页制作工具软
件才能做 出动感十足、耳目一新、独具体色的网页。

2、教学内容

随着因特网 技术的不断发展，网页制作工具越来越多，选择一种得
心应手的工具软件，能够收到事半功倍的效果。< br>

⑴设问：面对那么诱人的网页，要想学习网页制作，我们应该选择
什 么样的网页制作工具，首先同学们需要先了解有哪些软件，它们
各有什么样的特点？

布置任务：请同学们完成任务单中的第一个任务。

教师点拨：网页工具软件大体上分为两类 ：一种着眼于网页、网站
整体规划使用的基本工具；另一类是着眼于网页上面的某些元素
（如： 漂亮的按钮、栩栩如生的动画、逼真的三维图像），使用到
的辅助工具。

通常网页 设计需要考虑整体思想。先全局规划网页的思想或整体风
格，然后对局部的图像处理、颜色搭配、动画图 片设置的优化工作。
先大后小的思想。本节课先来学习基本工具frontpage和
drea mweaver。

⑵网页设计工具frontpage：

front page是微软公司开发的一款网页设计软件，其软件界面和文
字编辑功能与word软件相似，熟悉w ord的人很容易学会。同时提
供的模板可以令初学者很容易的制作相当美观的网页。

布置任务：

请同学们完成任务单中的第二个任务：利用教师提供的素材（图片，
文字内容），制作一个网页。（教师提供一个已设计的简单网页）

教师评价：

⑶网页制作dreamweaver

dreamweav er是macromedia公司的一款专业的网页设计软件，
提供了很多方便操作和使用的工具栏，如 ：对象工具栏、站点管理
窗口、快速工具栏。并且该公司还有一系列的配套产品可用，比如
图形 编辑软件fireworks、动画制作软件flash。运用他特有的“行
为”、“层”等功能可以容 易的生成网页的动态效果。

下面让我们来体验dreamweaver软件的动态网页制作

布置任务：

请同学们完成任务单中的第三个任务：

运用dreamweaver中的层、时间轴制作动态网页——图像移动

设问1、为什么要调整“层”与“背景图像”的大小，使其等大？

设问2、时间轴上面的“关键帧”有什么特点？

设问3、操作过程中感到最难的一个环节是什么？

设问4、对自己设计的作品的评价是什么？

结尾：同学们观察到，我们设计 的作品和本节课一开始展示的作品
有很大的差距，原因在于，仅仅使用我们学习的frontpage和
dreamweaver是不能制作出那么美丽的网页的，我们还需要掌握一
些制作网页的辅助 工具。也就是我们下节课需要讲解的“辅助工具”

最后给同学们留下了一个课后任务。

借助我们的因特网完成任务一

各小组总结不同的网页制作工具软件的特点、主要功能。

学生回忆必修教材使用frontpage设计“故宫”主题网页的过程

学生小组合作完成任务二

填写“任务二”评价表格

小组合作完成任务三

并填写“任务三”评价表格

网页工具学习任务单

一、借助因特网，组内成员分工查询制作网页常用到的工具软件，
最后汇总完成下面的表格。 常用工具

主要功能（总结每个软件的主要功能）

完成人员

二、打开网页制作软件frontpage，利用老师提供的一些素材（素材放在d盘的“网页素材”文件夹内），制作一个网页，并保存。

评价表

评价指标

组长评价