使用Dreamweaver制作网站

网站维护与网页制作主讲：康梅娟第2讲使用Dreamweaver制作网站2.1Dreamweaver基础操作2.2模板、多媒体元素和书签超链接的使用2.3图像热区、CSS样式的应用2.4图层的使用2.5创建时间轴动画2.6表单的应用2.7框架的应用2.8使用行为讲解提纲大任务制作“空谷幽兰”的网站的静态部分，包括扉页、首页、照片、音乐、视频、动画、文章、粉丝、北京粉丝、西安粉丝和济南粉丝共11个静态页面。站点的创建和管理网页的创建和编辑使用表格布局网页在网页中插入文本、图像和影片超链接的使用2.1Dreamweaver基础操作任务1制作“扉页”和“首页”一、站点的创建和管理１．创建站点1.创建站点-续注意:（1）可以创建多个站点（2）打开某个站点的方法“站点”|“管理站点”，选择站点，单击“完成”“文件”面板中的站点下拉列表（3）同一个站点只需创建1次，以后编辑时只需打开编辑即可（装了还原卡的机子除外）2.站点的管理（1）新建文件（2）新建文件夹2.站点的管理-续（3）文件夹和文件的移动、复制、删除或重命名（4）打开文件：双击文件名二、网页的创建和编辑1.网页的创建在“文件”面板的站点中创建从启动页面创建文件|新建2.网页的编辑（1）打开网页：文件|打开或者在“文件”面板中双击要编辑的文件名称。（2）保存网页：文件|保存；文件|另存为。（3）预览网页：按“F12”键；文件|在浏览器中预览|iexpore；单击“文档”工具栏的【在浏览器中预览/调试】按钮，并在弹出的下拉菜单中选择【预览在iexpore】命令。2.网页的编辑-续（4）设置网页标题（5）设置“上边距”为0：修改|页面属性（6）添加/删除字体：选择“字体”下拉列表的最后一项“编辑字体列表…”，打开“编辑字体列表”对话框。三、使用表格布局网页在设计网页中，表格不仅可以罗列数据，更重要的是可以用来控制网页的布局。通常，新建网页后，要先在网页中插入表格，再将其它网页元素插入到表格的单元格中。网页布局的３种解决方案：表格、框架、图层。1.表格的3种视图(1)标准视图：设计规律、简单表格(2)扩展视图：定位元素、放光标(3)布局视图：设计复杂、无规律表格2.创建表格（1）插入表格（2种方法）单击“插入”|“表格”命令单击“常用”面板中的“表格”按钮（2）表格属性面板填充：指定单元格的内容和单元格边框间的距离，单位是像素。间距：相邻单元格间的距离，单位是像素。（2）表格属性面板-续

