网页设计与制作:Dreamweaver CC标准教程(第3版)
上QQ阅读APP看书,第一时间看更新

2.2 创建网站站点

站点是存放一个网站所有文件的场所,由若干文件和文件夹组成。用户在开发网站前必须先建立站点,便于组织和管理网站文件。

2.2.1 创建新站点

站点按站点文件夹所在位置分为两类:本地站点和远程站点。本地站点是指本地计算机上的一组文件,远程站点是远程Web服务器上的一组文件。创建本地站点首先要在本地硬盘上新建一个文件夹或者选择一个已经存在的文件夹作为站点文件夹,那么这个文件夹就是本地站点的根文件夹。

创建本地站点的操作步骤如下。

① 选择菜单【站点】|【新建站点】,或选择【管理站点】并在【管理站点】对话框中单击【新建】按钮,打开【站点设置对象】对话框,如图2-5所示,在左边选择【站点】,在右侧输入站点名称和本地站点文件夹路径。

图2-5

提示:

网站名称是网站在Dreamweaver系统中的标识,显示在【文件】面板中的站点下拉列表中。本地站点文件夹是存放该网站文件、文件夹、模板,以及库的本地文件夹。

② 单击左侧【高级设置】,展开其他选项,选择【本地信息】,如图2-6所示,在右侧设置相应的属性。

图2-6

在【本地信息】对话框中,各选项的含义如下。

【默认图像文件夹】:设置站点图片存放的文件夹的默认位置。

【链接相对于】:默认选择文档。

【Web URL】:在动态网站站点设置中,需要输入网站完整的URL路径。

【区分大小写的链接检查】:勾选后,在检查链接时,会区分字母的大小写。

【启用缓存】:选择此项,会创建一个缓存区保存站点中文件和资源信息,以加快资源面板和链接管理功能的速度。

③ 其他项可以根据需要设置,设置完毕后单击【保存】按钮。在【文件】面板中可以看到新建的本地站点,如图2-7所示。

图2-7

2.2.2 新建和保存网页

创建站点后,需要新建网页,网页设计完成后,需要保存网页。

1. 新建网页文档

选择菜单【文件】|【新建】,打开【新建文档】对话框,如图2-8所示,在左侧选择【新建文档】,【文档类型】默认选中【HTML】,【框架】中默认选择【无】,在【标题】中可以给网页输入网页标题。单击【创建】按钮就可以创建网页文档。

图2-8

2. 保存网页文档

保存网页文档有如下两种方法。

(1)选择菜单【文件】|【保存】或【全部保存】。在【另存为】对话框的【文件名】文本框中输入网页的名称,如图2-9所示,单击【保存】按钮完成保存。

图2-9

(2)按<Ctrl+S>组合键保存网页文档。

2.2.3 管理站点文件和文件夹

在本地站点中,可以对站点文件进行剪切、复制等操作,还可以进行新建和删除文件或文件夹等操作。站点文件或文件夹的管理一般在【文件】面板中进行,选择菜单【窗口】|【文件】,或者按<F8>键,可以打开【文件】面板,如图2-10所示。单击【文件】面板上方的下拉列表选择站点,在【本地文件】列表框中显示本站点的文件或文件夹。

图2-10

1. 创建文件和文件夹

使用菜单或利用【文件】面板中的相关功能即可以新建网页文档,而创建文件夹通常在【文件】面板中完成。在【文件】面板中创建文件和文件夹有以下两种方法。

(1)在【文件】面板中,选择网站根文件或文件夹,单击面板右上角的系统菜单48958-00-30-0后弹出下拉菜单,如图2-11所示,选择【文件】|【新建文件】或【新建文件夹】,在指定文件夹中创建untitled的文件或文件夹,并处于可编辑状态,输入文件或文件夹新名称,按<Enter>键。

图2-11

(2)在【文件】面板中,右键单击网站根文件或文件夹,在弹出的菜单中选择【新建文件】或【新建文件夹】,在指定文件夹中创建untitled的文件或文件夹,输入文件或文件夹的新名称。

2. 重命名文件和文件夹

重命名文件和文件夹有以下三种方法。

(1)在【文件】面板中,单击文件或文件夹名,稍停片刻后再次单击该文件或文件夹名,在文件名转为可编辑状态下输入新名称,按<Enter>键。

