任务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