1.2.4 创建和保存网页

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

在网站中有一个特殊的网页——首页,每个网站必须有一个首页。访问者在Web浏览器的地址栏中输入网站地址,首先看到的就是该网站的首页。如在IE浏览器的地址栏中输入“www.ptpress.com.cn”会自动打开人民邮电出版社网的首页。一般情况下,首页的文件名为“index.htm”“index.html”“index.asp”“default.asp”“default.htm”或“default.html”。

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

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

图1-23

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

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

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

图1-24

图1-25

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

•“拆分”视图:将文档编辑窗口分为上、下2部分,上部是设计部分,显示网页元素及其在页面中的布局;下部是代码部分,显示代码。在此视图中,网页设计用户可通过在设计部分单击网页元素的方式,快速地定位到要修改的网页元素代码的位置,进行代码的修改,或在“属性”面板中修改网页元素的属性。通过“查看>拆分”命令,在弹出的菜单中可以选择拆分的显示类型。“拆分”视图的效果如图1-27所示。

图1-26

图1-27

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

图1-28