广东省×××职业技术学校

学科教案本

Teaching Plan

20 年———20 年学年度 学期

The (1st/2na)Semester of the Academic Year from 20 to 20

________________________________

学校（School）

学科（Subject） 网页制作项目实训教程 年级（Grade）

_______________________________

教师（Teacher） _______________________________

1

《网页制作项目实训教程》目录

网页设计制作入门

任务1

活动1 创建与修改站点 活动2 制作第一个网页文档 任务2

活动1 制作诗词赏析页面

活动2 对诗词赏析页面进行简单排版 任务3

活动1 制作树形菜单 活动2 制作在线考试试卷

1

注意： ①按住Ctrl键后单击每个任务即可跳转到对应的教案 ②单击按钮可返回目录 ③页面设置参数为： 纸张：B5 页边距左：1.5 页边距右：1.5

项目1

教学 课题 任务1 活动1 创建与修改站点 课题 类型 教 学 目 标 理论+实作 课时 安排 2 上课 时间 1.了解Dreamweaver CS6的工作界面 2.掌握站点的创建与编辑操作 教学 1、2 重点 辅助 课件、多媒体、网络 资源 复习1.你上网浏览过网页吗？ 2.你觉得网页由哪些元素构成？ 引入 3.你知道的网页制作工具有哪些？ 教学 手段 课件 讨论 实作

一、教师布置活动要求 教学 2 难点 教学过程 师生互动 活动设计 布置任务：让学生明确本次课的内容 提问或讨论：DW的工作界面与PS有何异同 1、创建一个名称为“项目1”的本地站点，站点文件夹为D盘。 2、修改“项目1”站点文件夹为桌面上的“Task1-1”文件夹。 二、师生讨论学习新知识 1、启动Dreamweaver CS6软件 双击桌面上的Dreamweaver CS6图标，启动软件，如下图所示。 1

课件 举例 讨论 课件 实作 网络搜索：站点有什么作用 2、Dreamweaver CS6工作界面介绍 在“欢迎界面”中单击“新建”栏下的“HTML”按钮，新建一个HTML网页文件，进入新的窗口界面。 三、教师演示活动实施过程并让学生完成活动任务 1、新建站点 （1）依次单击“站点”->“新建站点”菜单命令，打开“站点设置对象”对话 框。 演示：教师演（2）在打开的“站点设置对象”对话框中设置站点名称为“项目1”，点击“本示活动实施过程 地站点文件夹”文本框后面的“浏览文件夹”按钮，在打开的对话框中选择D盘， 如下图所示。 实训活动：学生练习及点评 （3）单击“保存”按钮，完成站点的创建操作。 2、管理站点 （1）依次单击“站点”-> “管理站点”菜单命令，打开“管理站点”对话框。 （2）在“管理站点”对话框中选择“项目1”站点，单击“编辑”按钮，打开“站点设置对象 项目1”对话框，点击“本地站点文件夹”文本框后面的“浏览文件夹”按钮，在打开的对话框中选择桌面上的“Task1-1”文件夹。 （3）单击“保存”按钮，完成站点的编辑操作。 作业 填写提交实训报告和实训表格 布置 预习作业：预习下一节内容 教学 后记

1

教学 课题 任务1 活动2 制作第一个网页文档 课题 类型 教 学 目 标 理论+实作 课时 安排 2 上课 时间 1.了解网页的基本结构 2.掌握如何新建与保存网页 3.掌握如何在浏览器中浏览网页 教学 1、2 重点 辅助 课件、多媒体、网络 资源 复习1.如何创建站点？ 引入 2.如何编辑站点？ 教学 手段 课件 讨论 实作

一、教师布置活动要求 教学 3 难点 教学过程 师生互动 活动设计 布置任务：让学生明确本次课的内容 讨论：如何实现该案例效果 新建一个网页文件，输入两行文字，并将网页文件以“task1-1-2.html”为文件名保存到“项目1”站点根目录下。如下图所示。 1

