Dreamweaver cs6 标准实例教程课件第1章Dreamweaver CS6概述
合集下载
Dreamweaver CS6网页设计与制作标准教程 (1)
网页是网站建设的基础，早期的网站一般都是由静态网页制作的。 静态网页是相对于动态网页而言，是指没有后台数据库、不含程序 和不可交互的网页。静态网页相对更新起来比较麻烦，适用于一般 更新较少的展示型网站。静态也不是完全静态，也可以出现各种动 态的效果，如GIF格式的动画、FLASH、滚动字幕等。
静态网页的主要特点如下：
据库与Web服务器的信息交互，由后台数据库提供实时数据更新 和数据查询服务。网页的后缀名一般根据不同的程序设计语言而有 所不同，如常见的有.asp、.jsp、.php、.perl、.cgi等。动态网页 能够根据不同时间和不同访问者而显示不同内容。如常见的BBS、 留言板和购物系统通常用动态网页实现。动态网页的制作比较复杂， 需要用到ASP、PHP、ISP和等专门的动态网页设计语言。
各种企业和业务信息。随着信息时代的到来，企业网站作为企业的
1.2 网站建设基本流程
前期准备工作 方案实施 后期工作
1.2.1 前期准备工作
在网站制作之前，需要对与项目相关的互联网市场进行调查 和分析，同时收集各种相关的信息和资料，为网站建设提供必要的
前期数据，为决策提供依据。
市场调研与分析
明确网站定位
收集信息和素材
1.2.2 方案实施
在方案实施过程中，根据前期准备工作，具体规划网站的栏 目和布局、页面设计风格和外观效果；确定网站所使用的各种技术，
议，即“超文本传输协议”，因此通常网页的地址都以“ http://”
开头。
路径结构图
1.1.3 服务器与浏览器
访问的具体过程简单来说，就是当访问网页的人的计算机连入
Internet 后，通过浏览器发出访问某个站点的请求，然后这个站点
的服务器就把信息传送到用户的浏览器上，也就是将文件下载到本 地的计算机，浏览器再显示出文件内容，这样用户就可以坐在家中 查询千里之外的信息了。
静态网页的主要特点如下：
据库与Web服务器的信息交互，由后台数据库提供实时数据更新 和数据查询服务。网页的后缀名一般根据不同的程序设计语言而有 所不同，如常见的有.asp、.jsp、.php、.perl、.cgi等。动态网页 能够根据不同时间和不同访问者而显示不同内容。如常见的BBS、 留言板和购物系统通常用动态网页实现。动态网页的制作比较复杂， 需要用到ASP、PHP、ISP和等专门的动态网页设计语言。
各种企业和业务信息。随着信息时代的到来，企业网站作为企业的
1.2 网站建设基本流程
前期准备工作 方案实施 后期工作
1.2.1 前期准备工作
在网站制作之前，需要对与项目相关的互联网市场进行调查 和分析，同时收集各种相关的信息和资料，为网站建设提供必要的
前期数据，为决策提供依据。
市场调研与分析
明确网站定位
收集信息和素材
1.2.2 方案实施
在方案实施过程中，根据前期准备工作，具体规划网站的栏 目和布局、页面设计风格和外观效果；确定网站所使用的各种技术，
议，即“超文本传输协议”，因此通常网页的地址都以“ http://”
开头。
路径结构图
1.1.3 服务器与浏览器
访问的具体过程简单来说，就是当访问网页的人的计算机连入
Internet 后，通过浏览器发出访问某个站点的请求，然后这个站点
的服务器就把信息传送到用户的浏览器上，也就是将文件下载到本 地的计算机，浏览器再显示出文件内容，这样用户就可以坐在家中 查询千里之外的信息了。
Dreamweaver CS6入门课件
时代码”视图显示浏览器用于执行该页面的实际代码，当
在“实时”视图中与该页面进行交互时，它可以动态变化。 第 3
“实时代码”视图不可编辑。
页
1 DREAMWEAVER的工作界面
精
多屏幕：借助“多屏幕预览”面板，为智能手机、平板电脑和 台式机进行设计。使用媒体查询支持,为各种不同设备设计样式 并将呈现内容可视化。（查看页面，就如同页面在不同尺寸的 屏幕中显示。）
“文件”等面板独立显示，适合对网页的调试和修改。
第 10
页
精
2 站点的搭建与管理
Dreamweaver的站点是一种管理网站中所有相关联 文件的工具。通过站点可以对网站的相关页面及各 类素材进行统一管理，还可以以使用站点管理实现 将文件上传到网页服务器，测试网站。
站点简单的说就是一个文件夹。在这个文件夹里包 含了网站中所有用到的文件。我们通过这个文件夹 （站点），对我们的网站进行管理，有次序，一目 了然。
这些面板集中了网页编辑和站点管理中常用的工具 按钮。这些面板被集中到面板组中，每个面板都可 以展开或折叠，并且可以和其他面板一起或取消停 靠。
第6 页
精
1 DREAMWEAVER的工作界面
第7 页
1 DREAMWEAVER的工作界面
文件面板：
精
没有创建站点的状态
创建站点哟后的状态
第8 页
第 11 页
2.1 创建本地站点
精
在制作页面之前，首先要在Dreamweaver中创建站点。 一开始只需制作本地站点，这个位于本地硬盘中的文件夹 被当成一个远程站点的镜像，完成本地站点的制作后，即 可将本地站点上传至远端服务器，作为远程站点。
的不同视图之间快速切换。工具栏中还包含一些与 查看文档、在本地和远程站点间传输文档有关的常 用命令和选项。
Dreamweaver CS6实例教程(第3版) (1)
不同风格的界面
伸缩自如的功能面板 多文档的编辑界面 新颖的“插入”面板 更完整的CSS功能
1.1.1 友善的开始页面
启动Dreamweaver CS6后首先看到的画面是开始页面，供用户选择新建文件的类 型，或打开已有的文档等。 老用户如果不太习惯开始页面，可选择“编辑 > 首选参数”命令，或按Ctrl+U 组合键，弹出“首选参数”对话框，取消选择“显示欢迎屏幕”复选框。单击“确定” 按钮完成设置。当用户再次启动Dreamweaver CS6后，将不再显示开始页面。
1.3.2 移动文件和文件夹
移动文件名或文件夹名称的操作步骤如下。
（1）选择“窗口 > 文件”命令，弹出“文件”面板，在其中选择
要移动的文件或文件夹。 （2）通过以下几种方法移动文件或文件夹。 复制该文件或文件夹，然后粘贴在新位置。 将该文件或文件夹直接拖曳到新位置。 （3）“文件”面板会自动刷新，这样就可以看到该文件或文件夹
新颖的“插入”面板
1.1.6 更完整的CSS功能
传统的HTML所提供的样式及排版功能非常有限，因此，复杂的网页 版面主要靠CSS样式来实现。而CSS样式表的功能较多，语法比较复杂， 需要用一个很好的工具软件有条不紊地整理复杂的CSS源代码，并适时 地提供辅助说明。Dreamweaver CS6就提供了这样方便有效的CSS功能。
掌握Dreamweaver CS6的工作界面 掌握站点管理器、创建文件夹、定义新 站点、创建和保存网页
掌握重命名、移动、删除文件和文件夹
掌握站点的打开、编辑、复制、删除、 导出和导入
掌握关键字、作者和版权信息、刷新时
间、描述信息等其他文件头的设置
1.1 Dreamweaver CS6 的工作界面
新媒体网页设计与制作PPT-Dreamweaver CS6基础、案例、技巧实用教程第1章
1.3.1 定位网站主题和名称 • 定位网站主题 ：网站的题材和内容应紧扣
主题，要突出个性和特色。网站定位要准确， 内容要精练，题材不要太宽泛或者目标太高。
• 网站名称：网站名称最好使用中文，字数控
制在6个字以内，名称要见名知义，且能代表 本站特色。
1.3.2 网站风格
网站的风格是指网站的整体外观带给 用户的综合感受，包括版面布局、浏览方 式、交互性等诸多因素。
新媒体网页设计与制作
—Dreamweaver CS6基础、案例、技巧实用教
程
目录
第1章 网页设计基础 第2章 认识Dreamweaver CS6 第3章 制作绚丽多彩的网页 第4章 使用CSS样式美化网页 第5章 新媒体网页布局 第6章 网页中的超级链接 第7章 新媒体网页中的多媒体元素
目录
第8章 在新媒体网页中添加动态特效 第9章 站点风格的统一 第10章 表单 第11章 综合实训-家具联盟网站 第12章 创建移动设备网页及应用程序 第13章 站点的整理维护与上传
1.1.2 网页的基本要素
•LOGO •标题 •导航栏 •页眉 /页脚 •功能区 •主体内容
1.1.3 新媒体网页的设计元素
• 文字：是网页信息传递的主要手段。 • 图片 ：用于提供信息、展示作品、装饰网
页等。 • 多媒体：包括音频、视频、动画等元素 。 • 互动：实现信息的远距离实时传递。 • 版式设计：“同”字型布局 、“国”字型布
1.2.1 色彩理论
在HTML中，颜色有3种表示方式 ： • 十六进制的数 • 颜色常量 • rgb(r，g，b)
1.2.2 选择色彩
网页设计中，色彩的选择往往是和情 感联系在一起的，比如温暖、冷静或严肃 的情感。暖色能带来阳光明媚的情绪，让 人感觉到温暖，例如红色、黄色和橙色； 冷色可以表达出权威、明确和信任的感觉， 让人联想到凉爽和寒冷，例如蓝色，绿色 和紫色；中性色，只是给用户一种淡淡的 感受，没有过多的情绪，平静，淡然，像 灰色和棕色就是中性色。
主题，要突出个性和特色。网站定位要准确， 内容要精练，题材不要太宽泛或者目标太高。
• 网站名称：网站名称最好使用中文，字数控
制在6个字以内，名称要见名知义，且能代表 本站特色。
1.3.2 网站风格
网站的风格是指网站的整体外观带给 用户的综合感受，包括版面布局、浏览方 式、交互性等诸多因素。
新媒体网页设计与制作
—Dreamweaver CS6基础、案例、技巧实用教
程
目录
第1章 网页设计基础 第2章 认识Dreamweaver CS6 第3章 制作绚丽多彩的网页 第4章 使用CSS样式美化网页 第5章 新媒体网页布局 第6章 网页中的超级链接 第7章 新媒体网页中的多媒体元素
目录
第8章 在新媒体网页中添加动态特效 第9章 站点风格的统一 第10章 表单 第11章 综合实训-家具联盟网站 第12章 创建移动设备网页及应用程序 第13章 站点的整理维护与上传
1.1.2 网页的基本要素
•LOGO •标题 •导航栏 •页眉 /页脚 •功能区 •主体内容
1.1.3 新媒体网页的设计元素
• 文字：是网页信息传递的主要手段。 • 图片 ：用于提供信息、展示作品、装饰网
页等。 • 多媒体：包括音频、视频、动画等元素 。 • 互动：实现信息的远距离实时传递。 • 版式设计：“同”字型布局 、“国”字型布
1.2.1 色彩理论
在HTML中，颜色有3种表示方式 ： • 十六进制的数 • 颜色常量 • rgb(r，g，b)
1.2.2 选择色彩
网页设计中，色彩的选择往往是和情 感联系在一起的，比如温暖、冷静或严肃 的情感。暖色能带来阳光明媚的情绪，让 人感觉到温暖，例如红色、黄色和橙色； 冷色可以表达出权威、明确和信任的感觉， 让人联想到凉爽和寒冷，例如蓝色，绿色 和紫色；中性色，只是给用户一种淡淡的 感受，没有过多的情绪，平静，淡然，像 灰色和棕色就是中性色。
Dreamweaver-CS6网页制作第1章
目录
前进
后退
结束
知识细目
1.1 网页基础知识 1.2 Dreamweaver CS6的工作界面 1.3 利用Dreamweaver CS6创建站点
前进 目录
1.4 利用Dreamweaver CS6进行站点管理
1.6 HTML语言的基础知识
后退
1.5 利用Dreamweaver CS6创建网站目录结构
结束
选取工具：用于选取“文档”窗口内的对象。
手形工具：用来移动对象的位置。 缩放工具：增大或减小窗口的显示比例。 窗口大小：显示当前文档窗口的大小，以像素为单位。 文件大小和估计的下载时间：显示页面的预计文档大小和预计下 载时间。
目录
属性面板
前进
后退
“属性”面板用于查看和编辑当前选定对象（如文本、图像等） 的各种属性。不同页面元素工具栏
目录
“文档标题”：显示当前网页的标题。新建文档时，默认的网
页标题是“无标题文档”。
“文件管理”：显示“文件管理”菜单，包括上传、下载等命 令。 “在浏览器中预览/调试”：选择一种浏览器预览或调试文档。 “可视化助理”：用户可以使用各种可视化助理来设计页面。 “检查浏览器兼容性”：用于检查CSS是否对各种浏览器均兼 容。
（4）单击“完成”按钮，回到“管理站点”对话框， 导入的站点已经出现在列表中，因为有重命名的站点 ，所以导入的站点名称后面自动加上了数字2，如下图 所示：
目录
前进
后退
导入后的站点显示
结束
1.4 利用Dreamweaver CS6进行站点管理
（5）单击“确认”按钮，完成站点的导入工作。 （6） Dreamweaver CS6主界面右侧“文件”面板的 下拉列表框中出现了导入“悠悠我心的个人网站2”站 点和原来的站点“悠悠我心的个人网站”，如下图所 示。在“站点管理”对话框中分别选择这两个站点， 单击“编辑”按钮 ，可以看到这两个站点的定义也 完全一样。
前进
后退
结束
知识细目
1.1 网页基础知识 1.2 Dreamweaver CS6的工作界面 1.3 利用Dreamweaver CS6创建站点
前进 目录
1.4 利用Dreamweaver CS6进行站点管理
1.6 HTML语言的基础知识
后退
1.5 利用Dreamweaver CS6创建网站目录结构
结束
选取工具：用于选取“文档”窗口内的对象。
手形工具：用来移动对象的位置。 缩放工具：增大或减小窗口的显示比例。 窗口大小：显示当前文档窗口的大小，以像素为单位。 文件大小和估计的下载时间：显示页面的预计文档大小和预计下 载时间。
目录
属性面板
前进
后退
“属性”面板用于查看和编辑当前选定对象（如文本、图像等） 的各种属性。不同页面元素工具栏
目录
“文档标题”：显示当前网页的标题。新建文档时，默认的网
页标题是“无标题文档”。
“文件管理”：显示“文件管理”菜单，包括上传、下载等命 令。 “在浏览器中预览/调试”：选择一种浏览器预览或调试文档。 “可视化助理”：用户可以使用各种可视化助理来设计页面。 “检查浏览器兼容性”：用于检查CSS是否对各种浏览器均兼 容。
（4）单击“完成”按钮，回到“管理站点”对话框， 导入的站点已经出现在列表中，因为有重命名的站点 ，所以导入的站点名称后面自动加上了数字2，如下图 所示：
目录
前进
后退
导入后的站点显示
结束
1.4 利用Dreamweaver CS6进行站点管理
（5）单击“确认”按钮，完成站点的导入工作。 （6） Dreamweaver CS6主界面右侧“文件”面板的 下拉列表框中出现了导入“悠悠我心的个人网站2”站 点和原来的站点“悠悠我心的个人网站”，如下图所 示。在“站点管理”对话框中分别选择这两个站点， 单击“编辑”按钮 ，可以看到这两个站点的定义也 完全一样。
网页设计与制作Dreamweaver CS6标准教-ppt课件-01
3. 导航条 导航条是网站设计中最重要的元素之一，即表现了网站 的站点结构和内容分类，又方便了用户对网站的浏览。 4. 图像 Gif用于画面简单、细节信息少的图像，如背景图片，可 以减少图像文件的大小；Jpeg用于画面较为复杂、细部 信息多的图像；PNG用于有透明背景的图像。 一种是独立完整的图像，二是在Firework或Photoshop 中使用切片功能获得的图像。 5. 动画 网页设计中常用的动画有Gif动画和Flash动画。 6. 背景 使用合理能够增强页面的整体创意效果。
1. 结构布局 常用的结构布局方式包括“国”字型、拐角型、 上下框架和左右框架等类型。 2. 艺术布局 常用的平面艺术设计原则有分割、对称和平衡等。 总之，根据内容和栏目编排要求以及客户审美需 求，将各种典型结构灵活运用，将艺术设计原则 融会贯通，锐意创新，创作出结构布局合理，页 面精美的网页。
网页由三部分组成：结构（Structure）、表现 （Presentation）和行为（Behavior），相应 的技术标准由三个部分组成：结构化标准语言， CSS样式表和脚本语言。
1.3.1结构化语言 1.3.2CSS样式 1.3.3脚本语言 1.3.4ASP技术
结构化语言HTML（Hyper Text Markup Language，超文本标记语言） XHTML（eXtensible Hyper Text Markup Language，可扩展的超文本标记语言）是 HTML的升级版本。 超文本标记语言HTML5是将取代HTML4.01标 准和XHTML1.0标准的HTML标准版本。
2. RGB色彩模式和网页安全色 每种色彩都可以用红(R)、绿(G)、蓝(B)3种色彩按一 定的比例调和而成，这3种色彩被称为光的3原色 将在不同操作系统和浏览器中具有一致显示效果的颜 色定义为网络安全色，网络安全色有216种。在网页 设计软件中，任何颜色都有一个六位的十六进制编号， 如#D6D6D6，任何由00、33、66、99、CC或者FF 组合而成的颜色值，都表示一个Web安全色 3. 利用图像配色
网页设计与制作Dreamweaver CS6标准教-ppt课件-02
编辑站点可以重新设置站点的一些属性，操作 步骤如下。 选择菜单【站点】|【管理站点】，打开【管 理站点】对话框，选择要编辑的站点名称，如 webtest，单击编辑按钮图标 。 打开【站点设置对象webtest】对话框。经 过对各种设置修改后，单击【保存】按钮，返 回【管理站点】对话框。
Dreamweaver CS6提供了多文档的编辑界面，将多 个文档集中到一个窗口中，用户可以单击文档编辑窗 口上方选项卡的文件名切换到相应的文档，还可以按 住鼠标左键拖动选项卡改变文档的顺序。
站点是存放一个网站所有文件的场所，由若干文 件和文件夹组成。用户在开发网站前必须先建立 站点，便于组织和管理网站文件。
在Dreamweaver中删除站点，只是删除了 Dreamweaver同本地站点之间的关系。本地 站点中的文件夹和文件，仍然保存在硬盘原来 的位置上，没有被删除，也没有任何改变。 删除站点的操作步骤如下。 选择菜单【站点】|【管理站点】，打开【管 理站点】对话框，选择要删除的站点名称，单 击【删除】按钮。 在打开的【Dreamweaver】对话框中单击 【是】按钮，选中的站点就被删除，
建立站点以后，可以对站点进行打开、编辑、 复制和删除等各种操作。
2.3.1打开站点 2.3.2编辑站点 2.3.3复制站点 2.3.4删除站点
Dreamweaver允许建立多个站点，并可以通 过切换打开需要编辑的站点。打开站点的操作 步骤如下。 选择菜单【窗口】|【文件】或按<F8>键打 开【文件】面板，单击左边的下拉框，在下拉 列表中选择要打开的站点。 打开站点后，在【本地文件】下显示该站点 内的所有文件和文件夹。
第1章 Dreamweaver CS6快速入门[11页]
![第1章 Dreamweaver CS6快速入门[11页]](https://img.taocdn.com/s3/m/d39d2337c1c708a1294a44de.png)
实例目的
本实例的目的是让大家掌握使用HTML5新增的<video>标签在网页中 实现视频播放的方法。视频标签的出现无疑是HTML5的一大亮点，但是 旧的浏览器不支持<video>标签，并且涉及到视频文件的格式问题。
实例重点
添加<video>标签并设置属性 添加<source>标签链接视频文件 了解<video>标签支持的视频格式
代码视图与设计视图的切换 网页标题的设置方法 输入网页正文内容
实例目的
本实例的目的是让大家了解HTML5新增的<canvas>标签，该标签是 图形定义标签，通过该标签可以实现在网页中自动绘制出一些常见的图 形，例如矩形、椭圆形等。
实例重点
掌握新建HTML5文档的方法 了解HTML5文档代码 掌握HTML5中<cavas>标签的使用
实例目的
本实例的目的是让大家掌握使用HTML5新增的<audio>标签在网页中 嵌入音频播放的方法，使用<audio>标签不需要使用任何插件即可以在网 页中嵌入音频。
实例重点
添加<audio>标签并设置属性 了解<audio>标签支持的视频格式
实例目的
本实例的目的是让大家掌握使用“页面属性”对话框对网页整体属 性进行设置的方法，例如网页的背景颜色、背景图像、字体、字体大小、 字体颜色和页边距等。
实例目的
本实例的目的是让大家掌握在站点创建过程中设置远程服务器的方 法。通常情况下，都是创建本地站点，完成网站的制作后，再设置远程 服务器信息，将网站上传到远程服务器，但有些情况下，也可以在创建 站点时，将该站点的远程服务器设置好，这样可以制作好一部分网站页 面，就上传一部分页面，可以便于在网络中查看页面的效果。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
执行“文件”｜“新建”命令，打开“新建文档”对话框 选择“空白页”类别的HTML基本项，布局“无”，然后单击“创建”按钮
1.2.1 菜单栏
1.2.2 工具栏
：显示代码视图。 ：在同一屏幕中以水平对比的方式显示代码和设计视图。 ：显示设计视图。
：在不打开浏览器的情况下实时预览页面的效果。 ：以黄色突出显示浏览器为呈现该页面而执行的代码版本，此代码是不 可编辑的。
第1章 Dreamweaver CS6概述
1.2 工作界面
执行“开始”|“程序”|“Adobe”| “Adobe Dreamweaver CS6”命 令启动Dreamweaver
第一次启动Dreamweaver CS6时， 会弹出“默认编辑器”对话框
单击“确定”按钮进入Dreamweaver CS6的欢迎界面
1.2.3 “插入”面板
“插入”面板
在不同面板之间进行切换
✓ 单击“颜色图标”命令，即可以彩色显示对象图标。 ✓ 单击下ห้องสมุดไป่ตู้列表中的“隐藏标签”命令，则只显示对象图标而不显示图标右
侧的标签。
1.2.4 文档窗口
文档窗口用于显示当前创建或者编辑的文档，可以根据选择显示方式的 不同而显示不同的内容。
1.2.5 “属性”面板
选中某一对象后，“属性”面板可以显示被选中对象的属性，还可 以在属性面板中修改被选对象的各项属性值。
单击面板右下角的 可关闭“属性”面板的下半部分。 单击面板右下角的 可打开“属性”面板的下半部分。