第II章、如何建立站点？

第二篇：Dreamweaver

　

　　关键在于我们使用一门技术去解决工作和生活中的问题，而不是为了学习而学习，这就是为什么很多高学历却沦为书呆子的缘由。

 

　　 特别说明：如果你可以顺利完成《阡陌纵横CRM登录》、《阡陌纵横CRM主窗口（待续）》则可以跳过Dreamweaver和HTML基础的学习。

　　阡陌纵横CRM登录参考地址： http://student.csdn.net/space.php?uid=254556&do=blog&id=44413

【本章要点】

　　１、建立站点。
　　　　（１）掌握网站站点的创建：包括插入图片和各种链接的应用（文字、图像、邮件、文件下载）。
　　　　（２）能够把项目或网站分门别类建立文件夹，并将相应网页放到里面。
　　２、FTP上传工具使用。

第II章、如何建立站点？

　　到现在为止，你只需要知道Dreamweaver是用来做网页（网站）就可以了。再往下讲，可能多少让你感觉这不是给我们讲如何做网站吗？甚至怀疑自己是不是来错了地方。没错，不仅是你这样感觉，几年前的一位移动公司老总也是这样感觉的。

Code:

1. 　　2004年春，通过内线了解到中国移动XX分公司计划开发一套基于网络的管理系统，由于对于他们业务本身较为熟悉，这个CASE认为是十拿九稳的。经过两轮淘汰，最后就剩下两家软件企业，我们是其中之一，就当我大力鼓吹WEB应用程序的好处时，被他们老总漫不经心地说了一句：“怎么看你们做的都像一个网页，而不是一个软件”。呜呼，不幸也。   
2. 　　然而幸运地是，到了秋季，最终我们的“网页”软件取代了另一家的“软件”，原因是各个分站，电脑配置与环境各异，用传统的应用软件维护成本太高，而本身这个CASE业务并不复杂。   
3. 　　WEB应用程序最大的好处是服务器一次性配置，客户端只要有个浏览器就OK了，别的什么都不要装。  

 

 

　　不止一次，听到这样的言论，你们的这个软件怎么看着像个网站呢？好在越来越多的政府、企业更多的应用系统已经逐步更换为WEB应用系统。毕竟科技在发展，时代在进步，这是大势所趋！

　　我们虽然要学习的是基于B/S模式的WEB软件开发，但归要结底，在Dreamweaver中或者Visual Studio中都认为是一个站点，所以如何建立一个站点，是你必须应该知道的。很多教课书都是先介绍各个工具和菜单，而我们直接从“建立站点”开始，不是故意与众不同，而是我更知道孰轻孰重。

一、建立站点

１、第一步、选择菜单“站点>新建站点”。

　　

２、第二步、打开“站点”对话框。
　　

　　在“本地信息”栏的输入以下信息：
　　站点名称：中国剪报（这个名字你可任意起名）
　　本地根文件夹：D:/zhongguojianbao（这是你站点存放的位置，最好不要建在C盘，想想为什么？）
　　点击“确定”按钮，就这样一个“中国剪报站点”就建立成功了。到目前为止，实际上只是在D盘上建立了一个名为zhongguojianbao的文件夹而已。（如下图）

　　

３、为“中国剪报”站点建立首页。
　　
　　在“文件”窗口“本地文件”下面的“站点－中国剪报”处，点右键，选择“新建文件(F)”。
　　
　　将文件命名为“index.html”，我们一般默认命名为index.html，当然你也可以起其它名字。双击“index.html”，并在页面输入以下内容。　 　　

4、为首页index.html插入图象。

　（１）首先建立一个image文件夹，用来准备存放图像。
　　
　　在“站点-中国剪报”处，点击右键，选择“新建文件夹”，并命名为image。

