Dreamweaver MX教你如何制作留言本
[color=#ffaa55][b][url=http://www.ititgo.com/html/2007/10/2614.htm]第1课DW MX工作环境简介及站点的建立[/color][/url][url=http://www.ititgo.com/html/2007/10/2614-2.htm][color=#0000ff]第2课创建留言板动态站点及第一个页面[/color][/url]
[url=http://www.ititgo.com/html/2007/10/2614-3.htm][color=#0000ff]第3课用表格布局留言板站点主页面[/color][/url]
[url=http://www.ititgo.com/html/2007/10/2614-4.htm][color=#0000ff]第4课用CSS样式表设计留言板站点[/color][/url]
[url=http://www.ititgo.com/html/2007/10/2614-5.htm][color=#0000ff]第5课创建留言板站点主页面导航元素[/color][/url]
[url=http://www.ititgo.com/html/2007/10/2614-6.htm][color=#0000ff]第6课创建留言板站点主页面的其他元素和效果[/color][/url]
[url=http://www.ititgo.com/html/2007/10/2614-7.htm][color=#0000ff]第7课用Fireworks MX画留言板站点页面[/color][/url]
[url=http://www.ititgo.com/html/2007/10/2614-8.htm][color=#0000ff]第8课数据库基础和用Access2000创建留言板站点数据库[/color][/url]
[url=http://www.ititgo.com/html/2007/10/2614-9.htm][color=#0000ff]第9课在Dreamweaver MX中创建数据库连接[/color][/url]
[url=http://www.ititgo.com/html/2007/10/2614-10.htm][color=#0000ff]第10课初体验留言板主页面的动态效果[/color][/url]
[url=http://www.ititgo.com/html/2007/10/2614-11.htm][color=#0000ff]第11课初体验留言板主页面的动态效果[/color][/url]
[url=http://www.ititgo.com/html/2007/10/2614-12.htm][color=#0000ff]第12课初体验留言板主页面的动态效果[/color][/url]
[url=http://www.ititgo.com/html/2007/10/2614-13.htm][color=#0000ff]第13课初体验留言板主页面的动态效果[/color][/url]
[url=http://www.ititgo.com/html/2007/10/2614-14.htm][color=#0000ff]第14课初体验留言板主页面的动态效果[/color][/url]
[url=http://www.ititgo.com/html/2007/10/2615.htm][color=#0000ff]第15课初体验留言板主页面的动态效果[/color][/url]
[/b]
一、Dreamweaver MX的工作环境
在Windows 中首次启动
Dreamweaver
MX时，会出现一个对话框，您可以从中选择一种工作区布局。如果您以后改变了主意，可以使用“参数选择”对话框切换到一种不同的工作区。如图1是选择工作区布局的对话框。
[url=http://www.ititgo.com/edit/UploadFile/200710315367825.gif][img]http://www.ititgo.com/edit/UploadFile/200710315367825.gif[/img][/url]
图1选择工作区布局对话框
●Dreamweaver MX工作区是一个使用
MDI（多文档界面）的集成工作区，其中全部“文档”窗口和面板被集成在一个更大的应用程序窗口中，并将面板组停靠在右侧。Dreamweaver
MX建议大多数用户使用它。本教程也使用的是这种工作区模式。
●HomeSite/代码编写者样式的Dreamweaver
MX工作区是同样的集成工作区，但是将面板组停靠在左侧，“文档”窗口在默认情况下显示“代码”视图。Dreamweaver
MX建议HomeSite或ColdFusion
Studio用户以及其他需要使用熟悉的工作区布局的手工编码人员使用这种布局。若要选择这种布局，请选择“Dreamweaver MX
工作区”选项，然后选择“HomeSite/代码编写者样式”选项。
●Dreamweaver 4工作区是一种与Dreamweaver
4中所用布局相类似的工作区布局，其中每个文档都位于自己的独立浮动窗口中。面板组停靠在一起，但并不是停靠在一个更大的应用程序窗口中。仅建议喜欢使用更熟悉的工作区的
Dreamweaver 4用户使用这种布局。
▲教程副页：Dreamweaver
MX工作环境简介页面
二、建立第一个站点（无服务器端脚本的普通静态站点）
下面我们建立一个没有服务器端脚本的普通静态站点，具体建立步骤如下：
1、选择“站点/新建站点”。（即从“站点”菜单中选择“新建站点”命令。）即会出现“站点定义”对话框。
2、如果对话框显示的是“高级”选项卡，则单击“基本”。出现“站点定义向导”的第一个屏幕，要求您为站点输入一个名称。
3、在文本框中，输入一个名称以在Dreamweaver中标识该站点。该名称可以是任何所需的名称。例如，您可以将站点命名为“mysit”。
如图2所示。
[url=http://www.ititgo.com/edit/UploadFile/2007103153615348.gif][img]http://www.ititgo.com/edit/UploadFile/2007103153615348.gif[/img][/url]
图2
建站向导——站点起名
4、单击“下一步”进入下一个步骤。出现向导的下一个屏幕，询问您是否要使用服务器技术。选择“否”选项指示目前该站点是一个静态站点，没有动态页。如图3所示。
[url=http://www.ititgo.com/edit/UploadFile/2007103153636791.gif][img]http://www.ititgo.com/edit/UploadFile/2007103153636791.gif[/img][/url]
图3
建站向导——静态和动态网站选择
5、单击“下一步”进入下一个步骤。出现向导的下一个屏幕，询问您要如何使用您的文件，如图4所示。
●选择标有“编辑我的计算机上的本地拷贝，完成后再上传到服务器（推荐）”的选项。
●文本框允许您在本地磁盘上指定一个文件夹，Dreamweaver
将在其中存储站点文件的本地版本。若要指定一个准确的文件夹名称，通过浏览指定要比键入路径更加简便易行，因此请单击该文本框旁边的文件夹图标。随即会出现“选择站点的本地根文件夹”对话框，在对话框中浏览到本地磁盘上可以存放所有站点的文件夹。然后单击“确定”。
[url=http://www.ititgo.com/edit/UploadFile/2007103153654360.gif][img]http://www.ititgo.com/edit/UploadFile/2007103153654360.gif[/img][/url]
图4
建站向导——定义站点文件的存储位置
6、单击“下一步”进入下一个步骤。出现向导的下一个屏幕，询问您如何连接到远程服务器。从弹出式菜单中选择“无”。
▲如果你有远程的FTP服务器空间，在这一步骤可以按照如图5所示进行连接到远程服务器的设置。
[url=http://www.ititgo.com/edit/UploadFile/2007103153728273.gif][img]http://www.ititgo.com/edit/UploadFile/2007103153728273.gif[/img][/url]
图5
建站向导——连接到远程服务器的设置
7、单击“下一步”进入下一个步骤。该向导的下一个屏幕将出现，其中显示您的设置概要。单击“完成”完成设置。
▲完成站点的建立之后，在文件面板中你会看到如图6所示的类似结果（本地视图）。
[url=http://www.ititgo.com/edit/UploadFile/2007103153746239.gif][img]http://www.ititgo.com/edit/UploadFile/2007103153746239.gif[/img][/url]
图6
文件面板中的本地视图
三、用系统模板创建站点的第一个页面
上面我们利用建站向导创建了一个站点，下面我们在这个站点中创建一个页面。先查看这个页面的效果：lesson1_mo.htm
这个页面是用Dreamweaver
MX的系统模板创建的，以下是创建步骤：
1、执行“文件/新建”命令，弹出“新建文档对话框”。在此对话框中选择“常规/页面设计/文本：文章C”，然后单击“创建”按钮，如图7是示意图。
[url=http://www.ititgo.com/edit/UploadFile/200710315389143.gif][img]http://www.ititgo.com/edit/UploadFile/200710315389143.gif[/img][/url]
图7
利用模板创建新文档示意图
2、现在我们在页面编辑区得到一个新页面，并且页面中已包含了一些模板内容。这个页面很简单，包括一些文本和一个图像。
我们首先将那些英文文本换成一些中文文本（你可以将教程中示例页面中的文本复制过来）。
3、对图像进行处理。我们在页面中看到的是一个图像占位符，下面我们要用一个具体的图像替换它。单击这个图像占位符，并展开相应的占位符属性面板，如图8所示。
●如果图像已经创建好，就在占位符属性面板中的源文件处进行设置。
●如果图像还没有创建，就单击占位符属性面板中的创建按钮，在FireworksMX中创建。
[url=http://www.ititgo.com/edit/UploadFile/2007103153830810.gif][img]http://www.ititgo.com/edit/UploadFile/2007103153830810.gif[/img][/url]
图8
占位符属性面板
4、在属性面板中设置文本的属性，由于我们的页面上的文本实际上都是在表格中，所以实际上是设置表格的单元格属性，如图9所示。
[url=http://www.ititgo.com/edit/UploadFile/2007103153847275.gif][img]http://www.ititgo.com/edit/UploadFile/2007103153847275.gif[/img][/url]
图9
单元格属性面板
5、关于图像和文本的距离的设置。我们以后在编辑网页时会经常遇到图像和文本之间的距离问题，如图10所示。我们可以先选中图像，然后在图像属性面板中设置图像和文本之间的距离，如图11所示。
[url=http://www.ititgo.com/edit/UploadFile/200710315393333.gif][img]http://www.ititgo.com/edit/UploadFile/200710315393333.gif[/img][/url]
图10图像和文本间的距离示意图 图11
设置图像和文本距离
6、保存文件。执行“文件/保存”命令，将文档保存到我们站点文件夹中。
如果我们文件的存储路径是:c:\Inetpub\wwwroot\mysite1\lesson1_mo.htm，则可以在浏览器中用以下地址访问它：http://localhost/mysite1/lesson1_mo.htm或者[url=http://127.0.0.1/mysite1/lesson1_mo.htm][color=#0000ff]http://127.0.0.1/mysite1/lesson1_mo.htm[/color][/url]。
頁:
[1]
