首页 | 小言视角 | 文摘 | 我的收藏 | 我爱我家 | 技术中心 | 学无止境留言本 |
当前位置:首页>>学无止境>>软件应用>>正文
LZK主讲网页制作入门(图文并茂,浅显易懂)

文章来源: 文章作者: 发布时间:2006-04-19   字体: [ ]

织梦之旅第二站


 

我们进入织梦之旅第二站,在第一站中我们讲了最基本的几个操作,大家不要小看基本操作的重要性,也不要太急于求成,基本的操作方法是最重要的。在这里我们顺便讲一下学习方法的问题,也许有朋友发现了,DW的帮助文件是全中文的,这对于我们深入掌握DW是相当有帮助的,在“帮助”菜单中有“入门和教程”,有“使用Dreamweaver(F1)”,初次看“入门和教程”时发现并不太好懂,其实这是很正常的,因为我们从没有接触过它,但我们还是要经常看这个官方教程,因为它讲得好全面,我们论坛的课程不可能讲得这么全面,我们只能尽量把具体某一项操作讲细,若想全面掌握大家还必须仔细看一下这个教程,一次看不懂没关系,再看一次,跟着上面讲的做做练习,再看还看不懂也没事,总有一天会明白上面所讲的,我们也不要钻死胡同,一个问题老搞不懂就死死地抓住不放,很多知识都是融会贯通的,暂时不懂也可以先放下不管它。好,我们继续课程。
第二站要完成的任务是在index.htm上加一点内容,我们学习如何来插入图片,有了图片,主页就显得生动了,以后我们还会讲到如何在主页中播放音乐,这样就更有声有色了。另外如何使用FTP是本课的重点,掌握了FTP的使用方法相当重要,而且FTP上传主页后能让远隔万里的朋友看到你制作的主页,这是非常有吸引力的,大家要坚持哦(刚刚写的这里时又去办公室整理报表去了,回来后上论坛看看,发现大家的学习积极性实在是高,也给了我很多鼓励,这更坚定了自已坚持下去的决心,大家也要有同样的信心,软件操作这东西不难的,别人编都编出来,我们只要学会使用它完成一些基本的操作,应该是不难的。)


 

*第一步:在页面中插入图片


 

上次我们保存了index.htm文件,现在进入DW时,先要打开原来已保存好的这个文件,打开它的操作方法我不说大家也应该知道了,点击“文件”操作中的“打开”,然后找到home目录下的index.htm后点“打开”即可,上次编辑过的内容就调用出来了。大家也可用右边的“站点管理”中双击index.htm来打开这个文件。在讲插入图片方法之前,我们先说明一个概念,我们把网页文件和一些相关文件都可在在home目录下(当然也可以保存在home目录的子目录下),但必须得保存在home目录下,现在我们要实现插入文件功能,所以前期的准备工作是先把图形文件复制至home目录或home的子目录下(也可以是更深层次的子目录),我们一开始设计网站时就应该讲究条理清楚,不要把图片文件和网页文件乱七八糟地全放在根目录下,尽管现在单独的网页文件很少,但以后随着内容的不断丰富,各种各样的文件会越来越多,如果不分门别类存放的话会很乱很不好管理的。好,现在我们就在home目录下新建一个目录夹专门用于存放文件,这个文件夹取什么名字呢?这个随便你的喜好了,不过关于网页文件的文件命名有两点要注意的,首先,要保存文件名不能包含有中文字符,为什么呢?其实就是因为目前IE浏览器对中文文件名的支持还不完好,有时候可正常浏览,有时候刚不行,这也是为什么有的朋友能在论坛音乐版区听到某首歌而有的朋友却听不到的原因。要注意的第二点是文件名尽量好记,起中文当然好记了,但我们说过了不推荐使用中文文件名,剩下的就只有英文文件名和汉语拼音文件名了,我个人一般是这两种文件名混用,比如说用于图片的文件目录我一般起名为image(以下就以image举例来说明),如果你认为这些单词太陌生的话完全可用拼音文件名,比如起名为tupian。


 

解释清楚了为什么要新建一个文件目录存放相应文件的概念,我们来看一下如何新建文件夹,当然可以利用“我的电脑”或者“资源管理器”来做新建文件夹的操作,但我们也可使用“站点管理器”来完全这一步操作,如果你忘了站点管理器的概念可以回过头温习一下第一课中的内容。好,我们用图例来说明这一步操作:如果右边面板组已隐藏了的话,我们先点击右侧的小箭头把它显示出来,然后在“站点-”中用右击鼠标,在弹出的菜单中选择“新建文件夹”,然后输入名字“image”并回车就可以了。如图1所示:

