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

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

http://bbs.soft666.com/read.php?tid=8257&fpage=1&toread=&page=4

织梦之旅第一站


织梦之旅第一站启程啦!工欲善其事必先利其器,做网页当然得选最好的织网工具!我们使用的是Macromedia Dreamweaver MX 2004简体中文专业版,这是大名鼎鼎的Macromedia公司的网页制作三剑客之一,Flash总知道吧,论坛上经常见的,也是三剑客之一,还有一个是用于图片处理的Fireworks,我们要讲的就是专用于网页制作的Dreamweaver,大家不要被这一堆名词吓退,这没什么,管它姓什么,好用就行了。OK,我们开始以下步骤:


*第一步是下载一个Dreamweaver MX 2004简体中文专业版(以后我们都简称Dreamweaver为DW),下载页面是http://www.skycn.com/soft/860.html,下载链接位于页面中央,有很多下载地址,江苏常州下载,新疆乌市下载。。。,我一般选用四川铁通下载,在湖南这边感觉这个比较快。也可以直接点击http://xbol-http.skycn.net:8080/down/DreamweaverMX2004701-sc.zip下载,怎么下载软件大家应该知道吧?这里也顺便讲一下吧,如果没有专用的下载工具的话就直接点击上面的下载链接,会弹出一个“文件下载”对话框,你选择“保存(S)”,会提示你“另存为”,为方便查找刚下载的文件,我们选择路径为在“桌面”或“我的文档”,然后点击“保存”就开始下载了,DM安装文件比较大,有70MB,我们就静静地等上一阵,不要急,以后就方便啦,多等会吧:),这是30天试用软件,嘿嘿,不过我们有办法让它可永久使用的,一会儿再说。


*第二步就是安装刚才下载的文件,找到刚才保存的文件DreamweaverMX2004701-sc.zip,这是压缩文档,需要解压软件(比如WINRARA或WINZIP)才能打开的,如果你还没安装WINARA的话得先下载一个安装它,WinRAR 3.20中文注册版下载地址是http://www.qj.yn.cninfo.net/computerchannel/down.asp?id=150&no=1。再回到DM的安装上来,双击DreamweaverMX2004701-sc.zip打开它,运行压缩包里面的Dreamweaver MX 2004 Installer.exe,正式开始安装,安装过程非常简单,先点击“下一步”,会出现一个“许可证协议”,我们当然点“是”接受协议啦,如果在Win98中安装的话可能会出来一个警告框,甭管它,“确定”,这时候会出现“是否改动目标地位置”,你想安装到其它驱动器的话就点击“浏览”来选择,不想改变的话直接“下一步”,再连续点击两次“下一步”就开始复制文件了。等一会就出来一个安装完成对话框,我们点击“完成”,这时候会弹出IE显示一个欢迎文档,这个没什么好看的,关于IE浏览器,准备进入下一步。哈哈,马上就可看到DW是什么样的了。


*第三步:启动DW
在启动DW之前我们先做一个准备工作,就是先在电脑上新建一个目录,用于存放马上就要用于的网页文件(我们现在讲的是静态网页制作,文件扩展名为.htm或.html的文件),操作方法是进入“我的电脑”,再进入D:盘或E:盘(当然也可以是C:盘,我演示时新建文件夹的位置为E:/home),在“文件”菜单中选择“新建”--“文件夹”,我们命名新文件夹的名字为“home”(当前也可以命名为其它名字,只要好记就行了)。好,进入完这一步我们再进入“启动DW”的操作,DM安装后在桌面并没有图标,运行DM需点击“开始”菜单,进入“程序”,再点击“Macromedia”中的“Macromedia Dreamweaver MX 2004”,(如图1所示)。点击后会出来一个Macromedia产品注册的对话框,我们有秘密武器,也就是有注册码啦,好,选中“我有一个序列号,我希望激活Dreamweaver”后点击右下角的“继续”,然后会出来一个输入序列号的窗口,在这个窗口中输入以下注册码:WPD700-53501-71794-67762,先复制这串注册码,然后把光标停在第一个输入框,点鼠标右键选择“粘贴”就把注册码粘贴进四个框中了。如果注册码正确的话后自动在后面打一个勾的(注册码肯定是正确的,不正确的话肯定是你看错啦),输入后我们再点击“继续”,会出来一个输入姓名、email地址的窗口,我们不用输它啦,因为本来就不是花钱买来的注册版本,没有售后保证滴~,直接点击“以后再提醒我”。哈哈,看到没?终于出现DW的界面了,好不容易啊!不过以后就简单了,想启动DM的话就去开始运行它,再也不会提示你输入什么注册码了。因为我们没有输入mail地址在线注册,以后启动DW时可能会提醒“请注册”,这时候我们就直接回答说“不再提醒”,嘿嘿,再也不会来烦你啦。