　（２）选择菜单“插入>图像（I）”。

　　
　　从“选择图像源文件”弹出框选择一个JPG、GIF或者PNG格式图像文件，点击确定。会出现以下对话框，选择“是”按钮。
　　
　　把新插入的图像保存在“image”文件夹内。
　　

５、好了，到现在我们整个首页就做好了。　　

　　
 

６、我们再看看，站点的样子。

　　
　　目前站点也只有首页index.html、文件夹image、图像kuaiba.jpg。

７、再分别为“国内新闻”和“国际新闻”建立文件夹guonei和guoji。

　　　　
　　注：为了让“英语菜鸟”能够跟上进程，国内新闻和国际新闻文件夹分别采用了拼音，我的菜鸟，我们会慢慢过渡到英文缩写，加油！

８、我们继续在guoji和guonei文件夹内建立文件。
　　　　
　　在guoji文件夹内建立jinyongnan.html、shanlin.html网页文件，在guonei建立hebei.html、yichun.html和kuaiba.html网页文件。

９、分别为以上文件输入内容。

　　

１０、接着，我们为国际新闻的“朝鲜领导人金永南会见美国前总统卡特”作超级链接。

　　第一步、在首页，选中“朝鲜领导人金永南会见美国前总统卡特”。　

　　

　　第二步、在“属性”栏处，拖动鼠标指向文件“guoji/jinyongnan.html”。　　

　　

　　

　　第三步、至此，国际新闻部分第一条新闻超级链接我们已经完成。

　　

　　第四步、依次类推，为国际新闻和国内新闻完成全部链接。

　　

　　注：图像做超级链接与文本的方法一样，需要注意的是图像做完链接后，在属栏栏的“边框”属性设为０。否则可能会出现一个“蓝色边框”。

１１、我们经常从网上下载东西，那么，在网页如何实现呢？在我们这个例子中，是下载一个上传软件cuteftp。建立文件夹download，然后复制cuteftp.rar至download文件夹。同样，在index.html主页，选中“cuteftp”文本，拖动至“download/cuteftp.rar”就可以了，实际上文本做超级链接没有什么两样。

　　

１２、邮件链接是网页常见的一种链接，选中“社长信箱”，然后选择菜单“插入>电子邮件链接（L）”，再“电子邮件链接”窗口的“E-mail”输入社长的Email，在此以“hello@zhongguojianbao.com”为例。

　　　　

　　

１３、至此，我们今天的课程马上就要结束了，我们来看看成果。

　　　

　　我们在工具栏选择，从下拉菜单选择“预览在 IExplore F12”，我们从首页点击“朝鲜领导人金永南会见美国前总统卡特”。会发现jinyongnan.html页面取代了首页index.html。想返回，只能点击工具栏“后退”按钮。但我们在网上经常看来，新开一个窗口，这是如何做的呢？

１４、新开一个窗口。　

　　

　　同样，重新在首页index.html选择“朝鲜领导人金永南会见美国前总统卡特”,然后在“属性”中的“目标”处选择“_blank”，这时，保存一下，再刷新一下首页，单击“朝鲜领导人金永南会见美国前总统卡特”，我们发现已经实现新开一个窗口。如下图：　

１５、尽管前面我们很烦琐的完成了一系列的工作，但是本节重点在这里，最终你的站点结构应该形成以下“树形结构”，整个结构整齐有序。

　　

　　让整个站点，分门别类建立文件夹非常重要，拜托你千万不要把页面、图像、下载文件……，全部一股脑地堆放在一起，如果是那样，就如果进了垃圾场一样（现代化的垃圾场也变得有序起来……）。

　　再强调一点，你站点的文件与文件夹可以使用英文缩写（我所提倡和推荐的，但是为了照顾部分菜鸟，我们采用了半英半拼的土洋结合）或者拼音都可，但是请你不要用汉字。

　　可能你对于建立站点这一节，不屑一顾，我们一起来看看蔡亦凡当年的记忆文字吧。

