网页培训DREAMWEAVER8讲义Word格式文档下载.docx

网页培训DREAMWEAVER8讲义Word格式文档下载.docx

《网页培训DREAMWEAVER8讲义Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《网页培训DREAMWEAVER8讲义Word格式文档下载.docx（24页珍藏版）》请在冰豆网上搜索。

用于调试一些包括脚本的文件“文件”“在浏览器中调试”—“iexplore”

5、设置页面属性

“修改”—“页面设置”；

右键单击编辑区—“页面设置”

6、导入WORD文件

“命令”—“清理WordHTML”

7、HTML源文件的操作

Dreamweaver可以方便修改错误的地方，先在Dreamweaver中将光标移到要修改的地方，再打开自带的HTMLsource编辑窗口即可。

“修改”—“快速标签编辑器”（Ctrl+T）；

有三种模式（用Ctrl+T切换）。

8、熟悉界面（见复印件）

操作

图像操作

◆插入图像：

“插入”—“图像”

◆修改图像：

改变大小、边框

◆移动图像：

垂直距、水平距；

用表格控制

◆图像的收藏：

右键—“添加到图像收藏夹”

表格操作：

（注意选取对象他table、tr、td）

◆建立表格：

边距、间距、边框

◆表格嵌套：

在单元格中插入表格

◆表格的操作：

选取（表格、行、列）、合并、拆分、插入行、插入列、增加行或列、删除行、删除列、增加合并行、增加合并列、减少合并行、减少合并列。

（“修改”—“表格”）

◆表格修饰：

对齐方式、调整大小和位置、颜色（边框、线、背景）、文字修饰、预置格式创建表格（“命令”—“格式表格”）。

◆文字录入图像放置（放入内容不要破坏表格格式）

◆表格排序

应用提示

将表格设定为网页的框架，即先设定大致模式

在单元格中加入背景图片，使其构成某种图案

表格（单元格）中插入表格，尽量独立操作，避免相互影响

表格嵌套不应过多，以免网页过大，影响传输速度

练习

1、图2所示，制作一个网页。

内容、格式不限。

图2：

示范网页

2、仿制在指定位置（\\Dmt3\tools\塘沽在线.htm）中网页布局

框架

◆建立：

启动Dreamweaver，创建空白文档

单击“窗口”—“对象”—“▼”—“框架”，选择其中一种

◆修改：

鼠标拖动框架边界

“修改”—“框架组”—选择一种框架形式

◆保存：

“文件”—“另存框架为”：

将保存当前这个文件（换名）

“文件”—“保存框架”：

将保存当前的这个框架文件

“文件”—“保存全部框架”：

将保存n+1个文件

“文件”—“另存框架为模板”：

将保存当前框架为模板文件

框架类型：

标题、目录、页脚、垂直拆分、水平拆分。

如图3：

图3：

框架类型

框架参数设置

边框、边框宽度、边框颜色、行（或列）值、单位（属性面板）

链接

路径：

相对路径：

见附页

绝对路径：

创建链接

◆以文本为创建链接标志的对象

过程（步骤）1：

选择文本对象；

在属性面板中单击链接右侧的文件夹图标；

在弹出的窗口中选择要链接的文件；

按“选定”。

在“相对到”文本框中有“文件”和“站点根目录”两个选项，为两个相对路径。

过程（步骤）2：

使用指向文件图标

；

在站点地图中直接拖动。

◆以图片为创建链接标志的对象

类似文本链接方式，但多了热区指针工具。

◆链接到已命名的标签

步骤：

先“插入”—“隐藏元素”—“命名锚点”（或在“对象面板”中点击“▼”，选择“隐藏”）；

在弹出的对话框中输入书签名（注意：

不支持中文）；

然后在文档窗口选定文本（或）图像；

在“属性检查器”—“链接”域中输入“#”和书签名，若链接到其它文件中的书签，则要输入“文件名#书签名”。

◆链接到指定邮箱

方法1：

选择要链接的对象；

在“属性检查器”中的链接文字框里输入“mailto:

邮箱地址”。

方法2：

“窗口”—“对象”；

在“对象检查器”中选择“插入电子邮件链接”；

在弹出的对话框中按要求输入，可以省略mailto:

