Dreamweaver8入门教程
Dreamweaver8PPT课件
（2）使用“高级”方式
通过8个不同的选项卡，对站点进行详细的设置
（在对话框左侧的“分类”选项中选择不同的类 别
，在右侧的“本地信息”中设置相应的参数）
。
hkj
13
创建网页文件
创建空白页面文件：从顶行“文件”菜单或在 文件面板中用右键快捷菜单中的命令。
保存文件：用“文件”菜单命令或标签上点右 键
打开页面：双击“文件”面板中的文件或从顶 行“文件”菜单中或从起始页中。
hkj
“属性”面板（属性检查器）
面板组 文件 面板
7
Dreamweaver 8的界面
标题栏：显示本软件及所打开文件的名称 菜单栏：共10项可完成Dreamweaver的所有功能 “插入”工具栏：放置了网页中可以插入的对 象，单击名称右边的下拉按钮切换（下拉列表 方式）亦可转换为选项卡方式（显示为制表符 ） 标签选择栏：切换页面的显示方式 页面区域：编辑页面的位置 “属性”面板：用来设置页面上内容的属性（ 选定的内容不同，面板上显示的属性也不同） hk面j 板组：在各面板名称上单击可展开或折叠8
hkj
3
网页制作基本概念（二）
网站是若干网页的集合，是由成百上千个 相互关联的网页所组成的一个整体。
在访问一个站点时，可以输入这个站点的 IP地址，也可输入它的域名。
当移动鼠标到页面上的某处时，如果指针 变成一只小手，该位置就是一个超链接。 通过超链接可以方便地访问网上的相关页 面，而不用输入难记的URL地址。超链接 是一种允许和其他网页或网站之间进行连 接的元素，是网页制作的精华。
允许多个连续的空格、历史步骤最多次数等。
“文件类型/编辑器”：用外部代码编辑器右边
的“浏览” 或右下角的“+”，为不同的文件类型 设置外部编辑器（之后在Dreamweaver中双击对象 或用右键快捷菜单可直接调出相应软件编辑此对象 ）。
Dreamweaver 入门
Dreamweaver 入门本指南介绍如何使用 Macromedia Dreamweaver 8。
本指南中的教程将引导您完成创建一个简单但具备一定功能的 Web 站点的过程。
本指南包含以下各章：简介学习 DreamweaverDreamweaver 基础教程：设置站点和项目文件教程：创建基于表格的页面布局教程：向页面添加内容教程：使用 CSS 设置页面格式教程：发布站点教程：使用代码教程：创建基于 CSS 的页面布局教程：显示 XML 数据教程：开发 Web 应用程序教程了解 Web 应用程序安装 Web 服务器示例 ColdFusion 站点的设置示例 站点的设置示例 ASP 站点的设置示例 JSP 站点的设置示例 PHP 站点的设置Web 设计初学者如果您对 Web 设计比较生疏，本节将为您指出 Dreamweaver 文档中最适合您的背景的章节。
对于Web 设计初学者：1.首先阅读Dreamweaver 基础。
然后继续阅读本书中的教程。
这些教程分为两部分。
前五个教程面向初学者，指导您完成开发一个小型但具有一定功能的Web 站点的过程。
教程的第二部分介绍了更高级的概念。
最好在您已具备一些建立Web 页面的经验后，您再学习更高级的教程。
2.在《使用Dreamweaver》（“帮助”>“使用Dreamweaver”）中，您将通过阅读了解工作区、设置Dreamweaver 站点、管理您的文件和创建和打开文档对在《Dreamweaver 入门》中所学的内容有更全面的了解。
3.阅读《使用Dreamweaver》中的使用CSS 对页进行布局和使用表格显示内容了解有关页面布局的更多信息。
4.若要了解如何设置文本格式和在页面中包含图像，请阅读《使用Dreamweaver》中的插入文本和设置文本格式和插入图像。
5.如果您希望创作高质量的Web 站点，则只需了解上述内容，但如果您准备了解如何使用更为高级的工具，则可以按顺序阅读《使用Dreamweaver》中静态页章节的其余部分。
dreamweaver8_简单网页制作
•
• •
6）单击“下一步”按钮，在弹出的对话框“您如何连接到远程服务器？”下 拉菜单选择“无”选项。
7）单击“下一步”在弹出的对话框中会所示相关的信息，然后单击“确定”， 完成站点的设置。 8）此时在Dreamweaver8的文件面板就会出现站点的文件夹及所有的文件。
返回 退出
2、制作网页 1
• • • • 1）启动Dreamweaver8新建一个HTML页，命名为“index” 。 2）单击属性面板中的“页面属性”按钮，打开“页面属性”设置对话框， 对页面进行相应的设置，设置完成后点击“确定” 即可。 3）根据课件设计方案，在设置好的网页中添加表格，对表格进行编辑，添加好 相应的文字，预览后保存。
返回
退出
下一页
返回Байду номын сангаас
退出
2、制作网页 2
• 4）在重新创建一个新的网页，命名为“导航页”页面属性的设置同 （2）， • 根据已经设计好的方案，编辑导航页。 • 5）然后分别制作“作者简介”、“课文内容”、“课文分析”、“生词生 字”、 • “课堂练习”、“课后习题”网页。
下一页
返回
退出
2、制作网页 3
网页课件实例
• •
1、创建新站点 2、制作网页
返回
退出
1、创建新站点
• • • • • • 1）在本地计算机硬盘创建一个文件夹，名为“唐诗教学”。 2）打开Dreamweaver 8，在菜单栏打开“站点”选项，执行“新建站 点” 命令。 3）在弹出的对话框中选择“基本”选卡，输入站点的名称。 4）单击“下一步”按钮，在弹出的对话框中选择“否，我不想用服务器技 术”。 5）单击“下一步”按钮，在弹出对话框中选择“编辑我的计算机上的本地副 本，完成后在上传服务器”选项，如图所示。单击按钮，选择站点的位置为先 前创建的文件夹。
第三讲 使用Dreamweaver8创建和管理本地站点 共40页
2 规划站点结构
站点规划是一个复杂的系统工程，包括一系列的 组织、策划和设计。
规划站点结构是设计站点的必要前提，其操作是 将不同的文件分类存放在文件夹中以便于设计者 管理。合理地组织站点结构，可提高工作效率， 加快对站点的设计。
1.2 Dreamweaver8 的安装
1.2 Dreamweaver 8 工 Nhomakorabea界面“插入”面板文档工具栏 文档窗口
面板组
状态栏
“属性”面板
文
件
面
板
标题栏
显示应用程序的名称、最小化、最大化和正常之 间的切换按钮以及关闭按钮
1.3 Dreamweaver 8 常用工具
菜单栏
文件：用来管理文件。 编辑：用来编辑文本，如剪切、复制、粘贴等，还包括“首选
“零零影视”网站首页
动作片
喜剧片
爱情片 今日推荐 艺术片
恐怖片
影星专辑
外
国外
国外
国
语
语语
语语
语
影
影影
影影
影
片
片片
片片
片
外
国外
国
语
语语
语
影
影影
影
片
片片
片
2.3 了解文件目录命名及目录结构规范
1．文件和文件夹的命名
文件和文件夹命名时需要注意以下4点。 （1）不能使用中文 在所有的操作系统中，只有英文字符和数字的编码是完全一
文档窗口：用于显示当前创建或编辑的文档
1.文档标题栏
显示当前网页页面的标题及打开的文件名。
中文dreamweaver8网页设计课程大全上册
首页
返回 结束 调音
零点 起飞电脑培训学校
《中文Dreamweaver 8网页设计培训教程》
启动Dreamweaver 8
选择[开始] [所有程序] [Macromedia] [Macromedia Dreamweaver 8菜
单命令
首页
返回 结束 调音
零点 起飞电脑培训学校
《中文Dreamweaver 8网页设计培训教程》
首页
返回 结束 调音
零点 起飞电脑培训学校
《中文Dreamweaver 8网页设计培训教程》
站点的规划
Dreamweaver 8的站点类型 规划站点结构 绘制网站结构草图
首页
返回 结束 调音
零点 起飞电脑培训学校
《中文Dreamweaver 8网页设计培训教程》
Dreamweaver 8的站点类型
首页
返回 结束 调音
零点 起飞电脑培训学校
《中文Dreamweaver 8网页设计培训教程》
创建本地站点
新建站点 新建文件夹 新建网页文件
首页
返回 结束 调音
零点 起飞电脑培训学校
《中文Dreamweaver 8网页设计培训教程》
新建站点
通过[站点][新建站点]菜单命令或“文件”面板新建站点。
首页
返回 结束 调音
零点 起飞电脑培训学校
《中文Dreamweaver 8网页设计培训教程》
超级文本标记语言（HTML）
HTML（Hyper Text Markup Language）是一种用户与电脑之间进 行交流的文本技术，各种网页均是用 HTML语言来描述的，用HTML语言编 写的网页文件的扩展名一般为“*.htm” 或“*.html”。
Dreamweaver-8基础与实例教程省名师优质课赛课获奖课件市赛课一等奖课件
8.1.2 保存框架文件
保存框架旳全部文档旳详细操作环节如下。 1.选择“文件”菜单中旳“保存全部”命令，出现“保
存为”对话框，在整个框架集周围都出现粗边框，为 整个框架集命名。 2.单击“保存”按钮，粗边框切换到左边旳框架四面， 在“文件名”文本框中为其命名。按照此措施将全部 框架文件保存。
8.2 框架旳属性
8.4框架实例
8.4.1框架实例 8.4.2嵌入式框架实例
8.4.1框架实例
框架能够把页面提成相对独立旳几种部分，各个部分组 合在一起，就构成了这个页面。本节将经过一种制作 一种“精品课程”旳网站实例，来学习怎样在网页中 制作框架构造旳网页。
8.4.2嵌入式框架实例
嵌入式框架也称作iframe，嵌入式框架与框架网页类似， 它能够把一种网页旳框架和内容嵌入既有旳网页中。 下面来以“精品课程建设”网站为例向大家详细演示 一下嵌入式框架旳操作环节.
2.设置框架属性
在“属性”面板中，单击右下角旳“”展开箭头，查看 框架旳全部属性
8.2.2框架组属性
1.选择框架集：选择框架集时，单击框架边框即可，选 用旳全部框架边框呈虚线。
2.选择一种框架集后，属性面板如图
8.3为框架设置链接
要在一种框架中使用链接打开另一种框架中旳文档，必 须设置链接目旳，详细操作环节如下：
第8章 框架第8章 框架源自8.1 设置框架 8.2 框架旳属性 8.3 为框架设置链接 8.4 框架实例
8.1 设置框架
8.1.1 创建框架 8.1.2 保存框架文件
8.1.1 创建框架
在“插入”菜单中选择“HTML”选项，然后单击“框架” 子菜单中选择预定义旳框架集。
也能够经过“插入”工具栏插入菜单，在插入工具栏 “布局”类别中，单击“框架”按钮上旳下拉箭头， 然后选择预定义旳框架集。
dreamweaver8网页设计教程
《dreamweaver8网页设计》目录第一章遨游DREAMWEA VER8精彩世界1第二章创建与规划站点3第三章文本及其格式化10第四章表格13第五章图像15第六章框架18第七章页面布局视图的使用21第八章链接24第九章层与时间轴 28第十章表单32第十一章行为35第十二章制作动态页面38第十三章代码片断、库项目和模板 42第十四章网页的制作45第十五章网站的测试与上传49第十六章使用FIREWORKS 8处理网页图像 52第一章遨游Dreamweaver8精彩世界课题：Dreamweaver8简介及创建文档一、教学基本内容1、Dreamweaver8 的工作界面2、建立html文档二、课型：新授课三、课时：2个课时四、教学重点与难点重点：熟悉Dreamweaver8工作界面中各个工具的作用难点：1、各个面板的调用2、建立一个HTML的网页3、插处图像五、教学目的1 、对Dreamweaver这个制作网页的工具及网页有一定的认识，激发学生学习网页设计的兴趣2、一定要学会建立一个空白网页3、会对页面有一个简单的设置六、教学过程1、引入（1）为什么要用Dreamweaver而不用Frontpage?Dreamweaver是Macromedia公司的出品，它以程序小、运行速度快、所制作网页代码少这些优点，赢得了网页制作人员的喜爱。
（2）相关工具的介绍因为这是第一节网页制作课，所以首先要简单介绍下制作网页的一些相关工具，比如与Dreamweaver合称为网页三剑客的Flash和Fireworks。
2、讲授新课（1） Dreamweaver的界面a．文档窗口：主菜单、工具栏、底部启动条、文档编辑区b．对象面板：标准、表格、表单、框架、特殊、文件廷冖隐藏、字符c．启动面板：站点管理、代码检查、HTML样式、CSS样式、行为、历史记录、资源管理d．属性面板：随目前对象不同而内容不同(2)创建HTML网页(3)在网页中插入图像输入文字以后，插入图像，并对图像设置对齐的方式，使之与文字呈混排的状态。
中文版Dreamweaver8实用教程1421框架的基本概念
使用链接控制框架内容，也就是在一个框架中用链接来控制另一个框架中 的显示内容，这才是使用框架的主要作用。要实现这样的功能，在使用链接时， 必须指定链接的目标位置，也就是指明要操作的框架对象。框架的位置是通过 框架的名称来确定和标示的。
中文版Dreamweaver 8实用教程
中文版Dreamweaver 8实用教程
要使用预定义的框架集，可以选择“插入”栏中的“布局”选项卡，切换 到布局插入栏。然后单击框架按钮组，在弹出的菜单中选择一种需要的框架集 即可.
中文版Dreamweaver 8实用教程
用户可对已经创建好的框架集进行编辑和修改，例如将一个框架拆分成几 个更小的框架，或是移动框架的边框来改变框架显示的范围大小。如果要编辑 和修改框架集，可以使用以下两种方法。 要拆分插入点所在的框架，选择“修改”|“框架集”命令的子命令。
要设置框架的属性，可在网页文档中选择一个框架，然后选择“窗 口”|“属性”命令以显示“框架属性检查器” .
中文版Dreamweaver 8实用教程
要设置框架集的属性，可在网页文档中选择一个框架集，然后选择“窗 口”|“属性”命令，以显示“框架集属性检查器” 。
中文版Dreamweaver 8实用教程
中文版Dreamweaver 8实用教程
14.2.3 设置框架和框架集的属性
用户在制作网页的过程中，使用框架的属性检查器可以定义框架名称、源 文件、页边距等属性，使用“框架集属性检查器”可以定义框架集边线颜色、 宽度等属性。 设置框架属性 设置框架集属性
中文版Dreamweaver 8实用教程
中文版Dreamweaver 8实用教程
框架及框架集都是HTML文件，因此，在保存文件时这些文件都必须一起 保存。在Dreamweaver 8中，用户可以单独保存一个框架集文件，或一个框架 文件，或保存所有打开的框架文件和框架集文件。 要保存框架集文档窗口中的某个框架，可以将插入点置于需要保存的框架 中， 选择“文件”|“保存框架”命令，保存该框架文档。如果该框架文档是新 建的，这时将打开“保存为”对话框，在对话框中选择存储路径并输入文件名， 然后保存该框架文档。 要保存框架集，可以在文档中单击并选中需要保存的框架集，选择“文 件”|“保存框架页”命令，保存框架集。如果该框架集是新建的，这时将打开 “保存为”对话框，在对话框中选择存储路径并输入文件名，然后保存该框架 集。 要保存所有框架(包括框架集)，可选择“文件”|“保存全部”命令，这时 Dreamweaver 将逐个保存页面中的所有框架。
中文版Dreamweaver 8实例与操作 1
在制作网页时，除Dreamweaver外还需要用到 Fireworks、Flash、Photoshop等辅助软件。
1.2.2 HTML语言简介
HTML是Hypertext Markup Language的首字母缩 写，中文称作“超文本标记语言”。
3．HTML标签的类型与特点
实际上，学习HTML语言的过程也就是学习各种标 签（1格）式单的标过签程。 语法是：<标签名称> （2）双标签 “双标签”由“始标签”和“尾标签”两部分构 成，必须成对使用。语法是：<标签> 内容 </ 标签> （3）标签属性 许多单标签和双标签的始标签内可以包含一些属 性。语法是：<标签名字 属性1 属性2 属性3…>
1.1.4 静态网页与动态网页
从大的方面讲，网页可分为静态网页和动态网 页。通常是从制作技术的角度来区分静态网页 和动态网页的，完全采用HTML技术制作的网页 称为静态网页；使用HTML、编程语言和数据库 共同完成，需要与服务器实时交互的网页称为 动态网页。
1.2 网页设计软件和制作技术
1.2.1 网站管理与网页制作软件
1.3 网站建设流程
1.3.1 网站策划 1．确定网站内容
建设网站要有目的性，首先要根据网站的性质和 受众，确定网站内容和要实现的功能。
2．规划网站结构
确定网站内容后，就要根据网站的内容来规划 网站结构。网站结构有两层意思，一是逻辑结 构，二是物理结构。
逻辑结构主要是指将网站内容划分成哪些栏目， 实际上就相当于网页中的导航条，下图显示了 某企业网站的逻辑结构图。
第01章 Dreamweaver 8基础
第1章 Dreamweaver 8基础 章 基础
在过去,用户只有掌握了HTML(超文本标记语言)才能写出网页.如今,使用 Dreamweaver就可以快速地创建出具有精彩效果的动态网页.Dreamweaver是美国 Macromedia公司开发的集网页制作和网站管理于一身的网页制作软件.本章将主要 介绍有关网页的基础知识以及Dreamweaver 8的基本工作环境.
对齐方式 设置字体样式
创建项目 缩进量
中文版Dreamweaver 基础与上机实训 中文版Dreamweaver 8基础与上机实训
面板组
Dreamweaver 8中的面板被组织到面板组中.面板组中选定的面板 显示为一个选项卡.每个面板组都可以展开或折叠,并且可以和其他面 板组停靠在一起或取消停靠. 面板组还可以停靠到集成的应用程序窗口中,使用户能够很容易地 访问所需的面板,而不会使工作区变得混乱.
中文版Dreamweaver 基础与上机实训 中文版Dreamweaver 8基础与上机实训
1.2 Dreamweaver 8的工作环境
Dreamweaver 8的工作界面由文档窗口,工具栏,状态栏,上下文 菜单,"插入"工具栏和属性检查器等部分组成.启动Dreamweaver 8 后,其工作界面如图所示 .
网页的设计构思
在制作网页时,用户必须掌握网页的设计构思方法.这时需要认真 考虑网页的主题,网页的命名,网页标志,色彩搭配和字体等要素. 网页的主题 网页命名 网站标志 色彩搭配 字体
中文版Dreamweaver 基础与上机实训 中文版Dreamweaver 8基础与上机实训
网页的布局
在网页布局过程中,应该遵循的原则有:对称平衡,异常平衡,对 比,凝视和空白等.一般来说,网页的布局有下面几种常见的结构. π型结构布局 T型布局 "三"型布局 POP布局 Flash布局