网页制作综合实例

网页制作综合实例

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.选中上部导航区表格，按键盘中右方向键，使得光标置于表格的右边。