网页型课件设计与制作

网页课件设计与制作课件设计与制作Dreamweaver的基本操作网页布局方法在课件中添加素材设置交互效果设置网页特效网页型课件设计与制作概述测试发布网站学习目标：1．了解网络型课件的概念与特点。2.掌握用Dreamweaver制作课件的基本方法3．学会用Dreamweaver制作网页型课件网页型课件设计与制作概述网页型课件与传统课件相比，具有能够容纳大量信息，能兼容多种素材的文件格式，并且是一个开放的体系，有利于对课件进行修改、增添和删除，易于在网上传输、流通，易于共享等特点。目前比较流行的网页制作软件是美国Macromedia公司开发的Dreamweaver，该软件是集网页制作和网站管理于一身的网页制作软件。网络型课件的设计原则1．易用性原则2．形象化原则3．模块化原则4.网络化原则网络型课件设计与制作步骤1.设计、规划、编写脚本。2.收集素材(文字、图片、动画、声音）及处理，放在一文件夹(名称用拼音英文)中。3.新建站点和网页。4.布局页面（表格、层、框架）。5.添加编辑素材。6.建立特效和超级链接。7.调试和发布站点。学科使用对象课题课件用途语文高一学生荷塘月色教学与自学序号内容媒体类型呈现方式1朱自清生平简介视频、文字同时呈现朱自清部分经典散文欣赏文字呈现文字2《荷塘月色》写作时代背景图片、文字同时呈现3课文朗读Flash动画直接播放《荷塘月色》文字文字、音频呈现文字、单击播放音频4课文分析文字、图片同时呈现5本文写作特点文字、图片呈现文字语言特色及艺术文字呈现文字6PPT课件演示文稿单击可播放7精选习题文字呈现习题8课外思考文字呈现思考题课件简化文字脚本主页作者简介习题精选课外思考演示文稿语言特点写作背景课文分析朗读欣赏经典散文1经典散文2经典散文3思考1答案思考2答案思考3答案网页结构主页布局课题与背景图首页作者简介写作背景朗读欣赏课文分析语言特点演示文稿习题精选课外思考菜单正文课件制作信息素材获取与处理1.较多是通过网络如《荷塘月色》图片素材输入“荷塘月色”“朱自清散文全集”如《荷塘月色》作者介绍和朗读视频://tieba.baidu.com/%C2%B9%C8%AA/shipin/play/22c578557c2c709edfd91b85/2.软件制作与处理（Photoshop、CoolEditPro、Premiere、Flash）Dreamweaver的工作界面Dreamweaver的工作界面由菜单栏、插入面板、工具栏、编辑区、状态栏、属性面板、浮动面板、站点窗口等部分组成。基本操作站点的基本操作在Dreamweaver中，站点既可以指Internet服务器上的远程站点，也可以指本地计算机中的本地站点。通常，应先在本地计算机上构建本地站点，创建合理的站点结构，使用合理组织形式来管理站点中的文档，并对站点进行必要的测试，在全部准备好之后，再将站点上传到Internet服务器上，以便他人浏览。创建本地新站点：“站点\新建站点”\名称\否\站点文件夹\无\完成★★站点文件夹不能用中文名！返回文档的基本操作创建新网页：“文件\新建\基本页…”或在站点窗口站点文件夹上右击“新建文件”，再输入文件名，逐一添加。在站点窗口中文件上单击2次可改名（如改为主页index.html）打开与保存文档：“文件\打开或保存\文件…”★★不能用中文名！设置文档属性：“修改\页面属性…”设置页面属性1、设置页面字体编辑字体列表★★注意一次只能添加一种字体2、设置页面字体大小★★（单位：像素px）作用：使得页面字体大小不会因浏览器不同而变化3、设置文本颜色单位：＃RGB（16进制）4、设置背景颜色5、设置背景图案（平铺效果）小图案背景图片的处理：讲究对称6、设置页面边距（一般均设为0）设置超链接属性1、颜色（链接颜色、已访问链接颜色、活动链接颜色等2、下划线样式选择（一般设为始终无下划线）在文档窗口中选择元素选择元素操作是使用Dreamweaver编辑文档的最基本操作之一。在文档窗口的设计视图中选择文档元素时，只需单击该元素即可，如果元素不可见，在选择它之前必须使该元素可见。认识不可见元素：“查看\可视化助理\不可见元素”选择元素：单击元素、底部标记选择器、HTML标记显示不可见元素：编辑\首选参数\不可见元素\钩选（如钩选命令锚记、层锚记）使用可视化向导设计网页Dreamweaver提供了3种可视化向导，用于辅助用户设计网页和估计网页在浏览器中的外观，分别是“标尺”、“网格”和“跟踪图像”。使用“标尺”和“网格”：“查看\标尺或网格\显示或设置”使用“跟踪图像”：“查看\跟踪图像\载入”作为布局参照，浏览时不显示。返回使用表格布局页面在Dreamweaver中，表格有标准模式、扩展模式及布局模式3种模式。标准模式就是最基本的表格模式；扩展模式是标准模式的扩充，在这种模式下用户可以方便地选择表格进行编辑；布局模式就是Dreamweaver为方便页面布局而专门设计的一种模式，与前两种模式相比，这种模式下表格和单元格边框是没有宽度的。单击菜单“查看/表格模式/标准模式|扩展模式|布局模式，选择表格模式。标准|扩展模式也可用工具栏按钮选择。如选择表格布局模式，再用布局表格和布局单元格(按住Ctrl不放可连续画）进行布局，位置自定。网页布局方法使用层布局页面使用图层可以将页面上的元素精确定位，图层中可以加入文本、图片、表格、插件，也可以在其中再嵌套另一个图层。网页制作中层概念的引进是网页制作技术的一大进步，它为网页设计者提供了强大的网页控制能力。层不但可以作为一种网页定位技术出现，也可以作为一种特效形式出现，灵活掌握了层的使用，就掌握了网页制作的精华之一。选择“标准或扩展”按钮，选择“绘制层APDIV”，拖动鼠标绘制图层，层可嵌套和层叠。在属性栏可设定层精确大小、位置和上下关系。返回使用框架布局页面使用框架可以方便地实现网页的定位，与其他定位方式不同的是，使用框架可以将一个浏览器窗口划分为多个区域，在每个区域都可以显示不同的HTML文档。一个框架显示包含导航控件的文档，而另一个框架显示含有内容的文档，这是使用框架的一个极其典型的例子。选择“框架”按钮\选择框架一种或连续选多种组合,保存全部,一般全框架UntitledFrameset保存为主页index.html这是一个HTML网页这是第二个HTML网页这是第三个HTML网页整个框架又是一个HTML文件要改变显示滚动条状态，选中全框架（单击外边框），进入代码，修改：name=“topFrame”scrolling=“No“name=”leftFrame”scrolling=“No“name=”mainFrame”scrolling=“yes“name=bottomFramescrolling=No当scrolling=“yes“时为显示，当scrolling=“no“时不显示。只显示垂直滚动条：进入全框架，设置在要去水平滚动条的网页显示框架（如name=”mainFrame”scrolling=“yes“），再选中要去水平滚动条的网页在代码中head与其/head之间加下代码（自动隐藏越界部分）styletype=text/css!--html{overflow-x:hidden}--/style用CSS样式设置网页格式层叠样式表(CSS)是一系列格式设置规则，它们控制Web页面内容的外观。使用CSS设置页面格式时，内容与表现形式是相互分开的。页面内容位于自身的HTML文件中，而定义代码表现形式的CSS规则位于另一个文件(外部样式表)或HTML文档的另一部分中。使用CSS可以非常灵活并更好地控制页面的外观，确保在多个浏览器中以更一致的方式处理页面布局和外观。减小页面文件容量提高页面浏览速度，易于维护和改版，只要简单的修改CSS文件就可以重新设计整个网站的页面。创建CSS样式在“CSS样式”面板中，单击面板右下角的“新建CSS规则”。在“新建CSS规则”对话框中，从“选择器类型”选项中选择“类（默认选项）”。在“名称”文本框中输入：.样式名（在名称前键入句点(.)，所有类样式必须以句点开头。）在“定义在”下，选择“仅对该文档”或“新建样式表文件”，单击“确定”。若选“新建样式表文件”会弹出保存文件对话框，输入文件名保存。出现“CSS规则定义”对话框，定义样式:在“字体”文本框中，选择字体（如宋体）。在“大小”文本框中，选择字号（如12）。在“行高”文本框中，选择输入行高（如18）。在粗细文本框中，选择粗细（如粗体）。在“颜色”文本框中，选择颜色（如黑）。……应用样式选择内容，单击属性面板“样式”下拉列表，选择样式名（若是保存在外部样式文件，选“附加样式表”，用浏览链接外部样式文件，再选样式名）返回添加文本和图像在网页型课件中，文本和图像是最基本的组成元素。使用文字可以很好地勾画课件的层次和重点；使用图像可以生动地表现用文字无法表达的内容。使用文本和图像可以直观地开展教学，突出讲课的重点。文本可直接输入或复制\粘贴(半角空格会出问题，可用选择性粘贴中“仅文本”），再设置格式(用菜单“文本”中命令或属性面板）。在课件中添加素材半角空格Shift+Ctrl+空格键全角空格（输入法全角）空格键换行键shift+Enter分段（隔行）Enter字体、大小、颜色等：在属性面板设置或选中按鼠标右键，选择相应项中菜单命令。行距：标签面板“css/辅助功能”中设置style:line-height:像素值px或用建立样式后选样式名设置。一般为文字的大小像素的1.5倍较好看.如字体大小是12px,那行距设为18px,14为话,行距22px较为合适.设置段落格式设置字体选择字号设置文本颜色图像(或GIF动画):插入\图像(或常用工具栏中图像按钮），选择文件，保存后浏览图片的设置其各项属性如下：①图片的缩略图及图片的大小。②源文件是指图片所在的位置。③链接是指该图片对应的超链接。④对齐是指图片的对齐方式。⑤替代是指是图片的说明。⑥边框是指图片的边框宽度。⑦地图是指用于在一个图片上的不同区域制作多个不同链接。图文混排：在文字的不同位置插入图像，右击图像选“对齐\右对齐或左对齐”。添加音频和视频在获得信息方面，人的听觉与视觉是同等重要的。在课件中适当地加入声音，如背景音乐、课文朗读等，会使整个课件更活泼。视频文件既有声音又有图像，具有很强的表现力，对于观赏性、操作性很强的科目，在课件中适当的使用视频会起到很好的教学效果。音频：方法1选择对象，单击行为面板中“添加行为”按钮，选“播放声音”，浏览选择声音文件（wma,mid,mp3,wav)方法2选择”插入“标签/HTML标签/页元素/bgsound“单击”插入“按钮，在源中浏览选择声音文件，选择循环”无限“确定。音频与视频：插入\媒体\插件，选择音频与视频文件，调整播放画面，保存后浏览。添加Flash动画Flash动画是一种高质量、高压缩率的矢量动画，有超强的交互能力，也正是因为这些原因，Flash在网络上得到了快速发展。FLASH动画：插入\媒体\Flash，选择Flash文件，调整播放画面,设置透明背景：选中FLASH动画，右击选“参数”（或单击属性面板中参数按钮），在参数输入wmode，值输入transparent,保存文件后浏览。一般在上层或表格（表格背景为其他画面）中加入后设置透明，产生特效。返回使用超链接串接多个页面Dreamweaver可以为对象、文本或图像创建超链接，以链接到其他文档或文件，或链接到单个文档的指定位置。当在本地站点内移动或重命名文档或其他链接文件时，Dreamweaver可自动更新指向文档的链接。创建页面间超链接:选对象,在链接栏用(浏览\指向)选择链接文件，默认在同窗口打开，要在新开窗口打开，在目标栏选“_Blank”,如