(2)在【文件】面板中,右键单击文件或文件夹名,在弹出的菜单中选择【编辑】|【重命名】,在文件名转为可编辑状态下输入新名称,按<Enter>键。

(3)在【文件】面板中,单击选中文件或文件夹,按<F2>键,在可编辑状态下输入新名称,按<Enter>键。

3. 移动文件和文件夹

移动文件夹或文件有以下两种方法。

(1)在需要移动的文件夹或文件上单击鼠标右键,在弹出的菜单中选择【编辑】|【剪切】,然后单击目标文件夹或目标文件夹内的一个文件,采用同样的方法选择【粘贴】。

(2)在要移动的文件夹或文件上面按下鼠标左键,将其直接拖动到要移到的文件夹中。

4. 删除文件或文件夹

删除文件或文件夹有以下两种方法。

(1)鼠标右键单击要删除的文件或文件夹,在弹出的菜单中选择【编辑】|【删除】。

(2)鼠标左键单击选择要删除的文件或文件夹,按<Delete>键。

2.2.4 课堂案例——慈善救助中心

2-2-4 慈善救助中心

案例学习目标:学习创建站点、管理站点文件和文件夹的方法。

案例知识要点:使用【站点】|【新建站点】创建站点,在【文件】面板中移动文件、重命名文件。

素材所在位置:案例素材/ch02/课堂案例——慈善救助中心。

案例效果如图2-12所示。

图2-12

1. 创建站点

① 将“案例素材/ch02/课堂案例——慈善救助中心”的案例素材复制到本地计算机硬盘(如E盘)的已经创建好的同名文件夹中。

② 启动Dreamweaver,选择菜单【站点】|【新建站点】,打开【站点设置对象 慈善救助中心】对话框,如图2-13所示,在左侧选择【站点】,在右侧【站点名称】文本框中输入“慈善救助中心”,单击【本地站点文件夹】文本框右侧【浏览文件夹】按钮48958-00-31-0,打开【选择根文件夹】对话框,如图2-14所示,找到文件夹“E:\课堂案例——慈善救助中心”,单击【选择文件夹】按钮。

图2-13

图2-14

③ 返回到【站点设置对象 慈善救助中心】对话框,单击【保存】按钮,在【文件】面板中出现“慈善救助中心”站点,并列出了该站点文件夹中所有文件和文件夹,如图2-15所示。

图2-15

2. 建立站点内文件夹

① 在【文件】面板中的站点根文件夹上单击鼠标右键,在弹出菜单中选择【新建文件夹】,如图2-16所示。可以看到在【文件】面板中新建了一个名为untitled的文件夹,将文件名修改为images,如图2-17所示。

图2-16

图2-17

提示:

在站点内,一般情况下图像文件要统一存放在一个文件夹内,文件夹的名称为images。

② 在【文件】面板中,借助<Ctrl>键选中所有图像文件,如图2-18所示,在所选的文件上按住鼠标左键拖到站点文件夹images上,松开鼠标,会出现【更新文件】对话框,如图2-19所示。

图2-18

图2-19

③ 单击【更新】按钮,完成将所选文件移动到images文件夹内。

3. 重命名文件和文件夹

① 在【文件】面板中,单击文件名index2.html,稍作停顿,再次单击该文件名,在文件名可编辑状态下修改名称为about.html,如图2-20所示。

图2-20

提示:

也可以右键单击index2.html文件名,在弹出的快捷菜单中选择【编辑】|【重命名】,完成重命名操作;或者单击选中index2.html文件后,按<F2>键完成重命名。

② 按回车键,出现【更新文件】对话框,如图2-21所示,单击【更新】按钮,完成文件名的修改。

图2-21

③ 在【文件】面板中,双击打开index.html文档,按<F12>键,单击网页中的“关于我们”文字链接,得到about.html预览网页效果,如图2-22所示。

图2-22

④ 在【文件】面板中单击文件夹名images,稍作停顿,再次单击该文件夹名,在可编辑状态下修改名称为img,如图2-23所示。按回车键,出现【更新文件】对话框,如图2-24所示,单击【更新】按钮,完成文件夹名称的更改。

图2-23

图2-24

⑤ 按<F12>键,再次预览网页效果。