(图1)


*第四步:熟悉DW界面
启动DW后看到界面,如果你以前没使用过Macromedia公司的软件的话,一定会感到窗口太乱而不知所措,确实是这样的感觉,满屏幕都是大大小小的窗口很障眼,不过我们会一一化解的,首先来看最右边的窗口(如图2所示),这是我们做的第一次进入DW中进行网页制作,所以一些东西必须设置,最先要做的是“管理站点”,点击“管理站点”后会弹出一个“管理站点”窗口,我们选择“新建”--“站点”,“你打算为您的站点起什么名字呢?”,名字随便取,就起名为“织梦之旅”吧,再“下一步”,出现“在您应该使用什么URL来浏览站点的根目录?”,一个是否,我不想使用服务器技术,下面的选项是 是,我想使用服务器技术。DM默认的选项是下面这个,这里修改一下,选中上面那个“否,不使用服务器技术”,然后点击“下一步,好,在出现“您将把文件存储在计算机的什么位置?”就先不要点击下一步,而是要点击右边那个文件夹模样的图标,还记得我们在启动DW之前做的那一个准备工作吗?就是为了留着这时候用的,我们选择已建好的E:/home文件夹,然后点击“选择”,然后,下一步,下一步,最后点击“完成”。又回到到管理站点的窗口,这时候我们点击“完成”就回到了DW的主界面窗口。现在定义好站点好这个窗口暂时就没什么用啦,我们就可能点击这个窗口在侧的小箭头隐藏这个面板,为我们后面马上就要讲的制作第一个网页腾出空间。



(图2)
好,我们还是接着来熟悉界面,现在是熟悉左边的界面,左边的界面看上去也乱,因为DW给我们提供了很多快捷功能,不过我们暂时搞不懂的话可以先不管它,这些功能在菜单中都全部提供了的,我们直接在菜单中找好了。下面就要进入“激动人心”的关键一步啦,做出我们织梦之旅的第一个页面。


*第五步:做出织梦之旅的这第一个页面


哈哈,马上就能出来第一个页面了,有些激动吧?是的,这是我们第一次建家,尽管相当简陋,但只要知道了建造方法,我们以后可以修修补补好好装饰,也可以干脆推倒重来,家会变得越来越漂亮的。这就是我们讲第一个页面的目的,做出来相当简单,但这仅仅只是我们的第一课,能做出来已相当不错了,呵呵,学习上千万来不得急于求成。好,废话少说,马上动手操作:



(图3)


