第2章Dreamweaver基础PPT课件

合集下载

Dreamweaver快速入门PPT参考课件

（5）站点监测。
可以安全、高效地管理站点，保证编辑的文件与站点的同步，确保使用的文件是最新的。登记和注销功能可以跟踪使用这些文件的人，能够有效防止修改其他人的工作文件。
（6）Dreamweaver站点与远程服务器可以紧密结合。
Dreamweaver站点可以模拟服务器环境，可以保证制作和测试网页时，站
2021/3/10
授课：XXX
9
Dreamweaver中提供了3种视图：设计、代码和拆分。当要改变编辑视图时，只需单击对应按钮，即可转换到目标视图模式下。图中所示为单击“代码”按钮后切换到的代码视图。本书中大部分工作是在设计视图中完成的，因此在后面的学习中，可以单击“设计”按钮，切换到设计视图。
2021/3/10
授课：XXX
6
启动Dreamweaver后，Dreamweaver的起始页面中提供了一些常用操作命令。可以直接单击起始页中的目标按钮完成相关的操作，如新建文件等操作。
右侧的文件面板会列出上一次编辑的文件所在站点，因为这里是第一次打开 Dreamweaver，所以显示的是桌面。
2021/3/10
授课：XXX

（1）网站管理功能。 Dreamweaver不仅能够编辑网页，还能够实现本地站点与服务器站点之间的文件
同步。利用库、模板和标签等功能，可以进行大型网站的开发。对于需要多人维护的大型网站，拥有文件操作权限方面的限制，具有一定的安全保护功能。（2）多种视图模式。 Dreamweaver提供了代码、设计和拆分3种视图模式。设计视图可以满足用户的设计需求，即使不懂HTML语言，不会书写网页源代码，也能创建出漂亮的网页；代码视图可以直接以HTML等语言形式编写网页，能够对源代码进行精确控制；拆分

网页设计教程Dreamweaver电子课件第2章

2.7 目录结构规范
（6）如果有多个语言版本，最好分别位于不同的服务器上或存放于不同的目录中。
（7）多媒体文件存放在根目录下的media文件夹中。（8）目录层次不要太深，建议不要超过3层。（9）如果链接目录结构不能控制在3层以内，建议在页面里添加明确的导航信息，这样可以帮助浏览者明确自己所处的位置。（10）不要使用过长的目录名。
第2章创建本地站点
2.1 网站设计总体规划
2.1.1 确定网站的整体风格
2.1 网站设计总体规划
2.1.1 确定网站的整体风格
2.1 网站设计总体规划
2.1.2 创意设计
2.2 新建站点
2.2 新建站点
2.2 新建站点
2.2 新建站点
2.3 修改站点信息
选择 “站点”|“管理站点”，在打开的“管理站点”对话框中单击“编辑”按钮，此时将重新打开“mywebsite的站点定义为”对话框。单击其中的“高级”标签，切换到“高级”选项卡。
2.5.5 复制文件到站点内
2.6 文件目录命名规范
1. 不能使用中文 2. 最好使用小写 3. 不能使用特殊字符 4. 不推荐使用拼音命名 5. 合理使用下划线
2.6.1 文件和文件夹的命名
2.6 文件目录命名规范
首页的文件名也可以是default.asp，index.asp或 default.aspx，index.aspx。
2.5.1 新建网页
2.5 创建站点目录结构
2.5.2 文件和文件夹的改名
2.5 创建站点目录结构
课堂练习2.4 移动文件
2.5.3 移动文件和文件夹
2.5 创建站点目录结构
在站点管理器中.4 删除文件或文件夹

《DW基础知识》PPT课件