　　今天上午，三个小时的时间一晃就过去了，很喜欢蒋老师的教学方法，总是讲一步，让我们练一步，老师的屏幕通过一个苏亚星软件与我们的电脑实现了同步。十几个人，就田小燕和我听得最为认真，课下交流，我的这些同门师史妹不少在大学已经学过了，原来如此啊。

　　由于上午都是一步一步讲的，每个人下午都是在一个小时内就完成了作业。出乎意料！出乎意料！结果是除了田小燕，全部挨了批，田小燕被株连罚做一遍，其他全部被罚了五遍。

　　宁凯旋是插入的图片为汉字文件名，赵国光是网页的标题全部是“无标题”，张一飞更是文件夹和网页文件到处可见使用汉字，林超更是把所有的东西放在站点一个文件夹内，孙亚乐插入图像的时候没有复制到站点……，吕逸冰是在段落前没有空格，几乎是全军覆没……

　　蒋老师是不是有点太吹毛求疵了，下面小声议论，此时，蒋老师把我们的作业都上传到了服务器上，一会把每个人的打开，让大家自己看，刚才的议论声没有了，发现孙亚乐的图片不见了，张一飞的网页打不开，林超的表面正常，却被蒋老师说简直是一个垃圾场（没有分门别类）……

　　“我们常常说国人如何偷工减料、粗枝大叶……，看看你们做的这些，还不服气，换位思考，如果你是一个客户，掏钱付给公司，却是这个样子你会要吗？你们不是给我做的，你们是准程序员！”蒋老师严厉说道，“这并不是因为客户没有付钱与你，是一种习惯，是一种工作和学习态度！”。

　　直到此时，才感觉脸一阵发热。

　　　　　　　　　　　　　　　　　　　　　　　　　——蔡亦凡于二○○三年春

 

　　亲爱的朋友，你是否存在着以上的问题。这已经是我们的第二份作业了。你完成的如何呢？

二、使用FTP工具上传站点

１、下载FTP工具

　　CuteFTP下载地址：http://www.wosicainiao.net/download/cuteftp.rar

２、上传站点

　　（１）打开cuteftp软件。

　　双击图标，打开cuteftp软件。

　　

　　上图，左部分“D:/zhongguojianboa”表示本地站点。右部分为远程站点，目前尚未连接。

　　（２）设置连接模式

　　

　　点击菜单“编辑>设置（S）…”。

　　

　　把PASV模式（V)前面复选框中的（√）去掉。
　　注：并不是cuteftp上传都需要这样设置，视服务器端情况设置而定。
 

　　（３）连接远程服务器。

　　点击工具栏图中闪电形状的“快速连接”图标。

　　请按以下输入：
　　主机：www.woshicainiao.net
　　用户名：woshicainiao
　　密码：***

　　然后，点击“端口：21”后面的闪电图标。开始连接到服务器……，稍等片刻，右半部分路径变为“/”，说明你已经成功连接到服务器。
　

　　在服务器端（即右半部分）空白区域点右键，从“右键菜单”选择“建立新目录（I）…”。

　　

　　输入你的名字拼音。例如：jianglaofuzi，双击“jianglaofuzi”。

　　

　　选取“本地站点（D:/zhongguojianbao）”的所有文件与文件夹，然后点击工具栏的上传按钮。或者直接拖拽到右半部分“远程站点”。

　　

　　好了，我们现在可以试着使用“http://www.woshicainiao.net/renwu/jianglaofuzi”访问我们刚刚建立的站点了。

　　

【本章任务】

　　任务编号：dw-002、请使用cuteftp工具把今天建立站点的内容上传至www.woshicainiao.net，并且能够通过http://www.woshicainiao.net/renwu/yourname访问。

　　提醒：cuteftp上传的用户名和密码分别为woshicainiao、net，renwu文件夹不需要建立，仅新建你的姓名（拼音）文件夹即可，然后把本地站点上传。