Dreamweaver CS模块一
合集下载
第2章 DreamweaverCS3的基本操作
• 站点根目录相对路径
开始于当前站点的根目录， 开始于当前站点的根目录，如 /images/1.jpg
链接目标
• 此处的链接目标是指链接打开的位置 • 在属性面板的“目标”下拉列表中可设置为： 在属性面板的“目标”下拉列表中可设置为：
_blank
• 在新窗口中打开
_parent
• 在父框架或父窗口中打开
• 插入flash动画 插入flash动画
常用工具栏-媒体： 常用工具栏-媒体：flash
在网页中使用超级链接
• 什么是超级链接（超链） 什么是超级链接ห้องสมุดไป่ตู้超链）
超链接在本质上属于一个网页的一部分， 超链接在本质上属于一个网页的一部分，它是 一种允许我们同其他网页或站点之间进行连接 的元素。 的元素。
在网页中使用声音
• 插入声音
常用工具栏-媒体常用工具栏-媒体-插件 播放器的隐藏：属性面板-参数-hidden,true 播放器的隐藏：属性面板-参数循环播放：loop,true 循环播放：
在网页中使用flash动画 在网页中使用flash动画
• 什么是flash动画？ 什么是flash动画？ 动画
回答：是在文件路径中有中文字体。 回答：是在文件路径中有中文字体。 回复者： 回复者：露露 同学
• Dreamweaver中的站点指的是什么？ Dreamweaver中的站点指的是什么？ 中的站点指的是什么
Dreamweaver CS3 中的站点时文件和文件夹 的集合，它对应于服务器上的web网站 的集合，它对应于服务器上的web网站
• 建立站点
站点菜单站点菜单-新建站点
创建网页文档
• 新建asp网页或html网页 新建asp网页或 网页或html网页 • 设置网页文档属性
DREAMWEAVERcs6模块1初识网页与DREAMWEAVERCS6
顺序（如文本先于图像传输）。
模块一初识网页与Dreamweaver CS6
任务一网页的基础知识
子任务1 什么是网页 网页实际是一个文件，他存放在世界某个角落的某一台计算机中，而这台计 算机必须是与互联网相连的。网页经由网址（ URL）来识别与存取，在浏 览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到用户 的计算机，然后再通过浏览器解释网页的内容，再展示到用户的眼前。 网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，任何 一个网站都是由或多或少的网页组成的。
3． URL的中文名称为(
)，
是WWW上的地址编码，指出了文件在（
）
中的位置。
4．一个完整的URL地址服务器中的路径和
文件名四部分组成。
5．网页从笼统意义上分为（
）和（
）网页。
6．构成网页的基本元素包括标题、（
）、（
）、（
）、主体内容、（
）、导航区、广告栏等。
模块一初识网页与Dreamweaver CS6
模块一初识网页与Dreamweaver CS6
任务学材小结
知识导读
本模块主要介绍网页的相关概念，介绍网页设计的基本知识，了解网页制作
的基本流程以及认识网页设计工具Dreamweaver CS3的新功能与工作界面。
理论知识
1．网页是网站中的一“页”，通常是（
）格式。
2．主页是指进入网站后看到的（
）页面。
2.窗口中各组成部分介绍：
模块一初识网页与Dreamweaver CS6
任务二
认识Dreamweaver CS6
子任务3 应用Dreamweaver CS6制作简单网页
1通过一个简单网页的制作过程介绍，了解通过Dreamweaver CS6新建网页、 保存网页、预览网页的基本操作。 实例1-1 建立myfirst.html网页，正文内容为“欢迎学习Dreamweaver CS6 网页设计”，标题为“我的第一张网页”。
模块一初识网页与Dreamweaver CS6
任务一网页的基础知识
子任务1 什么是网页 网页实际是一个文件，他存放在世界某个角落的某一台计算机中，而这台计 算机必须是与互联网相连的。网页经由网址（ URL）来识别与存取，在浏 览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到用户 的计算机，然后再通过浏览器解释网页的内容，再展示到用户的眼前。 网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，任何 一个网站都是由或多或少的网页组成的。
3． URL的中文名称为(
)，
是WWW上的地址编码，指出了文件在（
）
中的位置。
4．一个完整的URL地址服务器中的路径和
文件名四部分组成。
5．网页从笼统意义上分为（
）和（
）网页。
6．构成网页的基本元素包括标题、（
）、（
）、（
）、主体内容、（
）、导航区、广告栏等。
模块一初识网页与Dreamweaver CS6
模块一初识网页与Dreamweaver CS6
任务学材小结
知识导读
本模块主要介绍网页的相关概念，介绍网页设计的基本知识，了解网页制作
的基本流程以及认识网页设计工具Dreamweaver CS3的新功能与工作界面。
理论知识
1．网页是网站中的一“页”，通常是（
）格式。
2．主页是指进入网站后看到的（
）页面。
2.窗口中各组成部分介绍：
模块一初识网页与Dreamweaver CS6
任务二
认识Dreamweaver CS6
子任务3 应用Dreamweaver CS6制作简单网页
1通过一个简单网页的制作过程介绍，了解通过Dreamweaver CS6新建网页、 保存网页、预览网页的基本操作。 实例1-1 建立myfirst.html网页，正文内容为“欢迎学习Dreamweaver CS6 网页设计”，标题为“我的第一张网页”。
Dreamweaver+CS
3.2 定义页面属性
4．标题/编码属性
3.3 保存和显示文档
执行“文件”|“另存为”命令，打开“另存为” 对话框， 在“另存为”对话框中可以定义文档的名称， 也可以选择保存文档的类型。选择“保存类型” 选项，打开“保存类型”下拉列表，从中选择 需要保存的文档类型。 保存后的文档可以在浏览器中预览。执行“文 件”|“在浏览器中预览”命令，可以打开浏览 器选择下拉菜单，在下拉菜单中显示的是操作 系统中当前安装的浏览器。
2 管理站点
一般在制作网页之前，都要在本地的计算 机中创建本地的测试站点。当测试完成之 后，再传到Internet服务器上。在 Dreamweaver CS3中，可以方便地构建和管 理站点。
2.1 新建站点
在新建站点之前，首先要在磁盘中新建一 个站点文件。新建文件时可以直接在磁盘 中建立，也可以在文件面板中建立。
1.4 文档窗口
2．“代码”视图
1.4 文档窗口
3．“拆分”视图
1.5 属性面板
属性面板用来定义页面元素或内容的相应 属性。由于选择的元素或者内容不同，属 性面板中显示的属性也有所区别。下面是 是选择图像内容后，属性Dreamweaver CS3中，面板都整合到面板组中，通过单击 面板的标题可以显示和隐藏相应的面板。面板和面板组处 于Dreamweaver CS3工作界面的右侧。当面板关闭时，面 板组的显示效果如图所示，打开某个面板后的显示效果如 图所示。
1.3 插入栏
插入栏用来插入各种常用和布局对象。根 据选择的选项不同，在插入菜单中显示的 内容也有所区别。选择“常用”和“布局” 选项时，插入栏的显示效果如图11-4和图 所示。
1.4 文档窗口
文档窗口用来显示当前文档。在文档窗口中，可以使用三种方式显示 文档内容：分别是“设计”视图、“代码”视图、“拆分”视图。下 面分别进行介绍。 1．“设计”视图
DreamweaverCS网页制作电子教案模块剖析
3.1 CSS样式的基本操作
➢ 默认情况下，Dreamweaver CS5使用CSS设置文本格式。 ➢ 用户使用“属性”面板或菜单命令设置文本样式时，将自动创建CSS样
式，这些样式被嵌入在当前文档的头部。 ➢ 对选中的文本进行字体、大小和颜色属性设置后，系统自动打开“新建
CSS规则”对话框。
➢ 使用这种方式创建CSS样式，操作简单，但创建的样式只能嵌入到当前 文档中，且功能有限。
用Div写入基本结构后的“拆分”视图 ➢ <div id="banner">横幅图片</div> ➢ <div id="leftbar">侧边栏</div> ➢ <div id="content">页面主体</div> ➢ <div id="footer">页面底部</div>
实训7 美化我的网页——CSS+Div布局页面
➢ “CSS样式”面板是一个比属性面板功能更为强大的编辑器，它显示为 当前文档定义的所有CSS样式，而不管这些样式是嵌入在文档中还是在 外部样式表中。
➢ 使用“CSS 样式”面板是创建和编辑CSS的最主要工具，使用“CSS样 式”面板创建的样式，不仅可以嵌入到当前文档，还可以形成一个样式 文件应用到其他页面中。
3.1 CSS样式的基本操作
➢ 1．打开“CSS样式”面板 ➢ 可以使用“CSS样式”面板查看、创建、编辑和删除CSS样式，并且可
以将外部样式表附加到文档中。
3.1 CSS样式的基本操作
➢ 2．使用“CSS样式”面板创建CSS样式
3.1 CSS样式的基本操作
Dreamweaver-cs-基础与实例教程
（1）利用“CSS样式”面板 首先选中要应用CSS样式旳对象，能够是文本、图像和
Flash等对象。然后鼠标右键单击“CSS样式”面板中 相应旳样式名称，弹出它旳快捷菜单，再单击该菜单 中旳“套用”菜单命令。 （2）利用“属性”栏 选中要应用CSS样式旳文本对象，在其“属性”栏旳“样 式”下拉列表框中选择需要旳CSS样式名称，即可将选 中旳CSS样式应用于选中旳文本对象。
（2）若要重定义特定 HTML 标签旳默认格式设置，请选择“标签” 选项，然后在“标签”文本框中输入一种 HTML 标签，或从弹出 式菜单中选择一种标签。
（3）若要为详细某个标签组合或全部涉及特定 Id 属性旳标签定 义格式设置，请选择“高级”选项，然后在“选择器”文本框中 输入一种或多种 HTML 标签，或从弹出式菜单中选择一种标签。 弹出式菜单中提供旳选择器（称作伪类选择器）涉及 a:active、 a:hover、a:link 和 a:visited。
环节3：选择定义样式旳位置： （1）若要创建外部样式表，请选择“新建样式表文件”。
（2）若要在目前文档中嵌入样式，请选择“仅对该文 档”。
环节4：单击该对话框中旳“拟定”按钮，即可退出该 对话框，弹出“CSS规则定义”对话框。
2.3.2 将外部样式表导入到目前文档
环节1：在CSS面板上，单击附加样式表按钮，打开 “链接外部样式表对话框”，单击对话框中“浏览” 按钮，浏览到外部 CSS 样式表，或者直接在“文件 /URL”框中键入该样式表旳途径。
2.1.2 插入水平线
在文档编辑区将插入点定位到所需位置，选择“插入” 菜单中旳“HTML”子菜单下旳“水平线”命令或单击 “插入”栏中旳“HTML”选项卡，在其中单击水平线 按钮即可添加水平线。初始绘制旳水平线旳格式往往 不能满足实际需要，此时可经过属性面板对其进行修 改。
Flash等对象。然后鼠标右键单击“CSS样式”面板中 相应旳样式名称，弹出它旳快捷菜单，再单击该菜单 中旳“套用”菜单命令。 （2）利用“属性”栏 选中要应用CSS样式旳文本对象，在其“属性”栏旳“样 式”下拉列表框中选择需要旳CSS样式名称，即可将选 中旳CSS样式应用于选中旳文本对象。
（2）若要重定义特定 HTML 标签旳默认格式设置，请选择“标签” 选项，然后在“标签”文本框中输入一种 HTML 标签，或从弹出 式菜单中选择一种标签。
（3）若要为详细某个标签组合或全部涉及特定 Id 属性旳标签定 义格式设置，请选择“高级”选项，然后在“选择器”文本框中 输入一种或多种 HTML 标签，或从弹出式菜单中选择一种标签。 弹出式菜单中提供旳选择器（称作伪类选择器）涉及 a:active、 a:hover、a:link 和 a:visited。
环节3：选择定义样式旳位置： （1）若要创建外部样式表，请选择“新建样式表文件”。
（2）若要在目前文档中嵌入样式，请选择“仅对该文 档”。
环节4：单击该对话框中旳“拟定”按钮，即可退出该 对话框，弹出“CSS规则定义”对话框。
2.3.2 将外部样式表导入到目前文档
环节1：在CSS面板上，单击附加样式表按钮，打开 “链接外部样式表对话框”，单击对话框中“浏览” 按钮，浏览到外部 CSS 样式表，或者直接在“文件 /URL”框中键入该样式表旳途径。
2.1.2 插入水平线
在文档编辑区将插入点定位到所需位置，选择“插入” 菜单中旳“HTML”子菜单下旳“水平线”命令或单击 “插入”栏中旳“HTML”选项卡，在其中单击水平线 按钮即可添加水平线。初始绘制旳水平线旳格式往往 不能满足实际需要，此时可经过属性面板对其进行修 改。
Dreamweaver网页设计第一章
1.4 层的使用
1.4.1 层的基本概念 图层是一个独立于网页的区块，它允许被放置在网页中的任何位 置。图层中可以放置文本、图像、表单、对象插件，甚至可以放 入其他层。 层的主要特性是可以在网页中上下浮动，即可以在网页中改变层 的位置。另外，层还可以重叠，做出网页中的文档或图片重叠的 效果；可以被显示或隐藏，做出层内容交替显示的效果。
1.4 层的使用
1.4.2 绘制层并设置层属性
绘制层：【插入】 →【布局对象】 →【AP Div】，然后在需要的地方 用鼠标绘制出层。 层属性设置同样可以通过属性面板进行修改，其中“可见性”可以设 置层是否隐藏，合理命名层ID可以有效管理并提高效率。
1.4 层的使用
1.4.3 层的嵌套 层的嵌套就是指在一个层中嵌入其他的层，新嵌入的层称为 子层，原来的层称为父层。子层与父层有如下特点：
课程设置
模块一：静态网页（HTML）的设计与制作
模块二：动态网页（ASP）与数据库（access2003） 模块三：综合应用实例
第一章
走进Dreamweaver
1.1 Dreamweaver的基本操作 1.2 表格布局 1.3 图片应用与超链接 1.4 层的使用
1.5 框架技术
1.1 Dreamweaver的基本操作
• • • • 子层与父层可以重叠，也可以不重叠。 子层大小可超过父层。 子层的可见性与父层保持一致。 子层与父层的相对位置保持一致。
创建嵌套层的方法如下： 先创建父层，将光标放在父层中，然后，在Dreamweaver CS4主窗口中，单击 菜单【插入】→【布局对象】→【AP Div】，即可创建嵌套层，新插入的层为 子层。 利用“层”面板创建嵌套层，在“层”面板中选中作为子层的层，按住【 Shift】键，将选中的层拖动到要作为父层的层上，释放鼠标即可创建嵌套层 ，这时子层与父层以连接线相连，表明其从属关系。单击父层左边的号可以展 开其所有子层，单击号可以折叠其子层。
Dreamweaver CS5.5中文版案例教程第1章
1.6.4 尖端的实时视图渲染
通过实时视图检查页面，该视图现在配备一个经过更新的Webkit渲染 引擎。借助实时媒体查询支持，预览针对多个设备的设计。HTML5和 CSS3功能的增强进一步提高了移动设备的设计效 率。
1.7 Dreamweaver CS5.5的工作界面
1.7 Dreamweaver CS5.5的工作界面
2. 网页版面布局的方法
(1) 平衡性 (2) 对称性 (3) 对比性 (4) 疏密度 (5) 比例
(1) 纸上布局法 (2) 软件布局法
1.3 网页布局设计与色彩搭配
1.3.2 常见的版面布局形式
1.3 网页布局设计与色彩搭配
1.3.2 常见的版面布局形式
1.3 网页布局设计与色彩搭配
1.3.2 常见的版面布局形式
重要工具：Dreamweaver CS5.5的工作界面。 核心技术：通过对Dreamweaver CS5.5工作界面和新功能的介绍让读者 对软件有初步了解。 实际应用：教育网站、个人网站等。
第1章 网页与网站的基础知识
本章主要讲解网页的基础知识、网页制作中常用的工具、网站的制作流程、 网页中的色彩特性，以及网页版面的布局等内容，并通过具体的网页实例来分 析和学习网页的设计思想和设计技巧，还介绍了Dreamweaver的特点及操作界 面，以便让初学者对Dreamweaver有初步的了解。
2. 个人网站
1.1 网页制作与网站建设基础
1.1.3 常见网站类型 3. 门户类网站
1.1 网页制作与网站建设基础
1.1.3 常见网站类型 4. 机构类网站
1.1 网页制作与网站建设基础
1.1.3 常见网站类型 5. 娱乐休闲类网站
1.1 网页制作与网站建设基础
通过实时视图检查页面，该视图现在配备一个经过更新的Webkit渲染 引擎。借助实时媒体查询支持，预览针对多个设备的设计。HTML5和 CSS3功能的增强进一步提高了移动设备的设计效 率。
1.7 Dreamweaver CS5.5的工作界面
1.7 Dreamweaver CS5.5的工作界面
2. 网页版面布局的方法
(1) 平衡性 (2) 对称性 (3) 对比性 (4) 疏密度 (5) 比例
(1) 纸上布局法 (2) 软件布局法
1.3 网页布局设计与色彩搭配
1.3.2 常见的版面布局形式
1.3 网页布局设计与色彩搭配
1.3.2 常见的版面布局形式
1.3 网页布局设计与色彩搭配
1.3.2 常见的版面布局形式
重要工具：Dreamweaver CS5.5的工作界面。 核心技术：通过对Dreamweaver CS5.5工作界面和新功能的介绍让读者 对软件有初步了解。 实际应用：教育网站、个人网站等。
第1章 网页与网站的基础知识
本章主要讲解网页的基础知识、网页制作中常用的工具、网站的制作流程、 网页中的色彩特性，以及网页版面的布局等内容，并通过具体的网页实例来分 析和学习网页的设计思想和设计技巧，还介绍了Dreamweaver的特点及操作界 面，以便让初学者对Dreamweaver有初步的了解。
2. 个人网站
1.1 网页制作与网站建设基础
1.1.3 常见网站类型 3. 门户类网站
1.1 网页制作与网站建设基础
1.1.3 常见网站类型 4. 机构类网站
1.1 网页制作与网站建设基础
1.1.3 常见网站类型 5. 娱乐休闲类网站
1.1 网页制作与网站建设基础
DreamweaverCS5教程第1章
1.2 网页的相关概念
1.2.1 1.2.2 1.2.3 1.2.4 浏览器 网页与HTML URL、域名与IP地址 网站上传和下载
1.2.1 浏览器
浏览器是指将互联网上的文本文档（或其他类型的 文件）翻译成网页，并让用户与这些文件交互的一 种软件工具，主要用于查看网页的内容。 互联网（Internet）又称为因特网，是一个把分布 于世界各地的计算机用传输介质互相连接起来的网 络。Internet主要提供的服务有万维网（WWW）、 文件传输协议（FTP）、电子邮件（E-mail）及远 程登录（Telnet）等。
1.2.2 网页与HTML
HTML（Hyper Text Marked Language）即 超文本标记语言，是一种用来制作超文本文档 的简单标记语言，也是制作网页的最基本的语 言，它可以直接由浏览器执行。
1.2.3 URL、域名与IP地址
URL也就是网络地址，是在Internet上用来描述信息资 源，并将Internet提供的服务统一编址的系统。 域名类似于Internet上的门牌号，相对于IP地址而言， 更便于使用者理解和记忆。 IP地址是给因特网上的每台计算机和其他设备分配的一 个唯一的地址。在IE浏览器的地址栏中输入IP地址 “202.38.64.9”，按下回车键。
<BODY BACKGROUNE=”URI “BGCOLOR=”Color “> ............................................ </BODY>
1.4 HTML常用标记
1.4.1 链接标记< LINK > 1.4.2 段落标记<P> 1.4.3 通用块标记<DIV> 1.4.4 行内标记<SPAN> 1.4.5 元数据标记<META>
DreamweaverCS网页制作实用教程第章综合实例完美版资料
上传到空间中，设置相应的域名地址。
中文版Dreamweaver CS实用教 程
11.4 制作新闻网页
参照某网站新闻页面，在“布局模式”中规划网页布局，插入页面内容，制作 新闻网页，如图所示。
中文版Dreamweaver CS实用教 程
11.5 上传网页
制作好网页后，可以将它上传到网络中，以供在网络中的其他用户访问。要上 传网页，首先需要注册一个域名地址，然后申请一个免费空间，较为便利的方 法就是申请一个免费的文件上传空间，将网页文档上传到空间中，设置相应的 域名地址。在IE浏览器中输入正确的URL地址，即可连接到该网页。
要上传网页，首先需要注册一个域名地址，然后申请一个免费空间，较为便利的方法就是申请一个免费的文件上传空间，将网页文档 上传到空间中，设置相应的域名地址。 本段介绍了使用框架规划网页布局。 参照某网站新闻页面，在“布局模式”中规划网页布局，插入页面内容，制作新闻网页，如图所示。 在制作网页的过程中，可以综合、系统地回顾前面各章节所介绍的内容。
要上传网页通，过首先制需作要注表册单一个网域页名地，址制，然作后网申请站一注个免册费页空间面，，较为如便图利的所方示法就。是申请一个免费的文件上传空间，将网页文档
上传到空间中，设置相应的域名地址。 通过创建个人网站主页模板的制作过程，练习创建本地站点，规划网页布局，然后制作个人网站主页，并将主页保存为模板。 2 制作网站注册页面 本段介绍了制作网页的方法，制作的网页如图所示。 3 制作游戏类网页 参照某网站新闻页面，在“布局模式”中规划网页布局，插入页面内容，制作新闻网页，如图所示。 在制作网页的过程中，可以综合、系统地回顾前面各章节所介绍的内容。
制作好网页后，可以将它上传到网络中，以供在网络中的其他用户访问。
第章DreamweaverCS基础知识
2．网站管理
使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称,Dreamweａvｅr会自动更新所有连结。使用提示文字、HTＭＬ码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。
3．无可比拟的控制能力
Drｅaｍwｅａver是唯一提供Rouｎdtｒip HＴML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeＳite和BＢEdit等主流文字编辑器。帧(frａｍeｓ)和表格的制作速度快的惊人。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Drｅamｗeａver支援精准定位,利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得Dreamweaｖｅr成功整合动态式出版视觉编辑及电子商务功能,提供超强的支援能力给Ｔｈird-parｔy厂商，包含ASP,Apａche，BroaｄVisiｏn, ColdＦusion,iＣＡT,Ｔaｎgo与自行发展的应用软体。使用Dreaｍweaｖer在设计动态网页时，不需要透过浏览器就能预览网页。建立网页外观的模板，指定可编辑或不可编辑的部份,内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。全方位的呈现利用Dreａmwｅａver设计的网页,可以全方位的呈现在任何平台的热门浏览器上。
(5)AdｏbePhotｏshop和Ｆirewoｒｋs集成
直接从AｄｏbｅPｈotｏsｈopＣS3或ＦｉreworkｓCS３复制和粘贴到ＤrｅamweaｖeｒCS3中以利用来自您的已完成项目中的原型的资源。
（6)浏览器兼容性检查
借助全新的浏览器兼容性检查，节省时间并确保跨浏览器和操作系统的更加一致的体验。生成识别各种浏览器中与CＳS相关的问题的报告，而不需要启动浏览器。
使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称,Dreamweａvｅr会自动更新所有连结。使用提示文字、HTＭＬ码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。
3．无可比拟的控制能力
Drｅaｍwｅａver是唯一提供Rouｎdtｒip HＴML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeＳite和BＢEdit等主流文字编辑器。帧(frａｍeｓ)和表格的制作速度快的惊人。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Drｅamｗeａver支援精准定位,利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得Dreamweaｖｅr成功整合动态式出版视觉编辑及电子商务功能,提供超强的支援能力给Ｔｈird-parｔy厂商，包含ASP,Apａche，BroaｄVisiｏn, ColdＦusion,iＣＡT,Ｔaｎgo与自行发展的应用软体。使用Dreaｍweaｖer在设计动态网页时，不需要透过浏览器就能预览网页。建立网页外观的模板，指定可编辑或不可编辑的部份,内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。全方位的呈现利用Dreａmwｅａver设计的网页,可以全方位的呈现在任何平台的热门浏览器上。
(5)AdｏbePhotｏshop和Ｆirewoｒｋs集成
直接从AｄｏbｅPｈotｏsｈopＣS3或ＦｉreworkｓCS３复制和粘贴到ＤrｅamweaｖeｒCS3中以利用来自您的已完成项目中的原型的资源。
（6)浏览器兼容性检查
借助全新的浏览器兼容性检查，节省时间并确保跨浏览器和操作系统的更加一致的体验。生成识别各种浏览器中与CＳS相关的问题的报告，而不需要启动浏览器。
第1章Dreamweaver CS3基础(第二周)
教学
．菜单栏
的所有命令，用于管理网页文件、编辑网页内容。为了便 菜单栏提供了Dreamweaver的所有命令 于使用，将这些命令根据功能划分成【文件】、 、【编辑】、【查看】、【插入记录】、【修 改】、【文本】、【命令】、【站点】、【窗口 窗口】、【帮助】等。单击菜单拦的名称，将打开 相对应的菜单。例如，单击【文本】菜单项，将打开 将打开【文本】菜单，它集中了处理网页文本的 所有命令，如下图所示。
．属性面板
【属性】面板显示了当前选定对象的属性， ，并且可以在此面板中修改选定对象，如下图所 示。
．浮动面板
用于控制对页面的编写。相同类型或功能的面板被组织 Dreamweaver提供了大量的面板，用于控制对页面的编写 到面板组中。每个面板组都可以展开或折叠，并且可以和其它面板组停靠在一起或取消停靠 并且可以和其它面板组停靠在一起或取消停靠， 如下• 1.3.1 本地站点、远程站点、测试站点 本地站点、远程站点、 • 本地站点： 本地站点： –本地站点是用于存放网页、素材文档的本地文件夹，是网页设计者 本地站点是用于存放网页、素材文档的本地文件夹， 本地站点是用于存放网页 的工作目录，在制作网页时只建立本地站点即可。 的工作目录，在制作网页时只建立本地站点即可。 • 远程站点： 远程站点： –远程站点是网页发布到Web服务器上后网站所在的文件夹。若要在 远程站点是网页发布到Web服务器上后网站所在的文件夹。 远程站点是网页发布到Web服务器上后网站所在的文件夹 不连接Internet的情况下对所建的站点进行测试和修改， Internet的情况下对所建的站点进行测试和修改 不连接Internet的情况下对所建的站点进行测试和修改，可在本地 计算机上创建远程站点，模拟真实的Web Web服务器环境进行网页的测 计算机上创建远程站点，模拟真实的Web服务器环境进行网页的测 试。 • 测试站点： 测试站点： –测试站点主要是在对动态页面进行测试时使用的站点，是Dreamwea 测试站点主要是在对动态页面进行测试时使用的站点， 测试站点主要是在对动态页面进行测试时使用的站点 处理动态页面的文件夹，Dreamweaver使用此文件夹生成动态 ver 处理动态页面的文件夹，Dreamweaver使用此文件夹生成动态 内容并在工作时连接到数据库。 内容并在工作时连接到数据库。
DreamWeaver cs6常用工具(一)教案
第 1 页课题：教学内容、过程：起，如某文件位于“C:\ProgramFiles\ JiangMin”下面，那么这个路径就是它的绝对路径。
b、相对路径：可以理解为绝对路径的部分，且是后半部分，这是从当前所处位置而定的，如当前位置是在“C:\Program Files\”，那就可以说某文件处于“JiangMin”这个文件夹下。
事实上，在网页编程时，很少会使用绝对路径，一是不利于测试，二是不利于移动站点。
采用相对路径只要站点的结构和文档的位置不变，那么链接就不会出错。
添加超级链接的方法：选择文本→“属性”→“浏览文件夹”→选择文件。
链接网址：直接在“链接”中输入网址。
空连接：直接在“链接”中输入#。
B、邮件链接点击“插入”→“电子邮件链接”→对话框，填入“文本”，“电子邮件”→“确定”C、命名锚记在想要跳转到地方插入“命名锚记”→命名链接名称，例如：命名为a→选择链接跳转时点击的文本→在链接处填入#加上命名的“命名锚记”，例如#aD、水平线E、插入图片方法：插入→图像→图像设置图像属性：选定图像（图像周围出现边框）→属性面板设置可设置图像宽高图像链接：可拖动“指向文件”图标到“文件”面板中的某个文件上，或直接在文本框中输入URL地址目标：_blank弹出新窗口打开_parent：如果嵌套的框架，会在父框架或窗口中打开链接文件，如果不是嵌套的框架，则与_top相同在整个浏览器窗口中打开链接。
_self:在当前网页所在的窗口中打开链接，此为默认设置。
_top:在完整的浏览器窗口中国打开链接文件，会删除所有框架。
备注：第 2 页第 3 页。
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
4.文档窗口
图1-12 文档工具栏 正文_Embed_13.png 正文_Embed_14.png 正文_Embed_15.png 正文_Embed_16.png
1.1.1 Dreamweaver CS3的工作界面
文档窗口也就是设计区，是Dreamweaver CS3进行可视化编辑网页 的主要区域，可以显示当前文档的所有操作效果，如插入文本、 图像、动画等。
相关知识
6)图片：使用图片的意义。 7)多媒体：使用多媒体的意义。 (4)制作网站 1)建立本地站点。 2)在站点根文件夹下创建子文件夹。 3)向站点添加所需要的空网页。 4)设计网页尺寸。 5)设置网页属性，包括网页标题、背景图像、背景颜色、链接颜 色、文字颜色等。 6)向网页中插入文本、图像、动画等。 7)建立所有链接。 8)预览和保存网页。
1.Web相关知识 (1)Web介绍 (2)HTML (3)浏览器 (4)URL 1)http:// HTTP服务器，用于提供超文本信息服务的Web服务器。 2)telnet:// Telnet服务器，供用户远程登录使用的计算机。 3)ftp:// FTP服务器，用于提供各种普通文件和二进制代码文件的 服务器。 4)gopher:// Gopher服务器。 5)wais:// Wais服务器。 6)news:// 网络新闻USENET服务器。
4.1任务一 创建“绿之韵”页面间链接 4.2任务二 导航栏的制作—— 创建“绿之韵”页面导航栏 4.3拓展训练 创建“瑶瑶之旅”的导航栏与网页间链接 5.1任务一 使用层布局网页—— 创建“拼图游戏”页面 5.2任务二 使用框架布局网页—— 创建“我的音乐小站” 页面 5.3任务三 CSS的应用—— 重新布局“在线求诊”页面 5.4拓展训练 创建“雷锋精神宣传”网页 6.1任务一 制作搜索和用户登录表单—— 创建“探索旅行 网”首页
1)88×31：这是互联网上最普遍的LOGO规格。 2)120×60：这种规格用于一般大小的LOGO。 3)120×90：这种规格用于大型LOGO。 1)符合国际标准。 2)精美、独特。 3)与网站的整体风格相融。 4)能够体现网站的类型、内容和风格。
图1-8 “Spry”类别 图1-9 “文本”类别 图1-10 “收藏夹”类别
1.1.1 Dreamweaver CS3的工作界面
3.文档工具栏
图1-11 “自定义收藏夹对象”对话框
1.1.1 Dreamweaver CS3的工作界面
文档工具栏主要包含了一些对文档进行常用操作的功能按钮，通 过单击这些按钮可以在文档的不同视图模式间进行快速切换，如 图1-12所示。
正文
主编
1.1任务一 创建“我的第一个页面” 1.2任务二 创建与管理站点 1.3拓展训练 创建“我的班级”站点 2.1任务一 文本的输入—— 创建“养生保健”页面 2.2任务二 图像的添加—— 创建“ASA餐厅”页面 2.3拓展训练 创建“我的个人网站”的首页 3.1任务一 Flash元素的添加—— 创建“江河双水湾”页面 3.2任务二 音乐和视频的添加—— 创建“音乐中心”页面 3.3拓展训练 创建“我的个人活动展示”页面和“个人相 册”页面
5.“属性”面板 在“属性”面板中可以查看并编辑页面上文本或对象的属性，如 图1-13所示。该面板中显示的属性通常对应于标签的属性，更改 属性通常与在代码视图中更改相应的属性具有相同的效果。
图1-13 “属性”面板
6.面板组
1.1.1 Dreamweaver CS3的工作界面
图1-14 面板组
1.1.2 设计LOGO
相关知识
(2)收集资料 (3)规划网站 1)确定网页结构。 2)确定网页的信息组织和管理方式。 3)确定信息的存储方法。 4)文档版本的控制。 5)确保结构的完整性和一致性。 1)页面尺寸：影响页面尺寸的因素、页面尺寸设计的基本要求。 2)整体造型：整体造型的意义、整体造型的基本方法。 3)页眉：页眉的作用、页头的作用。 4)文本：文本设计的意义。 5)页脚：页脚的意义。
(5)测试与上传 (6)推销网站 (7)维护网站
相关知识
任务实施
1.1.1 Dreamweaver CS3的工作界面
正文_Embed_2.emf
图1-2 Dreamweaver CS3工作界面
1.1.1 Dreamweaver CS3的工作界面
1.菜单栏 菜单栏提供了各种操作的标准菜单命令，它由【文件】、【编 辑】、【查看】、【插入记录】、【修改】【文本】、【命 令】、【站点】、【窗口】和【帮助】10个菜单命令组成。
6.2任务二 创建列表/菜单表单—— 创建“机票查询”页面 6.3任务三 使用单选按钮和复选框—— 创建“网站活动” 页面 6.4任务四 校验表单内容—— 创建“驴友留言”页面 6.5拓展训练 为“我的个人网站”增加会员登录、会员注 册和会员留言页面 7.1任务一 网站的配色方案与版式设计—— 创建“羽翱科 技”页面 7.2任务二 使用模板和库—— 创建“羽翱科技”页面的模 板
7.3任务三 使用网页特效—— 为“羽翱科技”各网页增加 特效 7.4拓展训练 为“我的个人网站”各网页增加特效并进行 整体风格调整
1.1任务一 创建“我的第一个页面”
任务分析 相关知识 任务实施 1.1.1 Dreamweaver CS3的工作界面 1.1.2 设计LOGO
任务分析
相关知识
2.“插入”面板 在“插入”面板中包含了可以向网页文档添加的各种元素，如文 字、图像、表格、按钮、导航以及程序等。
图1-3 【插入】面板
1.1.1 Dreamweaver CS3的工作界面
图1-4 “常用”类别 图1-5 “布局”类别 图1-6 “表单”类别 图1-7 “数据”类别
1.1.1 Dreamweaver CS3的工作界面
相关知识
2.网站的开发流程 为了加快网站建设的速度和减少失误，应该采用一定的制作流程 来策划、设计、制作和发布网站。通过使用制作流程确定制作步 骤，以确保每一步顺利完成。好的制作流程能帮助设计者解决策 划网站的烦琐性，减小项目失败的风险。网站设计主要分为三个 阶段，如图1-1所示。
(1)确定主题
图1-1 网站开发流程