(图1)


 

另外比如说重命名之类的操作也是可以在“站点管理器”中完成的,而且这是DW一个非常方便的功能,先在这里提一下,以后有机会再深入地举例说明,就是说你在“站点管理器”重新命令了一个文件名,与此文件名相关的链接会自动更新。就说这么多,不能深入说了,要不然大家会感觉到跟不下去的。现在image目录下还没有任何图片文件,我们先把想在网页中使用的图片复制至image文件目录,我们举例用的图片是论坛孩子气爸眯的签名图片http://soft666.com/hzqbm.jpg,我已把hzqbm.jpg保存到image目录下了,我们来看一下如何实现插入图片的操作:用鼠标在文档窗口中在需要插入图片的地方单击,在最上面的菜单栏选"插入"→"图像(Ctrl+Alt+I)",也可以按快捷键Ctrl+Alt+I实现这一操作,点击后会弹出一个“选择图像源文件”的对话框,我们选择e:\home\image\目录下的hzqbm.jpg文件,再点确定,现在在DW编辑窗口就可看到插入的图片了。如图2所示:

(图2)


 

如果我们选择的图片不是home目录下的,刚在选择图片后会出现一个提示对话框‘你愿意复制到根目录’吗?这时候出来的是整个根目录home目录,你在点击其中的某一子目录(比如image目录),就会自动站图片文件复制至image目录中。我们按快捷键“F12”来在IE中预览效果,有了图片后是不是感觉主页有丰富多了。在网页中插入图片后是不是感觉漂亮多了?因为我们还要讲FTP的内容,所以关于图片的操作暂时讲这么多,大家不必局限于我们教程中的进度,可以自已随便试验的。插入图片的操作我们讲完了,大家要自已完成一个作业,就是再在主页中任意增加一张图片,如果你愿意贴出你的照片的话当然更会吸引眼球啦:),操作方法与上面插入“孩子气图片”是完全类似的,我插入的图片是自已在论坛中的头像图片。
友情提示:学做网页了,平时在上网时,看见好看的图片注意保存下来,比如背景图片什么的,把这些美丽的图片插入到自己的网页中,会为网页增色不少!


 

*第二步:申请一个可FTP登录的免费空间
免费空间我已给大家物色好了,是100M的静态FTP空间,100M空间算是非常大了,可以放不少东西呢(再次说明一下免费空间只能自己学做网页玩玩而已,因为免费的午餐越来越少了,空间是说关就关的,一定要把自己硬盘上留有整个网站的备份)。申请方法很简单:


 

在IE浏览器中输入网址http://www.xinwen365.com/reg1.asp,输入会员登录名和密码,比如我输入的是用户名称是lzk,在您的密码输入你设置的密码,这个密码一定要记牢,因为FTP登录时必须要用到这个密码的。联系方式要求具体填写姓名及联系方式,比如我写的是"罗XX 湖南省怀化市气象局"(要写详细点,要不然要求退出重写).Mail地址是qxsoft@163.com,再点击下面的提交就会弹出一个提示对话框,关闭后记住以下重新信息,因为呆会儿讲FTP登录时用得着:


 






免费空间地址 lzk.xinwen365.com
























ftp服务器地址 61.151.239.81
ftp服务端口 21
ftp帐号 lzk
ftp密码 *******
空间已使用 0兆(MB)
空间总量 100兆(MB)
单个文件大小 500K 请不要上传超过500K的文件

下面还有一点注意事项:如"免费空间里不允许上传mp3歌曲,FLASH,MTV"(这些我们不用急,因为我们都可以调用其它网站的,这个我们会在论坛上讲到)


 

FTP地址为61.151.239.81,访问路径是lzk.xinwen365.com,另外不能忘记的当然是你开始输入的用户名(我用的名字是lzk,你当然不能用lzk这个名字了,你得另外起一个名字,当然名字不能包含汉字的,只能是字母或者数字组合)。这个空间是申请后马上就可使用的,马上就可以用我们下面介绍的FTP登录方法上传文件了。


 

*第三步:FlashFXP软件的使用


 