课件 举例 讨论 课件 实作 阅读知识窗：DW的三种编辑模式；网页的基本结构 二、师生讨论学习新知识 1、Dreamweaver CS6的三种编辑模式，分别是：代码、拆分、设计。 2、网页的基本结构由三部分组成：声明、头部、主体。 （1）网页文档类型声明 使用来声明网页的文档类型，用来告诉浏览器使用什么样的HTML或XHTML规范来解析网页，它存在于页面的第一行，不区分大小写。 （2）网页的头部  ：定义文档的头部。标签内包含、：该标签用于定义文档的标题。写在标签内。 ：网页标题为“HTML笔记”，在浏览器标题栏 上显示。 （3）网页的主体  ：定义网页文档的主体。 三、教师演示活动实施过程并让学生完成活动任务 教师演1、依次单击“文件”->“新建”命令，打开“新建文档”对话框，在打开的“新演示：示活动实施建文档”对话框中选择“空白页”选项卡，在“页面类型”中选择“HTML”，然后过程 单击“创建”按钮，新建一个HTML网页文件。 2、在“文档工具栏”中的“标题”文本框中，将“无标题文档”更改为“我 的第一个网页”。 实训活动：学3、在“文档工具栏”中单击“设计”按钮，切换到设计视图模式，在文档窗生练习及点口中输入“Hello，World！”，然后按回车键，再输入“欢迎光临，这是我的第一评 个网页！”。 4、依次单击“文件”-> “保存”命令，打开“另存为”对话框，在“文件名”文本框中输入“task1-1-2”，单击“保存”按钮保存网页文件，最后点击“task1-1-2.html”文档标签中的关闭按钮关闭网页文件。 5、在Dreamweaver CS6软件的“欢迎界面”中单击“打开”按钮，打开“打开”对话框，选择“task1-1-2.html”文件，单击“打开”按钮打开该网页文件。（在“文件”面板中展开“站点 – 项目1”，双击“task1-1-2.html”文件名也可以打开该文件。） 6、在“文档工具栏”中单击“在浏览器中预览/调试”工具按钮，在弹出的快 1

捷菜单中单击“编辑浏览器列表”命令，打开“首选参数”对话框。 7、在“在浏览器中预览”选项卡中单击“浏览器”文字后面的“+”号按钮，打开“添加浏览器”对话框，在“名称”文本框中输入“Google Chrome”，单击“应用程序”文本框后面的“浏览”按钮，在打开的“选择浏览器”对话框中按谷歌浏览器的实际安装路径查找并选择，勾选“主浏览器”复选框。单击“确定”按钮完成谷歌浏览器的添加操作。 8、在“文档工具栏”中单击“在浏览器中预览/调试”工具按钮，在弹出的快捷菜单中单击“预览在 Google Chrome”命令（或按F12键），即可启动谷歌浏览器浏览网页。 作业 填写提交实训报告和实训表格 布置 预习作业：预习下一节内容 教学 后记

1

教学 课题 任务2 活动1 制作诗词赏析页面 课题 类型 教 学 目 标 理论+实作 课时 安排 2 上课 时间 1.掌握标题标签的使用 2.掌握段落与换行标签的使用 教学 1、2 重点 辅助 课件、多媒体、网络 资源 复习1.网页的新建与保存。 引入 2.如何添加设置默认浏览器？ 教学 手段 课件 讨论 实作

一、教师布置活动要求 教学 2 难点 教学过程 师生互动 活动设计 布置任务：让学生明确本次课的内容 讨论：如何实现该案例效果 如下图所示，完成诗词赏析页面的制作，完成后以“task1-2.html”为文件名保存。 1

课件 举例 讨论 课件 实作 1、标题标签 标题标签表示一段文字的标题，共划分六级标题

…

，从1级到6级，阅读知识窗：段逐级字体减小。在Dreamweaver CS6中，单击“格式”“段落格式”菜单命令，标题标签；在打开的子菜单中选择“标题1”～“标题6”中的一个，或者在“属性”面板的落与换行标签 “格式”下拉列表框中选择“标题1”～“标题6”中的一个，都可在网页中插入 相对应的标题标签。 2、段落与换行标签 （1）段落标签 在设计模式下，按回车键即可自动添加段落标签

。 （2）换行标签 在设计模式下，按Shift+回车键，即可添加换行标签
。 三、教师演示活动实施过程并让学生完成活动任务 教师演1、打开Dreamweaver CS6软件并新建一个HTML文档，将新建的HTML文档演示：示活动实施切换至“设计”视图模式，并以“task1-2.html”为文件名保存。 过程 2、在“文档工具栏”中的“标题”文本框中，将“无标题文档”更改为“诗 词赏析”。 3、单击“格式”->“段落格式”-> “标题1”菜单命令，在文档窗口中插入“标 实训活动：学题1”标签，输入诗词标题文字。 生练习及点4、输入完标题文字后按回车键另起一行，输入诗词作者，输入完后再按回车评 键另起一行。 二、师生讨论学习新知识 5、单击“格式”-> “段落格式”-> “标题3”菜单命令，输入完第1行诗词后，按Shift+回车键插入换行符，输入第2行诗词。 6、按回车键另起一行，输入“译文及注释”文字，选择输入的“译文及注释”文字，在“属性”面板“格式”下拉列表框中选择“标题2”。 7、按回车键另起一行，输入“译文”，再按回车键另起一行，输入译文正文部分；重复上述操作，完成注释部分的输入操作。（注意：在“凉州词”注释文字的最后按Shift+回车键，插入换行符后再输入“夜光杯”注释文字部分。） 8、保存网页文件并在浏览器中浏览网页效果。 作业 填写提交实训报告和实训表格 布置 预习作业：预习下一节内容 教学 后记

