《DW基础知识》PPT课件
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第 2章 Dreamweaver基础知识
内容要点： 1. Dreamweaver 的安装、启动与工作
环境介绍 2. HTML基础（难点） 3创建站点并组织站点的结构（重点） 4在站点中创建网页（重点）
1.Dreamweaver 的安装、启动与工作环境简介
（1）演示软件安装和启动的过程 Dreamweaver是由美国著名的软件开发商
• web浏览器的作用就在于读取web站点上 的html文档，并根据此类文档中的描述组 织和显示相应的网页信息。
• HTML编辑器：也称网页编辑器，一般是 指用于开发网页的工具软件，目前比较流 行的HTML编辑器是Macromedia Dreamweaver和Microsoft FrontPage。
– “站点”菜单：提供用于管理站点以及上传 和下载文件的菜单项。
– “文本”菜单 ：使您可以轻松地设置文本的 格式。
– 站点菜单：管理站点和（可不适用FTP软件） 上传站点
– 文档编辑窗口：上面显示设计文档的标题， 下面显示标尺和底格功能。
– 属性面板：用于显示或修改选定对象的属性 信息。
– 状态栏
Macromedia公司推出的一个“所见即所得”的可 视化网站开发工具;主要用于对Web站点、Web页 和Web应用程序进行设计、维护、编码和开发。 它以简洁的界面，强大的功能，成为众多专业网站 和个人主页建站的首选软件。
（2）界面结构和工作环境
首次启动 Dreamweaver 时，会出现一个工作 区设置对话框，我们可以从中选择一种工作区 布局。如果不熟悉编写代码，可以选择“设计 者”。如果以后想更改工作区，可以使用编辑 菜单“首选参数”对话框切换到一种不同的工 作区。
• 插入对象面板 (和以前的工具栏类似；通过操作窗 口/插入或CTRL+F2 来打开该插入栏，包括常用、布 局、表单、文本等)
• 百度文库板组
• 菜单
– “文件”菜单 包含“新建”、“打开”、“保 存”、“保存全部”，还包含各种其他命令，用于 查看当前文档或对当前文档执行操作，例如“在浏 览器中预览”和“打印代码”。
– “窗口”菜单：提供对 DW中的所有面板、检 查器和窗口的访问。
– “修改”菜单 ：使您可以更改选定页面元素或 项的属性。使用此菜单，您可以编辑标签属 性，更改表格和表格元素，并且为库项和模 板执行不同的操作。
– “命令”菜单：提供对各种命令的访问；包 括一个根据您的格式首选参数设置代码格式 的命令、一个创建相册的命令等。
– “编辑”菜单 包含选择和搜索命令，例如 “选择父标签”和“查找和替换”。“编辑” 菜单还提供对DW菜单中“首选参数”的访问。
– “帮助”菜单 提供对 Dreamweaver 文档的 访问，包括关于使用 Dreamweaver 以及创建 其扩展功能的帮助系统，还包括各种语言的参 考材料。
– “查看”菜单：使您可以看到文档的各种视图 （例如“设计”视图和“代码”视图），并且 可以显示和隐藏不同类型的页面元素和 DW工 具及工具栏。
• 标题:<title>标题</title>：呈现出网页的标题， 文档标题出现在浏览器的窗口标题栏中，包含 在<head> …</head>标签内部。
• 主体:<body>页面内容</body> 主体部分包含文本和图像等所有可见部分。 （3）HTML的基本结构：
<HTML> <head>
<title>标题<title> </head> <body> 正文 </body> </HTML>
PICC是internet内容选择平台，它提供了向网页 分配等级的方法。 格式例：<meta name=“keywords”
content=“HTML,CSS,VBScipt”> 定义语言 格式例：<meta http-equiv=“content-type”
HEAD部分包含的主要元素 描述
文档标题 描述HTML元信息 描述当前文档与其它文档之间的链接关系 脚本程序内容 指定当前文档的CSS层叠样式表
meta元素 描述HTML文档的元信息，即关于文档自身的信息。 定义搜索关键字、字符编码、作者、版权信息以及 文档描述.这些标签可以向服务器提供信息，如页面 的失效日期、刷新间隔和PICC等级。
（2）HTML文档的基本结构
• <html></html>开始和结束标记。在它们中间， 包含你的网页里的所有内容
• 头部：<head>头部的内容</head>
head是除文档标题外的不可见部分，文档标题 出现在浏览器的窗口标题栏中，另外，还可以 包含其他重要信息，如文档类型、语言编码、 脚本程序、搜索引擎的关键字和内容指示器以 及样式定义。若不需头部信息则可省略此标记。
工作区设置对话框
首 选 参 数 对 话 框
（3）dw的窗口组成（参看教材p5-p9）
插入栏：又叫插入对象面板； 状态栏：提供了标签选择器（也 叫做标记符选择器）、窗口尺寸、 文件大小等网页信息
（4）dw菜单简介
• 标题栏
• 工具栏（在文档编辑窗口上部）
– 代码视图与设计视图的切换及其他常用按钮。
标签选择器：用于显示或选定网页对象
窗口大小弹出菜单：分别显示窗口和显示 器的尺寸
下载时间显示栏：根据网页内容大致估算 的下载时间
2.HTML基础
（1） HTML的相关概念： • HTML是网页主要的组成部分，基本上一个网 页都是由HTML组成的，所以要想精通网页制作 的话，必须对HTML语言有所的了解。 • HTML语言是利用标记（tag）来描述网页的字 体、大小、颜色及页面布局的语言，是一种早期 的用于网页制作的主要语言；它也是纯文本类型 的语言，可以使用任何的文本编辑器对它进行编 辑。使用HTML编写的网页文件是标准的纯文本 文件，可以用任何文本编辑器打开它。其后缀名 为：.html或.htm。
（4）网页中的其他常用标记
• <p></p>:分段标记 • <br>:换行标记
• <img> </img>: • 是空格标记 • <b> 空的标签区块 • 字体标签 • 表格标签 • 文字标签 可以使用这些标记在记事本中完成网页的设计。
(5)Html的重要标签和属性 头部标签
标签 title meta link script style
内容要点： 1. Dreamweaver 的安装、启动与工作
环境介绍 2. HTML基础（难点） 3创建站点并组织站点的结构（重点） 4在站点中创建网页（重点）
1.Dreamweaver 的安装、启动与工作环境简介
（1）演示软件安装和启动的过程 Dreamweaver是由美国著名的软件开发商
• web浏览器的作用就在于读取web站点上 的html文档，并根据此类文档中的描述组 织和显示相应的网页信息。
• HTML编辑器：也称网页编辑器，一般是 指用于开发网页的工具软件，目前比较流 行的HTML编辑器是Macromedia Dreamweaver和Microsoft FrontPage。
– “站点”菜单：提供用于管理站点以及上传 和下载文件的菜单项。
– “文本”菜单 ：使您可以轻松地设置文本的 格式。
– 站点菜单：管理站点和（可不适用FTP软件） 上传站点
– 文档编辑窗口：上面显示设计文档的标题， 下面显示标尺和底格功能。
– 属性面板：用于显示或修改选定对象的属性 信息。
– 状态栏
Macromedia公司推出的一个“所见即所得”的可 视化网站开发工具;主要用于对Web站点、Web页 和Web应用程序进行设计、维护、编码和开发。 它以简洁的界面，强大的功能，成为众多专业网站 和个人主页建站的首选软件。
（2）界面结构和工作环境
首次启动 Dreamweaver 时，会出现一个工作 区设置对话框，我们可以从中选择一种工作区 布局。如果不熟悉编写代码，可以选择“设计 者”。如果以后想更改工作区，可以使用编辑 菜单“首选参数”对话框切换到一种不同的工 作区。
• 插入对象面板 (和以前的工具栏类似；通过操作窗 口/插入或CTRL+F2 来打开该插入栏，包括常用、布 局、表单、文本等)
• 百度文库板组
• 菜单
– “文件”菜单 包含“新建”、“打开”、“保 存”、“保存全部”，还包含各种其他命令，用于 查看当前文档或对当前文档执行操作，例如“在浏 览器中预览”和“打印代码”。
– “窗口”菜单：提供对 DW中的所有面板、检 查器和窗口的访问。
– “修改”菜单 ：使您可以更改选定页面元素或 项的属性。使用此菜单，您可以编辑标签属 性，更改表格和表格元素，并且为库项和模 板执行不同的操作。
– “命令”菜单：提供对各种命令的访问；包 括一个根据您的格式首选参数设置代码格式 的命令、一个创建相册的命令等。
– “编辑”菜单 包含选择和搜索命令，例如 “选择父标签”和“查找和替换”。“编辑” 菜单还提供对DW菜单中“首选参数”的访问。
– “帮助”菜单 提供对 Dreamweaver 文档的 访问，包括关于使用 Dreamweaver 以及创建 其扩展功能的帮助系统，还包括各种语言的参 考材料。
– “查看”菜单：使您可以看到文档的各种视图 （例如“设计”视图和“代码”视图），并且 可以显示和隐藏不同类型的页面元素和 DW工 具及工具栏。
• 标题:<title>标题</title>：呈现出网页的标题， 文档标题出现在浏览器的窗口标题栏中，包含 在<head> …</head>标签内部。
• 主体:<body>页面内容</body> 主体部分包含文本和图像等所有可见部分。 （3）HTML的基本结构：
<HTML> <head>
<title>标题<title> </head> <body> 正文 </body> </HTML>
PICC是internet内容选择平台，它提供了向网页 分配等级的方法。 格式例：<meta name=“keywords”
content=“HTML,CSS,VBScipt”> 定义语言 格式例：<meta http-equiv=“content-type”
HEAD部分包含的主要元素 描述
文档标题 描述HTML元信息 描述当前文档与其它文档之间的链接关系 脚本程序内容 指定当前文档的CSS层叠样式表
meta元素 描述HTML文档的元信息，即关于文档自身的信息。 定义搜索关键字、字符编码、作者、版权信息以及 文档描述.这些标签可以向服务器提供信息，如页面 的失效日期、刷新间隔和PICC等级。
（2）HTML文档的基本结构
• <html></html>开始和结束标记。在它们中间， 包含你的网页里的所有内容
• 头部：<head>头部的内容</head>
head是除文档标题外的不可见部分，文档标题 出现在浏览器的窗口标题栏中，另外，还可以 包含其他重要信息，如文档类型、语言编码、 脚本程序、搜索引擎的关键字和内容指示器以 及样式定义。若不需头部信息则可省略此标记。
工作区设置对话框
首 选 参 数 对 话 框
（3）dw的窗口组成（参看教材p5-p9）
插入栏：又叫插入对象面板； 状态栏：提供了标签选择器（也 叫做标记符选择器）、窗口尺寸、 文件大小等网页信息
（4）dw菜单简介
• 标题栏
• 工具栏（在文档编辑窗口上部）
– 代码视图与设计视图的切换及其他常用按钮。
标签选择器：用于显示或选定网页对象
窗口大小弹出菜单：分别显示窗口和显示 器的尺寸
下载时间显示栏：根据网页内容大致估算 的下载时间
2.HTML基础
（1） HTML的相关概念： • HTML是网页主要的组成部分，基本上一个网 页都是由HTML组成的，所以要想精通网页制作 的话，必须对HTML语言有所的了解。 • HTML语言是利用标记（tag）来描述网页的字 体、大小、颜色及页面布局的语言，是一种早期 的用于网页制作的主要语言；它也是纯文本类型 的语言，可以使用任何的文本编辑器对它进行编 辑。使用HTML编写的网页文件是标准的纯文本 文件，可以用任何文本编辑器打开它。其后缀名 为：.html或.htm。
（4）网页中的其他常用标记
• <p></p>:分段标记 • <br>:换行标记
• <img> </img>: • 是空格标记 • <b> 空的标签区块 • 字体标签 • 表格标签 • 文字标签 可以使用这些标记在记事本中完成网页的设计。
(5)Html的重要标签和属性 头部标签
标签 title meta link script style