《网页制作》教案颜敏.docx
- 文档编号:9895850
- 上传时间:2023-02-07
- 格式:DOCX
- 页数:23
- 大小:155.07KB
《网页制作》教案颜敏.docx
《《网页制作》教案颜敏.docx》由会员分享,可在线阅读,更多相关《《网页制作》教案颜敏.docx(23页珍藏版)》请在冰豆网上搜索。
《网页制作》教案颜敏
《网页制作项目实践》
教案
授课对象2015计算机一、二班
授课教师颜敏
2015—2016学年第1学期
课程教学目标:
《网页制作项目实践》是中等职业学校计算机应用专业必修课程,旨在让学生掌握网页制作的基本知识,学会网页制作的基本技能,是春季高考考纲的实践必考内容,也为今后从事网页美工,网页编辑,网站维护打下基础,
教材分析:
本学期学生使用《网页制作》教材,由高教社出版,本书教学内容主要定位在静态网页的制作、设计和发布方面,简单涉及动态网页制作。
全书贯穿项目教学的思想,从网页制作初学者的角度出发,采用“任务驱动”模式编写,通过一个个具体的课堂任务案例,由浅入深地讲解网页设计和制作。
每一章均以“项目→任务→理论→实训”模式进行,先提出要完成的任务,接着是融入了此任务的项目实例的具体制作方法,通过实例的制作诠释了任务的完成方法,再进一步地提练出相关理论知识点。
最后,再辅以与前面知识相关的练习实例,由学生独立完成。
学情分析:
2015级计算机班是中职一年级新生,没有任何计算机学习基础,在计算机软硬件操作上较为陌生,毫无dreamweaver软件界面的概念,对网页概念理解较为困难,对于这门课程的学习只能循序渐进,给学生更多的动手机会,解决更多的实际问题,在实际应用中举一反三,学生才能对知识有更深的理解,同时适时补充相关知识以便于达到更好的教学效果。
这些学生情况在教学中要充分考虑。
考核评价:
坚持学生为主体,教师为主导的教学原则,注重过程评价,阶段评价,以技能考核为主,附以作业、课堂回答、笔试等方式。
教师评价,学生互评、自评相结合通过学习后的评价表增强教师与学生的互动与交流,教师尽早发现学生的问题,反思教学效果,学生也能够及时反思自己的学习情况,查缺补漏。
自我评价
听课情况
全懂了
部分懂了
不懂
课堂任务
独立完成
需要帮助
还不会
对照练习
很轻松
有些累
需要帮助
疑点与难点记录
教师评价与反馈
第1章网页设计基础
教学目标与要求
熟记站标、导航条、广告条、按钮等网页构成要素,以及网页、网站、IP地址、域名、网址等概念;了解网页的本质和网页的布局类型和HTML文档的基本结构,熟练掌握网站建设的基本流程。
教学重点
重点:
站标、导航条、广告条、网页、网站、IP地址、域名、网址等概念,以及网站建设的流程
教学难点
难点:
IP地址、域名、网址,HTML文档的基本结构及其常见标签
教学方法
提问、启发、图示、情景教学、案例、课堂讨论
教学课时
4课时
第1讲网页设计基础
教学提示
导入课程:
大家会输入文字、制作和处理图像、设计动画,如何把这些作品放到internet中,让更多的人去查阅和欣赏呢?
---DW就可以制作网页。
1.网页的构成要素和组成元素
⏹网页的构成要素:
站标、导航条、广告条、标题栏和按钮;
⏹网页的组成元素:
文字、图片、动画(gif、flash)、表单(交互功能)、音频、视频、超链接、表格、框架、导航等。
2.网页相关知识简介
⏹基本概念:
Ø网页的本质
Ø网页、网站、主页、互联网
Ø动态网页、静态网页
ØIP地址、域名、网址(url)、浏览器等概念
⏹网页布局
Ø网页布局的相关概念
Ø常见的布局类型
⏹网站管理与网页制作相关软件
Ø制作和管理网页工具;
Ø制作和优化网页图像工具;
Ø制作网页动画工具;
Ø其中Dreamweaver、fireworks、flash这三个软件合称为网页“三剑客”。
Ø其他小工具软件。
⏹HTML语言
ØHTML的概念
ØHTML文档的基本结构
Ø几个常见的html标签:
html、head、title、style、script、link、meta、body、img、p、font等。
⏹XHTML语言简介
⏹脚本语言简介
3.网页的设计理念和配色方案
⏹网页的设计理念
⏹色彩的三要素
⏹网页中的色彩心理与网页表现
⏹色彩搭配应遵循的原则
4.网站的开发流程
1网站需求分析
2设计制作网站页面
3空间和域名申请
4测试和发布网站
5网站推广
5.典型网站分析
⏹页面结构
⏹色彩运用
以提问的方式引入课程
采用课堂讨论教学法,打开几个典型的网页让同学们讨论总结构成要素和组成元素。
打开一个搜狐主页,保存成不同的类型,让大家看保存的效果,加深对网页本质的理解;
先打开一个网页的源文件,结合网络常识,详细讲解网页的定义,然后略讲网站和主页的概念。
并提醒同学理解并记忆这些概念。
以注册和登录邮箱为例,对比讲解动态网页和静态网页的特点和区别。
以搜狐网站的IP地址与域名为例,简要讲述这两个概念。
通过查看分析知名网站的网址引入url的定义和组成,其它概念略讲。
提醒学生理解并记忆上述概念。
打开一网页(详细讲解网页布局效果的教程)让学生讨论、分析总结布局类型。
根据学生特点简要讲解ps、flash、fw等软件在网页设计中的功能。
打开搜狐主页的源代码,让学生认识一下html语言及其结构,然后分别用记事本和dw创建2个最简单的网页,让学生细看其源代码,并详细讲解8个基本标签及其结构关系,最后根据时间酌情讲解其它几个常见标签。
简要讲解这两个概念,然后创建一个网页,复制无缝循环的代码并粘贴到网页的body标签,让学生了解脚本语言的功能。
让学生欣赏插入后的效果,吸引学生dw的相关代码。
结合上网的经验,让学生总结网页的设计理念。
色彩的三要素和心理表现学生在上学期的ps课程中学习过,采用提问法,进行复习;然后打开几个典型网站,分析其配色方案,最后总结网页中色彩运用的原则。
根据设计的先后顺序和学生一起分析总结网站的开发流程,并用图加以解释,重点讲解网站的需求分析,以加深学生对重点知识的掌握。
采用课堂讨论教学法,打开几个典型的网页让同学们讨论总结网站的构成要素、组成元素、布局结构和配色方案。
作业布置:
1.察看并对比分析大型网站(如中国网、著名学校网、著名医院网、官方网、科技网、娱乐休闲运动网、儿童网、体育网、著名出版社网、cctv网站、sohu、yahoo、IBM、微软等)的风格、色彩搭配与布局。
2.察看的同时下载自己需要的文章、图片、软件等资源。
3.课后习题。
提问
小结:
通过提问、启发、图示、情景教学、课堂讨论等教学方法的综合运用,提高了学生的学习兴趣,从学生的反应看,授课效果很好。
第2章Dreamweaver基础知识
教学目标与要求
熟悉DreamweaverCS5工作界面,熟记几个常用的工具按钮和菜单命令;熟练掌握站点的创建步骤,能快速规范地创建站点;能够快速创建、打开、保存网页文档;能熟练设置页面的属性。
教学重点
1.创建站点并组织站点的结构;2.在站点中创建网页3.页面的属性设置
教学难点
HTML基础
教学方法
举例为主,适当讲授操作要领,提问以测试课题效果。
教学课时
4课时(2课时理论;2课时实训)
课题Dreamweaver基础知识
教学提示
我们一贯都是浏览网页,想自己动手做网站吗?
用什么工具做网站?
怎样做呢?
---Dreamweaver网页制作工具。
2.1熟悉DreamweaverCS5工作界面
2.2网站创建与管理
2.2.1站点的定义、组成和结构
2.2.2网页文档与文件夹命名规则
2.2.3创建本地站点的步骤
2.2.4组织站点结构
2.3网页文档基本操作
新建、保存、预览、打开、关闭
2.4基本页面属性设置
制定文档标题和边距、网页背景颜色和背景图像,为网页设置文本属性、链接属性和跟踪图像的属性,总结页面的使用的技巧:
抛出问题,引入新课
启动dw,详细讲解插入栏、文档标签与“文档”工具栏、状态栏的作用,区分标签检查器、标签选择器、标记选择符3个概念及其作用
详细讲解站点的定义、组成、结构,以及文件和文件夹的命名规则。
演示站点的创建过程和步骤,着重提出保存和站点文件夹的命名。
详细讲解站点结构的组织方法和原则。
分别演示这几个操作
通过dw设计视图分别创建1个网页,分别演示文档标题和边距、背景颜色和背景图像、文本和链接属性,以及跟踪图像的属性的设置方法和步骤,帮助学生掌握页面的设置过程。
并总结页面设置和创建过程中的一些使用技巧。
作业:
习题一第1,2,3题
小结:
本次课内容操作性很强,经过学生自己上台操作,发现大多数学生都能创建并组织好一个站点,还能快速地设置网页的属性,达到了教学目标的要求。
实训一创建个人网站
课时:
2
任务一、规划个人网站
一、提出任务
1.任务目标
规划个人网站。
2.解决的问题
通过规划个人网站了解网站主题对于网站的意义,了解网站的栏目与目录结构之间的关系及开发网站的常用工具软件。
二、任务内容
1.通过互联网浏览网站,总结所浏览网站的主题类型,至少找出企业宣传、软件下载、求职招聘、专业论坛、流行时尚、互动聊天和在线销售类型的网站各一个,记录它们的网站名称填入教材p4表JYFS1-1中:
根据表格内的提示,使用搜索引擎查找相关类型网站。
每组4名同学,每人负责两个主题的网站搜索。
任务二创建站点
一、提出任务
1.任务目标
创建个人网站站点。
2.解决的问题
使用网页制作软件Dreamweavercs5,按照个人网站的制作要求创建网站站点。
二、任务内容
1.新建一个站点,名称为“pra1-1”,使用“高级”选项卡完成新建过程,保存位置为“D:
\pra1-1”,其他参数保持默认即可。
2.新建一个以自己姓名命名的个人站点,该站点使用“ASPJavaScript”服务器技术,暂不设置远程信息与测试服务器,站点保存在“D:
\pra1-2”文件夹中。
任务三管理站点
一、提出任务
1.任务目标
管理个人网站站点。
2.解决的问题
通过完成本任务学习使用Dreamweavercs5进行站点管理。
3.本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有:
启动Dreamweavercs5,创建网站站点。
二、任务内容
1.新建站点“pra1-5”,使用管理站点功能将其导出。
将站点导出文件通过网络或移动存储设备拷贝到其他计算机中,使用管理站点功能将其导入。
2.新建站点“pra1-3”,使用管理站点功能复制站点“pra1-3”,编辑复制的站点名称为“pra1-4”,之后删除站点“pra1-3”。
任务四创建网站目录结构
一、提出任务
1.任务目标
创建网站目录结构。
2.解决的问题
本任务将使用“文件”面板,实现先前规划的网站目录结构,学习在本地站点建立文件和文件夹的方法,管理站点内的文件。
3.本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有:
打开Dreamweavercs5、管理站点知识。
二、任务内容
1.使用“文件”菜单新建“ASPJavaScript”类型的动态页,文件保存为“D:
/practice1-1.asp”,使用属性面板修改网页标题为“ASP网页”。
2.新建站点“pra1-7”,使用“文件”面板创建一个网页文件,命名为“practice1-2.html”,选中该文件后使用
下拉菜单中的重命名选项,改名为“newpage.html”,同样使用
下拉菜单中的选项预览页面后删除该页面。
第3章网页中的基本元素
教学目标与要求
1.熟练操作网页中的文本;
2.熟练插入各种格式的图像并设置其属性;
3.了解图像切片的作用;
4.熟练制作图像切片,并插入到dw中
教学重点
1.文本对象的插入和格式设置;
2.GIF、PNG和JPEG三种图像格式的异同点和使用环境;
3.用fireworks制作网页切片的方法;
教学难点
1.设置文本标题;段落的设置效果;
2.GIF、PNG和JPEG三种图像格式的异同点和使用环境;
3.DreamweaverCS5中使用图像的一些基本方法和技巧;
4.在dreamweaver中插入用fireworks制作的切片
教学方法
课堂讲授为辅,多媒体演示为主,适当举例,提问以测试课题效果,实验式教学。
教学课时
8课时(4课时理论;4课时实训)
教学提示
复习上节内容:
1.如何创建站点?
2.如何站点结构的组织
3.1网页中文本的操作(1-2课时)
3.1.1认识文本按钮及属性面板
•思考题:
根据以前所学知识说出文本的编辑和设置属性各包括几个方面?
3.1.2插入文本和对象
⏹将文本(英文、中文、数字)添加到文档中的3种方法。
⏹插入特殊字符
⏹水平线
⏹插入日期:
菜单法;插入栏按钮法
⏹对插入的文本也可以执行删除、搜索、替换、检查拼写(文本-检查拼写/shift+f7)等操作。
3.1.3设置文本格式
字符的样式包括的方面及其设置方法
3.1.4设置文本标题
标题的含义与作用
3.1.5设置段落效果
1.设置段落格式
2.缩进段落
3.对齐段落(4种对齐方式)
4.分段与换行的相关操作和区别:
3.1.6创建项目列表
3.2网页图像的运用(3-4课时)
3.2.1网页中图像格式简介
1.图像在网页中的作用和网页中常用图像格式有:
GIF、JPEG、PNG。
2.三种图像格式的特点和在网页中的使用场合。
在Web页上显示图片之前,通常需要考虑下列三个问题:
3.2.2在网页中使用图像
1.插入图像:
2.插入图像占位符:
注意图像占位符的命名规则和作用
3.创建鼠标经过图象(轮换图像)
4.在dw中图像的编辑功能仅适用于GIF和JPEG图像格式。
在属性检面板中编辑图像,上述设置也可通过菜单实现:
修改---图像
5.热点工具的使用和图像热区的添加
6.设置图文混排的效果:
7.制作电子相册:
命令——创建网站相册
3.2.3切片在fw中的创建和在dw使用
打开大图片网页时,总是等待很长时间,怎样处理才能减少图片的下载时间呢?
-----做成切片。
1.切片的定义和作用
2.切片在fw中的创建方法和步骤
3.在DW中插入FireworksHTML(切片)的方法和步骤
将FireworksHTML插入到Dreamweaver中的方法。
方法1:
将切片从Fireworks复制到剪贴板上,然后直接粘贴到Dreamweaver文档代码视图中的相应位置处。
方法2:
直接将FireworksHTML插入到Dw中的操作步骤
以提问的方式复习上次课内容
结合WORD,通过复习的方式,总结dw中文本的操作;
先简要演示一下各种文本符号的插入方法,然后输入一首小诗,调整其格式;接着复制一篇文章粘贴到dw中;最后导入一篇word文档;
先简要讲述一下文本格式、标题、段落的设置的含义和步骤,然后让学生走上讲台对上述插入的文本设置相应的字符格式、标题级别、段落效果,并选择个别段落创建项目列表,以加深印象。
通过比较法讲解各图像格式的特点
举例:
在文档中插入各种图像对象,并设置其格式属性。
演示制作图像热区和图文混排的效果;演示制作电子相册
以问题的形式引入切片的定义和作用。
本内容尽量调整在机房讲解。
详细讲解并演示切片在fw中制作和在dw中插入的方法与步骤。
作业:
1.填空题
(1)使用属性检查器或【文本】菜单中的选项可以设置或更改所选文本的字体特性。
可以设置字体____________(如粗体或斜体)和______。
(2)若要插入更多的特殊字符,请选择______|______|______或在______栏中选择______图标,选择一个字符,然后单击【确定】。
(3)在计算机领域中,图像分为________和________2大类。
(4)GIF图像采用的是________压缩格式。
2.选择题
(1)在网页中连续输入空格的方法是_______。
A.连续按空格键
B.按下Ctrl键再连续按空格键
C.转换到中文的全角状态下连续按空格键
D.按下Shift键再连续按空格键
(2)网页通常可以支持的图像格式有___________。
A.GIFB.BMPC.AVI
D.PSDE.PNGF.JPEG。
3.简答题
(1)网页中常用的图像格式有哪些?
各有什么特点?
如果在网页中添加动画格式的浮动广告,采用何种格式?
为什么?
电子相册,应该用哪种格式最好?
(2)如何创建鼠标变换图像和图像热点?
4.操作题:
搜集自己的喜爱的图片,制作一个电子相册。
小结:
本章内容较多,但交简单,需要边讲解边对比总结,通过对比总结和学生上台操作演示,从学生上机的作业来看,授课效果很好。
实训二、添加首页内容
课时:
4
任务一添加首页文本
一、提出任务
1.任务目标
完成首页文本内容。
2.解决的问题
通过完成本任务学习修改网页标题,在网页中添加文本,分段换行和段内换行,输入连续空格,保存和预览网页等知识。
二、任务内容
1.新建一个网页“practice2-1.html”,将本单元素材“举一反三”文件夹中“practice2-1.txt”的文本内容拷贝到页面中,使用插入空格的方法修改文本,使每一行文本中的“vs”字样达到对齐的效果。
2.新建一个网页“practice2-2.html”,输入多行文字内容并进行分段和强制换行,修改网页标题为“换行效果预览”,保存后预览页面,观察在IE浏览器中标题在什么位置,浏览器窗口大小发生变化时,对三种换行方式的影响。
任务二编辑文本样式
一、提出任务
1.任务目标
完成首页文本样式设置,添加水平分隔线与列表。
2.解决的问题
本任务通过设置首页文本样式,学习文本样式设置与应用,修改文本样式,添加水平分隔线与列表知识。
3.本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有:
输入文本内容的方法,段内换行与划分段落方法,输入连续空格的方法。
二、任务内容
1.新建一个网页“practice2-4.html”,插入5条水平线,使用属性面板进行不同的宽、高、对齐与阴影属性设置,预览页面并比较不同属性的设置效果。
2.新建“班级荣誉”页面,文件名为“practice2-5.html”,列举班级成员所获奖励,设置为编号列表,修改文本样式,用不同的文本大小、颜色区分奖励的等级,保存并预览页面。
尝试先设文本样式后设编号列表有何区别。
(要求各组课下搜集班级成员获奖情况,并制定一个设置方案)
任务三添加图像
一、提出任务
1.任务目标
为首页添加图像内容。
2.解决的问题
本任务通过为首页添加图像内容,学习在网页中插入图像和编辑图像的方法。
二、任务内容
1.将本单元素材文件夹中的“jyfs1.jpg”插入到一个新建页面“practice2-7.html”中,裁剪后宽度为200像素,高度为100像素,并设置边框宽度为5,完成后预览页面。
2.新建网页“practice2-8.html”,插入本单元素材文件夹中的“jyfs2.jpg”,尝试使用DreamweaverCS5的图像编辑功能修改图像的亮度并进行锐化设置。
任务四创建与应用CSS美化网页
一、提出任务
1.任务目标
使用CSS美化网页。
2.解决的问题
本任务通过为对首页进行美化,学习应用CSS样式。
3.本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有:
在网页中输入文本内容、插入图像及水平线。
二、任务内容
1.新建网页“practice2-9.html”,插入3条水平线,定义3种“类”样式“l1”、“l2”、“l3”。
定义过程中修改样式中的边框属性,使其拥有不同的效果,分别应用在各条水平线上,预览页面。
2.将本单元素材“举一反三”文件夹中的网页“practice2-11.html”拷贝到D盘根目录下,定义“标签”样式“p”,设置文本大小与颜色,保存后预览页面观察效果,之后定义“类”样式“p1”,设置不同的文本大小与颜色,并应用于页面中所插入的文本,浏览页面观察效果,总结“类”样式与“标签”样式的区别。
3.新建网页“practice2-10.html”,插入本单元素材“举一反三”文件夹中的“jyfs3.jpg”和一条水平线,定义“类”样式“line1”,修改样式中的边框属性。
分别将该样式应用在页面中的图片与水平线上,预览页面,分析样式设置的结果。
第4章使用表格与布局表格布局网页
教学目标与要求
1.了解表格和布局表格在网页布局中的作用;
2.掌握表格和布局表格的插入方法和基本编辑方法;
3.掌握表格和布局表格、单元格和布局单元格的属性设置;
4.通过对表格和布局表格的学习,提高学生学习网页制作的兴趣,增强学生的审美观
教学重点
1.表格的插入方法、基本编辑方法与应用;
2.布局表格和布局单元格的绘制方法、属性设置与应用
教学难点
1.表格和单元格的属性设置与应用;
2.布局表格和布局单元格的绘制与属性设置
教学方法
多媒体演示,案例教学,任务驱动,引导教学;提问式教学。
教学课时
8学时(4课时理论;4课时实训)
第4章使用表格与布局表格布局网页
教学提示
用表格控制文字、图片、动化等对象的位置,使网页的布局紧凑又整齐美观。
常用的页面设计布局类型有:
表格、布局表格和AP元素三种,本章着重讲解如何使用表格和布局表格布局页面。
4.1.表格模式
1.dw中表格的3种模式
2.模式切换的操作方式:
查看--表格模式---标准模式/布局模式/表格扩展模式。
3.模式的区别与注意事项:
⏹只有在“设计”视图中才可切换到“布局”模式;
⏹在不同模式下,工具栏的各个按钮作用不同;
⏹在布局模式中不能像布局表格的空白区域插入内容,只能创建布局单元格,布局单元格才是承载具体内容的容器。
4.2使用表格布局网页
1.表格的作用
2.表格的组成部分
表格的行、列、单元格、边距、间距、边框
3.表格的标记
⏹
标记 ⏹三者的对应位置关系 4.表格的基本操作 ⏹表格的插入、选择、删除、大小调整; ⏹单元格的选择、合并、拆分、大小调整; ⏹表格在“扩展表格”模式和“标准”模式下的应用 5.嵌套表格 ⏹表格嵌套的作用 ⏹创建嵌套表格的操作方法。 6.导入和导出表格数据、 7.表格布局网页的应用实例 8.表格布局的缺点 4.3布局表格布局网页 1.绘制布局表格 绘制布局表格的注意事项: 2.绘制布局单元格 绘制布局单元格的注意事项: 3.设置布局表格和布局单元格的属性和参数 4.在布局单元格中添加内容 5.课堂实例――用布局表格布局网站主页
展示一个布局合理、美观的网页,激起学生的学习兴趣。
简要讲解并3种表格模式的作用,重点演示不同模式下按钮的使用
回
冰豆网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
关于本文
copyright@ 2008-2022 冰点文档网站版权所有 经营许可证编号:鄂ICP备2022015515号-1 |