DW使用教程

AdobeDreamweaverCS6课程笔记第一节、DreamweaverCS6软件简介和安装一、DreamweaverCS6是由美国Adobe公司最新开发的一款网页设计、网站管理为一体的专业软件。

二、为了保让能够正常安装，在安装时，请断开网络。

第二节、DWCS6软件界面的简介一、软件界面组成1、菜单栏2、工作区3、属性栏4、浮动面板（文件、资源、CSS样式、行为等）二、界面的切换：为满足不同人群的需求。

三、界面的恢复：窗口——工作区——重置设计器四、插入面板的调用。

三、什么是网站：反应同一主题的多个网页的集合。

四、网页内容的组成(网页元素)1、文字2、图片（jpg，gif，png）3、动画（swf，gif）4、多媒体5、超链接6、表单7、网页特效8、其它元素第四节、网页制作方法与站点建立一、网页的制作方法1、代码法：html2、软件制作：Dreamweaver、frontpage（所见即所得）。

二、制作网站前准备工作：建立站点。

三、站点：用来存放网站中所有元素的文件夹，为了制作方便需要将这个文件夹和制作软件相链接。

四、站点的建立(链接)1、站点——建立2、文件面板3、应用程序栏（窗口——应用程序栏）五、站点的分类（按照网站的位置）1、本地站点2、远程站点第五节、规划本地站点目录结构一、规划本地站点目录结构1、images（图片）2、swf（动画）3、css（CSS样式）4、script（存放网页特效）JS5、other（其它）二、网站主页名称1、index.htm2、index.html3、default.htm4、default.html注：主页必须放在网站的根目录下面，同时名称也有特殊的要求。

第六、七节、网页中文字的输入1-2一、网页的四个视图1、设计视图2、代码视图3、拆分视图4、实时视图二、网页中的文字1、文字直接输入就可以了。

2、回车表示换段。

3、shift+回车：表示换行。

4、输入空格时要在全角输入法状态下输入。

5、特殊字符的插入：“插入——html——特殊字符”6、文字也可以从网站中复制，但是在复制时需要将网页中文字的格式去掉。

（注：如何去除复制来的文字格式，只需要将文字粘贴到记事本中，然后从记事本中再复制文字就可以了。

）三、预览网页：文件——在浏览器中预览——IExplore（快捷键：F12）第八、九节、页面属性1-2一、页面属性1、修改——页面属性2、或通过属性栏二、属性1、左边距、右边距、上边距、下边距。

2、文字字体、大小、颜色。

（注：A、字体：选择常用字体。

如：宋体B、大小：正文文字一般设置为12-16px。

）3、页面背景。

4、背景图片。

（默认情况自动填充、平铺）（注：A、图片要放在站点内。

（有关网站中的所有元素都必须放在站点内）。

B、图片名称不能为中文。

）（注：如果同时设置背景颜色和背景图片，以背景图片为准。

）第十节、Html网页基本代码格式一、网页基本代码（注：1、head：开头部分2、title：标题3、body：正文部分）二、常用代码1、

第十一节、图片的插入一、图片1、图片格式（1）JPG：图片质量较高，一般用于较大的图片。

如：人物、风景。

（不支持透明）（2）gif：用于制用按钮、动画、导航条等，图片较小，只有256种颜色。

（支持透明）（3）png：兼有两种格式的特点。

（支持透明）注：图片的大小一般尽量控制在200K以下。

2、链接（1）_blank：在新的网页打工。

（2）_self：在自身网页打开。

第十二节、图片热点一、热点1、矩形热点2、圆形热点3、多边形热点注：编辑——首选参数——辅助功能——图像二、替换1、用于图片的注释。

2、当图片无法显示的时候用此内容代替。

2、Src：位置。

3、热点：第十三节、图片的编辑一、裁剪、亮度对比度、锐化注：使用Dreamweaver编辑图像是个不好的习惯，如果要编辑图像，最好使用专门的图像编辑软件（如：Fireworks、photoshop），编辑好了以后，再重新插入进来。

