DreamWeaver学习（二）：《Dreamweaver CS6 完全自学教程》笔记

博主主要参考《Dreamweaver CS6 完全自学教程》这本书进行学习，但不限于此书，如果用到其他资料会进行注明。
博主并非专业，主要利用闲余时间进行自学，更新时间不定，如有错误请及时指出

---

---

第一章：网页制作基础知识

---

1.1 Web概述

Web 也就是 www，是 World Wide Web 的缩写，也叫做万维网，是目前最流行、最方便的 Internet 信息服务。

1.1.1 Web服务的工作原理

WWW 服务采用客户端 / 服务器工作模式，客户端和服务器之间采用 超文本传输协议 HTTP 为通信协议。信息资源，包括文本、声音、图像和视频都以页面的形式组织、存储、显示。网页是一个文档，由 HTML 超文本标记语言 来实现。页面间采用 超文本链接 的方式链接成一个整体。
网页存放在 WWW 服务器中，客户端通过浏览器向 WWW 服务器发送 “请求” ， 服务器响应客户端的请求后，将特定页面发送到客户端，其间使用 HTTP 协议。

1.1.2 Web服务的相关概念

• 浏览器：
  是一种用于解读网页文件的软件，从服务器传送至客户端的页面经浏览器解释后，才能看到页面信息。
  目前浏览器都支持多媒体特性，可以看视频，播放声音。浏览器不仅可以浏览页面，还可以收发邮件，上网聊天等。
• 页面、网站和主页：
  页面是 Internet 上信息的组织形式。网站是若干主体相关的页面的集合。每一个网站都有一个入口点，主页（首页）。首页的名称是特定的，一般为 index.htm 、index.html、default.htm 等 。输入网址时，若没有指明具体文件，则默认是主页。
• HTTP 协议：
  超文本传输协议。是 WWW 服务中客户端和服务器之间采用的主要通信协议，从网络协议的层次结构上看，它属于应用层协议。
  此外，还有 HTTPS 协议，它是一种具有安全性的 SSL 加密传输协议，需要到 CA 申请证书。
• FTP 协议：
  网络上主机之间进行文件传输的用户级协议。
• HTML 语言：
  超文本标记语言。可以定义格式化的文本、色彩、图像与超链接等。
• URL：
  统一资源定位器，也就是页面地址。URL的具体组成如下：
  <协议类型>://<域名或 IP 地址>/路径及文件名
  eg：http://www.bilibili.com
  其中的 协议类型 可以是 HTTP 、FTP（文件传输协议）、TELNET（远程登录协议）等。 域名或 IP 地址 （bilibili.com）指明要访问的服务器， 路径及文件名 指明要访问的页面名称。
• 域名：
  相当于写信的地址，在互联网上有唯一性。

1.1.3 Web的主要特点

• Web 是图形化的和易于导航的：
  Web 是图形化的，它可以在一个页面上同时显示图形、音频、视频和文本。Web 是易于导航的，只要从一个链接跳到另一个链接，就可以进行浏览。
• Web 与平台无关：
  无论是什么系统平台，用户都可以访问 WWW
• Web 是分布式的：
  对于 Web ，没必要把信息都放在一起，信息可以放在不同的站点上。Web 的分布式特性可以使在物理上并不在一个站点的信息在逻辑上一体化。
• Web 是动态的：
  各个网站的信息提供者可以对站点进行更新。
• Web 是交互的：
  首先表现在超链接上，用户的浏览顺序完全由自己决定。另外通过 FORM 的形式可以从服务器方获得动态信息。

---

1.2 浏览器 / 服务器模式

在 B / S（浏览器/服务器模式） 体系结构系统中，用户通过浏览器向分布在网络上的许多服务器发出请求，服务器对浏览器的请求进行处理，将用户所需信息返回到浏览器。

• 特点： 分布性强、维护方便、开发简单、共享性强、总体拥有成本低。
• 缺点： 数据安全性问题、对服务器要求过高、数据传输速度慢、软件的个性化特点降低、难以实现传统模式下的特殊服务功能要求。比如通过浏览器进行大量的数据输入或进行填表的应答、专用性打印输出都比较困难和不便。而且难以实现复杂的应用构造。

---

1.3 网页与网站

WebPage（网页） 是一个实实在在的文件，储存在被访问的 Web服务器上，通常以 HTML 文件来表现。网站是网页的集合，是用来进行网络交流、信息共享的平台。

1.3.1 网页的基本要素