清除表格的列宽将表格宽度转换成像素将表格宽度转换成百分比清除表格的行高将表格高度转换成像素将表格高度转换成百分比（3）为表格输入数据在表格的单元格中，可以插入文本、图片、超链接、表单、动态组件等元素，也可以插入嵌套表格。3.编辑表格（1）选中整张表格方法1:使用<table>标记方法2:单击表格任意位置，按两次Ctrl+A方法3：单击表格左上角（2）选中表格行方法1：拖动鼠标从左至右方法2：把鼠标移至要选定的行的行首，鼠标会变成粗黑箭头，单击左键，选定行方法3：使用<tr>标记（3）选中表格列方法1：拖动鼠标从上至下方法2：把鼠标移至要选定的列的列首，鼠标会变成粗黑箭头，单击左键，选定列（4）选中单元格方法1：单击某个单元格方法2：使用<td>标记（5）添加行或列修改|表格|插入行修改|表格|插入列修改|表格|插入行或列（6）删除行或列修改|表格|删除行修改|表格|删除列（7）合并单元格方法1：修改|表格|合并单元格方法2：属性面板上的“合并单元格”按钮（8）拆分单元格方法1：修改|表格|拆分单元格方法2：属性面板上的“拆分单元格”按钮小结表格的应用技巧：外围表格宽度：780像素内嵌表格宽度：百分比每一个版块都用一个单独的表格灵活运用嵌套表格四、在网页中插入文本、图像和影片1.插入文本（1）插入特殊字符：插入|HTML|特殊字符（2）插入日期：插入|日期（3）插入水平线：插入|HTML|水平线（4）空格符的键入：切换到全角中文进行输入（5）换行符：shift+Enter（6）段落标识符：Enter（7）文本的属性面板2.插入图像（1）插入图像：插入|图像或单击“常用”子面板上的【图像】按钮（2）设置图像属性3.插入滚动字幕（1）选中滚动字幕内容（2）单击“插入”|“标签”（3）选择“html标签”中的marquee，单击“插入”，单击“关闭”（4）选中marquee标签，在“标签检查器”面板的“属性”选项卡中设置属性Behavior:设置字幕运动方式Direction:设置字幕滚动方向Scrollamount:设置字幕滚动速度3.插入滚动字幕-续Scrolldelay:设置字幕滚动时停顿的时间，单位为毫秒。如果要让滚动看起来流畅，数值应该尽量小。Loop:设置字幕滚动次数，默认值为无限，“-1”也为无限。打开行为面板，添加两个行为：onMouseOver:this.stop()设置鼠标移动到滚动字幕时的动作为停止滚动。onMouseOut：this.start()设置鼠标离开滚动字幕时的动作为开始滚动。4.插入Flash影片方法1：插入|媒体|Flash方法2：常用面板|“媒体”按钮插入透明Flash五.超链接的使用1.超链接的概念超链接是指从起始端点到目标端点的一个跳转。超链接的链接目标可以是1个网页、1张图片、1首歌曲、1个office文档、1个程序等；超链接的链接目标可以是本机上的1个任意的文件，也可以是其它服务器上的1个URL，或者是某个网页中的具体位置。2.超链接路径（1）绝对路径使用完整URL,如：http://（2）相对路径链接的文件相对于当前网页的路径。注意：链接站点内部的文件最好采用相对路径。3.创建超链接（1）创建页面链接（2）创建电子邮件链接（1）创建页面链接选中文本或图像，在其属性面板的“链接”后设置。打开目标网页的方式_blank：在新的浏览器窗口中打开_parent：在父框架或上级窗口中打开_self：在同一框架或本窗口中打开_top：在顶层框架中打开（2）创建Email链接选中载体；插入|电子邮件链接，或在属性面板的“链接”后输入：mailto:电子邮箱地址模板的使用在网页中插入音频、视频在网页中插入图像查看器书签超链接的使用2.2模板、多媒体元素和书签超链接的使用任务2制作照片、音乐、视频、动画、文章页面。一、模板的使用什么是模板？为什么要使用模板？如何使用模板？使用模板举例小结一、模板的使用什么是模板？模板是一种特殊类型的文档，用于设计“固定的”页面布局；然后用户便可以基于模板创建文档，创建的文档会继承模板的页面布局。设计模板时，可以指定在基于模板的文档中哪些内容是用户“可编辑的”。一、模板的使用为什么要使用模板？减少重复劳动使相关的网站页面风格保持一致创建1次可套用多次可以一次更新多个页面

一、模板的使用如何使用模板？使用模板的前提：首先要将网站作为Dreamweaver管理的一个站点。使用模板的思路：通常制作模板文件时，只把导航条和标题栏等各个页面共有的部分制作出来，而把其他部分留给各个页面安排设置具体内容。制作模板文件与制作普通的网页的方法是相同的，但是在制作模板文件时，必须设置好“页面属性”，指定好“可编辑区域”。使用模板的步骤（1）编辑将要作为模板的页面。（2）生成模板：文件|另存为模板，将（1）保存为模板页，注意选择站点和设置模板文件名。（3）编辑模板：打开模板页，插入|模板对象|可编辑区域，可编辑区域可有多个。（4）用模板生成页面：文件|新建，选择“模板”中的（2）保存的模板页。编辑可编辑区域。（5）修改模板内容与更新站点文件。4.使用模板举例（1）制作照片模板photo.dwt(2)套用photo.dwt制作“照片”页面小结使用模板的好处使用模板的前提使用模板的思路使用模板的步骤二、插入音频、视频

方法：插入|媒体|插件切换到代码视图，设置相关属性。