1

教学 课题 任务2 活动2 对诗词赏析页面进行简单排版 课题 类型 教 学 目 标 理论+实作 课时 安排 2 上课 时间 1.掌握粗体标签与斜体标签的使用 2.掌握特殊符号的使用 教学 1、2 重点 辅助 课件、多媒体、网络 资源 复习1.标题标签。 引入 2.段落标签与换行标签。 教学 手段 课件 讨论 实作

一、教师布置活动要求 教学 2 难点 教学过程 师生互动 活动设计 让如下图所示，打开“task1-2.html”文件，对诗词赏析页面进行简单排版操作。 布置任务：学生明确本次课的内容 讨论：如何实现该案例效果 二、师生讨论学习新知识 1、粗体标签 1

课件 举例 讨论 课件 实作 阅读知识窗：粗体标签；斜体标签；特殊符号与水平线标签 粗体标签主要用于文字加粗，可以通过以下两种方法给网页文字添加粗体标签：   在“代码”视图模式中，在需要设置加粗效果的文字两端添加…标签。 在“设计”视图模式中，选择要设置加粗效果的文字，在“属性”面板中单击“粗体”按钮（快捷键为：Ctrl + B）。 2、斜体标签 斜体标签主要用于文字倾斜显示，可以通过以下两种方法给网页文字添加斜体 标签：  在“代码”视图模式中，在需要设置倾斜效果的文字两端添加… 标签。  在“设计”视图模式中，选择要设置倾斜效果的文字，在“属性”面板 中单击“斜体”按钮（快捷键为：Ctrl + I）。 3、特殊符号 4、水平线标签

---

三、教师演示活动实施过程并让学生完成活动任务 1、使用Dreamweaver CS6打开“task1-2.html”并切换到“设计”视图模式。 演示：教师演2、选择诗词作者，在“属性”面板中单击“斜体”按钮，设置倾斜效果。 示活动实施3、选择“译文”两个字，在“属性”面板中单击“粗体”按钮，设置加粗效过程 果。使用同样的方法设置其他需要加粗的文字。 4、在需要设置缩进的文字前单击鼠标，然后依次单击“插入”->“HTML” -> “特 殊字符”-> “不换行空格”菜单命令（快捷键为：Ctrl + Shift + 空格），添加不换实训活动：学行空格使文字缩进，缩进量不够可多添加几个不换行空格，具体效果以浏览器浏览生练习及点评 的效果为准。 5、在文档末尾添加文字“版权所有2018”，然后将光标定位到“2018”的前面， 依次单击“插入”-> “HTML” -> “特殊字符”-> “版权”菜单命令，插入版权符号。 6、在诗词正文的后面单击鼠标，然后依次单击“插入”-> “HTML” -> “水平线”菜单命令，插入水平线。使用同样的方法在文档末尾版权信息前插入水平线。 7、保存网页文件并在浏览器中浏览网页效果。 作业 填写提交实训报告和实训表格 布置 预习作业：预习下一节内容 教学 后记

1

教学 课题 任务3 活动1 制作树形菜单 课题 类型 教 学 目 标 理论+实作 课时 安排 2 上课 时间 1.掌握如何设置项目列表 2.掌握项目列表的类型有哪些 教学 1、2 重点 辅助 课件、多媒体、网络 资源 复习1.粗体与斜体标签。 引入 2.如何在网页中添加不换行空格？ 教学 手段 课件 讨论 实作

一、教师布置活动要求 教学 1 难点 教学过程 师生互动 活动设计 让如下图所示，完成树形菜单的制作，完成后以“task1-3-1.html”为文件名保存。 布置任务：学生明确本次课的内容 讨论：如何实现该案例效果 1

