网页制作教案_第1页
网页制作教案_第2页
网页制作教案_第3页
网页制作教案_第4页
网页制作教案_第5页
已阅读5页，还剩70页未读， 继续免费阅读

下载本文档

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

文档简介

案课程网页制作2016——2017学年第一学期班级计算机应用二年级教师胡发萍

课时进度表周次教学内容1第一章网页制作基础2第一章网页制作基础3第二章DreamWeaverMX入门4第二章DreamWeaverMX入门5第三章网页的布局和定位6网页的布局和定位7第四章网页版面设计与制作8第四章网页版面设计与制作9复习10期中考试11第五章网页动画设计与制作12第五章网页动画设计与制作13第六章网站鉴赏与设计14第六章网站鉴赏与设计15第七章网页动态效果的制作16第七章网页动态效果的制作17第八章网页动态效果的制作18第八章网页动态效果的制作19复习20期终考试

网页制作全册备课总课时96课时任课教师曾玉洪教材分析本书以初学者和专业网页制作人员为教学对象，以怎样建立一个网站，怎样才能自设计出一个精美出色的网站，学生制作网页应该从哪儿入手，应该学会哪些制作网站的技术入手，主要以介绍静态网页为主，采用实例教学的方式，向学生讲解如何使用DreamWeaver网页制作软件进行网页的制作与开发。教材重点第二章DreamWeaverMX入门第三章网页的布局和定位第四章快速建站技术第五章用FLASH加工美化网页第六章用PS处理网页图片第七章网站设计第八章网页动态效果的制作教材难点第二章DreamWeaverMX入门第三章网页的布局和定位第四章快速建站技术第五章用FLASH加工美化网页第六章用PS处理网页图片教学方法讲授—一多媒体演示一教学一体化一操作学生情况分析学生们大都是初中毕业生，在学校里对计算机已经学习了一年半，学生对网页制作比较有兴趣，都能完成一些简单的操作。教改及实施措施在多媒体教室或机房进行教学，本书每章开头给出“学习目标”有利于读者明确学习目的，每章结尾的“小结”帮助学生掌握本章的知识和技能。1、上课时边操作边讲解，让学生们对每一部分知识点都能理解和掌握。2、让学生们多操作。网页制作第一章备课网页制作第一章备课单元课时6课时单元分析第一章设计与规划“数码资讯网”一网站规划及站点建立，介绍WWW服务的概念，明确网站主题的内容，利用dreamweavercs6建立“数码资讯网”站点，并制作一个简单的网页进行保存。知识目标了解WWW服务的由来、概念和原理规划与设计网站认识dreamweavercs6创建站点制作简单的网页技能目标认识dreamweavercs6创建站点教材重点创建站点制作简单的网页教材难点创建站点制作简单的网页教学方法讲授、多媒体演示、操作学生学习情学生们上课时能认真听、但由于没有书，所以下况去后对一些理论知识不能很好的掌握，只能通过上记一点笔记看一看。.课教改及实施布置一些小任务，在操作课上完成，一步一步加措施深内容，提高学生的操作能力。班级计算机二年级课时1、2课题第1章网页制作基础1.1WWW服务与超连接教学目标了解WWW服务的由来、概念和原理了解什么是超文本链接和超媒体链接教学重点WWW服务与超链接教学难点WWW服务与超链接教学方法教学一体化教学内容：DreamweaverMX简介1Dreamweaver是美国Macromedia公司开发的集网页制作和网站设计于一体的所见即所得站点开发工具。2供专业网页设计人员使用3最新版本本章任务A、介绍WWW服务的概念、由来和原理B、介绍超链接的相关概念C、介绍网站和网页的概念及相互关系D、网页HTML语言的简单介绍和跑马灯效果的制作E、网站制作与发布的常用软件一、什么是WWW服务WWW服务于1990年由设立在欧洲瑞士的粒子物理研究中心开发研制出来。其最初的目的是更方便地为分布在世界各地的物理学研究提供信息服务，使组内成员可以方便地通过INTERNET交换信息可想法。WWW是WorldWideWeb的缩写，其含义是“全球网”或“万维网”万维网简称WWW或3W,是目前Internet（因特网）上最流行的一种基于超文本形式的资源信息。万维网的最大好处是它将全世界的各种信息链接在一起，用户可通过网络无偿地访问这些资源并加以利用。WWW在服务上采用的是客户机/服务器模式，信息资源以一种用超文本语言编写的Web页形式存储在Web服务器中。这些Web页面信息既能同时存放在同一台Web服务器上，也能分开存放在不同的Web服务器上，页面之间通过一种被称为超链接的方式相互连接起来。WWW工作原理示意图P2所示二、超链接超链接包括两类超链接：超文本链接和超媒体链接。超文本链接是利用超文本Web页面之间进行跳转。所谓超文本就是WWW服务的信息组织形式，它与普通文本的区别在于，它在普通文本中包含了可以链接到其他文本的特殊文字。

通过上面的讲解，下面我们从一些网页上观察一些超链接及区别登录名r密码厂选择却！飞袤'任用通行应找回密码客服帮助企业邮箱’5西亍多云日寸〜’5西亍多云日寸〜-57新卸军事社自财嶷牍票基金科技手机敷玛儡有NBi彩迪黑乐明星音乐行车购王车空博客微均苴根视假搭客大片房产地产家居逢花城肓犍康女性星座盲儿乐库尚品碗空ra部箱出臼1曲用相册VC，交友游涉VI1金科上手拿地贺岁片天津楼市前行动力中央定调房地产走向1即万人住别整社区金科上手拿地贺岁片天津楼市前行动力中央定调房地产走向1即万人住别整社区三亚财胃海湾开盘燕莎7折抢塔亚运的大畴装广渠路地壬皱改规划制鲤东四环小户型开盘！海航三亚柏国去馆去眦09年第十一居住交龛0909年第十一居住交龛09年正地产新闻评选09地产界的3的天09十九地产越言由深圳十大捂盘项目09旅H林市纪念册金■园五号雪噜瓦？舞奥两居，B铜百套买宅打拓里程跟踪购序信心全国调职遢迪出产左人哀人挎史定调已门口该行走向迪拜土松后式危出产左人哀人挎史定调已门口该行走向迪拜土松后式危R£匚门花云,K丹北尼苗链怎看土A大♦重庆城打开该网页进行比较讲解最后留一步分时间让同学们一些好的网页进行浏览如:课后记：由于同学们都没有书，这节课的内容比较少，同学们都能很好的掌握。

班级计算机二年级课时3、4课题1.2什么是网页与网站教学目标了解什么是网页、什么是网站，网页和网站的关系了解网页的种类和网页的基本元素，HTML语言及HTML语言的格式学会编写源代码来制作一些简单的网页教学重点HTML语言及HTML语言的格式编写源代码来制作一些简单的网页教学难点HTML语言及HTML语言的格式编写源代码来制作一些简单的网页教学方法教学一体化教学内容：使用浏览器在Interner上浏览各类网站和网页，已经成为人们通过Interner了解社会的一种重要手段。但什么是网页，什么是网站呢，网页与网站又有什么关系？这就是本节要讲解的内容。一、什么是网页网页是WWW中的基本文档，是用HTML（HypertextMarkupLanguage,超文本标记语言）或者其他语言Javascripr、VBScript、ASP、JSP、PHP或XML等）编写的文档，该文档可以用WWW的方式在网上传播，并被浏览器识别、翻译成WEB页面形式显示出来。网页一般分为两大类：一类是静态网页（扩展名为htm、html等）；另一类是动态网页（扩展名为asp、aspx、jsp、php、cgi）不管是静态网页还是动态网页，网页一般包含以下几种基本元素：（1）文本：文本是网页最基本的元素，网页上大量的内容都是用文字来表达的，而且由于文字所占的空间非常小，下载速度非常快，所以在网页中应用非常广泛。（2）图像：图像是网页中必不可少的另一种元素。在网页里经常使用的图像格式有GIF和JPEG两种。（3）多媒体元素：网页中的多媒体元素有许多种，常用的有三种：音频、视频和动画。常用音频格式（WAV和MIDI音乐文件），常用的视频格式有出乂、AVI、WMV等格式）常用的动画文件有FLASH动画（SWF格式）和GIF格式。（4）超链接：网页中的最具特色的功能（5）脚本程序：是用于扩充网页功能而能在网页上直接解释的程序语言，常用的有显示访问的时间、让文字在屏幕上滚动等。二、什么是网站网站就是许多相关网页有机结合而形成的一个信息服务中心。在WWW上，信息是通过一个个网页呈现出来的。是用户在浏览器上看到」的一个个画面。三、HTML语言简介HTML是超文本标记语言。WWW服务中的网页要让使用不同计算机和操作系统的用户都能浏览，就必须有一套统一的编写标准。HTML就是用于编写网页的统一的语言规范。用HTML语言制作网页，一般有两种方法：一是使用记事本之类的工具，输入HTML标记和网页的内容进行直接编写，然后保存在以html或htm为扩展名的网页文件；另一种方法是使用可视化的网页制作工具，自动生成HTML代码。例：我的第一个网页执行菜单的“开始”一“程序”一“附件”一“记事本”将以下代码完整正确地输入到记事本软件中：<html><head><title>欢迎大家光临</title></head><body><p>这是我用记事本编写的第一个网页，<fontsize=+7color=red>欢迎光临！</font></p></body></html>执行菜单的“文件”一“另存为”存时注意必须加上扩展名.htm或.html。双击打开刚才保存的文件。哥欧迎人穿光临-KicroscrttInternetExplorer文件口霸辑⑪登看娜⑥工具⑪帮助凹o后退▼。团团心户搜索大限夹0出心画▼口地址⑪回口：Macknp%我的攵若U.htnl这是我用记事本编写的第一个网贝，欢迎尤伯作业：同学们现在做出这样的一个网页。课后记：通过案例的制作，同学们都能做出来，同学们的学习兴趣有了一定的提高。班级计算机二年级课时5、6