autostart=“true”，自动播放Loop=“true”,循环播放三.插入图像查看器（1）准备好用到的图片（尺寸相同）（2）插入|媒体|图像查看器（3）为生成的flash文件设置保存路径和名称（4）在Flash元素面板中设置相关参数bgColor:背景颜色。captionColor:图片的标题颜色。captionFont:图片的标题字体。captionSize:图片的标题字体大小。frameColor:边框颜色。frameShow:是否显示边框。frameThickness:边框宽度。imageCaption:图片标题。三.插入图像查看器-续imageLinks:为每张图片设置链接。imageLinkTarget:设置打开链接网页的方式。imageURLs：选择图片源文件。showControls:是否显示控制台slideAutoPlay:是否自动播放slideDelay:图片播放的延迟时间。slideLoop:是否循环播放。title：图像查看器的标题。titleColor:标题颜色。titleFont:标题字体titleSize:标题字体大小。transitionType:图片切换的模式。四、书签超链接的使用先定义书签：光标定位在跳转的目标位置前；插入|命名锚记创建超链接指向书签：文件名#书签名称如果是当前网页，文件名可省略。图像热区的使用CSS样式的使用2.3图像热区、CSS样式的应用任务3制作粉丝、北京粉丝、西安粉丝和济南粉丝页面；使用CSS样式格式化所有静态页面。一、图像热区的使用图像热区是在一幅图像中划分出几个不同的几何图形区域，然后分别为这些区域建立超链接。创建图像热区的步骤：插入图像并选中；在属性面板上选择热区工具并在图像上绘制热区选定热区，在属性面板中设置链接目标二、CSS样式的使用CSS样式的概念CSS样式的三种存在方式直接插入式内嵌样式CSS样式的类型CSS样式定义外部文件方式小结二、CSS样式的使用1.CSS样式的概念

CSS，翻译为“层叠样式表”，主要用来进行页面风格设计。利用CSS不仅可以控制一个页面中的元素格式，而且可以控制多个页面中的元素格式。2.CSS样式的三种存在方式根据作用范围不同，CSS样式有三种存在方式：（1）直接插入式（2）内嵌样式（3）外部文件方式3.直接插入式作用：仅对所定义的标记起作用。用法：代码视图下，在标记中插入style属性。格式：<标记style="属性:属性值;属性:属性值;…">如：<hrstyle="color:#FF0000;height:10px"/>注意：basefont、param、script不能使用style属性。观看示例4.内嵌样式（1）用法：定义在<head>和</head>之间，其范围仅限于本网页。（2）格式：<styletype=“text/css”><!--选择符1{属性:属性值;属性:属性值…}选择符2{属性:属性值;属性:属性值…}…选择符n{属性:属性值;属性:属性值…}--></style>观看示例:未格式观看示例：套用格式后（3）使用内嵌样式的方法写代码：先在<head>和</head>之间添加style代码，然后在具体的标记中应用样式。使用CSS样式面板(需掌握)。*1.窗口|css样式*2.新建css规则*3.设置样式类型，定义在“仅对该文档”*4.设置规则*5.选中元素，套用样式（在属性面板的“样式”或“类”下拉列表中选择样式名称或在css样式面板中右击相应的样式名称选择“套用”。）（4）使用內嵌样式举例举例.xiaobiaoti（类）

、p（标签）.xiaobiaoti:宋体、18px、粗体、#4E6735、文本对齐（居中）、空格保留，定义在当前文档。p：宋体、14px、行高20px、黑色、左对齐、文字缩进28px，定义在当前文档。5.CSS样式的类型（1）类：根据用户的需要创建一个CSS样式属性，可应用到文字，图片等网页元素中；样式的名称必须以“”开头。先定义后套用。（2）标签：重定义HTML标记的默认格式。只需定义，使用到该标记时会自动套用格式。（3）高级：为某个标记组合定义样式，可用于定义超链接的4种状态的样式。只需定义，使用到该标记时会自动套用格式。CSS样式举例

.image（类）:方框宽80px，高150px高级:A:link

（文本超链接）：宋体、16px、黑色、无修饰A:active

（激活超链接）:宋体、16px、#FF0000、删除线A:hover

（鼠标悬停在超链接）：华文行楷、16px、#4A37AB、下划线A:visited

（访问过的超链接）：宋体、16px、黑色、无修饰