文字&图片是构成网页的两个基本要素。另外还有表单、导航、动画、广告等。

• 文字：
  文字是构成网页的最基本要素，对于大多数浏览器来说，文字都是可以显示的，无需任何外部程序或模块。由于用户电脑配置不同，所以网页中能使用的字体只有几种通用的。
• 图片：
  图像的格式有很多种，但是并不是所有图像格式都可以在网页中显示，只有少数几种图像格式可以应用到网页中。
• 表单：
  是功能型网站中经常使用的元素，是网站交互中最重要的组成部分之一。如搜索框、用户注册都会用到表单。
  网页中的表单是用来搜集用户信息、帮助用户进行功能性控制的元素。
• Logo：
  大家都懂的就不说了。
• 导航：
  要放在醒目位置，浏览者会通过导航栏直观的了解网站的内容和信息分类方式。
• 动画：
  目前网页中应用的动画主要有两种，GIF 和 SWF（即flash动画）。GIF动画效果单一，SWF动画具有良好的交互效果。
• 广告：
  常见的有弹出式广告、浮动广告和页面广告和一些隐性的广告。

1.3.2 静态网页和动态网页

• 静态网页：
  静态网页是标准的 HTML 文件，扩展名为 .htm 或 .html ，注意：静态网页的呈现形式不一定是静态的，可以包含翻转图像、GIF 动画、Flash 动画等。 所谓静态，是指在发送给浏览器之前不再进行修改。

  静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。 静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。—— 百度百科

  静态网页的内容相对稳定，因此容易被搜索引擎检索，页面浏览速度迅速，过程无需连接数据库，开启页面速度快于动态页面。 —— 简书

• 动态网页：
  根据采用 Web 技术的不同，动态网页的文件扩展名也不同。

  动态网页是一个对所有动态生成与动态更新的网页的统称。 与传统的静态网页相反，它会因为变量的改变而产生不同的网页。 这既可能是服务器端生成的网页，也可能是用户端生成的网页，或是两者的混合。服务器端的动态网页是指服务器通过应用程式伺服器处理服务器端脚本而生成的网页。—— Wiki

1.3.3 网页与网站的关系

• 网页之间是独立的，通过超链接联系。
• 网页是网站的基本信息单位。
• 网页又由许多 HTML 文件集合而成。
• 网站可以由任意个网页集合而成。

1.3.4 网站与Internet

Internet 起源于美国国防部高级研究计划管理局建立的阿帕网。网站是指在 Internet 上根据一定规则，使用网页制作工具制作的用于展示特定内容的相关网页的集合。

1.3.5 网站的组成

网站主要由域名（网址）、网站空间、网站源程序构成。

• 域名：
  表示某一台计算机或计算机组的名称，目前已成为互联网的品牌、网上商标保护必备的产品之一。
• 网站空间（Webhost）：
  也称为虚拟主机空间，通常企业制作网站都不会自己架设服务器，而是选择虚拟主机空间作为放置网站内容的网站空间。
• 网站源程序：
  包括用户浏览网站看到的页面和网站后台管理程序，现在一般都是使用成熟的网站管理系统。

1.3.6 网站的参数

衡量一个网站的性能通常从网站空间大小、网站位置、网速、网站软件配置、网站提供服务等方面考虑。 最直接的标准是网站的真实流量。
建设或经营一个网站要考虑一下几个因素：

1. 客户服务群体
2. 内容方向和性质
3. 功能描述和结构分析
4. 用户体验
5. 盈利方式
6. 未来发展方向

---

1.4 网页设计的基本原则

网页设计的真正意图在于把适合的信息传达给适合的观众。

1.4.1 明确建立网站的目标和用户需求

根据消费者的需求、市场状况、企业自身的情况进行综合分析，牢记以用户为核心，而不是以界面为中心进行规划。

需要考虑的问题：

• 建设网站的目的是什么？
• 为谁提供服务和产品？
• 企业能提供什么样的服务和产品？
• 目标消费者和受众的特点是什么？
• 企业的产品和服务适合什么样的表现方式 / 风格？

1.4.2 总体设计方案要做到主题鲜明

网页的设计无论简单或复杂，都要做到主题突出，调动一切手段表现网站的个性和特点，增加吸引力。

1.4.3 网站的版式设计

网页设计作为一种视觉语言，要讲究编排和布局，讲究整体布局的合理性，特别要注意网页之间的有机联系。

1.4.4 网页形式与内容相统一

