任务1-9　图形菜单的建立

需求：

用拼图的方法组成图1-21所示的图形菜单，菜单图形部分能根据菜单标题文字的长度自动适应。

图1-21　水平图形菜单

分析：

每个激活菜单和未激活菜单区域是由三个部分组成的，左右两部分大小固定，中间部分因标题文字的长度而变化，为此将中间部分设置为背景图像填充。

实现：

第一步，将菜单分成两类：激活（不带底线的彩色）和未激活（带底线的灰色），并为此建立active和deactive文件夹。

第二步，找出图1-22所示的激活菜单和未激活菜单中三个不重复的最小部分，分别保存在相应的文件夹中。

第三步，建立一个静态页面，添加多个DIV，其中包含1个一级的DIV，3个二级DIV和9个三级的DIV，具体源代码见清单1-23。

图1-22　水平菜单所用图形

清单1-23　水平图形菜单

说明

使用TABLE也可以构造menu，代码部分见清单1-24。

清单1-24　使用TABLE构造menu