网页型课件设计与制作

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