您的如何用Dreamweaver CS4创建一个网站

如何用Dreamweaver CS4创建一个网站

2009-07-31 20:37:38|分类 Dreamweaver教程|字号订阅

如何Dreamweaver CS4创建一个网站用  Dreamweaver的教程

建立和设计您的网站 网页

如何Dreamweaver CS4创建一个网站用  Dreamweaver的教程

克里斯珩 thesitewizard.com

对于那些谁也不知道 Adobe公司的Creative Suite 4的Dreamweaver  CS4  是一个众所周知的商业网页编辑器使您能够设计建造和管理复杂的网站。该编辑器是一个什么你看到的是─什么为您提供下载所见即所得的网页编辑器这意味着您可以创建您的网页视觉和你在屏幕上看到而设计是什么您在浏览器看到的就是什么。

至于去所见即所得网页编辑器 Dreamweaver中没有很好地生成符合标准的代码的网页。这意味着您的网站将无法在新版本的Web浏览器打开。

总体目标教程系列

到本教程系列您将创建一个完整的网站的多个网页包括主页反馈表一个公司简介页面一个网站地图。您的网页将载有先进的导航菜单栏 图片多列表格链接到其他网页在您的网站其它网站的链接文字在不同的字体大小等换句话说你将有一个功能齐全的网站 。

更重要的是你将学到如何使用Dreamweaver的设立设计和发布您的网站。你会因此可以更新您的网站并设计新的地点任何时候你想要的。

本章目标

在本章中您将学习如何创建一个基本的两栏的网页发布 以便它可以在互联网上。请注意这是一个操作指南。从中受益事实上甚至理解是您需要按照我描述的步骤。您需要什么

建立一个网站涉及不仅仅是外观设计的网页本身。如果您不熟悉的各个方面建立的网站我建议你看看新手指南阿尔克马尔开始/创建您自己的网站上发现http://www.thesitewizard.com/gettingstarted/startwebsite.shtml

至少您将需要以下内容

Dreamweaver中

由于这是一个Dreamweaver的CS4教程不用说你需要编辑器本身。

请注意本教程假定您使用的是Dreamweaver的政务司司长4 。如果你有Dreamweaver中连同请阅读我的Dreamweaver CS3教程系列代替。虽然CS4和CS3非常相似有小的差异如新功能CS4不存在CS3  所以让您的生活会更容易如果您使用教程专门编写的版本你有。

那些使用早期版本的Dreamweaver 如Dreamweaver中8 将需要升级到目前的版本才能使用此教程。 旧版缺少关键的功能使您无法完成两种CS3或CS4教程。

一种基于We b托管帐户

您还需要一个网络主机为您的网站。对于那些新的We b开发网络主机松散发言公司已被永久的计算机连接到互联网。当您设计您的网页上您需要将他们转移到您的虚拟主机的计算机称为We b服务器 从而使世界其他均可阅读。有许多网络主机周围。如果你不已经有一个你可以找到一系列廉价网络主机http://www.thefreecountry.com/webhosting/budget1 .shtml

虽然没有上述名单因为你不需要它成功地完成本教程 我还建议您注册您自己的域名。域名是一个名称如“ thesitewizard.com” 。这是一个手段人们可以达到您的网站。虽然您可以得到由最初没有自己的域名你会遇到无数问题的道路上如果您这样做。然而 自本教程严格专门设计制造和发布您的网站 网页我将离开没有深入调查此事。相反我将请你们给新手指南上面提到的这和所有其他非设计方面建立一个网站。

如何设定您的网站用Dreamweaver CS4的站点管理器

启动Dreamweaver中。

的窗口前的一半看起来就像下面的图片不改为“ thesitewizard.com的Dreamweaver CS4教程”当然将会出现。实际出现的窗口将略有不同取决于您是使用MacOSX WindowsXP或Windows Vista 。

上方附近的窗口菜单栏的话“文件编辑视图插入修改格式命令网站窗口帮助” 。这个菜单栏您可以访问很多的Dreamweaver的功能。我们将使用此菜单栏过程中广泛的教程。如果要建立一个网站您可以管理使用Dreamweaver 首先你应该做的是援引网站管理员。为此请单击“网站”在菜单栏中。在下拉菜单上单击“新建网站. . . ”该项目的菜单。重要注意事项为简洁起见我将提到这样一个顺序点击“站点”菜单然后点击“新网站. . . ”项目仅作为“网站|新网站. . . ”

