Dreamweaver教学课件.ppt

Dreamweaver 的使用主要内容：一、Dreamweaver概述二、站点的创建和管理三、文本的使用四、图像的使用五、超链接六、网页属性七、表格的使用主要内容：八、页面布局九、表单的使用十、多媒体的使用十一、框架的使用十二、层的使用十三、时间轴的使用十四、历史和资源管理器主要内容：十五、模板和库十六、层叠样式表十七、行为的应用十八、扩展功能十九、动态网页开发基础知识二十、网站设计一、Dreamweaver概述1、Dreamweaver简介2、Dreamweaver的工作环境和相关操作3、HTML语言介绍4、关于Dreamweaver 帮助1、 Dreamweaver简介nDreamweaver 是由美国著名的软件开发商Macromedia公司推出的一个“所见即所得”的可视化网站开发工具n用于对 Web 站点、Web 页和 Web 应用程序进行设计、编码和开发1、 Dreamweaver简介n它的主要特点如下：n可视化的设计界面：学习简单，操作快捷n跨浏览器支持：支持多种浏览器，并可以选择主要的浏览器n支持动态网页技术：CSS、层、行为、JavaScriptn强大的网站管理功能：库、模板、标签等1、 Dreamweaver简介n它的主要特点如下(续)：n丰富的媒体支持：Java、Flash、Shockwave、ActiveX、Real等n超强的扩展能力：支持第三方插件n完善的协同工作能力：Flash、Fireworks、Coldfusion2、Dreamweaver的工作环境和相关 操作n界面：n菜单栏、“插入”栏、文档工具栏、文档窗 口、面板组、属性检查器n面板整理：n展开或折叠一个面板组n关闭面板组n打开屏幕上不可见的面板组或面板n在展开的面板组中选择一个面板2、Dreamweaver的工作环境和相关 操作n面板整理(续)：n查看未显示的面板组的“选项”菜单n停靠和取消停靠面板和面板组n重新调整面板组大小和重命名面板组n设置“面板”首选参数2、Dreamweaver的工作环境和相关 操作n文件操作：n创建新文档n保存新文档n设置默认的新文档类型n打开现有文档n导入 Microsoft Word HTML 文件：导入/清 理n标尺和网格：显示/隐藏n参数选择：“编辑”>“首选参数”3、HTML语言介绍(1) 概述(2) HTML文档(3) HTML标签和属性简介(1) 概述HTML （Hypertext Markup Language，超文本标识语言） 是生成WWW的语言之一，也是组织多媒体文档的一门重要语言，它不仅用来编写 Web 网页，而且也越来越多地被用来制作光盘上的多媒体节目。

2) HTML文档nHTML文档是一种没有格式的文本文档，也称为 ASCII 文件因此，HTML文档可以使用任何一种文本编辑器来编写n一个文档通常由文档头(head)、文档名称(title)、表格(table)、段落(paragraph)和列表(list)等成分构成为了表达方便，我们把这些成分称为文档元素(element)，简称为文素，它们是文本文档的基本构件，并且使用 HTML规定的标签(tag)来标识这些文素2) HTML文档n每个HTML文档都是由标签开始， 而以标签结束每个HTML文档分 成两个部分组成：文档头(head)和正文 (body)，并分别用 … 和 … 来作标记n文档头标签 … 之间所包 含的是文档的名称(title)n正文标签 … 之间含有用 各种HTML标签作标记的段落、列表、和其他 文素组成的实际文档2) HTML文档n一个简单的HTML文档如下所示：章乃器轶事章乃器妙语揭贪官章乃器是我国杰出的爱国人士1938年3月，应当 时安徽省政府主席李宗仁之邀，出任安徽省政府财政厅厅 长 针对当时众多的贪官污吏乘国难之机贪污腐化、中 饱私囊等劣行，章乃器上任伊始就提出了“铲除贪污”等四 项重大措施。

