在网页中添加图像.docx

任务 “制作左图右文页面效果”的操作 教 师梁玉鹏班 级15电商班科 目Dreamweaver cs6开课时间2016年11月2日——4日地 点信息传媒部3楼机房任务名称“在网页中添加图像”的操作课时数4教学重点图像的插入和图像属性的设置方法、图像编辑的设置方法、背景图像以及为图像添加文本的操作方法课前准备教材、多媒体教室 建立站点教学难点图像的插入方法学 情 分 析授课对象是青海省海南州职业技术学院15级电子商务班学生，95%是少数民族藏族，对普通话的认知稍微薄弱，给教学带来了不便；本学期是对该班的学生进行网页制作的授课指导，学生已经在上一学年完成了网站设计中某些技术（PHOTOSHOP）的学习。教学过程设 计通过插入图像美化网页的整体效???。本次课，主要采用学生课前自我学习→老师进行讲解→学生思考操作→老师巡视→学生演示→老师点评这一教学过程设计。教学过程中充分体现教师的主导作用、学生的主体作用，学生按照分组，以具体工作任务为主线，采用多种方法实现页面设计，完成本任务的实施。 学习目标 设 定采用分组实施任务，培养学生独立思考、共同协作等能力，通过相互讨论、帮助达到共同完成教学任务的目标。 以一小组5人为单位，实现网页效果；4组不同的设计者，多角度完成任务。 通过老师引导，学生自学，相互讨论，增强学生自主学习能力。教学情景 创 设在一体化教学情境中进行，以项目为引领，以具体工作为驱动，根据平台的需求，利用所学知识，理清页面的设计思路；由老师不断提问，学生回答，来回顾基础知识；教学资源 准 备多媒体教学软件； “制作左图右文”的页面效果； 机房连接互联网。过 程 实 施[新课引入] 图像是网页中最重要的多媒体元素之一。在Dreameweaver cs6中不但提供了普通图像的插入功能，还提供的更高级的图像插入功能 [新 课] 一、提出任务 我们以编辑“制作左图右文页面效果”蓝本，使用本节所讲的额内容对页面进行编辑。 二、分析任务 在站点建立完成的基础上，进一步掌握在页面中插入图片的方法。 网页文件中支持的图像问价格式中医药包括.jpg/.jpeg/.gif/.png。 三、相关知识 1、添加网页图片 插入图片方法有两种： 通过菜单命令。 通过插入浮动面板 2、HTML标签 （1）table /table 标签 首先对整个页面进行整体表格布局 （2）tr/tr标签 对表格的行进行设置。 （3）标题td /td标签 对表格的列进行设置 三、实施任务 步骤一：建立站点 在Dreamweaver CS6中建立站点。（学生自行操作） 步骤二：整体表格布局 步骤三：整体布局区域代码 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title无标题文档/title style type=text/css .aa { color: #F6C; font-family: 汉仪醒示体简; font-size: 24px; } .bb { font-family: 方正楷体简体; } .bb { font-size: 12px; } /style /head body /tr tr tdp class=bbnbsp;/p/td tdp class=bbnbsp;/p/td /tr tr td class=bbnbsp;/td tdnbsp;/td /tr /table /body /html 步骤四：设置空间网页的宽度以及高度的代码 （table width=815 height=635 border=0 cellspacing=0 tr td height=85 colspan=2 align=left valign=middleh1 class=aanbsp;/h1 pnbsp;/p/td /tr tr td width=208 height=201nbsp;/td td width=603 align=left valign=middlep class=bbnbsp;/p/td （2插入背景图片 （3）用同样的方法插入其他两张