课堂实例―创建和测试第一个html网页
在“记事本”窗口或者Dreamweaver网页中输入以下内容：
<html> <head> <title>欢迎光临我的第一个网页</title> </head> <body> 这是第一个简单网页! </body> </html> 选择【文件】|【保存】命令，在弹出的“另存为”
描述图片的源文件提示文字设置图片的宽度设置图片的高度设置图片的边框垂直间距水平间距设置图片的对齐方式
文字标签
标签 <big> <code> <var> <s>
描述下划线粗体上标下标大字号小字号斜体等宽声明变量删除线
A、执行“站点/管理站点”命令，也可以使用快捷键F8打开站点面板来建立一个站点，然后单击“管理站点”按钮。执行命令后出现“管理站点”对话框，单击“新建”按钮，在弹出的菜单中选择“站点”。
B、设置站点名称：接着出现了一个建立站点的向导，设置好站点的名字后单击“下一步”按钮。（输入你想要的站点名称，这里输入home，其实可以任意输入名称的，要注意的是，尽量不要用中文命名，以免出现意想不到的麻烦！）
工作区设置对话框
首选参数对话框
（3）dw的窗口组成（参看教材p5-p9）
插入栏：又叫插入对象面板；状态栏：提供了标签选择器（也叫做标记符选择器）、窗口尺寸、文件大小等网页信息
（4）dw菜单简介

网页制作第二章Dreamweaver基础知识共58页PPT资料

图3-4
图3-5 图3-6 图3-7 图3-8 图3-9
文档工具栏
该栏中放置了“文档”窗口视图（如设计视图、代码视图、设计和代码混合视图）按钮、标题设置框和文档管理（如在浏览器中预览网页）等按钮，如图3-10所示。
“文档”窗口视图各按钮的含义如下。

：单击该按钮可以切换到“代码”视图中。“代
第2章 Dreamweaver基础知识
课前导读课堂讲解上机实战课后练习
课前导读
基础知识重点知识提高知识
基础知识
Dreamweaver MX 2019的工作界面。
重点知识
Dreamweaver MX 2019的工具面板及属性面板的使用。
提高知识
Dreamweaver MX 2019中创建一般页面的方法。
“文件”菜单 “编辑”菜单 “视图”菜单 “插入”菜单
“修改”菜单 “文本”菜单 “命令”菜单 “站点”菜单 “窗口”菜单 “帮助”菜单
“文件”菜单
“文件”菜单中包含网页文件操作的基本
项目，如网页文件的新建、打开、保存、关闭、
浏览、导入以及导出等，选择相应的命令即可执
图3-12 图3-13
标签选择器
标签选择器显示了一些常用的HTML标签，灵活运用这些标签可大大降低设计人员的工作量。比如想选择表格中的某一行，则可通过单击标签选择器中的标签快速选择，如图3-14所示。
图3-14
菜单概述
除了掌握Dreamweaver MX 2019的操作界面外，还应该熟悉Dreamweaver MX 2019的命令。在实际的制作过程中，有许多操作是需要命令来完成的，下面就网页制作中常用的一些菜单及命令进行简单的介绍。

Dreamweaver 使用入门32页PPT

Dreamweaver 使用入门
1、纪律是管理关系的形式。——阿法纳西耶夫 2、改革如果不讲纪律，就难以成功。
3、道德行为训练，不是通过语言影响，而是让儿童练习良好道德行为，克服懒惰、轻率、不守纪律、颓废等不良行为。 4、学校没有纪律便如磨房里没有水。 ——夸美纽斯
5、教导儿童服从真理、服从集体，养成儿童自觉的纪律性，这是儿童道德教育最重要的部分。—— 陈鹤琴
按对应的协议类型端口有两种：TCP UDP
计算机常用端口
9
Dreamweaver MX 2004
一款用于设计、开发网站和 Web 应用程序的专业HTML 编辑器
用户可以选择使用布局单元格或框架来设计页面的布局
可用于创建文本、插入动态图像、提供网页超链接、创建 Flash 文本和 Flash 按钮等
second.html
绝对链接
mypersonalsite/photoalbum/birthdaysalbu
m/second.html
文档相对链接
23
birthdaysalbum/second.html
创建超级链接
Dreamweaver 帮助您将页面元素（如文本、图像和按钮等）链接到其他文档（如 HTML 文件、图像和视频等）
4
万维网 2-1
Web 服务器
<HTML> <HEAD> ………… </HEAD> <BODY ………… </BODY> </HTML>
5
站点地址或 URL
协议
客H户TM端L语言用•于用制于作访网问页Web 上资源的一组规则
• HTTP 是 Web 协议

