本框架网页的设计目标是想在网页设计时把网页标题放在顶部，并固定不动，在网页的左侧放置导航条，右边作为网页的主体显示主要动态内容。有了初步的想法，不妨在具体动手之前把这样的设计想法画出来。
在网站建设时，实现上述想法用框架技术是不错的选择，也可以选择其他实现技术和途径，但在网页制作中需要用到脚本编程，如用<iframe>标签或用CSS技术等来实现。但作为初学者，用框架技术实现还是比较简单的。主要技术参数如下：
•框架集页面宽度为816像素。
•需要用到框架集嵌套技术，类似表格嵌套效果。
•先创建上下结构的框架集，上部框架高度固定为94像素，宽为816像素，无边框；下部框架高度为相对，宽为816像素，无边框。
•在下部框架内嵌套框架集，嵌套框架集的左框架为固定宽度160像素，无边框；右框架宽度为相对，边框为默认。
根据设计参数，下一步骤需要制作各个分页面，具体介绍如下。
1、标题页（top.html）
【操作步骤】
第1步，用Photoshop绘制网页图像，本例图像的大小为816×94像素。
第2步，在工具箱中选择【切片工具】，在【原稿】编辑窗口中根据网页编辑需要切分图像。
第3步，选择【文件】|【存储为Web所用格式】命令，打开【存储为Web所用格式】对话框，对于该对话框可以保持默认设置，选择保存位置，单击【确定】按钮保存即可。Photoshop提供的这个全自动优化并导出网页图像是个非常实用的命令。
第4步，启动Dreamweaver，新建一个文件。选择【文件】|【打开】命令，打开第3步输出的网页图像，另存为top.html，要注意源图像切分图片保存文件夹images和top.html文件的位置关系，即要处在同一文件夹中，否则会找不到。
第5步，在Dreamweaver编辑窗口中，把需要输入文本或插入图像等网页元素的切片区域设置为背景显示图像，方法是先根据单元格插入图像的大小，在【属性】面板中设置该单元格的大小，然后复制插入图片路径，再选中单元格，在【属性】面板中把该路径复制到【背景】文本框中。
第6步，在最后一行单元格中嵌入一个JavaScript脚本文件，用来制作动态下拉菜单。
2. 导航页（left.html）
【操作步骤】
第1步，启动Dreamweaver，新建文档，保存为left.html。选择【修改】|【页面属性】命令，打开【页面属性】对话框，设置页面背景色为浅蓝色，靠近左上角对齐网页。
第2步，插入一个2行1列的表格，设置宽为60像素。
第3步，在表格的第1行中插入标题图片，在第2行中插入一个4行2列的表格，宽度为100%。再根据设计输入文本和提示小图标。
第4步，选中第2~4行所有单元格，如图3.26所示，切换到【代码】视图，会高亮显示选中单元格的代码，并在这段代码前输入“<tbodyid="Content4" style="display:none;">”，在后面输入“</tbody>”。
第5步，同时，在<head>和</head>之间输入一段JavaScript脚本，用来控制第2~4行单元格的显示，实际上该代码主要用来控制<tbody>和</tbody>标签中间包含的所有表格和元素显示和隐藏。
代码如下：
<script>
//控制第一个表格显隐函数
function turnit(ss,ii,aa){
if (ss.style.display=="none"){
ss.style.display="";
ii.src="images/_0.gif";
aa.src="images/icon01.gif"; }else{
ss.style.display="none";
ii.src="images/+0.gif";
aa.src="images/icon.gif";
}
}
//控制最后一个表格显隐函数
function turnit1(ss,ii,aa){
if (ss.style.display=="none"){
ss.style.display="";
ii.src="images/_.gif";
aa.src="images/icon01.gif"; }else{
ss.style.display="none";
ii.src="images/+2.gif";
aa.src="images/icon.gif";
}
}
//控制中间表格显隐函数
function turnit2(ss,ii,aa){
if (ss.style.display=="none") {
ss.style.display="";
ii.src="images/_.gif";
aa.src="images/icon01.gif"; }else{
ss.style.display="none";
ii.src="images/+.gif";
aa.src="images/icon.gif";
}
}
</script>
第6步，切换到【设计】视图，选中第1行单元格，在选中内代码上面的<tr>标签中增加脚本控制脚本：onMouseUp="turnit(Content1,Img1,icon1);"，经过上面操作就可以实现动态折叠表格效果。
第7步，以同样的方式制作中间表格和最后一个表格的动态效果，多个表格叠加在一起就形成了导航菜单。要注意各个表格由于所引用的图标不同，所以事件引用的函数也不同，见源代码中的注释 。
当前文章标题：框架网页设计
当前URL：http://www.lyjtt.cn/news/wzzz/3074.html
下一篇：网页设计时的框架合成
