Dreamweaver8教程2.docx
《Dreamweaver8教程2.docx》由会员分享，可在线阅读，更多相关《Dreamweaver8教程2.docx（47页珍藏版）》请在冰豆网上搜索。
Dreamweaver8教程2
本文由binglengpeng贡献
doc文档可能在WAP端浏览体验不佳。
建议您优先选择TXT，或下载源文件到本机查看。
简体中文版入门教程（DreamweaverMX2004简体中文版入门教程
（一）之新功能简介
MacromediaDreamweaverMX2004（简称DWMX2004），是Macromedia最新开发的的HTML编辑器，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。
DWMX2004包含有一个崭新、简洁、高效的界面，且性能也得到了改进。
此外，还包含了众多新增的功能，改善了软件的易用性并使您无论处于设计环境还是编码环境都可以方便地生成页面。
【DWMX2004MX2004的新功能简介】▲简洁高效的设计和开发界面：
界面更易于使用，可使您的工作效率和工作质量均得到提高。
▲“插入”栏的改进：
简洁高效的新外观，占用更少的工作区空间。
还新增加了一个“收藏”类别，您可以对“插入”栏进行自定义，将最常使用的对象放置在该栏上。
▲表格编辑可视化：
在表格中进行列调整操作时能看到实际效果。
▲用户界面改进：
可得到最大的可用工作区，更清晰地显示上下文和焦点，更易于使用和更具逻辑性。
▲起始页：
使您能够访问最近使用过的文件，创建新文件和访问DWMX2004资源。
起始页会在您启动DWMX2004或尚未打开文档时显示。
▲保存桌面选项：
使您可以选择当您重新启动DWMX2004时重新打开您上一次使用的文档。
▲完全支持Unicode：
DWMX2004支持InternetExplorer所支持的所有文本编码方式。
您可以使用几乎所有您的系统中安装的语言字体，DWMX2004会正确地显示和保存这些字体。
▲安全FTP：
使您能够完全加密所有文件传输。
▲新式的页面布局和设计环境。
▲增强的CSS功能：
提供了一个更为精巧的方法来进行样式设计及提高设计交互性。
▲动态跨浏览器验证：
在您保存文档时自动检查当前文档的跨浏览器兼容性问题。
本教程针对DWMX2004简体中文版进行讨论，供学习网页制作创建静态网站的朋友们参考。
因本人水平有限，不当之处在所难免，欢迎批评指正。
【图象处理软件】Photoshop：
制作图文并茂的网页，需要处理图片，PS是最好的图象处理软件。
最新版为PhotoshopCS（俗称8.0）版本。
对初学者来说稍微专业了。
您可以使用简单易学、功能强大的的PhotoshopElements（即：
PSE），对于网页图片文件制作PSE就足够用了。
。
Fireworks：
最新为MX2004版本，网页制作三剑客之一。
能和DW无缝链接。
该软件请您自行收集下载。
Flash：
最新为MX2004版本，网页制作三剑客之一。
网上最火的动画制作软件。
该软件请您自行收集下载。
UleadGIFAnimator：
友立公司开发的功能强大的GIF动画软件。
该软件请您自行收集下载。
【其他软件】CuteFTP：
是专业的FTP上传软件，用于往服务器端上传文件用。
DreamweaverMX2004有此功能，而且功能强大。
但是，不少人还是习惯用专业的FTP软件。
该软件请您自行收集下载。
最终您还需要有一个网络空间。
以便您的大作让更多的人浏览。
简体中文版入门教程（DreamweaverMX2004简体中文版入门教程
（二）之窗口布局
窗口布局
DreamweaverMX2004提供了将全部元素置于一个窗口中的集成工作区。
在集成工作区中，全部窗口和面板集成在一个应用程序窗口中。
您可以选择面向设计人员的布局
或面向手工编码人员需求的布局。
首次启动Dreamweaver时，会出现一个工作区设置对话框（如下图）：
您可以从中选择一种工作区布局。
如果您不熟悉编写代码，请您选择“设计者”。
如果您以后想更改工作区，可以使用编辑菜单“首选参数”对话框切换到一种不同的工作区。
编辑菜单“首选参数”对话框如下图：
【栏目说明】
“插入”栏（如下图）：
包含用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮。
每个对象都是一段HTML代码，允许您在插入它时设置不同的属性。
例如，您可以通过单击“插入”栏中的“表格”按钮插入一个表格。
也可以不使用“插入”栏而使用“插入”菜单插入对象。
“文档”窗口显示您当前创建和编辑的文档。
“属性检查器”（如下图）：
用于查看和更改所选对象或文本的各种属性。
“面板组”（如下图）是分组在某个标题下面的相关面板的集合。
若要展开一个面板组，请单击组名称左侧的展开箭头；若要取消停靠一个面板组，请拖动该组标题条左边缘的手柄。
“文件”面板（如下图）使您可以管理您的文件和文件夹，无论它们是Dreamweaver站点的一部分还是在远程服务器上。
“文件”面板还使您可以访问本地磁盘上的全部文件，类似于Windows资源管理器。
DreamweaverMX2004提供了多种此处未说明的其他面板、检查器和窗口。
若要打开其它面板，请使用“窗口”菜单。
简体中文版入门教程（DreamweaverMX2004简体中文版入门教程（三）之菜单概述
菜单概述
本节提供DreamweaverMX2004中各菜单的简要说明。
下图为菜单条：
以下分别叙述菜单选项：
文件菜单编辑菜单
“文件菜单包含“新建”、文件”菜单“打开”、“保存”、“保文件存全部”，还包含各种其他命令，用于查看当前文档或对当前文档执行操作，例如“在浏览器中预览”和“打印代码”。
“编辑菜单包含选择和搜索命令，例如编辑”菜单编辑“选择父标签”和“查找和替换”。
“编辑”菜单还提供对DW菜单中“首选参数”的访问。
查看菜单
插入菜单
“查看菜单使您可以看到文档的各种视图查看”菜单查看（例如“设计”视图和“代码”视图），并且可以显示
“插入菜单插入”菜单用于将插入菜单提供“插入”栏的替代项，对象插入您的文档。
和隐藏不同类型的页面元素和DW工具及工具栏。
修改菜单
文本菜单
“修改菜单使您可以更改选定页面元素或项修改”菜单修改的属性。
使用此菜单，您可以编辑标签属性，更改表格和表格元素，并且为库项和模板执行不同的操作。
命令菜单站点菜单式。
“文本菜单文本”菜单文本菜单使您可以轻松地设置文本的格
“站点菜单提供用于管理站点以及上传站点”菜单站点“命令菜单提供对各种命令的访问；包括一个根和下载文件的菜单项。
命令”菜单命令
据您的格式首选参数设置代码格式的命令、一个创建相册的命令等。
窗口菜单帮助菜单
“帮助菜单提供对Dreamweaver文档帮助”菜单帮助“窗口菜单提供对DW中的所有面板、窗口”菜单检查的访问，包括关于使用Dreamweaver以及创建窗口器和窗口的访问。
Dreamweaver扩展功能的帮助系统，还包括各种语言的参考材料。
除了菜单栏菜单外，Dreamweaver还提供多种右键显示上下文菜单，您可以利用它们方便地访问与当前选择或区域有关的有用命令。
若要显示上下文菜单，右击窗口中的某一项。
简体中文版入门教程（DreamweaverMX2004简体中文版入门教程（四）之常用工具栏
“插入”栏包含用于创建和插入对象（如表格、层和图像）的按钮。
当鼠标指针滚动到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。
某些类别具有带弹出菜单的按钮。
从弹出菜单中选择一个选项时，该选项将成为该按钮的默认操作。
例如，如果从“图像”按钮的弹出菜单中选择“图像占位符”，下次单击“图像”按钮时，Dreamweaver会插入一个图像占位符。
每当从弹出菜单中选择一个新选项时，该按钮的默认操作都会改变。
“插入”栏按以下的类别进行组织：
“常用”类别使您可以创建和插入最常用的对象，例如图像和表格。
常用”类别“布局”类别使您可以插入表格、div标签、层和框架。
您还可以从三个表格视图布局”类别中进行选择：
“标准”（默认）、“扩展表格”和“布局”。
当选择“布局”模式后，您可以使用Dreamweaver布局工具：
“绘制布局单元格”和“绘制布局表格”。
“表单”类别包含用于创建表单和插入表单元素的按钮。
表单”类别
“文本”类别使您可以插入各种文本格式设置标签和列表格式设置标签。
文本”类别
“HTML”类别使您可以插入用于水平线、头内容、表格、框架和脚本的HTML标签。
HTML”类别
“服务器代码”类别仅适用于使用特定服务器语言的页面，这些类别中的每一个都服务器代码”类别提供了服务器代码对象，您可以将这些对象插入“代码”视图中。
“应用程序”类别使您可以插入动态元素，例如记录集、重复区域以及记录插入和应用程序”类别更新表单。
元素”类别使您可以插入Flash元素。
“Flash元素”类别
“收藏”类别使您可以将“插入”栏中最常用的按钮分组和组织到某一常用位置。
收藏”类别
文档工具栏
文档工具栏中包含按钮，这些按钮使您可以在文档的不同视图间快速切换：
“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的拆分视图。
工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。
以下对选项进行说明：
显示代码视图仅在“文档”窗口中显示“代码”视图。
显示代码视图和设计视图在“文档”窗口的一部分中显示“代码”视图，而在另一部分中显示“设计”视图。
当选择了这种组合视图时，“视图选项”菜单中的“在顶部查看设计视图”选项变为可用。
请使用该选项指定在“文档”窗口的顶部显示哪种视图。
显示设计视图仅在“文档”窗口中显示“设计”视图。
标题允许您为文档输入一个标题，它将显示在浏览器的标题栏中。
如果文档已经有了一个标题，则该标题将显示在该区域中。
没有浏览器/没有浏览器/检查错误使您可以检查跨浏览器兼容性。
文件管理显示“文件管理”弹出菜单。
在浏览器中预览/在浏览器中预览/调试在浏览器中预览或调试文档。
从弹出菜单中选择一个浏览器。
刷新设计视图当您在“代码”视图中进行更改后刷新文档的“设计”视图。
视图选项允许您为“代码”视图和“设计”视图设置选项。
状态栏
状态栏提供与您正创建的文档有关的其它信息。
标签选择器显示环绕当前选定内容的标签的层次结构。
单击该层次结构中的任何标签以选择该标签及其全部内容。
比如：
单击可以选择文档的整个正文。
窗口大小弹出菜单（仅在“设计”视图中可见）用来将“文档”窗口的大小调整到预定义或自定义的尺寸。
“窗口大小”弹出菜单的右侧是页面的文档大小和估计下载时间
简体中文版入门教程（DreamweaverMX2004简体中文版入门教程（五）之定义站点
设置站点
Web站点是一组具有如相关主题、类似的设计、链接文档和资源。
DreamweaverMX2004是一个站点创建和管理工具，因此使用它不仅可以创建单独的文档，还可以创建完整的Web站点。
创建Web站点的第一步是规划。
为了达到最佳效果，在创建任何Web
站点页面之前，应对站点的结构进行设计和规划。
决定要创建多少页，每页上显示什么内容，页面布局的外观以及页是如何互相连接起来的。
请执行以下操作：
启动DreamweaverMX2004：
选择“站点”>“管理站点”（即，从“站点”菜单选择“管理站点”）。
出现“管>理站点”对话框。
在“管理站点”对话框中，单击“新建”，然后从弹出式菜单中选择“站点”。
出现“站点定义”对话框。
如果对话框显示的是“高级”选项卡，则单击“基本”。
出现“站点定义向导”的第一个界面，要求您为站点输入一个名称。
在文本框中，输入一个名称以在DreamweaverMX2004中标识该站点。
该名称可以是任何所需的名称。
单击“下一步”。
出现向导的下一个界面，询问您是否要使用服务器技术。
选择“否”选项，指示目前该站点是一个静态站点，没有动态页。
单击“下一步”。
出现向导的下一个界面，询问您要如何使用您的文件。
选择标有“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”的选项。
在站点开发过程中有多种处理文件的方式，初学网页制作的朋友请选择此选项。
单击该文本框旁边的文件夹图标。
随即会出现“选择站点的本地根文件夹”对话框。
单击“下一步”，出现向导的下一个界面，询问您如何连接到远程服务器。
从弹出式菜单中选择“无”。
您可以稍后设置有关远程站点的信息。
目前，本地站点信息对于开始创建网页已经足够了。
单击“下一步”，该向导的下一个屏幕将出现，其中显示您的设置概要。
单击“完成”完成设置。
随即出现“管理站点”对话框，显示您的新站点。
单击“完成”关闭“管理站点”对话框。
现在，已经为您的站点定义了一个本地根文件夹。
下一步，可以编辑自己的网页了
简体中文版入门教程（DreamweaverMX2004简体中文版入门教程（六）之创建页面
页面编辑
本节介绍如何应用DreamweaverMX2004创建自己的网页。
从头创建自己的页面，可以使用DreamweaverMX2004起始页创建新页，或者可以选择“文件”>“新建”，弹出如下对话框：
从各种预先设计的页面布局中选择一种。
比如：
选择“基本页”HTML，点击创建按钮。
DreamweaverMX2004即展开工作区界面（一个空白页）：
您可以在这个空白页添加表格和输入文本进行编辑。
如果您要向页面添加图片或其它元素，应先保存这个空白页。
选择“文件”>“另存为”，在“另存为”对话框中，浏览到站点本地根文件夹下。
填入文件名，保存退出。
简体中文版入门教程（DreamweaverMX2004简体中文版入门教程（七）之页面制作
现在，以下边的简单网页为例，叙述一下制作过程。
简单网页如下图：
在开始制作之前，我们先对这个页面进行一下分析。
看看这个页面用到了那些东西。
□网页顶端的标题“我的主页”是一段文字。
□网页中间是一幅图片。
□最下端的欢迎词是一段文字。
□网页背景是一深紫红颜色。
知道了这个网页的结构以后我们就来可以制作了。
首先启动DreamweaverMX2004，确保你已经用站点管理器建立好了一个网站（根目录）。
为了制作方便，请您事先打开资源管理器，把要使用的图片收集到网站目录images文件夹内。
【插入标题文字插入标题文字】插入标题文字
进入页面编辑设计视图状态。
在一般情况下，编辑器默认左对齐，光标在左上角闪烁，光标位置就是插入点的位置。
如果要想让文字居中插入，点属性面板居中按钮即可。
启动中文输入法输入“我的主页”四个字。
字小不要紧，我们可以对它进行设置。
【设置文字的格式】选中文字，在上图属性面板中将字体格式设置成默认字体，设置文字的格式】大小可任意更改字号。
并选中“B”将字体变粗。
B
【设置文字的颜色】首先选中文字，在属性面板中，单击颜色选择图标，在弹出的设置文字的颜色】颜色选择器中用滴管选取颜色即可。
【设置网页的标题和背景颜色设置网页的标题和背景颜色】设置网页的标题和背景颜色点击“修改”菜单选“页面属性”。
系统弹出页面属性对话框（如下图）
请在标题输入框填入标题“我的主页”。
设置背景颜色：
网页背景可以是图片，也可以是颜色。
此例是颜色。
如上图打开背景颜色选择器进行选取。
如果背景要设为图片，点击背景图象“浏览”按钮，系统弹出图片选择对话框，选中背景图片文件，点击确定按钮。
设计视图状态，在标题“我的主页”右边空白处单击鼠标，回车换一行，按照以下的步骤插入一幅画图片，并使这张图片居中。
您也可以通过属性面板中的左对齐按钮让其居左安放。
【插入图像】选择以下任意一种方法：
（1）使用插入菜单：
在“插入”菜单选“图像”，弹出“选择图像源文件”对话框，选中该图像文件，单击确定。
如下图：
（2）使用插入栏（如下图）：
单击插入栏对象按钮>选源文件”对话框，其余操作同上。
按钮，弹出“选择图像
（3）使用面板组“资源”面板（如下图）：
点选定该文件，用鼠标拖动至工作区合适位置。
按钮，展开根目录的图片文件夹，
注：
为了管理方便，我们把图片放在“images”文件夹内。
如果图片少，您也可以放在站点根目录下。
注意文件名要用英文或用拼音文字命名而且使用小写，不能用中文，否则要出现一些麻烦。
一个图片就插入完毕了。
（插入*.swf动画文件，“插入”选择菜单＞媒体＞Flash）。
【输入欢迎文字输入欢迎文字】输入欢迎文字
在图片右边空白处单击，回车换行。
仍然按照上述方法，输入文字“欢迎您……”然后，利用属性面板对文字进行设置。
保存页面。
一个简单的页面就这样编辑完毕了。
【预览网页】在页面编辑器中按F12预览网页效果。
网站中的第一页，也就是首页，我们通常在存盘时取名为index.htm。
【小结】在今天的教程中我们制作了一个简单的网页。
内容有四：
①图片插入和对齐设置；②文字的格式、颜色和加粗等设置；③背景颜色的设置；④预览网页，查看实际效果。
不仅要掌握还要举一反三反复练习。
简体中文版入门教程（DreamweaverMX2004简体中文版入门教程（八）之超级链接
超级链接
作为网站肯定有很多的页面，如果页面之间彼此是独立的，那么网页就好比是孤岛，这样的网站是无法运行的。
为了建立起网页之间的联系我们必须使用超级链接。
称“超级链接”，是因为它什么都能链接，如：
网页、下载文件、网站地址、邮件地址……等等。
下边我们就来讨论怎样在网页中创建超级链接。
【页面之间的超级连接】在网页中，单击了某些图片、有下划线或有明示链接的文字就会跳转到相应的网页中去。
1、在网页中选中要做超级链接的文字或者图片。
2、在属性面板中单击黄色文件夹图标，在弹出的对话框里选中相应的网页文件就完成了。
做好超级链接属性面板出现链接文件显示。
（如下图）
3、按F12预览网页。
在浏览器里光标移到超级链接的地方就会变成手型。
〖提示〗你也可以手工在链接输入框中输入地址。
给图片加上超级链接的方法和文字完全相同。
如果超级链接指向的不是一个网页文件。
而是其他文件例如zip、exe文件等等，单击链接的时候就会下载文件。
超级链接也可以直接指向地址而不是一个文件，那么单击链接直接跳转到相应的地址。
例如，在链接框里写上老小孩网站。
【邮件地址的超级连接】在网页制作中，还经常看到这样的一些超级链接。
单击了以后，会弹出邮件发送程序，联系人的地址也已经填写好了。
这也是一种超级链接。
制作方法是：
在编辑状态下，先选定要链接的图片或文字（比如：
欢迎您来信赐教！
），在插入栏点选“电子邮件链接”弹出如下对话框，填入E-Mail地址即可。
或点插入菜单
提示：
还可以选中图片或者文字，直接在属性面板链接框中填写“mailto：
邮件地址”。
（如下图）
创建完成后，保存页面，按F12预览网页效果。
【制作图片上的超级链接】注意，我们这里所说的图片上的超级链接是指在一张图片上实现多个局部区域指向不同的网页链接。
比如一张中国地图的图片，单击了不同的省跳转到不同的网页。
可点的区域就是热区。
为了演示制作效果下面的中国地图我加了一些链接，你可以用鼠标测试。
鼠标移动到省份的热区，会显示提示，如果有预先设置的网站，点击会进入对方的网站。
【制作方法】1、首先插入图片。
单击图片，用展开的属性面板上的绘图工具在画面上绘制热区。
2、属性面板改换为热点面板如图：
链接输入框：
填入相应的链接。
替代框：
填入你的提示文字说明。
目标框：
不作选择则默认在新浏览器窗口打开。
3、保存页面，按F12预览，用鼠标在设置的热区检验效果。
提示：
对于复杂的热区图形我们可以直接选择多边形工具来进行描画。
替代框填写了说明文字以后，光标移上热区就会显示出相应的说明文字。
超级链接属性面板中的目标选项。
“目标”我们称它为目标区。
也就是超级链接指向的页面出现在什么目标区域。
默认的情况下域中总有四个选项。
①_blank：
单击链接以后，指向页面出现在新窗口中。
②_parent：
用指向页面替换他外面所在的框架结构。
③_self：
将连接页面显示在当前框架中。
④_top：
跳出所有框架，页面直接出现在浏览器中。
【小结】本节教程主要探讨创建页面的链接。
1、内部链接：
链接到本站点的其他文档。
2、外部链接：
链接到本站点以外的其他文档。
3、E-Mail链接：
单击该链接，可以打开浏览者的邮件系统。
4、图片热区链接：
使你的链接更灵活更有个性。
简体中文版入门教程（DreamweaverMX2004简体中文版入门教程（九）之表格设计
表格设计
表格是现代网页制作的一个重要组成部分。
表格之所以重要是因为表格可以实现网页的精确排版和定位。
本节教程我们分为两步来进行。
首先看表格操作的一个实例。
然后来看一些表格操作的基本方法。
在开始制作表格之前，我们首先对表格的各部分的名称做一个介绍。
（看下图）
一张表格横向叫行，纵向叫列。
行列交叉部分就叫做单元格。
单元格中的内容和边框之间的距离叫边距。
单元格和单元格之间的距离叫间距。
整张表格的边缘叫做边框。
下面看看我们使用表格制作的页面的实例
这幅页面的排版格式，如果用以前我们所讲的对齐方式是无法实现的。
因此我们需要用到表格来做。
实际上是用两行两列的表格来制作。
1、在插入栏中选择
按钮或“插入”菜单>选“表格”。
系统弹出表格对话框如
下图。
这些参数我们都已经认识了。
行：
2。
列：
2。
其余的参数都保留其默认值。
。
2、在编辑视图界面中生成了一个表格。
表格右、下及右下角的黑色点是调整表格的高和宽的调整柄。
当光标移到点上就可以分别调整表格的高和宽。
移到表格的边框线上也可以调整。
（如下图）
3、在表格的第一格按住左键不放，向下拖拽选中二格单元格。
（如下图）
然后在展开的属性面板中选择合并单元格按钮（如下图红框所示）。
将表格的单元格合并。
如果要分割单元格，则可以用合并单元格按钮右边的按钮。
合并结果如下图。
4、用鼠标拖拽表格的边框调整到适当的大小。
5、单击左边的单元格，然后输入“摄影作品赏析”文字，并调整大小，因是竖排应每个字回车一次。
如果需要调整格子的大小。
只需要鼠标的光标移动到边框上拖拽即可。
6、在右边上下单元格内分别插入图片和文本。
页面的基本样子有了。
7、光标移动到表格的边框上单击。
表格周围出现调整框，表示选中整张表格。
然后，在属性面板中将“边框”值设置适合的值，如果为0，边框在编辑状态，为虚线显示，浏览时就看不见了。
一个符合要求的页面在表格的帮助下做好了。
通过上面的操作我们对于表格有了一个初步的认识。
还要提示一点，对整幅表格操作和对一个单元格操
升级会员 