《网页开发基础》教案.docx
- 文档编号:17629012
- 上传时间:2023-07-27
- 格式:DOCX
- 页数:47
- 大小:88.35KB
《网页开发基础》教案.docx
《《网页开发基础》教案.docx》由会员分享,可在线阅读,更多相关《《网页开发基础》教案.docx(47页珍藏版)》请在冰点文库上搜索。
《网页开发基础》教案
教
师
工
作
本
教务处制
课程分析与实施计划
一、课程设置(为什么上这门课?
)
1.课程定位
(依据人才培养目标设置课程,课程性质明确,注意涉及的前导与后驱相关课程)
网页开发基础课程是13计算机应用专业的专业基础课之一,本课程主要掌握网页的制作基本方法。
学习本课程的目的:
掌握利用PHOTOSHOP绘图和Dreamweaver制作网页的知识和技能。
该课程开设在13计算机应用专业学生大一的下学期,学分4分,共64课时。
为后续的动态网页制作《JSP》课奠定专业基础。
2.课程教学目标
(包括知识目标、能力目标和素质目标,符合人才培养目标要求)
●PhotoShop绘图基础
●HTML语言
●Dreamweaver网页制作
●DIV+CSS
3.课程设计
(理念先进,思路清晰,与行业企业共同开发课程,课程实施注重工学结合)
本课程依据职业岗位的需求、专业人才培养目标、学生的特点以及实训单位的建议将课程分成基础模块和应用模块2大块开展教学。
课程采用以项目为导向,驱动教学,工学结合,实践性强。
二、教学内容(上什么内容?
)
1.内容选取
(包括知识内容、技能内容与素质内容,选取体现先进性、针对性和适用性)
基础模块:
使用PhotoShop绘图、编辑图像、图文混排网页制作、表格布局、DIV+CSS布局
应用模块:
项目设计案例
2.内容序化(模块化)
(根据工作任务、项目及工作过程程序化教学内容,安排科学,符合职业成长规律和学生认知规律)
3.表现形式
(教学内容表现形式体现齐备性、适用性、先进性)
教材、教学大纲、课件、实习指导书
三、教学设计(如何上?
)
1.教学模式
(以学生为主体,以工学结合为切入点,有针对性的设计教学模式,充分体现“教、学、做”合一的教学模式,企业参与对教学模式的评价,注意教学反馈和改进)
基础模块:
理论讲授→小实例驱动→学生自主实践教师巡回指导→教师补授→综合实例驱动→学生自主练习教师巡回指导→展示部分学生作品师生共同欣赏、评价→教师总结
应用模块:
项目驱动→师生讨论项目素材→学生实践制作素材→师生讨论关键技术教师补授→学生实践完成项目→测试、评价学生作品→教师总结→企业网上平台展示
优秀作品
2.教学方法与手段
(根据课程内容与学生特点选择恰当的教学方法,灵活多样的选择教学手段,恰当运行现代教育技术与虚拟现实技术)
教学方法:
1.讲授法
2.展示法
3.练习法
4.启发法
5.项目导向法
6.实例驱动法
教学手段:
采用了广播演示、多媒体投影仪、网络教学等多种教学手段。
3.保障条件
(满足课程实训要求的专兼结合的教师队伍、实训条件,所具备的教学环境)
本课程建设已经形成一种专兼结合、具备良好双师素质、双师结构的课程教学团队,还拥有一支由一线技术人员组成的技术指导支持团队。
信息技术系机房
四、教学组织与实施(过程怎样?
)
1.组织实施
(教学过程体现实践性、开放性和职业性)
学生评价:
项目导向,实例驱动教学,学习积极性颇高,所授新知都能当堂消化,课堂练习80%都能按时完成。
2.学生评价方案
(报告、作业、实践、笔记、学生互评、考勤等,标明各项分值比例)
1.期末作品设计占40%
2.平时表现占总成绩的60%。
平时作业和考情分别占50%,10%。
3.教学预期效果
●学生掌握HTML语言
●学生熟练掌握使用PhotoShop+Dreamweaver制作网页的方法
●学生掌握使用DIV+CSS进行网页排版布局的方法
●了解相关项目的设计和开发流程
五、改革与创新
1.改革与创新点
(在课程设置、内容选取、教学设计及组织实施等方面所做的改革与创新)
基础教学模块设计有若干对应的实例,在实例制作的过程中强化学生对课堂的新知的掌握、理解和应用。
应用模块以项目驱动教学,学生学习积极性大,学习效果好。
2.可资共享与借鉴的内容
(本门课程对其他同类课程或相关课程教学可资共享与借鉴的内容)
网页设计基础教学课件
网页设计基础教学进度表
网页设计基础教案
网页设计基础教学案例源文件
网页设计基础教学课后练习演示视频
教学进度表
课程:
《网页制作基础》班级:
13计算机应用任课教师:
吴强
周别
课时
课题及主要内容
课型
备注
1
1
课程介绍
讲授
1
3
PhotoShop照片处理
讲授与实训
2-3
8
PhotoShop排版与布局
讲授与实训
4
1
站点的创建
讲授与实训
4
3
HTML语言图文混排的网页设计
讲授与实训
5
4
使用CSS样式图文混排的网页设计
讲授与实训
6
2
插入多媒体对象
讲授与实训
6
2
创建超链接、Dreamweaver新增功能
讲授与实训
7-8
8
表格及使用表格网页布局
讲授与实训
9-10
8
使用PhotoShop切片制作网页
讲授与实训
11
4
网页布局和框架
讲授与实训
12
4
模板和库的应用
讲授与实训
13-14
8
使用层网页布局
讲授与实训
15
4
网站总体设计及发布
讲授与实训
16-17
8
web网站开发
实训
18
19
20
教案
课题:
课程介绍课型:
讲授与实训
周次:
第1周课时:
1课时
授课时间:
地点:
机房
教学目标:
1、使用学生对《网页制作基础》课有全方面的了解。
2、通过内容的学习,激发学生学习网页的兴趣。
教学重难点分析:
重点:
1、网页设计相关软件的介绍
2、网页设计的就业形式
教学过程:
1.课程介绍:
1、展示网页模板导入新课:
在网页中展示了哪些数据信息?
文本、图片、动画、音乐、视频
网页也就是将这些数据信息组织在一个页面中呈现给大家。
2、素材的整理
素材
相关软件
文本
Word、wps
图片
PhotoShop、FireWork、CorelDraw
动画
Flash
音乐
GoldWave、audition
视频
Premiere、绘声绘影
3、网页的排版布局
HTML语言、DIV+CSS、JavaSprit
常用软件:
Dreamweaver
4、课程目标
《网页设计基础》主要学习PhotoShop和Dreamweaver软件的使用、网页的排版布局、网站维护、网页文章系统的使用等内容。
通过本课程学习,使学生能熟练掌握HTML语言、DIV+CSS;能够使用PhotoShop设计网页;掌握Dreamweaver进行网站的规划、制作、管理、发布的相关技术;能独立设计小型WEB站点。
5、课程安排
6、课程考核和评价方式
7、网页设计的就业形式和分析
教案
课题:
照片的处理课型:
讲授与实训
周次:
第1周课时:
3课时
授课时间:
地点:
机房
教学目标:
1、掌握显示区域的控制和颜色的选取和Photoshop画笔工具的使用。
2、通过以上内容的学习,提高学生在生活中用多媒体技术解决实际问题的能力。
3、通过对以上内容的学习过程,激发学生学习网页的兴趣。
教学重难点分析:
重点:
1、图形和图像的基本概念
2、画笔工具的使用
3、图像的选取
4、基本概念笔头大小、压力、羽化和容差的理解
难点:
1、图形和图像的基本概念
2、基本概念笔头大小、压力、羽化和容差的理解
教学过程:
一、图形和图像的基本概念
1、数字图像类型分为位图和矢量图
位图是将图像的像素点按照点阵的方式存储而成的,矢量图是用具有方向的长度的矢量数据来表示图形。
位图:
放大影响清晰度,图像存储空间与图像的复杂程度无关。
矢量图:
放大不影响清晰度,图像存储空间与图像的复杂程度有关。
2、数字图像的分辨率与颜色
⑴数字图像的分辨率
⑵数字图像的颜色
3、数字图像的颜色模式
⑴RGB颜色模式
RGB为三基色,是原色,红黄蓝是三元色,是经过光反射进入人眼后的颜色。
⑵CMYK颜色模式
⑶Lab颜色模式
Lab是以一个亮度分量L以及两个颜色分量a和b来表示颜色的。
⑷HSB模式
是以色相、饱和度、明度与色调来表示颜色。
4、数字图像文件文件格式及其数据大小
BMP、GIF、JPEG、PNG、SVG、PCX、TIFF与EPS、PSD
5、数字图像的获取
二、PhotoShop照片处理
1、显示区域的控制
改变显示比例
1利用放大镜改变显示比例。
双击放大镜改变图像的显示比例为100%,
利用放大镜还可以放大某一块区域。
2利用状态栏改变显示比例
3利用放大镜的属性栏
4利用视图菜单命令来改变大小
5利用导航器控制面板来改变显示比例。
2、改变图像的显示区域
⑴利用工具箱中的抓手工具
⑵利用导航器移动显示区域
⑶点击下拉箭头-----调板选项改变显示框的颜色。
3、颜色的选取。
⑴利用工具箱的按钮。
⑵利用颜色对话框
只有WEB颜色:
指的是所显示的颜色是网页所支持的颜色。
“!
”:
警告此颜色超出了打印范围之外。
警告此颜色超出了网页所支持的范围。
颜色选项板来选择所须颜色。
利用色板选项板。
利用吸管工具吸取颜色。
(按ALT键吸取背景色)
利用颜色取样器工具来查询颜色。
(一次可查询四个颜色)
4、画笔工具的使用
⑴画笔的使用方法:
点击画笔工具-------设置前景色-------然后设置工具所对应的属性栏------就可以在空白的图像上做画了。
⑵各种画笔工具的设置:
画笔工具:
A选择刷形(属性栏上的画笔类型,根据需要自己选择)
B载入刷形(点击刷形对话框的下拉菜单-----载入画笔)
C设置刷形(在要设置的刷形上点击,然后在出现的对话框中进行自行设置)
D设置特殊刷形(用矩形框选中你要定义的画笔-----编辑-----定义画命令。
E模式(指的是画笔的颜色与图像底色之间的关系)
F不透明度(数值越大,底色越不明显。
)
铅笔工具:
自动抹掉:
在做画的过程中,图像的颜色与前景色相似时自动以背后景色来做画。
喷枪工具:
压力:
相当于透明度,压力越大,颜色越深。
课后作业
用数码像机照一张自己的照片,使用PhotoShop进行美化。
教案
课题:
PhotoShop排版与布局课型:
讲授与实训
周次:
第2周、第3周课时:
8课时
授课时间:
地点:
机房
教学目标:
1、掌握Photoshop排版布局的方法。
2、通过以上内容的学习,提高学生在生活中用多媒体技术解决实际问题的能力。
3、通过对以上内容的学习过程,激发学生学习网页的兴趣。
教学重难点分析:
重点:
1、图层的概念
2、路径工具的使用
3、通道的概念
4、蒙板的使用
难点:
1、路径工具的使用
2、蒙板的使用
教学过程:
一.形状工具的使用
1.矩形形状工具
A.创建形状层
B.创建工作路径
C.创建填充区
D.消除锯齿用来平滑边缘
2.椭圆工具(同上)
3.多边形工具:
(设置多边形的边数)
4.直线工具:
可以设置直线的粗细,也可以设置带箭头的直线。
5.自定义形状:
i.载入形状
ii.设置自定义形状(利用创建形状层按钮,创建形状,然后利用编辑菜单里面的自定义形状命令。
)
二.文字工具的使用
1.文字工具:
点击文字T工具,在画布上点击,在弹出的对话框中:
输入对应文字,设置文字字体,文字大小、颜色最后点击好。
这样生成的文字不是真正的图层,不能使用效果,滤镜,重新双击图层,可以对输入文字进行修改。
在图层T上点击右键可以选择转换普通图层或者使用图层菜单中文字------转换图层,CTRL+T可以对文字进行自由变换,拉大拉小或者按CTRL键进行拖拉变化形状。
2.文字蒙板工具:
设置文字选区浮动状态,可以进行填充或者渐变,其它功能和文字工具一样。
3.直排文字工具:
输入文字为竖向,其它功能和文字工具一样。
4.直排文字蒙板工具:
输入文字为竖向浮动状态,可以进行填充或者渐变,其它功能和文字工具一样。
各种文字工具到最后的处理,都可以进行效果,滤镜处理。
三.选择工具的使用
一.工具箱中矩形和圆形工具使用
1.矩形工具使用
拖动光标随意移动,选择矩形区域,双击在调板中设置“羽化值”样式长宽等。
快捷键:
①按SHIFT键同时画矩形为正方形
②按SHIFT+ALT键同时画矩形,以开始中心为点,画正方形
③按ALT键以开始为起点画矩形
④按SHIFT键在已选区域中选取,扩大选区
⑤按ALT键在已选区域中选择,减少选区
⑥按SHIFT+ALT键,保留交叉部分
⑦CTRL+D取消选取
二.填充颜色
1.颜色分为:
前景色和背景色
2.点击前景色或背景色进行颜色修改
3.按字母D键还原颜色设定(默认为黑/白)
4.按字母X键前景色与背景色切换
5.ALCTRL+DEL填充背景色
三.圆形选取工具:
可以任意画正圆和椭圆。
使用操作方法和矩形操作方法一样。
CTRL+T可以对选区或者图像进行自由变换大小(拖拉四角。
四、单列选择工具:
将选项框定义为象素宽,行列相互配合,使用快捷键:
按SHIFT键可以添加线,按ALT键单击删除该线。
使用光标按方向键移动一个单距离,按SHIFT键按方向键移动十个单位距离。
使用该工具可以制作胶片效果。
五.套索工具
1.自动套索:
以开始点拖动鼠标,对所需部分进行套索(以绘画方式),套索后对选区可以进行复制、剪切等操作或者可能性使用羽化值。
2.多边套索工具:
由手控方式不规则选取多点,对所需部分进行更细化选区
3.磁性套索工具:
使用图像与背景不规则状态,反差大小,移动光标自动进行选取。
可以使用CTRL+T自由变化大小,按SHIFT键同时进行比例变换。
A.套索宽度:
套索宽度值从1到40象索之间,当你拖拉套索工具时,只能在你设定的宽度范围内,对图像的色彩边缘,做选取范围。
B.边缘对比度:
边缘对比度从1%到100%数值越低的数,具有较敏锐的色彩辨别能力。
C.频率:
数值越大,紧固点越多。
六.魔术棒工具:
魔术棒工具:
另一类选取工具,选择范围属于灵活性,属于选取工具中最神奇的一个,一般以颜色容差不大的情况进行局部选取并配合菜单中反选使用(CTRL+SHIFT+I),如果要选取多个局部,可以按SHIFT键多重选取。
注:
选择(矩形、圆形、单行、单列、各种套索、魔术棒等)与反选择(CTRL+SHIFT+I)都可以使用。
相互配合,并可以进行复制,移动、剪切,删除等基本操作。
一般对图片处理存储可以选择文件菜单中存储副本(JPG格式)快捷键:
CTRL+ALT+S
七、Photoshop的通道知识
(1)通道的概念
每个Pohotoshop图像都具有一个或多个通道,每个通道都存放着图像中颜色元素的信息。
图像中默认的颜色通道数取决于其颜色模式。
例如RGB图像,至少有三个通道(列举6-6图片),CMYK图像至少有四个通道(列举6-5图片)。
点击窗口—通道可以查看通道,列举每种颜色的通道模式。
每一个通道都是一副灰度图象,它只代表一种颜色的明暗变化,所有颜色在一起时也就构成了色彩的复合通道。
隐藏两张图片的某个通道,查看图片效果。
强调,灰度图片不仅仅是灰色图片的意思,它是指图片只有一种颜色,既一个通道。
除了上述所说的默认颜色通道,还有一种通道,这种通道称之为Alpha通道。
将该通道添加到图像中,可便于将选区进行编辑。
(2)练习:
1.通道的合并
①打开图像“6-1”、“6-2”、“6-3”
②单击通道调板上的小三角,在弹出的菜单栏中选择“合并通道”命令,弹出“合并通道”对话框,在对话框中“模式”选项栏中选择“RGB颜色”
③单击“好”按钮,弹出“合并RGB通道”对话框,一一指定通道,单击“好”按钮,执行合并通道的操作,将3个灰度文件合并成一个RGB文件。
2.调用存储的选区进行修整
①打开图像“6-4”,使用魔棒工具按住shift键选择图中葡萄部分,创建选区
②执行“选择>存储选区”命令,弹出“存储选区”对话框,在“通道”选项栏中选择“新建”,并在名称栏中输入“葡萄粒”,单击“好”按钮,保存选区。
打开通道调板,可看到通道调板中出现了一个新的通道:
葡萄粒。
③取消选区,使用魔棒工具按住shift键选择叶子部分,打开通道调板,按住Alt键,单击“将选区存储为通道”按钮,弹出“新通道”对话框,在“名称”栏中输入“叶子”,单击“好”按钮,建立新的通道“叶子”。
④选择“叶子”通道,单击通道调板下方的“将通道作为选区载入”按钮,或按住Ctrl键,使用鼠标左键单击“叶子”通道,载入选区。
执行“图像>调整>色阶”命令,对选区进行调整。
使用Ctrl+D取消选择。
⑤打开通道调板,显示出“葡萄粒”通道,使用前景色为黑色的画笔在“葡萄粒”通道上进行绘制。
⑥关闭“葡萄粒”通道的显示,执行“选择>载入选区”命令,在弹出的“载入选区”对话框中,在“通道”栏中选择“葡萄粒”,单击“好”按钮,载入被修改后的选区。
⑦进行“图像>调整>照片滤镜”命令,在弹出的“照片滤镜”对话框中进行设置(浓度改为72%),单击“好”按钮,确定对选区的调整。
(3)蒙版的概念
蒙版可以遮挡图层的一部分,通过对图层蒙版显示和隐藏可以查看图层使用蒙版前后的效果;通过应用图层蒙版,可以将蒙版遮挡效果应用到图层中;通过链接和取消链接蒙版,可以将图层和蒙版一起移动,也可以单独移动图层或蒙版。
(4)练习:
使用剪贴蒙版制作图像
①打开“6-5”文件
②选择“钢笔工具”,在工具选项栏中,选择“路径”,用钢笔点击相框中照片的四角,勾出相片,打开“路径”调板,出现“工作路径”。
选择“工作路径”,按住Ctrl键,使用鼠标左键单击“工作路径”,载入选区。
③执行“图层>新建>通过剪切的图层”,查看图层调板,照片与相框分离,照片为“图层1”,相框为“背景”。
④打开“6-6”图像,将“6-6”,拖入到相框图像中,生成“图层2”使“图层2”为最上层图层,
⑤执行“图层>创建剪贴蒙版”,将图层2图像置于相框中
⑥点选图层2,执行“编辑>自由变换”,调整“图层2”至合适大小。
课后作业
使用PhotoShop设计一本书的封面
教案
课题:
站点的创建课型:
讲授与实训
周次:
第4周课时:
1课时
授课时间:
地点:
机房
教学目标:
1、掌握网页制作的基本概念。
2、掌握Dreamweaver的基本操作方法。
3、掌握在Dreamweaver中如何建立网站站点。
教学重难点分析:
重点:
1、在Dreamweaver中建立网站站点
难点:
教学过程:
一、课前引导,提出相应问题
1.互联网中的网站是存贮在什么地方的?
互联网中的网站是存贮在服务器上的。
2.互联网中有多少台服务器,如何访问到中间的某台服务器呢?
互联网中有很多台服务器,可以通过IP地址访问。
在互联网中每台服务器都有全球唯一的IP地址,IP地址有IPV4和IPV6两种,现我国大多使用IPV4,IPV4由4个字节组成。
3.用IP地址访问网站方便吗?
我们上网一般使用什么方式上网?
用IP地址访问网站不方便,我们上网一般使用网站域名上网?
4.什么是本地站点和远程站点?
所谓站点可以看做是一系列文档的组合,这些文档之间通过各种链接关系起来,可能拥有相似的属性,站点实际上对应的是一个文件夹,我们设计网页就保存在这个站点(文件夹)中,存储在本地机器中的站点(文件夹)称为本地站点,发布到WEB服务器上的站点(文件夹)则称为远程站点。
二、在Dreamweaver建立本地站点
1.首先我们在D盘上面建一个文件夹,然后更改文件夹名称jcwww
2.在Dreamweaver里面选择站点,选择新建站点
3.按对话框输入站点名称,如:
我的足球网。
本地站点文件中输入,刚新建文件夹的路径
三、4
4.点击保存
这样站点就建立好了,这时在右下角有一个文件框
这时我再新建网页都会自动保存到我们的站点文件夹中
教案
课题:
HTML语言图文混排的网页设计课型:
讲授与实训
周次:
第4周课时:
3课时
授课时间:
地点:
机房
教学目标:
1、建立一个图文混排的网站
2、掌握HTML语言的基本格式。
教学重难点分析:
重点:
1、HTML语言的标签和标签的属性
难点:
1、HTML语言的标签和标签的属性
教学过程:
一、什么是HTML?
超文本标记语言(HTML,HyperTextMarkupLanguage)是用于设计网页源文件(网页文档)的语言。
每一个页面的代码保存为一个网页源文件(.htm或.html文件)。
HTML包括一些定义页面内容和格式的符号,称为标记。
它能够将文本、图像、声音和动画结合在一个网页文档中。
这些文档可以通过Web浏览器显示,还可以通过超链接以访问其它的信息资源。
二、什么是标记?
标记是网页文档中的一些有特定意义的符号。
这些符号指明如何显示文档中的内容。
标记总是放在三角括号中,大多数标记都成对出现(有开始标记和结束标记)。
结束标记和开始标记所用的字符相同,只是前面加一个斜杠。
1.HTML文档的结构标记【例1】
2.格式标记
(1)
…
(段落标记)用来创建一个段落,在此标记之间的文本将按照段落的格式显示。
(2)
(换行标记)
(3)
…(两边缩进标记)
在此标记之间的文本将按照两边缩进的方式显示。
(4)
(5)
(6)
(分段标记)3.文本标记
(1)
……(六级标题标记)是最大的标题,则是最小的标题。(2)(字体标记)
(3)(强调加重标记)
(4)(字体的大小颜色标记)【例4】
可以指定输出文本的字体大小、颜色,它主要两个属性size和color。
4.链接标记【例5】
(1)
Ø链接对象为文本时(例:
Ø链接对象为图像时,需使用
(例:
\pic1.gif">) Øhref的值也可以是mailto: 形式,即发送E-Mail形式。 语法为: E-Mail地址"> Ø
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页开发基础 网页 开发 基础 教案