二、插入——图像对象——鼠标经过图像三、水平线的插入插入——html——水平线四、背景颜色的代码：bgcolor第十四节、超链接一、超链接指的是通过点击一个对象可以链接打开另外一个对象（网页、图片、程序等）。

2、变换图像：鼠标移上去时的颜色。

3、已访问：访问以后链接的颜色。

4、活动：鼠标点下去时的颜色。

8、脚本链接（实现特殊功能）Javascript:window.close()——关闭窗口Javascript:window.print()——打印文字第二十节、表格一、表格的作用1、制作表格2、定位布局二、表格的建立1、插入——表格2、常用面板三、表格的元素及代码1、…..：单元格2、…..：行3、

（2）用%表示相对值。

3、填充：单元格中的内容与边框的距离。

4、间距：表示单元格与单元格之间的距离。

5、边框：设置表格是否留有边线。

6、对齐7、清除行高和列宽8、将宽度转换为象素9、将宽度转换为百分比第二十二节、行和单元格属性1、水平：单元格内容水平对齐方式。

2、垂直：单元格内容垂直对齐方式。

3、宽：单元格宽度。

4、高：单元格高度。

5、背景颜色：单元格背景颜色。

6、拆分和合并单元格。

注：在利用表格排版时网页中各种元素都是放入单元格内进行排版的。

第二十三节、网页布局和大小一、网页布局分类1、“同”字式2、“厂”字式或反“厂”字式二、网页大小（宽度大小）1、800*600分辨率宽度设为778象素2、1024*768分辨率宽度设为950象素或1002象素注：滚动条一般占有22个象素第二十四、二十五、二十六节、实例——网页制作1一、制作网站时的步骤：1、设置页面边距（0，0，0，0）即上、下、左、右边距都为0。

2、先整体后局部：先插入一个大表格用来定位和决定网页宽度，然后再插入小表格来定位每一个部分。

注：（1）大表格尽量不拆分。

（即一行一列）（2）表格与表格之间可以嵌套。

3、插入表格（0，0，0）即填充、边框、间距为0。

4、表格大小和居中（1）800*600分辨率宽度设为778象素（2）1024*768分辨率宽度高为950象素或1002象素5、将单元格内光标定位到左上角（选单元格设置）6、将单元格的高度设置和图片高度一样（作为背景时）第二十七——三十一节、实例——网页制作1-8一、图片可以直接插入到表格中、也可以作为背景插入。

注：什么时候直接插入到表格、什么时候作为背景插入呢？（1）当需要在单元格内添加文字时就必须使用背景插入。

（2）如果需要做超链接时就必须作为图片插入。

二、选择表格标签后插入表格可以将新插入的表格放在所选择表格的下面。

三、插入——图像对象——图像占位符注：插入图像占位符后就可以任意设置表格的宽度和高度。

第三十二、三十三节、实例——网页制作9-10一、添加行和列1、插入——插入表格对象2、布局标签3、Tab键（光标定位在最后一个单元格内按tab键）第三十四节、参数的优先级一、参数优先级：单元格>>行>>表格注：表格间距部分的颜色取决于表格背景颜色。

二、图像大于颜色且自动复制1、背景颜色：bgcolor2、背景图像：background第三十五节、表格中单元格大小的设置一、宽度要根据实际大小来进行设置。

二、在设置表格单元格宽度时，可以保留某一列单元格的宽度不设置。

第三十六——三十八节、细线边框表格的制作1-3一、利用表格的间距属性来制作。

二、利用表格的填充属性来制作。

第三十九节、实例——简单导航条一、利用表格的间距属性来制作。

第四十节、实例——水平细线与标题栏一、插入图像占位符二、删除单元格中的空格占位符： 第四十一节、实例——圆角表格1第四十二节、实例——圆角表格2一、height="100%"：表示高度为100%。

第四十三节、网页平面效果图一、网站在制作前首先要做网页效果平面图。

二、平面图做好以后再用photoshop、或Fireworks等软件中的切片工具做切片。

