第1章 Dreamweaver CS6简介
第2章 站点的设计
拥有自己的网站,可以说是每个网页制作者的梦想。利用Dreamweaver CS6可以首先在本地计算机的磁盘上建立一个本地站点,控制站点结构,管理站点中的每个文件。在完成对站点文件的编辑后,可以用Dreamweaver CS6将本地站点上传到Internet上。
本章主要内容
? ? ? ? ?
规划站点。 建立站点。
定义本地与远程站点。 设置测试服务器。 编辑站点。 本章重点
? ?
建立站点。 编辑站点。
2.1 站点的规划
在创建站点之前,应合理地规划站点的目标、结构、内容、导航机制以及站点的整体风格等。合理的规划,不仅有利于避免设计的盲目性,而且有利于日后管理众多的站点文件。
2.1.1 确定站点目标
一个好的站点,应该具有明确的目标。目标可谓是站点设计的灵魂与导向标,能够引导设计者成功地设计站点。站点的目标因主题而异,例如,娱乐性站点与信息类站点的目标与风格会迥然不同,因此在设计站点之前应该明确站点的目标,才能有条不紊地设计和管理好站点文件。
2.1.2 规划站点结构
所谓“良好的开端就是成功的一半”,认真地规划站点,能够避免日后出现管理文件混乱的局面。
一般的,在规划站点时应注意以下问题。
1. 本地站点和远程站点采用相同的结构
将本地站点和远程站点设置成相同的结构,能有利于站点的维护和管理。当本地站点设置完成后,再利用Dreamweaver CS6将本地站点上的文件及文件夹上传到远程服务器上。这样在本地站点的文件及文件夹上进行操作,相当于在远程站点相应的文件及文件夹
21
上进行完全相同的操作。
2. 用文件夹保存文档
为了便于对站点文件进行管理,可将站点文件分门别类地保存在站点根目录下的文件夹中,以文件夹方式组织站点文件,一目了然,如图2-1所示。
图2-1 站点结构图
例如,在站点根目录下创建image文件夹,存放站点中的图像文件;用media文件夹存放站点中的Flash、Shockwave、MIDI等文件。如果图像文件较多,还可以在该文件夹中新建几个文件夹,将图像文件重新分门别类,方便存取图像文件。
2.1.3 规划站点内容
站点的内容一定要丰富。将各种不同的内容划分为几个板块,例如,生活、旅游、健康、IT等,这样既可以方便网站设计者进行设计,又能方便用户获取相关信息。
除了文本和图像等内容外,如果需要,则还可以加入多媒体元素等多姿多彩的内容,在丰富网站内容的同时,也可平添几分生趣。
此外,要注意使用合理的文件名称,尽量避免使用中文名称,因为大多数的软件平台都是基于英文的;有的Web服务器是区分大小写的,因此一般都采用小写字母命名站点中的文件。
2.1.4 规划站点的导航机制
一个优秀的站点应该具有明确的导航系统,避免用户在页面上迷失方向,找不到想要浏览的内容。
在规划站点的导航机制时应注意以下方面。
1. 建立返回首页的链接
一般在站点的每个页面上都应有返回首页的链接,这样可以方便用户回到开始的地方,寻找新的导航目标。同时,当用户在页面上迷失方向时,可以返回到首页重新开始。
2. 导航标题应明确
导航标题文字或图像具有明确的导航指示作用,标题性文字一般是页面内容的概括。例如,“今日要闻”——用户一看到该标题文字,即可知道链接的内容是当日重要的
22
第1章 Dreamweaver CS6简介
新闻。
相对于文字导航标题,图像标题更有其独特的一面。例如,在做一个返回搜狐首页的链接时,设计者往往是添加一个我们所熟悉的小狐狸图标,即搜狐网站的标徽。这样,既可以起到明确的导航作用,同时相对于单调的文本也要丰富得多。此外,还可以在图像上添加替代文本,这些文本可以起到辅助的指示作用。
2.1.5 规划站点的风格
站点的风格应该自然地流露出站点的主题,紧紧围绕站点主题和内容设计出页面的形象和风格。例如,以诗词歌赋为主要题材的站点,最好能够体现出书香韵味,打开该站点,对用户来说感觉就犹如捧起书卷一般亲切。
在实际创作过程中可以使用模板创建风格相同的页面,使用库调用页面中经常出现的元素,这样既可以提高设计的效率,又能使对这些文件的管理变得异常轻松。
2.2 站点的创建
本节介绍在Dreamweaver CS6中创建站点的方法。
2.2.1 站点定义向导
? ? ?
使用下面的方法之一可以打开站点定义向导,即打开“站点设置对象”对话框(见图2-2)。
单击“文件”面板右侧蓝色的“管理站点”链接,在“管理站点”对话框中单击“新建站点”按钮。
在菜单栏中依次选择“站点”|“新建站点”命令。
在菜单栏中依次选择“站点”|“管理站点”命令,在“管理站点”对话框中单击“新建站点”按钮。
图2-2 “站点设置对象”对话框
从图2-2所示的对话框中可以查看站点设置的三个基本任务。
23
? ? ?
站点:可以为站点选择本地文件夹和名称。 服务器:选择承载Web上页面的服务器。
版本控制:设置访问、协议、服务器地址、存储库路径、服务器端口、用户名和密码等内容。
根据站点设置的提示即可完成基本站点的创建。
2.2.2 定义本地站点
本地站点就是编辑和存放站点文件的本地场所,在本地站点中完成站点的设计,才能上传到远程服务器,供网络上其他人浏览。
选择“站点设置对象”对话框中的“高级设置”选项,在 “本地信息”选项界面中设置本地文件夹,如图2-3所示。
图2-3 设置本地文件夹
? ?
? ?
在“本地信息”选项界面中可设置本地文件夹的下列属性。
“默认图像文件夹”文本框:指定放置站点图像文件的目录。
“站点范围媒体查询文件”文本框:指定放置站点文件的本地文件夹,可单击按钮选择本地文件夹或直接在文本框中输入本地文件夹的路径,例如,D:\\DWBook\\ch2\\。
Web URL文本框:指定站点的URL地址。
启用缓存:选中该复选框,可创建本地缓存,这样有利于提高站点的链接和站点管理任务的速度,而且可以有效地使用“资源”面板管理站点资源。
2.2.3 定义远程站点
远程站点一般位于运行Web服务器的计算机上,用户可以使用多种方案定义远程站点。 1. FTP方式
以FTP方式定义远程站点的操作步骤如下。
(1) 在“站点管理”对话框中双击已建立的站点,在弹出的“站点设置对象”对话框中选择“服务器”选项,如图2-4所示。
24
第1章 Dreamweaver CS6简介
图2-4 选择“服务器”选项
(2) 单击对话框左下角的“添加新服务器”按钮,出现相应界面,如图2-5所示。
图2-5 “添加新服务器”界面
在此界面的“基本”选项卡中需要设置以下信息。 ? 服务器名称:为服务器命名。 ? 连接方法:选择“FTP”选项。 ? FTP地址:输入远程的FTP主机名称,如www.baike369.com,或者IP地址
203.171.236.155。一定要输入有权访问的空间的域名地址,否则会连接不上。
? 端口:可以根据服务器提供商的要求来填写。 ? 用户名:输入连接到FTP服务器的注册名。 ? 密码:输入连接到FTP服务器的密码。 ? 测试:单击“测试”按钮可以检查是否能够成功地连接到服务器上。如果不能,
则需修改前面的选项。
? 根目录:输入远程服务器上存放网站的目录。 ? Web URL:输入URL地址,如www.baike369.com/baike369/。
设置完的效果如图2-6所示。
(3) 设置完成后,单击“保存”按钮,返回到“站点设置对象”对话框,如图2-7所示。在该对话框中显示了已经建立好的远程连接。在左下角单击相应按钮可以继续添加新服务器、删除服务器、编辑现有服务器和复制现有服务器。
25
相关推荐: