阿飙专线Dreamweaver直通车──站点的创建和管理
?牐牨嗾甙矗汉芏嗯笥言谘?习时喜欢随心所欲地实验软件的各种功能,而缺乏系统的、正确的学习方法。网页制作面对的不是一个个孤立的页面,而是一组互相关联的站点中的文件群,因此本教程将从网站的角度来串讲Dreamweaver中的各项主要功能,在此以规范化的网站制作流程为线索,帮助大家以正确的学习步骤来逐渐接触和掌握Dreamweaver软件的主要功能,把已有的零散知识条理化和系统化。
?牐牎鞍㈧ㄏ摺敝蓖ǔ迪盗杏?广大读者要求再次开通,小编非常感谢大家的支持和信任。这次我们邀请了一位大师,通过这个Dreamweaver系列,可以使大家在使用过程中能尽快进入网页制作之门,减少常见的一些困惑和疑问。我们将从“站点的创建和管理、页面的合理布局、网页内容处理、网页设计、美化网页、动态交互、制作效率、站点维护”八个方面进行讲解,并且每篇文章都后附有相关内容的技巧,非常精彩哦!如果你刚接触Dreamweaver软件,这个系列你可别错过了:)
?牐犗衷谙雀蠹医樯蹹reamweaver的站点管理功能(Site)。我们知道网站所面对的不是单独页面的集合,更多的还包含其他诸如图片声音、外部程序等等相关联的内容,因此如何正确的组织它们变得非常重要。很多初学者常常遇到如下一些问题:为什么我的网页传上去后看不到图片?为什么我的文件链接是错的?这些问题其实很多都是在开始之前,没有合理的创建好你的站点。良好的规划和准备工作可以减少很多的后续错误。
#2 一、站点目录的建立
?牐犜诳冀ㄉ枘愕耐厩埃斜匾?立好一个新的目录,你所搜集的一些资料如图片、声音、文字等都需要按照合理的原则放在这个目录下。我们假设要制作一个关于个人作品和教程的个人网站。首先在我们的硬盘上建立一个目录ExampleSite,在这个目录下面建立一个Images目录放置相关的图片;同时建立几个与栏目相关的目录,最后的目录结构如^42040701a^1所示;
?牐犝庋暮么κ钦镜憬峁骨逦芾砥鹄捶奖恪?
#2 二、创建本地站点
?牐犓淙荒愕哪柯冀峁共灰欢ㄒ驼饫镆谎悄阌Ω糜姓庵智逦乃悸罚锤鞲瞿柯级际前凑帐裁丛蜃橹摹M瓿缮厦娴哪柯脊婊院螅颐蔷涂梢云舳疍reamweaver软件继续我们的工作了。启动Dreamweaver软件后,从主菜单中执行Site/New Site命令。屏幕上会出现Site Definition对话框,该对话框包含了5个不同的内容:Local Info(本地信息)、Web Server Info(Web服务器信息)、Check In/Out(登记/隔离)、Site Map Layout(站点布局图)、Design Note(设计注释)。对于我们普通的网页制作者来说,最主要的就是前面两个关于本地站点信息和Web服务器信息。^42040701b^2为Local Info(本地信息):
?牐燬ite Name(站点名称):输入你为自己的站点所起的单独名称。
?牐燣ocal Root Folder(本地根目录文件夹):选择你刚才创建的、放置你的站点所有文件的根目录。
?牐燛nable Cache(启用缓存):这将把你的站点内的文件信息记录在一个缓存文件中,可以加快今后检查文件链接信息的速度。
#2 三、创建远程站点信息
?牐犖颐窃谧约赫镜隳谧龊玫乃形募钪斩家洗絀nternet上的一个服务器中,才可以被其他人访问到。一般来说很多朋友都是申请一些免费的主页空间,根据这些空间的提供商给你的站点信息和你的个人资料,我们需要在定义站点时,将这些资料填好。^42040701c^3为Remote Info(远程信息):
?牐燫emote Info(远程信息):这里设置你的站点文件将来传到网上时,远端服务器的信息。绝大多数免费个人主页服务都提供了FTP方式的服务,我们从Access下拉选项里选择FTP方式并进行详细设定。
?牐燜TP Host:设置你将要上传文件的服务器地址。
?牐燞ost Directory:主机目录设定了你本地站点根目录对应的远程服务器主机下那个子文件夹。
?牐燣ogin和Password分别设定你在远程服务器上的用户名和密码。
#2 四、快速搭建站点文件结构
?牐犜谏柚煤媚愕恼镜阈畔⒑螅涂梢钥即唇?你的站点文件。有些朋友都是使用File→New命令开始一个一个地创建页面,其实这并不是一个好的工作习惯,因为这样你将不会对站点的整体结构有良好的控制和把握。好的工作方式是在站点窗口完成站点的基础页面的搭建和规划,这使你可以一开始就清楚了解你的工作范围并将你的设计想法变为初略的布局。下面我们就在站点窗口开始我们的工作。
?牐牬蚩镜愦翱冢颐强梢钥吹絕42040701d^4所示的窗口:
?牐牬翱诘淖蟊呤墙瓷洗蟮脑冻陶镜憬峁梗绻阋丫唇拥侥愕脑抖苏镜悖饫锝允驹抖苏镜愕哪柯冀峁埂4翱诘挠冶呤潜镜卣镜愕哪柯冀峁梗颐堑墓ぷ鹘诱饫锟肌?
?牐犑紫刃枰谡镜愀柯枷麓唇╥ndex.htm文件,^42040701e^5所示:
?牐犛壹慊髡镜愀柯迹诘霾说ブ醒≡馧ew File,并定义为index.htm则Dreamweaver会定义一个index.htm页面,用同样的方法你可以在不同的目录里快速创建你需要的其他文件。^42040701f^6所示:
?牐犇阋部梢杂谜庵址椒?快速创建新的文件夹。利用这种方法你可以很快了解你的工作量和目录结构,在后面添加文件之间的链接时,只须简单地选择这些文件即可。这有助于你的站点管理工作。
#2 五、站点管理注意事项
?牐牶芏嗯笥殉3;嵛剩椅裁匆?立站点?我就做简单的几个页面也需要这么繁琐的创建站点吗?创建站点对于后面的网页制作有什么好处?在这里需要强调的是创建好站点后,Dreamweaver就可以对站点内的所有文件进行统一的管理,并能很好地组织和解释他们之间的相互链接关系。由于网页就是一些文件的相互链接和组织,所以有必要简单理解链接的几种格式:绝对地址、相对地址。
?牐牼缘刂芳虻サ厮稻褪俏颐浅S玫耐镜刂罚话憷此档蔽颐切枰唇拥讲皇粲谖颐亲约和灸诘哪掣鲆趁媸保托枰镁缘刂防幢硎菊飧鐾獠康囊趁婊蛲贰5比荒阋部梢杂媚阕约旱耐尘缘刂防幢硎灸愕囊趁妫庋龇浅2缓茫蛭绻愀谋淞四愕耐镜刂罚憔捅匦胄薷拿恳桓鱿喙氐牧唇印?
?牐犗喽缘刂肥侵敢缘鼻罢镜隳诘母募形鸬悖渌鞲鑫募糜胨南嗷ス叵道幢硎尽O喽月肪队胝镜憬吹奈恢妹挥泄叵担饪梢约蚧淙耄⒎奖阏镜愕墓芾恚谝院笳镜憧赡艹鱿肿剖币膊换岢鱿治侍狻R晕颐乔懊娲唇ǖ奈募蔽颐窍胍趇ndex.htm文件中添加链接到Aboutme.htm文件的链接时,只须要写:About/aboutme.htm即可,而在aboutme.htm文件中添加返回index.htm文件的地址时,只须写:../index.htm,../代表返回上级目录。
?牐犞懒司缘刂泛拖喽缘刂泛笪颐窃倮纯凑镜愎芾淼囊庖澹蔽颐墙?立了站点后,Dreamweaver就可以将各个文件之间的相互关系用相对路径来表示清楚,而如果你没有建立站点,你的文件之间的互相链接的表示方法是类似这样的:file://yourpath/yourfile.htm。这样当你将文件上传到远端服务器上时,浏览器并不会找到你本地机子中的file://yourpah路径,这也是很多初学者常犯的错误之一,导致很多图片显示不出来,链接无效等等。
#1 本期技巧提示:
?牐?1.使用网站地图可以快速制作网站雏形,并可以方便地在个页面之间加入导航链接。首先按如下图标“Map and Files”打开站点地图窗口;选中index.htm文件;点击并拖动站点导航(Site Navigation)窗口中index.htm文件右上角的小圆圈,将它拖动到左边文件窗口中的某一个文件上,^42040701g^7。
?牐燚reamweaver会自动将其他页面的链接加入到index.htm文件中,同样的执行此操作多次后,导航窗口(^42040701h^8)。
?牐牬耸贝蚩猧ndex.htm文件,可以看到相应的连接文字和链接都已经添加好了。
?牐?2.改变网页位置或文件名称,Dreamweaver会自动更新链接,自动复制文件到当前默认站点。例如我们在站点窗口中改变一个文件的文件名后,Dreamweaver会自动更新链接,自动复制文件到当前默认站点。例如我们在站点窗口中改变一个文件的文件名后,Dreamweaver会自动提示你是否需要更新与此文件相关的所有链接。
?牐?3.自动生成站点地图(MAP)并可保存输出。打开File->Save Site Map命令,在弹出对话框中输入保存的文件名,Dreamweaver在当前站点的根目录下会自动生成一个bmp或png格式的站点图片。
?牐?4.快速修改页面标题。在站点窗口中的View命令下,执行Show Page Title命令,可以使站点导航窗口中显示每个文件的标题,即Title标签。随后我们可以在这里方便的修改页面的标题,而不需打开文件。
?牐牶昧耍赜贒reamweaver中站点的创建和管理我就介绍到这里,虽然这一讲的内容比较枯燥和文字化,不很直观,但是它对今后的工作有很大的帮助,良好的开始是成功的一半,下一讲开始我们来逐步介绍Dreamweaver的各项主要功能。