。

◆远程登陆：

“telnet:

站点地址”（B）

◆脚本链接：

在链接文字框中输入“javascript:

JavaScript”代码或函数调用（或“vbscript:

VBScript”）。

例如：

javascript:

window.open（'

index.htm'

）

◆修改链接：

应在站点管理去做

◆测试链接：

在浏览器中进行（F12）

练习：

将图2中文字做链接；

将图2中各其它对象做链接。

如树，房子等；

创建一个个性模板，并设置为默认模板；

用WORD创建一个WEB格式文件，导入Dreamweaver，清理；

在网页中录入2段文字，第一段为5号、宋体、蓝色。

第二段为5号、楷体、黄色；

在网页中插入表格（2*2），将以上两段文字放入表格中（左右放置），第二段文字加灰色背景；

在表格中插入图片，位置在两段文字之间；

建立两个书签。

一个在网页上方，另一个在下方，两个书签相互链接。

框架链接

可在同一个网页中显示多个网页。

在产生链接要求时，按指定的位置显示被链接的对象。

制作链接时各参数含义：

_blank：

点击链接时，被链接对象在新的空白页显示

_parent：

用父窗口来放置链接的网页

_self：

用自身的窗口来放置链接的网页

_top：

跳出所有框架结构显示链接的网页

mainFrame：

在主框架显示

leftFrame：

在左面框架显示

topFrame：

在上面框架显示

cornerFrame：

在角落框架显示

提示：

框架存盘时文件名不要用中文（Dreamweaver）

样式表CSS（CascadingStyleSheet）

基础：

<

html>

head>

styletype=”text/css”>

!

-

a{color:

red}

p{background-color:

blue;

color:

white}

-->

/style>

/head>

body>

ahref=””>

电子邮局<

/a>

p>

文字颜色<

/p>

一样吗？

/body>

/html>

将以上内容放入Dreamweaver中，看看结果。

在CSS中每一条定义都有如下的形式：

selector{property:

value;

property:

…}

◆selector:

三种形式

1.tag:

html中的标志,如A，P，BODY等

2.class:

类

3.ID:

与class类似，用法不同

◆Property：

要被修改的性质，如color

◆Value:

给property的值,如red，红色

CSS定义：

◆HTMLselector

语法：

tag{property:

value}

例1：