三、切片做好后并进行保存。

四、删除不要的部分，保留需要的部分并进行重命名。

第四十四节、滚动效果代码一、内容1、direction：方向2、scrollamount：速度（一般设为3）3、onmouseover=“this.stop()”：鼠标移上去停止4、onmouseout=”this.start()”：鼠标离开时开始。

第四十五节、层一、什么是层层是网页中比较特殊的对象，它可以自由移动、显示或隐藏，同时还可以相互嵌套、叠加，所以很大程度上弥补了表格排版的不足。

但是层的定位比较难处理；同一个网页在不同版本的浏览器中显示的位置有差别，因此完全使用层排版的网页较少，它主要被用来完成一些动态效果。

二、层的作用1、可以灵活定位2、层可以嵌套层3、可以制作特效三、层的创建1、布局面板2、按住ctrl键表示连续绘制层。

2、宽/高：层的大小。

二、Z轴：代表层的次序，数值越大越在上面。

2、hidden：隐藏，如果内容超过规定的区域将会被隐藏。

3、scroll：滚动条（右边和下边都会出现滚动条）4、auto：自动，根据内容多少和层的大小来决定是否出现滚动条。

第四十九节、行为一、很多网站在页面上添加了用JavaScript来实现的动态特效，这些效果在Dreamweaver中也可以通过行为来实现。

由此可见行为主要是用来做一些动态效果、是网页中设置好的脚本特效。

二、窗口——行为三、行为组成行为由3个部分组成：它们分别是对象、事件、动作。

1、对象：指的是可以添加行为的对象。

（如图像，文字等）2、事件：触发添加在对象上的动态特效条件。

3、动作：动态特效。

四、常用事件包括有：1、onclick：按下。

2、onmouseup：释放。

3、onmouseout：离开。

4、onmouseover：经过。

第五十——五十二节、实例——菜单1-3一、菜单的制作方法1、主菜单：选中对应的单元格，加入“显示/隐藏层”显示自己，隐藏其它层。

2、子菜单：选中子菜单所在的层，加入“显示/隐藏层”行为。

当鼠标移上去显示自己，隐藏其它层，当离开时隐藏所有层。

二、窗口——AP元素注：防止重叠主要是避免绘制的层产生重叠。

第五十三节、行为2一、行为1、弹出信息：弹出一个信息窗口。

2、打开浏览器窗口。

3、设置文件——设置状态栏文本4、转到URL第五十四节、网页背景音乐的添加一、背景音乐（可以放在网页的任何一个位置，只要不破坏其它代码的结构。

）插入媒体插件

（如：姓名，年龄、联系方式等）。

在填写信息的页面上往往会包括很多表单元素，如：用户名，密码，单选框或多选框等。

所有这些表单元素合在一起，我们称之为表单。

二、表单的作用表单的主要作用是让浏览者能够有地方填写数据，然后再利用程序来收集并处理这些数据。

程序可以是：ASP、PHP、.NET、JSP等。

三、表单的创建1、在制作表单时，首先要插入表单然后再插入表单域。

2、在制作表单时，如果要用表格来定位，一定要将表格放在表单内。

3、文本域（1）字符宽度：文本域的长度（2）最多字符数：文本域中可以输入的最多字符数。

4、文本区域5、复选框6、复选框组：一次性可以创建多个复选框按钮。

7、单选按钮8、单选按钮组：一次性可以创建多个单选按钮。

框架的使用让网页的组织变得更加有序。

（框架网页一般应用于网站后台页面比较多。

）三、框架网页的制作方法1、新建一个网页2、插入——html——框架（1）左对齐（2）左侧及上方嵌套（3）上方及左侧嵌套三、框架网页的保存文件——保存全部第六十三节、框架页面属性设置1一、框架管理面板窗口——框架二、框架属性1、列值单位：象素（绝对值）和百分比（相对值）。

2、相对：其它框架设置了高度或宽度以后，剩余的高度或宽度都会分配给单位设置为“相对”的框架。