课件 举例 讨论 课件 实作 阅读知识窗：项目列表及项目列表的设置；项目列表的类型 演示：教师演示活动实施过程 实训活动：学生练习及点评 二、师生讨论学习新知识 1、项目列表：也称无序列表，列表项之间无顺序之分，每个列表项前均有一个项目符号。 2、项目列表的设置：项目列表可以通过“属性”面板进行设置。 3、项目列表的类型： 项目列表的类型可以通过type属性设置列表显示符号的类型。    三、教师演示活动实施过程并让学生完成活动任务 1、打开Dreamweaver CS6软件并新建一个HTML文档，将新建的HTML文档切换至“设计”视图模式，并以“task1-3-1.html”为文件名保存。 2、在“文档工具栏”中的“标题”文本框中，将“无标题文档”更改为“ul-li多层嵌套制作树形菜单”。 3、在文档窗口中依次输入相应的文字。选择所输入的文字，单击“属性”面板上的“项目列表”按钮，给输入的文字添加项目列表。 4、在任意一个列表项中单击鼠标，然后依次单击“格式”->表” -> “项目列表”菜单命令，打开的“列表属性”对话框，在“样式”下拉列表框中选择“正方形”，然后单击“确定”按钮。 5、选择“本地磁盘(C:)”～“本地磁盘(D:)”文字，单击“属性”面板上的“缩进”按钮，制作第2级列表项。 6、选择“我的文档”与“我的收藏”文字，单击“属性”面板上的“缩进”按钮，制作第3级列表项。在“我的文档”文字中单击鼠标，再单击“属性”面板上的“列表项目…”按钮，打开“列表属性”对话框，在“样式”下拉列表框中选择“项目符号”，然后单击“确定”按钮。 7、选择“我的游戏”～“我的电影”文字，单击“属性”面板上的“缩进”按钮两次，在“我的游戏”文字中单击鼠标，再单击“属性”面板上的“列表项目…”按钮，打开“列表属性”对话框，在“样式”下拉列表框中选择“项目符号”，然后单击“确定”按钮。 8、保存网页文件并在浏览器中浏览网页效果。 disc：实心圆点 square：实心方框 circle：空心圆点 作业 填写提交实训报告和实训表格 布置 预习作业：预习下一节内容 教学 后记

1

教学 课题 任务3 活动2 制作在线考试试卷 课题 类型 教 学 目 标 理论+实作 课时 安排 2 上课 时间 1.掌握如何设置编号列表 2.掌握编号列表的类型有哪些 教学 1、2 重点 辅助 课件、多媒体、网络 资源 复习1.设置项目列表。 引入 2.如何更改项目列表的类型？ 教学 手段 课件 讨论 实作

一、教师布置活动要求 教学 1 难点 教学过程 师生互动 活动设计 布置任务：让学生明确本次课的内容 讨论：如何实现该案例效果 如下图所示，完成在线考试试卷的制作，完成后以“task1-3-2.html”为文件名保存。 1

课件 举例 讨论 课件 实作 阅读知识窗：编号列表；编号列表的类型 演示：教师演示活动实施过程 实训活动：学生练习及点评 二、师生讨论学习新知识 1、编号列表 编号列表，也称有序列表，以数字或字母作为列表项符号。 2、编号列表的类型 编号列表的类型可以通过type属性设置列表显示编号的类型。      三、教师演示活动实施过程并让学生完成活动任务 1、打开Dreamweaver CS6软件并新建一个HTML文档，将新建的HTML文档切换至“设计”视图模式，并以“task1-3-2.html”为文件名保存。 2、在“文档工具栏”中的“标题”文本框中，将“无标题文档”更改为“在线考试试卷”。 3、在文档窗口中输入在线考试试卷的名称“DreamWeaver在线考试试题”，选择输入的文字，在“属性”面板的“格式”下拉列表框中选择“标题1”，完成在线考试试卷名称的制作。 4、在文档窗口中输入在线考试试卷的题干。选择所输入的文字，单击“属性”面板上的“编号列表”按钮，完成题干的制作。 5、在第1题题干的后面单击鼠标后按回车键，输入第1题的四个选项。选择所输入的第1题的所有选项，单击“属性”面板上的“缩进”按钮。在任意一个选项中单击鼠标，然后单击“属性”面板上的“列表项目…”按钮，打开“列表属性”对话框，在“样式”下拉列表框中选择“大写字母(A, B, C…)”，然后单击“确定”按钮。 6、按照第5步的操作完成其他各题的选项制作，完成后保存文件并在浏览器浏览效果。 1：数字 A：大写英文 a：小写英文 i：小写罗马字符 I：大写罗马字符 作业 填写提交实训报告和实训表格 布置 预习作业：预习下一节内容 教学 后记

1

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文