在网页中添加图像.docx
《在网页中添加图像.docx》由会员分享，可在线阅读，更多相关《在网页中添加图像.docx（10页珍藏版）》请在冰豆网上搜索。
在网页中添加图像
任务“制作左图右文页面效果”的操作
教师
梁玉鹏
班级
15电商班
科目
Dreamweavercs6
开课时间
2016年11月2日——4日
地点
信息传媒部3楼机房
任务名称
“在网页中添加图像”的操作
课时数
4
教学重点
图像的插入和图像属性的设置方法、图像编辑的设置方法、背景图像以及为图像添加文本的操作方法
课前准备
教材、多媒体教室
建立站点
教学难点
图像的插入方法
学情
分析
授课对象是青海省海南州职业技术学院15级电子商务班学生，95%是少数民族藏族，对普通话的认知稍微薄弱，给教学带来了不便；本学期是对该班的学生进行网页制作的授课指导，学生已经在上一学年完成了网站设计中某些技术（PHOTOSHOP）的学习。
教学过程设计
通过插入图像美化网页的整体效果。
本次课，主要采用学生课前自我学习→老师进行讲解→学生思考操作→老师巡视→学生演示→老师点评这一教学过程设计。
教学过程中充分体现教师的主导作用、学生的主体作用，学生按照分组，以具体工作任务为主线，采用多种方法实现页面设计，完成本任务的实施。
学习目标
设定
采用分组实施任务，培养学生独立思考、共同协作等能力，通过相互讨论、帮助达到共同完成教学任务的目标。
以一小组5人为单位，实现网页效果；4组不同的设计者，多角度完成任务。
通过老师引导，学生自学，相互讨论，增强学生自主学习能力。
教学情景
创设
在一体化教学情境中进行，以项目为引领，以具体工作为驱动，根据平台的需求，利用所学知识，理清页面的设计思路；由老师不断提问，学生回答，来回顾基础知识；
教学资源
准备
多媒体教学软件；
“制作左图右文”的页面效果；
机房连接互联网。
过程实施
[新课引入]
图像是网页中最重要的多媒体元素之一。
在Dreameweavercs6中不但提供了普通图像的插入功能，还提供的更高级的图像插入功能
[新课]
一、提出任务
我们以编辑“制作左图右文页面效果”蓝本，使用本节所讲的额内容对页面进行编辑。
二、分析任务
在站点建立完成的基础上，进一步掌握在页面中插入图片的方法。
网页文件中支持的图像问价格式中医药包括.jpg/.jpeg/.gif/.png。
三、相关知识
1、添加网页图片
插入图片方法有两种：
1.通过菜单命令。
2.通过插入浮动面板
2、HTML标签
（1）
标签
首先对整个页面进行整体表格布局
（2）
|
标签
对表格的行进行设置。
（3）标题
| 标签
对表格的列进行设置
三、实施任务
步骤一：
建立站点
在DreamweaverCS6中建立站点。
（学生自行操作）
步骤二：
整体表格布局
步骤三：
整体布局区域代码
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
无标题文档
.aa{
color:
#F6C;
font-family:
"汉仪醒示体简";
font-size:
24px;
}
.bb{
font-family:
"方正楷体简体";
}
.bb{
font-size:
12px;
}
| | |
|