搜索
Dreamweavercs4网站制作入门网站制作实例一：CafeTownsendCafeTownsend一、创建工作目录工作目录就是你建立站点时所要使用的本地文件夹，Dreamweaver将此文件夹称为本地站点。本地文件夹通常是你的计算机硬盘上的一个文件夹，例如：D:\mywebsites。1、在D：盘上创建名为mywebsites的新文件夹。2、下载所需素材。cafe_townsend.rar3、将下载得到的素材解压缩到mywebsites文件夹中。你将使用D:\mywebsites\cafe_townsend文件夹作为站点“cafetownsend”的根文件夹（主文件夹）。二、定义本地文件夹您必须为创建的每一个新Web站点定义Dreamweaver本地文件夹。本地文件夹是您在硬盘上用来存储站点文件的工作副本的文件夹。如果不定义本地文件夹，Dreamweaver中的某些功能可能无法正确运行。如果定义了本地文件夹，您还可以管理文件，并使用一些文件传输方法在本地与Web服务器之间传输文件。1、启动Dreamweaver，选择“站点”“管理站点”。2、在弹出的“管理站点”对话框中单击“新建”按钮，然后选择“站点”。3、在弹出的“站点定义”对话框中，如果显示向导（“基本”选项卡），则单击“高级”选项卡，然后从“分类”列表中选择“本地信息”（它应当是默认选项）。4、在“站点名称”文本框中，输入CafeTownsend作为站点名称。5、在“本地根文件夹”文本框中，指定在上一节中复制到D:\mywebsite文件夹中的cafe_townsend文件夹。你可以单击文件夹图标来浏览并选择该文件夹，或者在“本地根文件夹”文本框中输入路径。6、在“默认图像文件夹”文本框中，指定cafe_townsend文件夹中已有的images文件夹。你可以单击文件夹图标来浏览并选择该文件夹，或者在“默认图像文件夹”文本框中输入路径。7、单击“确定”。随即出现“管理站点”对话框，显示您的新站点。8、单击“完成”关闭“管理站点”对话框。此时“文件”面板显示当前站点的新本地根文件夹。“文件”面板中的文件列表将充当文件管理器，允许您复制、粘贴、删除、移动和打开文件，就象在计算机桌面上一样。现在，已经为您的站点定义了一个本地根文件夹。本地根文件夹是本地计算机上用来存储Web页面的工作副本的文件夹。如果您以后想要发布页面并使其可供公众访问，则需要在运行Web服务器的远程计算机上定义一个远程文件夹，用来存储本地文件的已发布副本。三、了解你的任务下图是一张为CafeTownsend（一个需要制作Web站点的虚构餐馆）设计的、完整的和符合要求的设计草样。作为Web设计人员，您需要对草样进行转换，使之最终形成可以使用的Web页面。创建基于表格的页面布局表格是用于在HTML页上显示表格式数据以及对文本和图形进行布局的强有力的工具。你可以使用表格快速轻松地创建布局。在本实例中，你将在一个新的Dreamweaver文档中创建若干表格。这些表格的行和单元格实际上将用作你将在以后添加的内容的“容器框”。一、创建并保存新页面建立站点并检查设计草样后，你就可以开始创建Web页面了。首先你将创建一个新页面，并将它保存到你的Web站点的本地根文件夹cafe_townsend中。该页面最终将成为虚构餐馆CafeTownsend的主页。1、在Dreamweaver中，选择“文件”“新建”。2、在“新建文档”对话框的“常规”选项卡上，从“类别”列表中选择“基本页”，从“基本页”列表中选择“HTML”，然后单击“创建”。3、选择“文件”“另存为”。4、在“另存为”对话框中，浏览至定义为站点的本地根文件夹的cafe_townsend文件夹并打开该文件夹。5、在“文件名”文本框中输入index.html，然后单击“保存”。文件名即出现在应用程序窗口顶部的标题栏中。6、在新文档顶部的“文档标题”文本框中，键入CafeTownsend。这就是页面的标题。站点访问者在Web浏览器中查看页面时将在浏览器窗口的标题栏中看到此标题。7、选择“文件”“保存”来保存该页面。二、插入表格：接下来，您将添加一个表格，用于放置文本、图形和MacromediaFlash资源。1、在页面上单击一次，在页面左上角放置插入点。2、选择“插入”“表格”。3、在“插入表格”对话框中，执行下面的操作：a.在“行数”文本框中，输入3。在“列数”文本框中，输入1。在“表格宽度”文本框中，输入700。在“表格宽度”弹出式菜单中，选择“像素”。在“边框粗细”文本框中，输入0。在“单元格边距”文本框中，输入0。在“单元格间距”文本框中，输入0。6、单击“确定”。一个三行一列的表格即出现在文档中。该表格的宽度为700像素，边框、单元格边距和单元格间距均为0。7、单击一次该表格右侧取消对它的选择。8、选择“插入”“表格”以插入另一个表格。9、在“插入表格”对话框中，对第二个表格执行下面的操作：a.在“行数”文本框中，输入1。在“列数”文本框中，输入3。在“表格宽度”文本框中，输入700。在“表格宽度”弹出式菜单中，选择“像素”。在“边框粗细”文本框中，输入0。在“单元格边距”文本框中，输入0。在“单元格间距”文本框中，输入0。10、单击“确定”。第二个表格（该表格具有一行三列）即出现在第一个表格下方。11、单击该表格右侧取消对它的选择。12、通过选择“插入”“表格”，然后在“插入表格”对话框中输入以下值来插入第三个表格：a.在“行数”文本框中，输入1。在“列数”文本框中，输入1。在“表格宽度”文本框中，输入700。在“表格宽度”弹出式菜单中，选择“像素”。在“边框粗细”文本框中，输入0。在“单元格边距”文本框中，输入0。在“单元格间距”文本框中，输入0。13、单击“确定”。第三个表格（该表格具有一行一列）即出现在第二个表格下方。14、单击该表格右侧取消对它的选择。注意：插入表格后可能会看到表格选择器（由绿色线条指示）。通过在表格外单击，通常可以隐藏表格选择器。也可以通过选择“查看”“可视化助理”“表格宽度”禁用表格选择器。三、设置表格属性为了更方便地对表格进行操作，现在将使用“扩展表格”模式来设置具体的表格属性。“扩展表格”模式是一种临时添加表格的单元格边距和间距并增加表格边框以简化编辑的一种功能。它可使你能够精确地放置插入点，而不会出现选择错误的表格或错误的表格内容的状况。1、选择“查看”“表格模式”“扩展表格模式”。2、在第一个表格的第一行内单击一次。3、在“属性”检查器（“窗口”“属性”）的“单元格高度”文本框中输入90，然后按Enter键。4、在第一个表格的第二行内单击一次。5、在“属性”检查器的“单元格高度”文本框中输入166，然后按Enter键。6、在第一个表格的第三行内单击一次。7、在“属性”检查器的“单元格高度”文本框中输入24，然后按Enter键。现在第一个表格中的三行应具有不同的高度。接下来，您将设置第二个表格（该表格包含三列）的属性。8、在第二个表格的第一列内单击一次。9、在“属性”检查器的“单元格宽度”文本框中输入140，然后按Enter键。10、在第二个表格的第二列内单击一次。11、在“属性”检查器的“单元格宽度”文本框中输入230，然后按Enter键。12、将第三列的宽度设置为330个像素。如果已打开表格选择器（“查看”“可视化助理”“表格宽度”），将能看到刚才在各个表格列上输入的三个像素值。13、您无需为这个表格的单元格输入任何高度值，因为这些单元格的高度将取决于您以后添加的内容。14、最后，在最后一个表格（该表格包含一行和一列）内单击一次。15、在“属性”检查器的“单元格高度”文本框中输入24，然后按Enter键。16、单击“文档”窗口顶部的“退出扩展表格模式”链接，返回到“标准”模式。17、保存页面。注意：在“扩展表格”模式下完成对表格属性的设置后，应总是返回到“标准”模式。“扩展表格”模式不属于所见即所得环境，因此某些操作（如调整大小）不会得到预期的结果。四、插入图像占位符：图像占位符是在准备好将最终图形添加到Web页面之前使用的图形。在对Web页面进行布局时图像占位符很有用，因为通过使用图像占位符，您可以在真正创建图像之前确定图像在页面上的位置。1、在文档窗口中，在第一个表格的第一行内单击一次。2、选择“插入”“图像对象”“图像占位符”。3、在“图像占位符”对话框中，执行下面的操作：4、在“名称”文本框中，键入banner_graphic。5、在“宽度”文本框中，输入700。6、在“高度”文本框中，输入90。7、单击颜色框并从颜色选择器中选择一种颜色。在本教程中，我们选择了红棕色(#993300)。保留“替换文本”文本框为空。8、单击“确定”。图像占位符出现在第一个表格内。图像占位符显示最终放置于此处的图像的标签和大小属性。10保存页面。关于图像占位符：图像占位符是在将最终图形添加到Web页面之前使用的临时图形；它不是显示在浏览器中的图形图像。在您发布站点之前，应该用适用于Web的图形文件（例如GIF或JPEG）替换所有添加的图像占位符。五、向页面添加颜色现在，您将通过设置某些表格单元格以及页面背景的颜色，向页面添加更多颜色。1、在上述包含三列的表格的第一个单元格内单击一次。2、击标签选择器中的td标签（单元格标签）以选择该单元格。3、在“属性”检查器（“窗口”“属性”）中，在“背景颜色”文本框内单击一次。“背景颜色”文本框位于“背景颜色”(Bg)颜色框旁。4、在“背景颜色”文本框中，输入十六进制值#993300，然后按Enter键。表格单元格的颜色即变为红棕色。5、在上述包含三列的表格的第二个单元格内单击一次。6、单击标签选择器中的td标签（单元格标签）以选择该单元格。7、在“属性”检查器中，在“背景颜色”文本框内单击一次，输入十六进制值#F7EEDF，然后按Enter键。表格单元格的颜色即变为浅棕色。8、重复第5－7步，将第三个表格单元格的颜色也更改为浅棕色。9、设置完这三个单元格的颜色后，单击一次表格的外部，取消选择该表格。接下来，您将通过修改页面属性来更改整个页面的背景颜色。通过“页面属性”对话框可以设置一些页面属性，包括页面字体的大小和颜色、已访问链接的颜色以及页面边距等。10、选择“修改”“页面属性”。11、在“页面属性”对话框的“外观”类别中，单击“背景颜色”颜色框，然后从颜色选择器中选择黑色(#000000)。12、“确定”。页面的背景即变为黑色。13、保存你的工作。你的页面布局现已完成。该布局包含一些表格，用于放置各种资源，如图像、文本和Flash视频(FLV)文件。向页面添加内容利用Dreamweavercs4，你可以很方便地向Web页面添加多种内容，包括图像、Flash动画、Flash视频、文本等。向页面添加内容后，你还可以可在各种浏览器中进行预览，这样你就可以立即查看你的页面在Web上将要显示的结果。创建页面布局之后，你就可以将资源添加到页面了。你将从添加图像开始。可以在Dreamweaver中使用多种方法向Web页面添加图像。本节中，你将使用不同的方法将四个不同的图像添加到CafeTownsend的首页。一、插入图像替换图像占位符：1、在Dreamweaver的“文件”窗口中，双击打开index.html文件。2、双击页面顶部的图像占位符banner_graphic。3、在“选择图像源文件”对话框中，浏览至您定义为站点根文件夹的cafe_townsend文件夹中的images文件夹。4、选择banner_graphic.jpg文件并单击“确定”。5、在表格外单击一次以取消选中该图像。6、保存该页（Ctrl+S）。使用“插入”菜单插入图像：1、在第一个表格的第三行（低于刚插入的横幅图形两行，彩色表格单元格之上）内单击一次。2、选择“插入”“图像”。3、在“选择图像源文件”对话框中，浏览至cafe_townsend文件夹中的images