网页设计与制作教案
我喜欢的一则格言作文-潘安邦
VIP免费 欢迎下载
授课周次
课程章节
第2周 授课时间 年 月 日至 年 月 日
第1次课：创建、规划站点
第2次课：管理站点
第1次课：掌握利用Dreamweaver CS6 软件创建站点的方法
教学目的
第2次课：熟练站点管理的各项操作技能
第1次课：
1.网站站点的分类；
2.网站站点的制作流程；
3.利用Dreamweaver cs6创建站点；
内容提要
及板书设计
第2次课：
1.网站的组织结构；
2.站点管理的技能；
3.站点内容管理的技能；
第1次课：
重点：了解网站制作流程；掌握建立站点和测试站点的技能
难点：创建本地站点
重点、难点 解决方案：学做合一，实践任务
及解决方案 第2次课：
重点：理解管理本地站点的作用；掌握站点管理和站点内容管理的技能
难点：站点内文件和文件夹的管理操作
解决方案：学做合一，实践任务
序学时
教 学 内 容
号 分配
1
创建、规划站点
教学内容
2 管理站点
时间分配
3
4
5
90
90
教学形式
理实一体（√）理论教学（ ）
第1次课：多媒体教学
教学手段
第2次课：多媒体教学
（在右栏勾选）
实验（ ）实训（ ）
上机（√）
作业
作业完
书面（ ）电子（√）
成方式
第1次课：
教学后记
第2次课：
附页：
VIP免费 欢迎下载
序
号
具体内容（课堂组织和教学过程设计）
第一步，问题导入（10分钟）
以问题“大家已经知道了网页是放在网站里的，那么网站站点是怎
第一次课 创建、规划站点
么建立的呢？网站作为网页的内容集合体，在创建初期需要进行合
理布
局和规划吗？前面所介绍的Dreamweaver软件可以用来创建站点吗？可
以的话，
该如何做呢？”为引入，与学生互动，引出本节课内容。
第二步，知识讲解（35分钟）
知识讲解要点如下：
一、站点
也称“网站”，用来定位网站上的所有文件，是一系
列通过超链接而
相互联系的网页集合。包括3类 ：
本地站点 远程站点
测试站点
二、本地站点的制作流程
1.规划站点。
2.素材准备。
3.用网站编辑软件创建站点。
4.制作WEB页面。
5.测试站点。
6.上传发布站点。
三、新建本地站点
网站的站点，好似一个班级，应该首先为
班级起一个名称，并配备
一个班主任，然后再陆续的加入一些学生。这其实就是我们站点创建时
应该为站点起一个名字，并设置一个首页，增加更多的超链接。
1、利用Dreamweaver软件建立一个本地站点的操作步骤
Step1：打开Dreamweaver cs6
软件，在菜单栏中选择“站点”或利用
快捷按钮ALT+S打开站点菜单栏。
Step2：
点击“新建站点”或按键盘“Ｎ”键打开“站点设置对象”面板。
在“站点名称”栏输入站点的名称，中
、英文名称都可以。接着在“本
地站点文件夹”栏输入用户为新建的站点预先准备好的文件夹路径（如<
br>左图 所示），也可以点击该栏右边的文件夹形状图标，选择站点的根目
录文件夹（如右图所示）
。站点目录文件夹最好是英文命名的。
Step
3：点击“站点设置对象”面板右下角的“保存”按钮，完成本地
站点的创建。
Step 4
：站点创建信息保存完毕后就可以在Dreamweaver软件的右下角
看到本地站点的“文件”面板
视图了，包括站点的名称，站点文件夹内
的子文件夹等信息。
2、利用DW创建本地站点的优点。
3、建立站点注意问题：
（1）用文件夹进行分类存储：如网页文件存放在html文件夹中，图
授课改进意见及实
时教学效果记录
VIP免费
欢迎下载
序
号
具体内容（课堂组织和教学过程设计）
像文件存放在im
ages文件夹中。嵌套文件夹的层数不要太多，最多不
超过三层，否则超链接时会出错。
（2）文件命名要合理：建议全部使用小写的文件名称，不要用中文文
件名。文件夹的名称最好用顾名思
义的英文，方便以后修改维护。文
件名也要符合规范，比如首页一般命名为或
。
四、站点目录
站点的目录是指在建立网站时创建的文件目录。这个目录的主要功
能是
管理和存储网站的所有文件，这些文件包括网页文件、图片文件、
音视频文件和服务器端处理程序等。
五、目录结构设计原则
1.不要将所有文件都存放在根目录下。（避免文件管理混乱，上传速度
慢）
2.按栏目内容建立子目录。
3.在每个主目录下都建立独立的images目录。
4.目录的层次不要太深。 （目录下一级层次结构建议不要超过3层）
5.目录内文件夹命名要简洁。
1）不要使用中文命名。
2）不要使用空格及“@、&、*、$$ ”等特殊字符命名。
3）不要使用过长名称。
4）尽量使用意义明确的名称。
六、常见网站目录内的文件夹名称
Manager、 audio、backup
、css、images、source、video、zip、database
第三步，课堂实践（35分钟）
1、利用Dreamweaver软件建立一个属于自己的本
地站点。站点名称为自
己的姓名，站点内有
images和css两个文件夹。最后将站点“文件”面
板截图保存上交。
2、请仔细观察以下文件名称，并把它们归类到相应的文件夹内。
, , , , ,
, , , , ,
文件夹名称
images
css
video
zip
source
文件名
授课改进意见及实
时教学效果记录
第四步，教师总结（10分钟）
总结本次课内容，回顾如何利用DW建立本地站点，强调站点目录的
设计原则。
VIP免费 欢迎下载
序
号
具体内容（课堂组织和教学过程设计）
授课改进意见及实
时教学效果记录
第二次课 管理站点
第一步：课堂演练（20分钟）
结合上次课所学，建立一个简单的个人网站。
网站栏目：
主页index
关于我about
相册photo
作品works
日志diary
留言本message
第二步，问题导入（10分钟）
引导
学生回顾上次课的知识点，以问题“大家知道本地可以建立多个
站点，那这些站点和站点里面的文件内容
怎么管理呢？”为引入，与学
生互动，引出本节课内容。
第三步，知识讲解（15分钟）
知识讲解要点如下：
一、管理本地站点的作用
二、Dreamweaver
CS6软件“站点管理”界面介绍
运行Dreamweaver CS6软件后，在菜单栏中选择“站
点”或按
快捷键，在下拉菜单中单击“管理站点”或按
三、本地站点管理操作
VIP免费
欢迎下载
序
号
具体内容（课堂组织和教学过程设计）
主要指站点的创建、复制、编辑、删除、导入和导出等的管理。
四、站点内容管理的作用
五、本地站点内容管理操作-- Dreamweaver CS6
1.创建文件夹
2.创建文件
3.文件或文件夹的移动和复制
4.删除文件或文件夹
第四步，课堂实践（35分钟）
1、利用Dreamweaver软件建立一个本地站点，对
站点分别进行复制、编
辑、导出和删除四项操作，每项操作截一张图保存并上交。
2、用Dr
eamweaver软件建立一个名为“站点文件管理操作”的新站点，
在“文件”面板里新建文件和i
mages文件夹，并在images
文件夹内新建一个page子文件夹，并把文件复制到该文件夹<
br>内。操作完毕后对“文件”面板进行截图并上交。
第五步，教师总结（10分钟）
总结本次课的内容，特别是利用Dreamweaver软件进行站点建立和
管理过程中应注意的问题。
教师查看学生提交的作业，总结本次课堂练习中学生出现的问题，
提出在操作中应该注意的事项
。
授课改进意见及实
时教学效果记录
VIP免费 欢迎下载
授课周次
课程章节
第2周 授课时间 年 月 日至 年 月 日
第1次课：创建、规划站点
第2次课：管理站点
第1次课：掌握利用Dreamweaver CS6 软件创建站点的方法
教学目的
第2次课：熟练站点管理的各项操作技能
第1次课：
1.网站站点的分类；
2.网站站点的制作流程；
3.利用Dreamweaver cs6创建站点；
内容提要
及板书设计
第2次课：
1.网站的组织结构；
2.站点管理的技能；
3.站点内容管理的技能；
第1次课：
重点：了解网站制作流程；掌握建立站点和测试站点的技能
难点：创建本地站点
重点、难点 解决方案：学做合一，实践任务
及解决方案 第2次课：
重点：理解管理本地站点的作用；掌握站点管理和站点内容管理的技能
难点：站点内文件和文件夹的管理操作
解决方案：学做合一，实践任务
序学时
教 学 内 容
号 分配
1
创建、规划站点
教学内容
2 管理站点
时间分配
3
4
5
90
90
教学形式
理实一体（√）理论教学（ ）
第1次课：多媒体教学
教学手段
第2次课：多媒体教学
（在右栏勾选）
实验（ ）实训（ ）
上机（√）
作业
作业完
书面（ ）电子（√）
成方式
第1次课：
教学后记
第2次课：
附页：
VIP免费 欢迎下载
序
号
具体内容（课堂组织和教学过程设计）
第一步，问题导入（10分钟）
以问题“大家已经知道了网页是放在网站里的，那么网站站点是怎
第一次课 创建、规划站点
么建立的呢？网站作为网页的内容集合体，在创建初期需要进行合
理布
局和规划吗？前面所介绍的Dreamweaver软件可以用来创建站点吗？可
以的话，
该如何做呢？”为引入，与学生互动，引出本节课内容。
第二步，知识讲解（35分钟）
知识讲解要点如下：
一、站点
也称“网站”，用来定位网站上的所有文件，是一系
列通过超链接而
相互联系的网页集合。包括3类 ：
本地站点 远程站点
测试站点
二、本地站点的制作流程
1.规划站点。
2.素材准备。
3.用网站编辑软件创建站点。
4.制作WEB页面。
5.测试站点。
6.上传发布站点。
三、新建本地站点
网站的站点，好似一个班级，应该首先为
班级起一个名称，并配备
一个班主任，然后再陆续的加入一些学生。这其实就是我们站点创建时
应该为站点起一个名字，并设置一个首页，增加更多的超链接。
1、利用Dreamweaver软件建立一个本地站点的操作步骤
Step1：打开Dreamweaver cs6
软件，在菜单栏中选择“站点”或利用
快捷按钮ALT+S打开站点菜单栏。
Step2：
点击“新建站点”或按键盘“Ｎ”键打开“站点设置对象”面板。
在“站点名称”栏输入站点的名称，中
、英文名称都可以。接着在“本
地站点文件夹”栏输入用户为新建的站点预先准备好的文件夹路径（如<
br>左图 所示），也可以点击该栏右边的文件夹形状图标，选择站点的根目
录文件夹（如右图所示）
。站点目录文件夹最好是英文命名的。
Step
3：点击“站点设置对象”面板右下角的“保存”按钮，完成本地
站点的创建。
Step 4
：站点创建信息保存完毕后就可以在Dreamweaver软件的右下角
看到本地站点的“文件”面板
视图了，包括站点的名称，站点文件夹内
的子文件夹等信息。
2、利用DW创建本地站点的优点。
3、建立站点注意问题：
（1）用文件夹进行分类存储：如网页文件存放在html文件夹中，图
授课改进意见及实
时教学效果记录
VIP免费
欢迎下载
序
号
具体内容（课堂组织和教学过程设计）
像文件存放在im
ages文件夹中。嵌套文件夹的层数不要太多，最多不
超过三层，否则超链接时会出错。
（2）文件命名要合理：建议全部使用小写的文件名称，不要用中文文
件名。文件夹的名称最好用顾名思
义的英文，方便以后修改维护。文
件名也要符合规范，比如首页一般命名为或
。
四、站点目录
站点的目录是指在建立网站时创建的文件目录。这个目录的主要功
能是
管理和存储网站的所有文件，这些文件包括网页文件、图片文件、
音视频文件和服务器端处理程序等。
五、目录结构设计原则
1.不要将所有文件都存放在根目录下。（避免文件管理混乱，上传速度
慢）
2.按栏目内容建立子目录。
3.在每个主目录下都建立独立的images目录。
4.目录的层次不要太深。 （目录下一级层次结构建议不要超过3层）
5.目录内文件夹命名要简洁。
1）不要使用中文命名。
2）不要使用空格及“@、&、*、$$ ”等特殊字符命名。
3）不要使用过长名称。
4）尽量使用意义明确的名称。
六、常见网站目录内的文件夹名称
Manager、 audio、backup
、css、images、source、video、zip、database
第三步，课堂实践（35分钟）
1、利用Dreamweaver软件建立一个属于自己的本
地站点。站点名称为自
己的姓名，站点内有
images和css两个文件夹。最后将站点“文件”面
板截图保存上交。
2、请仔细观察以下文件名称，并把它们归类到相应的文件夹内。
, , , , ,
, , , , ,
文件夹名称
images
css
video
zip
source
文件名
授课改进意见及实
时教学效果记录
第四步，教师总结（10分钟）
总结本次课内容，回顾如何利用DW建立本地站点，强调站点目录的
设计原则。
VIP免费 欢迎下载
序
号
具体内容（课堂组织和教学过程设计）
授课改进意见及实
时教学效果记录
第二次课 管理站点
第一步：课堂演练（20分钟）
结合上次课所学，建立一个简单的个人网站。
网站栏目：
主页index
关于我about
相册photo
作品works
日志diary
留言本message
第二步，问题导入（10分钟）
引导
学生回顾上次课的知识点，以问题“大家知道本地可以建立多个
站点，那这些站点和站点里面的文件内容
怎么管理呢？”为引入，与学
生互动，引出本节课内容。
第三步，知识讲解（15分钟）
知识讲解要点如下：
一、管理本地站点的作用
二、Dreamweaver
CS6软件“站点管理”界面介绍
运行Dreamweaver CS6软件后，在菜单栏中选择“站
点”或按
快捷键，在下拉菜单中单击“管理站点”或按
三、本地站点管理操作
VIP免费
欢迎下载
序
号
具体内容（课堂组织和教学过程设计）
主要指站点的创建、复制、编辑、删除、导入和导出等的管理。
四、站点内容管理的作用
五、本地站点内容管理操作-- Dreamweaver CS6
1.创建文件夹
2.创建文件
3.文件或文件夹的移动和复制
4.删除文件或文件夹
第四步，课堂实践（35分钟）
1、利用Dreamweaver软件建立一个本地站点，对
站点分别进行复制、编
辑、导出和删除四项操作，每项操作截一张图保存并上交。
2、用Dr
eamweaver软件建立一个名为“站点文件管理操作”的新站点，
在“文件”面板里新建文件和i
mages文件夹，并在images
文件夹内新建一个page子文件夹，并把文件复制到该文件夹<
br>内。操作完毕后对“文件”面板进行截图并上交。
第五步，教师总结（10分钟）
总结本次课的内容，特别是利用Dreamweaver软件进行站点建立和
管理过程中应注意的问题。
教师查看学生提交的作业，总结本次课堂练习中学生出现的问题，
提出在操作中应该注意的事项
。
授课改进意见及实
时教学效果记录