外贸站点建立的教程希望对各位站长有用 - 主机评测 - 美国主机代购,美国主机导购站,美国主机,美国空间 -- Www.FarLY.Com

外贸SOHO自助建站之旅
来源：SOHO解决方案网作者：司马青衫发布时间：2007-11-07 第二部分：配置你的计算机环境
在正式建设外贸网站之前，我们需要安装一些必要的网站设计软件，搭建一个网站开发环境，把我们的电脑变成一个网站开发平台和虚拟的Web服务器，以方便我们的设计、调试还有将来的网站上传。有一些工具，相信你的电脑里已经安装好了，还有一些软件可能对外贸SOHO来说有些陌生，没怎么用过。不过我们用到的大部分都是这些软件的基本功能，上手还是很容易的。
1．图片处理软件，用来处理、设计和制作外贸网站上用到的图片，如网站标志，产品图片等。推荐使用大名鼎鼎的Photoshop，功能强大，可以制作出很多让人惊叹的图片效果。当然，你也可以使用Fireworks, 甚至好几个图片处理软件一齐上阵。
2．网络浏览工具。除了IE外，最好也安装上Firefox，因为有可能同一个网页在两个浏览器中显示的效果不尽相同，在调试时，我们要分别在IE和Firefox里预览一下，保证他们按照我们设想的效果显示。
3．网页设计软件。如DreamWeaver和FrontPage。有了它们的帮助，你就可以很直观地编辑网站，而必须要对HTML编码有很高的掌握要求了（不过能够系统学习一下会更好）。这里推荐使用DreamWeaver，因为与FrontPage相比，DreamWeaver生成的代码质量和效率更高，文件也更清爽。
4．FTP软件，用来把已经设计好的网页文件或者程序上传到Web服务器的工具。我以前习惯用CuteFTP，不过后来试用了一下LeapFTP，感觉也很好用，绿色软件，而且程序文件非常小，只有几百K，功能却不差。
5．本地Web服务器环境。如果你只想设计一个静态的外贸网站，那就不需要安装配置Web服务器环境，只要通过DreamWeaver或者直接建一个文件夹存放网站文件就行。但是，如果你需要的是一个由网站后台管理程序和数据库驱动的动态网站，以方便网站的管理和持续更新，Web服务器环境的配置就是必须的了。鉴于PHP+MySQL占据了Web服务器的绝大部分份额，这里推荐使用Windows+Apache+PHP+MySQL的系统环境。你可以在网上搜索一下WAPM或者WAMP，下载下来并按照说明安装到自己的计算机上就可以了。如果实在找不到，可以联系我，用QQ传给你。
6．CMS（Content Management System内容管理程序）。这就是传说中的后台管理程序了，它是整个动态网站的核心。把这个程序上传到服务器上，然后再网页浏览器上键入你的域名，根据先是页面的提示，就可以安装好了，随后就可以登陆后台，添加、修改和删除网页内容了。CMS可以是你自己开发的，但需要开发者具备专业的知识技能，而且要花费大量的时间。对普通用户来说，使用现成的CMS，并设计有特色的网站模板是最现实的。推荐使用中文的DedeCMS和国外的Mambo/Joomla。

第二部分：网站的本地化设计
现在终于开始实施我这个建设网站的伟大计划了。第一步干啥啊？我们先建设一个静态网站的页面，然后完成一个符合web标准的网站。想使用动态程序制作网站的外贸SOHO朋友，也不要越过这一段，因为修改模板的时候也是用得着这里讲到的一些东西的。

这里先简单说明一下什么是Web标准。
“Web标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。”
关于XHTML， XML，CSS的具体定义，可以参照其他资料，这里不多说了。但有一点我在这里要强调的，按Web标准制作的网页，能够实现“内容与表现相分离”，使你的页面数据在以后可以被分享、交换和重新使用。也就是说，万一你将来希望改变你的网站的字体，字号，颜色等外观，你只需要通过修改极少的代码就可以实现，而不用每一个页面都要重新修改。
（一）创建第一个静态页面
在开始之前，我们要先建一个专用的文件夹用来存放网站的文件，等网站完工后只要把这个文件夹里的东西上传到服务器就可以了。这里我们在D盘的my-work文件夹里新建一个文件夹命名为www.cnsohosolution.com，并在该文件夹里再创建一个文件夹命名为“img”，专门用来存放图片，以后开可以设置其他的文件夹分类存放网站需要的文件，总之以便于管理为原则。
接下来，就让我们来构建第一个页面。
1．打开DreamWeaver（我用的版本是Dreamweaver MX 2004，其他版本基本上都差不多）。-
2．先建立一个站点。单击“站点”->“管理站点”->“新建…”，打开“站点定义为”对话框。在“基本”选项卡界面按照提示填入你的站点的名字，我这里以“www.sohosolution.com”为例。点击“下一步”，选中“否，我不想使用服务器技术”，“下一步”，选中“编辑计算机上的本地副本，完成后在上传到服务器在”，在回答打算把文件储存在计算机的什么位置时，选中我们在上个步骤中创建的文件夹“www.sohosolution.com”（这时显示的路径应该是D:\my-work\cnsohosolution\）。 “下一步”，回答如何连接服务器，选无，“下一步”，“完成”。
3.创建网站第一个页面。“文件”->“新建…”在常规选顶卡里选择“基本页”，选择“HTML”，选中“使文档与XHTML兼容”，->“首选参数”，在新建文档对话框里迁择默认文档类型为“HTML”，默认编码为“Unicode (UTF-8)”或者“西欧（iso-8859-1）”，（因为我做的网站还有中文字符，我选了utf-8，纯英文网站的话，两种选择都可以）。“确定”，->“创建”。这样就生成了一个空白的网页了。
此时，我们在“设计”选项卡里看到的是一个空白的页面，但是转到“代码”界面下，看到的却是这样的文字：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>

