《网页制作》教案颜敏.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.察看的同时下载自己需要的文章、图片、软件等资源。
３.课后习题。
提问
小结：
通过提问、启发、图示、情景教学、课堂讨论等教学方法的综合运用，提高了学生的学习兴趣，从学生的反应看，授课效果很好。
第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种表格模式的作用，重点演示不同模式下按钮的使用 回
展开阅读全文
相关搜索
|