课题1.2.3HTML语言1.3常用的网页设计工具教学目标学会用源代码方式编写跑马灯效果了解网页制作所需的常用工具有哪些及在网页制作中的用途教学重点用源代码方式编写跑马灯效果教学难点用源代码方式编写跑马灯效果教学方法教学一体化教学内容：我们在上节课中制作了个简单的网页，我们来看一个这个网页源代码的格式。一HTML语言1、标记的写法：HTML语言中所有的标记都要加括号＜＞括起来，如＜P＞，括号中的标记字母不用区别大小写，。与标记中间不能用空格隔开。2、标记的类型：HTML语言中的标记可以分为两类：对称标记和单独标记对称标记中的HTML标记是对称的，表示方式是：〈标记＞内容＜/标记＞。其中〈标记＞称为起始标记，表示某种格式功能的开始，而后面的＜/标记＞称为结束标记，表式这种格式功能的结束，对称必须首尾呼应，有头有尾，对称标记允许相互嵌套，但不能交叉嵌套。〈标记〉〈标记〉〈/标记〉〈/标记〉单独标记中的HTML标记是不成对的，表示方法是：＜标记＞，标记中只有起始标记没有结束标记。如＜BR＞标记的作用是换行。3、文件标记A、所有的HTML文件都必须用特定的标记＜HTML＞起始，表示这是个网页文件，网页内容一直持续到＜/HTML＞标记结束。B、网页文件的内容分为两大部分：＜Head＞和＜/Head＞对称标记为头部分，主要包含着和网页文件有关的一些头信息，除了标题标记＜title＞＜/title＞外，其他内容不会显示在浏览器中；＜body#k/body＞对称标记称为正文部分，里面的内容会显示在IE浏览器中。HTML语言的其他标记都必须写在这两大标记中。C、网页头部分中的＜title＞对称标记是标题标记，该标记的作用是在浏览器的标题栏中显示网页的标题。D、网页正文部分中的＜P＞＜/P＞对称标记是段落标记，该标记的作用是用来划分段落。4、标记参数A、标记中可以加上参数设定，但参数必须加在起始的标记内，如：＜fontsize=+7＞欢迎光临！＜/font＞。B、如果个标记中有多个参数要设定，那么用空格隔开参数，如＜fontsize=+7color=red＞欢迎光临！＜/font＞参数属性表

Bgcoor背景颜色，可输入颜色的英文名称或者十六进制代码等；Direction=leftrightupdown滚动方向（左、右、上、下）Behavior=scrollslidealternayescroll表示由一端滚动到另一端slide表示由一端快速滑动到别一端，不再重复alternaye表示在两端之间来回滚动Height=数值滚动区域的高度Width二数值滚动区域的宽度Scrollamount=数值决定滚动的速度，数值越大滚动越快；Scrolldelay=数值延迟时间，数值越大跳跃越明显Loop=数值循环次数，不设置该值即表示无限循环跑马灯效果的制作：实例1：该网页上显示的文字在网页上从右到左滚动。2.html<html><head><title>欢迎大家光临</title></head><body><marquee>这是我用记事本编写的第二个网页</marquee></body></html>实例2：让“我会滚动”几个字在网页上从左到可滚动。3.html<html><head><title>欢迎大家光临</title></head><body><p>这是我用记事本编写的第三个网页</p>〈marqueedirection=right>我会滚动！</marquee></body></html>实例3：让“我会滚动”几个字在网页上来回滚动，并且滚动的宽度是300px。<html>3.html<head><title>欢迎大家光临</title></head><body><p>这是我用记事本编写的第四个网页</p>〈marqueebehavior=alternatewidth=300>我会滚动！</marquee></body></html>实例4：让“我会滚动”几个字在网页中向上滚动，并且滚动的高度是300px，滚动速度是29。4.html<html><head><title>欢迎大家光临</title></head><body><p>这是我用记事本编写的第四个网页</p>〈marqueedirection=upheight=300scrollamount=29>我会滚动！</marquee></body></html>二、常用的网页设计工具1、网页制作平台DreamweaverMX2002年9月，美国Macromedia公司开发的Dreamweaver软件推出MX系列的简体中文版，该软件同时适用于初学都和专业网页设计师，是一款优秀的“所见即所得”的可视化网页编辑软件。DreamweaverMX除了可以用来开发静态网页外，还支持动态网页的开发。同时该软件集网页制作和网站管理于一身，能轻松实现对本地网站及远程网站的管理及异地网页编辑管理的功能。2、图像处理工具Photoshop7.0Photoshop软件它的强大功能不仅能创造出不朽的计算机图形艺术，并且渗透到计算机应用的各个领域。3、动画制作工具——FlashMXFlash是目前网络上最为流行的矢量动画设计制作软件，动画制作能力异常强大，特别是作为一个多媒体网页设计平台方面，网站设计师不仅可用它制作网页上的导航栏、广告宣传栏，还可用它独立制作在网上发布的网络软件。4、网页上传下载——CuteFTP它是一种基于FTP的数据交换软件，拥有很多功能，如断点续传、自动登陆等，是上传、维护、更新网站必不可少的工具软件。作业：课后练习填空题网页制作第二章单元备课

单元课时18课时单元分析第一二章Dreamweaver入门。1、Dreamweaver软件的运行方法和对界面的熟悉，2、站点的建立与规划管理，3、页面属性的设置，4、文本的格式化，5、图像的格和插入排版，6、超链接的设置，7、其他媒体的插入，8、CSS层叠样式表的使用知识目标掌握Dreamweaver软件的启动与基本操作掌握建立站点的步骤和对站点的管理了解页面属性的各类选项的设置了解网页中常用的几种图像格式熟悉超链接的类型和表现形式技能目标熟悉Dreamweaver软件的界面掌握建立站点的步骤和对站点的管理掌握页面属性中标题、页边距、背景色和背景图的设置方法掌握图像插入和文本混排的方法掌握在网页中建立各种超链接的方法掌握在网页中插入FLASH动画和插入音乐的方法教材重点1、Dreamweaver软件的运行方法和对界面的熟悉，2、站点的建立与规划管理，3、页面属性的设置，4、文本的格式化，5、图像的格和插入排版，6、超链接的设置，7、其他媒体的插入，8、CSS层叠样式表的使用教材难点2、站点的建立与规划管理，3、页面属性的设置，4、文本的格式化，5、图像的格和插入排版，6、超链接的设置，7、其他媒体的插入，8、CSS层叠样式表的使用教学方法讲授、多媒体演示、操作学生学习情况学生们上课时能认真听、但还没有书，同学们只能通过上课听和看到」的一些知识和操作方法进行练习，不能做到很好的掌握。教改及实施措施布置些小任务，在操作课上完成，步步加深内容，提高学生的操作能力。