FlashFXP是一款优秀的FTP软件,FTP软件的基本功能是用FTP登录网站服务器,上传下载文件,我们常用它来完成上传工作,只有上传文件了才能使其它网友也可以看到你的主页。我们先来下载一个FlashFXP 简体中文版,下载地址是(文件大小:657KB)http://soft666.com/FlashFXP.rar,把FlashFXP.exe解压至硬盘中的某一目录,只要这一个文件就可运行了,双击FlashFXP.exe运行,第一次运行会弹出弹出一个提示:“Flash-需要新的注册密钥”,我们点击最下面的按钮“输入注册码”,然后先复制中的这一串用红色字体表示的代码(如图4所示)FLASHFXPwQAOlhkgwQAAAAC6W5MNJwTnsl73nIraAU149tnCQS
0hmZU3GGBQG1FtoSp5x0mUgA7bFW0qr0fKk2KCA+v2CCrFbF+q
bmLvEjV+4JCAX+H/TBpG7pdEJ8IEW09ST8t60Poou/CTNhxGoz
1Ww0kiyHynU4fOmVK9gQZ5eeMxKzssnhKdor2ibc3OTo+WvErl
omRpMfd15+/2EA/SbxzdwKmX6ybVAYnLe4g3cheOEdD3YnxF5i
4NeTRw
,然后在粘贴至输入框,如图1所示,再点“确定”,就会弹出一个已注册成功的提示,以后启动软件就不会提示注册了,而且没有了30天使用时间的限制。下面我们用图示的图示的访求来讲解FlashFXP软件的使用。

(图4)

1、如图5所示:启动了FlashFXP后我们要先建立FTP站点,选择顶部菜单中的“站点(S)”-“站点管理器(S)”打开站点管理器,可能你会注意到:直接按“F4”也可以达到同样目的;是的,多留心看,其实有很多快捷键可以用的。(说起快捷键F4可能论坛上有两个人一定会笑,有兴趣的可点击这里轻松一下
http://soft666.com/bbs/dispbbs.asp?BoardID=13&ID=5890

(图5)


 

2、新建站点:如图6所示:进入站点管理器,点击“新建站点(S)”创建站点,(如图7所示)在弹出的对话框中输入站点名称,我们输入61.151.239.81,可以使用你觉得好记的任何名字,只是一个标识而已,这里我们直接输入服务器地址作为站点名称,按“确定”。

(图6)


(图7)


 

3、输入站点信息:如图8所示:在右边的IP地址处输入61.151.239.81(注意这个FTP的IP地址都是一样的,因为我们都是申请同样的免费空间),我是在用户名称输入lzk,你当然不能输入lzk了,因为用户名称是唯一的,假如你申请100M空间时填写的用户名为abc,则此处输入abc。在密码处输入密码(就是你注册空间时填写的密码),然后点击最下面一排的“连接”按钮。


 


(图8)


 

补充:有些系统可能在进行上述设置后还是无法登录,可在站点管理器(快捷键F4)中这样设置:点击站点管理中的“选项”,把最上面那个“这个连接不使用代理服务器”的前面的勾打上,然后点下面的“运用”按钮再点“连接”按钮就可以了。如图8-1所示


 


(图8-1)


 

4、上传文件:登录成功后会显示效果如图9所示。

(图9)
我已经把上下左右四个窗口的说明标注在图9中了,大家一看就明白了。要上传文件首先得通过点击左上角“下拉框”切换自已电脑中的目录为e:/home,因为我们的“织梦之旅”的所有文件都存放在这个文件目录下,操作方法和在“资源管理器”中的操作是一样的,不再详细说明了。切换到e:\home目录后在左上窗口中显示home目录下的所有文件,我们要所这几个文件都上传至服务器上,在需要上传的文件上面右击鼠标(注意是右击),在弹出的快捷菜单中选择最上面的“传送”,如果我们想一次就上传很多文件,可先在左边窗口中通过Ctrl键和鼠标左键配合选择多个文件,然后再“传送”,如图10所示。

(图10)
传送时会有最底下的状态栏显示当前状态,每传送成功一个文件则左下角的传输队列窗口中少掉一个文件。当我们在传送到index.htm文件时,会弹出一个窗口吓你一跳:),如图11所示。

(图11)
一般情况我们都点击“覆盖”按钮更新远程服务器上的文件(如果是误操作的话可选择“取消”来取消上传操作)。看到这里,很多朋友可能会感觉做不下去了,因为右击文件名时弹出菜单中的“传送”按钮有时候是灰色的,这是因为FlashFXP在设置的空闲时间内没有动作的话可能会自动断开FTP连接,不用着急,我们重新连接一下就是了,操作方法是点击右边窗口的闪电图标,在弹出的菜单中点击“61.151.239.81”就可以快速重新连接上了,如图12所示。

