网页设计与制作教案.docx
《网页设计与制作教案.docx》由会员分享，可在线阅读，更多相关《网页设计与制作教案.docx（44页珍藏版）》请在冰豆网上搜索。
网页设计与制作教案
[章节名称]：
网页设计入门基础
[课堂类型]：
理论■实训□练习■测试□
[学时安排]：
2课时
[目的要求]
1.了解网络的基本知识，网页设计的基础知识，网页的分类，动态网页的原理及技术
2.了解网页的基本构成及最简单的html代码
3.了解网页设计的流程
[重点]
了解网页设计的流程，掌握最基本的网页的构成及最简单的网页html代码
[难点]
掌握最基本的网页的构成及最简单的网页html代码
[教法学法]
1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。
2.练习采用学生自主安排，教师给与个别辅导的方式进行。
[参考资料]
《DreamweaverCS5网页设计与制作——DIV+CSS版》吴丰,丁欣主编
清华大学出版社
《动态网页制作教程》（第二版）刘梅彦徐英慧编著清华大学出版社
[教学过程]
环节一：
结合PPT课件的内容，讲解网络和网页的基本知识。
了解网页的分类，网页运行的原理，介绍网页设计的工具，动态网页的技术。
环节二：
介绍网页的构成，并对一个网站进行实例分析说明。
编写最简单的html代码。
环节三：
了解网页设计的流程
主要有以下几个步骤：
一.网站规划
二.素材资源收集
三.选择开发工具
四.站点建立与规划
五.分模块进行网页设计
六.网页源代码测试与特效添加
七.申请域名与空间
八.网页源代码上传
九.定期的维护
环节四：
对本节课的内容进行复习，让学生练习html的代码。
并进行疑难解答
[章节名称]：
html基础与应用1
[课堂类型]：
理论■实训□练习■测试□
[学时安排]：
2课时
[目的要求]
了解html语言的基础知识，结构，掌握html语言设置网页的背景音乐，背景图片，字体的方法。
[重点]
Html语言设置网页的背景音乐，图片，字体
[难点]
Html语言设置网页的方法
[教法学法]
1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。
2.练习采用学生自主安排，教师给与个别辅导的方式进行。
[参考资料]
《DreamweaverCS5网页设计与制作——DIV+CSS版》吴丰,丁欣主编
清华大学出版社
《动态网页制作教程》（第二版）刘梅彦徐英慧编著清华大学出版社
[教学过程]
环节一：
复习网页设计的基础知识，介绍如何利用Dreamweaver开发工具，记事本编辑网页的源程序，介绍网页站点的创建及注意事项。
环节二：
讲解html语言的结构，特点，设置网页页面的背景音乐，图片，字体
1.设置背景颜色
2.背景图片
3.背景音乐
背景音乐和上边介绍的两个有很大的不同，它的代码是放在页面的头部
里，
4.标题字体文字 #=1，2，3，4，5，6
比如：
今天是星期三，今天天气晴，温度15°-23°
5.字体的大小，用于一般文字。
文字#=1,2,3,4,5,6,7or+#,-#
例子：
今天天气真好！
6.字体颜色
指定颜色文字#="#rrggbb"16进制数码，或者是下列预定义色彩：
Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,Fuchsia,White,Green,Purple,Silver,Yellow,Aqua
7.客户端字体（FontFace）
...#=客户端可获得的字体，
什么是客户端，通俗的讲，就是你的电脑，face="#"就是从你的电脑
获得的字体
环节三：
完成课堂讲解的练习例题，并疑难解答
环节四：
复习本次课内容，步骤课后作业。
[章节名称]：
html基础与应用2
[课堂类型]：
理论■实训□练习■测试□
[学时安排]：
2课时
[目的要求]
了解html语言的跑马灯效果标签的运用，序列卷标标签的运用
[重点]
Html语言的跑马灯效果标签及序列卷标的应用
[难点]
Html语言的跑马灯效果标签及序列卷标的应用
[教法学法]
1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。
2.练习采用学生自主安排，教师给与个别辅导的方式进行。
[参考资料]
《DreamweaverCS5网页设计与制作——DIV+CSS版》吴丰,丁欣主编
清华大学出版社
《动态网页制作教程》（第二版）刘梅彦徐英慧编著清华大学出版社
[教学过程]
环节一：
复习HTML语言中设置背景颜色，背景图片，音乐等标签的知识，介绍HTML语言的编写规范要求。
环节二：
讲解html语言的跑马灯效果标记，序列卷标标记的使用
1.跑马灯效果
该标记能实现文字或图片的滚动效果。
bgcolor="#ccffcc"scrollamount="2">滚动文字
主要参数：
①direction:
控制移动方向,可取"left","right","up","down"四个值
②behavior:
移动方式,可取"scroll"（循环移动）,"slide"（只走一圈），"alternate"（来回移动）
③loop:
循环次数,不输入表示无限次循环
④scrollamount:
移动快慢,数值越大越快
⑤scrolldelay:
每移动一步之后的延时,单位是毫秒
⑥height,width:
移动区域的高和宽,单位像素
⑦bgcolor:
移动区域的背景色
2.序列卷标
该类型标记类似于Word软件中的项目符号及编号，主要分为两种
（1）无序标记
无序序列就是序列各条目间无顺序关系
姓名：吴小娟
生日：1993/6/16
星座：双子座
运行的效果如下：
●姓名：
吴小娟
●生日：
1993/6/16
●星座：
双子座
其中
2.通过设置UL，LI标签选择器的CSS样式实现网页菜单的基本显示效果。
#navigationli{
text-align:
center;width:
80px;height:
32px;
background:
url（button1.jpg）repeat-x;
float:
left;
}
3.通过设置a:
hover复合内容选择器实现菜单的鼠标移动变换背景效果。
#navigationlia:
hover{
color:
#FFFFFF;
background:
url（button2.jpg）no-repeat;
}
环节三：
完成课堂讲解的练习例题，并疑难解答
环节四：
复习本次课内容，步骤课后作业。
[章节名称]：
网页CSS样式应用实例
[课堂类型]：
理论■实训□练习■测试□
[学时安排]：
2课时
[目的要求]
掌握CSS样式综合运用方法
[重点]
掌握CSS样式综合运用方法
[难点]
掌握CSS样式综合运用方法
[教法学法]
1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。
2.练习采用学生自主安排，教师给与个别辅导的方式进行。
[参考资料]
《DreamweaverCS5网页设计与制作——DIV+CSS版》吴丰,丁欣主编
清华大学出版社
《动态网页制作教程》（第二版）刘梅彦徐英慧编著清华大学出版社
[教学过程]
环节一：
复习采用UL，LI设计网页菜单的方法，讲解上次课布置的作业。
环节二：
讲解CSS样式表的两个应用实例，通过实例说明其中CSS的设置技巧。
1.无边框输入表格案例
通过为表格单元格添加css样式，设置样式的边框属性为无边框来实现。
table.formdatainput{
width:
100px;
padding:
1px3px1px3px;
margin:
0px;
border:
none;/*输入框不要边框*/
font-family:
Arial;
}
2.鼠标经过行变色效果。
这个效果需要结合Javascript代码来实现。
环节三：
完成课堂讲解的练习例题，并疑难解答
环节四：
复习本次课内容，步骤课后作业。
[章节名称]：
DIV+CSS设计实例——花店页面设计上
[课堂类型]：
理论■实训□练习■测试□
[学时安排]：
2课时
[目的要求]
掌握DIV+CSS设计网页的模式与技巧
[重点]
掌握DIV+CSS设计网页的模式与技巧
[难点]
掌握DIV+CSS设计网页的模式与技巧
[教法学法]
1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。
2.练习采用学生自主安排，教师给与个别辅导的方式进行。
[参考资料]
《DreamweaverCS5网页设计与制作——DIV+CSS版》吴丰,丁欣主编
清华大学出版社
《动态网页制作教程》（第二版）刘梅彦徐英慧编著清华大学出版社
[教学过程]
环节一：
复习上节课介绍的CSS样式表的应用案例，讲解上次课布置的作业。
环节二：
通过一个花店网页设计案例，讲解如何采用DIV+CSS的布局模式来设计网页。
设计步骤：
1.采用Div创建网页的整体结构
2.在每个模块中再添加独立的Div模块，完善网页内容
3.通过对每个模块分别设置CSS样式表完成网页显示效果的设置。
环节三：
完成课堂讲解的练习例题，并疑难解答
环节四：
复习本次课内容，步骤课后作业。
[章节名称]：
DIV+CSS设计实例——花店页面设计下
[课堂类型]：
理论□实训□练习■测试□
[学时安排]：
2课时
[目的要求]
掌握DIV+CSS设计网页的模式与技巧
[重点]
掌握DIV+CSS设计网页的模式与技巧
[难点]
掌握DIV+CSS设计网页的模式与技巧
[教法学法]
1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。
2.练习采用学生自主安排，教师给与个别辅导的方式进行。
[参考资料]
《DreamweaverCS5网页设计与制作——DIV+CSS版》吴丰,丁欣主编
清华大学出版社
《动态网页制作教程》（第二版）刘梅彦徐英慧编著清华大学出版社
[教学过程]
环节一：
复习采用DIV+CSS模式设计网页的方法，讲解上次课布置的作业。
环节二：
让学生完成花店网页设计练习，疑难解答。
[章节名称]：
Photoshop设计网页
[课堂类型]：
理论■实训□练习■测试□
[学时安排]：
2课时
[目的要求]
掌握Photoshop软件在网页设计中的运用
[重点]
掌握使用Photoshop软件设计网页的方法
[难点]
利用切片工具对网页进行分割
[教法学法]
1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。
2.练习采用学生自主安排，教师给与个别辅导的方式进行。
[参考资料]
《DreamweaverCS5网页设计与制作——DIV+CSS版》吴丰,丁欣主编
清华大学出版社
《动态网页制作教程》（第二版）刘梅彦徐英慧编著清华大学出版社
[教学过程]
环节一：
复习采用表格布局模式设计网页的方法。
环节二：
介绍Photoshop软件在网页设计中的应用，通过一个产品介绍网页的实例说明设计的方法。
Photoshop设计网页的方法：
1.通过布局，色彩搭配，将草图设计的网页在计算机上以图片形式绘制出来。
2.对于设计好的图片形式的网页，通过Photoshop软件的切片功能，将图片的网页分割为各个部分模块，再导出为web格式的文件。
环节三：
完成课堂讲解的练习例题，并疑难解答
[章节名称]：
网页设计中的动画——Flash动画
[课堂类型]：
理论■实训□练习■测试□
[学时安排]：
2课时
[目的要求]
掌握网页制作中Flash动画的设计方法技巧
[重点]
掌握网页制作中Flash动画的设计方法技巧
[难点]
掌握网页制作中Flash动画的设计方法技巧
[教法学法]
1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。
2.练习采用学生自主安排，教师给与个别辅导的方式进行。
[参考资料]
《DreamweaverCS5网页设计与
升级会员 