课题2.1DreamweaverMX的工作界面和基本操作教学目标掌握DreamweaverMX软件的启动方法熟悉DreamweaverMX软件的界面掌握DreamweaverMX软件的基本操作教学重点DreamweaverMX软件的基本操作教学难点DreamweaverMX软件的基本操作教学方法教学一体化班级计算机二年级课时7、8教学内容：一、熟悉DreamweaverMX2004的工作界面Dreamweaver欢迎界面1、启动DreamweaverMX2004认识窗口布局、面板与面板组2、DreamweaverMX2004的工作界面1、启动DreamweaverMX2004认识窗口布局、面板与面板组2、DreamweaverMX2004的工作界面”栏“文档”窗口3、DreamweaverMX软件界面的相关操作。A、功能面板的移动：B、功能面板的展开和收缩C、学会使用面板上的按钮D、扩大网页编辑窗口的大小完成上述四个方面的操作后让学生们自主操作完成对DreamweaverMX的启动，工作界面的认识及操作。

班级计算机二年级课时9、10课题2.2站点的建立与规划教学目标掌握建立占点的一般步骤掌握如何对站点进行管理教学重点站点的建立与管理教学难点站点的建立与管理教学方法教学一体化教学内容:用户设计的网页和相关素材，一般都要求存放在同一个文件夹内，这样方便对网站进行维护和管理，特别是将网站发布到服务器上时，这点尤其重要。我们建立站点的目的也在于此。一、站点的建立创建站点，其实就是绑定一个文件夹。我们通过一个实例来看如何建立一个站点。案例：美乐电器网站的建立1、执行菜单的“站点”一一“新建站点”或在右侧文件功能面板中选择“站点”，然后点击“管理站点”2、在出现的安装向导文本框中输入网站的名称，以便在Dreamweaver中识别该站点。站点名称可以是任何名称，用户可以随意取。这里输入“美乐电器”一一“下一步”3、当站点定义向导询问“您是否要使用服务器技术”选择“否”表示目前该站点是一个静态站点，没有动态页。选择“是”则需要进一步选择动态网页类型。4、站点定义向导3中主要实现两个功能：A、指

定网页存放的处理方式B、在文本框内指定站点所指向的位置。5、站点定义向导询问你如何连接到远程服务器，有FTP、本地/网络、RDS等方式。如果没有远程服务器，这里可以选择“无”。再单击“下一步”就会出现如下图：新建好的站点二、站点的管理1、修改站点信息A、执行菜单的“站点”一一“管理站点”一一选择“编辑”B、在弹出的对话框中：可以设置“站点名称”，设置站点的路径2、创建网站的文件和文件夹：在Dreamweaver中创建网页的方法主要有两种：A、一种是传统的通过文件菜单创建网页文件。“文件”一一“新建”/Ctrl+NB、通过站点管理器来新建文件和文件夹。课题上机作业：利用站点管理器新建image文件夹和网页文件。课题班级计算机二年级课时11、122.3网页页面属性的设置

教学目标了解页面属性的各类选项的设置掌握页面属性中标题、页边距、背景色和背景图的设置方法教学重点页面属性中标题、页边距、背景色和背景图的设置教学难点页面属性中标题、页边距、背景色和背景图的设置教学方法教学一体化教学内容:网站有自己的各种设置和属性，网页亦如此。本节将针对网页的各种属性设置详细讲解。页面的属性设置很简单，在页面的任何一个空白位置单击右键，然后在快捷菜单上选择“页面属性”，或执行菜单的“修改”一一“页面属性”出现如下图标题：设置页面的标题。背景图像：给页面的背景设置背景图像。背景：设置背景颜色，默认为白色。文本：设置文本的颜色，默认为黑色。链接：超链接文本的颜色，默认为蓝色。访问过的链接：超链接被访问后的颜色，默认为暗红色。活动链接：链接被选中时的颜色。左边界：设置页面左边的空白。顶部边界：设置页面顶端的空白。边界宽度：设置页面空白的宽度。边界高度：设置页面空白的高度。文档编码：设置页面的编码，默认是简体中文跟踪图像：设置跟踪图像。图像透明度：设置跟踪图片的透明度，默认值为100%，表示不透明。案例1：用页面属性给网站首页设置页面标题

