网页制作综合实例

网页制作综合实例

16.1制作前的准备工作

首先在E盘上建立一个文件夹（如玫瑰信使），再在其下建立images文件夹和css文件夹。将“ch16/images”文件夹下的所有图像拷贝到“玫瑰信使/images”文件夹下。

建立站点和规划目录结构、指定默认图像文件夹

主页制作前的准备工作，有定义站点和设计网站结构的目录，还有就是要将网页设计制作中需要用到的所有图像素材整理好，最好是放在站点根目录中的一个文件夹中，如images。这样便于设计制作时的选取使用，也不易造成素材的混乱。如下图：

规划站点目录结构

为站点中使用的图像文件指定一个默认图像文件夹，如下图：

设置站点中的默认图像文件夹

在站点下建立一个主页文件index.html。

16.2设置页面属性及样式

16.2.1页面属性设置

1.在站点资源管理器的本地视窗中，选择并双击已经定义的首页面文件ch16\index.asp。 2．在打开的index.asp文件的文档窗口中，选择“修改”---“页面属性”菜单项，打开“页面属性”对话框。

设置网页标题为：“家庭百科”

设置背景图像为images/bj.gif

将“左边界”、“顶部边界”、“边界宽度”、“边界高度”项均设为5。

3．设置完成后，单击“确定”按钮，确定操作返回到index.asp文档窗口。

16.2.2定义CSS样式文件

定义body样式

1. 在index.htm文档窗口中，依次单击“窗口”---“CSS样式”菜单项，打开“CSS样式”面板。选择“新建CSS样式”菜单命令。

2. 打开“新建CSS样式”对话框，“类型”选择“重定义HTML标签”，在“标签”框中选择或输入body，“定义在”选择“（新建样式表文件）”。

3. 单击“确定”按钮，在弹出的“保存样式表文件为”对话框中，选择样式文件保存的路径（站点下的CSS文件夹），输入样式文件名（这里存为css）。

4. 单击“保存”按钮，在出现的样式定义对话框中选择“类型”，在“字体”下拉列表框中选择“宋体”;在“大小”下拉列表中选择“9”，后面的单位下拉列表框中选择“点数（pt）”度量单位。

5. 单击“确定”按钮，便完成对body标记的定义

定义td

定义td的方法和定义body一样，在“新建CSS样式”对话框中将“类型”选择为“重定义html标签”；在“标签”框中选择或输入td。在定义样式对话框中将字体设置为宋体9磅字。

定义文档的链接颜色

1. 单击“窗口”----“CSS样式”菜单项，打开“CSS样式”面板。

2. 单击“CSS样式”面板中的“新建样式”按钮，打开“新建CSS样式”对话框。“类型”选择“使用CSS选择器”；“选择器”框中选择或输入a:active（选中超链接状态）；“定义在”框中选择CSS，这样便可和前面定义的样式存放在一起，供别的文档使用。

3. 单击“确定”按钮，在出现的对话框中，将该超链接状态的颜色设置为#334dcc。

4. 单击“确定”按钮，便完成了超链接状态的颜色设定。返回到“新建CSS样式”对话框中，在“选择器”框中选择或输入a:hover（鼠标经过超链接状态）。

5. 单击“确定”按钮，在出现的对话框中，将该鼠标经过超链接状态的颜色设置为#ff0000。

6. 单击“确定”按钮返回到“新建CSS样式”对话框，可以定义其他的样式。

7. 按照相同的方法，完成下列超链接颜色的设置。

a:link：超链接的正常状态，没有任何动作的时候；颜色设置为：#cc6633

a:viseted：访问过的超链接状态；颜色设置为#334dcc。

完成这些标签样式的定义，基本能满足一般网页的需要了。由于将这些标记保存为样式文件，所以可供多个文档共同使用。

16.3制作一个完整的个人主页

完成页面设置后可进入网页具体制作阶段。

在本页面的制作过程中用到聊表格、嵌套表格，多处用到对表格中单元格的合并、拆分等技巧性设置。布局页面每个区域所采用的表格，上下是孤立的，而左右保持了一定的嵌套关系。这样做的好处是：上下孤立有助于提高网页下载的速度；左右使用嵌套表格有助于对网页元素的定位和特殊页面效果的设计。

16.3.1页眉区制作

该页眉区用一个1行3列的表格来制作，在第一列单元格中插入该网站的标志，第二列单元格中插入该网站的广告，第三列单元格中插入显示当前日期的程序代码。页眉区制作步骤如下：

1. 将光标停留在index.asp文档窗口中，选择“插入”---“表格”命令。

2. 在弹出的“插入表格”对话框中，设置插入一个1行3列，宽度为750像素的表格，其余设置为0，单击“确定”按钮。

3. 选中刚插入的表格，选择“窗口”---“属性”命令，打开“属性”面板，在“属性”面板中将表格的高度设置为60，表格对齐方式为居中。

4. 设置单元格。将第一列单元格的宽度设置为139像素；第二列单元格的宽度设置为468像素；第三列单元格的宽度设置为143像素。单元格的对齐方式设置为水平居中对齐，垂直中间。

5. 插入网站标志。将光标停留在第一列单元格中，选择“插入”—“图像”菜单命令，在“选择图像源”对话框中，选择“images”文件夹内的logo.gif标志图像，单击“确认”按钮插入网站标志。

6. 在第二列单元格中，插入images文件夹内的head.gif网站广告图像。

7. 完成“显示当前日期”。该部分使用代码来完成。在“属性”面板中将第三列单元格的对齐方式设置为水平居中、垂直中间。在“代码”视图，将“显示日期”的代码插入单元格。

