如何用dreamweaver cs4创建一个网站

如何用 Dreamweaver CS4 创建一个网站 2009-07-31 20:37:38| 分类： Dreamweaver 教程|字号 订阅 如何 Dreamweaver CS4 创建一个网站用 （ Dreamweaver 的教程） 建立和设计您的网站，网页 如何 Dreamweaver CS4 创建一个网站用 （ Dreamweaver 的教程） 克里斯珩， 对于那些谁也不知道， Adobe 公司的 Creative Suite 4 的 Dreamweaver （ CS4 ） ， 是一个众所周知的商业网页编辑器，使您能够设计，建造和管理复杂的网站。该编辑器是 一个什么，你看到的，是什么为您提供下载（所见即所得）的网页编辑器，这意味着您 可以创建您的网页视觉和你在屏幕上看到，而设计是什么您在浏览器看到的就是什么。 至于去所见即所得网页编辑器， Dreamweaver 中没有很好地生成符合标准的代码的网页。 这意味着，您的网站将无法在新版本的 Web 浏览器打开。 总体目标：教程系列 到本教程系列，您将创建一个完整的网站的多个网页，包括主页，反馈表，一个公司简介 页面，一个网站地图。您的网页将载有先进的导航菜单栏，图片，多列，表格，链接到其 他网页在您的网站，其它网站的链接，文字在不同的字体大小等，换句话说，你将有一个 功能齐全的网站， 。 更重要的是，你将学到如何使用 Dreamweaver 的设立，设计和发布您的网站。你会因此 可以更新您的网站，并设计新的地点任何时候你想要的。 本章目标 在本章中，您将学习如何创建一个基本的两栏的网页，发布，以便它可以在互联网上。 请注意，这是一个操作指南。从中受益，事实上，甚至理解是，您需要按照我描述的步骤。 您需要什么 建立一个网站涉及不仅仅是外观设计的网页本身。如果您不熟悉的各个方面建立的网站， 我建议你看看新手指南阿尔克马尔开始/创建您自己的网站上发现 /gettingstarted/startwebsite.shtml 至少，您将需要以下内容： Dreamweaver 中 由于这是一个 Dreamweaver 的 CS4 教程，不用说，你需要编辑器本身。 请注意，本教程假定您使用的是 Dreamweaver 的政务司司长 4 。如果你有 Dreamweaver 中，连同请阅读我的 Dreamweaver CS3 教程系列代替。虽然 CS4 和 CS3 非常相似，有 小的差异（如新功能 CS4 不存在 CS3 ） ，所以让您的生活会更容易，如果您使用教程 专门编写的版本，你有。 那些使用早期版本的 Dreamweaver ，如 Dreamweaver 中 8 ，将需要升级到目前的版本 才能使用此教程。旧版缺少关键的功能，使您无法完成两种 CS3 或 CS4 教程。 一种基于 Web 托管帐户 您还需要一个网络主机为您的网站。对于那些新的 Web 开发，网络主机（松散发言）公 司，已被永久的计算机连接到互联网。当您设计您的网页上，您需要将他们转移到您的虚 拟主机的计算机（称为 Web 服务器） ，从而使世界其他均可阅读。有许多网络主机周围。 如果你不已经有一个，你可以找到一系列廉价网络主机 /webhosting/budget1.shtml 虽然没有上述名单（因为你不需要它成功地完成本教程） ，我还建议您注册您自己的域名。 域名是一个名称，如“ ” 。这是一个手段，人们可以达到您的网站。虽 然您可以得到由最初没有自己的域名，你会遇到无数问题的道路上如果您这样做。然而， 自本教程严格专门设计（制造）和发布您的网站，网页，我将离开没有深入调查此事。相 反，我将请你们给新手指南上面提到的这和所有其他非设计方面建立一个网站。 如何设定您的网站用 Dreamweaver CS4 的站点管理器 启动 Dreamweaver 中。 的窗口前的一半，看起来就像下面的图片（不改为“ 的 Dreamweaver CS4 教程 ”当然）将会出现。实际出现的窗口将略有不同取决于您是使用 Mac OS X ， Windows XP 或 Windows Vista 。 上方附近的窗口菜单栏的话“文件编辑视图插入修改格式命令网站窗口帮助” 。这个菜单栏， 您可以访问很多的 Dreamweaver 的功能。我们将使用此菜单栏过程中，广泛的教程。 如果要建立一个网站，您可以管理使用 Dreamweaver ，首先你应该做的是援引网站管理 员。为此，请单击“网站”在菜单栏中。在下拉菜单上，单击 “新建网站. ”该项目的菜单。 重要注意事项：为简洁起见，我将提到这样一个顺序点击“站点” 菜单，然后点击“新网站. ” 项目仅作为“网站|新网站. ” 出现一个对话框，对话框将出现一个标题栏写着“站点定义为无名网站 2 ” 。实际的数字后 面的词“网站” 可能会有所不同如果你曾经使用 Dreamweaver 中建立一个网站之前。不要担 心。您将要改变它反正。 如果你看看上方的对话框中，你会看到两个选项卡： “基本” 和“高级”标签。目前，您应该 使用“基本” 选项卡。如果这是不正确的，按“基本法” 标签来选择它。如果您不知道这是当前 选定的，按“基本法”标签，以确保。 主要部分的对话框中，您应该可以看到一个外地不到“你想为您的网站吗？ ”在这里，您可 以输入您的网站的名称。如果您不知道怎样称呼您的网站在这一点上，和您已经注册过， 您自己的域名，只需输入您的域名在这里。例如，如果您买了一个域称为“ ” ，输入“ ” （不带引号）的方块中。如果您要建立一个公司网站，输入您的 公司名称代替。不要太担心这一领域：这只是为自己的个人参考的情况下您建立许多网站 和需要区分它们。在这里输入的话就不会出现在您的网站上。 在本教程，我将假设您已经输入的“范例公司” 的方块中。但是，您不需要使用这个名字， 因为你下面这个教程。使用您的网站的真实姓名。 下面您网站的名称是外地输入您的网址您的网站，下面的问题“什么是 HTTP 地址（ URL ）您的网站？ ” 。如果您已经购买了域名 “ ” ，请输入您的网站地址为“ / ” （不含引号） ，除非您的网页主机告诉你，否则。 一旦您完成进入上述两个领域的，按“ Next ”按钮，在窗口底部。 在接下来的屏幕中，接受默认的“不，我不想使用服务器技术” ，并点击“下一步”按钮。 下一个窗口中，您可以控制在 Dreamweaver 中保存您创建的文件。默认的是把文件的文 件夹中具有相同名称作为您的网站。您可以更改的位置如果您希望。请注意，此文件夹中 仅仅确定在您的计算机上的网页文件保存。您将学习如何发布这些文件到您的虚拟主机在 以后的步骤。你应该始终保持一份您的网站在您自己的计算机。如果您不知道该怎么办在 这里，只需接受默认并单击“下一步” 。 当窗口的问题， “如何连接到你的远程服务器？ ”出现时，按一下向下箭头的下拉框并选 择“无” 。你将改变这个后来当您发布您的网站，但现在，选择“无”可让您快速开始使用您 的网站最低大惊小怪。按“ Next ”按钮。 然后，您会看到一个“站点定义 ”摘要。点击“完成” 。 如何创建一个两栏的网页页眉和页脚在 Dreamweaver CS4 现在你已经提供了 Dreamweaver 中的基本信息需要它来管理您的网站，您现在将制作您 的第一个网页。 在本教程，我们将创建一个两栏的网页。 2 栏，我的意思是，该网页将有两个垂直栏。这 是一个流行的布局，许多网站，因为它是两个空间效率和熟悉的用户（并且由于这一点， 用户友好的） 。其中一个栏通常是用来举行该网站的标志和导航菜单栏，而其他的主要内 容。例如，如果你看任何 的文章页，就像一个你读，你会看到左栏包含 导航元素，而右边一栏包含文章本身。 单击“文件| 新.“.如果你还记得我前面所说，这意味着按一下“文件” 菜单，其次是“新. ”项目 在出现的菜单上。一个窗口的标题“新建文档” 将会出现。 在布局栏的窗口中，找到的那一行说： “ 2 栏液体，左侧侧边栏，页眉和页脚” 。选择这 一项目通过点击一次。 现在看一下最右边的一侧的同一窗口中，并寻找“的项目布局的 CSS ” 。它应该在底部附 近的窗口。单击下拉框并选择“创建新文件” 。这会导致 Dreamweaver 中把信息控制的外 观网页（称为“的 CSS ” ）在一个单独的文件。我们希望这一点，因为所有网页在您的网 站上也有同样的基本布局，并在这些资料载于一个单一的文件可以节省磁盘空间，带宽和 速度的加载网页，如果您的访问者加载多个网站的网页中。 当您完成上述工作，请点击“创建” 按钮。 Dreamweaver 中会发出的对话框的标题是“ 保存样式表文件保存为” 。接受默认名称和位 置，通过点击“保存”按钮。 一旦你做到这一点，网页将着手建立一个 2 栏的网页内容与一些虚拟输入英寸 的 Dreamweaver CS4 显示一种略有不同的屏幕布局取决于大型您的显示器分辨率。如果 您的屏幕分辨率大， Dreamweaver 中可能会开始在它所谓的“分割” 模式，也就是说，它 可能显示的根本“原始”的代码在你的网页的上半部分窗口（ “守则”的一部分） ，及视令人 高兴的版本（以下简称“设计 ”部分）中的下半部分。如果您的屏幕较小， Dreamweaver 的启动将只是在“设计”模式中，只有视觉愉悦的版本显示。 标准化的外观 Dreamweaver 的窗口，为了本教程，请点击“查看|设计”从菜单中如果您在 “分割”模式。如果您不能确定该模式你在，只要按一下“查看|设计”反正没有伤害将来自这 样做。这种开关的布局，以“设计” 模式，因为只有您的网页，因为它出现在一个浏览器， 是显示。不要担心。如果您在任何时候眷念的原始“分割”的布局，只需使用“查看|编码与设 计”从菜单中得到了回去。但是请注意，所有的步骤在本教程以及截图，假设您是在“ 设计” 模式，因此，如果你不切换，您可能会混淆后，屏幕不显示的我描述它。 简介首页 在您开始取代“ lorem 本身悲楚坐在阿梅特”哔哔声文（不，它不是真正的拉丁美洲或任何 语言，这个问题） ，重要的是要理解基本理论背后你会做的事。 这第一页上，您的设计将成为您网站的“首页” 页面。主页主要是网页的您的网站。这是您 的访客的网页时所看到到您的网站，只需输入您的域名在他们的浏览器。例如，如果您的 域名是“ ” ，而您的访客类型“ / ”在其浏览器中，他 们最终将在您的主页。 由于网页的功能几乎像前门您的网站（或接近前门作为一个网站可以拥有） ，它应该含有 一些信息什么是您的网站，并链接到重要的网页（或节）您的网站。某些网站管理员还可 以使用此空间，欢迎他们的来访，并有简短的描述对他们可以希望看到的网站上。例如， 一个公司的网站销售的产品或服务应该有一个主页，让游客了解其产品和服务，以及指向 游客个人产品描述网页，在这里他们可以了解有关产品和地点的命令。即使您的网站是一 个个人网站，您仍然希望自己的主网页，以让游客了解有哪些期待您的网站，并链接到其 他网页（或至少是主要部分）在您的网站上。 对于本教程，我将提供例如文本的虚构公司称为“为例公司” ，销售假产品。我强烈建议您 使用您自己的文字而不是盲目抄袭我提供假文字。例如，如果您的公司被称为“某某公司” ，继续使用“某某公司”的地方，我使用“范例公司” 。同样，如果你是一个个人网站，并命 名为您的网站后，您，如“莎士比亚的网站 ” ，这个名字取代的地方，我使用 “范例公司” 。 也是如此的实际内容。 如何设计首页您的网站在 Dreamweaver CS4 让我们来看看在默认两栏的网页所产生的 Dreamweaver 。有单杠拉伸跨越顶端部分网页 称为“头” 。在这里，您将在可见的名字您的网站。标题下的是两个栏。狭窄的左栏，所谓 的“侧栏” 中的 Dreamweaver 一样，是在这里您将最终将您的导航菜单。广泛右栏，目前题 为“主要内容” 是您将大量的您的网页的内容。 正上方“标题” ，在部分窗口中属于到 Dreamweaver ，而不是您的网页，您应该可以看到 有一节说： “题目： ”其次是外地，目前有“无标题文档” 。这一领域的案文，该搜索引擎 将显示为标题的网页时，显示结果的搜索。这也是文字所表现出的网络浏览器的标题栏的 浏览器窗口时，显示您的网页。 点击某个地方的“无题” ，并使用删除或 Backspace 键删 除现有的案文。在自己的位置，键入名称，您的网站。例如，如果您的网站被称为“为例公 司” ，将“ 无标题文档” 与“为例公司” 。 请注意，此名称领域，是一个内部领域。 Web 浏览器没有显示它在体内（可见部分）您 的网页。如上所述，只有领域中显示的标题栏的浏览器窗口本身。如果您不知道我说的， 看看在浏览器窗口的本教程现在。不要使用卷轴，也不滚动顶端以任何方式。只是一眼向 上上方边缘的浏览器窗口。它应该有“如何 Dreamweaver CS4 创建一个网站用 （ Dreamweaver 的教程） （ ） ”或至少是第一部分。俺把这些话到外 地的标题此页当我创造它。虽然它并不显示在人体中的一个网页，它仍然是一个不可分割 的组成部分网页，所以你不应该离开它设置为“无标题文档” 。 现在，我们进入的可见部分的您的网页。首先改为“头” 的名字您的网站。与以前一样，你 可以做到这一点只要按一下某个地方的“头” 。闪烁文本光标将会出现。这个文本光标的行 为到底光标的方式表现在正常文字处理程序一样 Office 或 Word 。您可以将它与您的箭头 键以及使用删除键和 Backspace 键删除字符。 使用删除或 Backspace 键删除现有的 Word ，并输入您的网站的名称来代替。例如，将 “头”与“公司为例， ”如果这是您的网站名称。 一旦你找到了上述情况，这是小事，以取代“主要内容” 一节中的网页与您的实际内容。与 以前一样，按一下某处的话“的主要内容” ，删除现有的案文，并取代了一些适当的内容。 当您与取代“主要内容”的标题，着手取代“ Lorem 本身悲” （等）的乱码。只要按一下某处 顶端行，删除它们，然后键入你自己的话。输入和编辑的文字作品在 Dreamweaver 或多 或少相同的，因为它并不根据 wordprocessor 。如果您需要创建新的段落，按下 Enter 键 （ Windows ）或 Return 键（苹果机） 。 的的“ H2 一级标题”的副标题是存在仅仅是为了表明你，你可以在你的字幕文件以及。取代 它，连同以下内容的一切你想要的。 如果你真的出现了亏损，以什么类型，您可以使用下面的例子文字，无论是字面或作为一 种模式。然而，最好写些有关您的网站，使您没有回去，重新编辑它。 欢迎 例如公司的方式处理所有的例子。我们的文学作品的例子，低俗小说，课本，电影评论， 剧本，椅子，桌子，家用电器等。我们甚至有例子例子。 特色产品 Dreamweaver 的网站：这是一个例子 Dreamweaver 的网站，创建的帮助下， 的教程上的 Dreamweaver 。教程教你如何创建一个基本的，但全功能 网站，您可以修改和补充，以满足您的需要。 没有任何改变左栏（侧边栏） 。你将增加一个导航菜单本条在以后的章节，所以离开不变。 向下滚动到页面底部并找到单杠称为“页脚” 。一词取代“页脚”你喜欢的东西。许多网站管 理员建立一个版权声明，本节中。非常简单，一个版权声明仅仅是一个句子，如“版权所有 2008 克里斯衡” 。版权符号， ，可以插入点击“插入 |超文本标记语言|特殊字符|版权” 从菜单中。欲了解更多有关版权，看到我的其他文章的版权问题有关的网站管理员，在 /general/copyright-issues.shtml 当您满意您的网页，将它保存单击“文件| 另存为.“.一个对话框将会出现。键入“ index.html ”会（不包括引号）进入“文件名”字段并单击“ 保存”按钮。 重要提示：请确认您输入的名称是“ index.html ”会完全按照我给了它，完全英文字母（小 写）没有空格的话。不使用任何其他名称。文件的名称为“ index.html ”会被视为特殊的文 件大多数 Web 服务器。发布时间正确，当访问者访问您的网站只是域名，如“ / ” ， Web 服务器会自动提供给他们的“ index.html ”会文件在您 的网站的主要文件夹中。 发布您介绍第一网页 在我们走向抛光网页，所以，它看上去至少有一半体面，您需要将网页发布到您的网页主 机。这就是说，你现在学习如何转让您的网页及相关文件到您的虚拟主机，以使该网页成 为“活”在互联网上。 虽然你可能不好意思为此在这一点上，因为网页是不完整的，但实际上没有理由担心。如 果您还没有广告网站的地址（ “网址” ）给任何人，没有人会知道您的网站存在。因此， 这个早期版本的网页将被视为由任何人，但您。人们不会访问您的网站的蓝色，因为你刚 才发生的注册网络托管帐户。无论是将搜索引擎知道您的网站存在。你将会发现随着时间 的推移，并不那么容易获得的访问者。 主要的原因，我们出版您的网页是在这个时候，你可以熟悉所有主要阶段设计中的一个网 页，即：建立一个网页不仅涉及制作网页，但它也涉及到让网页从您的计算机到您的虚拟 主机的计算机上。一旦你得到了这个障碍的话，您将掌握什么是最大的技术挑战的新手可 能会遇到。不要让这个吓唬你，但它的其实很简单！ 请注意，你不应该跳过这一步如果你想遵循这一系列的 Dreamweaver CS4 教程。我所有 的以后的章节将假定你已经做了这一步。如果你错过了这一步，一些事情，描述在未来几 章可能无法正常工作的方式，他们理应。 如何发布您的网页使用 Dreamweaver 启动站点管理器了。这可以通过点击“网站| 管理网站. ”从菜单中。出现一个对话框，题为 “管理的网站” 应该开放，与您网站的名称中强调框主要部分的窗口。如果不是的话强调， 单击名称以突出它。然后点击“修改. ”按钮。 站点管理器向导，您遇到早些时候本章将会弹出。按“ Next ”按钮，直到您到达屏幕上的信 息“如何连接到你的远程服务器？ ” 。在第一部分本教程中，您选择 “无”这一答案。你现在 必须改变这种实际价值，您将需要以发布您的网页。 在下拉框中的问题，选择“的 FTP ” 。当您这样做时，下面的空白部分将填充了一些其他 问题。 从本质上讲，您需要输入的信息，您的虚拟主机为您提供当您第一次注册了一个网络托管 帐户。网站主机通常您发送一个漫长的详细名单，您的帐户，当您第一次注册。其中最重 要的是你的东西被称为“ FTP 地址。 ” FTP 的使用，或文件传输协议，是通常的手段，您 将您的网页从自己的计算机到您的虚拟主机的计算机上。这种行为的转移您的档案从计算 机到您的虚拟主机的计算机是不同的称为“上传” 或“出版” 。 如果您的虚拟主机的信息向您发送一封电子邮件中，无论是打印出的信息或打开另一个窗 口，让您可以提到它。就个人而言，我认为，开放在另一窗口是更好的，因为你可以剪切 和粘贴所需的资料从一个窗口到另一个和避免输入错误。然而，每个人都有自己的工作方 式，以便做最适合您。 把 FTP 地址，您的虚拟主机给你的答案领域的“ 什么是主机名或 FTP 地址您的 Web 服务 器？ ”的问题。如果你有自己的域名和托管的商业网页主机，这个地址通常是您的域名前 缀的搜索“ FTP ” 。例如，如果您的域名是“ ” ，许多网站的主机将建立您的 FTP 地址是“ ” 。请检查您所收到的电子邮件从您的网页主机此信息，或 要求他们如果无法找到的细节。如果地址的确是“ ” ，输入框，在这里。 （注：并非所有的 Web 主机按照“ 公约” 。有些网络主机请您只需使用 您的域名（即“ ” ）的 FTP 服务器。其他为您提供主机名是完全无关自己的 域名。请确定您真的阅读所提供的资料您的虚拟主机不是随机猜测值进入这里。 ） 下一个问题从 Dreamweaver 中，您需要的答案是“ 什么文件夹在服务器上是否要储存您的 文件？ ” 。基本上，您不能简单地上传（发布） ，您的文件到任何文件夹中您想在 Web 服务器上，并希望他们最终在正确的目录为您的网站。某些 Web 主机告诉你，你需要将 您的网页上一个文件夹中的所谓的“万维网” 。其他需要发布到一个文件夹名为 “ public_html ” 。还有一些人说，你应该把它们在默认目录，您会看到当您连接通过 FTP 。 如果您的虚拟主机告诉你只需上传的文件当您连接通过 FTP ，离开框留空。否则，如果 他们告诉你，你需要发布自己的档案在“网” 目录或其他一些文件夹的名称，请输入该文件 夹名称框中给出。如果东道国没有提到这一点了，有机会，你可以简单地离开框留空。 输入您的 FTP 用户名进入“什么是您的 FTP 登录？ ”领域。与以往一样，这一信息是由您 的网页主机。 输入您的 FTP 密码为“什么是您的 FTP 密码？ ”领域。获得此密码，从您的网页主机如果 你不知道它。如果你不想让输入您的密码每次您发布一个网页，离开“保存” 复选框，激活 （它会自动成为检查当您输入您的密码） 。如果您共享您的计算机与其他人，不想 Dreamweaver 中保存您的密码，请单击选中标记来取消它。 如果您的虚拟主机告诉您，您输入的信息以上是网友或“安全 FTP ” ，点击“使用安全 FTP （ SFTP 发布） ”复选框。否则，请将它留空。如果您不知道该怎么做，你的网页主机没 有透露任何关于它，让它听之任之。 （请注意，如果您检查安全 FTP 选项，请务必重新审视所提供的资料，您的虚拟主机，以 确保默认的文件夹来发布您的档案仍是相同的。有些网络主机日志您在不同的文件夹当您 连接的网友从一个你当您连接通过 FTP 。因此，您可能必须调整的文件夹名称考虑到这 一点：如果您使用 SFTP 发布选项。一般而言，如果您是混淆或不能肯定，刚刚离开框中 选中使用正常的 FTP 。您随时可以尝试这种办法在将来当你变得更加有经验和信心出版 使用 Dreamweaver 。现在，让我们的一切工作刚刚获得第一。 ） 点击“测试连接”按钮来检查您输入的所有信息正确。 注意：如果您使用 Windows Vista ， Windows 防火墙可以发出一个信息，询问您是否阻 止或解除连接。请务必点击“解除阻止” 按钮，否则你会被拦截的 Dreamweaver 的 FTP 连 接。默认情况下， FTP 连接是双向的，需要你的服务器连接，使连接回你，因此警告的 防火墙。这是正常的，所以不要恐慌当您收到该邮件从 Vista 。干扰防火墙也可能会导致 您的第一次测试在 Dreamweaver 中失败，从而导致问题的 Dreamweaver 来一个对话框， 告诉您使用被动连接。只要按一下确定以该邮件，然后点击“测试连接” 了。 如果“测试连接”按钮失败，网页将显示一个对话框，要求您尝试连接与被动 FTP 。要做到 这一点，看看上方的对话框中找到“高级” 标签。单击它。某处在网页中间的是一个复选框 “使用被动 FTP ” 。单击复选框以激活它。然后单击“基本” 标签上方的对话框中再次回到你 的向导察看。最后，点击“测试连接 ”按钮。 如果测试仍然失败，则可能是您输入错误早些时候的一些信息。检查一切。如有疑问，请 联系您的虚拟主机，并请他们提供哪些信息你需要输入的每个领域。 （只有您的虚拟主机 有这样的信息。 ） 如果试验成功，按“ Next ”按钮，直到你能简要页的最后一次。然后单击“完成” 按钮。不要 单击取消按钮的快捷方式了此对话框，或者您可能重新进入一切您输入较早。 点击“完成” 再次驳回“ 管理站点” 对话框。 现在您已经正确配置 Dreamweaver 中为您的网站，它的时间，终于发布您的网页。为此， 请单击“网站| 将