充分运用点、线、面，相互穿插形成最佳的页面效果。 （听起来有点像画画？）

1.4.5 三维空间的构成

网络上的三维空间是一个假想空间，这种空间关系借助动静变化、图像比例关系、图像文字叠加等因素表现出来。

1.4.6 多媒体功能的使用

网络资源的优势之一是多媒体功能。但要注意，由于网络带宽的限制，在使用多媒体形式表现网络内容时应考虑客户端的传输速度。

1.4.7 网站测试和改进

通过模拟用户询问网站的过程来发现问题，但要注意让用户参与测试。

1.4.8 合理运用新技术

如果不是介绍网络技术的专业站点，切忌将网站变成一个制作网页的技术展台，用户方便快捷的得到信息是最重要的。

---

技术专题 1 ：屏幕分辨率与网页设计

屏幕分辨率低时，在屏幕上显示的项目少，但尺寸比较大。在屏幕尺寸一样的情况下，分辨率越高，显示效果就越精细。在设计网页的时候，布局的难点在于用户各自的分辨率是不同的。
由于浏览器本身占了一定尺寸 （如水平滚动条是22像素左右），所以网页尺寸要小于屏幕分辨率。
设计网页时，网页长度原则上不超过3屏，宽不超过1屏。

---

1.5 网站制作流程

1.5.1 选择主题

如果是个人网站，那么网页的设计可以围绕个性化来进行；如果是企业网站，则应立足于企业形象展示。
在主题确定后，可以搜索资料进行组织，准备的越充分，越有利于下一步网站栏目的规划。

1.5.2 规划网站栏目和目录结构

网站栏目实际上是一个网站内容的大纲索引，在规划时要注意以下几点：

1. 对搜集到的资料进行分类，并建立专门的栏目。
2. 在创建网站目录结构时，不要将所有文件都存放在根目录下，而是按照网站专栏来建立。如网站根目录下都有一个 Images 目录，不要把图片都存在这个目录下，这个只用于存主页的图片，其他图片存到对应专栏的 Images 目录下。
3. 在命名目录文件时要使用简短的英文，文件名小于8个字符，一律小写。同一类型的文件应以序号区分。

1.5.3 设计网页布局

最好先用笔画草图，包括 logo，广告栏、导航条、文本、图片、表格。再通过网页制作工具（这里博主用的 Dreamweaver）做成一个简略的网页。
多阅读平面设计类书籍有利于提高自己的版面布局水准。

1.5.4 整合网页内容

将收集好的素材落实为网站各种元素（这里可能需要用到图形处理工具），完成制作。

---

1.6 网站的色彩选择与搭配

1.6.1 选择色彩

若果是公司网站，最好沿用公司的标准色。一般来说，网站的标准色不能超过3种

（入坑的第一款音游，以紫色为主题，充满科技感）

（腾讯QQ以蓝色简约的风格为主）

1.6.2 搭配色彩

除主色调外，搭配不同的辅助色会有不同的效果。

---

第一章总结：

第一章详细介绍了网页制作的基础知识，包括基本原理、网络术语、网页的组成元素、制作流程和注意事项。由于这本书出版时间非常早，有些知识可能早已过时，或者有些新知识没有提及，以后会不断更新完善。博主为初学者，如果有错误请及时指出，谢谢~

---

第二章：Dreamweaver CS6 入门

---

2.1 Dreamweaver CS6 概述

Dreamweaver CS6 是世界顶级软件厂商 adobe推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页（通常是标准通用标记语言下的一个应用HTML），对于初级人员，你可以无需编写任何代码就能快速创建web页面。——
百度百科

---

2.2 Dreamweaver CS6 的启动与退出

这个我感觉没什么好说的，就略写了

2.2.1 启动 Dreamweaver CS6

1. 初次打开时，显示的是 “设计器” 界面布局和 “欢迎屏幕”
   
   若想再次显示欢迎屏幕，可以选择 编辑 > 首选参数 > 常规 然后选中 “显示欢迎屏幕”。

2. Dreamweaver CS6 提供了多种开发环境，可以在如图位置更换

2.2.2 退出 Dreamweaver CS6

1. 双击左上角的图标
2. 快捷键：Alt+F4

---

2.3 Dreamweaver CS6 的工作界面

---

常用选项

记录一些比较有用的、不容易找到的，或者自己经常忘记在哪的选项路径和快捷键。不定期更新~