1、从“文件”菜单中选择“新建”命令,在弹出的窗口中新建网页和类别,我们要讲的就是新建静态页面,不用改变它的默认选择,直接点击“创建”,会出来一个如图3所示的窗口,我们编辑网页主要就在“文档”窗口中输入内容,用过文档编辑软件的朋友肯定对这个不会陌生,我们就测试一些最简单的文字吧。在文档窗口中输入“我的织梦之旅行正式启程啦!”,其实从现在开始网页已经算是有内容了,直接在DW中看效果总觉得有些别扭,因为窗口太挤啦,好,我们可以预览最后在IE浏览器中效果,在预览之前我们还是先保存这个文件,定时存盘绝对是个好习惯,免得你好不容易搞出来一个漂亮页面又因停电或死机而白搞了。怎么保存文件呢?就用“文件”菜单中的“保存”命令(快捷键是Ctrl+S),第一次“保存”时会弹出一个“另存为”对话框,询问你要保存成什么样的文件名,DW默认给你起了个名字为Untitled-1.htm,这个名字可不好记,我们要自已取一个好记一点的,lzk.htm,my.htm?呵呵,暂时不要这样起这样的名字,因为这次我们要新建的网页是首页文档,首页就是指输入网址后第一个看到的页面,比如说你输入soft666.com,打开后看到了什么?出来的就是首页文档啦,你可能要问了:首页出是出来了,可是我们在IE地址栏没看到首页文件到底是哪个文件啊?其实这就引出了一个关于首页默认文件名的基础知识,一般默认首页都是这样命名的:index.htm index.html index.asp default.htm default.html index.php等,我们新建的是静态页面,扩展名是htm和html,这些是基础知识,我们就当是顺便了解一下吧,说了老半天,就是指我们在命名为首页文件时要按规定取名,我们就输入第一个index.htm好啦,在文件名框把Untitled-1.htm改为index.htm后点击“保存”,好啦,这个文件保存好了,已经保存在e:\home目录下了,你可以点击“我的电脑”在e:\home目录下查看,可以直接用鼠标左键双击这个index.htm即可用IE浏览器打开这个文档。其实验明保存确实有效后我们以后不用这么麻烦进home目录下来查看了的,只需在DW中直接按快捷键就可调出IE并自动打开这个文档了。


2、有点成就感吧,呵呵,是的,但总觉得不对劲,肯定不对劲啦,哪有首页这么简单的?那我们增加点什么呢?先另急着添加,我们把“我的织梦之旅行正式启程啦!”这几个字好好修饰一下吧,现在白底黑字、瘦不拉叽的怪难看,先把字变大变粗变红,这个肯定难不到你,早就知道方法了吧?先用鼠标拖动选择所有文字,松开鼠标看看窗口最下面的属性面板(如图4所示),第二排有“字体”和“大小”,哦?怎么字体列表中只剩下那些英文字体了?中文字体哪去了呢?朋友们,咱们先不管这个字体的事了,暂时就用着默认字体吧,反正中文是会显示为宋体的,我们要改的是字号大小,我们选择最大的,就选“36”好了,现在字变大了吧,先不要在文档窗口中点击鼠标,我们再接着改字的颜色,图4中用红线圈起来的就是用于选择颜色的,我们选择红色,带把文字加粗,这个大家都知道,点一下旁边的“B”就行了,如果要斜体呢则点一下“I”,其实把鼠标移到那些按钮上面就会有提示按钮的对应功能的。



(图4)


补充1:如何在DW中使用更多的字体?
在下面的属性面板中点字体 弹出下拉菜单选 编辑字体列表可用字体列表框中 找到你想添加的字体,双击它,然后确定,这个字体就添加到 字体菜单中。你就可以调用了。


补充2:如何在DW中插入多个空格来控制排版?
当调出中文输入法并切换到全角状态下(一般在中文输入法状态下按Shift+空格键就可在全角和半角中切换)


