网页设计与制作教案计算机网页设计计算机网页设计.pdf

《网页设计与制作教案计算机网页设计计算机网页设计.pdf》由会员分享，可在线阅读，更多相关《网页设计与制作教案计算机网页设计计算机网页设计.pdf（5页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、VIP 免费 欢迎下载 附页：授课周次 第 2 周 授课时间 年 月 日至 年 月 日 课程章节 第 1 次课：创建、规划站点 第 2 次课：管理站点 教学目的 第 1 次课：掌握利用 Dreamweaver CS6 软件创建站点的方法 第 2 次课：熟练站点管理的各项操作技能 内容提要 及板书设计 第 1 次课：1.网站站点的分类；2.网站站点的制作流程；3.利用 Dreamweaver cs6创建站点；第 2 次课：1.网站的组织结构；2.站点管理的技能；3.站点内容管理的技能；重点、难点 及解决方案 第 1 次课：重点：了解网站制作流程；掌握建立站点和测试站点的技能 难点：创建本地站点

2、解决方案：学做合一，实践任务 第 2 次课：重点：理解管理本地站点的作用；掌握站点管理和站点内容管理的技能 难点：站点内文件和文件夹的管理操作 解决方案：学做合一，实践任务 教学内容 时间分配 序号 教 学 内 容 学时分配 1 创建、规划站点 90 2 管理站点 90 3 4 5 教学手段 第 1 次课：多媒体教学 第 2 次课：多媒体教学 教学形式（在右栏勾选）理实一体（）理论教学（）实验（）实训（）上机（）作业 作业完成方式 书面（）电子（）教学后记 第 1 次课：第 2 次课：VIP 免费 欢迎下载 序号 具体内容（课堂组织和教学过程设计）授课改进意见及实时教学效果记录 第一次课 创建

3、、规划站点 第一步，问题导入（10分钟）以问题“大家已经知道了网页是放在网站里的，那么网站站点是怎么建立的呢？网站作为网页的内容集合体，在创建初期需要进行合理布局和规划吗？前面所介绍的 Dreamweaver 软件可以用来创建站点吗？可以的话，该如何做呢？”为引入，与学生互动，引出本节课内容。第二步，知识讲解（35分钟）知识讲解要点如下：一、站点 也称“网站”，用来定位网站上的所有文件，是一系列通过超链接而相互联系的网页集合。包括 3 类：二、本地站点的制作流程 1.规划站点。2.素材准备。3.用网站编辑软件创建站点。4.制作 WEB 页面。5.测试站点。6.上传发布站点。三、新建本地站点 网

4、站的站点，好似一个班级，应该首先为班级起一个名称，并配备一个班主任，然后再陆续的加入一些学生。这其实就是我们站点创建时应该为站点起一个名字，并设置一个首页，增加更多的超链接。1、利用 Dreamweaver 软件建立一个本地站点的操作步骤 Step1：打开 Dreamweaver cs6 软件，在菜单栏中选择“站点”或利用快捷按钮 ALT+S打开站点菜单栏。Step2：点击“新建站点”或按键盘“”键打开“站点设置对象”面板。在“站点名称”栏输入站点的名称，中、英文名称都可以。接着在“本地站点文件夹”栏输入用户为新建的站点预先准备好的文件夹路径（如左图 所示），也可以点击该栏右边的文件夹形状图标

5、，选择站点的根目录文件夹（如右图所示）。站点目录文件夹最好是英文命名的。Step 3：点击“站点设置对象”面板右下角的“保存”按钮，完成本地站点的创建。Step 4：站点创建信息保存完毕后就可以在 Dreamweaver 软件的右下角看到本地站点的“文件”面板视图了，包括站点的名称，站点文件夹内的子文件夹等信息。2、利用 DW 创建本地站点的优点。3、建立站点注意问题：（1）用文件夹进行分类存储：如网页文件存放在 html 文件夹中，图 本地站点 远程站点 测试站点 教学内容时间分配第次课创建规划站点第次课管理站点第次课掌握利用软件创建站点的方法第次课熟练站点管理的各项操作技能第次课网站站点的

6、分类网站站点的制作流程利用创建站点第次课网站的组织结构站点管理的技能站点内实践任务第次课重点理解管理本地站点的作用掌握站点管理和站点内容管理的技能难点站点内文件和文件夹的管理操作解决方案学做合一实践任务序号创建规划站点教学内容学时分配管理站点教学手段第次课多媒体教学第次课多媒页免费欢迎下载序号具体内容课堂组织和教学过程设计第一次课创建规划站点授课改进意见及实时教学效果记录第一步问题导入分钟以问题大家已经知道了网页是放在网站里的那么网站站点是怎么建立的呢网站作为网页的内容集合VIP 免费 欢迎下载 序号 具体内容（课堂组织和教学过程设计）授课改进意见及实时教学效果记录 像文件存放在 images

7、 文件夹中。嵌套文件夹的层数不要太多，最多不超过三层，否则超链接时会出错。（2）文件命名要合理：建议全部使用小写的文件名称，不要用中文文件名。文件夹的名称最好用顾名思义的英文，方便以后修改维护。文件 名 也 要 符 合 规 范，比 如 首 页 一 般 命 名 为 index.html或default.html。四、站点目录 站点的目录是指在建立网站时创建的文件目录。这个目录的主要功能是管理和存储网站的所有文件，这些文件包括网页文件、图片文件、音视频文件和服务器端处理程序等。五、目录结构设计原则 1.不要将所有文件都存放在根目录下。（避免文件管理混乱，上传速度慢）2.按栏目内容建立子目录。3.在