h1{color:

例2：

h1,h2,td{color:

red}同时定义几个selector为相同的属性

◆Classselector

相关Classselector

tag.classname{property:

例：

h2.redc{color:

◆独立Classselector

.classname{property:

.bluec{color:

blue}

IDselector：

用法同Classselector，可以使JavaScript,CSS-P操作

h2.redone{color:

.blueone{color:

h2>

thisisnoclass<

/h2>

h2class=redone>

haveclass<

h3class=”blueone”>

blueh3<

/h3>

pclass=”blueone”>

blueparagraph<

用CSS来操作和修改、文字定位

◆字体：

font-family

◆大小：

font-size

◆字形：

font-style

◆加重：

font-weight

◆行距：

line-height

◆水平对齐：

text-align

◆垂直对齐：

vertical-align

◆段落第一行空格：

text-indent

◆字母大小写：

text-transform

◆修饰文字（加下划线等）：

text-decoration

◆改变列表前的标识符号：

list-style-type

CSS样式应用技巧

◆大部分CSS操作、修改可以用下面方法完成

“窗口”—“CSS样式”—“+”

选择“名称（自己定义）”、“制作自定义样式”、“仅这个文档”

在左面的“选项”中点击，右面填入相应参数

◆链接文字技巧

选择“使用CSS选择器”、“名称”—“a:

hover”、“仅这个文档”

应用：

1.鼠标移至链接文字，下划线消失，链接文字变红色

2.鼠标移至链接文字，链接背景变黄色

3.鼠标移至链接文字，文字间距变大（A）

CSS滤镜实例

◆给文字加Blur滤镜（产生立体效果）

1.单击快速启动面板上的“显示（隐藏）CSS样式”

图标，启动样式编辑器

2.单击

“编辑样式表”图标

3.在弹出的对话框中选择“新建”（或“编辑”）

4.在新的对话框中，选择“扩展名”—在“滤镜”中选择“blur”

5.在“滤镜”中填入相应的参数（如：

true,135,10）

6.加载到文字

7.将文字放入表格中

8.选择文字所在的单元格

9.单击刚才新建的样式即可

◆给图片加Blur滤镜

方法同文字，不用放入表格中（一般在表格中也会有更加好的效果）

ADD：

布尔参数TRUE，FALSE

Direction:

阴影方向，0~360度，45度一个间隔，故只有8个方向

Strength:

阴影的长度，代表有多少像素的宽度成为阴影

◆MASK滤镜的应用（产生矩形遮罩）

可以是文字产生类似图像的效果，但占用空间要小的多。

只有一个参数COLOR。

◆Alpha滤镜的应用（颜色过度）

把一个目标元素与背景混合。

参数：

opacity：

透明度（0完全透明~100完全不透明）

finishopacity：

指定结束时的透明度（0~100）

style：

透明区域的形状特征。

0：

统一形状；

1线形；

2：

放射状；

3：

长方形

startX和startY：

渐变透明效果开始X和Y的坐标

finishX和finishY：

渐变透明效果结束X和Y的坐标

◆DropShadow滤镜的应用（阴影效果）

给添加的对象阴影效果

color：

阴影的颜色

offx和offy：

阴影的偏移量（可以为负）

positive：

布尔值。

非0时（true）为任何的非透明像素建立可见的投影；

为0（Fasle）为任何的透明像素建立透明的效果

◆Shadow滤镜：

产生渐进感的阴影

操作：

1.设置BLUR

2.单击对象面板的图片插入图标，插入一个图片

3.选取图片

4.单击CSS图标中的已经设置的CSS样式

五彩缤纷的文字

1.插入表格（1*1）

2.加入多彩的背景图

3.输入文字

4.给单元格加载一个MASK滤镜即可

新颖别致的跑马灯：

可使文字淡出淡入

2.设置Alpha滤镜（100，20，2，0，0，100，100）

3.在表格中插入跑马灯（滚动字幕）

4.给跑马灯加载一个Alpha滤镜即可（不要给单元格加）

带阴影的文字

2.设置DropShadow滤镜（gray,5,5,1）

3.在单元格上加载DropShadow滤镜

图片立体边框

一般DropShadow对图片无效，但将图片放入表格中，加载DropShadow可以产生立体边框效果

◆Shadow滤镜的应用（渐进感阴影效果）

2.设置Shadow滤镜（#808080，135）

3.在单元格上加载Shadow滤镜

交互式表单

收集访问者的反馈信息，与反馈者进行交流。

注意：

表单对象应放到表单域范围内，否则表单内容发不出去。

创建表单域

◆菜单：

“插入”—“表单”；

◆对象面板—标准—表单--

可以在表单域中加入表单组件、文字、表格等。

组件：

◆文本域

接收访问者的输入信息

“插入”—“表单对象”—“文字域”；

对象面板：

参数

TextField：

用于设置文本域的名字

字符宽度：

用于设置文本域的宽度

最多字符：

允许用户输入的最多文本数（字符数）

类型、多行、密码：

文本域的类型

行数：

文本域的行数

换行：

“关”：

横向坐标有效

“默认”：

纵坐标有效

初始值：

用户输入的初始值（选“换行”—“关”，再选别的选项）

◆单选项

只能访问其中的一个

Radiobutton：

单选按钮组的名称

选定值：

用于设置选中单选按钮时的值

已钩选、未钩选：

初始是否被选中

◆复选项

CheckBoxName：

复选框名

复选框前面的文字即可

◆列表/菜单

菜单限制访问者选一项，列表允许选多项

LIST/MENU：

下拉菜单的名称

类型：

菜单、列表

列表值：

填入“项目标签”和“值”

初始化被选择：

在“列表值”中填入的内容在这里显示

◆按钮

使表单发送、复位等命令（三种）

提交表单：

将表单域中的内容发送到用户指定的地址

复位表单：

将表单域中的内容复位为初始值

自定义（无）：

用户自定义按钮用途

其它表单组件

◆文件框：

选取文件

◆隐藏框：

插入不可见元素（为了在编辑器中查看需：

“查看”—“可视化处理”—“隐藏元素”）

◆跳转菜单：

菜单链接

设置表单属性

FormName：

表单的名称

方法：

递交的方式

动作：

设置服务器处理表单数据的文件源。

层与时间轴的使用

◆层的一般应用

1、插入层到网页中

菜单“插入”—“图层”；

对象面板中

拖曳鼠标画出图层至所需大小

2、调整层的大小

手工调整

在属性面板中调整

3、添加文字

4、添加背景图案：

选中图层、选择背景图像

5、插入FLASH动画：

◆层的管理

1、调整Z-顺序

按F2可以调出或隐藏层面板

在层面板中可以方便选择不同的层

层的Z顺序值越大，层越在上

层面板中的“名称”、“Z”-顺序的值可以修改

2、层的隐藏与显示

F2；

菜单中“窗口”—“层”；

单击任务栏

（显示历史记录）

隐藏与显示层

单击层窗口的左面切换

3、防止层的重叠

在层重叠前选项有效

4、层与表格转换

“文件”—“转换”：

只能层转换成表

或“修改”—“转换”

◆层的应用

制作如图4所示效果的网页

图4：

层的应用

制作带阴影的层

◆时间轴的使用

时间轴是控制层在每一秒的位置的工具

1、建立层并放入文字或图片等

2、确定图层

3、打开时间轴，加入层到时间轴

4、调节关键帧；

确定图层位置

如图5：

时间轴面板

图5：

◆简单的时间轴实例

移动的文字

滚动的文字：

不能省略裁切，裁切以外的内容才不显示

行为事件

行为是响应某一事件（EVENT）而采取的一个操作（ACTION）

◆调用行为

1.选中对象

2.“窗口”—“行为”；

SHIFT+F3；

点击任务栏中齿轮图标

3.点击加号按钮（减号删除行为）

4.选择其中的某个行为

Ø

调用JavaScript

alert（“提示内容”）

改变内容：

改变某一对象的属性值。

检查浏览器：

依不同浏览器选择不同的页面

检查插件：

依所需插件有无，选择不同页面

控制SHOCKWAVE和FLASH

5、插入二者之一（注意要定义名字）

6、插入按钮并选择按钮

7、选择行为中的控制SHOCKWAVE和FLASH

8、选择其中4种行为之一

拖曳图层

1、插入层

2、选择行为中的拖曳图层

前往URL

3、选择对象

4、选择行为中的前往URL

5、选择要跳转的网页

跳页菜单（前往）

6、“插入”—“表单对象”—“跳页菜单”

7、录入内容及作好联接

8、选择行为中的“跳页菜单”

注：

一般情况不用步骤3，3是为了一些其它功能。

跳页菜单前往增加了GO（前往）的功能，使当前选择有效。

打开浏览器窗口：

略

播放声音：

弹出讯息：

预先载入图像：

将图像放入浏览器的缓存

设置导航栏图像：

“插入”—“交互图像”；

单击对象面板中的

图标（插入导航栏图标）

设置框架、图层中的文字（汉字支持差）

设置状态栏、文字域中的文字：

先插入“文字域”（“插入”—“表单对象”—“文字域”）

显示/隐含层：

用其它对象控制层的显示/隐含

变换图像：

检查表单：

检查表单内容的类型是否准确

时间轴中动作的使用

有三个动作：

前往时间轴帧、播放时间轴、停止时间轴

9、建立“时间轴”

10、确定动作

Dreamweaver中层、时间轴、行为综合应用

鼠标移到图片（或文字）时显示隐含图层：

行为；

单击按钮出现隐含图层：

将3个分别放置的文字拖曳到一起：

拖曳图层；

制作下拉菜单：

行为、层；

实现幻灯片效果（几幅图不停转换）：

向上（下）滚动文字：

需要两个层，外层要剪切，且配合时间轴；

飘动的图片：

选择层；

右键；

记录路径；

控制SHOCKWAVE和FLASH播放、停止、跳转：

行为。

Dreamweaver8-chs序列号:

WPD800-59139-91432-25145

WPD800-57931-76932-54523

WPD800-59931-32632-81939

WPD800-55533-57232-82308

WPD800-51139-95632-31627

Dreamweaver8序列号：

WPD800-59931-56632-71626