Adobe dreamweaver CS6小白入门教程「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。

0.首先一点答疑

用dreamweaver制作图片切换效果_百度经验
https://jingyan.baidu.com/article/7c6fb4287f8b3580652c906d.html

dw中多张图片代码_百度经验
https://jingyan.baidu.com/article/d621e8da22b3712865913f11.html

1.界面认识

2.创建站点：(针对复杂网站使用)

站点是一系列文档的组合，这些文档通过各种链接建立逻辑关联。是管理网页文档场所。
DWCS6是一个站点创建和管理工具，使用它不仅可以创建单独文档，还可以创建完整的站点。
创建网页：新建。

3.管理站点的操作：

打开站点、
编辑站点、
删除站点、
复制站点、
导入导出站点

4.管理站点中的文件

1.创建文件夹和文件
2.复制移动文件
3.站点地图：以树形结构图方式显示站点中文件的连接关系。在站点地图中添加、修改、删除文件间链接关系。

5.DW文本网页的设计

5.1确定网页页面的属性
5.1.1如何写入连续多个空格？导航栏->编辑->首选参数，这里有很多操作可以自行..

5.1.2直接插入多个连续空格
这里写图片描述

5.1.3设置是否显示不可见元素

视图中有一些元素仅用来标志元素的位置而在浏览器中是不可见，
最常用的有换行符、脚本、表单，网页中添加换行符不能按“回车键”而是shift+enter//等于代码中的<br></br>

这里写图片描述
5.1.4其他设置：
在属性面板中单击<页面属性> 页边距什么的..
5.2在网页中插入各种元素
5.2.1.插入–HTML–特殊字符
5.2.2.查看–网格设置/ 标尺…
5.2.3.创建/修改项目列表和编号列表
5.3插入网页头部内容
位置：插入–HTML–文件头标签–Meta/关键字…
5.3.1.设置meta：该对象来插入一些为Web服务器提供选项的标记符。
5.3.2.插入关键字：网络搜索引擎准备关键字一般要尽可能概括网页内容。
5.3.3.插入说明：设计者对网页内容详细说明
5.3.4.插入刷新：设置网页自动刷新
5.3.5注意。这个通道中的“链接”是“当前网页和本站点中的另一网页之间的关系”
5.3.6.注意。不是这个通道中的每一项操作都会在网页界面中显示，但会在代码中显示，（也就是“设置不可见元素”）比如：
这里写图片描述

6.DW图像和多媒体网页设计

6.1图像
6.1.1网页中3种常见图像格式：
GIF 网络最常见，可制作动态图像，通性好。
JPEG 丰富色彩，下载速度快
PNG 专门为网络准备的图像格式，通用性差。
6.1.2.给图像添加文字说明
6.1.3插入图像占位符（替换）
6.1.4跟踪图像（没听懂…）
（以上视频传送门http://www.rjzxw.com/se-13645-112.html）
6.2多媒体
插入多媒体要以牺牲速度、兼容性等为代价，所以不会太多，一般在网页中插入2-3个。
1.常见：
插入SWF(shock wave flash)动画：提供使用flash对象的功能
插入FLV视频
插入shockwave影片
插入Applet：可以嵌入WED页面的轻量级应用程序的编程语言
2.音频：
在代码输入下实现

<body>

<bgsound src="music.WAV" loop="-1">
//bgsound音频背景 src链接文件 loop音量

</body>

7.超链接

7.1.创建
注意：：必须将链接网址和当前网页放在同一个文件夹中（（点击属性–链接后的文件夹按钮–选择网页
7.2.下载文件超链接：在网页中提供资料来下载，就需要为文件下载链接。如果超链接指向的不是一个网页文件，而是其他文件。
（单击链接后的文件夹按钮–选择文件）
ps：岂不是本地不能删？？？？？？
7.3.电子邮件链接：让浏览者把网站内容以邮件形式发送出去
（插入–电子邮件链接–输入显示的文本和目的地址（预览会发现，点击将自动打开个人邮箱软件）
7.4.脚本链接
执行js代码或者调用js函数，很实用。
能在不离开当前网页文档的情况下，为访问者提供信息，和其他。
输入函数

预览

7.5.空链接
用于访问向页面上的对象或者文本附加行为。
（属性–链接后输入“#”）
7.6管理超链接
7.6.1.自动更新链接：编辑–首选参数–分类–常规