没错，这就是所谓的HTML代码了。HTML的英文全称是 Hyper Text MarkUp Language，中文叫做"超文本标记语言"。通俗地说，HTML就是用来控制文字、图片、表单、多媒体等各种材料在网页浏览器中的表现形式的。HTML用HTML元素(HTML Element)来标记文本，表示文本的内容。HTML的元素用<开始，以 >结束，一般成对出现，如<html></html>,<body></body>,<p></P>等。后面的元素里，斜杠/表示这个元素就要结束了。
我们现在来稍微解释一下这段代码。第一行<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">,是一个声明，告诉浏览器你使用的是XHTML1.0的版本，浏览器就会使用你所选定的标准解释并表达出文件中的标识来。
接下来<html>……</html>表示他们中间是HTML的正式内容。
在<head>和</head>之间的内容，是Head信息。Head信息是不显示出来的，你在浏览器里看不到。但是这并不表示这些信息没有用处。比如你可以在Head信息里加上一些关键词，有助于搜索引擎能够搜索到你的网页。
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />是告诉浏览器这个网页使用的字符集是西欧字库。很多网页设计公司或个人还是沿用中文网页的习惯来设计外贸网站，把字符集设成charset=gb2312，有可能会因为外国客户的电脑上没有安装中文字库而显示乱码，这就麻烦了。
在<title>和</title>之间的内容，是这个文件的标题。你可以在浏览器最顶端的标题栏看到这个标题。如果你把上面的文件直接保存，在浏览器中预览，你会发现浏览器的最上方就是“Untitled Document”。
接下来是<body></body>，是网页文件的正文。在这个例子里，里面什么都没有，所以我们在“设计”栏下，在浏览器中看到的都是空白的。
尽管什么都没有，但它仍然是一个完整的HTML网页文件，浏览器是可以识别它的。
有关HTML的更多知识，大家可以参考其它文章，由于篇幅有限，这里就不多介绍了。初学的外贸SOHO朋友可以使用DreamWeaver这个可视化工具自动生成HTML，等熟练以后，即使不用网页设计工具，你也可以单纯使用记事本来编辑网页了。很多高手都是自己直接写代码的哦，是不是有些不可思议呢？呵呵。下节继续咱们的——外贸SOHO自助建站之旅！

第三部分设计网站版面布局
上一部分我们只是用DreamWeaver生成了一个只有形式的空白页面，我们这一节的任务就是要在这个空白的网页上规划出不同的区域。实现的主要方法是DIV+CSS。
DIV是HTML的一个块元素，用它可以把我们这个网页分成合理的几个大的部分。CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。用CSS布局主要用层"DIV"来实现，而DIV的样式通过"id选择器"来定义。
前面交待了最基本的东西，接下来我们通过实例一步步地讲解如何布局。
1．创建并调用CSS样式表
这一步有两种办法。第一种就是用DreamWeaver在index.htm打开的状态下，点击“文本”，选择“CSS样式”，点击“新建”，选择器留空，选择器类型选“高级”，定义在：“新建样式表文件”，点“确定”。在跳出的“保存样式表文件为”对话框里，把保存路径放在网站根目录下面（或者在下面建立一个新的文件夹），保存文件名为css.css(文件名可以随便，只要后缀名是css就行)，点“保存”就完成了。你会在D:\my-work\cnsohosolution\文件夹里看到生成了一个新的文件css.css。这时你转到代码模式下，就会发现在<head>与</head>标签之间，多了这么一行代码：<link href="css.css" rel="stylesheet" type="text/css" />。这就是样式表的外部调用了。我们就用它来控制网页的表现形式，而把网页的内容放在HTML里，这样就能实现网页内容与形式的分离了。
另一种方式就是直接在网站根目录下创建一个空白txt文档，然后重命名为css.css,再在html文件的<head>标签里用<link href="css.css" rel="stylesheet" type="text/css" />调用就可以了。条条大路通罗马，你喜欢咋搞就咋搞，呵呵。
2. 插入布局对象。在“设计”视图下，点击“插入”，选择“布局对象”，选择“DIV标签”，在跳出来的对话框的“ID”栏中，输入“container”，选择“插入：在插入点”，点击“确定”。你就会发现在空白页面里自动出现了一句话：“此处显示 id "container" 的内容”。这就是container的区块。如果这时你转到“代码”视图，你会发现在原来<body>与</body>之间，多了这样一行代码：<div id="container">此处显示 id "container" 的内容</div>。聪明的你现在一定知道了，原来插入一个新的布局对象用<div>标签就可以了。通过不同的id可以用CSS控制从而表现出不同的形式来。而如果把我想要展示的内容放在<div>和</div>之间，就可以正确地显示在浏览器中。是的，只要我们能够熟练应用这些代码，我们就可以抛开DreamWeaver、FrontPage之类的工具，直接编写网页代码了，呵呵。
上面我们创建了一个布局对象container，目的是把网站的所有内容都放在这个容器里。接下来我们用同样的方法，在container里再插入下面几个布局对象：header，pagebody, footer,分别用来展示网站的上中下三个部分。注意，这里应该选在插入“在结束标签之前”，而标签则要选择“<div id=”container”>”。
用同样的办法，我们在pagebody里面再次插入两个布局对象，mainbody和sidebar，用来把网页的中间主要部分分成两部分：主要内容部分和工具条。
关于网站开发环境的配置，暂时就说这么多。有很多问题如果还是说不清楚，请查阅网站的其他相关内容，或者联系我，我会不断修改和完善这篇文章。