- Dreamweaver CC中文版网页设计与制作从新手到高手
- 吴东伟
- 1838字
- 2025-02-26 03:52:43
4.1 创建网页文档
创建站点之后,用户便可以创建网页文档,将其保存到站点中,并对网页文档进行设置和浏览。
4.1.1 新建文档
Dreamweaver为用户提供了HTML、CSS、JS、PHP等多种文档类型,不仅可以创建空白网页文档,还可以创建流体网格布局文档、启动器模板和网站模板文档。
1. 创建空白文档
在Dreamweaver中,用户可通过欢迎屏幕和命令菜单两种方法来新建文档。
启动Dreamweaver软件,在欢迎屏幕中的【新建】栏中,选择所需创建的文档类型,即可快速创建所选文档类型的空白文档。

在Dreamweaver窗口中,执行【文件】|【新建】命令,在弹出的【新建文档】对话框中,激活【空白页】选项卡,选择一种页面类型和布局,设置【文档类型】选项,并单击【创建】按钮。

当用户在【布局】列表框中选择除“无”之外的布局时,右下角的【布局CSS位置】选项才变为可用状态,主要包括下列三种选项:
□添加到文档头 该选项表示将布局的CSS添加到即将创建的页面头中。
□新建文件 该选项表示将布局CSS添加到新的外部CSS样式表并将新的样式表附加到即将创建的页面中。
□链接到现有文件 该选项可以指定已包含布局所需的CSS规则的现有CSS文件。
技巧
在Dreamweaver窗口中,用户可通过Ctrl+N组合键,快速打开【新建文档】对话框。
2. 创建流体网格文档
Dreamweaver新增了流体网格布局,以帮助用户创建可以应对不同屏幕尺寸的CSS布局。
执行【文件】|【新建】命令,在弹出的【新建文档】对话框中,激活【流体网格布局】选项卡,保持默认设置,单击【创建】按钮即可。

提示
用户也可以在欢迎屏幕中,选择【新建】栏中的【流体网格】选项,来打开【新建文档】对话框。
3. 创建启动器模板文档
Dreamweaver附带了Mobile起始页模板,以帮助用户设计站点页面。
执行【文件】|【新建】命令,在弹出的【新建文档】对话框中,激活【启动器模板】选项卡,在【示例页】列表框中选择一种示例,单击【创建】按钮即可。

4. 创建网站模板文档
网站模板文档是基于用户所创建的网站模板文件进行创建,在创建之前用户还需要将网站中的文档保存为模板类型,否则将无法显示模板示例内容。
执行【文件】|【新建】命令,在弹出的【新建文档】对话框中,激活【网站模板】选项卡,在【站点】列表框中选择一个站点,同时选择一个站点模板,单击【创建】按钮即可。

提示
用户也可以在欢迎屏幕中,选择【新建】栏中的【网站模板】选项,来打开【新建文档】对话框。
4.1.2 保存文档
创建文档并对文档进行一系列的编辑之后,为了确保编辑内容不会丢失,还需要将网页文档保存到本地计算机中。
1. 保存文档
对于新创建的页面文档,执行【文件】|【保存】命令,在弹出的【另存为】对话框中,设置保存位置和名称,单击【保存】按钮即可。

技巧
在保存文档时,用户可以通过按下Ctrl+Shift+S组合键,快速打开【另存为】对话框,对文件进行保存操作。
对于已创建并保存过的页面文档,当用户需要更改其保存位置或将它保存为副本时,则需要执行【文件】|【另存为】命令,在弹出的【另存为】对话框中设置保存位置和名称,单击【保存】按钮即可。
提示
用户也可以执行【文件】|【保存全部】命令,保存所有打开的网页文档。
2. 保存为模板文档
Dreamweaver为用户提供了保存文档为模板功能,以方便用户在下次编辑网页时使用。
执行【文件】|【另存为模板】命令,在弹出的【另存模板】对话框中选择站点和模板名称,单击【保存】按钮即可。

3. 回复文档
当用户对所创建的文档进行保存,再次打开该文档并对该文档进行编辑操作时,如不满足当前的编辑操作,则可以通过“回复文档”功能,撤销当前的编辑内容,将该文档恢复到上次保存时的状态。
执行【文件】|【回复至上次的保存】命令,在弹出的提示对话框中,单击【是】按钮,即可将当前文档恢复到上次保存时的状态。

4.1.3 打开文档
一般情况下,用户可以采用直接双击网页文档的方法,在不启动Dreamweaver的前提下,直接打开网页文档。另外,用户可以通过下列两种方法,来打开文档。
1. 欢迎屏幕法
当用户启动Dreamweaver时,系统会自动弹出一个欢迎屏幕,在该屏幕【最近浏览的文件】栏中,选择所需打开的文件名称即可。

提示
在【最近浏览的文件】栏中,当用户将鼠标移至文件名称上时,系统会自动显示文件路径提示信息,以方便用户查看文件的具体保存位置。
2. 菜单命令法
当用户启动Dreamweaver后,则可以执行【文件】|【打开】命令,在弹出的【打开】对话框中,选择所需打开的文件,单击【打开】按钮即可。

技巧
用户也可以通过Ctrl+O组合键,快速打开【打开】对话框,选择所需打开的文件。
另外,执行【文件】|【打开最近的文件】命令,在其级联菜单中选择需要打开的文件名,即可打开该文件。
技巧
用户也可以通过Ctrl+W组合键,来关闭当前网页文档,通过Ctrl+Shift+W组合键,关闭所有的网页文件。