出现一个对话框对话框将出现一个标题栏写着“站点定义为无名网站2” 。实际的数字后面的词“网站”可能会有所不同如果你曾经使用Dreamweaver中建立一个网站之前。不要担心。您将要改变它反正。

如果你看看上方的对话框中你会看到两个选项卡 “基本”和“高级”标签。 目前您应该使用“基本”选项卡。如果这是不正确的按“基本法”标签来选择它。如果您不知道这是当前选定的按“基本法”标签 以确保。

主要部分的对话框中您应该可以看到一个外地不到“你想为您的网站吗 ”在这里您可以输入您的网站的名称。如果您不知道怎样称呼您的网站在这一点上和您已经注册过您自己的域名只需输入您的域名在这里。例如如果您买了一个域称为“example.com” 输入“example.com” 不带引号的方块中。如果您要建立一个公司网站输入您的公司名称代替。不要太担心这一领域这只是为自己的个人参考的情况下您建立许多网站和需要区分它们。在这里输入的话就不会出现在您的网站上。

在本教程我将假设您已经输入的“范例公司”的方块中。但是您不需要使用这个名字 因为你下面这个教程。使用您的网站的真实姓名。

下面您网站的名称是外地输入您的网址您的网站下面的问题“什么是HTTP地址 URL 您的网站 ” 。如果您已经购买了域名“example.com” 请输入您的网站地址为“http://www.example.com/ ” 不含引号 除非您的网页主机告诉你否则。

一旦您完成进入上述两个领域的按“Next ”按钮在窗口底部。

在接下来的屏幕中接受默认的“不我不想使用服务器技术” 并点击“下一步”按钮。下一个窗口中您可以控制在Dreamweaver中保存您创建的文件。默认的是把文件的文件夹中具有相同名称作为您的网站。您可以更改的位置如果您希望。请注意此文件夹中仅仅确定在您的计算机上的网页文件保存。您将学习如何发布这些文件到您的虚拟主机在以后的步骤。你应该始终保持一份您的网站在您自己的计算机。如果您不知道该怎么办在这里只需接受默认并单击“下一步” 。

当窗口的问题 “如何连接到你的远程服务器 ”出现时按一下向下箭头的下拉框并选择“无” 。你将改变这个后来当您发布您的网站但现在选择“无”可让您快速开始使用您的网站最低大惊小怪。按“Next ”按钮。

然后您会看到一个“站点定义”摘要。点击“完成” 。

如何创建一个两栏的网页页眉和页脚在Dreamweaver CS4

现在你已经提供了Dreamweaver中的基本信息需要它来管理您的网站您现在将制作您的第一个网页。

在本教程我们将创建一个两栏的网页。 2栏我的意思是该网页将有两个垂直栏。这是一个流行的布局许多网站因为它是两个空间效率和熟悉的用户并且由于这一点用户友好的 。其中一个栏通常是用来举行该网站的标志和导航菜单栏而其他的主要内容。例如如果你看任何thesitewizard.com的文章页就像一个你读你会看到左栏包含导航元素而右边一栏包含文章本身。

单击“文件|新. . .".如果你还记得我前面所说这意味着按一下“文件”菜单其次是“新. . . ”项目在出现的菜单上。一个窗口的标题“新建文档”将会出现。

在布局栏的窗口中找到的那一行说 “2栏液体左侧侧边栏页眉和页脚” 。选择这一项目通过点击一次。

现在看一下最右边的一侧的同一窗口中并寻找“的项目布局的CSS” 。它应该在底部附近的窗口。单击下拉框并选择“创建新文件” 。这会导致Dreamweaver中把信息控制的外观网页称为“的CSS” 在一个单独的文件。我们希望这一点因为所有网页在您的网站上也有同样的基本布局并在这些资料载于一个单一的文件可以节省磁盘空间带宽和速度的加载网页如果您的访问者加载多个网站的网页中。

当您完成上述工作请点击“创建”按钮。

Dreamweaver中会发出的对话框的标题是“保存样式表文件保存为” 。接受默认名称和位置通过点击“保存”按钮。

一旦你做到这一点 网页将着手建立一个2栏的网页内容与一些虚拟输入英寸

