在网页中添加图像_第1页
在网页中添加图像_第2页
在网页中添加图像_第3页
在网页中添加图像_第4页
在网页中添加图像_第5页
已阅读5页，还剩7页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、任务 “制作左图右文页面效果”的操作教 师梁玉鹏班 级15电商班科 目Dreamweaver cs6开课时间2016年11月2日4日地 点信息传媒部3楼机房任务名称“在网页中添加图像”的操作课时数4教学重点图像的插入和图像属性的设置方法、图像编辑的设置方法、背景图像以及为图像添加文本的操作方法课前准备教材、多媒体教室建立站点教学难点图像的插入方法学 情分 析授课对象是青海省海南州职业技术学院15级电子商务班学生，95%是少数民族藏族，对普通话的认知稍微薄弱，给教学带来了不便；本学期是对该班的学生进行网页制作的授课指导，学生已经在上一学年完成了网站设计中某些技术（PHOTOSHOP）的学习。教学

2、过程设 计通过插入图像美化网页的整体效果。本次课，主要采用学生课前自我学习老师进行讲解学生思考操作老师巡视学生演示老师点评这一教学过程设计。教学过程中充分体现教师的主导作用、学生的主体作用，学生按照分组，以具体工作任务为主线，采用多种方法实现页面设计，完成本任务的实施。 学习目标设 定采用分组实施任务，培养学生独立思考、共同协作等能力，通过相互讨论、帮助达到共同完成教学任务的目标。以一小组5人为单位，实现网页效果；4组不同的设计者，多角度完成任务。通过老师引导，学生自学，相互讨论，增强学生自主学习能力。教学情景创 设在一体化教学情境中进行，以项目为引领，以具体工作为驱动，根据平台的需求，利用所

3、学知识，理清页面的设计思路；由老师不断提问，学生回答，来回顾基础知识；教学资源准 备多媒体教学软件；“制作左图右文”的页面效果；机房连接互联网。过 程 实 施新课引入图像是网页中最重要的多媒体元素之一。在Dreameweaver cs6中不但提供了普通图像的插入功能，还提供的更高级的图像插入功能新 课一、提出任务我们以编辑“制作左图右文页面效果”蓝本，使用本节所讲的额内容对页面进行编辑。二、分析任务在站点建立完成的基础上，进一步掌握在页面中插入图片的方法。网页文件中支持的图像问价格式中医药包括.jpg/.jpeg/.gif/.png。三、相关知识1、添加网页图片插入图片方法有两种：1. 通过菜

4、单命令。2. 通过插入浮动面板2、HTML标签（1）<table> </table> 标签首先对整个页面进行整体表格布局（2）<tr></tr>标签对表格的行进行设置。（3）标题<td> </td>标签 对表格的列进行设置三、实施任务步骤一：建立站点 在Dreamweaver CS6中建立站点。（学生自行操作）步骤二：整体表格布局 步骤三：整体布局区域代码 <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "http:

5、//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 c

6、olor: #F6C;font-family: "汉仪醒示体简"font-size: 24px;.bb font-family: "方正楷体简体".bb font-size: 12px;</style></head><body> </tr> <tr> <td><p class="bb">&nbsp;</p></td> <td><p class="bb">&nbsp;&l

7、t;/p></td> </tr> <tr> <td class="bb">&nbsp;</td> <td>&nbsp;</td> </tr></table></body></html>步骤四：设置空间网页的宽度以及高度的代码（<table width="815" height="635" border="0" cellspacing="0"

8、;> <tr> <td height="85" colspan="2" align="left" valign="middle"><h1 class="aa">&nbsp;</h1> <p>&nbsp;</p></td> </tr> <tr> <td width="208" height="201">&nbs

9、p;</td> <td width="603" align="left" valign="middle"><p class="bb">&nbsp;</p></td>（2插入背景图片（3）用同样的方法插入其他两张（4）输入文字<p>熊（英文名称：Bears）：是食肉目熊科动物的通称，熊平时还算温和，但是受到挑衅或遇到危险时，容易暴怒，打斗起来非常凶猛。虽然一般人把熊看做是危险的动物，但在马戏团或动物园中，却是相当受人喜爱的。分布在北半球。

10、在南半球，除了南美洲北部外，其他地方没有它的踪迹。熊科是个大家族，可分为五属：大熊猫属、懒熊属 、眼镜熊属、马来熊属、熊属。</p> <p>熊躯体粗壮肥大，体毛又长又密，脸形像狗，头大嘴长，眼睛与耳朵都较小，臼齿大而发达，咀嚼力强。四肢粗壮有力，脚上长有5只锋利的爪子，用来撕开食物和爬树。尾巴短小。熊平时用脚掌慢吞吞地行走，但是当追赶猎物时，它会跑得很快，而且后腿可以直立起来。</p> <p class="bb">&nbsp;</p></td> </tr> <tr> &l

11、t;td><p class="bb"><img src="tiger.jpg" width="492" height="360" /></p></td> <td><p>虎，别名：老虎，拉丁学名：Panthera tiger 英文：Tiger，是大型猫科食肉动物，被人们称为森林之王，老虎对环境要求很高，适应环境能力强，因为人类捕杀和栖息地的缩小而数量稀少，在亚洲分布很广，老虎不但是亚洲北部顶级的猫科动物，也是目前地球上强大的陆地肉食动物之一

12、，老虎在森林里没有敌手。现在从北方寒冷的南西伯利亚地区，到南亚的热带丛林，及高山峡谷等地，都能见到其强壮的身影。</p> <p>虎强壮高大，毛色从北而南呈黄色到红色渐变，有深色条纹。不同于狮子吻长所以脸廓狭长的特点，老虎吻部较短，显得头大而圆。 现就最大、最小两极的老虎外形做个介绍。其余的毛色、体形都介于中间，以此类推。</p> <p class="bb">&nbsp;</p></td> </tr> <tr> <td class="bb">

13、<img src="shi.jpg" width="494" height="320" /></td><td>狮 英文名：Lion，是一种生存在非洲和亚洲的大型猫科动物，体重可达180公斤至280公斤，体长1.9至2.7米，世界上发现最大的野生非洲狮体全长3.5米，重342公斤，尾长90cm。母狮的毛发短，体色是茶黄色。不同的是雄狮还长有很浓密的鬃毛。雄狮鬃毛发达，体格强壮，现代狮子有13个亚种。狮子是速度与力量完美结合的化身，地球上的超级大猫。被称为万兽之王。（5）最终制作结果图四、巡回指导 对于在制作过程中出现的困难的学生给予辅导，讲解。保证本节课程内容的顺利完成五、评价任务组内自我评价评出做得又快又好的个人，并总结出错的地方组组相互评价评出效果最好的页面设计老师点评以客户的观点提出更高的要求总 结本次课主要通过编辑空间网页，让学生设置文本样式的方法。掌握特殊符号、时间和注释的插入方法、水平线的插入方法，并能够学以致用。让学生熟练插入文本以及其他的方法，其中多

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论