dreamweaver课件ppt

它们来划分网页的区域。
框架布局
03
介绍如何使用框架来布局网页，包括如何在框架中嵌套其他元素，以及如何使用框架来实现
复杂的页面布局。
框架样式
02
介绍如何使用CSS来控制框架的外观，包括边框、间距、背景色等。
框架数据
04
介绍如何使用框架来展示数据，包括如何在框架中嵌入其他网页或网页元素，以及如何使用
Dreamweaver支持多种编程语言，包括HTML、CSS、 JavaScript等，并提供了丰富的插件和扩展，以帮助开发者提高工作效率。
Dreamweaver的历史与发展
Dreamweaver自1997年首次发布以来，已经经历了多个版本的更新和改进。
目前，Dreamweaver已经成为一款功能强大、易用性强的网页设计和开发软件，被广泛应用于网页设计和开发领域。
框架来实现数据的展示和交互。
04
网站开发与管理
网站的规划与设计
确定网站目标和定位
在规划阶段，需要明确网站的目的和定位，考虑网站的用户群体、功能需求和内容构成。
网站布局与风格设计
根据目标用户的需求和喜好，进行网站的整体布局和风格设计，包括色彩搭配、字体选择和页面元素布局。
网站导航与信息架构
设计易于理解和操作的导航系统，以及清晰的信息架构，以便用户快速找到所需内容。
等，以及如何创建这些元素。
表单验证
讲解如何使用JavaScript进行表单验证，包括验证用户输入的内容是否符合要求，以及如何处理表单提交等。
表单提交
介绍如何将表单数据提交到服务器，包括使用POST和GET方法进行提交，以及如何处理表单提交的响应等。
数据库的连接与操作

第2章Dreamweaver CS6基础入门

2.3 使用DreamWeaver CS6制作简单网页 2.3.2 HTML基础
（1）通常HTML页面均以DOCTYPE开始，它声明文档的类型，且之前不能有任何内容（包括换行符和空格），否则将使文档声明无效。如果缺少DOCTYPE会导致文件在浏览器中显示不正常。文档的结构说明（2）接着是<html>标记，以</html>结束。结构中包含三个顶层标签：<html>、 <head>和<body>。文档以<html>开始，以</html>结束，<head>和<body>嵌入其中。（3）在<head>和</head>标记的内容是文档头，用于描述页面的头部信息。所有在<head>和</head>标记之间的内容都是不会显示在页面上的。（4）<body>和</body>之间的内容是文档体，是HTML的主要部分，它包括了文件所有的实际内容和绝大多数标记符号。页面上显示的任何东西都包含在这两个标记之中。。
文化动态嘉州画派
嘉州文化长廊网站首页
民间艺术
乌木文化
佛教文化
旅游文化
饮食文化
2.2 Dreamweaver CS6站点建设与管理 2.2.2 网站站点规划与创建
网站结构设计好后，为了让网站管理方便，还需要规划网站的目录结构。网站的目录是指用于存放网站相关文件的文件夹。
2.3 使用DreamWeaver CS6制作简单网页 2.3.3 CSS基础
介绍
CSS（Cascading Style Sheet，层叠样式表）简称样式表，用于为网页文档中的元素添加各种样式，如字体大小、背景颜色、边框设置、列表格式等，起到了网页文档的美化作用。 CSS是将格式规则存放在样式表中，网页通过对样式表的引用为目标区域的元素添加样式。

dreamweaver课件.ppt

