dreamweaver8使用教程

– – 11第2章 Dreamweaver 8入门Dreamweaver8是美国Adobe 公司最新开发的优秀的网页制作工具，可以方便、快捷地制作出充满丰富动感的网页。

本章主要介绍Dreamweaver8的工作环境，网页制作的基本方法：包括文本、图像和动画的插入，超级链接的创建，表格、层和框架以及表单的使用等。

2.1 Dreamweaver 8的工作环境2.1.1 选择工作区布局安装完Dreamweaver 8后，第一次启动时，会弹出一个“工作区设置”的对话框，如图2-1所示，让用户选择一种工作区布局，包括“设计器”和“编码器”两个选项，它们分别面向设计者和代码编写者。

图2-1 “工作区设置”对话框本书是在设计者布局中进行介绍的，建议用户选择“设计器”选项进入，进入后会出现如图2-2所示的工作区布局。

图2.2 设计者工作区布局Dreamweaver 8入门– – 122.1.2 软件起始页的用法启动Dreamweaver 8之后，进入起始页，如图2-2所示，点击向右的箭头，可将右边的面板隐藏起来。

也可以点击向下的箭头，将属性面板隐藏起来。

起始页面分为左中右3栏，左侧一栏显示最近曾经打开过的文档；中栏是创建新的项目，可以创建Html 的文档，也可以创建一些动态文档，比如ASP VBScript 、JavaScript 、PHP 等，也可以直接创建站点；右侧是从范例创建，这里提供了Dreamweaver 8已经做好的基础范例，比如已经做好的框架集和一些入门页面等等。

当Dreamweaver 本身无法完成一些功能的时候，可以用Dreamweaver Exchange 从网上下载一些插件来实现。

左下角是Dreamweaver 8的一些学习资料，可以帮助大家更好的学习Dreamweaver 8这个软件。

如果计算机联网的话，右下角的信息是不断变化的，显示一些最新的信息。

如果不想使用这个起始页，而是手工打开一些文档的话，可以将起始页关闭。

80040e10 - COUNT 字段不正确当您在 Web 浏览器中预览包含“插入记录”服务器行为的页并尝试使用它在Microsoft Access 数据库中插入记录时，此错误会出现。

您可能试图将记录插入字段名中包含问号 (?) 的数据库字段。

对于某些数据库引擎（包括 Microsoft Access），问号是特殊字符，不应将它用于数据库表或字段的名称。

打开数据库系统并从字段名中删除问号 (?)，然后更新页上引用该字段的服务器行为。

设置图像属性此“属性”检查器允许您设置图像的属性。

如果您没有看到下面屏幕抓图所示的所有图像属性，请单击右下角的扩展箭头。

若要设置图像属性，请执行以下操作：1.使用缩略图下面的文本框设置名称，以便在使用Dreamweaver 行为（例如“交换图像”）或脚本撰写语言（例如JavaScript 或VBScript）时可以引用该图像。

2.设置以下任一选项：宽和高以像素为单位指定图像的宽度和高度。

当您在页中插入图像时，Dreamweaver 自动用图像的原始尺寸更新这些文本框。

如果您设置的“宽”和“高”的值与图像的实际宽度和高度不相符，则该图像在浏览器中可能不会正确显示。

（若要恢复原始值，请单击“宽”和“高”文本框标签，或单击用于输入新值的“宽”和“高”文本框右侧的“重设图像大小”按钮。

）注意您可以更改这些值来缩放该图像实例的显示大小，但这不会缩短下载时间，因为浏览器在缩放图像前会下载所有图像数据。

若要缩短下载时间并确保所有图像实例以相同大小显示，请使用图像编辑应用程序缩放图像。

源文件指定图像的源文件。

单击文件夹图标以浏览到源文件，或者键入路径。

有关动态图像源文件的信息，请参见将图像动态化。

链接指定图像的超级链接。

将“指向文件”图标拖到“站点”面板中的某个文件，单击文件夹图标浏览到站点上的某个文档，或手动键入 URL。

有关创建链接的信息，请参见创建链接。

对齐对齐同一行上的图像和文本。