通常将值设为1。

第六十四节、框架页面属性设置2第六十五节、实例——音乐天堂1第六十六节、实例——音乐天堂2一、框架网页标题的设置整体框架代码：frameset第六十七——六十八节、库一、什么是库库是可以实现网页同步变化的元素。

二、创建库1、修改——库——增加对象到库三、使用库在要使用的地方直接插入就可以了。

四、修改库五、窗口——资源——库（在资源面板中）注：库是以单独的页面存储的，如果要调用库，要从资源面板中应用。

应用库以后的文件也可以脱离联系和关联（在属性面板改）。

第六十九节、模板一、什么是模板库可以将部分的页面内容作为一个对象插入到新的页面中，这种方法主要用于不同网页间共用相同内容的情况。

但是假如是在多个网页中，页面大部分的内容都是相同的，只有一个区域或几个域区是不同的，像这种情况用库显然不太方便，此时就希望有一种方式能将这个页面的整体结构保存，只让其中的部分区域可以进行修改就可以了。

这就是模板。

二、保存为模板文件——另存为模板注：模板一定要存放在Templates文件夹中，其他文件不要存放在Templates文件夹中，Templates文件夹必须位于站点的文件夹根目录下。

第七十节、新建可编辑区域一、建立可编辑区域右键——模板——新建可编辑区域第七十一节、模板的修改一、修改模板窗口——资源——模板第七十二节、定义可编辑标签一、定义可编辑标签修改——模板——令属性可编辑1、文本：如果需要用户在修改时输入文本，选择这项。

2、URL：即链接地址，如果要修改网页中插入的图片、链接等，可以使用这一项。

3、颜色：修改时要选择颜色，要设定网页、表格、行、列等颜色的时候，需要选择这一项。

4、真/假：极少使用。

5、数字：设置网页边界宽度、高度、表格高度、宽度，单元格高度、宽度等需要输入数值的属性时，就选择这项。

二、修改定义的标签属性修改——模板属性第七十三节、新建可选区域一、可选区域指的是让指定的区域在网页中可以显示也可以不显示。

二、新建可选区域1、插入——模板对象——可选区域2、通过常用选项栏三、设置可选区域属性修改——模板属性四、删除模板标记修改——模板——删除模板标记第七十四节、可编辑的可选区域一、可编辑的可选区域指的是让指定的区域在网页中既可以编辑也可以设置显示或不显示。

二、可编辑的可选区域1、插入——模板对象——可编辑的可选区域2、通过常用选项栏三、设置可选区域属性修改——模板属性四、删除模板标记修改——模板——删除模板标记第七十五节、重复区域一、重复区域指的是让指定的区域在网页中重复显示。

注：重复区域不是可编辑区域，如果希望重复区域可以编辑，需要在重复区域内再新建可编辑区域。

第七十六节、将模板应用于已存在的网页一、将模板应用于已存在的网页指的是将模板嵌套在当前网页中，让当前网页的内容显示在模板中新建的可编辑区域。

如果模板中存有多个可编辑区域，可以控制当前网页的内容嵌套在哪一个可编辑区域内。

二、修改——模板——应用模板到页第七十七节、分离模板（脱离模板）一、分离模板指的是将应用模板的网页和原模板进行分离，从而使网页和模板之间没有关联。

修改——模板——从模板中分离第七十八节、CSS样式一、什么是CSS样式CSS样式的全称是：CascadingStyleSheet（层叠样式表），利用它可以对页面当中的文本、段落、图像、页面背景、表单元素外观等实现更加精确的控制，甚至浏览器滚动条等浏览器的一些属性都可以通过它来调整。

更为重要的是，CSS真正实现了网页内容和格式定义的分离，通过修改CSS样式表文件就可以修改整个站点文件的风格，大大减小了更新站点的工作量。

二、CSS样式和html的区别三、CSS样式的作用1、对文字进行格式2、制作特殊效果注：简单的说，CSS样式就是用来定义网页格式的代码。

代码一般不需要手动去编写。