6.CSS样式定义（1）类型：设置文本或段落的样式（2）背景：设置元素的背景色或背景图像（3）区块：设置元素的对齐方式、放置位置（4）方框：控制元素在页面上的放置方式，如图片、表格的大小，表格的填充，页面的边界等。（5）边框：定义元素周围的边框的设置（如表格的边框的宽度、颜色和样式）。

6.CSS样式定义-续（6）列表：设置列表（如项目符号列表、编号列表）的样式（7）定位：定义层的默认显示样式。（8）扩展：包括过滤器、分页和光标选项。对样式所控制的对象应用特殊效果可提供分页设置改变指针图像7.外部文件方式（1）作用：可在每个网页中引用，可使整个网站的网页在风格上保持一致。（2）用法：将css写成一个文件的方式，在网页头部引用该文件。注意：样式表文件的扩展名为.css。应用格式前应用格式后（3）使用外部文件方式的方法（需掌握）*1.新建css规则时，定义在“新建样式表文件”或已有的样式表文件*2.打开需应用样式的网页，单击“附加样式表”按钮*3.选择样式表文件*4.链接或导入*5.“类”样式需手工套用，“标签”和“高级”自动套用（4）使用外部文件方式举例.dabiaoti：宋体、36px、粗体、黑色、垂直居中、水平居中，定义在style.css中。body：在“背景”中设置背景图像，在“方框”中设置“上边界”为0，定义在style.css中。小结统一整个站点风格，用外部文件样式；统一某个网页风格，用内嵌样式；调整网页内部某个标记时，用直接插入式。三种样式可在同一网页中同时使用，如果其设置的样式发生冲突，则按优先级起作用。优先级别：直接插入式>内嵌样式>外部文件方式2.4图层的使用图层可用于网页布局图层可放在网页中的任意位置图层中可以插入任意元素图层可以移动、重叠、显示或隐藏使用图层，可以制作出三维效果图层和时间轴配合，可以制作动画图层应用实例-三维效果观看页面1创建层插入层：“插入”|“布局对象”|“层”绘制层：“布局”面板|“描绘层”按钮单击“描绘层”按钮后，按下【Ctrl】键不放，可连续绘制多个层。2.层重叠

在层控制面板上将“防止重叠”选项取消选中，可创建重叠的层。否则，将无法创建重叠的层。层的最大优势之一就是可以重叠，层的重叠次序是用“z轴”来表示。“z轴”上的值可正可负，也可为0，数值大的层在上面。

3.层嵌套

先在文档中插入一个层。将光标置于该层内，然后“插入”|“布局对象”|“层”4选择层单击层的激活标志。单击【窗口】|【层】命令，打开“层”面板，在“层”面板中单击层的名称，这种方法也适用于选择隐藏的层。

单击层边界，按住【Shift】可以同时选定多个层。在层面板中单击层的名称，按住【Shift】可以同时选定多个层。5插入层对象当光标移入层内时，可以插入网页元素，如文本、图像、层、表单、表格等。在层中插入网页元素的方法与在编辑窗口中插入方法一样。6移动层选定层，按住鼠标左键不放拖动。选定层，按键盘上的四个方向键，每按一次，移动1个像素，如果同时按住【Shift】键，每次可移动10个像素的距离。

7对齐层层的对齐方式包括左对齐、右对齐、顶端对齐和底部对齐。执行对齐方式后，各层将以最后一个选定的层为基准对齐。先按住“Shift”键的同时用鼠标选择层，然后单击菜单【修改】|【对齐】中相应的对齐方式或按“Ctrl+相应的方向”键。8设置层属性单个层的属性

“层编号”：层的名称，具有唯一性。“左”和“上”：层相对于页面或父层的左上角相对位置。“宽”和“高”：层的宽度和高度，如果层中内容超过指定大小，这些值被忽略。“Z轴”：层的重叠顺序。编号大的层出现在编号小的层上面。单个层的属性“可见性”：层的初始显示状态，包括显示Defaule（默认）、继承Inherit、可见Visible、隐藏Hidden四种。“背景图像”：指定背景图像。“背景颜色”：指定背景颜色。

多个层的属性当选中多个层时，层属性面板将显示文本属性和普通层属性的子集，它可以允许一次修改多个层。

