我爱自学网DreamweaverCS6课程笔记.doc

我爱自学网原创出品Adobe DreamweaverCS6课程笔记第一节、Dreamweaver CS6软件简介和安装1、DreamweaverCS6是由美国Adobe公司最新开发的一款网页设计、网站管理为一体的专业软件。2、为了保让能够正常安装，在安装时，请断开网络。第二节、DWCS6软件界面的简介一、软件界面组成1、菜单栏2、工作区3、属性栏4、浮动面板（文件、资源、CSS样式、行为等）二、界面的切换：为满足不同人群的需求。三、界面的恢复：窗口工作区重置设计器四、插入面板的调用。第三节、网页相关知识1、DreamweaverCS6是由美国Adobe公司最新开发的一款网页设计、网站管理为一体的专业软件。2、什么是网页（网页的概念）在互联网上基于http协议传播信息的页面。3、什么是网站反应同一主题的多个网页的集合。4、网页内容的组成(网页元素)（1）文字（2）图片（jpg，gif，png）（3）动画（swf，gif）（4）多媒体（5）超链接（6）表单（7）网页特效（8）其它元素第四节、网页制作方法与站点建立1、网页的制作方法（1）代码法：html（2）软件制作：Dreamweaver 、frontpage（所见即所得）。2、制作网站前准备工作：建立站点。3、站点：用来存放网站中所有元素的文件夹，为了制作方便需要将这个文件夹和制作软件相链接。4、站点的建立(链接)（1）站点建立（2）文件面板（3）应用程序栏（窗口应用程序栏）5、站点的分类（按照网站的位置）（1）本地站点（2）远程站点第五节、规划本地站点目录结构1、规划本地站点目录结构（1）images（图片）（2）swf（动画）（3）css（CSS样式）（4）script（存放网页特效）JS（5）other（其它）2、网站主页名称（1）index.htm（2）index.html（3）default.htm（4）default.html注：主页必须放在网站的根目录下面，同时名称也有特殊的要求。第六、七节、网页中文字的输入1-21、网页的四个视图（1）设计视图（2）代码视图（3）拆分视图（4）实时视图2、网页中的文字（1）文字直接输入就可以了。（2）回车表示换段。（3）shift+回车：表示换行。（4）输入空格时要在全角输入法状态下输入。（5）特殊字符的插入：“插入html特殊字符”（6）文字也可以从网站中复制，但是在复制时需要将网页中文字的格式去掉。（注：如何去除复制来的文字格式，只需要将文字粘贴到记事本中，然后从记事本中再复制文字就可以了。）3、预览网页：文件在浏览器中预览IExplore（快捷键：F12）第八、九节、页面属性1-21、页面属性（1）修改页面属性（2）或通过属性栏2、属性（1）左边距、右边距、上边距、下边距。（2）文字字体、大小、颜色。注：A、字体：选择常用字体。如：宋体B、大小：正文文字一般设置为12-16px。（3）页面背景。（4）背景图片。（默认情况自动填充、平铺）注：A、图片要放在站点内。（有关网站中的所有元素都必须放在站点内）。B、图片名称不能为中文。注：如果同时设置背景颜色和背景图片，以背景图片为准。第十节、Html网页基本代码格式1、网页基本代码注：（1）head：开头部分（2）title：标题（3）body：正文部分2、常用代码（1）：换段（2）：换行注：多数html代码都有对称性的特点。第十一节、图片的插入一、图片1、图片格式（1）JPG：图片质量较高，一般用于较大的图片。如：人物、风景。（不支持透明）（2）gif：用于制用按钮、动画、导航条等，图片较小，只有256种颜色。（支持透明）（3）png：兼有两种格式的特点。（支持透明）注：图片的大小一般尽量控制在200K以下。2、链接（1）_blank：在新的网页打工。（2）_self：在自身网页打开。第十二节、图片热点1、热点（1）矩形热点（2）圆形热点（3）多边形热点注：编辑首选参数辅助功能图像2、替换（1）用于图片的注释。（2）当图片无法显示的时候用此内容代替。3、宽度和高度的设置4、相关html代码（1）Img：图片。（2）Src：位置。（3）热点：第十三节、图片的编辑一、裁剪、亮度对比度、锐化注：使用Dreamweaver编辑图像是个不好的习惯，如果要编辑图像，最好使用专门的图像编辑软件（如：Fireworks、photoshop），编辑好了以后，再重新插入进来。二、插入图像对象鼠标经过图像三、水平线的插入插入html水平线四、背景颜色的代码：bgcolor第十四节、超链接一、超链接指的是通过点击一个对象可以链接打开另外一个对象（网页、图片、程序等）。二、链接的代码（即链接的标签）内容文字三、超链接的状态（修改页面属性链接）（1）链接：链接默认颜色。（2）变换图像：鼠标移上去时的颜色。（3）已访问：访问以后链接的颜色。（4）活动：鼠标点下去时的颜色。第十五节、超链接打开方式一、链接页面打开的目标：_blank：新窗口打开网页New：新窗口打开网页_parent：父窗口（框架结构）_self：自身窗口、原窗口_top：顶窗口（框架结构）第十六、十七、十八、十九节、超链接对象一、超链接的对象（1）文字（2）图片（3）热点（4）空链接（#）（5）邮件链接：mailto：邮箱地址（可以利用菜单命令直接插入）（6）下载链接（浏览器打不开的内容即为下载链接）（7）锚点链接（链接到网页的具体位置）步骤：（1）创建锚点（2）制作链接（#锚记）隐藏锚点：编辑首选参数不可见元素注：锚点链接不但可以链接本页面中的锚点，也可以链接到其它页面中的锚点。（8）脚本链接（实现特殊功能）Javascript:window.close()关闭窗口Javascript:window.print()打印文字第二十节、表格一、表格的作用1、制作表格2、定位布局二、表格的建立1、插入表格2、常用面板三、表格的元素及代码1、.：单元格2、.：行3、.：表格四、元素的选择1、单元格2、行3、表格第二十一节、表格属性一 、表格参数1、行数和列数2、宽度单位：（1）象素表示绝对值（固定值）。 （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-81、图片可以直接插入到表格中、也可以作为背景插入。注：什么时候直接插入到表格、什么时候作为背景插入呢？（1）当需要在单元格内添加文字时就必须使用背景插入。（2）如果需要做超链接时就必须作为图片插入。2、选择表格标签后插入表格可以将新插入的表格放在所选择表格的下面。3、插入图像对象图像占位符注：插入图像占位符后就可以任意设置表格的宽度和高度。第三十二、三十三节、实例网页制作9-10一、添加行和列1、插入插入表格对象2、布局标签3、Tab键（光标定位在最后一个单元格内按tab键）第三十四节、参数的优先级一、参数优先级：单元格行表格注：表格间距部分的颜色取决于表格背景颜色。二、图像大于颜色且自动复制1、背景颜色：bgcolor2、背景图像：background第三十五节、表格中单元格大小的设置1、宽度要根据实际大小来进行设置。2、在设置表格单元格宽度时，可以保留某一列单元格的宽度不设置。第三十六三十八节、细线边框表格的制作1-31、利用表格的间距属性来制作。2、利用表格的填充属性来制作。第三十九节、实例简单导航条1、利用表格的间距属性来制作。第四十节、实例水平细线与标题栏1、插入图像占位符2、删除单元格中的空格占位符： 第四十一节、实例圆角表格1第四十二节、实例圆角表格21、height=100%：表示高度为100%。第四十三节、网页平面效果图1、网站在制作前首先要做网页效果平面图。2、平面图做好以后再用photoshop、或Fireworks等软件中的切片工具做切片。3、切片做好后并进行保存。4、删除不要的部分，保留需要的部分并进行重命名。第四十四节、滚动效果代码1、内容（1）direction：方向（2）scrollamount：速度（一般设为3）（3）on mouseover=“this.stop()”：鼠标移上去停止（4）on mouseout=”this.start()”：鼠标离开时开始。第四十五节、层一、什么是层层是网页中比较特殊的对象，它可以自由移动、显示或隐藏，同时还可以相互嵌套、叠加，所以很大程度上弥补了表格排版的不足。但是层的定位比较难处理；同一个网页在不同版本的浏览器中显示的位置有差别，因此完全使用层排版的网页较少，它主要被用来完成一些动态效果。二、层的作用1、可以灵活定位2、层可以嵌套层3、可以制作特效三、层的创建1、布局面板2、按住ctrl键表示连续绘制层。3、层标的html标签是：第四十六节、层的相关属性1一、层的属性1、左/上：表示层距离页面的左边或上边的距离。2、宽/高：层的大小。二、Z轴：代表层的次序，数值越大越在上面。三、可见性1、default：默认2、inherit：继承3、visible：可见4、hidden：隐藏第四十七、四十八节、层的相关属性2-3一、背景图像二、溢出1、visible：可见，表示根据内容的多少来决定显示区域大小。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第五十四节、网页背景音乐的添加一、背景音乐（可以放在网页的任何一个位置，只要不破坏其它代码的结构。）插入媒体插件1、Hidden：隐藏播放器。第五十五六十一节、表单一、什么是表单在申请E-mail邮箱、注册会员时，网站往往会要求用户填写一些个人信息。（如：姓名，年龄、联系方式等）。在填写信息的页面上往往会包括很多表单元素，如：用户名，密码，单选框或多选框等。所有这些表单元素合在一起，我们称之为表单。二、表单的作用表单的主要作用是让浏览者能够有地方填写数据，然后再利用程序来收集并处理这些数据。程序可以是：ASP、PHP、.NET、JSP等。三、表单的创建1、在制作表单时，首先要插入表单然后再插入表单域。2、在制作表单时，如果要用表格来定位，一定要将表格放在表单内。3、文本域（1）字符宽度：文本域的长度（2）最多字符数：文本域中可以输入的最多字符数。4、文本区域5、复选框6、复选框组：一次性可以创建多个复选框按钮。7、单选按钮8、单选按钮组：一次性可以创建多个单选按钮。9、菜单或列表域（菜单只能是单选，列表可以多选）10、跳转菜单（是特殊的超链接）11、按钮：按钮有三种情况：“提交”“重置”“无”四：表单提交后有两种处理方式（1）、提交到邮箱（2）、提交到指定程序处理第六十二节、框架一、什么是框架所谓框架网页指的是具有一定版式的网页集合（是有多个网页组成），框架用来拆分浏览器窗口，在不同的区域显示不同的网页。框架的使用让网页的组织变得更加有序。（框架网页一般应用于网站后台页面比较多。）二、框架网页的制作方法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样式的全称是：Cascading Style Sheet（层叠样式表），利用它可以对页面当中的文本、段落、图像、页面背景、表单元素外观等实现更加精确的控制，甚至浏览器滚动条等浏览器的一些属性都可以通过它来调整。更为重要的是，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样式表的汉化1、下载汉化文件2、将文件“Resources.dll”拷贝到Adobe Dreamweaver CS6安装目录中zh_CNResources文件夹下面替换原文件即可。第八十一节、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标签中层次越低的优先级别越高。比如、上都定义了文字颜色、字体、大小、那么就应该以的设定为准，所有单元格里的文字都按照的格式来显示。第九十二节、复合内容一、CSS样式的分类1、类（可应用于任何html元素）：自定义样式2、ID（仅应用于一个html元素）：自定义样式3、标签（重新定义html元素）：针对代码来设置的。4、复合内容（基于选择的内容）：超链接样式（1）a:link：默认。（2）a:visited：点击过。（3）a:hover：鼠标移上去。（4）a:active：点下去。第九十三节、多种超链接样式的定义和使用一、CSS样式的分类1、类（可应用于任何html元素）：自定义样式2、ID（仅应用于一个html元素）：自定义样式3、标签（重新定义html元素）：针对代码来设置的。4、复合内容（基于选择的内容）：超链接样式（1）.a1:link：默认。（2）.a1:visited：点击过。（3）.a1:hover：鼠标移上去。（4）.a1:active：点下去。第九十四节、CSS样式的保存位置一、CSS样式的保存位置1、仅限该文档（仅对定义的文件起作用）2、新建样式表文件（任何一个文件都可调用）第九十五节、一般站点CSS样式的设置一、一般站点CSS样式的设置1、body标签：边距、背景2、td标签：文字格式（全局文字格式）3、复合内容（超链接）4、根据要求设置特殊样式（用类来设置）5、保存位置选择“新建样式表文件”。第九十六节、实例CSS样式的综合应用1第九十七节、实例CSS样式的综合应用21、复制CSS样式：按住ctrl键拖动。第九十八节、实例CSS样式在表单中的应用第九十九节、什么是IP地址和域名一、什么是IP地址？我们知道，在Internet上有千百万台主机，为了区分这些主机，人们给每台主机都分配了一个专门的地址，称为IP地址。通过IP地址就可以访问到每一台主机。IP地址由4组数字组成，每组数字都不大于256，各组数