操作步骤：（1）、打开一个网页文件，3.html（2）执行菜单的“修改”一一“页面属性”或用CTRL+J。（3）在标题栏中输入“余姚市美乐电器有限公司”（4）将当前页面保存CTRL+S，按F12功能键预览网页。案例2：用页面属性给网站“企业简介”页面设置背景颜色。（1）打开3.html文件，执行菜单“修改”——“页面属性”（2）鼠标单击“背景”边上的颜色拾取器，弹出取色面板。（3）用取色器吸取想作为背景色的颜色，一般为浅色，这里设成为浅黄色。（4）保存文件，按F12在浏览器中看到被加了背景色的页面。案例3：用页面属性给网页“与我联系”页面设置背景图片。（1）在编辑区打开文件，执行菜单“修改”—一“页面设置”（2）单击“背景图像”文本框边是的“浏览”，弹出选择图像源对话框，选择所需要的图片，选择“是”把图片复制到网页文件中。（3）回到“页面属性”对话框，“文件”一一“保存”班级计算机二年级课时13、班级计算机二年级课时13、14教学目标熟悉文本设置属性面板的各选项功能和插入面板各按钮功能掌握文本格式化的基本操作和在文本中插入特殊字符教学重点文本格式化的基本操作和在文本中插入特殊字符教学难点文本格式化的基本操作和在文本中插入特殊字符教学方法教学一体化2.4文本的格式化教学内容：一、文本的属性面板:棺式无~二［7甘式无VI脚IBZ==：=困£7毋口字伟映苗宇炜■］丈小医―nr~口匚］让汇些注目林:1页面用桂…1--=课题文本的属性面板课题格式：文本框内显示段落格式，类似于WORD,字体：预设的有各类英文字体、中文字体大小：设置文字的大小：设置颜色，右边是颜色数字的文本输入框。:给文字设置加粗或倾斜风格:可设置段落对齐方式，依次为左对齐、居中、右对齐、两边对齐。链接：文字的超级链接目标：目标窗口，可以设定超链接在目标窗口打开的方式。:项目列表和编号列表，设定文本的无序列表和有序列表方式。:设置段落缩进。二、文本的输入与排版使用Dreamweaver的“显示设计视图”，用户可以像编辑WORD文档一样编辑网页文件。案例1：给“美乐电器”网站的“企业简介”页面输入文字并排版。操作步骤：（1）在站点管理器中找到jianjie.htm文件，双击打开后进行编辑。（2）在光标闪烁年按WORD的输入方法录入企业简介内容。（3）给每个段落首行加入空格：按ctrl+shift+空格键，可以在页面文本中插入一个空格。（4）将大标题和小标题居中注：在DW中直接按回车键换行，会在两段间额外插入一空行。如果不想产生这个空行，可以在HTML源代码中输入＜9＞这样就不会在段与段之间不生空行了。DW的软件文本的编辑操作如复制、删除、剪切等操作方法与WORD类似。三、文本格式化.设置字体.文字大小.文本样式.文本的颜色.对齐方式设置字体、文字大小、文本样式、文本的颜色、对齐方式等都可在属性面板中进行设置。四、在文本中插入特殊字符操作2在网页编辑过程中，如果需要在页面中插入某些特殊符号，如版权符号、注册商标符号、英镑符号等的时候，可以通过选择插入一一特殊字符命令，从弹出的子菜单中选择要插入的特殊字符五、文本的段落排列用==3可以对段落进行凸起或缩进排列。通过案例一边操作一边练习效果会好一些。班级计算机二年级课时15、16课题2.5图像的插入与设置教学目标了解网页中常用的几种图像格式掌握图像插入和文本混排的方法教学重点掌握图像插入和文本混排的方法教学难点掌握图像插入和文本混排的方法教学方法教学一体化教学内容:一个优秀的网页设计定是图文并茂的，在网页中适当地插入图片，不仅可以使网页中的内容丰富多彩，还可以使网页显的美观、形象和生动。一、常用的图像类型和格式图像文件的格式有很多种，但通常应用于网页中的图像文件只有GIF，JPEG（JPG）和PNG3种，大多数浏览器都支持这3种文件格式的图像。（1）GIF格式GIF是GraphicsInterchangeFormat（图形交换格式）的简称，主要用于存储非连续色调图像或色调比较单一的图像。这种格式的图形文件最多使用256种颜色，具有体积小、下载速度快等优点，在网页制作中常用于制作导航条、按钮、图标等网页元素。（2）JPEG（JPG）格式JPEG是JointPhotographicExpertsGroup（联合图像专家组）的简称，主要用于存储照片或连续色调的图像。JPEG常用于显示网页中对图片色彩和清晰度要求较高的地方，是目前互联网中最受欢迎的图像格式。（3）PNG格式PNG是PortableNetworkGraphic（可移植网络图像）的简称，它同时具有GIF格式图像和JPEG格式图像的优点，它既可以采用无损压缩的算法，也可以采用有损压缩的算法来压缩图像，从而进一步减少文件的大小。而且PNG格式的图像支持多种颜色的显示，是颇具发展前景的一种图像格式。二.插入图像图像的属性面板在图像的属性面板左上方有一个缩略图，它的右边有“图像”字样以及当前文件的大小，其下方的文本框内给图像在网页中定义名称，以便将来使用“行为”时好调用该文件。宽和高：指在浏览器中为图片保留的宽度和高度，默认单位是像素（px）源文件：指定图片的具体路径。链接：指定图像的超链接垂直边距：指定图像在垂直方向上与文本或其他页面元素的间距。水平边距：指定图像在水平方向与文本或其他页面元素的间距。目标：指定链接时的目标窗口或框架。边框：指定图像边框的宽度。三、图像的插入与相关操作1、插入图像2、插入图像占位符图像占位符的作用是为当前网页留下一定的空间，用于以后在此插入图像文件。图像占位符的相关属性与图像的相关属性基本相同，用户可以设置图像占位符的名称、大小以及颜色等属性。3、设置图像属性.调整图像大小.裁剪图像.调整图像的亮度和对比度.对齐图像.图像描边.给图像增加提示信息.设置图像边距任务一、在页面中插入鼠标经过图像操作一编辑图像鼠标经过图像，其实由两个图像组成，其中一个图像为页面首次载入时显示的图像，另一个图像为鼠标指针移到其上方时显示的图像。通常情况下要求这两幅图像的大小相等，如果大小不同的话，Dreamweaver将自动调整第二个图像的大小以与第一个图像保持一致。为取得好的鼠标经过图像的效果，用户可先利用图像编辑工具，如Photoshop或FireworksMX2004等软件，将两张图片处理成大小一致的图像。操作二插入鼠标经过图像班级计算机二年级课时17、18课题2.6超链接的设置教学目标熟悉超链接的类型和表现形式掌握在网页中建立各种超链接的方法教学重点掌握在网页中建立各种超链接的方法教学难点掌握在网页中建立各种超链接的方法教学方法教学一体化教学内容：一、超链接的类型和表现形式1.超级链接的基本概念超级链接是指站点内不同网页之间、站点与Web之间的链接关系，它可以使站点内的网页成为有机的整体，还能够使不同站点之间建立联系。从工作机理的角度看，超级链接是一个指向其他网络资源的指针，通过它浏览器可以根据一定的要求载入相应的资源。.超级链接的分类在网页中超级链接可以根据链接载体和链接目标的不同进行分类，下面分别介绍它们的分类信息。(1)按链接载体分类，可以把链接分为文本链接与图像链接两大类。①文本链接：用文本作为链接载体，简单实用。②图像链接：用图像作为链接载体能使网页美观、生动活泼，它既可以指向单个的链接，也可以根据图像不同的区域建立多个链接。(2)按链接目标分类，可以将超级链接分为以下几种类型。③内部链接：同一网站内文档之间的链接。④外部链接：不同网站文档之间的链接。⑤锚点链接：同一网页或不同网页中指定位置的链接。⑥E-mail链接：发送电子邮件的链接，可直接点击发送电子邮件。⑦执行文件链接：链接站点空间里的可执行程序，用于下载与在线运行。.链接路径(1)绝对路径绝对路径是指某个文件在网络上的完整路径，包括协议、Web服务器、路径和文件名等。简单地说，如果在浏览器地址栏中输入就能直接访问的文件地址，就可以看做是绝对路径。例如，下面的地址就是绝对路径：；/index.asp(2)文件相对路径文件相对路径是指和当前文档所在的文件夹相对的路径。使用相对路径创建内部链接时，即使站点的域名或网站的根目录发生改变时，站点内所有使用相对路径的链接都不会出现问题。另外，当在站点管理器内进行文件的重命名、文件的移动、文件夹的移动等操作时，用文件相对路径创建的链接都会动态进行更新。(3)根目录相对路径如果要创建的是内部链接，用户还可以选择根目录相对路径。根目录相对路径是从当前站点的根目录开始的，用斜杠/代表根目录，然后再书写文件夹名，最后书写文件名。例如要创建到product01.htm的链接，任何文件中的链接地址都为/intro/product01.htm。二、设置超链接操作一、设置文本的超级链接.使用属性面板的链接文本框创建链接.使用属性面板的指向文件图标创建链接.使用超级链接对话框创建链接操作二、设置图片的超级链接通过上述操作完成：1、给“美乐电器”首页添加文本超链接2、修改“美乐电器”网站首页超链接的颜色。3、修改“美乐电器”网站首页超链接的网页，并在新窗口打开4、利用首页的图像来创建图片链接5、在首页的图像上创建热区链接班级计算机二年级课时19、20课题2.6超链接的设置教学目标掌握在网页中建立各种超链接的方法教学重点掌握在网页中建立各种超链接的方法教学难点掌握在网页中建立各种超链接的方法教学方法教学一体化教学内容：一、设置超链接1、锚点链接：锚点链接是使用在同一个网页内容之间相互跳转的一种超链接。当网页的内容和信息量很多时，就可以用锚点链接来指导浏览者的阅读。锚点链接类似于书的书签，可使浏览者迅速找到自己想要的信息。制作锚点链接，首先要在网页中制作一个锚点，然后创建一个跳转到这个锚点的链接，插入锚点的格式是“#锚点名称"，如#top。例：给“美乐电器”的产品页面创建锚点链接。（1）、在DW中打开chanpin.htm文件。（2）、光标定位到第四行产品的开头位置，单击常用面板下的盘按钮。（3）弹出“命名锚记”对话框，在对话框中输入定义的锚点名称，这里是line01,（4）单击确定”按钮，就会在第四行开头位置插入一个锚点。（5）回到网页顶部，做一个链接，点击后能跳转到锚点所在的位置。注：锚点名称不能包含空格，不能用中文命名且锚点不能位于层中。二、电子邮件超链接在网站上留下电子邮件，可方便访问者对网站提意见或进行其他联系。也可以把这些电子邮件地址做上超链接，让浏览者单击电子邮件链接就会自动打开电子邮件软件，并在收信人地址栏放上网站的电子邮件地址。例：在网页中插入电子邮件链接（1）打开链接的文件。选中要插入电子邮件链接的文本：，然后单击“插入”—一“常用”面板中的（电子邮件链接）按钮。（2）弹出电子邮件链接的对话框，在文本栏内填入想在页面中出现的邮件地址；在E-mail栏中输入邮件地址，如图

电子邮件链接电子邮件链接(3)单击“确定”按钮，完成链接的制作，再按F12键预览网页。点击新建的电子邮件链接就会自动弹出发送电子邮件的窗口。注：创建电子邮件链接还有一种方法是选中要插入链接的文本，直接在“属性”一一“链接”对话框中输入mailto：y*********@*.*(冒号要半角)三、URL超链接URL超链接是链接到其他使用URL定位的网站的超链接，一般用来链接其他的WWW网站，但也用来链接使用FTP协议的可下载文件。四、空链接空链接指的是一个无指向的链接。创建非常简单，只要在属性面板的链接栏中插入一个符号“#”就可以了。班级计算机二年级课时21班级计算机二年级课时21、22课题2.7其他媒体的插入与使用教学目标掌握在网页中插入FLASH动画的方法掌握在网页中插入音乐的方法教学重点在网页中插入FLASH动画和音乐的方法教学难点在网页中插入FLASH动画和音乐的方法教学方法教学一体化教学内容:WWW服务由于其对多媒体的支持很好而得到广泛的发展。互联网不仅能很好地在网络上传输文字和图片，还能传输各类多媒体信息，如动画、音频和视频。下面我们将介绍如何在网页中插入最常用的动画和音频文件。一、Flash动画的插入Flash动画由于其制作的动画文件所占空间小、质量高，并具有边下载边播放的特点，从而在网络上广为流传，成为当今互联网上各家网络率先考虑使用的动画类型。例：在“美乐电器”网站首页插入Flash标题操作步骤：(1)打开“企业简介”页面，把光标定位到网页上方。(2)执行菜单的“插入”一一“媒体”一一“Flash命令或单击“插入”一一“常用”面板上的—।按钮，弹出下一级菜单如图，再选择第一个Flash弹出如下图“选择文件”对话框。