8、每个主目录下都建立独立的 images 目录。4.目录的层次不要太深。（目录下一级层次结构建议不要超过 3 层）5.目录内文件夹命名要简洁。1）不要使用中文命名。2）不要使用空格及“、&、*、$”等特殊字符命名。3）不要使用过长名称。4）尽量使用意义明确的名称。六、常见网站目录内的文件夹名称 Manager、audio、backup、css、images、source、video、zip、database 第三步，课堂实践（35分钟）1、利用 Dreamweaver 软件建立一个属于自己的本地站点。站点名称为自己的姓名，站点内有 images 和 css 两个文件夹。最后将站点“文件”面板截图

9、保存上交。2、请仔细观察以下文件名称，并把它们归类到相应的文件夹内。Top.jpg,logo.png,logout.jsp,body.css,end.flv,toolbar.gif Login.jsp,title.css,app.zip,news.mov,list.rar,aboutme.rmvb 文件夹名称 文件名 images css video zip source 第四步，教师总结（10分钟）总结本次课内容，回顾如何利用 DW 建立本地站点，强调站点目录的设计原则。教学内容时间分配第次课创建规划站点第次课管理站点第次课掌握利用软件创建站点的方法第次课熟练站点管理的各项操作技能第次课网站

10、站点的分类网站站点的制作流程利用创建站点第次课网站的组织结构站点管理的技能站点内实践任务第次课重点理解管理本地站点的作用掌握站点管理和站点内容管理的技能难点站点内文件和文件夹的管理操作解决方案学做合一实践任务序号创建规划站点教学内容学时分配管理站点教学手段第次课多媒体教学第次课多媒页免费欢迎下载序号具体内容课堂组织和教学过程设计第一次课创建规划站点授课改进意见及实时教学效果记录第一步问题导入分钟以问题大家已经知道了网页是放在网站里的那么网站站点是怎么建立的呢网站作为网页的内容集合VIP 免费 欢迎下载 序号 具体内容（课堂组织和教学过程设计）授课改进意见及实时教学效果记录 第二次课 管理站点

11、第一步：课堂演练（20分钟）结合上次课所学，建立一个简单的个人网站。网站栏目：主页 index 关于我 about 相册 photo 作品 works 日志 diary 留言本 message 第二步，问题导入（10分钟）引导学生回顾上次课的知识点，以问题“大家知道本地可以建立多个站点，那这些站点和站点里面的文件内容怎么管理呢？”为引入，与学生互动，引出本节课内容。第三步，知识讲解（15分钟）知识讲解要点如下：一、管理本地站点的作用 二、Dreamweaver CS6 软件“站点管理”界面介绍 运行 Dreamweaver CS6软件后，在菜单栏中选择“站点”或按快捷键，在下拉菜单中单击“管理

12、站点”或按 键，打开“管理站点”对话框。三、本地站点管理操作 教学内容时间分配第次课创建规划站点第次课管理站点第次课掌握利用软件创建站点的方法第次课熟练站点管理的各项操作技能第次课网站站点的分类网站站点的制作流程利用创建站点第次课网站的组织结构站点管理的技能站点内实践任务第次课重点理解管理本地站点的作用掌握站点管理和站点内容管理的技能难点站点内文件和文件夹的管理操作解决方案学做合一实践任务序号创建规划站点教学内容学时分配管理站点教学手段第次课多媒体教学第次课多媒页免费欢迎下载序号具体内容课堂组织和教学过程设计第一次课创建规划站点授课改进意见及实时教学效果记录第一步问题导入分钟以问题大家已经知道

13、了网页是放在网站里的那么网站站点是怎么建立的呢网站作为网页的内容集合VIP 免费 欢迎下载 序号 具体内容（课堂组织和教学过程设计）授课改进意见及实时教学效果记录 主要指站点的创建、复制、编辑、删除、导入和导出等的管理。四、站点内容管理的作用 五、本地站点内容管理操作-Dreamweaver CS6 1.创建文件夹 2.创建文件 3.文件或文件夹的移动和复制 4.删除文件或文件夹 第四步，课堂实践（35分钟）1、利用 Dreamweaver 软件建立一个本地站点，对站点分别进行复制、编辑、导出和删除四项操作，每项操作截一张图保存并上交。2、用 Dreamweaver 软件建立一个名为“站点文件

14、管理操作”的新站点，在“文件”面板里新建 index.html 文件和 images 文件夹，并在 images文件夹内新建一个 page 子文件夹，并把 index.html 文件复制到该文件夹内。操作完毕后对“文件”面板进行截图并上交。第五步，教师总结（10分钟）总结本次课的内容，特别是利用 Dreamweaver 软件进行站点建立和管理过程中应注意的问题。教师查看学生提交的作业，总结本次课堂练习中学生出现的问题，提出在操作中应该注意的事项。教学内容时间分配第次课创建规划站点第次课管理站点第次课掌握利用软件创建站点的方法第次课熟练站点管理的各项操作技能第次课网站站点的分类网站站点的制作流程利用创建站点第次课网站的组织结构站点管理的技能站点内实践任务第次课重点理解管理本地站点的作用掌握站点管理和站点内容管理的技能难点站点内文件和文件夹的管理操作解决方案学做合一实践任务序号创建规划站点教学内容学时分配管理站点教学手段第次课多媒体教学第次课多媒页免费欢迎下载序号具体内容课堂组织和教学过程设计第一次课创建规划站点授课改进意见及实时教学效果记录第一步问题导入分钟以问题大家已经知道了网页是放在网站里的那么网站站点是怎么建立的呢网站作为网页的内容集合