的Dreamweaver CS4显示一种略有不同的屏幕布局取决于大型您的显示器分辨率。如果您的屏幕分辨率大 Dreamweaver中可能会开始在它所谓的“分割”模式也就是说它可能显示的根本“原始”的代码在你的网页的上半部分窗口  “守则”的一部分 及视令人高兴的版本以下简称“设计”部分中的下半部分。如果您的屏幕较小 Dreamweaver的启动将只是在“设计”模式中只有视觉愉悦的版本显示。

标准化的外观Dreamweaver的窗口为了本教程请点击“查看|设计”从菜单中如果您在“分割”模式。如果您不能确定该模式你在只要按一下“查看|设计”反正没有伤害将来自这样做。这种开关的布局 以“设计”模式 因为只有您的网页 因为它出现在一个浏览器是显示。不要担心。如果您在任何时候眷念的原始“分割”的布局只需使用“查看|编码与设计”从菜单中得到了回去。但是请注意所有的步骤在本教程以及截图假设您是在“设计”模式因此如果你不切换您可能会混淆后屏幕不显示的我描述它。

简介首页

在您开始取代“ lorem本身悲楚坐在阿梅特”哔哔声文不它不是真正的拉丁美洲或任何语言这个问题 重要的是要理解基本理论背后你会做的事。

这第一页上您的设计将成为您网站的“首页”页面。主页主要是网页的您的网站。这是您的访客的网页时所看到到您的网站只需输入您的域名在他们的浏览器。例如如果您的域名是“example.com” 而您的访客类型“http://www.exa mple.com/ ”在其浏览器中他们最终将在您的主页。

由于网页的功能几乎像前门您的网站或接近前门作为一个网站可以拥有 它应该含有一些信息什么是您的网站并链接到重要的网页或节您的网站。某些网站管理员还可以使用此空间欢迎他们的来访并有简短的描述对他们可以希望看到的网站上。例如一个公司的网站销售的产品或服务应该有一个主页让游客了解其产品和服务以及指向游客个人产品描述网页在这里他们可以了解有关产品和地点的命令。即使您的网站是一个个人网站您仍然希望自己的主网页以让游客了解有哪些期待您的网站并链接到其他网页或至少是主要部分在您的网站上。

对于本教程我将提供例如文本的虚构公司称为“为例公司” 销售假产品。我强烈建议您使用您自己的文字而不是盲目抄袭我提供假文字。例如如果您的公司被称为“某某公司” 继续使用“某某公司”的地方我使用“范例公司” 。同样如果你是一个个人网站并命名为您的网站后您如“莎士比亚的网站” 这个名字取代的地方我使用“范例公司” 。也是如此的实际内容。

如何设计首页您的网站在Dreamweaver CS4

让我们来看看在默认两栏的网页所产生的Dreamweaver 。有单杠拉伸跨越顶端部分网页称为“头” 。在这里您将在可见的名字您的网站。标题下的是两个栏。狭窄的左栏所谓的“侧栏”中的Dreamweaver一样是在这里您将最终将您的导航菜单。广泛右栏 目前题为“主要内容”是您将大量的您的网页的内容。

正上方“标题” 在部分窗口中属于到Dreamweaver 而不是您的网页您应该可以看到有一节说 “题目 ”其次是外地 目前有“无标题文档” 。这一领域的案文该搜索引擎将显示为标题的网页时显示结果的搜索。这也是文字所表现出的网络浏览器的标题栏的浏览器窗口时显示您的网页。 点击某个地方的“无题” 并使用删除或Backspace键删除现有的案文。在自己的位置键入名称您的网站。例如如果您的网站被称为“为例公司” 将“无标题文档”与“为例公司” 。

请注意此名称领域是一个内部领域。 Web浏览器没有显示它在体内可见部分您的网页。如上所述只有领域中显示的标题栏的浏览器窗口本身。如果您不知道我说的看看在浏览器窗口的本教程现在。不要使用卷轴也不滚动顶端以任何方式。只是一眼向上上方边缘的浏览器窗口。它应该有“如何Dreamweaver CS4创建一个网站用  Dreamweaver的教程  thesitewizard.com ”或至少是第一部分。俺把这些话到外地的标题此页当我创造它。虽然它并不显示在人体中的一个网页它仍然是一个不可分割的组成部分网页所以你不应该离开它设置为“无标题文档” 。