7.6.2.在站点范围内更改链接
7.6.3.检查站点中的链接错误
这里写图片描述

8.表格（重要）来排版

8.1.复杂表格必须通过代码来写
< table >表格的开始和结束
< tr >表格的行
< td >表格内的数据
< caption > 表格的标题
< th >表格列名
ps：他是咋实现先选中区域再创建表格的？？？？？？以下是解答吧
8.2.设置表格和各个元素的属性
8.3.导入、导出数据
插入–表格对象–导入数据
文件–导出–表格
命令–排序表格

9利用APDIV和spry灵活布局

9.1.APDiv的概念：是网页的容器元素，不仅可以放置图像，还可以放置文字、表单、插件等。
9.1.1创建嵌套APDiv（子与父的关系）
插入–布局对象–AP Div
9.1.2.隐藏所有APDiv标签
查看–可视化助理–隐藏所有
9.1.3.性质以及多个层同时操作
可在右侧工具栏AP元素中选中多个层。
修改–排列顺序–可修改高度、对齐等
9.1.4层靠齐到网格
查看–网格设置–靠齐到网格
9.1.5关于网格：显示–“线”有时会比较突出甚至阻挡画面，因此可选择“点”。

9.2设置APDiv的属性
在属性面板和AP元素面板中
9.2.1设置APDiv显示/隐藏属性
这里写图片描述
9.2.2.改变APDiv堆叠顺序（见上图Z）
在AP元素面板中的Z轴属性值更改，层的显示顺序与Z轴顺序一致，Z值越大，层位置越靠上前。也可以拖拽实现。
9.2.3.添加APDIV**滚动条**

这里写图片描述
解释：
溢出：AP元素面板中溢出用于控制当AP元素的内容超出AP元素的指定大小时如何在浏览器显示AP元素。的显示方法。
visible可见（部分内容）：hidden隐藏（部分内容）：sceoll**滚动条**：auto超出范围的滚动条
左、上是距离页面边界的距离！
宽、高是APDiv大小
Z轴是顺序
背景也是针对APDiv的！
这里写图片描述
default默认
inherit继承
visible、hidden是否可见
9.3应用层设计表格（APDiv和表格的转换：修改–转换）
9.4使用spry布局网页对象（插入–布局对象–spry菜单栏）
Spry框架支持一组标准html、CSS、JavaScript编写可重用构件，
设置构件样式：
这里写图片描述
9.4.1.使用Spry菜单栏：一组可导航的菜单按钮
9.4.2.使用Spry选项卡式面板：显示或隐藏存储在选项卡式面板中内容
9.4.3.使用Spry折叠式
9.4.4.使用Spry折叠面板（只针对一个导航项）
9.5利用APDiv制作网页下拉菜单
先新建一个APDiv，确定合适的位置，插入表格（宽度100% 间距…），填好文字
选中导航栏的一个小格子，窗口–行为–“+”来建立导航栏和下拉菜单的关系
（显示–over ；隐藏–out）

10.用CSS修饰美化网页

10.1介绍

这里写图片描述

<style> then，代码，还是代码..... </style>

10.2使用CSS样式
10.2.1.CSS样式控制面板（新建CSS规则（以上图）、编辑样式、删除CSS规则、附加样式表）
10.2.2样式的类型与创建

第3.4.点如图↓↓：第一种应用方法

或者第二种应用方法↓↓：

末：创建外部样式（新建CSS规则–规则定义选择“新建样式表文件而不是仅本”）那么如何引用外部样式呢？就在“附加样式表”

10.2.3.编辑CSS样式操作
这里写图片描述
详细介绍
http://www.rjzxw.com/se-13895-112.html
区块：网页间距、对齐方式、文字间距、缩进等。
方框：表格中的单元格的性质。
列表：设定项目符号和编号的外观。
定位：精确控制网页元素的位置，主要是层。(Position类型）
拓展：4.0及以上版本
过渡：动画

空链接的做法
10.3 CSS过滤器（分静态、动态）

10.3.1滤镜：对CSS的扩展

光晕Glow 模糊 Blur 遮罩mask （实现一种颜色框架效果）
10.3.2 CSS滤镜设计特殊文字
透明色chroma 阴影dropshadow 波浪wave X射线Xray
10.4应用CSS改变文本间行距

10.5应用CSS给文字添加边框
这里写图片描述