Dreamweaver cs4 网站制作入门.doc

《Dreamweaver cs4 网站制作入门.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、Dreamweavercs4网站制作入门网站制作实例一：  CafeTownsendCafeTownsend一、创建工作目录工作目录就是你建立站点时所要使用的本地文件夹，Dreamweaver将此文件夹称为本地站点。本地文件夹通常是你的计算机硬盘上的一个文件夹，例如：D:mywebsites。1、在D：盘上创建名为mywebsites的新文件夹。2、下载所需素材。cafe_townsend.rar3、将下载得到的素材解压缩到mywebsites文件夹中。你将使用D:mywebsitescafe_t

2、ownsend文件夹作为站点“cafetownsend”的根文件夹（主文件夹）。二、定义本地文件夹您必须为创建的每一个新Web站点定义Dreamweaver本地文件夹。本地文件夹是您在硬盘上用来存储站点文件的工作副本的文件夹。如果不定义本地文件夹，Dreamweaver中的某些功能可能无法正确运行。如果定义了本地文件夹，您还可以管理文件，并使用一些文件传输方法在本地与Web服务器之间传输文件。1、启动Dreamweaver，选择“站点”>“管理站点”。2、在弹出的“管理站点”对话框中单击“新建”按钮，然

3、后选择“站点”。3、在弹出的“站点定义”对话框中，如果显示向导（“基本”选项卡），则单击“高级”选项卡，然后从“分类”列表中选择“本地信息”（它应当是默认选项）。4、在“站点名称”文本框中，输入CafeTownsend作为站点名称。5、在“本地根文件夹”文本框中，指定在上一节中复制到D:mywebsite文件夹中的cafe_townsend文件夹。你可以单击文件夹图标来浏览并选择该文件夹，或者在“本地根文件夹”文本框中输入路径。6、在“默认图像文件夹”文本框中，指定cafe_townsend文件夹中已

4、有的images文件夹。你可以单击文件夹图标来浏览并选择该文件夹，或者在“默认图像文件夹”文本框中输入路径。7、单击“确定”。随即出现“管理站点”对话框，显示您的新站点。8、单击“完成”关闭“管理站点”对话框。此时“文件”面板显示当前站点的新本地根文件夹。“文件”面板中的文件列表将充当文件管理器，允许您复制、粘贴、删除、移动和打开文件，就象在计算机桌面上一样。现在，已经为您的站点定义了一个本地根文件夹。本地根文件夹是本地计算机上用来存储Web页面的工作副本的文件夹。如果您以后想要发布页面并使其可供公众访

5、问，则需要在运行Web服务器的远程计算机上定义一个远程文件夹，用来存储本地文件的已发布副本。三、了解你的任务下图是一张为CafeTownsend（一个需要制作Web站点的虚构餐馆）设计的、完整的和符合要求的设计草样。作为Web设计人员，您需要对草样进行转换，使之最终形成可以使用的Web页面。创建基于表格的页面布局表格是用于在HTML页上显示表格式数据以及对文本和图形进行布局的强有力的工具。你可以使用表格快速轻松地创建布局。在本实例中，你将在一个新的Dreamweaver文档中创建若干表格。这些表格的行和

6、单元格实际上将用作你将在以后添加的内容的“容器框”。一、创建并保存新页面建立站点并检查设计草样后，你就可以开始创建Web页面了。首先你将创建一个新页面，并将它保存到你的Web站点的本地根文件夹cafe_townsend中。该页面最终将成为虚构餐馆CafeTownsend的主页。1、在Dreamweaver中，选择“文件”>“新建”。2、在“新建文档”对话框的“常规”选项卡上，从“类别”列表中选择“基本页”，从“基本页”列表中选择“HTML”，然后单击“创建”。3、选择“文件”>“另存为”。4、在“另存为

7、”对话框中，浏览至定义为站点的本地根文件夹的cafe_townsend文件夹并打开该文件夹。5、在“文件名”文本框中输入index.html，然后单击“保存”。文件名即出现在应用程序窗口顶部的标题栏中。6、在新文档顶部的“文档标题”文本框中，键入CafeTownsend。这就是页面的标题。站点访问者在Web浏览器中查看页面时将在浏览器窗口的标题栏中看到此标题。7、选择“文件”>“保存”来保存该页面。二、插入表格：接下来，您将添加一个表格，用于放置文本、图形和MacromediaFlash资源。1、在页面

8、上单击一次，在页面左上角放置插入点。2、选择“插入”>“表格”。3、在“插入表格”对话框中，执行下面的操作：a.在“行数”文本框中，输入3。在“列数”文本框中，输入1。在“表格宽度”文本框中，输入700。在“表格宽度”弹出式菜单中，选择“像素”。在“边框粗细”文本框中，输入0。在“单元格边距”文本框中，输入0。在“单元格间距”文本框中，输入0。6、单击“确定”。一个三行一列的表格即出现在文档中。该表格的宽度为700像素，边框、单元格边距和单