因为我们可以使用dreamweaver自动生成代码。

即使学员不熟悉CSS的语法也没有任何困难。

第七十九节、CSS样式的分类一、CSS样式的分类1、类（可应用于任何html元素）：自定义样式2、ID（仅应用于一个html元素）：自定义样式3、标签（重新定义html元素）：针对代码来设置的。

4、复合内容（基于选择的内容）：超链接样式（1）链接：a:link：默认。

（2）点击过：a:visited：点击过。

（3）悬停：a:hover：鼠标移上去。

（4）点击：a:active：点下去。

二、各种CSS样式的特点1、类：定义样式以后必须在需要用样式的地方手动应用它，否则就不起作用。

2、ID：同上（只能应用一次）3、标签：不需要手动应用，页面中有该定义标签会自动应用。

4、复合内容：可以为不同的链接定义不同的链接样式。

三、CSS样式保存的位置1、仅限该文档2、新建样式表文件第八十节、CSS样式表的汉化一、下载汉化文件二、将文件“Resources.dll”拷贝到AdobeDreamweaverCS6安装目录中zh_CN\Resources文件夹下面替换原文件即可。

第八十一节、CSS样式的主要参数一、类型：文本的大小、字体、颜色、样式、修饰等。

（相当于文字格式化）二、背景：背景颜色、背景图片的设定。

三、区块：文本区域的整体效果，如行间距、字符间距、文本缩进等。

（文字进一步格式化）四、方框：设定对象在网页上的位置，如间距、边界等。

（设置对象大小）五、边框：添加不同类型宽度的边框。

（设置表格边框线）六、列表：创建不同类型的列表，包括创建图片、列表符号等。

（相当于项目符号和编码）七、定位：用于层的属性定义。

包括层的类型、位置等，但因为直接在属性面板中设置层的属性更方便，因此并不常用。

（就是以前所讲的层效果）八、扩展：实现一些扩展的功能，包括换行符、鼠标形式和通过CSS样式给图片添加滤镜效果等。

九、过渡：新增功能。

第八十二、八十三节、类型参数1一、类型：文本的大小、字体、颜色、样式、修饰等。

（相当于文字格式化）1、字体（设置常用字体，如：宋体）2、大小：正文一般为12象素。

第八十四节、背景参数一、背景：背景颜色、背景图片的设定。

1、附件（1）固定（fixed）：背景图片固定不动（2）滚动（scroll）：背景图片随着文字滚动而滚动第八十五节、区块参数一、区块：文本区域的整体效果，如行间距、字符间距、文本缩进等。

（文字进一步格式化）第八十六、八十七节、方框和边框参数一、方框：设定对象在网页上的位置，如间距、边界等。

（设置对象大小，如：图片、层等）二、边框：添加不同类型宽度的边框。

（设置表格边框线）第八十八节、多样式的应用一、使用类样式Class=样式名。

Span标签的应用。

注：在这里span没有实质性意义，只是为了区分不同对象应用不同的CSS样式。

第八十九节、列表参数一、列表：创建不同类型的列表，包括创建图片、列表符号等。

（相当于项目符号和编码）类型：1、disc：圆点2、circle：圆圈3、square：方块4、decimal：数字注：先要通过属性栏应用列表后才有效果。

第九十节、扩展参数一、扩展：实现一些扩展的功能，包括换行符、鼠标形式和通过CSS样式给图片添加滤镜。

1、fliph：左右翻转2、flipv：垂直翻转3、invert：反向4、gray：去色（可加在body标签也可以加在img标签）第九十一节、标签一、CSS样式的分类1、类（可应用于任何html元素）：自定义样式2、ID（仅应用于一个html元素）：自定义样式3、标签（重新定义html元素）：针对代码来设置的。

4、复合内容（基于选择的内容）：超链接样式二、样式的应用优先次序用户可以重新定义几平所有的html标签，让它们变成自己所期望的样子。

当给不同级别的重定义html样式发生冲突时，html标签中层次越低的优先级别越高。

比如、