打开“外观”选项卡，在其中可设置各菜单项的外观以及菜单项文本的字体。
电脑基础·实例·上机系列丛
清华大学出版社
Dreamweaver中文版网页制作教程
3． “高级”选项卡
打开“高级”选项卡设置各菜单项的单元格属性。
电脑基础·实例·上机系列丛
清华大学出版社
Dreamweaver中文版网页制作教程
“行为”菜单中选择“显示弹出式菜单”命
令，打开“显示弹出式菜单”对话框，其中
包括“内容”、“外观”、“高级”和“位
电脑置基”础4·实个例选·上项机卡系列。丛
清华大学出版社
Dreamweaver中文版网页制作教程
12.4.5 显示弹出式菜单
1．“内容”选项卡 2． “外观”选项卡 3． “高级”选项卡 4． “位置”选项卡
12.1.2 事件
onFinish onHelp onKeyDown onKeyPress。 onKeyUp onLoad onMouseDown onMouseUp
电脑基础·实例·上机系列丛
清华大学出版社
Dreamweaver中文版网页制作教程
12.1.2 事件
onMouseMove onMouseOut onMousOver onMouseWheel onMove onPropertyChange
电脑基础·实例·上机系列丛
清华大学出版社
12.1
Dreamweaver中文版网页制作教程
行为简介
通过行为可以在页面上制作一些简单的交互效果，行为是Macromedia预置的JavaScript程序库。行为能实现用户与网页间的交互，通过某个动作来触发某项计划。Dreamweaver MX 2004内置了21种行为，都是一些比较常用的功能。如果用户有较高的JavaScript编写能力也可以自己编写行为。

第2章 Dreamweaver入门

第2章Dreamweaver入门2.1制作简单页2.1.1 站点的建立及规划用户设计的网页和相关素材，一般都要求放在同一个文件夹内，这样方便对网站进行维护和管理，特别是将网站发布到服务器上时，这点尤其重要。

我们建立站点的目的也在于此。

因此，大家在使用Dreamweaver软件设计制作网页之前，应先将站点建立好，同时将做好的网页全都保存在这一个站点内。

1．建立站点目录1）在E盘根目录下新建文件夹，命名为AABBB（其中AA为座号，BBB为姓名，例：01张三）做为站点文件夹。

注意：这里站点文件夹名可以为中文。

2）在此新文件夹（AABBB）里新建三个文件夹，分别取名为Files（存放除首页外的网页文件）、Images(主要存放图片)、Other(主要存放flash动画、声音等其它类型的文件)。

注意：站点文件夹里所有的文件夹或文件一般不用中文，而用拼音或英文表示。

2．定义站点01）打开Dreamweaver软件。

02）选择菜单命令[站点→管理站点…]；单击→站点；在弹出对话框中，选择“高级”选项卡，如下左图2-1所示。

→图2-1 图2-203）输入“站点名称”（可以自己定义，一般要与网站主要内容或名字有关）；选择“本地根文件夹”为刚才新建的文件夹（AABBB）。

如上右图2-2所示。

注意：这里“本地根文件夹”的选择，不要选择到Files、Images、Other其中之一。

04）单击确定后，回到“管理站点”对话框，如下左图2-3所示。

单击“完成”，屏幕右边出现如下右图2-4所示的面板。

2.1.2 第一页（站长简介，Resume.htm ）的制作1．初始01）菜单命令[文件新建]，弹出如下图2-5所示的“新建文档”窗口，选择“基本页”。

02）单击“创建”，进入如下图2-6所示编辑页面。

图2-3 图2-4 图2-5其中，为常用工具条；单击，进入代码视图；单击，进入代码和设计视图；目前属，即设计视图。

图2-62．保存文档03）菜单命令[文件→保存…]，保存在Files文件夹下，保存名为“Resume.htm”（此页我们要存放个人的简历信息）。

第二章Dreamweaver网页设计技术