选取文件名自・什宗统站点碰密器...|查找酒国g|0美乐电册▼]9/二亨二？tjniaoa|r11-1154512641^435261^6^-ljbackground[tU=L1930753361,39«003^^=匍ms孙的3tjjanjie-r.।on^j文件名®:文件类空文件名®:文件类空QJ所在文件o■打UKL:./ffi对于,立档事jianjle.kt^在站点定更中更燥默温的尊逐相对于（3）选择相应的Flash文件（Flash文件扩展名为swf）单击确认。通过Flash的属性面板，除了可以设置Flash文件的大小、播放质量、对齐方式等，还可以通过“播放”的编辑区预览动效果，甚至可以通过”参数“来设置Flash的属性。二、音频文件的插入音频文件的格式有很多种。在互联网上最常用的音频文件有MIDI格式、WAV格式和MP3格式。使用浏览器浏览网页，一般只能访问特定的几种网页元素：文本、图片等。如果想浏览其他类型的媒体对象，必须借助插件。将相应的媒体的插件下载到浏览器中，才能播放相应的媒体。例：在“美乐电器”网站首页插入MIDI音乐。（1）打开页面，把光标定位在网页下方。（2）执行菜单的“插入”——“媒体”一一“插件”命令或单击“插入”一一“常用”面板上的按钮，弹出选择文件对话框。通过“选择文件”对话框选择插件文件，MIDI音乐文件的扩展名是“mid⑶单击“确认”按钮，这时在网页编辑区中会出现一个符号，单击面板上“播放”按钮进行试听。通过讲解的内容，让同学们在自己的网页中做出来。

班级计算机二年级课时23、24课题2.8强大的层叠样式表教学目标熟悉CSS层叠样式表的格式和组织形式掌握CSS层叠样式表的定义和使用教学重点CSS层叠样式表的定义和使用教学难点CSS层叠样式表的定义和使用教学方法教学一体化教学内容：层叠样式表是W3C为了弥补传统的HTML功能之不足而开发的一种新的网页格式标准。一、层叠样式表的格式与组织形式。1、CSS的格式：CSS的基本语句格式如下：名称：{属性1：属性值；属性2：属性值；二二.}。名称：可以是用户自己定义的，也可以是HTML的源代码标记。属性：指的是那些将要被修改的属性，比如color。属性值：给属性设定的值，比如给color的值可以设定为red。例如：H1{color:red}H1是html的源代码中默认的1号标题标记。在网页中使用上面这条语句，网页中所有使用1号标题的文字都会变成红色。2、CSS的组织形式：二、层叠样式表的建立与使用1、DW面板的打开方法:执行菜单的“窗口”一一“CSS样式”或用快捷键shift+F11或展开面板“设计”一一“CSS样式”2、CSS面板介绍：CSS面板分“应用样式”和“编辑样式”两种显示方式。应用样式只显示用户定义的CSS规则。而编辑样式则显示所有定义过的CSS规则。右下角还有4个按钮，依次是：.：附加样式表：新建CSS样式：编辑样式表删除CSS样式3、CSS样式的建立与运用：（1）单击CSS样式面板右下角的按钮，插入一个新的CSS样式。弹出如下图：

新建匚空规则确定新建匚空规则选挥器类型：◎:类例应用于任何标赛〕标签嚏新定义特定标签的外观)©高级(ID,伪类选择器等>㈤帮助(2)CSS的运用：自定义的CSS样式运用与文本格式化的方法类似:首先选中要设定CSS样式的文字，然后单击选挥器类型：◎:类例应用于任何标赛〕标签嚏新定义特定标签的外观)©高级(ID,伪类选择器等>㈤帮助案例：给“美乐电器“网站中”与我联系“页面文字设定CSS样式。步骤：P58

网页制作第三章单元备课单元课时12课时单元分析第三章网页的布局和定位表格的建立与设置，表格在排版中的应用，层的建立与设置，层在排版中的应用，框架的使用知识目标能够插入表格、对表格的各组成单位进行选取及插入、删除行或列、保并、拆分单元格了解一些表格常用的设计技巧能够创建层、根据需要通过属性面板或层面板修改层的属性掌握层的重叠和对齐的操作方法、层与表格之间的相互转化方法掌握框架布局的基础操作技能目标能够插入表格、对表格的各组成单位进行选取及插入、删除行或列、保并、拆分单元格掌握层的选取、移动、调整大小的操作掌握层的重叠和对齐的操作方法、层与表格之间的相互转化方法掌握框架布局的基础操作教材重点1、表格的建立与设置2、表格在排版中的应用3、层的建立与设置4、层在排版中的应用，5、框架的使用教材难点1、表格的建立与设置2、表格在排版中的应用3、层的建立与设置4、层在排版中的应用，5、框架的使用教学方法讲授、多媒体演示、操作学生学习情况学生们上课时能认真听、都能对自己的网页进行美化和加工。教改及实施措施布置些小任务，在操作课上完成，步步加深内容，提高学生的操作能力。

班级计算机二年级课时25、26课题3.1表格的建立与设置教学目标能够插入表格，对表格的各组成单位进行选取能够插入、删除行或列，教学重点能够插入表格，对表格的各组成单位进行选取能够插入、删除行或列，教学难点能够插入表格，对表格的各组成单位进行选取能够插入、删除行或列，教学方法教学一体化教学内容:表格是在网页制作中经常运用的元件，它不仅能用于整理数据分类资料，还能用于网页排版以及制作一些特殊效果。本节将介绍插入表格、选取表格等基本操作方法。一、如何插入表格插入表格的方法很简单：（1）单击“常用”工具栏中的“插入表格”按钮，或单击菜单栏中的“插入”一一“表格”命令（2）弹出“插入表格”对话框，如图表格宽度：指定表格的宽度，此时指定表格宽度为浏览器宽度的75%。单元格间距：指定表格内单元格之间的间隙大小边框粗细：指定表格的边框宽度，若不希望显示边框，可输入0标题：表格的标题。（3）设置完成后“确定”按钮，就会在页面上看到插入的表格。在单元格中输入文字或图片。二、表格元素的选取表格的结构可以分为以下几部分：Tabi：整个表格Cell：单元格，就是表格的基本组成单位。Rows：行，就是一行水平方向上的单元格。Columns：歹列，就是一列垂直方向的单元格。1、选取整个表格：（1）、将鼠标指针移动到表格的边框线上单击鼠标左键选择整个表格。（2）、光标在表格中间时，可以执行菜单“修改”一一“表格”--“选择表格”命令或按CTRL+A,或在表格中单击右键，从弹出的快捷菜单中选择“表格”一“选择表格”命令。（3）、当光标出现时，在DM页面编辑窗口的左下角的HTML快速启动栏上选择“Tabi”标签，就可以选取整个表格。2、选取单元格：（1）将鼠标指针移动到某个单元格上，按CTRL键不放，再单击，就可以选中这个单元格。（2）按住CTRL键，再单击要选取的单元格，就可以选中不连续的多个单元格。（3）通过鼠标拖动的方法可以选取连续的一片单元格。3、选取行：将鼠标指针移动到选取行的左边，光标变成“箭头”形状时单击鼠标左键就可以选中一整行。4、选取列：将鼠标指针移动到选取列的上边，光标变成“箭头”形状时单击鼠标左键就可以选中一整列。三、行、列的插入或删除1、插入单一行、列（1）插入新的行时，新增的行会出现在插入点的上方，而插入列时，会出现在插入点的左方。因此，将插入点也就是光标移动到表格中的适当位置，然后执行菜单的“修改”—一“表格“—一”插入行。或执行菜单的“修改”—一“表格”—一“插入行”（2）在表格中选择好插入点后单击鼠标右键，弹出的快捷菜单的“表格”子菜单中也包括这些命令。2、插入多行，多列在表格中单击鼠标右键，执行菜单的“表格”—一“插入行或列”命令。3、删除行和列（1）将光标移动到要删除的行或列上，单击鼠标右键，在弹出的快捷菜单中选择“表格”—一“删除行（删除列）”命令，就可删除整行或整列。（2）选中整行或整列的单元格后按DEL键。就可以删除整行或是整列。班级计算机二年级课时27、28课题3.1表格的建立与设置教学目标能根据要求对表格合并、拆分单元格、行、歹列、单元格属性进行设置，了解DW的配色方案教学重点能根据要求对表格合并、拆分单元格、行、歹歹、单元格属性进行设置，了解DW的配色方案教学难点能根据要求对表格合并、拆分单元格、行、歹列、单元格属性进行设置，了解DW的配色方案教学方法教学一体化教学内容：一、合并和拆分单元格在实际应用中，需要录入的内容往往不会均匀地遍布每个单元格，这就需要对表格中的单元格进行合并和分解。1、合并单元格（1）选中相邻的两个或两个以上的单元格，可以是同行，也可以是同列的相邻的若干个单元格。（2）执行菜单的“修改”一一“表格”一一“合并单元格”命令，或按快捷键“Ctrl+Alt+M"合并单元格，还可以单击属性面板上的按钮合并单元格。2、分解单元格（1）、将光标移动到要分割的单元格中，执行菜单的“修改”——“表格”—一“分解单元格”命令，或者按快捷键“Ctrl+Alt+S”，也可以单击属性面板上的按钮分解单元格。弹出“拆分单元格”对话框。（2）、在对话框中，可以设定是在行上分割还是在列上分割，以及分割的数量，、表格的设置-T在DW中，一旦选中某个对象，属性面板就会变成这个对象的设置面板可以通过这个设置面板来精确调整对象的属性。表格属性当选中整个表格时，属性面板会自动变成表格的设置面板，可以通过这个面板修改表格的行数、列数、大小等属性。国表格工d行5宽布引列5高1琳埴充©像孟'雕''J|，：1b者总切色.0加拉有M图惊而[边幽也■[4匕4边框颜色：设置表格线的颜色。对齐：表格的对齐方式，可以将表格居中、居左、居右。背景图像：设置表格的背景图，如果设置了背景图，背景颜色就失效了。三、单元格的设置和表格设置一样，可以对单元格进行精确的设定和修改，只要将光标移至某个单元格中，属性面板就会变成单元格的设置面板。格式无择式无同LJ三三三三回宇曾孙〒•注y大小无.1在任与与目标国赛水平武认宽和跖口猾讣口1_页面屋性•垂直V高库题u将餐触色蔻指LJL四、表格配色方案（1）首先将光标移动到任意一个单元格中或是选中表格。（2）执行菜单的“命令”一一“格式化表格”命令，打开“格式化表格”对话框。（3）在左上角的列表窗口中有各种配色方案供选择，还可以在对话框的各项属性栏中具体修改每一项配色。

班级计算机二年级课时29、30课题3.2表格在排版中的应用教学目标了解一些表格常用的设计技巧了解表格的布局设计应用，熟悉有关布局表格、布局单元格的绘制操作。教学重点表格常用的设计技巧表格的布局设计应用，熟悉有关布局表格、布局单元格的绘制操作。教学难点表格常用的设计技巧表格的布局设计应用，熟悉有关布局表格、布局单元格的绘制操作教学方法教学一体化教学内容：一、表格在排版中的常用设计案例1：常用于导航条的边框表格。P71案例2：改变单兀格的颜色，让网页更有动感。P72案例3：制作有立体感的表格。P72案例4：利用表格说明属性特殊表格.P75二、运用表格布局版面表格的功能在普通人的意识中就是用来记载表单式的数据。当然，用表格输入条例式文字很合适，但它还有更重要的作用，即用来排列文字和图形。在复杂的网页设计中，表格的应用是最多的。案例5：利用表格对网页进行布局P80通过案例的讲解，完成这节课的上课内容。班级计算机二年级课时31、32课题3.3层的建立与设置教学目标了解层的概念能够创建层，根据需要通过属性面板或层面板修改层的属性掌握层的选取、移动、调整大小的操作教学重点能够创建层，根据需要通过属性面板或层面板修改层的属性掌握层的选取、移动、调整大小的操作教学难点能够创建层，根据需要通过属性面板或层面板修改层的属性掌握层的选取、移动、调整大小的操作教学方法教学一体化教学内容:在网页设计中，用来定位内容的元素包括表格和层，层如同含有文字、图片、表格、插件等元素的胶片，一张张按顺序叠放在一起，组合起来最终形成页面的最终效果。层除了可以像表格一样设置背景、位置、自由移动、响应事件、控制显示外，还可以使网页中的对象通过层在垂直方向互相重叠，还可以利用层的可隐藏属性配合时间轴的使用，轻松地制作出动感效果的层。一、层的插入在网页中插入层方法1：(1)单击“插入“一一”常用“面板上的”描绘层“按钮。(2)将鼠标指针移动到页面编辑窗口中，鼠标指针变成"+"字指针，拖动出层的范围。方法2：(1)执行菜单“插入“一一”布局对象“一一“层”命令，也可以在页面上插入一个默认大小的层。(2)鼠标移至层内并单击使得光标在层中出现，即可进行层的编辑区，在层中可输入文字、图片或表格。注：单击“拖动层“按钮后，按住ctrl键可以连续绘制多个层。二、设置层的属性:层的名称，用于识别不同的层。:层的位置，“左”是距离页面左边界的距离，”上”是距离页面上边界的距离。:层的Z轴顺序三、层的选取当插入多个层或者页面中的元素较多时，要想选取某个层会比较麻烦，DW提供了多种相当方便的选取层的方法，以便选取层。选取层：（1）将鼠标指针移动到任意一个层的边框位置，单击左键，就能选中该层，鼠标指针变为“+”字箭头形状。（2）也可以通过选取层的标签来选取层。在页面编辑区的左上角，每插入一个层就会自动建立一个层标签。单击某个标签就能选中该标签代表的层。（3）通过DW提供的层面板来选取层，可以通过执行菜单的“窗口”—一“其他”一一“层”命令或者按F2键。四、移动层层是独立于网页的区域，可以在网页的任何位置，因此层使网页布局就得更自由。层的移动选取一个层，并将鼠标指针移动到层左上角控制柄上，鼠标指针会自动变成“+”字箭头状，按住鼠标左键不放，可以拖动一个层大小的方框到任意位置。松开鼠标左键，层就会移动到该位置。层的高度自由性使网页排版变得更加灵活自由，利用层的自由性可以制作出很多传统排版方式无法达到的效果。五、调整层的大小操作步骤如下：（1）选取一个层后，在层的四周会出现8个黑四方块，那是层的控制点。（2）将鼠标指针移动到控制点上，光标就会自动变成“双箭头”状。（3）拖动控制点，就可以拉伸层的外框，自由改变层的大小。（4）松开鼠标键，层就会自动改变大小。

班级计算机二年级课时33、34课题3.4层在排版中的应用教学目标掌握层的重叠和对齐的操作方法掌握层与表格之间的相互转化方法教学重点掌握层的重叠和对齐的操作方法掌握层与表格之间的相互转化方法教学难点掌握层的重叠和对齐的操作方法掌握层与表格之间的相互转化方法教学方法教学一体化教学内容：由于页面中可以有多个层存在，又因为层可以在三维中定位，更因为层本身类似于一种容器，可以互相嵌套，导致层需要进行有关重叠，对齐及对齐到网格的设置。一、设置层的重叠层的重叠是层的重要特性，当多个层出现在页面上并重叠时，如何控制这些层便成了设计的关键所在。（1）确定层面板中未选中复选框，创建大小不等的三个层并将它们重叠到一起。（2）执行下列操作之一，来设置它们的前后秩序，体会层的三维特性。a）在层面板中直接拖动层排序，在页面空白处单击，取消选取，可看到」表格层被图片遮住。b）修改层设置面板中的Z-index的数值。层的数值越大，则层的阶层越靠上，数值越下，越在下层。二、层的对齐选取多个层后，执行“修改”—一“对齐”下相应的命令即可。左对齐：选取的所有层向最后一个选取的层的左方对齐。右对齐：选取的所有层向最后一个选取的层的右方对齐。对齐上缘：选取的所有层向最后一个选取的层的上方对齐。对齐下缘：选取的所有层向最后一个选取的层的下方对齐。设成宽度相同：选取的所有层的宽度调整为和最后选取的层的宽度一样设成高度相同：选取的所有层的高度调整为和最后选取的层的高度一样三、层对齐到网格：执行菜单的“查看”一一“网格”一一“网格设置”，打开网格设置的对话框。四、表格和层的相互转换1、层转化成表格执行菜单的“修改”—一“转化”—一“层到表格”命令，弹出“转换层到表格”对话框。如下图

表格布局：@最精确镇口最小；合并空白单元③)小于：口像素宽度回使用透明GIF。□置于页面中央电)布局工具；口防止层重发(£)II显小层面板g□显示网格⑥□靠齐到网格国)取消帮助其2、表格转化成层取消帮助其执行菜单的“修改”一一“转化”一一“表格到层”命令。不过表格在转换成层时，空白的单元格将不会产生层，表格以外的网页内容也会一并转换成层，也就是说网页内的所有内容都会被放在层中。班级计算机二年级课时35、36课题3.5框架的使用教学目标了解什么是框架掌握框架布局的基础操作教学重点掌握框架布局的基础操作教学难点掌握框架布局的基础操作教学方法教学一体化教学内容：一个WEB页面可以被划分为若干个不同的区域，这些区域可以采用表格或层的方式来显示，也可以用下面所要介绍的框架来完成页面的布局与显示。一个框架对应于页面的某一个区域，也对应于一个具体的网页。三9X星章也鼠葩1力■印口第点国工1口闻）招劭如*A<D11刈廿1»2】口槐|匕折甘」SffCDESiSHSi国依林时<ZUi-hECHHA11-T里回E!•辟HftCD।…1:阴11卜，耳格前赛闾布周附费吧CbHM+T乐单6H7FL莅蓑对费I8呈11刈廿1»2】口槐|匕折甘」SffCDESiSHSi国依林时<ZUi-hECHHA11-T里回E!•辟HftCD।…1:阴11卜，耳格前赛闾布周附费吧CbHM+T乐单6H7FL莅蓑对费I8呈ifi的代明片断®四卬＜£报回电于部件期WUBhSfoldlNlCiH4«+vA日崛.后居5W*口在捌百［潮代利，*一厂屋国^।।।1।Ini僧ii1।।।।1।1।।,1™IfRiin“E叱”，=5,：.”…H腿内痛姮》鎏未对当苜境定向宫应用洋河工誓』L性.漕如5—i-WtSKSS■育:工应用了酶mS住・水平期口I吐自定文收触取功…京即克£对垂《中用车时泉IE）箕文件共包颈1?,野异字灯ID►于百苴认千件，祎式声式小丸7IJ▼515济式±fl正在XT!；i_）上方目苛没由这茸任忖履性工Rtt■qMSl%lfe左对?i口右对础।对齐」砺口对齐"F特国T^BEHBrSi：h&下才用右祠眼福出左凰区上方用去旧右制国下R眼断口上万R千方ID上万8左懈期山上方R右W?千*U：上IM*_!.!it：.U：!KfL立制可Si.9:37利用如图中的“插入”菜单“框架”可以插入框架。如书中的页面由三个框架组成，故称之为框架页，它是一个HTML网页，定义了显示的框架数、框架的大小、框架所对应的网页及其他可定义的框架集属性。顶部的框架包含了WEB站点的徽标和导航知;底部的框架包含了一些版权信息;而占据页面空间最大的中间那个框架包含主要一张课程表。案例：创建框架页面（1）在DW中建立一页新的空白页面。

