Dreamweaver(30课时)
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Dreamweaver（3０课时）
第一讲基本界面、基本工具的使用
Dreamweaver是制作网页的工具，我们平时上网看到的各个网站的网页都是用Dreamweaver编辑的，然后再加入一些动态语句。
这些网页都是由Html语言编写生成，而我们在使用Dreamweaver编辑网页的同时，这个软件就已经自动生成这种语言了。
首先，我们先来说说最简单的Html语言。
Html语言
Html语言有自己特有的格式：<html><head><title>标题
</title></head><body>正文内容</body></html>。
这就是最基本的格式了，其中<html>...</html>是该语言的基本格式，所有的内容都包含在它们之间，
<head>...</head>部分是头的部分，主要是放置标题，而标题就放在
<title>...</title>之间，<body>...</body>之间是编辑正文的地方，所有的内容都放在这里。
至于其中的一些语句，我们在这里就不再多提。
注意事项
Dreamweaver中是有一个相对路径的概念的，我们做网页过程中用到的所有图片和所有的网页文件，还有声音、SWF等等的文件都要放在一个总的文件夹里，而这个文件夹就是我们所说的站点，Dreamweaver中可以建立一个站点，但是现在来讲是非常的抽象的，所以我们先用前面的办法代替，后面再来讲解有关站点的概念。
另外，我们在做网页文件的时候要记得，打开软件后，就先把我们要做的网页文件保存到事先建好的站点里，这样是为了避免你插入图片时出现错误。
最后，站点里的所有文件的名称都不能为汉语名，必须为英文名或者是数字命名的。
介绍软件界面
打开Dreamweaver软件，我们会发现它的界面和我们前面学过的软件有些不同。
我们先来说说它的界面。
首先是标题栏；接着是菜单栏；下面
是软件的显示方式，从左到右依次为只显示源文件、源文件和文档窗口同时显示、只显示文档窗口。
有两个浮动的面板：一个是工具面板（Window >= Object），另一个是工具属性面板（Window >= Properties）。
其中工具面板可以设置选中对象的属性。
设置页面属性
设置整体页面的属性可以选择菜单Modify >= Page Properties或者直接在文档窗口里单击鼠标右键选择Page Properties会出现页面设置对话框。
其中：
Title:标题，设置浏览器标题栏中的内容；
Background Image：设置背景图片的，背景图片是平铺在网页中的；
Background：改变整体的背景色；
Text：设置一般文字的色彩；
Links：设置链接文字的色彩；
Visited Links：设置点选过的链接文字的色彩；
Active Links：设置点选链接文字时显示的色彩；
Left、Top：设置内容距浏览器左边、顶边的距离；
其它的几项不要设置了，使用默认的即可。
图片的插入和编辑
插入图片是用工具面板左上角的工具。
图片插入后，选中后，可以在属性面板里设置图片的属性。
属性面板的左上方有一个缩略图，右边有Image字样，旁边是图片文件的大小，下方的空格可以键入文件名（只在Html和动态语句中调用的文件名）；W、H可以设置图片的宽度和高度；Src显示的是图片的来源位置；Link：可以设置链接的目标页面；Align：图片旁的文字的排列方式；Alt：图片的注释，就是在浏览器中鼠标放在图片上时，图片的右下角出现的文字；Vspace、Hspace：图片在垂直方向、水平方向上与文字的间距；Target：链接时窗口的弹出方式；Border：图片边框的宽度；Edit：编辑图片；Reset Size：重置图片大小。
文字的输入及属性
在文档编辑区直接输入文字就可以了，选中要编辑的文字，在属性面板里设置文字的属性。
属性面板中Format：可以改变字体的大小（整段文字）H1最大，H6最小；Size：可以设置选中文字的大小；右侧的颜色块可以设置文字的颜色；B、I：加粗、倾斜；接着可以设置段落的对齐方式；Link：使者选中文字的链接；Target：设置链接的窗口的弹出方式；后面的按钮可以在文本前创建清单，加项目符号。
表格的插入和编辑
插入表格是用工具面板左上角的工具，弹出窗口，可以设置Rows（行数）、Columns（列数）、Width（表格宽度，单位有像素、百分比）、Border （表格边框）、CellPadding（单元格空白区域即内容与格边线距离，默认为1个像素）、Cell Spacing（单元格间距，默认为2像素）。
表格插入后，选中表格，可以在属性面板里设置图片的属性。
左上方有一个缩略图，右边有Table Name，可输入名字；Rows：行数；Cols：列数；W、H：表格宽度、高度；Cellpad：单元格空白区域；CellSpace：单元格间距（可以看出：新建表格时设置属性和在属性栏里设置都是一样的）；Align：表格的对齐方式；Border：边框宽度；另外还有清除高、宽；像素、百分比转换；Bg Color：表格内的背景色；Brdr Color：边框颜色；Bg Image：表格内的背景图片。
设置单元格属性。
将光标定位于一个单元格上可以设置当前单元格的属性。
其中，属性面板上半部分和文字的属性设置一样，下半部分：cell下面的两个按钮为合并、拆分单元格；Horz：设置单元格内的内容的水平方向的对齐位置；Vert：设置单元格内的内容的竖直方向的对齐位置；W、H：设置当前单元格的宽和高；Bg：设置当前单元格的背景图片；有颜色块的设置当前单元格的背景颜色；Brdr：设置边框的颜色。
第二讲图层、翻转图、链接的制作
Dreamweaver中的图层不同于其它三个软件的图层，但是Dreamweaver中可以有多个图层，并且各个图层可以重叠，可以编辑，可以隐藏。
图层的建立
Insert >= Layer，或者选择工具面板中的，在文档中画一区域即可。
选中图层，用鼠标按住图层左上角的空心矩形块，可以将图层移动位置。
在图层中单击鼠标，将光标定位在图层中，可以编辑图层里的内容，可以进行插入表格、插入文字、插入图片等操作。
选中图层可以使用Edit >= Copy / Paste，进行图层的复制和粘贴。
选中图层，可以在属性面板里编辑图层的属性，其中Layer ID 是图层的名称；L:图层左边界距浏览器窗口左边界的距离；T：图层上边界距浏览器上边界的距离；W：图层的宽度；H：图层的高度；Z-Index：图层的顺序号；Vis：图层的可见性（继承，可见，隐藏）；Bg Image：图层中的背景图片；Bg Color：图层中的背景颜色；Tag：标签，在Html代码中使用的标记，建议使用Div，它可以同时被IE和Netscape支持；Clip：指定图层的哪一部分是可见的，输入的数值是距离图层4个边界的距离；Overflow：当Tag参数为Div / Span时才出现，当图层内容超过图层大小时的显示方式有4种：Visible，向右、向下扩大图层，使所有内容得以显示；hidden：只显示一部分内容；Scroll：不改变图层大小，但增加滚动条；auto：只在图层不够大时才出现滚动条。
嵌套图层：Window >= Layers图层面板。
画两个图层，在面板上，按住Ctrl键，同时，用鼠标拖住一个图层的名称向另一个图层上拖拽即可，此时，上面的图层称为下面图层的父层，下面的图层称为子层，拖动子层时，子层自己动，拖动父层时，两个图层都动。
在面板里，点前面的眼睛图标，可以显示/隐藏图层，上下位置改变图层显示的上下顺序。
用图层也可以编辑网页，只需要一个一个图层的拼凑即可，但是这样的网页在不同的浏览器里观看时，显示的位置是不一样的，所以一般不采用这样的方法进行网页的制作。
当用图层作好一个网页后，我们可以使用Modify >= Convert >= Layers to Table将图层转化为表格，这样的网页虽然位置固定了，但是会生成很多不必要的表格，所以也不采用这种方法来制作网页。
翻转图的制作
Dreamweaver中翻转图的制作有两种方式，一种是当鼠标放在一张图片上时，这张图片自身翻转成另外一幅图片，这样只需要两张图片就可以了，另外一种是当鼠标放在一张图片上时，这张图片自身翻转的同时，控制其它图片的翻转。
无论我们用哪种方式制作的翻转图，在网页中看时，都是以正常情况下显示的图片的大小为基准，这样，我们在处理图像时，为了保证每张位图图片在收看时都清晰，我们必须把它们都作成一样大小的。
首先说说第一种翻转图的制作，只需要选择工具面板里的或者
Insert >= Interactive >= Rollover Image，这时会弹出一个对话框：Image Name名称（默认即可）；Original Image初始图片（正常情况下的图片）；Rollover Image替换图片（鼠标移进图片范围时更换的图片）；Preload Rollover Image预装载图片，选中这个选项可以使浏览器在装载页面时就下载更换的图片，而不用等到鼠标移到图片上了再下载，可以避免不连贯的现象；When Clicked,Go to URL单击图片时跳转的链接页面。
另外一种方法属于特效制作，需要用到行为面板Window >= Behaviors。
在做特效之前，先要把正常情况下显示在网页里的图像都插入进来，然后分别选中这些图像，在属性面板里，将它们的名称改为你自己能够区分开的，注意名称必须为英文字母开头，且不能有汉语出现。
选中需要控制翻转的图片，在行为面板里单击“+”，出现下拉列表，选择Swap Image，弹出更换图片的对话框。
上部的列表包括了该页面上所有图片的名称，选中需要进行翻转的图片，在Set Source to中选择翻转后的图片，然后返回到上面的列表，选另外一张，在Set Source to中选择翻转后的图片,重复此操作，最后OK确定。
这样就给需要控制翻转的图片加上了翻转图的行为，而这个行为已经填加到了行为面板，需要修改，只要在行为面板上双击鼠标即可。
简单链接的制作
Dreamweaver中通常是给图片，文字加链接。
无论给谁加链接，方法都是相同的，当给图片加链接时，只需要选中图片，同样，给文字加链接时，只需要选中文字即可。
选中一个对象后，在属性面板里的Link域里面输入要链接的目标文件，如果是自己站点里的文件，可以直接输入路径和文件名，也可以点击Link域后面的黄色文件夹选择相应的文件，如果链接的是网址，必须在Link域里输入Http://www.......，如果链接的是邮件地址，必须输入mailto:123@。
当链接的是邮件地址时，还有另外一种方法，工具箱中有一个工具，选择后，弹出一个对话框，Text是需要在网页中显示的文字，E-mail是邮件地址，这里只需要直接输入地址就可以，不需要在前面加上mailto:，最后确定就可以了。
当设置完链接后（邮件除外），需要设置一下窗口的弹出方式。
在属性面板里的Target域里设置就可以了，其中：_blank目标窗口出现在新窗口，
_parent用指向页面替换它外部的帧结构，_self出现在同一帧结构里面，_top 跳出所有帧结构，指向的页面直接全屏出现在浏览器中。
第三讲分帧、表单的制作
Dreamweaver中的分帧和Flash、Fireworks里的不同。
Dreamweaver里的分帧又称为框架，是一种网页的定位工具，与时间和动画是无关的。
分帧把浏览器的显示空间分割为几个部分，每个部分都可以独立显示不同的网页。
分帧结构
点选择工具面板中的右上角按钮，选择Frames，进入分帧结构的工具面板，可以根据自己的需要，选择不同的分帧结构。
这些分帧结构是由分隔条隔开的，每一个部分是一个单独的网页。
修改分帧的属性，单击分帧的边框，选中整个帧结构，在属性面板里可以设置Border边框是否显示，Border Width边框的宽度，Border Color边框的颜色，Value:Row行，水平方向的像素，Column列，竖直方向的像素。
另外，可以在Window >=Frames打开帧面板，在帧面板中单击需要编辑的部分，在属性面板里修改属性，其中Src正常情况下显示的网页，Border边框的宽度，BorderColor边框的颜色，如果上面也设置了颜色，那么最终显示是以这里设置的为准的，Scroll是否显示滚动条，Margin Width距左边的距离，Margin Height距顶端的距离，
保存分帧结构。
File >= Save All Frames，系统弹出对话框，这时开始保存分帧结构的文件。
如何知道保存的文件是哪一部分呢，有一个诀窍，如果虚线框笼罩的是哪部分，那么当前正在保存的就是哪部分。
在分帧结构里做链接，要设置窗口的弹出方式，否则，就在自己的分帧结构里出现链接的页面。
表单的制作
我们在上网的时候经常会遇到注册，登陆等一系列的事情，而网页上面让你输入文字，选择选项的部分都是由表单和表单里的工具来完成的，当你填完这些信息后，会有响应的动态语言把你填写的内容提交到后台的数据库，而所有的这些操作都要由表单来完成。
我们现在所学习的Dreamweaver只能作出静态的网页，所以这些表单也就起不了作用了，但是我们可以用它来定位，模拟一下。
下面我们就来说说常用的一些表单。
插入表单是用工具箱中的工具。
点击工具面板右上角的按钮，选择Forms，会出现表单的工具面板。
就是插入表单的工具，如果要想连接到数据库就必须有这个工具插入的表单（红色的虚线框）；是文本输入域，网页中可以输入文字的区域，属性是TextField名称，Char Width宽度，Max Chars允许输入的最大字符数，Type（类型）：Single Line单行，Multi Line 多行，Password密码，Init Val输入默认显示的内容，Wrap（多行时）：Default自动换行，水平方向无滚动条，Off水平方向有滚动条，不能自动换行，Virtual / Physical自动换行，Num Lines设置行数（多行时）；插入按钮，属性是Button Name名称，Label标签（按钮上显示的字），Action：Submit form（提交），Reset form（重设）；复选框，属性是Check Box 名称，Checked Value类型，Initial:Checked默认状态下选中，Unchecked默认状态下不选；单选框，属性和复选框相同；下拉列表，属性是List / Menu名称，Type：Menu下拉菜单（单选），List列表（可以多选）但必须将Height高度设多一些且Selections选中Allow Multiple时可以多选，Initially Selected：默认状态下显示的内容，List Values：设置内容，"+""-"增加、删除内容，Item Label显示内容，Value数据库中显示的值；
跳转菜单，弹出对话框，Menu Items显示的列表，Text改写列表，When Selected,Go to URL当选择后，跳转的链接，Open URLs In窗口的谈出方式，Menu Name：名字，Options：Insert Go Button After Menu是否在后面加一个Go的按钮，Select First Item After URL Change跳转后返回时，显示第一条，确定即可。
属性面板里的属性和下拉列表相似。
第四讲样式表、Html样式、书签锚点的使用
样式表
Dreamweaver中的样式表是对Html语言功能的一种扩展。
例如：字号（Size）的设置只有几种，无法象Word一样的随意设置，使用了样式表就可以进行重新定义和扩展。
但是这里要注意的是虽然有时设置了很多的样式，但是并不一定所有的样式都会起作用。
要设置样式表必须使用样式表的面板Window >= Css Styles。
要建立一个Css样式，可以在Css Styles样式面板上面点击下面的New...按纽，或者是点
击编辑按钮后，在弹出的窗口中选择New...选项，就可以创建新样式表了。
在弹出的新样式对话框里面，我们可以看到有3种类型的样式可供选择，分别为Make Custom Style（Class）：自定义样式、Redefine Html Tag：重新定义Html标记符（将Html的标记给改变了，所以一般不改变这个样式）、Use CSS Selector：使用CSS选择器（只设置链接文字的状态的）。
当选择自定义类型时，上面的Name项可以输入名称，需要注意的是名称前面有一个点号，这个点号是不能丢掉的。
加点号的目的是让浏览器知道这是一个样式类，而不是Html的标记符。
当选择Css选择器时，Name变成了Selector，有四种类型：a:active：鼠标点住链接文字时，文字显示的状态、a:hover：鼠标滑过链接文字时，文字显示的状态、a:Link：链接文字的初始状态、a:visited：点完链接文字时，文字显示的状态。
下面的Define里的选项是New Style Sheet File：保存Css样式表；This Document Only：将Css样式表直接插入原代码中。
全部设置完后，单击OK就可以进入样式定义对话框了。
这个对话框的左侧有8类属性可以设置，但是并不是每个属性都经常用到的，下面我们就来说说经常用到的几个属性。
Type类：Font设置文本的字体，但是为了让所有的机器显示的字体都相同，我们这里通常是不设置的；Size设置文本的大小，可以选择，可以手动填写，并可以选择单位的；Style设置文本的倾斜；Line设置文本的行高，其实就是可以设置行间距；Weight设置文本的加粗；Variant使用小型大写字体，这种版本并非所有字体都有；Case可以使文本强制大写、小写和每个单词的首字母大写；Decoration设置一些修饰属性，如下划线、上划线等。
Background类：Background设置背景色；Background Image设置背景图片；Repeat背景图片的重复放置的方式；Attachment设置背景图片是固定在背景上，还是附着于文本；Horizontal和Vertical设置背景图片的水平和垂直位置。
Border类：设置边框的。
设置完后，单击OK钮即可，如果前面是在Edit按钮的模式下新建的，那么还要在Edit模式下点击Done。
如果建立样式时是选择的自定义类型，那么这个样式的名称会显示在Css 面板里，如果建立样式时是选择的后两种类型，那么改变后的名称不会出现在Css面板里，但是点击Edit按钮后会在编辑面板里看到。
样式的删除：直接在样式面板中选择样式，单击面板中的“垃圾箱”即可，如果选择的是后两种类型，那么需要在编辑面板里面选中相应的样式，然后选择Remove按钮删除。
样式的编辑：单击编辑按钮，进入编辑面板，再选中样式，点击Edit按钮即可进行编辑。
Html Styles
只对选中的文字或者是整段文字进行编辑。
可以在Window >= Html Styles打开。
Html的活动面板中有两类的属性，其中一类是前面带有一个小写的带下划线的a，这表示选择样式可以应用到选择好的文字上，另一类是段落样式，应用到整个段落上。
带有红色的线的样式就是表示清楚文字所带的样式，Clear
Selection Style清除选择样式，Clear Paragraph清除段落样式。
我们也可以自己定义样式。
选择面板下方的新建按钮，会出现样式设置面板，其中：Name表示样式的名称；Apply To选择制作何种样式，包括Selection选择文字样式和Paragraph段落样式；When Applying当应用样式的时候，包括Add to Existing style添加到原来文字的样式上，Clear Existing Style清除原来的样式；Font字体；Size字号；Color文字颜色；Style样式B粗，I斜；当上面选择了段落样式，下面的Paragraph可选，其中Format字体的标题号；Alignment对齐方式，分别为左中右。
书签锚点的链接
前面已经介绍了链接，但是所介绍的链接都是两个页面之间的链接，不能在同一个页面里进行跳转链接，如果要想在同一个页面里进行跳转链接，就需要用到一个小东西叫做锚点。
概念很形象，在某一个地方抛锚，然后超级链接指向锚，单击链接就可以跳转过去。
下面来说说如何制作这种链接。
先将光标定位在需要跳转到的地方，然后，将工具面板的右上角的三角按钮选择Invisibles,进入该工具面板，单击第一个按钮，会弹出对话框，在对话框的输入域中输入锚点的名称（不能使用中文），OK即可。
这时，在光标的位置有一个黄色图标出现，是锚点的标志，不会影响页面的排版。
选中需要进行链接的文字或者是图片，在属性面板Link域后面的上按住鼠标左键不放，拖动鼠标到锚点标志上，这样就完成了一个锚点链接。
或者选中文字或者图片后，在属性面板里的Link域里直接输入“#锚点名称”即可。
图片上的热点链接
给图片加上热点链接会在一张图片上实现多个局部区域指向不同的网页链接。
方法是，先在网页中插入一张图片，然后选中图片，在属性面板的左下角选择不同的按钮，在图片上画出不同的区域（热区），然后，分别选中每个热区，在属性面板里的Link域里输入链接。
第五讲时间轴、特效的制作
时间轴
Dreamweaver中的时间轴也称为时间线，主要用来制作网页中的浮动图标。
可以通过Window >= Timeline打开时间线面板。
这里有一点需要说明：浮动图标必须用到图层，只有将图片插入到图层中才能制作出浮动动画，单一的图片是不能做出浮动的动画的。
制作的步骤：首先要在网页中插入一个图层，然后将光标定位在图层里，在图层中插入一张图片，将图层拖入到时间线中，释放鼠标，然后在时间线面板中将水平线段移到最左端，此时，第一帧和最后一帧都是关键帧，很短，单击最后一帧，并象右拖动，可以使线段变长，也就是时间变长，在某一帧上单击左键后定位在这帧，然后单击右键，选择Add Keyframe（加帧），在该帧上将图层拖拽到指定的位置即可，以此类推。
然后将时间线面板上的Auto play
（自动播放）和Loop（循环）选择上。
行为面板制作特效
Window >= Behaviors面板。
其中各选项的意义如下：Call Javascript调用Javascript；Change Property改变属性；Check Browser检查浏览器；Check Plugin检查插件；Control Shockwave or Flash控制Flash影像；Drag Layer拖拽图层；Go to URL跳转页面；Jump Menu跳转菜单；Jump Menu Go带Go按钮的跳转菜单；Open Browser Window打开浏览窗口；Play Sound：播放声音；Popup Message 弹出消息；Preload Images预装载图片；Show-Hide Layers显示/隐藏图层；Swap Image更换图片（翻转图）；Swap Image Restore恢复翻转图。
这些特效并不是每个都经常用到，我们只制作其中的几个特效。
Popub Message（弹出消息）：选中后在弹出的对话框里输入需要弹出的文字，可以连续设置多个弹出消息框。
Set Text >= Set Text of Status Bar（设置状态栏的显示消息）：做法同Popub Message，但不能设置多次。
Go to URL（跳转页面）：可以不必等访问者单击链接就直接装载新页面。
选中后在弹出的对话框里输入目标地址。
Show-Hide Layers（显示/隐藏图层）：使用此选项时，网页上至少要有一个图层，可以在弹出的窗口里选择相应的图层名称，并在下面选择是让图层显示还是隐藏。
Open Browser Window（打开浏览窗口）：在弹出的对话框里的URL to Display选择弹出的网页文件，Window Width/Height设置弹出窗口的宽和高，Navigation Toolbar：是否弹出常用工具栏，Menu Bar是否弹出主菜单，Location Toolbar是否弹出地址栏，Scollbars as Needed是否出现滚动条，Status Bar是否出现状态条。
Drag Layer（拖拽图层）：Basic：Layer选择需要拖拽的图层，Movement 设置拖拽方式，是否强制（限定矩形范围），Drop Target距左边、顶端的距离，Snap if Within____Pixels of Drop Target抓点的范围（容差值）；Advanced：Drag Handle指定拖动图层的响应范围，即鼠标在哪个位置才能拖动图层，Entire Layer任何位置都可拖动，Area Within Layer指定拖动范围，选中以后在后面的定位输入框中输入（这时是相对图层而言的）；While dragging：多个拖动图层时，决定显示关系。
滚动字幕的制作
滚动字幕需要在原文件里制作，可以先将要进行滚动的文字（图片也可以）输入到文档里，选中后进入到原文件的编辑区，这样会自动停留在相应的位置，在文字或者是图片的前面加上<marquee>，文字或图片的后面加上
</marquee>，这样做出的滚动是水平方向的滚动，从显示器的右侧滚动到显示器的左侧，对于它的滚动范围我们可以加表格来控制一，主要是水平方向的滚动范围，另外，我们可以在<marquee>里面加上滚动的速度控制
scrollamount=1或者任意的数值，还有鼠标放上时滚动的状态
onmouseOver=stop()（鼠标放上时停止）onmouseOut=Start()（鼠标移走后继续运行），写出来就是这样的<marquee scrollamount=1 onmouseover=stop() onmouseout=start()>文字或图片</marquee>；另外，这样做出的滚动是水平方向的滚动，下面我们来做做竖直方向的滚动，<marquee direction=up。