(图12)
我的FTP空间比较多,所以显示界面与大家的不同。如果你想切换远程服务器中的目录,可以双击目录进入,如果又想返回到上一级目录,可以点击最上面的“上层目录”返回。在工具栏中有很多快捷图标,我们所鼠标移动至这些图标上面时会有提示这个按钮的功能,多看提示很用。


 

5、下载文件:下载文件的意思是指把FTP服务器上面的文件下载到本地电脑,一般我们本地电脑中都有完整的文件,只是有时候自已电脑中的文件丢失了,这时候我们可以使用下载功能下载文件。下载文件与上传文件的操作方式大同小异,只是下载时要在右边的远程服务器窗口中选择文件,然后右击需下载的文件,在弹出菜单中同样选择“传送”就可实现下载了。上传和下载操作的补充说明:还有一个方法用“拖放操作”的方法,如果把文件从左边窗口拖放至右边窗口,则实现文件上传,从右边窗口拖放至左边窗口则实现文件下载。另外在左右窗口都可右击文件名,在弹出的菜单中有很多选项,可实现“删除”、“重命名”等很多操作。


 

*第四步:让网友看到自已的主页
FTP操作总算完成了,我们迫不急待地想在IE地址栏给网上的朋友展示自已的主页,还记得我们在第二步讲申请免费空间的操作中要大家记下的一些信息吗?这里面就说到了你的网址是http://lzk.xinwen365.com
,如果你的用户名是abc,刚访问网址为http://abc.xinwen365.com,我申请的用户名为lzk,所以网址为http://lzk.xinwen365.com。讲到这里,希望大家在跟帖中帖出自已的作业,怎么交作业呢?呵呵,帖出你的网址就行啦(我们会在首页列一个表帖出所有朋友的网址,方便大家相互对比交流),比如说http://lzk.xinwen365.com,因为我们的首页文件是以index.htm命名的,所以在网址中不改输入index.htm也可以打开主页的,当然你也可以在网址中加上index.htm,我们上传后的演示页面为http://lzk.xinwen365.com或者http://lzk.xinwen365.com/index.htm


 

*第五步:结束语
从没使用过FTP的朋友可能会觉得第二课内容比较难,所以我们特意用了大量的图片来说明FTP操作,只要你仔细看图和看说明,FTP操作一定不会难的,因为这种操作和WINDOWS中的文件操作很类似,一看就明白意思的,这一课大家肯定不可能像上一课那么轻松,因为这一课有很多的实际操作步骤,希望大家不要被这大片大片的文字给吓住了,其实熟悉了以后这几步操作是非常简单的。大家遇到任何问题都请提出来,我们会详细说明解决方法的。我们也希望大家多给我们的教程提建议,比如说教程进度,讲解方法等,我们会适时动态调整的。


 

*下课内容提示
打算在下课中讲一下DW中表格的操作,因为DW表格可实际相当多的功能,如果一个网页没有使用表格,那只能是一个简单的页面。另外我们也会讲一下如果利用这100M的免费空间,这100M的空间可存放相当多的文件,我们可以把自已喜欢的图片放在免费空间中,用来做论坛头像和论坛签名图片等,大家在上传文件后最好不要删除本地电脑中的文件,否则当免费空间不能使用时我们还可再上传至其它的空间。


共4页: 上一页 [1] 2 [3] [4] 下一页

↑返回顶部   打印本页   关闭窗口↓  
 
相关信息

·上传软件LeapFtp的使用方
·Flashfxp使用指南(网站文
·如何关闭FlashFXP的被动模
·IE最新高危漏洞非官方补丁
·十大常遇流氓软件完全卸载
·推荐一个好东西:免费电话
·Ghost万能XP一键恢复纯净
·在DOS下安装Windows XP前

热点文章

·推荐一个好东西:免费电话
·上传软件LeapFtp的使用方
·Flashfxp使用指南(网站文
·如何关闭FlashFXP的被动模
·十大常遇流氓软件完全卸载
·IE最新高危漏洞非官方补丁
·corelDRAW12教程:女性内衣
·CorelDraw 描图小技巧

推荐文章

 

首页>>学无止境>>软件应用>>
语深深版权所有 2005-2008