（2）单击“插入”一一“框架”下的框架按钮，建立框架页。（3）保存框架及框架页让光标在各个框架中出现后，执行菜单的“文件”一一“保存”命令，出现“保存为“对话框，输入文件名（文件名定义时，最好使用具有代表性意义的名字，可以代表框架的含义，方便以后使用。在任何框架的边框上单击鼠标左键，选中框架页，执行菜单的”文件“一一”保存框架页"命令保存框架页网页。（4）此时，中间的细线可以通过鼠标拖曳调整左右框架的比例。（5）当点击中间的细线时，可以在属性面板中看到。框行列

口框行列

口（6）按住ALT的同时，单击一个框架或通过框架面板实现框架的选择。（7）与选中框架对应的属性面板为框架面板，可以通过该面板修改该框架的名称，指定该框架对应的网页等。（8）把鼠标光标移到顶部或中间框架，开始设计网页。

网页制作第四章单元备课单元课时12课时单元分析第四章模板和库的应用知识目标了解模板和库的概念了解模板和库的区别技能目标掌握模板的建立和基础应用技术掌握库的建立和基础应用技术教材重点模板的建立模板的应用库的建立库的应用教材难点模板的建立模板的应用库的建立库的应用教学方法讲授、多媒体演示、操作学生学习情况由于内容比较少，但还是有些学生能理解，在实际操作中应用到自己的作品中就是不会，也不会上交作业，所以作业及时交不上来。教改及实施措多演示一些与操作有关的网页，让同学互相交流学习，学施会在作品中展示内容。