第1章网页设计基础1.1 认识网页1.2 网页设计的基本原则1.3 Dreamweaver 8简介1.4 Dreamweaver 8的参数设置【知识要点】→1．认识网页。

→2．网页设计的基本原则。

→3．Dreamweaver 8简介。

→4．Dreamweaver 8的参数设置。

【技能目标】→1．了解网页的基础知识。

→2．了解网页设计的基本原则。

→3．认识Dreamweaver 8的主界面。

→4．了解首选参数的设置。

1.1 认识网页1.1.1 什么是网页网页一般分为静态网页和动态网页。

静态网页是标准的HTML文件，扩展名为.html 或.htm。

动态网页在许多方面与静态网页是一致的。

根据采用Web应用技术的不同，动态网页文件的扩展名也不同。

在文件中使用ASP（Active Server Pages）技术时，扩展名是.asp，使用JSP（Java Server Pages）技术时，文件扩展名为.jsp 。

搜狐网页中国银行静态首页中国农业银行动态首页1.1.2 网页与网站的关系一个完整的网站是由多个网页构成的，这些网页是分别独立的，这些独立的网页通过超链接联系起来。

网站可以看做是许多网页的家，浏览者可以通过浏览器访问网站的地址后，读取这个网站内的网页。

网页是网站的基本信息单位，一个网站通常由众多的网页有机地组织起来，用来为网站用户提供各种各样的信息和服务，好比一栋大楼里的一个个房间。

1.1.3 常用的网页制作工具网页的设计制作一般分为三个阶段：一是设计，二是布局，三是动画的添加，复杂的还涉及脚本程序。

从设计角度来说，常用的应用软件有Photoshop、Fireworks等专业的图形图像设计软件。

1.1.4 网络基本术语1．域名2．HTTP协议3．FTP协议4．超级链接5．站点1.1.5 认识HTMLHTML全名是Hyper Text Markup Language，即超文本标记语言，是用来描述Internet服务器上超文本文件的语言。

Dreamweaver8教程1、Flash透明化：插入Flash动画后，点击Flash图画，在属性中选择“参数”，在参数对话框左侧参数处填“wmode”，在右侧值的对应处填“transparent”，再点击“确定”即可。

2、设置滚动字幕：把光标插入点放在需要插入滚动字幕的地方，点击插入面板的“标签选择器”图标，选择“HTML标签”下的“页标签”中的“marquee”。

再转到代码视图，选择“窗口”——>“标签检查器”，在属性中单击未分类前面的“+”，可以在“标签检查器”中设置标签的各种用法。

点击“behavior”设置项右边的下拉箭头，选择滚动字幕内容的运动方式（“alternate”指内容在相反两个方向滚动，“scroll”指内容在同一方向滚动，“slide”指内容接触到字幕边框就停止滚动），direction属性设置字幕内容的滚动方向（down 向下滚动，left向左滚动，right向右滚动，up向上滚动），scrollamount属性设置字幕滚动的速度，scrolldelay属性设置字幕内容滚动时停顿的时间（单位毫秒），width属性设置字幕宽度，style属性设置字幕内容的样式，loop属性设置字幕内容滚动次数（默认或-1为无限）；在“行为”面板中，onMouseOver事件设置鼠标移动到滚动字幕时的动作（常设置为停止滚动），onMouseOut事件设置鼠标离开滚动字幕时的动作（常设置为开始滚动）。

（例:向上滚动字幕代码<marquee behavior=”scroll”direction=”up”width=”200”height=”150”loop=”-1”scrollamount=”1”scrolldelay=”1”style=”front:12px;”onMouseOver=”this.stop();” onMouseOut=”this.start();”>滚动字幕内容</marquee>3、插入关键字：（关键字用来帮助搜索引擎寻找网页的）选“插入”、“HTML”、“文件头标签”、“关键字”，在空白处输入关键字（多个关键字之间用逗号隔开）。

Dreamweaver8层的应用层是一种HTML页面元素，它可以准确地定位在页面上的任何位置，并可以设置大小。

通过层可以对页面进行准确的定位。

一、创建层使用层可以以像素为单位精确定位页面元素，层对于制作网页的重叠部分更具有特殊作用。