… (3) HTML标签和属性简介n简介n基本标签n属性n超链接n嵌入背景声音n用图像作网页的背景n表格的标签和属性• 简介nHTML标签由3部分组成：左尖括号“”HTML标签名称中的字母不分大小写，标签通常是成对出现的n某些文素还可以包含“属性(attribute)”属性是指背景颜色、字体属性(大小、颜色、正体、斜体等)、对齐方式等等，它是包含在开始标签中的附加信息例如，表示这段文字是居中对齐的• 基本标签nnnnnn n、和等等 • 基本标签(1)nnHTML标签：这个标签告诉浏览器在…之间的文件是用 HTML编写的文档nn文档头标签： … 之间 包含的是HTML文档名称nn文档名称标签： … 之 间包含的是具体的HTML文档名称，字符数 通常不超过64• 基本标签(2)nn正文标签： … 之间是 正文部分，这是HTML文档最多的部分，它 包含的是显示在浏览器文本窗口中的文档 内容nn标题(Heading)标签：HTML定义了6个等级 的标题标签，其中n＝1，2，…，6… 之间包含的是第n级标题 • 基本标签(3)nn段落(Paragraph)标签： … 之间包含的是一段文本HTML中没有使用硬换行(carriage return)来分段落，这是与字处理软件不同的。

在HTML文档中，和之间不论有多少行，不论每一行有多长或者多短，也不论其间有多少个空格，浏览器都把它作为一个段落来处理• 基本标签(4)n、和n列表标签：HTML支持无编号列表和有编号 列表，而且还可以在列表中套列表n … 表示标签之间的列表项目是 无编号列表(Unnumbered List) n … 表示标签之间的列表项目是 有编号列表(Ordered List)n 表示标签后面的内容是具体的列表项目 (List Item)• 基本标签(5)nn强制换行标签(Forced Line Breaks/Postal Addresses)：使用标签可强制文本换 行，其好处是不在行与行之间增加空白行 nn水平线(Horizontal Rule)标签：生成一条用 于分割文档的水平线，其长度与浏览器窗 口等宽，粗细和长短都可设置• 属性n属性是指用来修改HTML标签之间的文 素特性，例：n例1：理解字符属性的概念n例2：这是居中段落• 超链接n基本语法是：. 或 . •文件内链接n文件内链接是为阅读方便服务的，主要 用于比较长的文件在作链接之前要先 建立锚点（名），给链接的目的地作个 定义n建立锚名n链接到锚名•文件内链接*命令格式n建立锚名：锚名所对应的文本n链接到锚名链接文本• 嵌入背景声音n在HTML文档中可嵌入背景音乐，当打 开HTML文档时就开始播放。

嵌入背景 音乐的基本语法结构如下：其中，URL表示背景音乐的文件名， LOOP表示循环次数（INFINITE为无限 次）• 用图像作网页的背景n在浏览器上经常可看到各种背景图像，使用图像做网页背景的语法结构如下：做背景的图像不需要很大，浏览器会利用它的平铺(tiling)功能布满整个网页•在文档中显示图像n命令格式：n例：显示一幅文件名为flower.gif的图片•在文档中显示图像n相关属性：n控制大小：n高：HEIGHT＝像素数n宽：WIDTH＝像素数n图像边框：nBORDER=宽度值n例：用图像实现链接n格式：n例：•在网页中加入视频n格式：n说明：引导图在当视频还没有完全被载入时，会显示在视频将显示的位置•在网页中加入视频n相关属性：nSTART属性：n用于控制视频的播放时机，取值有fileopen和mouseover两种，分别表示当页面一打开就播放和当鼠标移到播放区域上才播放默认值为fileopenn也可以同时设定以上两个值，这时表示页面刚载入时播放，其后，当我们将鼠标移到显示区域时，视频也会播放•在网页中加入视频n例：•让文本动起来n基本格式：文本 n一些相关属性：nDIRECTION属性：取值有两种nLEFT：右向左nRIGHT：左向右•让文本动起来n一些相关属性：nBEHAVIOR属性：取值有三种nALTERNATE：来回移动nSLIDE：移动一次后停止nSCROLL：循环单向移动• 表格的标签和属性n标签n属性n注意事项• 表格*标签n.n定义表格。

