Dreamweaver 4.0与网络课件
Dreamweaver 4.0与网络课件
4.1 概述
4.2 认识 Dreamweaver 4.0工作界面
4.3 建立教学站点
4.4 编辑教学网页
4.5 网页的布局方法
4.6 表单
4.7 使用时间轴
4.8 教学站点的发布
Dreamweaver 4.0与网络课件
4.1 概 述
Dreamweaver 4.0是目前最新的所见即所得的网页编辑工具,具有功能强大、界面简洁、简单实用等特点,它除了是一个优秀的网页设计与编辑环境之外,还是一个开放性的集成环境,例如,它可以从 Access或 Excel中导入表格,也可以直接使用 Shockwave动画,JavaScript函数,Applet,ActiveX
控件等对象,同时由于拥有 Flash软件和 Fireworks软件强力支持,使得它必然成为最好的网页制作软件,也自然是我们制作网络课件的首选软件。
Dreamweaver 4.0与网络课件
4.2 认识 Dreamweaver 4.0工作界面图 4-1 Dreamweaver 4.0工作界面
Dreamweaver 4.0与网络课件
1,工具栏图 4-2 工具栏
Dreamweaver 4.0与网络课件
2,状态栏图 4-3 状态栏
Dreamweaver 4.0与网络课件
3,对象面板图 4-4 对象面板菜单
Dreamweaver 4.0与网络课件
4,【 属性 】 面板图 4-5 【 属性 】 面板
Dreamweaver 4.0与网络课件
5,【 启动器 】 面板图 4-6 【 启动器 】 面板
Dreamweaver 4.0与网络课件图 4-7 【 站点 — 虚拟课堂 】 窗口
Dreamweaver 4.0与网络课件图 4-8 【 站点‘虚拟课堂’的资料 】 面板
Dreamweaver 4.0与网络课件图 4-9 【 站点‘未命名站点 1’的 HTML样式 】 面板
Dreamweaver 4.0与网络课件图 4-10 【 CSS样式 】 面板
Dreamweaver 4.0与网络课件图 4-11 【 行为 】 面板
Dreamweaver 4.0与网络课件图 4-12 【 历史记录 】 面板
Dreamweaver 4.0与网络课件图 4-13 【 index.htm— 代码检查器 】 面板
Dreamweaver 4.0与网络课件
4.3 建立教学站点
4.3.1 规划站点
1) 考虑站点的服务对象,确定主题内容,即与同类学科的站点相比,我们是侧重课外辅导,还是侧重考试指南?
这就是主题问题,只有确定了主题,才能有的放矢地进行工作 。
2) 确定了站点主题以后,需要进行站点结构的规划,
同一个网站要介绍三个学科的内容,如何组织才能脉络清晰,这是动手制作站点之前必须做好的一项工作。
Dreamweaver 4.0与网络课件
3) 当确定了站点主题、组织结构以后,接下来的工作就是设计网页版面。
4) 以上三项工作完成以后,接下来需要收集与整理站点素材,这是一项费时费力的工作,需要精心地组织与筹备。
5) 准备好素材后,需要确定站点在本地计算机上的存放位置。通常情况下,首先根据站点结构在本地计算机上建立一个站点文件夹,如在 C盘根目录下建立一个文件夹作为站点文件夹,命名为“教学站点”,用于存放站点的所有文件。
在站点文件夹下分别建立用于存放站点文件和素材的子文件夹,如用于存放图像、动画、应用程序、插件等的文件夹,
文件夹的命名最好与所存放的内容相关,以便查找。
Dreamweaver 4.0与网络课件
4.3.2 创建站点的基本结构
1,创建站点图 4-14 【 未命名站点 1的站点定义为 】 对话框
Dreamweaver 4.0与网络课件图 4-15 建立的站点
Dreamweaver 4.0与网络课件
2,设置主页图 4-16 新建的网页
Dreamweaver 4.0与网络课件图 4-17 【 站点地图布局 】 选项
Dreamweaver 4.0与网络课件
3,添加文件夹图 4-18 新建的站点文件夹
Dreamweaver 4.0与网络课件图 4-19 新建的网页
Dreamweaver 4.0与网络课件
4.3.3 制作教学网页当按照规划完成了站点结构的创建以后,接下来的工作就是制作教学网页了。这是非常重要的一个环节,是实施网络教学的载体,也就是说,网络教学的主要传播介质是网页。
因此,这一工作环节要强调两个问题:一是合理分配授课内容,这属于教学计划与教学安排的范畴;二是提高网页制作水平,这属于网页制作技术问题。制作教学网页时,既要合理安排授课内容,又要把网页做得美观、漂亮,这就是制作教学网页要遵循的基本原则。
Dreamweaver 4.0与网络课件
4.4 编辑教学网页
4.4.1 文本的编辑其基本操作步骤如下:
1) 在编辑窗口中输入所需的文本 。 如需换行分段,可以按下回键;如需换行但不分段,可以在按住 Shift键的同时按下回车键 。
2) 选择要编辑的文本 。
3) 单击菜单栏中的 【 窗口 】 /【 属性 】 命令,打开 【 属性 】
面板,如图 4-20所示 。
4) 在 【 属性 】 面板中设置文本的相关属性。
Dreamweaver 4.0与网络课件图 4-20 【 属性 】 面板
Dreamweaver 4.0与网络课件图 4-21 【 编辑字体列表 】 对话框
Dreamweaver 4.0与网络课件
4.4.2 应用图像
1,插入图像图 4-22 【 选择图像源 】 对话框
Dreamweaver 4.0与网络课件图 4-23 信息提示框
Dreamweaver 4.0与网络课件图 4-24 在网页中插入图像
Dreamweaver 4.0与网络课件
2,设置图像属性图 4-25 【 属性 】 面板
Dreamweaver 4.0与网络课件
3,为图像建立超链接图 4-26 建立的热点
Dreamweaver 4.0与网络课件图 4-27 【 属性 】 面板
Dreamweaver 4.0与网络课件
4,插入翻转图像图 4-28 【 插入鼠标经过图象 】 对话框
Dreamweaver 4.0与网络课件图 4-29 翻转图像效果
Dreamweaver 4.0与网络课件
5,创建导航条图 4-30 【 插入导航条 】 对话框
Dreamweaver 4.0与网络课件图 4-31 创建的导航条
Dreamweaver 4.0与网络课件
4.4.3 插入 Flash动画与按钮图 4-32 插入 Flash动画图标
Dreamweaver 4.0与网络课件图 4-33 【 参数 】 对话框
Dreamweaver 4.0与网络课件图 4-34 【 插入 Flash按钮 】 对话框
Dreamweaver 4.0与网络课件
4.5 网页的布局方法
4.5.1 使用表格
1,插入表格图 4-35 【 插入表格 】 对话框
Dreamweaver 4.0与网络课件图 4-36 在网页中插入表格
Dreamweaver 4.0与网络课件
2,表格的编辑操作图 4-37 合并前后的单元格对比
Dreamweaver 4.0与网络课件图 4-38 【 拆分单元格 】 对话框
Dreamweaver 4.0与网络课件图 4-39 拆分前后的单元格对比
Dreamweaver 4.0与网络课件插入或删除行或列的操作步骤如下:
图 4-40 插入行或列快捷菜单
Dreamweaver 4.0与网络课件图 4-41【 插入行或列 】 对话框
Dreamweaver 4.0与网络课件
3,设置表格的属性图 4-42 【 属性 】 面板
Dreamweaver 4.0与网络课件
4.5.2 使用框架图 4-43 Dreamweaver 4的帮助页面
Dreamweaver 4.0与网络课件
1,建立框架图 4-44 【 框架 】 对象面板
Dreamweaver 4.0与网络课件图 4-45 建立的框架网页
Dreamweaver 4.0与网络课件自定义框架,即重新设计框架的结构,基本的操作步骤如下:
图 4-46 【 框架 】 命令子菜单
Dreamweaver 4.0与网络课件
2,编辑框架图 4-47 【 框架 】 面板
Dreamweaver 4.0与网络课件图 4-48 【 框架页 】 子菜单
Dreamweaver 4.0与网络课件
3,设置框架集和框架的属性图 4-49 【 属性 】 面板选择了框架后的 【 属性 】 面板。
图 4-50 【 属性 】 面板
Dreamweaver 4.0与网络课件
4,保存框架保存框架的操作步骤如下:
图 4-51 【 另存为 】 对话框
Dreamweaver 4.0与网络课件
5,使用超链接
1) 选择框架中要建立超链接的文本或其它对象 。
2) 在 【 属性 】 面板的 【 链接 】 文本框中输入要链接的网页的 URL地址,也可以利用和图标选择网页文件 。
3) 在 【 属性 】 面板的 【 目标 】 选项中选择用于显示链接网页的目标窗口或框架。
Dreamweaver 4.0与网络课件
6,在不支持框架的浏览器中显示框架页面图 4-52 提示内容
Dreamweaver 4.0与网络课件
4.5.3 使用层
1,创建层在网页中创建层的操作比较简单,只需单击 【 标准 】 对象面板中的 图标,然后按住鼠标左键(此时光标变为
,+”形状)在文档窗口中拖曳,即可绘制任意大小的层,
文档窗口中将显示一个黄色的层标记 。如果 按住图标 将其拖曳到文档窗口中,或者单击菜单栏中的 【 插入 】
/【 层 】 命令,也可以在文档窗口中创建层。另外,将光标定位在层中,可以插入嵌套层。
Dreamweaver 4.0与网络课件
2,操作层图 4-53 激活层
Dreamweaver 4.0与网络课件图 4-54 选择层
Dreamweaver 4.0与网络课件图 4-55 【 网格 】 子菜单图 4-56 【 网格设置 】 对话框
Dreamweaver 4.0与网络课件
3,设置层的属性图 4-57 【 属性 】 面板
Dreamweaver 4.0与网络课件
4,层的管理图 4-58 【 层 】 面板
Dreamweaver 4.0与网络课件
5,将层转换为表格图 4-59 【 转换层为表格 】 对话框
Dreamweaver 4.0与网络课件图 4-60 将层转换为表格
Dreamweaver 4.0与网络课件创建表单的方法图 4-61 【 表单 】 对象面板
4.6 表 单
Dreamweaver 4.0与网络课件图 4-62 表单域图 4-63 表单域属性面板
Dreamweaver 4.0与网络课件图 4-64 插入的文本域
Dreamweaver 4.0与网络课件图 4-65 文本域表单属性面板
Dreamweaver 4.0与网络课件图 4-66 显示在浏览器中的表单
Dreamweaver 4.0与网络课件
4.7 使用时间轴
1,认识时间轴图 4-67 【 时间轴 】 面板
Dreamweaver 4.0与网络课件
2,创建时间轴动画图 4-68 时间轴动画
Dreamweaver 4.0与网络课件图 4-69 调整动画条的长度
Dreamweaver 4.0与网络课件图 4-70 层,1”的运动路径
Dreamweaver 4.0与网络课件图 4-71 行为通道的下拉菜单
Dreamweaver 4.0与网络课件图 4-72 选择 【 播放声音 】 命令
Dreamweaver 4.0与网络课件图 4-73 【 播放声音 】 对话框
Dreamweaver 4.0与网络课件
4.8 教学站点的发布
4.8.1 站点的测试图 4-74 【 检查目标浏览器 】 对话框
Dreamweaver 4.0与网络课件图 4-75 检查的结果
Dreamweaver 4.0与网络课件
2,测试超链接的有效性图 4-76 【 链接检查器 — 指南 】 对话框
Dreamweaver 4.0与网络课件
3,在浏览器中测试网页的正确性测试网页的一个非常有效的方法是在浏览器中预览网页,
这种方法可以贯穿于整个网页设计和创建过程中,通过它可以及时发现网页中存在的错误,避免重复出现相同的错误,
也有利于及时纠正网页中的不妥之处 。
在 Dreamweaver中,可以在任何时间通过目标浏览器预览网页,而不必首先保存文档,这时浏览器中的所有功能都将发挥作用,包括 JavaScript,相对链接,绝对链接,ActiveX控件等 。 使用这种方法测试网页的最大好处是可以及时地改正网页中存在的错误 。
Dreamweaver 4.0与网络课件
4.8.2 站点的发布
1,定义远程站点图 4-77 站点窗口
Dreamweaver 4.0与网络课件图 4-78 【 定义站点 】 对话框
Dreamweaver 4.0与网络课件图 4-79 【 chafer的站点定义为 】 对话框
Dreamweaver 4.0与网络课件图 4-80 【 chafer的站点定义为 】 对话框
Dreamweaver 4.0与网络课件
2,连接服务器
1) 在站点窗口中打开要上传的站点 。
2) 单击工具栏中的按钮,连接远程服务器 。
3) 连接成功以后,在站点窗口的左侧窗格中将显示主机目录,同时按钮中的黑点变为绿点,表明已经连接成功。
Dreamweaver 4.0与网络课件
3,上传站点本地计算机与远程服务器连接成功以后,就可以发布站点了 。 在发布站点时,既可以发布整个站点,也可发布局部站点 。
在站点窗口中选择要发布的文件,单击工具栏上的按钮即可上传站点。