用布局单元格在布局表格中进行详细设计，产生组成网格的行和列。布局单元格可以占据数行数列，但不能相互重叠。如果两个布局单元格离的太近，系统会自动将两个单元格靠齐以维持不重叠的结构。如图所示。
用布局表格设计页面举例，如图所示。
2.6 层的使用
层可以放在网页任何位置，比表格更灵活，常用来作为表格的补充。层中不但可以插入文本、图像、表格等对象，还可以在层中嵌套层。
2.保存文档
“文件”菜单→“保存”→选择与逻辑站点相关联的本地站点（如： e:\weblx）→为文件起名→单击“保存”→在Dreavweaver站点面板中单击刷新按钮。可以看到新建的文件被显示在站点面板中。
3.页面属性
“修改”菜单→“页面属性”，打开“页面属性”对话框，如图所示.
4.使用CSS样式格式化文本
4. 用布局模式布局页面
布局表格用来完成稍微复杂一点的页面布局，还可以与标准表格相互转换。先用布局表格给页面划分大的区域，再用布局单元格对页面做细致的划分。如图所示。
（1）绘制布局表格和嵌套的布局表格
最外层的布局表格只能上下排列，嵌套的布局表格可以上下左右排列。如图所示。
（2）绘制布局单元格
(4) 拆分单元格
单击一个单元格→“修改”菜单→“表格”→“拆分单元格”→在对话框中定义拆分的行数或列数，或单击属性面板中的“拆分单元格”按钮。 (5) 使用剪切、复制、粘贴命令对所选单元格进行操作，能保留单元格
的格式设置。
3. 设置表格属性选定表格后，在表格的属性面板中设置表格属性。如图所示。
2.文档位置和路径超链接有3种类型：绝对路径、相对路径和基于站点的相对路径。 (1)如果超链接路径中包含所使用的协议，而且与链接源点所处位置无关，称这种链接路径为绝对路径，例如，一个使用http协议的绝对路径可以写为：/index.htm。 (2)如果超链接路径描述源点与锚点相对位置，也就是由当前文件所在位置引起的路径，称这种连接路径为相对路径。使用相对路径的站点结构和文档相对位置不变，整个本地站点上传到服务器时文档之间的链接关系不变。所以，提倡使用相对路径。 (3)从站点根目录开始的路径称为站点根目录相对路径，提供从站点文件夹到文档的路径，与起始端点的位置无关，用斜线“/”表示站点根目录。例如：/liran/index.htm。这种路径能够保持站点结构和文档相对位置不变，也被提倡使用。

dreamweaver 课件

详细描述
通过个人网站制作实例，学习者可以学习如何展示个人风格和兴趣，从页面布局、色彩搭配到内容编辑，全面提升个人网站的专业度。
企业网站制作实例
总结词
传达企业文化和价值观
详细描述
企业网站制作实例可以帮助学习者了解如何有效地传达企业文化和价值观，通过专业的页面设计和功能开发，提升企业形象和市场竞争力。
它支持 HTML、CSS、JavaScript 等多种网页开发技术，并且具有强大的代码编辑和调试功能，可以帮助开发者提高开发效率和网页质量。
Dreamweaver 的历史与发展
Dreamweaver 的前身是 Macromedia 的 HomeSite，它是一款基于文本的网页编辑器。随着网页设计和开发技术的不断发展，HomeSite 逐渐演变为更加可视化和功能丰富的 Dreamweaver。
Dreamweaver 课件
目录
• Dreamweaver 简介 • Dreamweaver 基本操作 • CSS 和 HTML 在 Dreamweaver
中的运用 • 动态网页制作 • 实例和案例分析
01
Dreamweaver 简介
什么是 Dreamweaver
Dreamweaver 是一款由 Adobe 公司开发的网页设计和开发软件，它提供了可视化的设计和编辑工具，使开发者能够快速创建和编辑网站和网页。
电子商务网站制作实例
总结词
实现商品展示和在线交易
VS
详细描述
通过电子商务网站制作实例，学习者可以学习如何实现商品展示和在线交易功能，包括产品详情页设计、购物车系统开发等，为消费者提供便捷的购物体验。
学习心得和总结
总结词
提升技能和经验