1.2 创建网站框架

所谓站点,可以看作是一系列文档的组合,这些文档通过各种链接建立逻辑关联。用户在建立网站前必须要建立站点,修改某网页内容时,也必须打开站点,然后修改站点内的网页。在 Dreamweaver CS6中,站点一词是下列任意一项的简称。

Web 站点:从访问者的角度来看,Web 站点是一组位于服务器上的网页,使用 Web 浏览器访问该站点的访问者可以对其进行浏览。

远程站点:从创作者的角度来看,远程站点是远程站点服务器上组成 Web 站点的文件。

本地站点:与远程站点上的文件对应的本地磁盘上的文件。通常,先在本地磁盘上编辑文件,然后将它们上传到远程站点的服务器上。

Dreamweaver CS6站点定义:本地站点的一组定义特性,以及有关本地站点和远程站点对应方式的信息。

在做任何工作之前都应该制定工作计划并画出工作流程图,建立网站也是如此。在动手建立站点之前,需要先调查研究,记录客户所需的服务,然后以此规划出网站的功能结构图(即设计草图)及其设计风格以体现站点的主题。另外,还要规划站点导航系统,避免浏览者在网页上迷失方向,找不到要浏览的内容。

1.2.1 站点管理器

站点管理器的主要功能包括新建站点、编辑站点、复制站点、删除站点以及导入或导出站点。若要管理站点,必须打开“管理站点”对话框。

弹出“管理站点”对话框有以下几种方法。

① 选择“站点 > 管理站点”命令。

② 选择“窗口 > 文件”命令,弹出“文件”面板,如图1-18所示。在“管理站点”选项的下拉列表中选择“管理站点”选项,如图1-19所示。

在“管理站点”对话框中,通过“新建站点”按钮、“编辑当前选定的站点”按钮、“复制当前选定的站点”按钮和“删除当前选定的站点”按钮,可以新建一个站点、修改选择的站点、复制选择的站点和删除选择的站点。通过对话框中的“导出当前选定的站点”按钮和“导入站点”按钮,用户可以将站点导出为XML文件,然后将其导入 Dreamweaver CS6。这样,用户就可以在不同的计算机和产品版本之间移动站点,或者与其他用户共享,如图1-20所示。

图1-18

图1-19

图1-20

在“管理站点”对话框中,选择一个具体的站点,然后单击“完成”按钮,就会在“文件”面板的“文件”选项卡中出现站点管理器的缩略图。

1.2.2 创建文件夹

建立站点前,要先在站点管理器中规划站点文件夹。

新建文件夹的具体操作步骤如下。

(1)在站点管理器的右侧窗口中单击选择站点。

(2)通过以下几种方法新建文件夹。

① 选择“文件 > 新建文件夹”命令。

② 用鼠标右键单击站点,在弹出的菜单中选择“新建文件夹”命令。

(3)输入新文件夹的名称。

一般情况下,若站点不复杂,可直接将网页存放在站点的根目录下,并在站点根目录中,按照资源的种类建立不同的文件夹存放不同的资源。例如,image文件夹存放站点中的图像文件,media文件夹存放站点的多媒体文件等。若站点复杂,需要根据实现不同功能的板块,在站点根目录中按板块创建子文件夹存放不同的网页,这样可以方便网站设计者修改网站。

1.2.3 定义新站点

建立好站点文件夹后用户就可定义新站点了。在Dreamweaver CS6中,站点通常包含两部分,即本地站点和远程站点。本地站点是本地计算机上的一组文件,远程站点是远程 Web 服务器上的一个位置。用户将本地站点中的文件发布到网络上的远程站点,使公众可以访问它们。在Dreamweaver CS6中创建 Web 站点,通常先在本地磁盘上创建本地站点,然后创建远程站点,再将这些网页的副本上传到一个远程 Web 服务器上,使公众可以访问它们。本节只介绍如何创建本地站点。

1.创建本地站点的步骤

(1)选择“站点 > 管理站点”命令,弹出“管理站点”对话框。

(2)在对话框中单击“新建站点”按钮,弹出“站点设置对象 未命名站点2”对话框,在对话框中,设计者通过“站点”选项卡设置站点名称,如图1-21所示;单击“高级设置”选项,在弹出的选项卡中根据需要设置站点,如图1-22所示。

图1-21

图1-22

2.各选项的作用

“默认图像文件夹”选项:在文本框中输入此站点默认图像文件夹的路径,或者单击“浏览文件夹”按钮,在弹出的“选择图像文件夹”对话框中,查找到该文件夹。例如,将非站点图像添加到网页中时,图像会自动添加到当前站点的默认图像文件夹中。

“链接相对于”选项组:选择“文档”选项,表示使用文档相对路径来链接,选择“站点根目录”选项,表示使用站点根目录相对路径来链接。

“Web URL”选项:在文本框中,输入已完成的站点将使用的URL。

“区分大小写的链接检查”选项:选择此复选框,则对使用区分大小写的链接进行检查。

“启用缓存”选项:指定是否创建本地缓存以提高链接和站点管理任务的速度。若选择此复选框,则创建本地缓存。

1.2.4 创建和保存网页

创建站点后,用户需要创建网页来组织要展示的内容。合理的网页名称非常重要,一般网页文件的名称应容易理解,能反映网页的内容。

在网站中有一个特殊的网页是首页,每个网站必须有一个首页。访问者每当在IE浏览器的地址栏中输入网站地址,如在 IE 浏览器的地址栏中输入“www.sina.com.cn”时会自动打开新浪网的首页。一般情况下,首页的文件名为“index.htm”“index.html”“index.asp”“default.asp”“default.htm”或“default.html”。

在标准的Dreamweaver CS6环境下,建立和保存网页的操作步骤如下。

(1)选择“文件 > 新建”命令,或按Ctrl+N组合键,弹出“新建文档”对话框,选择“空白页”选项,在“页面类型”选项框中选择“HTML”选项,在“布局”选项框中选择“无”选项,创建空白网页,设置如图1-23所示。

(2)设置完成后,单击“创建”按钮,弹出“文档”窗口,新文档在该窗口中打开。根据需要,在“文档”窗口中选择不同的视图设计网页,如图1-24所示。

图1-23

图1-24

“文档”窗口中有3种视图方式,这3种视图方式的作用如下。

“代码”视图:对于有编程经验的网页设计用户而言,可在“代码”视图中查看、修改和编写网页代码,以实现特殊的网页效果,“代码”视图的效果如图1-25所示。

“设计”视图:以所见即所得的方式显示所有网页元素,“设计”视图的效果如图1-26所示。

“拆分”视图:将文档窗口分为左右两部分,左侧部分是代码部分,显示代码;右侧部分是设计部分,显示网页元素及其在页面中的布局。在此视图中,网页设计用户通过在设计部分单击网页元素的方式,快速地定位到要修改的网页元素代码的位置,进行代码的修改,或在“属性”面板中修改网页元素的属性。“拆分”视图的效果如图1-27所示。

(3)网页设计完成后,选择“文件 > 保存”命令,弹出“另存为”对话框,在“文件名”选项的文本框中输入网页的名称,如图1-28所示,单击“保存”按钮,将该文档保存在站点文件夹中。

图1-25

图1-26

图1-27

图1-28