班级计算机二年级课时37——42课题4.1模板的建立4.2模板的应用教学目标了解什么是“资源面板”，什么是模板掌握模板的建立方法掌握模板中可编辑区域建立和取消的方法掌握如何使用模板创建新网页掌握利用模板更新网页的方法教学重点掌握模板的建立方法掌握模板中可编辑区域建立和取消的方法掌握如何使用模板创建新网页掌握利用模板更新网页的方法教学难点掌握模板中可编辑区域建立和取消的方法掌握如何使用模板创建新网页掌握利用模板更新网页的方法教学方法教学一体化教学内容:、模板模板就是创建其他文档的样板，在制作Word文档或者演示文稿时很常用。在DreamweaverMX中模板功能更加灵活，可以在单独的窗口中进行编辑，这大大的提高了网站设计的扩展性。使用模板可以将网站设计得风格一致，还可以节省制作的时间，对于经常要改变的文体、图像、链接等网页元素可以设置成可编辑区，在网页中随时进行修改。套用模板的页面只需要更改模板即可实现全部文件的更新。创建模板将现有文档保存为模板创建空白模板从资源面板中创建注意:1、必须先建立站点，才能建立模板2、F11可以打开资源面板创建可编辑区域创建模板将现有文档保存为模板创建空白模板从资源面板中创建注意:1、必须先建立站点，才能建立模板2、F11可以打开资源面板创建可编辑区域图像：方站点「收藏口叵掇空

电

臼

