1.4 快速创建基本网页

本节将介绍一个简单的网页设计制作方法，使读者对网页制作软件的基本使用方法和网页制作流程有一定的了解，为后面的学习打下基础。如图1-14所示为网页。

图1-14 网页

练习文件CD-ROM/练习文件/01/1.4/

完成文件CD-ROM/完成文件/01/1.4/index.htm

1.4.1 确定网页主要栏目和整体布局

不管是简单的个人网站，还是复杂的具有几千页面的大型网站，对网站的需求规划都要放到第一步，因为它直接关系到网站的功能是否完善、是否达到预期的目的等。

规划一个网站，可以用树状结构先把每个页面的内容大纲列出来。尤其是当要制作一个很大的网站时，特别需要把架构规划好，也要考虑到以后的扩充性，免得做好以后再更改整个网站的结构。

1.4.2 创建本地站点

为了更好地利用站点对文件进行管理，也为了尽量减少错误，如路径或链接出错，在使用Dreamweaver制作网页以前，首先应定义一个新站点，具体操作步骤如下。

提示

规划站点结构需要遵循的规则如下。

① 每个栏目一个文件夹，把站点划分为多个目录。

② 不同类型的文件放在不同的文件夹中，以利于调用和管理。

③ 在本地站点和远端站点使用相同的目录结构，使在本地制作的站点原封不动地显示出来。

[1] 执行“站点”|“管理站点”命令，弹出“管理站点”对话框，在对话框中单击“新建”按钮，如图1-15所示。

图1-15 “管理站点”对话框

[2] 弹出“站点设置对象”对话框，在对话框中选择“站点”选项，在“站点名称”文本框中输入名称，单击“本地站点文件夹”文本框右边的“浏览文件夹”按钮，如图1-16所示，弹出“选择根文件夹”对话框，选择站点文件。

图1-16 设置站点对象

[3] 单击“确定”按钮，返回到“管理站点”对话框，在对话框中显示新建的站点，如图1-17所示。单击“完成”按钮，即可完成站点的创建。

图1-17 完成站点创建

1.4.3 新建网页文档

在创建完本地站点后，就可以创建具体的网页了，新建网页文档的具体操作步骤如下。

[1] 执行“文件”|“新建”命令，弹出“新建文档”对话框，在对话框中选择“空白页”|“HTML”|“无”选项，如图1-18所示。

图1-18 “新建文档”对话框

[2] 单击“创建”按钮，新建网页文档，在“标题”文本框中输入“公司简介”，如图1-19所示。

图1-19 新建文档

[3] 执行“修改”|“页面属性”命令，弹出“页面属性”对话框，在对话框中将“左边距”、“上边距”、“下边距”和“右边距”分别设置为“0”，如图1-20所示。单击“确定”按钮，设置页面属性。

图1-20 “页面属性”对话框

1.4.4 插入表格布局网页

表格是最常用的网页布局工具，使用表格可以对页面中的元素进行准确定位。合理利用表格来布局网页，有助于协调页面结构的均衡。

[1] 将光标放置在页面中，执行“插入”|“表格”命令，弹出“表格”对话框，在对话框中将“行数”设置为“3”，“列数”设置为“1”，“表格宽度”设置为“797像素”，如图1-21所示。

图1-21 “表格”对话框

[2] 单击“确定”按钮，插入表格，此表格记为“表格1”，将“对齐”设置为“居中对齐”，如图1-22所示。

图1-22 插入表格1

[3] 将光标置于表格1的第2行单元格中，插入1行5列的表格，此表格记为“表格2”，如图1-23所示。

图1-23 插入表格2

[4] 将光标置于表格2的第1列单元格中，插入4行1列的表格，此表格记为“表格3”，如图1-24所示。

图1-24 插入表格3

[5] 选择表格2的后3列合并单元格，插入2行3列的表格，此表格记为“表格4”，如图1-25所示。

图1-25 插入表格4

[6] 将光标置于表格4的第1列单元格中，插入2行1列的表格，此表格记为“表格5”，如图1-26所示。

图1-26 插入表格5

1.4.5 插入多媒体

多媒体技术的发展使网页设计者能轻松地在网页中加入声音、动画、影片等内容。下面讲述Flash动画的插入方法，具体操作步骤如下。

[1] 将光标置于表格1的第1行单元格中，执行“插入”|“媒体”|“SWF”命令，弹出“选择SWF”对话框，在对话框中选择“banner.swf”，如图1-27所示。

图1-27 “选择SWF”对话框

[2] 单击“确定”按钮，插入Flash，设置循环及自动播放，如图1-28所示。

图1-28 插入Flash

1.4.6 插入文本内容

文本是基本的信息载体，不管网页内容如何丰富，文本自始至终都是网页中最基本的元素，下面讲述文本的插入和使用。

[1] 将光标置于表格5的第2行单元格中，输入文字“2010年”，如图1-29所示。

图1-29 输入文字“2010年”

[2] 同理在表格4内，将剩余部分文字输入，如图1-30所示。

图1-30 输入剩余部分文字

1.4.7 插入图像

美观的网页是图文并茂的，漂亮的图像不但使网页更加美观、形象和生动，而且使网页中的内容更加丰富多彩。

[1] 将光标置于表格3相应的单元格中，执行“插入”|“图像”命令，在弹出“选择图像源文件”对话框中选择合适的图片，如图1-31所示。

图1-31 选择图像

[2] 单击“确定”按钮，插入图像，如图1-32所示。

图1-32 插入图像

[3] 将光标置于表格4相应的单元格中，执行“插入”|“图像”命令，弹出“选择图像源文件”对话框，分别插入图像，如图1-33所示。

图1-33 将光标置于表格4插入图像

[4] 将光标置于表格5相应的单元格中，执行“插入”|“图像”命令，弹出“选择图像源文件”对话框，分别插入其他图像，如图1-34所示。

图1-34 插入其他图像

[5] 将光标置于表格5的第2行单元格中相应的位置，插入图像，如图1-35所示。

图1-35 将光标置于表格5第2行单元格插入图像

[6] 将光标置于表格1的第3行单元格中相应的位置，插入图像，如图1-36所示。

图1-36 将光标置于表格1第3行单元格插入图像

1.4.8 网页的保存

网页制作完成并保存后，即可在浏览器中看到网页效果。

执行“文件”|“保存”命令，弹出“另存为”对话框，在对话框中选择保存的位置，在“文件名”文本框中输入index.htm，如图1-37所示。单击“保存”按钮，即可保存文档。

图1-37 “另存为”对话框

上一章目录下一章