网页设计与制作dreamweaverMX基本操作
探索使用Dreamweaver进行网页制作的技巧
探索使用Dreamweaver进行网页制作的技巧使用Dreamweaver进行网页制作是一项技术性很强的任务。
虽然现在有很多网页设计工具可以选择，但Dreamweaver作为一款专业的网页设计和开发软件，拥有丰富的功能和灵活的界面，依然是许多网页设计师的首选。
本文将探索使用Dreamweaver进行网页制作的一些技巧，按照不同的类别进行分章节介绍。
第一章：基本界面和功能介绍Dreamweaver具有直观的用户界面和丰富多样的功能。
在这一章节中，我们将介绍软件界面的各个部分，包括工具栏、菜单栏、文件管理器等。
同时，我们会介绍一些基本的功能，例如创建和保存网页文件、预览网页等。
第二章：网页布局和排版在网页制作中，良好的布局和合适的排版至关重要。
本章节将介绍如何使用Dreamweaver进行网页布局和排版。
包括使用网格和辅助线进行布局，调整页面元素的大小和位置，选择合适的字体和字号等。
第三章：图像和多媒体元素的插入和调整图像和多媒体元素可以使网页更具吸引力和互动性。
在这一章节中，我们将介绍如何使用Dreamweaver插入和调整图像、音频和视频等多媒体元素。
同时，我们还会讨论图像的格式选择和优化，以及多媒体元素的自动播放和控制等问题。
第四章：连接和导航网页中的连接和导航功能是用户体验的重要组成部分。
在这一章节中，我们将介绍如何使用Dreamweaver创建超链接和导航栏。
我们还会讨论如何设置链接的样式和目标页面，以及如何创建下拉菜单和网站地图等。
第五章：表单和动态内容表单和动态内容是网页制作中需要注意的重点。
在本章节中，我们将介绍如何使用Dreamweaver创建表单，并进行表单元素的布局和样式设置。
同时，我们还会讨论如何使用Dreamweaver结合服务器端语言（如PHP）实现表单提交和动态内容的显示。
第六章：网页优化和调试一款高效的网页应具备良好的性能和兼容性。
在这一章节中，我们将介绍一些网页优化和调试的技巧。
第3章_Dreamweaver基本操作
如图所示：
如果在“字体”下拉列表中没有所需要的字体， 可以选择“编辑字体列表”命令，打开如图所示的 “编辑字体列表”对话框。
在该对话框的“可用字体”列表中选择所需的字 体，单击按钮，将所选的字体添加到“选择的字体”
列表中。
2.字体大小设置
选中要设置字体大小的文字。 执行【文本】|【大小】命令，或者在“属性”面板的“大 小”列表中选择所需要的选项即可。
简介：Dreamweaver CS3“所见即所得”的可 视化网站开发工具。 3.1.1 Dreamweaver CS3的启动 3.1.2 Dreamweaver CS3的工作环境 3.1.3 站点操作 3.1.4 文档操作
3.1.1 Dreamweaver CS3的启动
方法一：在“开始”菜单中启动 方法二：双击桌面上Dreamweaver CS3的快 捷方式图标。
5.设置页面属性（2）设置网页其他属性
③ 跟踪图像。跟踪图像是放在文档窗口中的 JEPG、GIF或PNG图像。在“分类”列表框 中选择“跟踪图像”选项，右侧选项主要用于 设置隐藏图像、设置图像的不透明度和更改图 像的位置.
5.设置页面属性（2）设置网页其他属性
6．预览网页 保存好新建的文档之后，可以在浏览器中对所 做的网页进行预览，预览的方法有： 方法一：按【F12】键。 方法二：在工具栏中单击按钮，在弹出的快捷 菜单中选择浏览器。
5．标准工具栏
标准工具栏包含来自“文件”和“编辑”菜单 中的一般操作的按钮，如“新建”、“打开”、 “保存”、“保存全部”、“剪切”、“复 制”、“粘贴”、“撤销”和“重做”，如图 所示。
6．文档窗口
“文档”窗口显示当前文档。 可以选择下列任一视图
dreamweaver网页制作教(学)案
dreamweaver网页制作教案（Dreamweaver MX）一、Dreamweaver MX中文版建站初步建立一个，首先要在本地机器上做好，再传到网上的虚拟空间上。
现在免费的网页空间很少了，在还可以申请到可以使用几个月的免费空间，这对于学习网页制作已经够了。
接下来主要介绍本地站点的建立，站点文件命名。
简明步骤：在C盘新建一个文件夹→在Dreamweaver中定义站点→新建文件和文件夹→给文件和文件夹命名。
目标是做一个个人。
打开“我的电脑”，打开C盘，点鼠标右键，选择新建。
选择文件夹选项C盘下会出现一个新建文件夹图标输入你想要的站点名称，这里输入media,其实可以任意输入名称的，要注意的是，尽量不要用中文命名，以免出现意想不到的麻烦！现在开始在Dreamweaver MX中把media这个文件夹定义为站点。
打开Dreamweaver，在菜单栏上，点击站点菜单，选择新建站点接下来需要给站点起一个名字，可以起任意一个名字。
这里起名为media,按下一步按下一步按钮，选择是否使用服务器技术。
因为实例建立的是一个静态站点，就选择“否，我不想使用服务器技术”。
按下一步按钮，因为要传到网上的虚拟主页空间，就要选择“编辑我的计算机上的本地副本，完成后再传到服务器上”。
按下一步，选择要定义的本地根文件夹这里选择media文件夹点“选择”按钮，因为没有使用远程服务器，就选择“无”。
按下一步按完成按钮，一个站点就定义好了。
二、文件命名与修改默认扩展名站点定义好之后，就要开始新建网页文件和文件夹了，在站点中点击右键，选择新建文件。
给新建的文件输入名称新建文件夹与新建文件类似，就不重复了。
在文件命名和站点结构方面，养成良好的习惯很重要。
首页默认的文件名，取决于你申请的主页空间，一般是index.htm,index.html,default.htm 等。
同类型的文件，最好放在一个文件夹中，例如把图片文件，都放在image文件夹中。
《Dreamweaver网页设计》教案
《Dreamweaver网页设计》教案一、教案简介二、教学目标1. 掌握Dreamweaver的界面结构和基本操作。
2. 学会使用Dreamweaver制作和管理网页布局。
3. 掌握在Dreamweaver中插入和编辑各种网页元素，如文本、图片、等。
4. 学会使用CSS样式表美化网页。
5. 掌握在Dreamweaver中进行网页代码编辑和调试。
三、教学内容1. Dreamweaver的安装和界面介绍。
2. 网页制作的基本流程和规范。
3. 文本的插入、编辑和格式设置。
4. 图片的插入、编辑和优化。
5. 的创建和管理。
四、教学方法采用讲解、演示、实践相结合的教学方法。
教师先进行理论知识讲解和操作演示，学生跟随实践，巩固所学知识。
在实践过程中，教师会提供指导和解答疑问。
五、教学环境1. 计算机房，每台计算机安装有Dreamweaver软件。
2. 投影仪或白板，用于展示操作过程。
3. 教学PPT或教案文档。
六、教学评估1. 课堂参与度：观察学生在课堂上的积极参与程度，提问和回答问题的积极性。
2. 实践操作：评估学生在实践环节中制作网页的质量和完成情况。
3. 作业和练习：布置相关作业和练习题，评估学生的理解和掌握程度。
4. 期末考核：进行期末考核，包括理论知识和实践操作，以评估学生整体学习效果。
七、教学资源1. Dreamweaver软件：确保每台计算机都安装有Dreamweaver软件，以便学生实践操作。
2. 教学PPT或教案文档：提供清晰的教学内容和操作步骤，方便学生理解和跟随。
3. 网页设计素材：提供一些图片、字体等网页设计素材，供学生自由使用。
4. 网络资源：提供一些优秀的网页设计参考案例和教程，供学生学习和参考。
八、教学进度安排1. 教案一：Dreamweaver的安装和界面介绍（1课时）2. 教案二：网页制作的基本流程和规范（1课时）3. 教案三：文本的插入、编辑和格式设置（1课时）4. 教案四：图片的插入、编辑和优化（1课时）5. 教案五：的创建和管理（1课时）6. 实践环节：学生自主制作网页（4课时）7. 作业和练习：布置相关作业和练习题，学生进行理论知识巩固（1课时）8. 教学评估：进行课堂参与度、实践操作、作业和练习的评估（1课时）9. 期末考核：进行期末考核，包括理论知识和实践操作（2课时）九、教学注意事项1. 确保学生已经掌握基本的计算机操作技能，如文本编辑、图片浏览等。
Dreamweaver网页设计与制作
Dreamweaver支持插入多种格式的音频文件，如MP3、WAV等。可以通过“插入”菜单选择“媒体”选项 ，然后选择“音频”来插入音频文件。在插入音频后，可以设置音频的播放方式、循环次数等属性。
插入视频
与插入音频类似，Dreamweaver也支持插入多种格式的视频文件，如MP4、FLV等。可以通过“插入”菜 单选择“媒体”选项，然后选择“视频”来插入视频文件。在插入视频后，可以设置视频的播放方式、大小 等属性。
专业网页设计软件
如Adobe Dreamweaver、Microsoft Expression Web等，提供丰富的功能和工具，方便用户进行网 页设计与制作。
集成开发环境（IDE）
如Visual Studio Code、WebStorm等，提 供代码编辑、调试、测试等一体化解决方案 。
Dreamweaver软件特点与优势
表单元素添加及验证功能实现
添加表单元素
表单是网页中用于收集用户输入信息的区域。在Dreamweaver中，可以通过“插入”菜单选择“表 单”选项来添加表单元素，如文本框、密码框、单选框、复选框等。
实现验证功能
为了保证用户输入信息的准确性，可以在表单中添加验证功能。在Dreamweaver中，可以通过 JavaScript或服务器端脚本来实现表单验证功能。例如，可以使用JavaScript来验证用户输入的邮箱格 式是否正确、密码长度是否符合要求等。
网站上传与发布流程
网站文件准备
整理好需要上传的网站文 件，包括HTML、CSS、 JavaScript、图片等。
网站访问测试
在远程服务器上访问网站 ，确保网站能够正常浏览 和使用。
上传网站文件
使用FTP、SFTP等工具将 网站文件上传到远程服务 器指定目录。
第3章_Dreamweaver基本操作
如图所示：
如果在“字体”下拉列表中没有所需要的字体， 可以选择“编辑字体列表”命令，打开如图所示的 “编辑字体列表”对话框。
在该对话框的“可用字体”列表中选择所需的字 体，单击按钮，将所选的字体添加到“选择的字体”
列表中。
2.字体大小设置
选中要设置字体大小的文字。 执行【文本】|【大小】命令，或者在“属性”面板的“大 小”列表中选择所需要的选项即可。
标文件。
3.5 使用多媒体对象
添加背景音乐
① 打开要添加背景音乐的网页，如实例中的主页04-1.html。 ② 切换到代码视图，在<head>和</head>之间添加以下代码： <bgsound src=”music/bg.mid” loop=1> bgsound标签的基本属性是src，用于指定背景音乐的源文件。 常用属性loop用于指定背景音乐的重复次数，本例设置重复1次， 如果部制定该属性，则背景音乐无限循环。 ③ 保存全部网页，按F12键预览网页，自动播放加入的背景音 乐。
4.字体样式设置
字体样式包括字体的加粗、倾斜等。在 Dreamweaver CS3中，用户可以很容易地设 置文字样式：先在页面中选择文字，然后在 “属性”面板中单击按钮，可以设置文字为粗 体；单击按钮，则设置文字为斜体。若要取消 设置，可以再次单击按钮即可。除此之外而， 还可以使用快捷键设置字体的加粗和倾斜格式， 按下“Ctrl+B”组合键，可以使文字加粗；按下 “Ctrl+I”组合键，可以使文字倾斜。
3.6 表格操作
编辑表格 ①为表格添加背景图像 ②设置单元格的格式 ③向单元格中输入内容 ④合并单元格 效果如右图：
3.7 表单操作
网页设计Dreamweaver教案
网页设计Dreamweaver教案第一章：Dreamweaver概述1.1 课程目标了解Dreamweaver的基本功能和特点熟悉Dreamweaver的工作界面掌握Dreamweaver的基本操作1.2 教学内容Dreamweaver的功能和特点Dreamweaver的工作界面Dreamweaver的基本操作1.3 教学步骤1. 介绍Dreamweaver的功能和特点2. 演示Dreamweaver的工作界面3. 讲解Dreamweaver的基本操作4. 学生练习操作Dreamweaver1.4 作业与练习制作一个简单的网页熟悉Dreamweaver的工作界面第二章：网页设计与布局2.1 课程目标学习网页设计的基本原则掌握网页布局的方法熟悉Dreamweaver的布局工具2.2 教学内容网页设计的基本原则网页布局的方法Dreamweaver的布局工具2.3 教学步骤1. 介绍网页设计的基本原则2. 演示网页布局的方法3. 讲解Dreamweaver的布局工具4. 学生练习网页设计和布局2.4 作业与练习设计并布局一个简单的网页熟悉Dreamweaver的布局工具第三章：HTML标签与属性3.1 课程目标学习HTML标签的基本概念掌握HTML标签的属性和使用方法熟悉Dreamweaver的标签插入工具3.2 教学内容HTML标签的基本概念HTML标签的属性和使用方法Dreamweaver的标签插入工具3.3 教学步骤1. 介绍HTML标签的基本概念2. 演示HTML标签的属性和使用方法3. 讲解Dreamweaver的标签插入工具4. 学生练习插入HTML标签3.4 作业与练习插入并使用HTML标签制作一个简单的网页熟悉Dreamweaver的标签插入工具第四章：CSS样式与布局4.1 课程目标学习CSS样式的基本概念掌握CSS样式的使用方法熟悉Dreamweaver的CSS样式编辑工具4.2 教学内容CSS样式的基本概念CSS样式的使用方法Dreamweaver的CSS样式编辑工具4.3 教学步骤1. 介绍CSS样式的基本概念2. 演示CSS样式的使用方法3. 讲解Dreamweaver的CSS样式编辑工具4. 学生练习编辑CSS样式4.4 作业与练习编辑CSS样式制作一个简单的网页熟悉Dreamweaver的CSS样式编辑工具第五章：网页交互与动画5.1 课程目标学习网页交互的基本概念掌握网页交互的方法熟悉Dreamweaver的交互工具5.2 教学内容网页交互的基本概念网页交互的方法Dreamweaver的交互工具5.3 教学步骤1. 介绍网页交互的基本概念2. 演示网页交互的方法3. 讲解Dreamweaver的交互工具4. 学生练习网页交互和动画制作5.4 作业与练习制作一个带有交互和动画的网页熟悉Dreamweaver的交互工具第六章：网页素材与图像处理6.1 课程目标学习网页素材的基本概念掌握图像处理的方法熟悉Dreamweaver的图像插入和编辑工具6.2 教学内容网页素材的基本概念图像处理的方法Dreamweaver的图像插入和编辑工具6.3 教学步骤1. 介绍网页素材的基本概念2. 演示图像处理的方法3. 讲解Dreamweaver的图像插入和编辑工具4. 学生练习插入和编辑图像6.4 作业与练习插入和编辑图像制作一个简单的网页熟悉Dreamweaver的图像插入和编辑工具第七章：网页与导航7.1 课程目标学习网页的基本概念掌握网页的方法熟悉Dreamweaver的插入和管理工具7.2 教学内容网页的基本概念网页的方法Dreamweaver的插入和管理工具7.3 教学步骤1. 介绍网页的基本概念2. 演示网页的方法3. 讲解Dreamweaver的插入和管理工具4. 学生练习插入和管理7.4 作业与练习插入和管理制作一个简单的网页导航熟悉Dreamweaver的插入和管理工具第八章：表格与数据管理8.1 课程目标学习表格的基本概念掌握表格的制作和编辑方法熟悉Dreamweaver的表格工具8.2 教学内容表格的基本概念表格的制作和编辑方法Dreamweaver的表格工具8.3 教学步骤1. 介绍表格的基本概念2. 演示表格的制作和编辑方法3. 讲解Dreamweaver的表格工具4. 学生练习制作和编辑表格8.4 作业与练习制作和编辑表格展示一组数据熟悉Dreamweaver的表格工具第九章：表单与数据验证9.1 课程目标学习表单的基本概念掌握表单的制作和数据验证方法熟悉Dreamweaver的表单工具9.2 教学内容表单的基本概念表单的制作和数据验证方法Dreamweaver的表单工具9.3 教学步骤1. 介绍表单的基本概念2. 演示表单的制作和数据验证方法3. 讲解Dreamweaver的表单工具4. 学生练习制作和数据验证表单9.4 作业与练习制作和数据验证一个简单的表单熟悉Dreamweaver的表单工具第十章：网站发布与维护10.1 课程目标学习网站发布的基本概念掌握网站发布的步骤熟悉Dreamweaver的网站发布和管理工具10.2 教学内容网站发布的基本概念网站发布的步骤Dreamweaver的网站发布和管理工具10.3 教学步骤1. 介绍网站发布的基本概念2. 演示网站发布的步骤3. 讲解Dreamweaver的网站发布和管理工具4. 学生练习发布和管理网站10.4 作业与练习发布和管理一个简单的网站熟悉Dreamweaver的网站发布和管理工具重点和难点解析一、Dreamweaver概述重点和难点解析：Dreamweaver的工作界面和基本操作是初次接触该软件的学生必须要掌握的基础。
网页设计与制作dreamweaverMX基本操作52页PPT
网页设计与制作dreamweaverMX基本操 作
1、合法而稳定的权力在使用得当时很 少遇到 抵抗。 ——塞 ·约翰 逊 2、权力会使人渐渐失去温令人反感 ；权力 不易确 定之处 始终存 在着危 险。— —塞·约翰逊 4、权力会奴化一切。——塔西佗
5、虽然权力是一头固执的熊，可是金 子可以 拉着它 的鼻子 走。— —莎士 比
6、最大的骄傲于最大的自卑都表示心灵的最软弱无力。——斯宾诺莎 7、自知之明是最难得的知识。——西班牙 8、勇气通往天堂，怯懦通往地狱。——塞内加 9、有时候读书是一种巧妙地避开思考的方法。——赫尔普斯 10、阅读一切好书如同和过去最杰出的人谈话。——笛卡儿
第3章 Dreamweaver基本操作
本章目标任务：
3.1 中文Dreamweaver8工作环境
中文Dreamweaver8提供可视化的网页开发环境,具 有所见即所得的功能。它的工作窗口简洁明了，功能面 板及工具栏中几乎集中了所有的重要功能，属性面板放 在窗口底部外，其他面板多放在窗口的右边，可随时打 开与关闭，并能折叠和展开，这样就克服了以往版本浮 动面板位置较乱，有时会影响网页编辑的不足。 中文Dreamweaver8工作环境即中文Dreamweaver8应 用程序窗口，该应用程序窗口由标题栏、菜单栏、文档 工具栏、文档编辑窗口、浮动面板等组成，文档编辑窗 口由文档标题栏、页面编辑区、状态栏等组成，浮动面 板包括插入面板、属性面板、面板组等。中文 Dreamweaver8工作环境图3-1所示：
3.1 中文Dreamweaver8工作环境
输入面板 文档工具栏 文档窗口 菜单栏 标题栏 面板组
属性面板
页面编辑区
状态栏
图3-1 中文Dreamweaver8工作环境
3.1 中文Dreamweaver8工作环境
1. 标题栏 标题栏上显示当前网页的页面标题及打开 的文件名。若是对一个新网页进行编辑，则在 对此网页命名之前自动将此文件命名为 “Untitled-x”(x是按顺序产生的数字)。 2. 菜单栏 和其他应用软件基本相同，菜单栏中的每 一项都有一个下拉式菜单，Dreamweaver中大部 分操作都可以通过菜单项的下拉菜单来实现。
3.1 中文Dreamweaver8工作环境
属性面板 属性面板是使用频率最高的一个浮动面板，被放置在窗口的下 边。属性面板中的项目会随着网页中选定对象的不同而改变的。在 属性面板中，详细地列出了所选对象的属性参数，用户可以通过属 性面板查看或修改这些参数。 选择【窗口】→【属性】菜单命令或按快捷键【Ctrl】+【F3】， 可显示或隐藏属性面板。 面板组 常用面板组显示在窗口的右侧，如文件面板、资源面板、CSS 样式面板、框架面板层面板、行为面板等。非常用面板组显示在窗 口的下面，如结果面板、时间轴面板等。 使用“窗口”菜单中的相应面板选项，可以显示或隐藏相应面 板。在面板标题上单击右键，在快捷菜单中选择“关闭面板组”， 也可关闭相应面板。 各种面板的具体应用性操作在后面课程中再具体介绍。
《Dreamweaver网页设计与制作》说明书
《Dreamweaver网页设计与制作》说明书北京市朝阳区教育研究中心古燕莹●编写说明：（1）本教学网站是作者编写的《网页设计与制作实训教程》（机械工业出版社出版）一书的配套课件（学件）。
（2）本网站通过大量的实训案例和拓展训练讲解Dreamweaver 8的基本操作和相关知识。
（3）本网站采用“任务驱动案例教学”模式编写。
案例的编写结构如下：案例综述、知识和技能目标、效果展示；拓展训练、效果展示。
本网站既可作为网页设计与制作课程教师的教学课件，也可作为学习者的学件；既可让学习者在课堂上使用，也可让学习者课后复习使用。
同时，本网站提供了网上答疑系统，使用者可很方便地提问求答。
“行为的应用”单元提供了网上检测。
（4）通过使用本网站辅助学习，打开网站源文件，学习者既能完成静态网页的制作，也能完成动态网页的制作；同时，通过制作“美丽的三峡”网站，学习者可以熟悉一个完整网站的制作流程，并可体会“三剑客”的合作效果。
（5）设计本课件（学件）的目的是给学习者创设自主学习的条件，培养学习者的自学能力，提高教学质量。
（6）本网站特点如下：◆循序渐进——内容起点低，深入浅出，循序渐进。
◆内容全面——涵盖Dreamweaver 8的基本操作和相关知识。
◆案例丰富——提供大量的实际案例和拓展训练进行实战演练。
◆针对性强——实训案例和拓展训练都有很强的针对性和实用性。
◆完整案例——提供“美丽的三峡”网站完整案例，将静态网页和动态网站技术融会贯通。
◆网上答疑——解答使用者在学习中遇到的疑问。
◆导航清晰——本网站导航清晰，可在网站内进行任意跳转。
●运行环境：（1）系统为Windows 2000/XP。
（2）要求系统安装有IIS。
（3）数据库为Microsoft Access 2000/2003。
使用说明：（1）本课件（学件）是网站形式，打开文件夹“Dreamweaver网页设计与制作（古燕莹2009）”，双击“index.html”，即可进入课件首页，进行静态网页．．．．部分的学习（备注：“网上答疑”、“表单的应用（动态网站）”的案例和拓展训练的效果展示、“综合实训”的效果展示的留言簿均为动态网页．．．．）。
第2章 Dreamweaver基本操作
第2章 Dreamweaver基本操作
本章以Dreamweaver CS3版本为例，介绍使用该软件进行网页设 计与制作的基本方法。主要内容包括： （1）创建一个简单的公司简介网页index.htm。 （2）利用CSS进行文字排版。 （3）创建公司网站中的导航栏页面lianxi.htm。 （4）创建公司表格布局网页index.htm。 （5）设置公司网站中网页间的链接。
2.1.11 使用Dreamweaver图像
第2章 Dreamweaver基本操作
在已经确定网站基本风格后，小赵非常兴奋，摩拳擦掌， 准备开始设计网页，但是使用什么工具来完成设计呢？ 老张向小赵推荐经典网页制作工具Dreamweaver。 Dreamweaver是美国Macromedia公司开发的集网页制 作和管理于一身的“所见即所得”网页编辑器，它是第 一套针对专业网页设计师的视觉化网页开发工具，利用 它可以轻而易举地制作出跨越平台限制和跨越浏览器限 制的充满动感的网页。
学习目标
了解Dreamweaver启动与参数设置，能够对 Dreamweaver进行初始设置。 掌握Dreamweaver站点管理，能够对站点进行增加、删 除、编辑等操作。 掌握Dreamweaver文字的使用，能够利用CSS设置文字 格式。 掌握Dreamweaver图像的使用，并能够进行鼠标经过图 像的设置。
“首选参数”对话框中的“常规”选项
2.1.3 参数设置
2）设置不可见元素 在“首选参数”对话框中，选择“分类”中的“不可见 元素”项，可以进行不可见元素设置。
“不可见元素”选项
2.1.4 设置标尺和网格
在网页排版过程中，如果希望对元素精确定位，则标尺和网格是非 常有用的工具。
网页设计与制作实用教程(第3版)第2章-Dreamweaver网页制作基础
本章主要内容：
Dreamweaver CS6的工作环境 建立本地站点 在Dreamweaver中制作第一个网页
2.1 Dreamweaver CS6的工作环境
与Dreamweaver前面版本相比， Dreamweaver CS6包含一个崭新、 高效的工作环境，且功能也得到了较大 的改进。
2.2.1 创建站点目录
在建立站点目录时，应该注意以下几点： 不要将所有的文件都存放在根目录下，否则容 易混淆，不利于管理和上传 按照文件的类型建立不同的子目录 目录的层次不能太深 目录命令要得当，不能使用中文或者过长的目 录名
2.2.1 创建站点目录
例如建立G:\samples，存放所有站点文件。在 samples目录下新建一个名字为images的子目 录，存放站点所需要的图片。接着在samples目 录下新建一个名字为part2的子目录，用于存放制 作好的页面文件，如图2-19所示。
在Dreamweaver CS6工作窗口的下端是“属 性”面板，使用“属性”面板可以很容易地设置页 面中的元素的最常用属性，从而提高了网页制作的 效率，如图2-8所示。
图2-8 “属性”面板
2.1.2 Dreamweaver软件界面
“属性”面板上面是标签选择器，这里显示环绕 当前选定内容的标签的层次结构。单击该层次结构 中的任何标签可以选择该标签及其全部内容。
图2-2 Adobe Dreamweaver CS6窗口
2.1.2 Dreamweaver软件界面
Dreamweaver CS6工作窗口,如图2-3所示。
菜单栏
插入工具栏
工作区切换器
文档工具栏
标签选择器
文档编辑区 属性面板
Dreamweaver基础教程
提供了表单作为网站与访问者之间交流信息的主要工具。
表单工作的基本过程如下： （1）访问者在浏览有表单的网页时，可填写必须的信息，然后按某个按钮提交信息。 （2）这些信息通过Internet传送到服务器上。 （3）服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要
<ol start=5> <li>Today <li>Tommorow </ol> 显示结果如下： 5. Today 6. Tommorow
5.3 处理基本网页元素
5.3.3图像处理
1.插入图像 2.设置图像的属性
5.3 处理基本网页元素
5.3.4超级链接
1.创建文档链接 2.创建命名锚记链接
5.3 处理基本网页元素
5.3.5 表格
（1）布局视图
为了简化使用表格进行排版的过程，Dreamweaver MX提供了布
局视图。在布局视图中，用户可以使用表格作为基础结构来设 计网页，避免了使用传统的方法创建基于表格的页面布局经常 出现的一些难题。在布局视图中，用户可以在页面上方便地绘 制布局单元格，然后将这些单元格移动到所需的位置。
<font>……</font>属性：size=“”;color=“”;face=“” Face属性给出了一个用逗号分隔的字体样式列表。
②设置文本的大小
Size的值是1－7级，默认是3级，可以在当前级的基础上增大或减小。
③设置文本的颜色 ④设置文本样式 示例
文本样式是指文本的显示方式，如加粗、倾斜、下划线等 <B>……</B>加粗 <i>……</i>斜体、 <u>…… </u>下划线 <strike>…… </strike>删除线 <sub>…… </sub>下标 <sup>…… </sup>上标
Dreamweaver的使用
注:① 空文档中ቤተ መጻሕፍቲ ባይዱ制表格时，表格自动
捕捉到页面窗口的左上角。 ② 层单元格回自动捕捉附近的单元 格边界，按住alt键可暂时消除该 功能 ③ 布局表格中可嵌套布局表格和单 元格，布局单元格中无法嵌套
§ Dreamweaver MX的网页定位技术 的网页定位技术
六、层表格和层的使用 3、分割层表格 点击工具条“布局”—“布局单元格” 4、移动和调整布局表格和单元格 5、为布局单元格添加内容 6、格式化布局单元格和布局表格
§一般网页的设计与制作 三、一般网页的设计与制作 4、水平线的插入 方法： •菜单“插入”—“HTML”—”水平线” •工具栏“HTML”—”水平线”图标 注:dreamweaver中修改水平线的颜色 使用属性栏中的快速属性编辑器
§ 一般网页的设计与制作 三、一般网页的设计与制作 5、插入版权和日期 方法：工具栏“常用”—“日期”图标 6、图象插入及图文混编 图片格式：JPG、GIF、PNG、BMP、SWF
§ Dreamweaver MX的网页定位技术 的网页定位技术
六、层表格和层的使用 1、概述 层表格利用层布局网页，最后生成 表格的HTML代码;Layer是真正的层，是 网页定位技术中的高级技术。 2、插入层表格 切换网页到布局视图下 点击工具条“布局”—“布局表 格”/“布 局单元格”
§ Dreamweaver MX的网页定位技术 的网页定位技术
§ Dreamweaver 样式表
五、css静态滤镜的使用 静态滤镜的使用 （二）例子演示 1、文字光晕效果 Glow 2、文字阴影效果 DropShow 3、文字动感效果 Blur
§ 5、Dreamweaver 动态网页设计 、
一、表单的制作 1、基本表单的建立 2、表单数据的提交 提交方式： get:在地址拦能看到表单的数 据，数据长度有限，速度快 post：在地址栏看不到，数据 长度不限，速度相对慢
网页设计与制作第2章 dreamweaver MX基本操作
2.2.2页面属性的设置
2.3在网页中加入文本
2.3.1插入文本
直接输入或者通过复制
2.3.2通过属性面板对字体进行设置 输入特殊字符； 输入一个空格：按SPACE键 连续输入多个空格： CTR+SHIFT+SPACE 换行：SHIFT+ENTER 分段：ENTER 添加并编辑水平线； 插入日期； 2.3.2让文本更具个性 2.3.3结合实例讲解
2.4.1网页的色彩
5．网页色彩搭配的技巧
用一种色彩。这里是指先选定一种色彩，然 后调整透明度或者饱和度，（说得通俗些就 是将色彩变淡或则加深），产生新的色彩， 用于网页。这样的页面看起来色彩统一，有 层次感。 用两种色彩。先选定一种色彩，然后选择它 的对比色（在photoshop里按ctrl+shift+I）。 用一个色系。简单的说就是用一个感觉的色 彩，例如淡蓝、淡黄、淡绿；或者土黄、土 灰、土蓝。 用黑色和一种彩色。比如大红的字体配黑色 的边框感觉很“跳”。
2.4.1网页的色彩
用排列组合方法计算：256*256*256=16 777 216，总共可以得到16 77 216种RGB颜 色，这是理论上的。在实际中，只有216种 颜色能在浏览器中正常显示。多于这个范围 的颜色，有的浏览器显示时可能发生偏差， 不能正常显示。因此，我们将能被所有浏览 器正常显示的216种颜色称为网页安全色。 Dreamweaver中提供了具有网页安全颜色范 畴的调色板，使网页的颜色选取控制在安全 范围之内。 这216种颜色除黑色和白色外，其他全部属 于彩色范畴。网页制作是用彩色还是非彩色 好呢？其实只要运用的合理，都能达到好的 效果。 我们通常的做法是：主要内容文字用非彩色 （黑色），边框，背景，图片用彩色。这样 页面整体不单调，看主要内容也不会眼花。
网页设计Dreamweaver教案
网页设计Dreamweaver教案第一章：Dreamweaver简介1.1 课程目标了解Dreamweaver的发展历程和版本更新掌握Dreamweaver的基本功能和操作界面熟悉Dreamweaver在网页设计中的应用场景1.2 教学内容Dreamweaver的起源和发展历程Dreamweaver的版本更新及特点Dreamweaver的操作界面及功能介绍Dreamweaver在网页设计中的应用案例1.3 教学方法讲授与示范相结合，让学生了解Dreamweaver的发展历程和版本更新实践操作，让学生掌握Dreamweaver的基本功能和操作界面案例分析，让学生熟悉Dreamweaver在网页设计中的应用场景1.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例1.5 教学评估课后作业：让学生制作一个简单的网页，巩固所学内容课堂讨论：引导学生分享自己在网页设计中使用Dreamweaver的经验和心得第二章：创建和管理网页2.1 课程目标掌握Dreamweaver的网页创建和管理功能熟悉网页编辑区的基本操作了解网页、描述和关键词的设置方法2.2 教学内容Dreamweaver的网页创建和管理功能介绍网页编辑区的基本操作网页、描述和关键词的设置方法2.3 教学方法讲授与示范相结合，让学生掌握Dreamweaver的网页创建和管理功能实践操作，让学生熟悉网页编辑区的基本操作案例演示，让学生了解网页、描述和关键词的设置方法2.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例2.5 教学评估课后作业：让学生创建一个简单的网页，并设置网页、描述和关键词课堂讨论：引导学生分享自己在网页设计中关于网页、描述和关键词设置的经验和心得第三章：编辑和排版文本3.1 课程目标掌握Dreamweaver中文本的编辑和排版功能熟悉字体、颜色、大小和样式的设置方法了解文本对齐、行间距和段落格式的设置方法3.2 教学内容Dreamweaver中文本的编辑和排版功能介绍字体、颜色、大小和样式的设置方法文本对齐、行间距和段落格式的设置方法3.3 教学方法讲授与示范相结合，让学生掌握Dreamweaver中文本的编辑和排版功能实践操作，让学生熟悉字体、颜色、大小和样式的设置方法案例演示，让学生了解文本对齐、行间距和段落格式的设置方法3.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例3.5 教学评估课后作业：让学生编辑和排版一个文本内容丰富的网页课堂讨论：引导学生分享自己在网页设计中关于文本编辑和排版的经验和心得第四章：添加图像和媒体元素4.1 课程目标掌握Dreamweaver中图像和媒体元素的操作功能熟悉图像和媒体元素的插入、编辑和格式设置方法了解图像和媒体元素在网页设计中的应用场景4.2 教学内容Dreamweaver中图像和媒体元素的操作功能介绍图像和媒体元素的插入、编辑和格式设置方法图像和媒体元素在网页设计中的应用场景4.3 教学方法讲授与示范相结合，让学生掌握Dreamweaver中图像和媒体元素的操作功能实践操作，让学生熟悉图像和媒体元素的插入、编辑和格式设置方法案例分析，让学生了解图像和媒体元素在网页设计中的应用场景4.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例4.5 教学评估课后作业：让学生添加图像和媒体元素到一个网页中，提升网页视觉效果课堂讨论：引导学生分享自己在网页设计中关于图像和媒体元素应用的经验和心得第五章：创建和应用超5.1 课程目标掌握Dreamweaver中超的创建和应用功能熟悉超的类型和创建方法了解超的目标设置和命名规则5.2 教学内容-第六章：表格和布局6.1 课程目标掌握Dreamweaver中表格的创建和编辑功能熟悉表格的布局和样式设置方法了解表格在网页设计中的应用场景6.2 教学内容Dreamweaver中表格的创建和编辑功能介绍表格的布局和样式设置方法表格在网页设计中的应用场景6.3 教学方法讲授与示范相结合，让学生掌握Dreamweaver中表格的创建和编辑功能实践操作，让学生熟悉表格的布局和样式设置方法案例分析，让学生了解表格在网页设计中的应用场景6.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例6.5 教学评估课后作业：让学生创建一个表格布局的网页，展示信息列表课堂讨论：引导学生分享自己在网页设计中关于表格布局的经验和心得第七章：表单和动画7.1 课程目标掌握Dreamweaver中表单的创建和编辑功能熟悉表单元素和属性的设置方法了解动画在网页设计中的应用场景和创建方法7.2 教学内容Dreamweaver中表单的创建和编辑功能介绍表单元素和属性的设置方法动画在网页设计中的应用场景和创建方法7.3 教学方法讲授与示范相结合，让学生掌握Dreamweaver中表单的创建和编辑功能实践操作，让学生熟悉表单元素和属性的设置方法案例分析，让学生了解动画在网页设计中的应用场景和创建方法7.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例7.5 教学评估课后作业：让学生创建一个包含表单和动画的网页，实现用户互动课堂讨论：引导学生分享自己在网页设计中关于表单和动画应用的经验和心得第八章：CSS样式和模板8.1 课程目标掌握Dreamweaver中CSS样式的创建和应用功能熟悉CSS选择器和属性的设置方法了解模板在网页设计中的应用场景和创建方法8.2 教学内容Dreamweaver中CSS样式的创建和应用功能介绍CSS选择器和属性的设置方法模板在网页设计中的应用场景和创建方法8.3 教学方法讲授与示范相结合，让学生掌握Dreamweaver中CSS样式的创建和应用功能实践操作，让学生熟悉CSS选择器和属性的设置方法案例分析，让学生了解模板在网页设计中的应用场景和创建方法8.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例8.5 教学评估课后作业：让学生创建一个CSS样式和模板应用的网页，提升网页美观度课堂讨论：引导学生分享自己在网页设计中关于CSS样式和模板应用的经验和心得第九章：网站发布和管理9.1 课程目标掌握Dreamweaver中网站的发布和管理功能熟悉FTP协议和网站方法了解网站维护和优化的基本方法9.2 教学内容Dreamweaver中网站的发布和管理功能介绍FTP协议和网站方法网站维护和优化的基本方法9.3 教学方法讲授与示范相结合，让学生掌握Dreamweaver中网站的发布和管理功能实践操作，让学生熟悉FTP协议和网站方法案例分析，让学生了解网站维护和优化的基本方法9.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例9.5 教学评估课后作业：让学生将所学网页发布到服务器，进行实际操作课堂讨论：引导学生分享自己在网站发布和管理中的经验和心得第十章：网页设计案例分析10.1 课程目标分析实际网页设计案例了解网页设计中的创新点和不足之处提高学生网页设计的能力和审美水平10.2 教学内容分析实际网页设计案例讨论网页设计中的创新点和不足之处提高学生网页设计的能力和审美水平10.3 教学方法讲授与示范相结合，让学生分析实际网页重点和难点解析1. 章节一和二：Dreamweaver简介和创建与管理网页重点解析：理解Dreamweaver的历史和发展，熟悉其操作界面和基本功能，以及如何有效地创建和管理网页。
《Dreamweaver网页设计》教案
《Dreamweaver网页设计》教案一、教学目标1. 了解Dreamweaver的基本功能和操作界面。
2. 学会使用Dreamweaver创建、编辑和管理网页。
3. 掌握Dreamweaver中的基本标签和属性。
4. 学会使用Dreamweaver的布局功能进行网页设计。
5. 掌握Dreamweaver的预览和发布网页的方法。
二、教学内容1. Dreamweaver的基本功能和操作界面介绍Dreamweaver的启动和关闭方法，熟悉Dreamweaver的操作界面，包括菜单栏、工具栏、状态栏等。
2. 创建、编辑和管理网页学习创建新网页的方法，编辑网页的内容，删除和复制网页元素，以及管理网页的打开和保存。
3. 基本标签和属性介绍HTML基本标签，如标签、段落标签、图片标签等，并学习如何使用这些标签在Dreamweaver中创建和编辑网页内容。
4. 布局功能学习使用Dreamweaver的布局功能，包括表格、框架和Div标签，进行网页的设计和排版。
5. 预览和发布网页学习在Dreamweaver中预览网页的方法，以及如何将网页发布到互联网上。
三、教学方法1. 讲授法：讲解Dreamweaver的基本功能、操作界面和基本标签。
2. 演示法：展示如何使用Dreamweaver进行网页设计和排版。
3. 练习法：让学生动手实践，创建和编辑网页。
4. 提问法：引导学生思考和解决问题。
四、教学步骤1. 启动Dreamweaver，熟悉操作界面。
2. 创建新网页，学习编辑网页内容。
3. 学习使用基本标签，如、段落和图片标签。
4. 练习使用表格、框架和Div标签进行网页布局。
5. 预览和保存网页，了解发布网页的方法。
五、教学评价1. 课后作业：让学生独立完成一个简单的网页设计，检验对Dreamweaver的掌握程度。
2. 课堂练习：在课堂上让学生动手实践，实时评价学生的操作能力。
3. 学生互评：让学生互相评价，促进学习交流。
网页dreamweaver知识点总结
网页dreamweaver知识点总结Adobe Dreamweaver是一款强大的网页设计和开发工具，它可以帮助用户设计和开发具有吸引力和交互性的网站。
它提供了许多功能和工具，使用户能够轻松创建和编辑网页，并且还支持多种编程语言，包括HTML、CSS、JavaScript和PHP等。
在本篇文章中，我们将为您总结Dreamweaver的一些核心知识点，包括界面、基本功能、网页设计技巧和常用操作等方面。
一、Dreamweaver界面1. 主界面：Dreamweaver的主界面包括菜单栏、工具栏、属性面板、文档窗口和文件管理器等部分。
菜单栏包含了各种功能和命令，工具栏包含了常用的工具，属性面板用于设置元素的各种属性，文档窗口用于显示当前编辑的网页，文件管理器用于管理项目中的各种文件。
2. 工作区布局：Dreamweaver的工作区布局可以根据用户的需要进行调整，比如可以拖动和调整各个面板的大小和位置，以便更好地适应实际的工作需求。
3. 代码视图和设计视图：Dreamweaver提供了代码视图和设计视图两种视图，代码视图用于编辑和查看网页的源代码，设计视图用于直观地编辑和查看网页的布局和样式。
二、基本功能1. 新建网页：在Dreamweaver中新建网页可以使用模板、站点管理器或者手动创建空白页面等方式，根据需要选择合适的方法进行操作。
2. 编辑网页：Dreamweaver提供了强大的编辑功能，包括文字编辑、图像编辑、样式编辑和布局编辑等，用户可以方便地对网页进行各种编辑操作。
3. 管理文件：Dreamweaver内置了文件管理器，可以方便地对项目中的各种文件进行管理，包括创建、删除、复制、粘贴和移动等操作。
4. 预览网页：在Dreamweaver中可以随时预览正在编辑的网页，以便更好地了解网页的效果和交互性。
5. 发布网页：Dreamweaver还提供了网页发布功能，用户可以方便地将网页上传到服务器或者本地目录中进行保存。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2.1初识dreamweaver MX 2004 2.2站点的创建与页面属性设置aver MX 2004
2.1.1 dreamweaver MX 2004工 作界面介绍 2.1.2网页的创建和保存
2.1.3网页的修改与预览
网页的打开；跟其他软件打开文档相似。 网页的创建：直接创建空白文档；通过模 板创建有格式的网页文档。 网页的保存：直接保存；另存为…。
命名注意：
最好做到“见名知义”，看到名字就知道网页里的相应内 容； 名字最好用英文字母或是以RGB方式来表示颜色的， RGB是Red、Green、Blue的缩写。 RGB颜色包括几百万种之多，这么多 的颜色却有一个共同点，就是都由红、 绿、蓝这3种基色调和而成，这3种基 色中每一种颜色的饱和度和透明度都 是可以变化的，取值范围为0—255， 例如，红色表示为Red100%， Green0%，Blue0%，简单的表示法 为（255，0，0），用十六进制数值 来表示就是“FF0000”，在HTML语言 中我们直
2.4.1网页的色彩 2.4.2网页中图象的格式 2.4.3在网页中插入图象 2.4.4设置图象属性 2.4.5鼠标经过图象 2.4.6图象占位符 牛牛文档分享2.4.1网页的色彩
2.3在网页中加入文本
2.3.1插入文本
直接输入或者通过复制
2.3.2通过属性面板对字体进行设置 输入特殊字符； 输入一个空格：按SPACE键 连续输入多个空格： CTR+SHIFT+SPACE 换行：SHIFT+ENTER 分段：ENTER 添加并编辑水平线； 插入日期； 2.3.2让文本更具个性 2.3.3结合实例讲解 牛牛文档分享2.4.1网页的色彩
用排列组合方法计算：256*256*256=16 777 216，总共可以得到16 77 216种RGB颜 色，这是理论上的。在实际中，只有216种 颜色能在浏览器中正常显示。多于这个范围 的颜色，有的浏览器显示时可能发生偏差， 不能正常显示。因此，我们将能被所有浏览 器正常显示的216种颜色称为网页安全色。 Dreamweaver中提供了具有网页安全颜色范 畴的调色板，使网页的颜色选取控制在安全 范围之内。 这216种颜色除黑色和白色外，其他全部属 于彩色范畴。网页制作是用彩色还是非彩色 好呢？其实只要运用的合理，都能达到好的 效果。 我们通常的做法是：主要内容文字用非彩色 （黑色会眼花。
2.4.1网页的色彩
2．彩色的搭配
色环：我们将色彩按"红->黄->绿->蓝->红" 依次过度渐变，就可以得到一个色彩环。 色环的两端是暖色和寒色，当中是中型色。 如图2-6所示。 红.橙.橙黄.黄.黄绿.绿.青绿.蓝绿.蓝.蓝紫.紫. 紫红. /___________/ /____/ /_________/ /_________/ / / / / 暖色系 中性系 寒色系 中性系
拼音缩写：根椐页面的标题或主要内容，提取每个
英文缩写：这种方法也较难记忆，一般适用于专有
英文原文：这种方法准确、实用，最好的一种方法。
例：“公司简介”的页面命名为 “company_in性设置 牛牛文档分享2.4.1网页的色彩
3．色彩的心理感觉
不同的颜色会给浏览者不同的心理感受。 红色---是一种激奋的色彩。刺激效果，能使 人产生冲动，愤怒，热情，活力的感觉。 绿色---介于冷暖两中色彩的中间，显得和睦， 宁静，健康，安全的感觉。它和金黄，淡白 搭配，可以产生优雅，舒适的气氛。 橙色---也是一种激奋的色彩，具有轻快，欢 欣，热烈，温馨，时尚的效果。 黄色---具有快乐，希望，智慧和轻快的个性， 它的明度最高。 蓝色---是最具凉爽，清新，专业的色彩。它 和白色混合，能体现柔顺，淡雅，浪漫的气 氛（象天空的色彩:）
2.1初识dreamweaver MX 2004
2.1.2网页的创建和保存
文件名的开头不能使用数字、运算符等符号，文件名最 好不要使用中文，因为如果主机采用UNIX系统，中文 名会出错。文件的命名一般采用以下几种方法：
汉语拼音：这是最简单的命名方法，根椐页面的标
题或主要内容，提取两三个概况字，把它们的汉语拼音 作为文件名。例：“产品中心”页面，提取“产品”这 两个字的汉语拼音，因此文件名为“chanping.htm”。 汉字拼音的第1个字母作为文件名。 例：“留言簿”的拼音为“liuyanbo”，那么文件名为 “lyb.asp”。这种方法简单，但不带提示性，不便于日 后的维护。 名词。例：“Active Server Pages”这个专有名词一般 用ASP来代替。
2.4.1网页的色彩
1．非彩色的搭配 黑白是最基本和最简单的搭配，它们 以其特有的性质一直在艺术殿堂中占 有重要的地位，如中国的水墨画、黑 白摄影等艺术作品，给人一种质朴、 安逸、超脱的美感。但要把握好很难。 灰色是万能色，可以和任何彩色搭配， 也可以帮点
创建站点的第一步就是规划站点， 再通过DREAMWEAVER站点管理功 能创建站点的框架，包括主页、分支 页面和相应的文件夹等。将多个网页 文档链接起来就构成了站点，站点可 以小到一个网页，也可以大到整个网 站。
2.2.2页面属性的设置
wwLeabharlann 牛牛文档分享