16.3.2导航区的制作

导航区的制作从整体上可分为上下两部分，分别用表格来完成。

上部导航的制作

上部导航由1行3列的表格构成。其中第一列用于设置“跑马灯”效果；第二列设为“设为首页”；第三列设置为“加入收藏夹

具体步骤为：

1. 选中页眉区的表格，按下键盘中的右方向键，使得光标置于页眉区表格的右边。

2. 在文档窗口的主菜单栏选择“插入”—“表格”菜单命令，插入一个1行3列的表格，填充0，间距0，边框粗细0，宽度750像素。

3. 将插入表格的第1，2，3列的宽度依次设置为450、150、150像素。各单元格的高度设置为20像素。单元格的对齐方式为水平左对齐，垂直居中；整个表格居中对齐。

4. 切换到代码视图，在第一列单元格中插入“滚马灯”代码。

5. 在设计视图中，在第二、第三列单元格中分别插入images文件夹下的home.gif和sc.gif图像。

6. 在代码视图中，在第二列单元格“首页面图像”右边插入“设为首页”的代码；在第三列单元格“加入收藏”图像右边插入“加入收藏”的代码。

下部导航的制作

下部导航由1行3列表格构成，但在第三列单元格中海包括一个嵌套表格。具体步骤是：

1. 选中上部导航区表格，按键盘中右方向键，使得光标置于表格的右边。 2. 选择“插入”---“表格”命令，插入1行3列的表格，表格宽度为750像素，其余均为0.

3. 将表格高度设置为30像素。1—3列单元格的宽度依次为：150像素、19像素、581像素。第一列单元格的对齐方式为水平居中、垂直靠下，并将该单元格的背景颜色设为#ea7609，最后输入“百科首页”文本，文本的颜色设置为白色。在第二列单元格中插入images文件夹下的jiao.gif图像。在第三列单元格中插入1行7列的表格，并作如下图的设置。

4. 设置嵌套表格。选中所插入的嵌套表格，在“属性”面板中将表格的对齐方式设置为居中对齐，高度设置为22像素，背景颜色设置为#ff9966，边框颜色为#ffffff。

5. 设置嵌套表格中的单元格。选中所有单元格，打开“属性”面板，将各单元格的高度设置为18像素；宽度设置为80像素，对齐方式为水平居中、垂直底部。

6. 输入嵌套表格中的各单元格对应导航文本：“家庭理财”、“家庭医生”、“居室装饰”、“追求娱乐”、“购物防伪”、“留言板”、“浪漫一刻”，并将文本的颜色设置为黑色。

16.3.3主内容一区的制作

主内容一区从左到右共包含3部分，分别是：“搜索引擎”、“家庭理财”、“动态公告”。该区最外层是一个1行4列的表格，通过在第1、3和4列单元格内嵌套表格完成。

首先插入一个1行4列的表格，步骤是：

1. 选中下部导航栏表格，并按键盘中的右方向键，使得光标置于该表格的右边。

2. 插入1行4列的表格，表格宽度为750像素，其余各项设置为0。将表格居中对齐，并将第1，2，3，4列单元格的宽度分别设置为172、18、418和142，单位均为像素。各单元格的高度设置为130像素。

制作“搜索引擎”区

1. 在1行4列表格的第一列单元格插入一个4行1列的嵌套表格。

2. 设置嵌套表格，将嵌套表格的宽度设为172像素，高度均设置为130像素。

3. 设置单元格。在嵌套表格的第一行单元格内插入images/sohus.gif图像；在第二、四行单元格内插入images/c.gif图像，并将该单元格的背景颜色设置为#ff6633，高度设置为1像素；最后将第三行单元格的背景图像设置为images/bj1.gif图像。

4. 插入搜索引擎表单。将光标停留在嵌套表格的第三行单元格中，对齐方式设置为水平居中、垂直考上，切换到代码视图，插入“搜索引擎”代码

制作“家庭理财”区

要完成“家庭理财”区的制作，请执行下列操作：

1、 在该区的第三列单元格内插入一个5行1列的表格。表格中各行单元格的高度均设置为26像素，表格的宽度设置为98%，并将该表格的其余项设置为0，表格的对齐方式设置为居中。

2、 选中所有单元格，将各单元格的对齐方式设置为靠左对齐、垂直中间，并在第一行单元格中插入images/lic.gif图像，其他行单元格中输入对应的文本（参考已完成的最终页面）。

制作“动感公告”区

“动感公告”区的制作可以使用与“搜索引擎”表格相同的方法完成，其中第三行单元格的背景图像修改为images/bj2.gif图像，表格的宽度设置为142像素。然后插入“本站简介”代码片段即可。具体操作如下：

1、 将主内容一区表格的第四列单元格对齐方式设置为水平左对齐、垂直靠上，并将光标停留在此单元格内。

2、 选择代码视图，将“本站简介”代码片段插入。

3、 完成主内容一区的制作，预览看实际效果。

16.3.4 主内容二区的制作

主内容二区从左到右共包含4部分，分别是“天天饮食”、“家庭医生”、“通信信箱”、“本站导航”。该区最外层是一个2行4列的表格，然后在第1、3和4列单元格内嵌套表格完成。

首先插入一个2行4列的表格，请执行以下操作步骤：

1、 选中“主内容一区”的表格，并按键盘中的右方向键，使得光标置于该表格的右边。

2、 插入2行4列的表格，表格的宽度设置为750像素，其余各项设置为0.将表格的对齐方