3、这一步我们要讲怎么样来添加超链接,没有超链接怎么可能像网页呢?什么是超链接呢?引用网上的一段定义吧:“超链接是WWW上的一种链接技巧,它通过已定义好的关键字和图形,只要您点取某个图标或某段文字,就可以自动连上相对应的其他文件。所以在WWW的站点画面中,您可以通过超链接点取的方式,从一个网页链接到另一个网页”。呵呵,定义是很枯燥的,让人费解,我们来示例做两个超链接吧:我们先在文档窗口中的“我的织梦之旅行正式启程啦!”后面回车换行,这样看起来更美观些,输入链接文字“怀化气象论坛”,这“怀化气象论坛”这几个字太大啦,用第2步中讲到方法改小就行了,先选择“怀化气象论坛”这几个字,再设定大小为“无”,也就指默认大小,颜色也不想要红颜色的,就用默认颜色好了,怎么改呢?(看图5所示),用鼠标点击图5中最左边的按钮就可改为默认的黑色字了。好,我们现在就开始加入最关键的超级链接,怀化气象论坛的网址是http://soft666.com/bbs,我们就在面板的“超级链接”栏中输入网址http://soft666.com/bbs并回车(如图6所示),这个链接就算加完了,我们再把鼠标在文档窗口的空白入随便点一下,发展超级链接“怀化气象论坛”这几个字自动变蓝了,并且加上了下划线。很想马上预览一下效果吧?OK,按快捷键F12调出IE查看效果,预览前会提示你是否存盘,我们当然选择存盘啦,预览时你用鼠标点击一下“怀化气象论坛”就进入BBS啦。这下不害怕记不住论坛的网址了吧,记不住了就去e:\home\目录下找index.htm,双击运行它就可找到论坛了。我们不能光宣传论坛:),现在大家是在学网页制作,我们就再给一个网页制作教学的超链接--新浪学园,制作方法与上面的相似,我可以告诉你“新浪学园”一个教程的网址为http://tech.sina.com.cn/c/2003-12-04/25101.html,怎么把“新浪学园”这几个字链接到这个网址上做为我们织梦之旅第一站的家庭作业咯,要检查的哦~。(提示,为了好看,先在怀化气象论坛后面输入一个空格后输入“新浪学园”效果要好一些)


 
(图5)              (图6)


4、第一次做网页怎么着也得帖上自已的名字才叫光荣吧!呵呵,这个容易啦,你直接在文档窗口的后面输入名字就可以啦,我当然要写上名字LZK咯,而且得显眼一点,就用深绿色吧。今天是04年5月18日14:40,呵呵,这可是一个很有纪念意义的时刻,我得加上年月日时,因为这是我们织梦之旅的第一站,还是有纪念意义的。


5、大家预览时发现问题没有?就是IE的标题栏显示的是“无标题文档”,这可不是我所希望,自已建的网站当然得起一个有意义的标题啦,我命名为“欢迎光临“织梦之旅”之LZK的家”,你想怎么改就怎么改吧。对了,还没说从哪个地方改的呢,好,请看图7,在文档窗口上面的“标题栏”中输入就行了。你现在就想看看我们的演示页面的话请点击:http://soft666.com/home/index.htm我们的织梦之旅这一站就讲完了,呵呵,没反胃吧?:)



(图7)


*结束语
从6点接班开始就准备这个教程,本来计划第一站完成两件事,第一件是完成上面的步骤做一个index.htm页面,另外一件事就是让大家把这个页面上传至网上,让大家互相点评点评,因为只有把网页文件上传至互联网上对方才能够看得到,只保存在e:\home目录下当然只有你自己能看得到啦。但做第二步对于我们初学者来说必须得熟悉FTP操作,而且得先申请一个免费的可通过FTP上传的主页空间(免费空间申请地址我已经给大家特色好了,50MFTP静态页面即时申请即时开通),为了让大家学习轻松而且跟得上去,我们就把“如何通过FTP上传网页”这一部分内容留到下一部分来讲。另外有一个很重要的原因是今天自已也没累了,昨天晚上3:33分醒来后就一直没睡着,一直在想如何理顺思路让大家好懂些,我就是这毛病,一投入做一件事就有点失眠,这可要不得:),另外也挺好玩的,3:33分醒了,我就想333这个数字可不吉利呢,会不会让大家看完“第一站”感觉索然无味而要我“删删删”呢?后来又想444,555~~可也都不是好数字,666~~倒好,666大顺啊,可是再怎么等也等不到6:66哦,也还算巧,6:06分叫班的来了。。。


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

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

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

热点文章

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

推荐文章

 

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