1. 属性面板：窗口 > 属性 。 快捷键：Ctrl+F3
2. 自定义快捷键：编辑 > 快捷键

---

2.4 自定义工作界面

2.5 网页的创建与保存

这两个是在没什么好说的。。。跳过好了

---

2.6 可视化辅助工具

各种工具的介绍，笔记笔记~

2.6.1 标尺工具

可以精确的计算网页高度、宽度。

相关操作：

• 通过 查看 > 标尺 > 显示 可以打开或关闭标尺

• 标尺原点默认位置在左上角，但可以拖动到任意位置。通过 查看 > 标尺 > 重设原点 可以将原点恢复到默认位置

• 通过 查看 > 标尺 > 像素 可改变单位

2.6.2 网格工具

可以让页面的元素自动靠齐，注意，无论网格是否可见，都可以使用网格靠齐。

相关操作：

• 通过 查看 > 网格设置 > 显示网格 来显示或关闭网格

• 通过 查看 > 网格设置 > 网格设置 可以进行网格设置

【“网格设置”参数介绍】

• 显示网格： 可使网格在设计视图中可见。
• 靠齐到网格： 可使网格中的层自动靠齐到网格。
  

2.6.3 辅助线工具

辅助线通常与标尺配合使用。

相关操作：

• 通过 查看 > 辅助线 > 显示辅助线 显示辅助线，然后再文档上方标尺中向文档拖拽，可创建辅助线。可以创建多条水平和垂直辅助线。

• 通过 查看 > 辅助线 > 清除辅助线 删除全部辅助线，也可将辅助线拖拽到文档外来删除一条辅助线。

• 通过 查看 > 辅助线 > 编辑辅助线 对辅助线进行设置。

• 按住 Ctrl 可显示距离。

【“辅助线”参数介绍】

• 距离颜色： 按住 Ctrl 出现的距离指示器颜色。
• 锁定辅助线： 可将辅助线锁定在适当位置。
• 靠齐辅助线： 页面元素在移动时靠齐辅助线。
• 辅助线靠齐元素： 拖拽辅助线时将靠齐页面元素。
  

---

2.7 首选参数设置

快捷键：Ctrl + U

2.7.1 常规参数

这个没什么好说的，可以自己去改一下，让软件更人性化

2.7.2 代码格式

• 换行符类型： 每个操作系统的结束符类型都是不同的，Mac 使用 CR (carriage return) ，Unix 使用 LF (line feed) ，Windows 使用 CR 和 LF。 如果知道远程服务器的类型，选择正确的换行符类型可以确保源代码在远程服务器上正确显示。
• TD标签： 可以确保在 内没有换行符。
• 高级格式设置： 可以设置 CSS 与标签库。

2.7.3 代码颜色

好看的代码颜色可以提高工作效率，并且让人心情舒畅

2.7.4 复制粘贴

CV大法好

• 仅文本： 粘贴无格式的纯文本，分行和段落都会被删除。
• 带结构的文本： 保留结构，但不保留基本格式设置，如列表、间隔、分行、段落。
• 带结构的文本以及基本格式： 粘贴简单的格式化文本，如加粗、下划线。如果文本是从 HTML 文档复制过来的，还将保留所有 HTML 类型标签。
• 带结构的文本以及全部格式： 保留所有结构和格式。

2.7.5 在浏览器中预览

• “+” 、“-”： 添加浏览器或删除选中浏览器。
• 使用临时文件预览： 将创建用于预览和调试的临时文件，而不是直接更新当前文档。

2.7.6 字体

• 均衡字体： 在正规文本中使用的字体。
• 固定字体： 在

  、、 标记中使用的字体。

• 代码视图： 显示在代码面板中文本的字体，默认与 固定字体 相同
• 使用动态字体映射： 可以定义模拟设备时使用的字体。在网页文件中，可以指定通用设备字体。 Dreamweaver 会在运行时尝试将通用设备字体与可用字体匹配。

实战：自定义快捷键

实战：自定义代码视图

一些简单的实战就不在这里演示了，如果有演示我会另开博客专门实践

---

第二章总结：

这一章介绍了 Dreamweaver 的界面、工具、设置，很多都非常简单，没什么难度，但实用性很强，尤其是工具部分和快捷键部分，所以以后会不定时更新，不断积累。
这里放一下更新记录，方便大家查找。
*************************************
更新时间：2020-3-19 11:50
更新内容：第二章笔记
*************************************

---

第三章：创建网页中的基本对象