①若要使用资源面板』您必须先定义站点。插入IO|Qfl+l打开创建的模板文件，将鼠标定位到要标记为可编辑区域的位置。打开插入菜单，选择模板对象/可编辑区域命令。或在插入面板的常用类别中，单击模板按钮上的箭头，选择可编辑区域命令。在新建可编辑区域对话框中，为该区域命名。注意：每个区域名称是惟一的。不要在名称框中使用特殊字符（如、、＜、＞、&等）选择/删除可编辑区域选取模板文档中需要取消的可编辑区域标记。选择【修改】f【模板】f【删除模板标记】菜单命令。插入重复表格将插入点放在想要插入重复表格的位置。打开插入菜单，选择模板对象/重复表格命令。或在插入面板的常用类别中，单击模板按钮上的箭头，选择重复表格。在插入重复表格对话框中,做相应设置。将模板应用到已存在的文档打开某个文档。打开窗口菜单，选择资源命令，或按【F11】键，打开资源面板。在资源面板中，单击左侧的模板图标，当前站点中的所有模板将列出。选择要应用的模板名称。单击资源面板底部的应用按钮。应用模板创建新文档打开文件菜单，选择新建命令,即打开新建文档对话框。单击模板选项卡。从模板用于列表中，选择包含要使用的模板的站点，然后从右侧的列表中，选择一个模板。选中当模板改变时更新页面复选框，单击创建按钮,模板文件在DreamweaverMllX文档窗口中打开。管理模板重名命模块打开资源面板。在资源面板左侧的工具箱中单击模板按钮，打开模板列表。在模板列表中选取要重命名的模板项，双击模板名称或在选取的模板名称上单击鼠标右键，在弹出的快捷菜单中选择重命名命令。按【Enter】键结束操作。■删除模板■在资源面板中，单击要删除的模板文件前的图标选取模板文件。■单击面板右下方的删除按钮■更新模板模板经过修改之后，保存时会弹出更新模板的菜单。如果没有更新模板，可以打开模板列表。在模板列表单击鼠标右键，在弹出的快捷菜单中选择更新站点命令。按【Enter】键结束操作。■将文档脱离模板■打开要脱离模板的文档。■选择【修改】f【模板】f【从模板中分离】菜单命令即可进行分离。分离后该文档中的任意区域都可编辑。实战使用模板制作诗歌网站班级计算机二年级课时43——48课题4.3库的建立4.4库的应用教学目标了解什么是库以及模板与库的区别掌握库建立、修改和取消的方法掌握如何使用模板创建新网页掌握利用模板更新网页的方法教学重点掌握库建立、修改和取消的方法掌握如何使用模板创建新网页掌握利用模板更新网页的方法教学难点掌握库建立、修改和取消的方法掌握如何使用模板创建新网页掌握利用模板更新网页的方法教学方法教学一体化教学内容：库库是DreamweaverMX所特有个功能，是一种特殊的文件，其中包含已创建以便放在网页上的单独的资源或者资源拷贝的集合。库可以存储各种页面元素，如图像、表格、声音和Flash影片等。每当更改某个库项目的内容时，可以更新所有应用了该库的页面。在使用库时，DreamweaverMX不是向网页中插入库的内容，而是向库中插入一个链接。模板与库的区别：模板本身是一个文件，而库是网页中的一段HTML代码，是网页中的一个元素。模板文件存放在站点根目录的Templates子目录下，扩展名为.dwt，而把库项目存放在每个站点的站点根目录的Library子目录下，扩展名为.lbi。模板也不是一成不变的，即使是在已经使用一个模板创建文档之后，也还可以对该模板进行修改。在更新使用该模板创建的网页时，那些网页中的锁定区就会被更新，并与模板的修改相区配。使用模板的原因是大量网页整体上具有相同的结构，而只是局部内容有所不同，因此，模板一般用于网页结构基本不变，只在局部做微小改动的网站。而使用库是因为大量网页中都用到相同的部分，这些相同部分相对整个网页只是局部的。创建库创建库有3种方法：打开修改菜单,选择库增加对象到库命令。打开窗口菜单，选择资源命令，单击左侧的库图标，将文档中选中的对象拖入资源面板的库分类窗口中。打开窗口菜单，选择资源命令，单击左侧的库图标，再单击资源面板底部的新建库项目按钮。注意：每个库项目都以・lbi为扩展名，保存到本站点根目录下的Library文件夹下。编辑库元素打开资源面板。选择资源面板左侧的库图标，显示所有库项目。打开列表中要编辑的库项目。打开资源面板底部的编辑按钮，或直接双击该库项目。选定的库项目将在文档窗口打开。编辑库文件，并保存其修改。应用库元素定位要插入库元素的位置。打开资源面板。选择资源面板左侧的库图标,显示所有库项目。选择列表中要插入的库项目。选择资源面板底部的插入按钮，或直接拖动库元素到文档中。库的编辑和网页更新取消网页中的库某个网页中使用了某个库，但又想专门为该页面编辑库项目。这时，就必须先将库与这个网页分离。操作步骤：1）在当前网页中选择要分离的库2）单击属性面板上的“从源文件中分离”按钮即可。

班级计算机二年级课时49、50课题5.1认识Flash的工作界面教学目标认识Flash的工作界面掌握Flash常用工具的使用理解Flash中常用的概念教学重点掌握Flash常用工具的使用理解Flash中常用的概念教学难点掌握Flash常用工具的使用理解Flash中常用的概念教学方法教学一体化教学内容：Flash8的默认界面主要由以下部分组成：标题栏、菜单栏和工具栏、工具箱、图层、时间轴、工作区和舞台、面板组。一、菜单栏FLASH8共有10个菜单，分别是：1文件菜单。2编辑菜单。3视图菜单。4插入菜单。5修改菜单。6文本菜单。7命令菜单。8控制菜单。9窗口菜单。10帮助菜单。二、工具栏与其他通用软件类似，放在屏幕的上方，可以通过菜单“窗口”1“工具栏”I“主工具栏”显示或隐藏主工具栏。三、窗口面板1.工具箱绘图工具：其中放置了16个实用的工具，使用这些工具可以方便地绘制和编辑各种形状的图形。查看工具：在编辑过程中改变显示的比例及位置。颜色工具：用于设置线条和填充区的颜色。选项工具：选项区中的内容为当前激活的绘图工具的属性按钮，它们是对工具区中的工具进行补充说明，随着所选择的工具的不同，显示出不同的信息。2.图层与其它优秀图形图象处理软件一样，Flash中也提供了层的功能，用户可以在个层上随意地修改该层的图形而不影响其它层，便于动画的编辑和管理。3.时间轴Flash动画与普通电影动画放映的原理相似，将一系列相似的图画快速地逐帧显示出来，利用人眼的视觉暂留特性现成了动画。利用时间轴可以方便地对帧进行编辑，时间轴上的每一小格代表一帧，单击不同的帧则在工作区和舞台显示对应帧的画面。.舞台Flash中的舞台就象剧院里的舞台一样，所有的Flash动画都是在这里表现出来，用户看到的丰富多彩的Flash动画，都是在舞台上表演出来的。.工作区工作区包括舞台及其周围的灰色区域，舞台周围灰色区域的内容在Flash动画播放文件中是看不到的，但可以在灰色区域中制作动画，通常用做动画的开始和结束点。.面板组（1）打开面板Flash8将许多面板直接放在了“窗口”菜单下。用户可直接单击菜单“窗口”下的相应选项，打开所需面板。（2）关闭面板或面板组用右键单击“属性”面板的标题栏，从弹出的快捷菜单中选择“关闭属性”（3）移动面板移动面板时，将鼠标放在面板标题栏左侧的虚孔上，当鼠标箭头变成“十”字光标时，按住鼠标左键拖动，面板即被移动。（4）折叠和展开面板在面板的标题栏上单击鼠标，则面板收缩或展开。（5）折叠和展开面板组单击此折叠按钮即可折叠相应的面板组，再次单击折叠按钮，则重新打开面板组。（6）重新组合面板组在Flash8中，用户可以根据自己的需要，将多个面板组合到一起。

班级计算机二年级课时51、52课题5.2用FLASH制作LOGO教学目标了解什么是logo掌握flash制作logo的方法学会创建遮罩动画教学重点掌握flash制作logo的方法学会创建遮罩动画教学难点掌握flash制作logo的方法教学方法教学一体化教学内容：Logo是标志、徽标的意思，就一个网站来说，Logo即是网站的名片，它一般出现在网站首页的左上角或用于和其他网站链接的标志。传统的Logo多为静态图片，但用来友情链接的Logo,使用动态的Logo比静态形式。的Logo更能吸引人的视线。通过本节的实例我们学习如何用flash制作一个动态Logo。提示：为了便于interne上信息的传播，一个统一的国际标准是需要的。实际上已经有了这样的一整套标准。其中关于网站的匕^^目前有三种规格：1、88*31：这是互联网上最普遍的Logo规格。2、120*60：这种规格用于一般大小的Logo3、120*90：这种规格用于大型Logo。实例：制作一个环保网站的Logo,效果如图P115图5-3。Logo左边为中国环境保护徽图案，右边为网间名称及网址，在“中国环保"文字上不断以绿色色块来回闪过。本Logo主要利用flash遮罩动画制作。步骤：1、绘制环境保护徽图案元件是flash中可以被不断重复使用的一种特殊对象。在动画中运用元件可以显著地减小文件的保积。Flash中有三种元件类型，分别是“图形”、“电影剪辑”、“按钮”。创建元件有三种方法，即将现有的对象转换为元件、建立空元件后再编辑该元件以及导入元件。（1）启动flash软件。在“文档属性”对话框中设置文档尺寸为“宽120PX，高60PX，其他为默认值。（2）调整场景编辑区大小。执行菜单的“查看“—一”缩放比例“命令并选择”200%“。（3）绘制橄榄叶（4）制作橄榄枝（5）在工具箱中选择椭圆工具，单击属性面板中的笔触颜色按钮，调出调色板，在颜色选择器中选择绿色，在其后面的文本框中输入1,设置适量线的线粗为1PX，再打开“笔触样式”下拉列表框，从中设置适量线的线型为“实线”。

（6）再利用中椭圆工具在刚才的圆内绘制一个圆，此时椭圆属性面板设置如图P1185-12所示。最后做出如图5-18的图案。2、创建动画（1）形变动画：形变动画指的是图形动画，适用对象为图形。可以制作出的动画效果包括移动、缩放、旋转、填充渐变、变形、对象的加速和减速等。（2）遮罩动画：遮罩层是FLASH图层的一种类型，可以通过遮罩层中的图形，看到下层（被遮罩）中的内容，可以对遮罩层中的图形建立动画，也可以对被遮罩层中的图形建立动画，从而制作出奇特的动画效果。按书P119页的步

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

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

最新文档

评论

0/150

提交评论