9层的应用在网页设计中，层能方便地定位页面元素、显示或隐藏网页中的一些内容。层除了象表格一样可以设定背景、设定位置、自由移动、控制显示外，还可以轻松建立三维效果，我们可以使网页中的对象在垂直方向互相重叠，再配合时间轴的应用做出既美观又具有动感效果的网页。

图层的应用-背景音乐插入1个图层在图层中插入插件（插入|媒体|插件）设置插件能够自动播放设置图层的可见性为hidden补充：插入flash按钮在插入之前，必须先保存网页插入|媒体|Flash按钮插入后会自动生成一个.swf文件另存为：设置生成的swf文件存放路径，如：flash\enter.swf，注意“\”的方向注意：flash按钮的存放路径（在磁盘上的完整路径）中不允许有中文目录名。补充：插入flash按钮选中flash按钮，单击属性面板上的“播放”，可观看效果；如要更改设置，如更改按钮的样式，可单击属性面板上的“编辑”按钮。2.5创建时间轴动画时间轴是一种用来控制网页中的层在每一秒的位置的工具。它通过在不同的时间改变层的位置、大小、可见性或叠放顺序等来创建动画。用时间轴做动画可以满页飞,依赖时间轴设计的动画是建立在图层基础上的。

1时间轴控制面板Dreamweaver提供时间轴面板，用来设置和控制时间轴动画。要打开和关闭时间轴面板，按“Alt+F9”键或单击菜单【窗口】|【时间轴】命令。