现在我们进入的可见部分的您的网页。首先改为“头”的名字您的网站。与以前一样你可以做到这一点只要按一下某个地方的“头” 。闪烁文本光标将会出现。这个文本光标的行为到底光标的方式表现在正常文字处理程序一样Office或Word 。您可以将它与您的箭头键以及使用删除键和Backspace键删除字符。

使用删除或Backspace键删除现有的Word 并输入您的网站的名称来代替。例如将“头”与“公司为例 ”如果这是您的网站名称。

一旦你找到了上述情况这是小事 以取代“主要内容”一节中的网页与您的实际内容。与以前一样按一下某处的话“的主要内容” 删除现有的案文并取代了一些适当的内容。当您与取代“主要内容”的标题着手取代“Lorem本身悲” 等的乱码。只要按一下某处顶端行删除它们然后键入你自己的话。输入和编辑的文字作品在Dreamweaver或多或少相同的 因为它并不根据wordprocessor 。如果您需要创建新的段落按下Enter键Windows 或Return键苹果机 。

的的“H2一级标题”的副标题是存在仅仅是为了表明你你可以在你的字幕文件以及。取代它连同以下内容的一切你想要的。

如果你真的出现了亏损以什么类型您可以使用下面的例子文字无论是字面或作为一种模式。然而最好写些有关您的网站使您没有回去重新编辑它。

欢迎

例如公司的方式处理所有的例子。我们的文学作品的例子低俗小说课本 电影评论剧本椅子桌子家用电器等。我们甚至有例子例子。

特色产品

Dreamweaver的网站这是一个例子Dreamweaver的网站创建的帮助下thesitewizard.com的教程上的Dreamweaver 。教程教你如何创建一个基本的但全功能网站您可以修改和补充 以满足您的需要。

没有任何改变左栏侧边栏 。你将增加一个导航菜单本条在以后的章节所以离开不变。向下滚动到页面底部并找到单杠称为“页脚” 。一词取代“页脚”你喜欢的东西。许多网站管理员建立一个版权声明本节中。非常简单一个版权声明仅仅是一个句子如“版权所有©2008克里斯衡” 。版权符号 ©可以插入点击“插入|超文本标记语言|特殊字符|版权”从菜单中。欲了解更多有关版权看到我的其他文章的版权问题有关的网站管理员在http://www.thesitewizard.com/general/copyright-issues.shtml

当您满意您的网页将它保存单击“文件|另存为. . .".一个对话框将会出现。键入“ index.html ”会不包括引号进入“文件名”字段并单击“保存”按钮。

重要提示请确认您输入的名称是“ index.html ”会完全按照我给了它完全英文字母小写没有空格的话。不使用任何其他名称。文件的名称为“ index.html ”会被视为特殊的文件大多数We b服务器。发布时间正确 当访问者访问您的网站只是域名如

“http://www.example.com/ ”  Web服务器会自动提供给他们的“ index.html ”会文件在您的网站的主要文件夹中。

发布您介绍第一网页

在我们走向抛光网页所以它看上去至少有一半体面您需要将网页发布到您的网页主机。这就是说你现在学习如何转让您的网页及相关文件到您的虚拟主机 以使该网页成为“活”在互联网上。

虽然你可能不好意思为此在这一点上因为网页是不完整的但实际上没有理由担心。如果您还没有广告网站的地址 “网址” 给任何人没有人会知道您的网站存在。因此这个早期版本的网页将被视为由任何人但您。人们不会访问您的网站的蓝色因为你刚才发生的注册网络托管帐户。无论是将搜索引擎知道您的网站存在。你将会发现随着时间的推移并不那么容易获得的访问者。

主要的原因我们出版您的网页是在这个时候你可以熟悉所有主要阶段设计中的一个网页即建立一个网页不仅涉及制作网页但它也涉及到让网页从您的计算机到您的虚拟主机的计算机上。一旦你得到了这个障碍的话您将掌握什么是最大的技术挑战的新手可能会遇到。不要让这个吓唬你但它的其实很简单

请注意你不应该跳过这一步如果你想遵循这一系列的Dreamweaver CS4教程。我所有的以后的章节将假定你已经做了这一步。如果你错过了这一步一些事情描述在未来几章可能无法正常工作的方式他们理应。

如何发布您的网页使用Dreamweaver

