中职《网页制作项目实训教程》教案项目1 网页设计制作入门.docx
- 文档编号:9395667
- 上传时间:2023-02-04
- 格式:DOCX
- 页数:18
- 大小:349.73KB
中职《网页制作项目实训教程》教案项目1 网页设计制作入门.docx
《中职《网页制作项目实训教程》教案项目1 网页设计制作入门.docx》由会员分享,可在线阅读,更多相关《中职《网页制作项目实训教程》教案项目1 网页设计制作入门.docx(18页珍藏版)》请在冰豆网上搜索。
中职《网页制作项目实训教程》教案项目1网页设计制作入门
广东省×××职业技术学校
学科教案本
TeachingPlan
20年———20 年学年度 学期
The(1st/2na)SemesteroftheAcademicYearfrom20to20
学校(School)
学科(Subject)
年级(Grade)
_______________________________
教师(Teacher)
《网页制作项目实训教程》目录
注意:
①按住Ctrl键后单击每个任务即可跳转到对应的教案
②单击
按钮可返回目录
③页面设置参数为:
纸张:
B5
页边距左:
1.5
页边距右:
1.5
项目1 网页设计制作入门
任务1
活动1创建与修改站点
活动2制作第一个网页文档
任务2
活动1制作诗词赏析页面
活动2对诗词赏析页面进行简单排版
任务3
活动1制作树形菜单
活动2制作在线考试试卷
教学
课题
任务1活动1创建与修改站点
课题
类型
理论+实作
课时
安排
2
上课
时间
教
学
目
标
1.了解DreamweaverCS6的工作界面
2.掌握站点的创建与编辑操作
教学
重点
1、2
教学
难点
2
辅助
资源
课件、多媒体、网络
复习引入
1.你上网浏览过网页吗?
2.你觉得网页由哪些元素构成?
3.你知道的网页制作工具有哪些?
教学
手段
教学过程
师生互动
活动设计
课件
讨论
实作
课件
举例
讨论
课件
实作
一、教师布置活动要求
1、创建一个名称为“项目1”的本地站点,站点文件夹为D盘。
2、修改“项目1”站点文件夹为桌面上的“Task1-1”文件夹。
二、师生讨论学习新知识
1、启动DreamweaverCS6软件
双击桌面上的DreamweaverCS6图标,启动软件,如下图所示。
2、DreamweaverCS6工作界面介绍
在“欢迎界面”中单击“新建”栏下的“HTML”按钮,新建一个HTML网页文件,进入新的窗口界面。
三、教师演示活动实施过程并让学生完成活动任务
1、新建站点
(1)依次单击“站点”->“新建站点”菜单命令,打开“站点设置对象”对话框。
(2)在打开的“站点设置对象”对话框中设置站点名称为“项目1”,点击“本地站点文件夹”文本框后面的“浏览文件夹”按钮,在打开的对话框中选择D盘,如下图所示。
(3)单击“保存”按钮,完成站点的创建操作。
2、管理站点
(1)依次单击“站点”->“管理站点”菜单命令,打开“管理站点”对话框。
(2)在“管理站点”对话框中选择“项目1”站点,单击“编辑”按钮,打开“站点设置对象项目1”对话框,点击“本地站点文件夹”文本框后面的“浏览文件夹”按钮,在打开的对话框中选择桌面上的“Task1-1”文件夹。
(3)单击“保存”按钮,完成站点的编辑操作。
布置任务:
让学生明确本次课的内容
提问或讨论:
DW的工作界面与PS有何异同
网络搜索:
站点有什么作用
演示:
教师演示活动实施过程
实训活动:
学生练习及点评
作业
布置
填写提交实训报告和实训表格
预习作业:
预习下一节内容
教学
后记
教学
课题
任务1活动2制作第一个网页文档
课题
类型
理论+实作
课时
安排
2
上课
时间
教
学
目
标
1.了解网页的基本结构
2.掌握如何新建与保存网页
3.掌握如何在浏览器中浏览网页
教学
重点
1、2
教学
难点
3
辅助
资源
课件、多媒体、网络
复习引入
1.如何创建站点?
2.如何编辑站点?
教学
手段
教学过程
师生互动
活动设计
课件
讨论
实作
课件
举例
讨论
课件
实作
一、教师布置活动要求
新建一个网页文件,输入两行文字,并将网页文件以“task1-1-2.html”为文件名保存到“项目1”站点根目录下。
如下图所示。
二、师生讨论学习新知识
1、DreamweaverCS6的三种编辑模式,分别是:
代码、拆分、设计。
2、网页的基本结构由三部分组成:
声明、头部、主体。
(1)网页文档类型声明
使用
doctypehtml>来声明网页的文档类型,用来告诉浏览器使用什么样的HTML或XHTML规范来解析网页,它存在于页面的第一行,不区分大小写。
(2)网页的头部
●
:定义文档的头部。
标签内包含、
●:
提供有关页面的元信息(针对搜索引擎和更新频度的描述和关键词等),写在
标签内。①
设置页面的编码格式UTF-8。
②
告诉搜索引擎站点制作的作者。
③
告诉搜索引擎网站的关键字。
④
告诉搜索引擎网站的内容。
●
该标签用于定义文档的标题。
写在
标签内。网页标题为“HTML笔记”,在浏览器标题栏上显示。
(3)网页的主体
●
定义网页文档的主体。
三、教师演示活动实施过程并让学生完成活动任务
1、依次单击“文件”->“新建”命令,打开“新建文档”对话框,在打开的“新建文档”对话框中选择“空白页”选项卡,在“页面类型”中选择“HTML”,然后单击“创建”按钮,新建一个HTML网页文件。
2、在“文档工具栏”中的“标题”文本框中,将“无标题文档”更改为“我的第一个网页”。
3、在“文档工具栏”中单击“设计”按钮,切换到设计视图模式,在文档窗口中输入“Hello,World!
”,然后按回车键,再输入“欢迎光临,这是我的第一个网页!
”。
4、依次单击“文件”->“保存”命令,打开“另存为”对话框,在“文件名”文本框中输入“task1-1-2”,单击“保存”按钮保存网页文件,最后点击“task1-1-2.html”文档标签中的关闭按钮关闭网页文件。
5、在DreamweaverCS6软件的“欢迎界面”中单击“打开”按钮,打开“打开”对话框,选择“task1-1-2.html”文件,单击“打开”按钮打开该网页文件。
(在“文件”面板中展开“站点–项目1”,双击“task1-1-2.html”文件名也可以打开该文件。
)
6、在“文档工具栏”中单击“在浏览器中预览/调试”工具按钮,在弹出的快捷菜单中单击“编辑浏览器列表”命令,打开“首选参数”对话框。
7、在“在浏览器中预览”选项卡中单击“浏览器”文字后面的“+”号按钮,打开“添加浏览器”对话框,在“名称”文本框中输入“GoogleChrome”,单击“应用程序”文本框后面的“浏览”按钮,在打开的“选择浏览器”对话框中按谷歌浏览器的实际安装路径查找并选择,勾选“主浏览器”复选框。
单击“确定”按钮完成谷歌浏览器的添加操作。
8、在“文档工具栏”中单击“在浏览器中预览/调试”工具按钮,在弹出的快捷菜单中单击“预览在GoogleChrome”命令(或按F12键),即可启动谷歌浏览器浏览网页。
布置任务:
让学生明确本次课的内容
讨论:
如何实现该案例效果
阅读知识窗:
DW的三种编辑模式;网页的基本结构
演示:
教师演示活动实施过程
实训活动:
学生练习及点评
作业
布置
填写提交实训报告和实训表格
预习作业:
预习下一节内容
教学
后记
教学
课题
任务2活动1制作诗词赏析页面
课题
类型
理论+实作
课时
安排
2
上课
时间
教
学
目
标
1.掌握标题标签的使用
2.掌握段落与换行标签的使用
教学
重点
1、2
教学
难点
2
辅助
资源
课件、多媒体、网络
复习引入
1.网页的新建与保存。
2.如何添加设置默认浏览器?
教学
手段
教学过程
师生互动
活动设计
课件
讨论
实作
课件
举例
讨论
课件
实作
一、教师布置活动要求
如下图所示,完成诗词赏析页面的制作,完成后以“task1-2.html”为文件名保存。
二、师生讨论学习新知识
1、标题标签
标题标签表示一段文字的标题,共划分六级标题
…,从1级到6级,逐级字体减小。
在DreamweaverCS6中,单击“格式”“段落格式”菜单命令,在打开的子菜单中选择“标题1”~“标题6”中的一个,或者在“属性”面板的“格式”下拉列表框中选择“标题1”~“标题6”中的一个,都可在网页中插入相对应的标题标签。
2、段落与换行标签
(1)段落标签
在设计模式下,按回车键即可自动添加段落标签。
(2)换行标签
在设计模式下,按Shift+回车键,即可添加换行标签
。
三、教师演示活动实施过程并让学生完成活动任务
1、打开DreamweaverCS6软件并新建一个HTML文档,将新建的HTML文档切换至“设计”视图模式,并以“task1-2.html”为文件名保存。
2、在“文档工具栏”中的“标题”文本框中,将“无标题文档”更改为“诗词赏析”。
3、单击“格式”->“段落格式”->“标题1”菜单命令,在文档窗口中插入“标题1”标签,输入诗词标题文字。
4、输入完标题文字后按回车键另起一行,输入诗词作者,输入完后再按回车键另起一行。
5、单击“格式”->“段落格式”->“标题3”菜单命令,输入完第1行诗词后,按Shift+回车键插入换行符,输入第2行诗词。
6、按回车键另起一行,输入“译文及注释”文字,选择输入的“译文及注释”文字,在“属性”面板“格式”下拉列表框中选择“标题2”。
7、按回车键另起一行,输入“译文”,再按回车键另起一行,输入译文正文部分;重复上述操作,完成注释部分的输入操作。
(注意:
在“凉州词”注释文字的最后按Shift+回车键,插入换行符后再输入“夜光杯”注释文字部分。
)
8、保存网页文件并在浏览器中浏览网页效果。
布置任务:
让学生明确本次课的内容
讨论:
如何实现该案例效果
阅读知识窗:
标题标签;段落与换行标签
演示:
教师演示活动实施过程
实训活动:
学生练习及点评
作业
布置
填写提交实训报告和实训表格
预习作业:
预习下一节内容
教学
后记
教学
课题
任务2活动2对诗词赏析页面进行简单排版
课题
类型
理论+实作
课时
安排
2
上课
时间
教
学
目
标
1.掌握粗体标签与斜体标签的使用
2.掌握特殊符号的使用
教学
重点
1、2
教学
难点
2
辅助
资源
课件、多媒体、网络
复习引入
1.标题标签。
2.段落标签与换行标签。
教学
手段
教学过程
师生互动
活动设计
课件
讨论
实作
课件
举例
讨论
课件
实作
一、教师布置活动要求
如下图所示,打开“task1-2.html”文件,对诗词赏析页面进行简单排版操作。
二、师生讨论学习新知识
1、粗体标签
粗体标签主要用于文字加粗,可以通过以下两种方法给网页文字添加粗体标签:
●在“代码”视图模式中,在需要设置加粗效果的文字两端添加…标签。
●在“设计”视图模式中,选择要设置加粗效果的文字,在“属性”面板中单击“粗体”按钮(快捷键为:
Ctrl+B)。
2、斜体标签
斜体标签主要用于文字倾斜显示,可以通过以下两种方法给网页文字添加斜体标签:
●在“代码”视图模式中,在需要设置倾斜效果的文字两端添加…标签。
●在“设计”视图模式中,选择要设置倾斜效果的文字,在“属性”面板中单击“斜体”按钮(快捷键为:
Ctrl+I)。
3、特殊符号
4、水平线标签
三、教师演示活动实施过程并让学生完成活动任务
1、使用DreamweaverCS6打开“task1-2.html”并切换到“设计”视图模式。
2、选择诗词作者,在“属性”面板中单击“斜体”按钮,设置倾斜效果。
3、选择“译文”两个字,在“属性”面板中单击“粗体”按钮,设置加粗效果。
使用同样的方法设置其他需要加粗的文字。
4、在需要设置缩进的文字前单击鼠标,然后依次单击“插入”->“HTML”->“特殊字符”->“不换行空格”菜单命令(快捷键为:
Ctrl+Shift+空格),添加不换行空格使文字缩进,缩进量不够可多添加几个不换行空格,具体效果以浏览器浏览的效果为准。
5、在文档末尾添加文字“版权所有2018”,然后将光标定位到“2018”的前面,依次单击“插入”->“HTML”->“特殊字符”->“版权”菜单命令,插入版权符号。
6、在诗词正文的后面单击鼠标,然后依次单击“插入”->“HTML”->“水平线”菜单命令,插入水平线。
使用同样的方法在文档末尾版权信息前插入水平线。
7、保存网页文件并在浏览器中浏览网页效果。
布置任务:
让学生明确本次课的内容
讨论:
如何实现该案例效果
阅读知识窗:
粗体标签;斜体标签;特殊符号与水平线标签
演示:
教师演示活动实施过程
实训活动:
学生练习及点评
作业
布置
填写提交实训报告和实训表格
预习作业:
预习下一节内容
教学
后记
教学
课题
任务3活动1制作树形菜单
课题
类型
理论+实作
课时
安排
2
上课
时间
教
学
目
标
1.掌握如何设置项目列表
2.掌握项目列表的类型有哪些
教学
重点
1、2
教学
难点
1
辅助
资源
课件、多媒体、网络
复习引入
1.粗体与斜体标签。
2.如何在网页中添加不换行空格?
教学
手段
教学过程
师生互动
活动设计
课件
讨论
实作
课件
举例
讨论
课件
实作
一、教师布置活动要求
如下图所示,完成树形菜单的制作,完成后以“task1-3-1.html”为文件名保存。
二、师生讨论学习新知识
1、项目列表:
也称无序列表,列表项之间无顺序之分,每个列表项前均有一个项目符号。
2、项目列表的设置:
项目列表可以通过“属性”面板进行设置。
3、项目列表的类型:
项目列表的类型可以通过type属性设置列表显示符号的类型。
●disc:
实心圆点
●square:
实心方框
●circle:
空心圆点
三、教师演示活动实施过程并让学生完成活动任务
1、打开DreamweaverCS6软件并新建一个HTML文档,将新建的HTML文档切换至“设计”视图模式,并以“task1-3-1.html”为文件名保存。
2、在“文档工具栏”中的“标题”文本框中,将“无标题文档”更改为“ul-li多层嵌套制作树形菜单”。
3、在文档窗口中依次输入相应的文字。
选择所输入的文字,单击“属性”面板上的“项目列表”按钮,给输入的文字添加项目列表。
4、在任意一个列表项中单击鼠标,然后依次单击“格式”->表”->“项目列表”菜单命令,打开的“列表属性”对话框,在“样式”下拉列表框中选择“正方形”,然后单击“确定”按钮。
5、选择“本地磁盘(C:
)”~“本地磁盘(D:
)”文字,单击“属性”面板上的“缩进”按钮,制作第2级列表项。
6、选择“我的文档”与“我的收藏”文字,单击“属性”面板上的“缩进”按钮,制作第3级列表项。
在“我的文档”文字中单击鼠标,再单击“属性”面板上的“列表项目…”按钮,打开“列表属性”对话框,在“样式”下拉列表框中选择“项目符号”,然后单击“确定”按钮。
7、选择“我的游戏”~“我的电影”文字,单击“属性”面板上的“缩进”按钮两次,在“我的游戏”文字中单击鼠标,再单击“属性”面板上的“列表项目…”按钮,打开“列表属性”对话框,在“样式”下拉列表框中选择“项目符号”,然后单击“确定”按钮。
8、保存网页文件并在浏览器中浏览网页效果。
布置任务:
让学生明确本次课的内容
讨论:
如何实现该案例效果
阅读知识窗:
项目列表及项目列表的设置;项目列表的类型
演示:
教师演示活动实施过程
实训活动:
学生练习及点评
作业
布置
填写提交实训报告和实训表格
预习作业:
预习下一节内容
教学
后记
教学
课题
任务3活动2制作在线考试试卷
课题
类型
理论+实作
课时
安排
2
上课
时间
教
学
目
标
1.掌握如何设置编号列表
2.掌握编号列表的类型有哪些
教学
重点
1、2
教学
难点
1
辅助
资源
课件、多媒体、网络
复习引入
1.设置项目列表。
2.如何更改项目列表的类型?
教学
手段
教学过程
师生互动
活动设计
课件
讨论
实作
课件
举例
讨论
课件
实作
一、教师布置活动要求
如下图所示,完成在线考试试卷的制作,完成后以“task1-3-2.html”为文件名保存。
二、师生讨论学习新知识
1、编号列表
编号列表,也称有序列表,以数字或字母作为列表项符号。
2、编号列表的类型
编号列表的类型可以通过type属性设置列表显示编号的类型。
●1:
数字
●A:
大写英文
●a:
小写英文
●i:
小写罗马字符
●I:
大写罗马字符
三、教师演示活动实施过程并让学生完成活动任务
1、打开DreamweaverCS6软件并新建一个HTML文档,将新建的HTML文档切换至“设计”视图模式,并以“task1-3-2.html”为文件名保存。
2、在“文档工具栏”中的“标题”文本框中,将“无标题文档”更改为“在线考试试卷”。
3、在文档窗口中输入在线考试试卷的名称“DreamWeaver在线考试试题”,选择输入的文字,在“属性”面板的“格式”下拉列表框中选择“标题1”,完成在线考试试卷名称的制作。
4、在文档窗口中输入在线考试试卷的题干。
选择所输入的文字,单击“属性”面板上的“编号列表”按钮,完成题干的制作。
5、在第1题题干的后面单击鼠标后按回车键,输入第1题的四个选项。
选择所输入的第1题的所有选项,单击“属性”面板上的“缩进”按钮。
在任意一个选项中单击鼠标,然后单击“属性”面板上的“列表项目…”按钮,打开“列表属性”对话框,在“样式”下拉列表框中选择“大写字母(A,B,C…)”,然后单击“确定”按钮。
6、按照第5步的操作完成其他各题的选项制作,完成后保存文件并在浏览器浏览效果。
布置任务:
让学生明确本次课的内容
讨论:
如何实现该案例效果
阅读知识窗:
编号列表;编号列表的类型
演示:
教师演示活动实施过程
实训活动:
学生练习及点评
作业
布置
填写提交实训报告和实训表格
预习作业:
预习下一节内容
教学
后记
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页制作项目实训教程 中职网页制作项目实训教程教案项目1 网页设计制作入门 网页 制作 项目 教程 教案 设计 入门
![提示](https://static.bdocx.com/images/bang_tan.gif)