2创建时间轴动画直线运动动画简单曲线运动动画复杂曲线运动动画使用时间轴改变图像属性使用时间轴改变图层属性直线运动动画插入1个图层，在图层中放置元素（输入文本或插入图像等）ALT+F9，打开时间轴面板选中图层，按住鼠标左键不放，将其拖动到时间轴的某一条动画通道中；或右击，在弹出菜单中选择“添加到时间轴”分别在起始关键帧、结束关键帧处将图层拖动到所需的位置选择“自动播放”和“循环”简单曲线运动动画先完成直线运动动画的制作（参照上页）在起始关键帧和结束关键帧之间选择1帧，如第8帧，右击，选择“增加关键帧”，然后在该帧处将图层拖动到所需位置。如需要，可重复第步。复杂曲线运动动画-记录路径插入1个图层，在图层中放置元素（输入文本或插入图像等）ALT+F9，打开时间轴面板选中图层，单击“修改”|“时间轴”|“录制层路径”，将鼠标指针移到图层左上角的标志处，变成“+”后，按住左键不放并拖动绘制1条封闭曲线（运动轨迹）。选择“自动播放”和“循环”使用时间轴改变图像属性插入图像1，如aoyun1.jpgALT+F9，打开时间轴面板选中图像，按住鼠标左键不放，将其拖动到时间轴的某一条动画通道中用鼠标拖动动画条右端的结束关键帧标记，将第15帧拖动到第45帧在第15、30帧处分别右击，选择“增加关键帧”使用时间轴改变图像属性在第15帧处，选中图像，单击其属性面板中“源文件”文本框右边的“浏览”按钮，更换1张图像，如aoyun2.jpg在第30帧处，将图像的源文件更换为aoyun3.jpg，操作步骤同第步。选择“自动播放”和“循环”。注意：该动画不需要用图层。使用时间轴改变图层属性插入图层，为图层设置背景图像，如fj.jpg，将图层的宽度设置为1像素，高度设置为背景图像的高度ALT+F9，打开时间轴面板选中图层，按住鼠标左键不放，将其拖动到时间轴的某一条动画通道中；或右击，在弹出菜单中选择“添加到时间轴”在结束关键帧处将图层宽度调整为背景图像的宽度选择“自动播放”和“循环”练习鸟群的变化绕复杂曲线运动的变换图像动画2.6表单的应用认识表单创建表单网页的步骤添加表单对象检查表单表单标签引言表单的作用是获取web站点访问者的信息，实现用户和服务器之间的交互。搜集用户的个人资料信息、订单信息等，都要用表单来搜集，然后将搜集到的信息提交给服务器来处理。一.认识表单表单是由文本和表单控件组成的，用户在表单中键入或选择相关的信息，单击“提交”按钮将信息传给服务器，由服务器处理收集到的信息，并将信息保存到特定文件中。一个完整的表单包含表单对象和表单处理程序两部分。表单对象用来收集用户信息，表单处理程序负责向服务器提交表单。只有将表单与某个表单处理程序关联之后，才能实现该表单功能。一个网页中可以有多个表单，但一个表单中不能再嵌入表单。二.创建表单网页的步骤(1)插入表单(2)在表单中插入表格(3)在表格中插入说明性文字和表单域三.添加表单对象插入表单的2种方法：插入|表单|“相应的表单对象”命令单击表单面板上的相应按钮表单的属性面板动作：指定表单处理程序所在的文件，可以是一个网址，也可以使用以mailto:为前缀的邮件地址，将表单数据发到指定的邮箱。方法：表单数据传输到服务器的方法。post：传递大量数据、安全性高Get:传递少许数据，安全性低2.添加文本域（1）文本域的类型：单行文本域：输入短数据多行文本域：输入较长文本密码域：输入密码（2）文本域的属性面板字符宽度：允许显示的字符数最多字符数：允许输入的字符数初始值：默认的显示文字3.添加单选按钮组Label:选项内容布局：按钮组的外观风格。表格，表格式的单列表；换行符，没有表格线的单列表。4.添加复选框复选框的属性面板初始状态：初始选中状态选定值：选中复选框后控件代表的值5.添加按钮“按钮”属性面板标签：按钮上的显示文字动作：提交表单，用来提交表单数据；重设表单，用来取消表单输入内容，重新输入；无，根据处理脚本执行相应操作。6.添加列表框类型：设置列表框外观。菜单，显示为下拉列表框；列表，显示为带滚动条的平铺列表框。列表值：设置列表项目。初始化时选定：设置列表框中初始值允许多选7.添加文件域使用文件域时要求将表单的方法设置为post。四、检查表单可以为表单或文本域添加行为，用来检查指定文本域的内容是否符合规定，以确保用户输入的正确性。五、表单标签<form>表单内容</form>小结表单的概念表单的作用创建表单网页的步骤表单的插入和属性设置常用表单域的插入和属性设置2.7用框架布局页面框架也是一种设计网页布局的技术。框架将一个浏览器窗口划分为多个区域，每个区域显示不同的网页内容。一组框架构成的网页被称为一个框架集。框架集是一个网页，用来存储页面的框架结构，包括框架的大小和位置信息等。可把它看作是容器。其中，每一个框架都对应一个页面文件。在框架集中，一般情况下，可以用其中的一个框架来保持网页中固定的内容，如网页大标题、导航菜单等，用一个框架来展现所选择的网页内容。1.创建框架和框架集插入预定义框架集在“布局”面板上单击“框架”按钮，在下拉菜单中选一个框架集样式。1.创建框架和框架集用户自己设计框架集上下拖框架集的边框左右拖框架集的边框拖动框架集的边框角修改|框架集2.选定框架和框架集用鼠标选中框架或框架集按下Alt键，单击欲选中的框架的任意位置利用框架面板选中单击框架内的任意位置，可选定框架单击框架面板四周的边框，可选定框架集3.设置框架边框的显示和隐藏查看|可视化助理|框架边框4.删除框架和框架集删除框架，将该框架边框拖到父框架的边框上或拖离页面删除框架集，要么不保存，要么删除该框架集文件。5.框架和框架集属性面板（1）“框架集”属性面板边框边框宽度边框颜色值和单位5.框架和框架集属性面板（2）“框架”属性面板框架名称源文件边框和边框颜色滚动不能调整大小边界宽度和边界高度6.保存框架和框架集一个包含n个框架的框架页所包含的网页个数为n+1。在保存时，需要将其保存成n+1个不同的文件。命名框架中的各个网页时，要做到见名知意。6.保存框架和框架集（1）保存框架集文件|保存框架页如果框架集文件是主页，需保存为index.htm（2）保存框架文件|保存全部7.在框架中插入文本、图像和表格直接在每个框架中插入直接编辑某框架对应的页面文件2.8使用行为行为，是将JavaScript代码放置在文档中，使访问者能够与网页进行交互，从而以多种方式更改页面或执行某些任务。行为由事件和该事件触发的动作两部分组成。事件指示网页的访问者执行了某种操作，