启动站点管理器了。这可以通过点击“网站|管理网站. . . ”从菜单中。出现一个对话框题为“管理的网站”应该开放与您网站的名称中强调框主要部分的窗口。如果不是的话强调单击名称以突出它。然后点击“修改. . . ”按钮。

站点管理器向导您遇到早些时候本章将会弹出。按“Next ”按钮直到您到达屏幕上的信息“如何连接到你的远程服务器 ” 。在第一部分本教程中您选择“无”这一答案。你现在必须改变这种实际价值您将需要以发布您的网页。

在下拉框中的问题选择“的FT P” 。当您这样做时下面的空白部分将填充了一些其他问题。

从本质上讲您需要输入的信息您的虚拟主机为您提供当您第一次注册了一个网络托管帐户。网站主机通常您发送一个漫长的详细名单您的帐户当您第一次注册。其中最重要的是你的东西被称为“FT P地址。 ”FT P的使用或文件传输协议是通常的手段您将您的网页从自己的计算机到您的虚拟主机的计算机上。这种行为的转移您的档案从计算机到您的虚拟主机的计算机是不同的称为“上传”或“出版” 。

如果您的虚拟主机的信息向您发送一封电子邮件中无论是打印出的信息或打开另一个窗口让您可以提到它。就个人而言我认为开放在另一窗口是更好的 因为你可以剪切和粘贴所需的资料从一个窗口到另一个和避免输入错误。然而每个人都有自己的工作方式以便做最适合您。

wm

注意如果您使用Windows Vista  Windows防火墙可以发出一个信息询问您是否阻止或解除连接。请务必点击“解除阻止”按钮否则你会被拦截的Dreamweaver的FTP连接。默认情况下 FTP连接是双向的需要你的服务器连接使连接回你因此警告的防火墙。这是正常的所以不要恐慌当您收到该邮件从Vista 。干扰防火墙也可能会导致您的第一次测试在Dreamweaver中失败从而导致问题的Dreamweaver来一个对话框告诉您使用被动连接。只要按一下确定以该邮件然后点击“测试连接”了。

如果“测试连接”按钮失败 网页将显示一个对话框要求您尝试连接与被动FT P 。要做到这一点看看上方的对话框中找到“高级”标签。单击它。某处在网页中间的是一个复选框“使用被动FTP” 。单击复选框以激活它。然后单击“基本”标签上方的对话框中再次回到你的向导察看。最后 点击“测试连接”按钮。

如果测试仍然失败则可能是您输入错误早些时候的一些信息。检查一切。如有疑问请联系您的虚拟主机并请他们提供哪些信息你需要输入的每个领域。 只有您的虚拟主机有这样的信息。 

如果试验成功按“Next ”按钮直到你能简要页的最后一次。然后单击“完成”按钮。不要单击取消按钮的快捷方式了此对话框或者您可能重新进入一切您输入较早。

点击“完成”再次驳回“管理站点”对话框。

现在您已经正确配置Dreamweaver中为您的网站它的时间终于发布您的网页。为此请单击“网站|将” 。 Dreamweaver中会发出不同的讯息让您知道的进展情况上传。当Dreamweaver中的持久性有机污染物的消息询问您是否要“把相关文件吗 ”回答“是” 。这不仅意味着它是上载的东西喜欢你的图片和CSS文件所要求的网页。如果你不想回答这个问题每次发布的更新版本您的网站上选中“不要显示此讯息” 。

测试网页

现在你已经出版上载您的网页及相关文件到您的网站您将需要测试它载入它在We b浏览器。这将让您知道您是否已作出任何错误时输入您的详细资料早些时候如将文件上传到了错误的目录 。

启动Web浏览器输入网址 “网址” 您的网站。这应该是相同的地址你输入的“HTTP地址”字段早先在Dreamweaver 。例如键入“http://www.exa mple.com/ ”如果这是您的网址。

如果您输入正确的FTP细节你应该看到的网页设计早些时候在浏览器中。

如果你获得一个这样的错误“没有的D NS对www.e xa m p l e.co m”或“域未找到” 它可能意味着您的域名还没有传播到您的ISP 。简而言之这意味着你可能只买了您的域名。这需要时间为新的网域名称必须承认世界各地的通常为2天或以上  因此它可能是您的ISP还没有更新其域名服务器认识到您的新域名。有些网络的主机给你一个临时地址你可