《网页设计与制作》教案.docx
《《网页设计与制作》教案.docx》由会员分享,可在线阅读,更多相关《《网页设计与制作》教案.docx(66页珍藏版)》请在冰豆网上搜索。
《网页设计与制作》教案
网页设计与制作教案
课程名称
网页设计与制作
课程类型
使用教材
教材名称:
网页设计与制作实用教程主编:
刘艳丽
出版社:
高等教育出版社日期:
2011年5月
学时分配
共64学时,其中理论36学时,实践28学时。
课
程
教
学
目
的
与
要
求
该课程是三年制高职高专电子商务专业的职能课程,目标是让学生掌握网页设计的基本概念,学会使用常用的网页设计工具和相关网页美工软件,能够设计制作常见的静态网页。
它要以计算机基础、计算机网络技术课程的学习为基础,也是进一步学习网络编辑、网站建设与管理课程的基础。
主要参考书目
赵喜清,崔海涛《网页设计与制作》哈尔滨工业大学出版社,2010.9
孙振业《网页设计与制作》高等教育出版社,2009.3
课程教案(№:
1)
授课内容
网页制作基础知识
课型
☞理论☞实践
授课学时
2
教学方法与手段
讲授法
教学目的与要求
本次课程将讲授网页制作的基本知识,使学生了解到什么是网页,网页制作涉及到哪些工具、网页与网站有什么区别,网页与普通的文档有什么区别等。
通过讲授也将使学生了解到网页的组成,网页语言的种类及各自特点;动态网页与静态网页的定义;Internet信息发布的原理等等内容。
教学重点与难点
教学重点:
1.Internet信息访问原理。
2.什么是网页?
(1)网页内容组成;
(2)网页编写语言种类及特点。
3.Dreamweaver8功能简介。
教学难点:
Internet信息访问原理;网页编写语言种类及特点。
教学过程设计
一、基础知识
1.网页简介(15分钟左右)
网页:
是组成WWW(WorldWideWeb:
万维网)的基本元素,也被称为页面或Web页。
不同的网页通过超链接联系在一起,构成了WWW纵横交织结构。
网站:
就是一个相互链接的网页的集合,它们可以共享。
大的网站页面数量多达几十万,甚至上百万页,小的个人网站也可以只包含数个页面。
主页:
是网站中的一个特殊网页,它是在WWW上进入网站的第一个网页,其中包含指向其他网页的超链接,通常主页的名称是固定的。
2.Internet简介(5分钟左右)
3.了解常用的网页制作工具(10分钟左右)
如:
Dreamweaver和FrontPage
4.了解美化网页的主要工具(10分钟左右)
(1)图像处理软件:
Photoshop、Fireworks、CorelDRAW等
(2)动画制作工具:
Flash
5.了解网页中的脚本语言(10分钟左右)
如:
VBScript、JavaScript
6.了解服务器端主要技术(10分钟左右)
服务器端脚本语言:
ASP、JSP、PHP、CGI等。
它们的形式与HTML有些类似,但功能更加强大,能够实现许多功能。
二、了解建立网站的基本流程(10分钟左右)
1.确定网站主题
2.搜集资料
3.规划网站
4.选择合适的制作工具
5.制作网页
6.上传测试
7.推广宣传
8.维护更新
三、DreamweaverCS3基础(20分钟左右)
1.Dreamweaver的发展史
2.DreamweaverCS3的新功能
3.DreamweaverCS3工作区简介
4.网页文档的基本操作
作业/思考题:
1.列举你所了解的网页设计的常用工具和美化网页的主要工具
2.建立网站的基本流程有哪些步骤?
请归纳总结。
3.利用网上资源,在XX中搜索“网页配色方案”关键词,下载相关的“网页配色方案”文件,指导以后网页设计中的配色问题。
教学后记:
第一节课,应首先介绍网站发展的前景,重点分解Dreamweaver和其他软件的区别,提出利用网络传播信息,并由此讲述网络发展给网页带来的市场。
通过两节课的讲授,感觉到学生能对本课程产生比较大的兴趣!
课程教案(№:
2)
授课内容
站点的创建与管理
课型
☞理论☞实践
授课学时
2
教学方法与手段
讲授法
教学目的与要求
本次课程将讲授网站站点的创建与管理知识,使学生了解到什么是站点,站点的种类,站点的作用,站点文件的管理。
站点的发布及网页的预览。
教学重点与难点
教学重点:
1.站点的创建;
2.站点文件的管理;
3.站点文件的预览;
4.站点地图的生成。
教学难点:
测试利用服务器技术的站点;站点地图创建的条件;远程站点的创建。
教学过程设计
一、站点(10分钟左右)
二、也称“网站”,用来定位网站上的所有文件,是一系列通过超链接而相互联系的网页集合。
建立网站首先要在本地计算机上构建本地站点来管理站点中的文档,制作网页,测试完毕后,上传到Internet服务器。
三、新建本地站点(20分钟左右)
1.站点菜单->新建站点
2.站点菜单->管理站点->新建
3.建立站点注意问题:
(1)用文件夹进行分类存储:
如网页文件存放在html文件夹中,图像文件存放在images文件夹中。
嵌套文件夹的层数不要太多,最多不超过三层,否则超链接时会出错。
(2)文件命名要合理:
建议全部使用小写的文件名称,不要用中文文件名。
文件夹的名称最好用顾名思义的英文,方便以后修改维护。
文件名也要符合规范,比如首页一般命名为index.html或default.html。
四、网站文件的管理(20分钟左右)
1.文件的创建(鼠标右击站点->新建文件;文件菜单->新建;ctrl+N);
2.文件的选择(鼠标点击单选;按ctrl或shift键辅助多选);
3.打开和编辑文件(双击);
4.删除文件;
5.重命名文件(右击文件;F2);
6.保存及另存为文件:
ctrl+s/f12;或通过文件菜单;
7.文件的复制,移动,关闭:
ctrl+c.ctrl+x,ctrl+w;
8.消除文件只读属性:
右击文件选择;
9.将文件设为首页:
和制作站点地图有关;
10.给文件添加设计备注:
备注文件的存放位置和文件的扩展名。
五、页面预览(F12键)(20分钟左右)
1.文件菜单->在浏览器中预览->选择浏览器
2.工具栏->地球土标->选择浏览器:
此时可通过”添加浏览器”选项来增加更多的浏览器
3.编辑菜单->首选参数->在浏览器中预览->不选”使用临时文件预览”
六、站点的编辑和管理(20分钟左右)
1.站点管理器:
文件面板(窗口菜单或F8键)
2.打开现有本地站点
3.查看本地和远程网站的文件和地图
4.调整窗口视图
5.保存站点地图
6.重建站点缓存
7.站点编辑,复制,删除,导入与导出:
站点菜单->管理站点
作业/思考题:
1.在制作网页前为什么要首先建立站点?
2.定义本地站点的含义是什么?
3.建立站点应该注意的问题?
教学后记:
网站的站点,好似一个班级,应该首先为班级起一个名称,并配备一个班主任,然后再陆续的加入一些学生。
这其实就是我们站点创建时应该为站点起一个名字,并设置一个首页,增加更多的超链接。
课程教案(№:
3)
授课内容
了解Dreamweaver的界面及站点的建立
课型
☞理论☞实践
授课学时
2
教学方法与手段
讲授法、演示法
教学目的与要求
利用DreamweaverCS3熟练创建本地.远程站点。
并掌握Dreamweaver的基本操作。
教学重点与难点
教学重点:
1.站点的创建;
2.站点文件的管理;
3.站点文件的预览;
4.站点地图的生成。
教学难点:
站点地图创建的条件;远程站点的创建。
教学过程设计
1.本地站点的创建
(1)运行软件
(2)站点菜单->新建站点
(3)远程服务器连接选择为无
2.远程站点的创建
(1)运行软件
(2)站点菜单->新建站点
(3)远程服务器连接选择为FTP
3.IIS的安装
(1)我的电脑->控制面板->添加和删除程序
(2)选择添加windows组件
(3)勾选Internet信息服务,更新安装
4.创建利用服务器技术的站点
(1)运行软件
(2)站点菜单->新建站点
(3)是否利用服务器技术设置为是
(4)允许IIS,将默认站点的主目录设置为站点所对应的文件夹
(5)设置服务器站点的测试服务器为http:
//localhost
5.站点文件的管理
站点文件的创建.编辑及预览
6.管理站点
(1)站点菜单->新建站点
(2)实现对站点创建.删除.编辑
(3)导出并重新导入站点
作业/思考题:
1.在制作网页前为什么要首先建立站点?
2.定义本地站点的含义是什么?
3.建立站点应该注意的问题?
教学后记:
通过本次实训,让学生系统的掌握站点的创建及管理,了解各类站点的创建过程,并能正确的导出和导入站点文件。
课程教案(№:
4)
授课内容
HTML语言简介
课型
☞理论☞实践
授课学时
2
教学方法与手段
讲授法
教学目的与要求
1.了解HTML语言,重点掌握HTML文件的基本结构和语法格式;
2.掌握标记语言的用法;
3.熟记
标记、