把页面元素放入层中，可以控制元素的显示顺序，也能控制哪个显示，哪个隐藏。

1、方法：（1）选择菜单中的【插入】【布局对象】【层】命令，插入层。

（2）在【布局】插入栏中直接用鼠标拖曳【绘制层】按钮，插入层。

（3）单击【绘制层】按钮，在文档窗口中按住鼠标不放拖动，可以绘制一个层。

按住ctrl键不放，可以绘制多个层2、层的相关属性：●【层编号】：指定层的名称。

●【左和上】：指定层相对于页面或被嵌入层的左上角的位置。

●【宽和高】：●【Z轴】：指定层的叠放顺序。

●【可见性】：确定初始化层的可见性情况。

●【背景图像】：●【背景颜色】：●【溢出】：用来设置当层的内容超过层的指定大小时，对层的内容的显示方法。

●【剪辑】：用来设置层的可见区域。

二、层的基本操作。

1、在层中插入对象层可以放置任意的文本、图像、插件及其他层，插入方法与在普通网页中插入这些元素的方法相同。

2、选择层（1）、选择一个层●在文档中单击层标记图标，即可选中该层。

●在激活层的基础上，单击层左上角的选择柄。

●在文档中单击层的边框●打开层面板，在面板中单击目标层名称。

●如果层没有被激活，可以按住Shift键，然后单击层中任意位置。

提示：如果在文档中没有出现层标记，可以选择菜单中的【查看】【可视化助理】【不可见元素】命令，将显示层标记。

（2）、选择多个层●按住Shift键，依次单击每个要选中的层的边框。

●按住Shift键，依次在【层】面板上单击每个目标层的名称。

●如果选择两个以上的连续层，选中连续层的第一个层，按住Shift键，单击连续层的最后一个层。

提示：当多个层被选中以后，，最后一个选中的层的控制柄显示为黑色，其它层的控制柄显示为白色。

Dreamweaver8.0创建模板在我们制作网站的过程中，为了统一风格，很多页面会用到相同的布局、图片和文字元素。

为了避免大量的重复劳动，可以使用Dreamweaver8提供的模板功能，将具有相同版面结构的页面制作为模板，将相同的元素（如导航栏）制作为库项目，并存放在库中可以随时调用。

一、创建模板模板的创建有三种方式。

1、直接创建模板选择“窗口/资源”命令，打开“资源”面板，切换到模板子面板，如下图所示。

单击模板面板上的“扩展”按钮，在弹出菜单中选择“新建模板”这是在浏览窗口出现一个未命名的模板文件，给模板命名。

然后单击“编辑”按钮，打开模板进行编辑。

编辑完成后，保存模板，完成模板建立。

2、将普通网页另存为模板打开一个已经制作完成的网页，删除网页中不需要的部分，保留几个网页共同需要的区域。

选择“文件/另存为模板”命令将网页另存为模板。

在弹出的“另存模板”对话框中，“站点”下拉列表框用来设置模板保存的站点，课选择一个选项。

“现存的模板”选框显示了当前站点的所有模板。

“另存为”文本框用来设置模板的命名。

单击“另存模板”对话框中的“保存”按钮，就把当前网页转换为了模板，同时将模板另存到选择的站点。

单击“保存”按钮，保存模板。

系统将自动在根目录下创建Template文件夹，并将创建的模板文件保存在该文件夹中。

在保存模板时，如果模板中没有定义任何可编辑区域，系统将显示警告信息。

我们可以先单击“确定”，以后再定义可编辑区域。

3、从文件菜单新建模板选择“文件/新建”命令，打开“新建文档”对话框，然后再类别中选择“模板页”，并选取相关的模板类型，直接单击“创建”按钮即可。

Dreamweaver8.0定义可编辑区域模板创建好后，要在模板中建立可编辑区，只有在可编辑区里，我们才可以编辑网页内容。

可以将网页上任意选中的区域设置为可编辑区域，但是最好是基于HTML代码的，这样在制作的时候更加清楚。

在文档窗口中，选中需要设置为可编辑区域的部分，单击常用快捷栏的“模板”按钮，在弹出菜单中选择“可编辑区域”项。