n…n定义表的名称(CAPTION)n . n定义表的行(Table Row)，可定义对齐属性n . n定义列表标题(Table Header)，常为黑体字，中央 对齐n…n定义列表数据(Table Data)单元• 表格*属性nALIGN (LEFT, CENTER, RIGHT) 表单元的水平对齐方式nVALIGN (TOP, MIDDLE, BOTTOM)表单元的垂直对齐方式nCOLSPAN=n表单元跨越的列数nROWSPAN=n表单元跨越的行数• 表格*注意事项① … 必须要包含整个表的 定义； ②在表格中的第一项是表的名称(CAPTION)， 它是可有可无的； ③ … 标签定义的行的数目没有限 制； ④在一行中，使用 … 或者 … 标签定义的数据单元数目也没有限 制； ⑤表的每一个单元的属性可单独设置，因此表 格的形式可以多种多样； ⑥数据单元中的内容可以是文字，也可以是图 标，或者是两者，而且还可以设置超级链接表格示例例表一基本情况入库资料其它资料编号姓名年龄001肖静23002陈江254、 Dreamweaver 帮助n“帮助”系统提供所有Dreamweaver 功能的综合信息，其本身就是一本很好的电子书。

二、站点的创建和管理nDreamweaver可以用于制作单独的网页文件，但更经常地用于整个站点的建设因为大多数网页设计者创建的往往不是多种风格网页的集合，而是风格一致的一个网站1、创建本地站点n选择“站点”>“管理站点” 出现“管理站 点”对话框 注意：如果您没有定义过任何 Dreamweaver 站点，则会直接出现“站 点定义”对话框，您可以跳过下一步n单击“新建”按钮 出现“站点定义”对话 框1、创建本地站点n执行下列操作之一：n单击“基本”选项卡以使用“站点定义向导”，它将引导您逐步完成设置过程 n单击“高级”选项卡以使用“高级”设置，它使您可以根据需要分别设置本地、远程和测试文件夹 1、创建本地站点n完成 Dreamweaver 站点设置过程：n在“站点定义向导”中，回答每一屏上出现的问题，然后单击“下一步”继续进行设置，或者单击“上一步”返回到前一屏 n对于“高级”设置，可根据需要完成“本地信息”类别、“远程信息”类别和“测试服务器”等类别2、网站文件的管理我们往往根据站点内容，采用层次化目 录结构分类分级保存网站文件，将相关的页 面放在同一文件夹中，必要时可以使用子文 件夹，这种组织类型使站点更容易维护和导 航。

n文件创建：文件面板中右键单击>新建 文件（快捷键Ctrl+N）n选择文件：可单击选一或配合Ctrl键和 Shift键进行多重选择2、网站文件的管理n打开和编辑：双击n删除：Delete键n改名：两次单击n关于保存：保存、另存为、全部保存、 回复至上次的保存n复制与粘贴：快捷菜单或Ctrl+拖动n移动：直接拖动n关闭：快捷键Ctrl+W2、网站文件的管理n消除文件只读属性：右键快捷菜单n设为首页：右键快捷菜单n添加设计备注：右键快捷菜单n默认情况下，当移动、重命名或删除站 点中文档时Dreamweaver会提示你执行 更新，站点管理器可自动修复页面中相 应的超链编辑>首选参数>常规> 文档选项>设置“移动文件时更新链接” ）3、页面预览n菜单：文件>在浏览器中预览>iexploren工具栏>地球图标>预览在iexplore4、站点的编辑和管理① 文件面板② 打开现有本地网站③ 查看本地和远程网站的文件和地图④ 调整窗口视图⑤ 保存站点地图⑥ 重建站点缓存⑦ 站点编辑、复制、删除、导入与导出4、站点的编辑和管理① 文件面板n“扩展/折叠”按钮展开或折叠“文件”面 板，以显示一个。