1第一讲--DW入门和基础
Dw软件介绍和基础认识
介绍：
介绍：
“文件”菜单 包含“新建”、“打开”、“保存”、“保存全 部”，还包含各种其他命令，用于查看当前文档或对当前文档执 行操作，例如“在浏览器中预览”和“打印代码”。 “编辑”菜单 包含选择和搜索命令，例如“选择父标签” 和“查找和替换”。“编辑”菜单还提供对DW菜单中“首选参 数”的访问。 “查看”菜单 使您可以看到文档的各种视图(例如“设计”视 图和“代码”视图)，并且可以显示和隐藏不同类型的页面元素 和 DW工具及工具栏。 “插入”菜单提供“插入”栏的替代项，用于将对象插入您的文 档。
介绍：
“修改”菜单 使您可以更改选定页面元素或项的属性。使用此菜 单，您可以编辑标签属性，更改表格和表格元素，并且为库项和 模板执行不同的操作。 “格式”菜单使您可以轻松地设置文本的格式样式。 “命令”菜单 提供对各种命令的访问;包括一个根据您的格式 首选参数设置代码格式的命令、一个创建相册的命令等。
介绍：
当“文档”窗口处于最大化状态(默认值)时，“文档”窗口顶部 会显示选项卡，上面显示了所有打开的文档的文件名。如果您尚 未保存已做的更改，则 Dreamweaver 会在文件名后显示一个星 号。 若要切换到某个文档，请单击它的选项卡。 Dreamweaver 还会在文档的选项卡下(如果在单独窗口中查 看文档，则在文档标题栏下)显示“相关文件”工具栏。相关文 档指与当前文件关联的文档，例如 CSS 文件或 JavaScript 文件。 若要在“文档”窗口中打开这些相关文件之一，请在“相关文件” 工具栏中单击其文件名。
介绍：
“实时”视图 与“设计”视图类似，“实时”视图更逼真地显示 文档在浏览器中的表示形式，并使您能够像在浏览器中那样与文 档交互。“实时”视图不可编辑。不过，您可以在“代码”视图 中进行编辑，然后刷新“实时”视图来查看所做的更改。 实时“代码”视图 仅当在“实时”视图中查看文档时可用。 “实时代码”视图显示浏览器用于执行该页面的实际代码，当您 在“实时”视图中与该页面进行[1]交互时，它可以动态变化。 “实时代码”视图不可编辑。
第1讲 初识Dreamweaver
首页 末页 向上 向下 返回 结束 调音
9、网页在Internet上的传输过程
Internet是一种基于C/S（客户机/服 务器）模式的覆盖全球的网络系统。 接入Internet的计算机有两种：一种 是随时准备向客户提供服务的服务 器；另一种是连接到某一服务器上 获取服务的客户机。
首页 末页 向上 向下 返回 结束 调音
首页 末页 Байду номын сангаас上 向下 返回 结束 调音
2、网站设计的一般步骤
规划网站 收集整理资源 配置站点 创建页面 测试站点 发布站点 维护、更新站点
首页 末页 向上 向下 返回 结束 调音
3、网页制作的常用工具
网页设计软件 Dreamweaver是目前使用最多的网页设计 软件。 图像处理软件 制作网页图像的软件种类繁多，大多数网页 设计人员选择的是Fireworks或Photoshop。 动画制作软件
3、万维网 (World Wide Web )
是指在因特网上以超文本为基础形 成的信息网。它为用户提供了一个可以 轻松驾驭的图形化界面，用户通过它可 以查阅Internet上的信息资源。www是 通过互联网获取信息的一种应用，我们 所浏览的网站就是WWW的具体表现形 式，但其本身并不就是互联网，只是互 联网的组成部分之一。互联网常用的服 务包括：www、Email、FTP、IM等。
首页 末页 向上 向下 返回 结束 调音
五、网页设计的相关知识
设计网页的原则 网站设计的一般步骤 网页制作的常用工具
首页 末页 向上 向下 返回 结束 调音
1、设计网站的原则
整体规划 鲜明的主题 善用图像 醒目的导航 及时更新 易记的网站名称 通用网页 动画适量
第1章 初识Dreamweaver CC课件PPT
1.7
第1章 认识 Dreamweaver CC
1.2 Dreamweaver CC的工作界面和基本操 作
1.2
第1章 认识 Dreamweaver CC
1.1 Dreamweaver CC概述
Dreamweaver CC是美国Adobe公司推出的集网页制作和站点管理于一身的网页制 作软件，也是第一个专门为网页设计师量身定制的可视化网页制作软件，利用它可以制 作出跨越平台限制和浏览器限制的、充满丰富动感的网页。以前，网页设计者在制作网 页时必须熟练掌握HTML语言和JavaScript，但是现在设计者使用Dreamweaver CC就 可以轻松制作出精美的网页，而且在制作过程中可以同步预览制作效果，使得网页设计 过程简单明了。
1.4
工作区设置对话
第1章 认识 Dreamweaver CC
1.2 Dreamweaver CC的 Nhomakorabea作界面和基本操 作
1.2.2 Dreamweaver CC的工作界面
1.5
第1章 认识 Dreamweaver CC
1.2 Dreamweaver CC的工作界面和基本操 作
1. 菜单栏 菜单栏中包含了Dreamweaver CC操作的所有命令。这些命令按照操作类别分为“文
件”、“编辑”、“查看”、“插入”、“修改”、“格式”、“命令”、“站点”、“ 窗口”、“帮助”10个菜单。 2. 文档工具栏
文档工具栏中包含“代码”、“拆分”、“设计”、“实时视图”等视图显示方式， 相互之间可以快速切换，并且可以设置文档的标题。
Dreamweaver CC实用教程 第1章 Dreamweaver CC基础入门
1.6.5
在浏览器中预览
选择“分类”列表框中的“在浏览器中预览” 选项，其参数如图所示。此时该对话框中将显示当
前定义的主浏览器和候选浏览器以及它们的参数设
置。
17
1.6.6
字体
第1章
Dreamweaver
CC基础入门
在Dreamweaver中，可以为新文件设置默认字体或者对新字体进行编辑。选择“分类”列表中 的“字体”选项，其参数如图所示。
7
第1章
1.3.5 机构网站
机构网站通常指政府机关、非营利性机构或相关社团 组织建立的网站。这类网站在互联网中十分常见，如学术 组织网站、教育网站、机关网站等，都属于这一类型。这 类网站的风格通常与其组织所代表的意义相一致，一般采 用较常见的布局和配色方式，如图所示。
Dreamweaver
CC基础入门
1.3.6 电子商务网站
电子商务网站就是企业、机构或者个人在互联网上 建立的一个站点，是企业、机构或者个人开展电子商务 的基础设施和信息平台，是实施电子商务的交互窗口， 是从事电商的一种手段，如图所示就是电子商务网站。
8
1.4
1.4.1
Dreamweaver CC 的启动与退出
启动Dreamweaver CC
1.7.3
辅助线工具
辅助线则通常与标尺配合使用，通过文档中的辅助线与标尺的对应，使用户更精确地对文档中的网页对象进 行调整和定位。
20
1.8
章节小结
第1章
Dreamweaver
CC基础入门
本章向读者介绍了常用网络术语、网站的常见类型，然后介绍了网页设计工具 Dreamweaver CC工作界面，最后介绍了及标尺、网格与辅助线的应用，使初学者对 网站建设有一个大体的了解，为以后的学习打好基础。
Dreamweaver—基础知识一
第一部分：基础知识一、Dreamweaver 界面介绍二、文本的基本设置三、文本插入栏的使用四、建立超链接1．为文本添加链接和设置链接2．制作电子邮件链接3．下载链接五、插入图像⑴插入图片的两种方法（从设计视图和资源面板）、编辑图像⑵插入GIF透明图片⑶背景图像的设置⑷插入图像占位符⑸制作光标经过图像⑹插入图片（使用热区）⑺制作导航条六、插入Flash对象第二部分：网页布局表格⑴插入表格⑵表格标记<table></table> <tr></tr> <td></td>⑶选择表格①选择整个表格●把光标移到表格的左上角、上边框或下边框之外的附近区域●在表格中单击任意一个位置，然后单击该表格对应的<table>标记。
●在表格中单击任意一个位置，按下两次“Ctrl+A”②选择表格的行③选择表格的列④选择单元格⑷设置表格属性及格式化表格通过属性检查器来选择⑸编辑表格①在表格内移动②剪切、复制和粘贴表格③合并和拆分单元格执行菜单：命令 排序表格举例：制作一个文学页面一、使用表格布局页面1．插入1行1列的表格，如下图所示：2．设置表格边框颜色。
在标签选择器中单击<table>标签，然后在属性面板中设置边框颜色设置为“#999900”，并在“垂直”下拉列表中选择“顶端”。
如下图所示：3．插入4行1列的嵌套表格二。
将光标定位在表格一中，然后执行插入表格命令，如下图所示：在“属性”面板中将第二行和第四行的“背景颜色”设置为“#999900”。
4．插入1行2列嵌套表格三。
将表格二适当拉大后，在第三行单元格单击，在其“属性”面板“垂直”下拉列表中选择“顶端”选项。
然后执行插入表格，如下图所示：5.插入4行2列嵌套表格四。
将表格三适当拉大后，在左侧单元格中单元，然后执行插入表格，如下图所示：得到如下图所示的效果：5．插入2行1列嵌套表格五。
DW课程第一课
网址：用于定位某个网站某个页面的一串字 符，通常是这种格式
主页：访问网站时，默认打开的第一个页面 就是主页也叫首页。 认识网页的组成元素：
文字（宋体）、图片、超链接
1.软件下载、安装 2.界面的认识 3.新建 4.打开 5.保存
1、认识Dreamweaver 是当前最流行、最方便的网页设计和网站开发工具 软件。 早期是Macromedia公司推出的“网页三剑客”之一。 “网页三剑客”指的是Dreamweaver、Flash、 Fireworks这三个软件. 2005年被Adobe公司收购. 推出Dreamweaver cs3--cc
设置网页外观属性
网页标题、页面默认字体、默认字体大小、 背景颜色、背景图片、边距。
什么是HTML？
超文本标记语言，用于编写网页。HTML是一切网页 实现的基础，在网络中浏览的网页都是一个个由 HTML标记构成的文件。
一个HTML文件包含了很多HTML标记，用来告诉浏览 器应该如何显示文本、图像以及网页的背景等 等……
如何获取网页图像 复制 另存为 截图
插入图像
插入记录→图像
插入面板→常用→图像
直接将图像文件拖入编辑区
快捷键：Ctrl+alt+i
撤销：ctrl+Z
注意：在插入图像前应先将网页文件已保存，
从而使所插图像引用正确。
设置图像的基本属性
图像→设置的名称 宽、高→可缩小和放大图片的显示尺寸。 边框→图片是否要加边框 源文件→图片的路径和名称。
注意：链接中使用完整的URL地址
http:// （是浏览网页网络协议，是超
文本传输协议的缩写，它用于传送WWW方式 的数据）www(WWW是环球信息网的缩写 ， 中文名字为“万维网”)
第1讲-Dreamweaver入门
步骤6：单击【下一步】按钮，进入图示 对话框。此处选择不启用存回和取出功 能。
步骤7：单击【下一步】按钮，进入图所 示的信息摘要对话框。该对话框列出了 前面所设置的内容，如果需要再次进行 修改，只需单击【上一步】按钮至相应 对话框修改设置即可。如果没有问题， 则单击【完成】按钮完成站点的创建。
以选项卡显示插入栏
（2）文档工具栏
文档工具栏，如图所示，包含了进行常用操作 的按钮和菜单。 如果文档工具栏关闭了，可执行【查看】→ 【工具栏】→【文档】命令将其打开。 Dreamweaver有三种视图形式：代码、拆分和 设计，利用文档工具栏可方便地进行三种视图 形式的切换。
文档工具栏
代码视图：当前文档窗口中只显示HTML代码。 拆分视图：当前文档窗口将分为上下两个视图，及代码视图
1.3 建立站点
站点就是一个文件夹，在这个文件夹中包含了网站中 所有用到的文件，我们通过这个文件夹（站点）对网站进 行管理。 1.3.1 建立本地站点 先在电脑上创建一个文件夹，用来放置站点中的所有对 象，然后执行“站点\新建站点”命令，对站点进行相关 设置。 任务：创建站点“我的足球网”，站点目录为D：//zqw
步骤4：单击【下一步】按钮，进入图所 示的对话框。选择“编辑我的计算机上 的本地副本，完成后再上传到服务器 （推荐）”，单击文件夹图标选择 C:\dwtt文件夹作为站点根目录。
步骤5：单击【下一步】按钮，进入图示 的对话框，可以在此选择连接服务器的 方式。这里选择通过本地/网络进行连接。
注意：
如果看不到某个面板，而且已在【窗口】 菜单中选择了它，还是无法看见，那么 用户可以选择【窗口】→【排列面板】 命令，把所有打开的面板都恢复到默认 的位置。
《DW基础知识》PPT课件
课堂实例―创建和测试第一个html网页
在“记事本”窗口或者Dreamweaver网页中输入以 下内容：
<html> <head> <title>欢迎光临我的第一个网页</title> </head> <body> 这是第一个简单网页! </body> </html> 选择【文件】|【保存】命令，在弹出的“另存为”
描述 图片的源文件 提示文字 设置图片的宽度 设置图片的高度 设置图片的边框 垂直间距 水平间距 设置图片的对齐方式
文字标签
标签 <U> <B> <sup> <sub> <big> <small> <I> <code> <var> <s>
描述 下划线 粗体 上标 下标 大字号 小字号 斜体 等宽 声明变量 删除线
A、执行“站点/管理站点”命令，也可以使用快 捷键F8打开站点面板来建立一个站点，然后单 击“管理站点”按钮。执行命令后出现“管理 站点”对话框，单击“新建”按钮，在弹出的 菜单中选择“站点”。
B、设置站点名称：接着出现了一个建立站点的向 导，设置好站点的名字后单击“下一步”按钮。 （输入你想要的站点名称，这里输入home，其实 可以任意输入名称的，要注意的是，尽量不要用 中文命名，以免出现意想不到的麻烦！）
工作区设置对话框
首 选 参 数 对 话 框
（3）dw的窗口组成（参看教材p5-p9）
插入栏：又叫插入对象面板； 状态栏：提供了标签选择器（也 叫做标记符选择器）、窗口尺寸、 文件大小等网页信息
（4）dw菜单简介
《DW基础教程》课件
ETL是指将数据从源系统抽取（Extract）、转换 （Transform）并加载（Load）到数据仓库中的 过程。
Transform的操作
Transform操作包括数据清洗、转换和整合，使 数据适应数据仓库的要求。
Extract的操作
Extract操作包括读取源系统的数据、验证数据的 完整性和一致性等。
章节四：DW的设计
DW的数据仓库设计
数据仓库的设计包括定义维度和事实表、确定数据仓库的模式和粒度。
维度和事实表的设计
维度表用于描述业务维度，事实表用于存储业务指标，两者之间通过关联关系建立连接。
关联关系的建立
在DW中，可以通过定义和维护外键关系来建立维度表和事实表的关联关系。
章节五：DW的ETL
章节三：DW的数据源
数据的概念
数据是指记录事实和描述属 性的信息，可以分为结构化 数据、半结构化数据和非结 构化数据。
数据源的类型
数据源包括关系型数据库、 文件系统、Web服务、传感 器数据等，用于提供数据仓 库的输入。
创建数据源
在DW中，可以通过配置连接 参数、选择数据源类型和指 定数据源位置来创建数据源。
子查询
子查询是指嵌套在其他查询中的查询语句，用 于在查询中使用查询结果。
章节七：DW的应用实例
薪酬管理系统
薪酬管理系统利用数据仓库分析员工薪酬情况，为企业的薪酬决策提供支持。
客户关系管理系统
客户关系管理系统利用数据仓库分析客户的购买行为和需求，为企业的营销策略提供指导。
营销分析系统
营销分析系统利用数据仓库分析市场趋势、产品销售和竞争对手，为企业的营销决策提供支 持。
DW的安装
学习和使用DW前，需要安装适合的DW软件，如Oracle Data Warehouse或Microsoft SQL Server。
DW教程(1)
Dreamweaver3 上手指南定义网站在正式开始制作网页之前，最好先定义一个新网站，这是为了更好地对站点文件进行管理。
【定义的方法】① 在站点窗口的下拉菜单选择 Define Sites；② 选择命令菜单 Site 中的 New Site 选项。
进行基本设置，回到站点窗口。
新建页面方法一：选择菜单上的 File > New File方法二：在本地目录的任意区域单击右键，选择 New File新建一页面后， 可以即时修改文件名， 后缀是 htm或 html； 一般网络服务器默认的网站首页名字是 index.htm。
双击新建的 index.htm，进入编辑窗口，开始制作属于你的第一个网页。
设置页面属性选择命令菜单中的 Modify > Page Properties，对话框中显示：①Title（页面标题）：就是我们在浏览网页时，在浏览器最左上角看到一行小字。
务必要养成为每一页都设 定一个标题的习惯，这既便于访问者的浏览，也有助于你在网页编辑的过程中区分不同的页面。
② Background（背景颜色）：默认为白色，后面“#FFFFFF”是以 16 进制形式显示的 RGB 色值。
DW3 的 调色板比 Frontpage 的丰富得多，而且还可以在屏幕上直接取色。
③ Text（文字颜色）：白底黑字是最常见的配色方案。
④ Left Margin 和 Top Margin：设置页边距，一般都设置为“0”以方便于网页的编辑。
一切设置完毕后，点击 OK 结束。
创建第一个网页“欢迎来到 ” ， 此时光标处于编辑窗口的最最左上角，输入你喜欢的任何文字，例如：并且在文字的前方加空格及回车，使文字接近于屏幕的中央。
【Tips】是不是觉得很奇怪，怎么总是不能插入空格？其实这是 DW3 的“特色”之一——不能连续插入半 角空格。
解决的办法是用全角空格代替。
最好，选取菜单 File > Save 保存页面，然后用浏览器打开该页面查看效果。
网页制作第1讲Dreamweaver基础知识
2018/10/19
40
插入栏的分类菜单 插入栏
以选项卡显示插入栏
2018/10/19
41
插入栏分类菜单中的“显示为制表符” 选项可以让插入栏里的各类对象以选项 卡的方式显示，如图所示。 如果想恢复以菜单显示的方式,可以单击 插入栏右上角的菜单选项,从中选择”显 示为菜单”即可。
2018/10/19
2018/10/19 6
三、软件的安装
硬件要求： 在安装Dreamweaver 之前，请确保计算机已配备下列硬件 和软件。 1. Intel Pentium III 600 MHz 或更快的处理器或等效处 理器 2.Windows 98 SE、ME、2000 或 XP 3.至少 128 MB 的可用内存 (RAM)（建议采用 256 MB 内 存） 4.至少 275 MB 可用磁盘空间 5. 能达到 1024×768像素分辨率的16位（数万种颜色）或 2018/10/19 7 更高分辨率的监视器
2018/10/19
54
2018/10/19
55
步骤3：单击【下一步】按钮，进入图所 示的对话框。如果需要使用服务器技术， 如 C#等，可选择“是，我想使 用服务器技术。”，并从下面的拉列表 中选择使用的服务器技术。如果不需要 使用服务器技术，则应选择“否，我不 想使用服务器技术”。
23
2018/10/19
24
2018/10/19
15.可以在“开始”---〉“程序”----〉 “Macromedia”中找 到DW 25
四、屏幕分辨率设置
1.15英寸=800*600/16色或以上，75HZ或 以上 2.17英寸=1024*768/16色或以上，70HZ 或以上
dreamweaver基础知识
第1章Dreamweaver的基础知识本章内容•了解D r e a m w e a v e r的基本原理•Dreamweaver是如何设计的•在D r e a m w e a v e r中使用传统的H T M L命令•了解下一代特性•自动化的We b页创作过程•用D r e a m w e a v e r维护We b站点D r e a m w e a v e r是M a c r o m e d i a公司推出的一套专业的We b站点开发程序。
D r e a m w e a v e r拥有诸多优点，例如，它是第一个利用最新一代浏览器性能的We b开发程序，并且非常便于开发者利用诸如层叠样式单(Cascading Style Sheets)和动态H T M L等先进特性。
事实上，D r e a m w e a v e r是We b开发者为自已量身定做的设计工具。
从设计的依据到开发者使用的专业程度看，D r e a m w e a v e r能够加速站点建设，并使站点的维护简单有效。
通过本章的讲述，你可以了解到这套程序的基本原理，充分感受 D r e a m w e a v e r是如何把传统的H T M L和前沿技术结合起来的。
当然，你还可以学习到一些 D r e a m w e a v e r的先进特性并用于自己的We b站点管理。
1.1 Dreamweaver的真实世界D r e a m w e a v e r是一套与现实世界紧密相关的程序。
举例来说， D r e a m w e a v e r认识到不同种类的浏览器之间存在着不兼容的命令，就通过开发交叉浏览器可兼容代码来解决这个问题。
D r e a m w e a v e r甚至包括了不同浏览器的H T M L验证功能，这样你就可以看到现有的或新的代码如何工作于特定的浏览器。
Dreamweaver 3把现实世界的概念进一步扩展到工作区中。
诸如D r e a m模板之类的附件使得大型We b站点的创建和维护更加简洁有效。
dw基础教程
《Dreamweaver》目录第一节：DW软件介绍 ------------------------------------------------------------------------------------------------------------------- 1 第二节：学习Dreamweaver的作用和应用方向---------------------------------------------------------------------------------- 2 第三节：认识DW的界面 --------------------------------------------------------------------------------------------------------------- 2 第四节：站点的建立和编辑----------------------------------------------------------------------------------------------------------- 3 第五节：常用插入 ----------------------------------------------------------------------------------------------------------------------- 3 第六节：CSS样式 ------------------------------------------------------------------------------------------------------------------------ 51.作用 -------------------------------------------------------------------------------------------------------------------------- 52.CSS样式的应用对象 ----------------------------------------------------------------------------------------------------- 53.CSS样式的分类------------------------------------------------------------------------------------------------------------ 54.如何将样式表加入网页？ ---------------------------------------------------------------------------------------------- 65.实验后总结优先级-------------------------------------------------------------------------------------------------------- 76.CSS规则简单说明 -------------------------------------------------------------------------------------------------------- 77.块元素（block）的定义 ------------------------------------------------------------------------------------------------ 88.CSS规则详解—类型[块内字的规则] ---------------------------------------------------------------------------- 89.CSS规则详解—背景[块本身]-------------------------------------------------------------------------------------- 810.CSS规则详解—区块[块内元素的对齐和排版]---------------------------------------------------------------- 811.CSS规则详解—方框[块本身] [块内] [块间]---------------------------------------------------------------- 912.CSS规则详解—边框[块本身]------------------------------------------------------------------------------------ 1013.CSS规则详解—列表 ------------------------------------------------------------------------------------------------ 1014.CSS规则详解—定位 ------------------------------------------------------------------------------------------------ 1015.CSS规则详解—扩展[块内]--------------------------------------------------------------------------------------- 11 第七节：CSS+DIV实例网页布局 --------------------------------------------------------------------------------------------------- 111.盒子模型 ------------------------------------------------------------------------------------------------------------------ 122.当间距（边界距离）叠加的说明----------------------------------------------------------------------------------- 123.CSS+DIV布局的精髓 --------------------------------------------------------------------------------------------------- 134.CSS排版理念------------------------------------------------------------------------------------------------------------- 14 第八节：行为---------------------------------------------------------------------------------------------------------------------------- 151.定义 ------------------------------------------------------------------------------------------------------------------------ 152.行为的“埋设”--------------------------------------------------------------------------------------------------------- 153.常用触发条件 ------------------------------------------------------------------------------------------------------------ 154.常用事件演示 ------------------------------------------------------------------------------------------------------------ 16第一节：DW软件介绍Dream Weaver是一款网页排版软件，可以方便的进行网页布局。
DW介绍及站点管理PPT课件
Ｍacromedia公司推出的网站开发工具．主要功能：网页图形图象的制作 及修改．热点及切片的应用．
Flash 8
Ｍacromedia公司推出的矢量动画设计软件．
以上是网页三剑客所学的三门软件．因为都与网页制 作有关，且功能强大，彼此结合性极好,故称之为：网 页三剑客．
04.06.2020
9
Dreamweaver 8的窗口
标题栏
菜单栏
插入栏
文档工 具栏
文档窗 口
➢视图(在文档工具栏上可以切换视图） 代码视图： 设计视图： 代码/设计:
➢在进行网页编辑时,由于控制面板的
影响无法看到网页的全貌,可以使用快捷 键F4快速关闭所有控制面板,再按F4可以 恢复原来的状态。
面板组 文件面板
属性面 板
04.06.2020
.
8
Dreamweaver 8的启动
方法一：开始→程序→Macromedia →Macromedia Dreamweaver 8 →创建新项目→HTML， 进入 Dreamweaver 8的设计页面
方法二：选中某个Html文件，右击鼠标器，选择用
Dre04a.06m.2020weaver MX进行编辑 .
个人主页
导航层
兴趣爱好 个人收藏 个人相册
内容层
04.06.2020
.
14
做网页的几个关键步骤
创建本地站点 编辑网页 超级链接 网页排版 发布站点
04.06.2020
.
15
两个为什么？
为什么要建站点？ 计算机上的站点
是什么样？
04.06.2020
.
16
远程站点和本地站点
网页的开发和制作一般在客户端进行，之后向 服务器上传。 本地站点：开发阶段，在本地硬盘上用来存放 整个网站的所有文档的目录。 远程站点：开发结束后，存放在网络服务器端 供用户浏览。
dw教学-第一讲----dw概述ppt课件
22
文件面板 层面板 行为面板
12
5、 设置用户首选参数〔ctrl+u） 设置允许多个连续的空格复选框选中 调整代码视图中的字体显示 其它选项简介 6、工作区布局 窗口—工作区布局
13
任务四、文档的基本操作
1、新建文档 2、编辑文档
a 添加文本 b 添加图像 (插入—图像—选择源文件对话框) c 添加超链接(属性面板或者右击) 3、预览文档(F12) 4、打开文档 5、保存文档〔html格式）
17
2、设置网页的头部信息 网页标题，网页关键字，网页描述等头部信息虽
不直接显示在网页中，但可通过其他的方式起 作用。 许多搜索引擎都是根据网页关键字来查询网页的。 头部信息是不可见的，但标题是可见的。 插入---html---文件头标签---阐明，关键字
18
任务五、 站点的管理
网站由多个页面组成，制作网站首先建立一个本 地站点，整理成整齐的目录，便于管理各类资源文 件。 创建站点 设定站点文件和文件夹 设置站点首页
5
2、网页 网页是一个网站的单个页面文件，用于显示 网站内容或完成交互功能动画等元素，通常 含有文字资料，图像文件，超链接等。 前台网页,将网站所要展示内容进行合理、美 观地规划并完成界面制作。 后台网页,主要是为了完成网站某项功能，将 前台显示部分与后台数据库进行连接，实现 网站的交互性。
6
3、设计网站的技巧 ①给网站起一个响亮的名字 ②注意网站的总体规划，不同的用途规划设计 不同的网站 ③利用音乐，特效，图片，动画等装点网页， 生动个性，选择使用 ④注意色彩搭配协调 ⑤多观察别人的网页，结合自己的网页，全面 规划设计自己的网页
DW课程_第01讲-网页制作基础
HTML文档结构
HTML结构
<BODY > Hello World! </BODY> </HTML> 网页内容，可以是 文本、图像等 <HTML> 网页标题 <HEAD> <TITLE>我的第一个网页 </TITLE> </HEAD>
<HEAD>头部部分
HTML 网页 <BODY>主体部分
这部分包括标题和其他说明信息。包括在 <HEAD>…</HEAD> 标签内 这部分包含文本、图像和链接。它包括在 <BODY>…</BODY> <HTML>…</HTML>标签标记 HTML 文档的开始和结束
31
典型案例—用 Dreamweaver制作网页
学电子商务，上“北财陈博客”看看。搜索“北财陈博客”典型案例—用 Dreamweaver制作网页
注意事项 文档标题的设置 文本和图像的居中 设置文本的大小和颜色 版权符号© 的插入
32
学电子商务，上“北财陈博客”看看。搜索“北财陈博客”Banner
8
学电子商务，上“北财陈博客”看看。搜索“北财陈博客”网页常见部分的称谓及规范
Banner 链接
版权信息
9
学电子商务，上“北财陈博客”看看。搜索“北财陈博客”网页常见部分的称谓及规范
Logo 网站的商标 Banner 广告条，宣传使用 导航条
超链接
版权信息
上机实验
居中对齐
35
学电子商务，上“北财陈博客”看看。搜索“北财陈博客”课后作业
使用DW创建一个包含图片和版权信息的网站，版权
1第一讲
第一讲从零起步Dreamweaver是Macromedia公司出品的一款专业化的网页制作工具。
在当今网络应用已经深入人们生活方方面面的今天，Dreamweaver凭借强大的功能和简单的操作，已经成为网页制作软件的工业标准。
通过本讲的学习，我们希望达到下面的学习目标：◆了解Dreamweaver的历史与今天；◆了解网页设计的基本常识；◆了解商业网站设计的流程。
1.1 Dreamweaver MX 的历史Dreamweaver是Macromedia公司出品的一款专业化的网页制作工具。
在当今网络应用已经深入人们生活方方面面的今天，Dreamweaver凭借强大的功能和简单的操作，已经成为网页制作软件的工业标准。
Dreamweaver提供的所见即所得的编辑模式，Mac机设计风格的浮动面版，可以帮助用户快速高效地创建极具表现力和动态效果的网页，使得网页创作过程变得非常容易，Dreamweaver的出现，大大的提高了网站开发工作的效率。
通过独有的库面板、历史面板和模板工具，Dreamweaver大幅度的降低了网页开发工作的重复性，使得开发者从大量枯燥的重复性工作中解脱出来，可以把更多的精力投入到对页面的设计中。
Dreamweaver支持最新的DHTML和CSS标准，可以轻而易举地做出很多眩目的互动页面特效。
插件式的程序设计使得其功能可以无限的扩展。
实际上，尽管Dreamweaver支持所见即所得的编辑方式，但是却没有放弃使用HTML代码编写网页，用户完全可以根据自己的需要选择不同的编辑视图，并且可以很方便地在不同视图之间切换。
Dreamweaver 可以自动在不同视图之间更新已经做出的改动。
Dreamweaver与Flash和Fireworks一起，被业界美誉为“网页设计三剑客”，它们之间具有高度的互补性和完美的协同工作能力。
在Dreamweaver中，可以使用对象面板方便地向文档中插入Flash，这一切工作只需要使用鼠标单击几下就可以完成。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Macromedia Dreamweaver MX 概述 FIREWORKS MX FLASH MX
一、DW的特点： FrontPage 2000
1、简洁的工作环境（界面和代码）
2、全面支持CSS样式表
3、无所不能的更新技术（模板和库）
4、高级的网站管理功能
3、段落问题：
硬回车：直接按ENTER回车键
软回车：直接按SHIFT+ENTER回车键 （也叫换行符）
4、HTML粘贴功能：无格式粘贴，相当于复制到记事本里，把所有格式都丢失。
简单做一个静态网页：
1、做网页前必须先建一个站点（主要防止路径错误）
2、写入文字和插入图像排版 (网页能显示的图片格式只有两种:GIF和JPG)
2、空格问题：
1）中文输入法状态全角空格：无代码显示，可用来段落首行缩进两格。 shift+空格 切换全角/半角 ctrl+>键 切换中英文标点
2）不换行空间： 占半个汉字宽度，可用来精确排版
此快捷键是：Ctrl+shift+空格
注:也可以通过菜单--编辑--参数选择--常规--勾选允许多个连续的空格
3、添加标题和背景色
4、存为首页网页：index.htm
5、按F12键预览调制网页。
5、开放的插件环境
6、新增数据库动W界面介绍：
1、两种工作界面 ：浮动界面和MX界面
F4 显示/隐藏全部面板
网页设计常识：
1、我们设计网页面积以15寸显示器为主，不能超过其显示器范围。
15寸显示器的分辨率：800*600像素
网页满屏宽度：778PX（像素）
首页命名规则：index或者default
比如说：index.htm index.html default.htm index.asp
其它网页命名不限，但不能是中文名和特殊字符命名。
网页上的文本使用：
1、艺术字问题：网页只能以宋体显示，其它字体不能正常显示。因网页上的字体依赖系统字库。