网页设计与制作__教案.doc
《网页设计与制作__教案.doc》由会员分享，可在线阅读，更多相关《网页设计与制作__教案.doc（66页珍藏版）》请在冰豆网上搜索。
教案首页
课程名称
网页设计与制作
课程类型
使用教材
学时分配
共64学时，其中理论36学时，实践28学时。
课
程
教
学
目
的
与
要
求
该课程是三年制高职高专电子商务专业的职能课程，目标是让学生掌握网页设计的基本概念，学会使用常用的网页设计工具和相关网页美工软件，能够设计制作常见的静态网页。
它要以计算机基础、计算机网络技术课程的学习为基础，也是进一步学习网络编辑、网站建设与管理课程的基础。
主要参考书目
备注
课程教案（№:
1）
授课内容
网页制作基础知识
课型
R理论£实践
授课学时
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．利用网上资源，在百度中搜索“网页配色方案”关键词，下载相关的“网页配色方案”文件，指导以后网页设计中的配色问题。
教学后记：
第一节课，应首先介绍网站发展的前景，重点分解Dreamweaver和其他软件的区别，提出利用网络传播信息，并由此讲述网络发展给网页带来的市场。
通过两节课的讲授，感觉到学生能对本课程产生比较大的兴趣！
第66页
课程教案（№:
2）
授课内容
站点的创建与管理
课型
R理论£实践
授课学时
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的界面及站点的建立
课型
£理论R实践
授课学时
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语言简介
课型
R理论£实践
授课学时
2
教学方法与手段
讲授法
教学目的与要求
1．了解HTML语言，重点掌握HTML文件的基本结构和语法格式；
2．掌握标记语言的用法；
3．熟记
标记、<marquee>标记及常用属性代码。</p><p>教学重点与难点</p><p>教学重点：</p><p>1．HTML文件的基本结构；</p><p>2．HTML语法格式；</p><p>教学难点：</p><p> 设置网页标题；设置网页关键字；制作滚动文字。</p><p>教学过程设计</p><p>一、HTML简介（5分钟左右）</p><p>HTML：</p><p>（HyperTextMarkupLanguage）是一种超文本标记语言，是网页制作的基本语言。</p><p>即通过将特定的标记放置在文本或图片或URL前后，来达到使该段文本或图片或URL以指定方式显示的目的。</p><p>二、HTML文件的基本结构（10分钟左右）</p><p><HTML></p><p><head></p><p><title>网页的标题 网页的主体内容