《小学信息技术校本教材:Dreamweaver80供四年级用说课讲解.doc》由会员分享,可在线阅读,更多相关《小学信息技术校本教材:Dreamweaver80供四年级用说课讲解.doc(99页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、Good is good, but better carries it.精益求精,善益求善。小学信息技术校本教材:Dreamweaver80供四年级用-Dreamweaver8.0前言同学们你们喜欢上网吗?你知道那么多绚丽的网页时怎么做出的吗?你想制作自己的网站吗?那么跟我一起学习Dreamweaver吧!Dreamweaver是美国一家公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器,它是第一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。DREAMWEAVER、FLASH以及在DREAMWEAVER之后推出
2、的针对专业网页图像设计的FIREWORKS,三者被俗称为网页三剑客。随着互联网(Internet)的家喻户晓,网页技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器),两者各有千秋。所见则所得网页编辑器的优点就是直观性,使用方便,容易上手,您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别。Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件,随着Dreamweaver8的发布,更坚定Dreamweaver在该领域的地位。它集网页设计、网站开发和
3、站点管理功能于一身,具有可视化、支持多平台和跨浏览器的特性,是目前网站设计、开发、制作的首选工具。Dreamweaver是一种所见即所得的HTML编辑器,可实现页面元素的插入和生成。或视化编辑环境大量减少了代码的编写,同时亦保证了其专业性和兼容性,并且可以对内部的HTML编辑器和任何第三方的HTML编辑器进行实时的访问。无论用户习惯手工输入HTML源代码还是使用可视化的编辑界面,Dreamweaver都能提供便捷的方式使用户设计网页和管理网站变得更容易。Dreamweaver可以方便地加入动画、声音图片及其他的媒体。让你的网站丰富多彩,功能强大。第一课网络基础知识-5第二课Dreamweave
4、r操作环境-9第三课站点的搭建及管理-14第四课文本的插入与编辑-20第五课插入图像-25第六课插入图像-29第七课插入并编辑表格-34第八课插入并编辑表格-38第九课插入并编辑表格-42第十课插入Flash动画-46第十一课插入Flash动画-50第十二课插入声音-54第十三课创建链接关系-58第十四课创建链接关系-62第十五课创建模板-67第一课网络基础知识看一看随着网络的普及,越来越多的电脑爱好者开始接触网络,面对一个又一个精彩纷呈的网站,众多的电脑爱好者都按捺不住内心的憧憬开始接触网页设计和制作。而这项工作也不再象它的启蒙阶段那样,需要直接面对枯燥的代码,反复的在程序语言和最终界面之间
5、来回切换。随着一些具有可视化操作界面,所见即所得工作窗口软件的不断出现和升级,让进入网页制作的门槛不再那么高不可及。Dreamweaver无疑是这些软件当中的佼佼者,可以说它是现在最为普及和成功的一个网页制作软件。通过Macromedia公司的不断改进和升级,它已经变得日益强大和完善。学习目标1. 知识目标:学生初步了解网络的一些基本概念IP地址、域名地址、URL地址等。2. 技能目标:能够查找URL地址等情感、态度和价值观目标:培养学生对网站制作的兴趣1、IP地址与域名地址IP地址,Internet上的每台主机都有一个唯一的IP地址,如192.168.1.100。域名地址就是网站的网址,域名
6、的目的是让别人能够访问到一个网站,如。简单举例来说ip地址像是人的身份证,每个人都有自己唯一的身份证号,而域名地址就像人的名字,我们平时称呼我们的同学都是用他的名字而不是用他的身份证号。2、什么是HTTP、什么是WWW?我们在浏览网站的时候经常会看到http,那么什么是http呢?http指的是超文本传输协议,所谓超文本顾名思义指的是超出文本包括声音、图片、视频、动画等当然也包括文本。WWW是WordWideWeb的建成,在域名中是国际域名,像网站1、 首先前面有http说明该网站可以传输图像、视频等,后面国际域名,sina是网站的名字,com是后缀,我们常见的后缀还有gov、edu、cn等,
7、像gov指的是政府网站,edu指的是教育网站,cn指的是中国网站。url地址指的是统一资源定位器,通俗的说就是某个资源(图片,文字,视频等)的详细地址。下面来查看下某张图片的url地址:第一步,我们首先来打开一个网站第二步:如图所示把鼠标放在图片上,右键单击图片,在弹出的菜单上选择属性.第三步:做一做打开一个网页1、 你能找到你自己电脑的IP地址吗?2、你知道临沂市六小的域名地址吗?3.你知道怎么找文章的URL地址吗?评一评同学们,你这节课的表现怎么样呢?快来评一评吧!评价内容自评互评师评合作探究知识掌握学习态度发现思考学习效果注:评价时用“”表示,优是3个“”,良是2个“”,达标是1个“”第
8、二课Dreamweaver8界面看一看从今天开始准备向大家介绍Dreamweaver软件8.0版的强大功能,本教程希望以规范化的网站制作流程为线索,指导同学们以正确的步骤来逐渐接触和掌握Dreamweaver软件的主要功能。我个人认为,作为一个网页制作的爱好者,需要有一个良好的工作习惯,很多朋友在学习时喜欢随心所欲的实验软件的各种功能,而缺乏系统的、正确的工作方式。同时网页制作面对的不是一个个孤立的页面,而是一组互相关联的某个站点中的文件群,因此本教程将从网站的角度来串讲Dreamweaver中的各项主要功能。学习目标1、知识目标:了解网页制作工具dreamweaver8。2、技能目标:了解d
9、reamweaver8的工作界面的组成:标题显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和浮动面板组。3、情感、态度和价值观目标:通过对网页制作工具的认识,培养学生对网页的兴趣和对网页的了解。在首次启动Dreamweaver8时会出现一个“工作区设置”对话框,在对话框左侧是Dreamweaver8的设计视图,右侧是Dreamweave8的代码视图。Dreamweaver8设计视图布局提供了一个将全部元素置于一个窗口中的集成布局。我们选择面向设计者的设计视图布局。在Dreamweave8中首先将显示一个起始页,可以勾选这个窗口下面的“不在显示此对话框”来隐藏它。在
10、这个页面中包括“打开最近项目”、“创建新项目”“从范例创建”3个方便实用的项目,建议大家保留。新建或打开一个文档,进入Dreamweaver8的标准工作界面。Dreamweaver8的标准工作界面包括:标题显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和浮动面板组。1、标题显示栏启动MacromediaDreamweave8后,标题栏将显示文字MacromediaDreamweave8.0,新建或打开一个文档后,在后面还会显示该文档所在的位置和文件名称。2、菜单栏Dreamweave8的菜单共有10个,即文件、编辑、视图、插入、修改、文本、命令、站点、窗口和帮助。
11、其中,编辑菜单里提供了对Dreamweaver菜单中首选参数的访问。文件:用来管理文件。例如新建,打开,保存,另存为,导入,输出打印等。编辑:用来编辑文本。例如剪切,复制,粘贴,查找,替换和参数设置等。查看:用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。插入:用来插入各种元素,例如图片、多媒体组件,表格、框架及超级链接等。修改:具有对页面元素修改的功能,例如在表格中插入表格,拆分、合并单元格,对其对象等。文本:用来对文本操作,例如设置文本格式等。命令:所有的附加命令项站点:用来创建和管理站点窗口:用来显示和隐藏控制面板以及切换文档窗口帮助:联机帮助功能。例如按下F1键,就会打开电子
12、帮助文本3、插入面板组插入面板集成了所有可以在网页应用的对象包括“插入”菜单中的选项。插入面板组其实就是图像化了的插入指令,通过一个个的按钮,可以很容易的加入图像、声音、多媒体动画、表格。图层、框架、表单、Flash和ActiveX等网页元素。4、文档工具栏“文档”工具栏包含各种按钮,它们提供各种“文档”窗口视图(如“设计”视图和“代码”视图)的选项、各种查看选项和一些常用操作(如在浏览器中预览)。5、标准工具栏“标准”工具栏包含来自“文件”和“编辑”菜单中的一般操作的按钮:“新建”、“打开”、“保存”、“保存全部”、“剪切”、“复制”、“粘贴”、“撤消”和“重做”。6、文档窗口当我们打开或创
13、建一个项目,进入文档窗口,我们可以在文档区域中进行输入文字、插入表格和编辑图片等操作。“文档”窗口显示当前文档。可以选择下列任一视图:“设计”视图是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中,Dreamweaver显示文档的完全可编辑的可视化表示形式,类似于在浏览器中查看页面时看到的内容。“代码”视图是一个用于编写和编辑HTML、JavaScript、服务器语言代码以及任何其他类型代码的手工编码环境。“代码和设计”视图使您可以在单个窗口中同时看到同一文档的“代码”视图和“设计”视图。7、状态栏“文档”窗口底部的状态栏提供与你正创建的文档有关的其它信息。标签选择器
14、显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。单击可以选择文档的整个正文。8、属性面板属性面板并不是将所有的属性加载在面板上,而是根据我们选择的对象来动态显示对象的属性属性面板的状态完全是随当前在文档中选择的对象来确定的。例如,当前选择了一幅图像,那么属性面板上就出现该图像的相关属性;如果选择了表格,那么属性面板会相应的变化成表格的相关属性。9、浮动面板其它面板可以同称为浮动面板,这些面板都浮动于编辑窗口之外。在初次使用Dreamweave8的时候,这些面板根据功能被分成了若干组。在窗口菜单中,选择不同的命令可以打开基本面板组、设计面板组、代码面板组
15、、应用程序面板组、资源面板组和其它面板组。做一做终于把Dreamweave8的基本工作界面介绍完了,你是否已经了解它?从现在开始,让我们一起来建造一座小房子。打开Dreamweave8看一看你都知道这个软件的面板都有什么用处吗?评一评同学们,本节课你的表现怎样呢?快来评一评吧?评价内容自评互评师评合作探究知识掌握学习态度发现思考学习效果注:评价时用“”表示,优是3个“”,良是2个“”,达标是1个“”第三课Dreamweaver8.0本地站点的搭建与管理看一看这节课给大家介绍Dreamweaver的站点管理功能。我们已经知道网站所面对的不是单独页面的集合,更多的还包含其他诸如图片声音、外部程序等
16、等相关联的内容,因此如何正确的组织他们变得非常重要。很多同学常常遇到如下一些问题:为什么我的网页传上去后看不到图片?为什么我的文件链接是错的?这些问题其实很多都是在开始之前,没有合理的创建好你的站点,良好的规划和准备工作可以减少很多的后续错误。学习目标知识目标:学会站点的搭建和管理。技能目标:学会创建站点,掌握在站点内创建文件夹,重命名文件夹的方法,学会规划网站。3. 情感、态度和价值观目标:通过管理和创建站点,了解网站的低端,解开网站神秘的面纱。要制作一个能够被大家浏览的网站,首先需要在本地磁盘上制作这个网站,然后把这个网站传到互联网的web服务器上。放置在本地磁盘上的网站被称为本地站点,位
17、于互联网web服务器里的网站被称为远程站点。Dreamweaver8提供了对本地站点和远程站点强大的管理功。1、规划站点结构网站是多个网页的集合,其包括一个首页和若干个分页,这种集合不是简单的集合。为了达到最佳效果,在创建任何Web站点页面之前,要对站点的结构进行设计和规划。决定要创建多少页,每页上显示什么内容,页面布局的外观以及各页是如何互相连接起来的。我们可以通过把文件分门别类的放置在各自的文件夹里,使网站的结构清晰明了,便于管理和查找。2、创建站点在Dreamweave8中可以有效的建立并管理多个站点。搭建站点可以有两种方法,一是利用向导完成,二是利用高级设定来完成。在搭建站点前,我们先
18、在自己的电脑硬盘上建一个以英文或数字命名的空文件夹(汉字的也可以,不过容易出错)。选择菜单栏站点管理站点,出现“管理站点”对话框。点击“新建”按钮,选择弹出菜单中的“站点”项。在打开的窗口上方有“基本”和“高级”两个标签,可以在站点向导和高级设置之间切换。下面选择“基本”标签。在文本框中,输入一个站点名字以在Dreamweaver8.0中标识该站点。这个名字可以是任何你需要的名字。单击“下一步”。出现向导的下一个界面,询问是否要使用服务器技术。我们现在建立的是一个静态页面,所以选择“否”。点下一步,在文档框设置本地站点文件夹的地址。点下一步,进入站点定义,我们将在站点建设完成后在与FTP链接,
19、这里选择“无”。单击“完成”按钮,结束“站点定义“对话框的设置。单击“完成”按钮,文件面板显示出刚才建立的站点。到此,我们完成了站点的创建。3、搭建站点结构站点是文件与文件夹的集合,下面我们根据前面对xmweb网站的设计,来新建xmweb站点要设置的文件夹和文件。新建文件夹,在文件面板的站点跟目录下单击鼠标右键,从弹出菜单中选择“新建文件夹”项,然后给文件夹命名。这里我们创建新建8个文件夹,分别命名为:img、med、swf、txt、css、js、moan和fy。创建页面,在文件面板的站点跟目录下单击鼠标右键,从弹出菜单中选择“新建文件”项,然后给文件命名。首先要添加首页,我们把首页命名为in
20、dex.html,再分别新建01.html、02.html、03.html、04.html和05.html。4、文件与文件夹的管理对建立的文件和文件夹,可以进行移动、复制、重命名和删除等基本的管理操作。单击鼠标左键选中需要管理的文件或文件夹,然后单击鼠标右键,再弹出菜单中选“编辑”项,即可进行相关操作。做一做创建一个自己的站点,并在里面加入相关的网页和文件夹评一评同学们,本节课你的表现怎样呢?快来评一评吧?评一评评价内容自评互评师评合作探究知识掌握学习态度发现思考学习效果注:评价时用“”表示,优是3个“”,良是2个“”,达标是1个“”第四课Dreamweaver8.0文本的插入与编辑看一看文字
21、是一个网站最为直接的载体.只有具有丰富文字内容的网站才具有吸引力。那么我们如何将丰富的文字内容置入Dreamweaver8中,并将这些文字呈现得最整齐、最美观。文字是构成网页的重要表达工具,在网页的编写过程中,通常会对编写的文字进行设置和操作。熟悉这些操作,对我们制作网页有很大的帮助。学习目标1、知识目标:学会插入文本并且会编辑文字2、技能目标:会插入文字、编辑文字、添加特殊字符3、情感、态度和价值观目标:培养学生探究问题的能力1、插入文本要向Dreamweaver文档添加文本,可以直接在Dreamweaver“文档”窗口中键入文本,也可以剪切并粘贴,还可以从word文档导入文本。用鼠标在文档
22、编辑窗口的空白区域点一下,窗口中出现闪动的光标,提示文字的起始位置,将一段文字素材复制/粘贴进来。2、编辑文本格式网页的文本分为段落和标题两种格式。在文档编辑窗口中选中一段文本,在属性面板“格式”后的下拉列表框中选择“段落”把选中的文本设置成段落格式。“标题1”到“标题6”分别表示各级标题,应用于网页的标题部分。对应的字体由大到小,同时文字全部加粗。另外,在属性面板中可以定义文字的字号、颜色、加粗、加斜、水平对齐等内容。3、设置字体组合Dreamweaver8预设读的可供选择的字体组合只有6项英文字体组合,要想使用中文字体,必须重新编辑新的字体组合,在“字体”后的下拉列表框中选择“编辑字体列表
23、”,弹出“编辑字体列表”对话框:4、文字的其它设置文本换行,按Enter键换行的行距较大,按EnterShift键换行的行间距较小。文本空格,我们选择编辑/首选参数,在弹出得对话框中左侧的分类列表中选择“常规”项,然后在右边选“允许多个连续的空格”项,我们就可以直接按“空格”键给文本添加空格了。特殊字符,要向网页中插入特殊字符,需要在快捷工具栏选择“文本”,切换到字符插入栏,单击文本插入栏的最后一个按钮,可以向网页中插入相应的特殊符号。插入列表,列表分为两种,有序列表和无序列表,无序列表没有顺序,每一项前边都以同样的符号显示,有序列表前边的每一项有序号引导。在文档编辑窗口中选中需要设置的文本,
24、在属性面板中单击,则选中的文本被设置成无序列表,单击则被设置成有序列表。插入水平线,水平线起到分隔文本的排版作用,选择快捷工具栏的“HTML”项,单击HTML栏的第一个按钮,即可向网页中插入水平线。选中插入的这条水平线,可以在属性面板对它的属性进行设置。插入时间,在文档编辑窗口中,将鼠标光标移动到要插入日期的位置,单击常用插入栏的“日期”按钮,在弹出的“插入日期”对话框中选择相应的格式即可。做一做试完成下列文字的输入:1)最好只使用系统自带的四种字体,常用宋体。2)字体大小。通常我们用12px大小的。3)字体的修饰,包括正常和斜体。4)字体的行间距,一般行距为字体大小的1.5倍。5):设置对象
25、中文本的装饰,分别有下划线、上划线、删除线、闪烁。6)字体颜色。评一评同学们,本节课你的表现怎样呢?快来评一评吧?评价内容自评互评师评合作探究知识掌握学习态度发现思考学习效果注:评价时用“”表示,优是3个“”,良是2个“”,达标是1个“”第五课Dreamweaver8.0插入图像看一看目前互联网上支持的图像格式主要有GIF、JPEG和PNG。其中使用最为广泛的是GIF和JPEG。那么我们如何给网站加上图片让网站看起来更漂亮呢,我们一起来做吧!学习目标第二章 知识目标:会插入图片。第三章 技能目标:了解图片格式,知道如何插入在网站文件夹内的图片和不在网站文件夹内的图片。情感、态度和价值观目标:培
26、养学生的审美能力和操作能力。1、插入图像在制作网页时,先构想好网页布局,在图像处理软件中将需要插入的图片进行处理,然后存放在站点根目录下的文件夹里。插图图像时,将光标放置在文档窗口需要插入图像的位置,然后鼠标单击常用插入栏的“图像”按钮。弹出的“选择图像源文件”对话框,选择img/001.jpg,单击“确定”按钮就把图像001.jpg插入到了网页中。注意:如果我们在插入图片的时候,没有将图片保存在站点根目录下,会弹出下图所示的对话框,提醒我们要把图片保存在站点内部,这时单击“是”按钮,然后选择本地站点的路径将图片保存,图像也可以被插入到网页中。做一做1、在你的站点内找到一张图片插入2、在计算机
27、内找到一张照片插入评一评同学们,本节课你的表现怎样呢?快来评一评吧?评价内容自评互评师评合作探究知识掌握学习态度发现思考学习效果注:评价时用“”表示,优是3个“”,良是2个“”,达标是1个“”第六课Dreamweaver8.0插入图像(2)看一看当我们往一个网页里插入了图片之后我们要调整图片的一些属性,图片有哪些属性,我们该如何调整呢?另外我们插入的一些图片很大,分辨率较高,读网页的时候会很慢,有没有方法能让网页快速打开呢?下面同学们跟我一起来解决这个问题。学习目标1. 知识目标:会设置图像属性,会插入图像占位符。2. 技能目标:会设置图像属性,会插入图像占位符,知道图像占位符在网页中的作用和
28、意义。情感、态度和价值观目标:培养学生对网站制作的兴趣1、设置图像属性选中图像后,在属性面板中显示出了图像的属性,如下如所示。在属性面板的左上角,显示当前图像的缩略图,同时显示图像的大小。在缩略图右侧有一个文本框,在其中可以输入图像标记的名称。图像的大小是可以改变的,但是在DW里更改是极不好的习惯,如果我们的电脑安装了FW软件,单击属性面板的“编辑”旁边的,即可启动FW对图像进行缩放等处理。当图像的大小改变时,属性栏中“宽”和“高”的数值会以粗体显示,并在旁边出现一个弧形箭头,单击它可以恢复图像的原始大小。“水平边距”和“垂直边距”文本框用来设置图像左右和上下与其它页面元素的距离。“边框”文本
29、框时用来设置图像边框的宽度,默认的边框宽度为0。“替代”文本框用来设置图像的替代文本,可以输入一段文字,当图像无法显示时,将显示这段文字。单击属性面板中的对齐按钮,可以分别将图像设置成浏览器居左对齐、居中对齐、居右对齐。在属性面板中,“对齐”下拉列表框时设置图像与文本的相互对齐方式,共有10个选项。通过它我们可以将文字对齐到图像的上端、下端、左边和右边等,从而可以灵活的实现文字与图片的混排效果。2、插入其它图像元素在我们单击常用插入栏的“图像”按钮时,可以看到,除了第1项“图像”外,还有“图像占位符”、“鼠标经过图像”、“导航条”等项目。插入图像占位符,在我们布局页面时,如果要在网页中插入一张
30、图片,可以先不制作图片,而是使用占位符来代替图片位置。单击下拉列表中的“图像占位符”,打开“图像占位符”对话框。按设计需要设置图片的宽度和高度,输入插入图像的名称,即可。1、 鼠标经过图像,鼠标经过图像实际上由两个图像组成,主图像(当首次载入页时显示的图像)和次图像(当鼠标指针移过主图像时显示的图像)。这两张图片要大小相等,如果不相等,DW自动调整次图片的大小跟主图像大小一致。图片与文本一样,是网页中最常用到的内容,其变化相对较少,要想排出精致美观的网页,下一节课的内容可是必不可少的哦,继续努力吧_做一做插入两张图片,并设置第一张图片为右对齐,第二张图片为居中对齐。设置图片的占位符。评一评同学
31、们,本节课你的表现怎样呢?快来评一评吧?评价内容自评互评师评合作探究知识掌握学习态度发现思考学习效果注:评价时用“”表示,优是3个“”,良是2个“”,达标是1个“”第七课Dreamweaver8.0插入并编辑表格看一看表格是网页设计制作不可缺少的元素,它以简洁明了和高效快捷的方式将图片、文本、数据和表单的元素有序的显示在页面上,让我们可以设计出漂亮的页面,使用表格排版的页面在不同平台、不同分辨率的浏览器里都能保持其原有的布局,而在不同的浏览器平台有较好的兼容性,所以表格是网页中最常用的排版方式之一。学习目标1知识目标:学会插入表格2技能目标:学会插入表格并且能够调整表格格式3情感、态度和价值观
32、目标:培养学生的集体荣誉感及合作精神。一、插入并编辑表格1、插入表格在文档窗口中,将光标放在需要创建表格的位置,单击“常用”快捷栏中的表格按钮弹出的“表格”对话框,指定表格的属性后,在文档窗口中插入设置的表格。“行数”文本框用来设置表格的行数。“列数”文本框用来设置表格的列数。“表格宽度”文本框用来设置表格的宽度,可以填入数值,紧随其后的下拉列表框用来设置宽度的单位,有两个选项百分比和像素。当宽度的单位选择百分比时,表格的宽度会随浏览器窗口的大小而改变。“单元格边距”文本框用来设置单元格的内部空白的大小。“单元格间距”文本框用来设置单元格与单元格之间的距离。“边框粗细”用来设置表格的边框的宽度
33、。“页眉”定义页眉样式,可以在四种样式中选择一种。“标题”定义表格的标题。“对其标题”定义表格标题的对齐方式。“摘要”可以在这里对表格进行注释。2、选择单元格对象对于表格、行、列、单元格属性的设置是以选择这些对象为前提的。选择整个表格的方法是把鼠标放在表格边框的任意处,当出现这样的标志时单击即可选中整个表格;或在单元格任意处单击,点鼠标右键在弹出菜单菜单中选择“表格选择表格”要选中某一单元格,按住Ctrl键,鼠标在需要选中的单元格单击即可要选中连续的单元格,按住鼠标左键从一个单元格的左上方开始向要连续选择单元格的方向拖动。要选中不连续的几个单元格,可以按住Ctrl键,单击要选择的所有单元格即可
34、。要选择某一行或某一列,将光标移动到行左侧或列上方,鼠标指针变为向右或向下的箭头图标时,单击即可。做一做插入一个四列三行的表格,设置自己喜欢的间距、边距和边框。评一评同学们,本节课你的表现怎样呢?快来评一评吧?评价内容自评互评师评合作探究知识掌握学习态度发现思考学习效果注:评价时用“”表示,优是3个“”,良是2个“”,达标是1个“”第八课Dreamweaver8.0插入并编辑表格(2)看一看通过前面的学习我们已经会自己制作一个表格了,但是这样的表格并不能满足我们的需要,例如颜色单调、样式单一。那么我们如何制作适合我们的漂亮的表格呢,好这节课就跟我一起来制作个性化的表格吧!学习目标1、 知识目标
35、:利用表格属性设置表格2、 利用表格属性对表格整体和单元格进行设置3、技能目标:情感、态度和价值观目标:培养学生的自学能力和审美能力。1、设置表格属性选中一个表格后,可以通过属性面板更改表格属性。“填充”文本框用来设置单元格边距,“间距”文本框用来设置单元格间距。“对齐”下拉列表框用来设置表格的对齐方式,默认的对齐方式一般为左对齐。“边框”文本框用来设置表格边框的宽度。“背景颜色”文本框用来设置表格的背景颜色。“边框颜色”用来设置表格边框的颜色。在“背景图像”文本框填入表格背景图像的路径可以单击文本框后的“浏览”按钮,查找图像文件。在“选择图像源”对话框中定位并选择要设置为背景的图片,单击“确
36、认”按钮即可。2、单元格属性把光标移动到某个单元格内,可以利用单元格属性面板对这个单元格的属性进行设置。“水平”文本框用来设置单元格内元素的水平排版方式,是居左、居右或是居中。“垂直”文本框用来设置单元格内的垂直排版方式,是顶端对齐、底端对齐或是居中对齐。“高”、“宽”文本框用来设置单元格的宽度和高度。“不换行”复选框可以防止单元格中较长的文本自动换行。“标题”复选框使选择的单元格成为标题单元格,单元格内的文字自动以标题格式显示出来。“背景”文本框用来设置表格的背景图像。“背景颜色”文本框用来设置表格的背景颜色。“边框”文本框用来色设置表格边框的颜色做一做怎么样,会自己制作漂亮的表格了吧?快自
37、己设计一个漂亮的表格吧!评一评同学们,本节课你的表现怎样呢?快来评一评吧?评价内容自评互评师评合作探究知识掌握学习态度发现思考学习效果注:评价时用“”表示,优是3个“”,良是2个“”,达标是1个“”看一看第九课Dreamweaver8.0插入并编辑表格(3)我们在制作表格的时候有时会出现错误,例如少了一列或者一行、多了一列或者一行;还有一些表格中需要再嵌套一个表格等等。那么我们该怎么修改这些表格呢?学习目标3. 知识目标:学会增加行列、合并行列和拆分行列。2.技能目标:学会如何插入行和列,并且知道插入在哪里,会拆分和合并行和列。4. 情感、态度和价值观目标:培养学生自学能力。1、表格的行和列选
38、中要插入行或列的单元格,单击鼠标右键,在弹出菜单中选择“插入行”或“插入列”或“插入行或列”命令。如果选择了“插入行”命令,在选择行的上方就插入了一个空白行,如果选择了“插入列”命令,就在选择列的左侧插入了一列空白列。如果选择了“插入行或列”命令,会弹出“插入行或列”对话框,可以设置插入行还是列、插入的数量,以及使在当前选择的单元格的上方或下方、左侧或是右侧插入行或列。要删除行或列,选择要删除的行或列,单击鼠标右键,在弹出菜单中选择“删除行”或“删除列”命令即可。2、拆分与合并单元格1、 拆分单元格时,将光标放在待拆分的单元格内,单击属性面板上的“拆分”按钮,在弹出对话框中,按需要设置即可。合
39、并单元格时,选中要合并的单元格,单击属性面板中的“合并”按钮即可。做一做把一个三列四行的表格变成四列三行。2、 完成下图评一评同学们,本节课你的表现怎样呢?快来评一评吧?评价内容自评互评师评合作探究知识掌握学习态度发现思考学习效果注:评价时用“”表示,优是3个“”,良是2个“”,达标是1个“”第十课Dreamweaver8.0插入Flash动画看一看通过前面的学习,相信你已经能制作出一个简单的网页了,很有成就感吧_不过,一个优秀的网站应该不仅仅是由文字和图片组成的,而是动态的、多媒体。为了增强网页的表现力,丰富文档的显示效果,我们可以向其Flash动画、Java小程序、音频播放插件等多媒体内容
40、。学习目标1、 知识目标:flash的插入2、 技能目标:复习表格的制作,学会在网页中插入flash动画。a) 情感、态度和价值观目标:通过学习flash插入,了解网页中的动画,引起学生对网页制作的其他软件的兴趣。一、插入Flash动画1、插入Flash为了合理的安排这一课的页面元素,在插入Flash动画之前,让我们先来复习一下表格布局吧_打开03.html,设置页面属性,在弹出的“页面属性”对话框中,“外观”项设置字体为“宋体”,字号为16px,文本颜色为#F282A8,背景图像为img/008.JPG,上边距为50px、下、左、右的边距都为0。“链接”项选择始终无下划线,链接颜色为#F28
41、2A8,已访问链接为#F5E458。现在我们开始布局_(1)插入一个1行1列的表格(表格1),表格的宽度为726px,边框粗细为0,单元格边距为0、单元格间距为1,背景颜色为#892321,将表格居中对齐。(2)插入一个3行2列的表格(表格2),表格的宽度为100,边框粗细为0,单元格边距和单元格间距都为0,背景颜色#6DCFF6。设置第一行左边单元格的宽为173px,高为137px,设置第二行的高为238px,将第三行的两个单元格合并,高度为50px。在第一行左侧单元格插入图片img/102.gif,在右侧单元格插入图片img/101.jpg。在第三行将光标水平居中,输入文字“版权所有闪客启
42、航”(3)在表格2第二行左侧单元格插入一个6行一列的表格(表格3),表格宽度为95,边框和单元格边距为0,单元格间距为5,将表格居中对齐。第一行高度为15,其余各行高度都为40。(4)在表格2右侧单元格插入一个1行2列的表格(表格4),表格宽度为550px。边框、单元格边距和间距都为0。好啦我们完成了页面的布局,开始插入页面元素。将光标放置在表格4右侧单元格中,单击常用快捷栏中的媒体按钮,然后在弹出的列表中选择Flash。弹出“选择文件”对话框,选择swf文件夹中的huaduo.swf文件。单击“确定”按钮后,插入的Flash动画并不会在文档窗口中显示内容,而是以一个带有字母F的灰色框来表示。在文档窗口单击这个Flash文件,就可以在属性面板中设置它的属性了。勾选“循环”复选框时影片将连续播放,否则影片在播放一次后自动停止。通过勾选“自动播放”复选框后,可以设定Flash文件是否在页面加载时就播放。在“品质”下拉列表中可以选择Flash影片的画质,以最佳状态显示,就选择“高品质”。做一做评一评同学们,本节课你的表现怎样呢?快来评一评吧?在你的网页中插入一个自己喜欢的动画评价内容自评互评师评合作探究知识掌握学习态度发现