展示型课程网站页面布局泛型设计摘要：网站是信息化教育的主要载体，每年都有大量的课程和教学展示型同站被开发出来，许多部门和机构也话费了大量的精力和资金在网站开发上。本文正是探讨设计一种通用的，并且页面布局能够根据内容表迗需要的变化的网站布局设计，并且通过div+css+javascript联合作用，自由或自动设置网页层级元素的display和float两个属性，实现布局多变的网站模板。目前，这个模板的最初版本已经应用到实际中，并取得了良好的效果。关键词：课程网站；网站布局；泛型设计；流式布局；cssdisplay中图分类号：TP3随着计算机技术、网络技术的发展，特别是近几年来移动网络技术的崛起，校园信息化，课程开放化、网络化已经成为今天教育尤其是高等教育的一个重要发展趋势。在教学网络化发展的过程中，网站是教育者与受众沟通的重要窗口。在很多院校的课程建设、教研教改、专业建设、骨干建设中，课程网站建设都是一个重要的内容，并且花费昂贵的开发维护费用。本文正是尝试探讨通过分析各种常见教学展示型网站的布局规律，最终设计出一种灵活多变而且泛用的教学展示型网站布局，以达到节省课程网站开发的人力、财---本文来源于网络，仅供参考，勿照抄，如有侵权请联系删除---力，避免重复开发劳动目的。1问题分析与拟解决办法经过对大量的教育与课程网站进行分析与对比，可以发现，绝大部分网站的主体非常的相似！再进一步分析，这些网站的布局具有相似的构造规律：（1）内容上，网站的内容是分不同模块的，同一模块的内容又分不同的层次；（2）界面布局方面，绝大多数网站基本上由头部标识、导航、侧边栏、内容主体和底部“页脚”几个部分构成一一顶部导航用以区分模块，侧边栏用以区分和显示层次，内容在页面中部显示，鹿部“页脚”用以显示补充内容。通过上面的分析，可以设想，如果能够设计出一种通用的网站页面布局模板一一它能够提供多个模块和多个层次来容纳网站要展示的内容，布局结构能够根据内容的需要而自动调整的话，或通过网站后台设置调整，那么就可以根据需要将一个已有网站改头换面为另一个需要的网站，从而避免开发不同课程的网站而做重复的工作。2设计与实现1六个层级，充分展示网站内容（http://ql.wjxit.com/course_list.asp?cidl=435&cid2=616&cid3=650&cid4=653&cid5=729&aid二1390）---本文来源于网络，仅供参考，勿照抄，如有侵权请联系删除---①第一层级：顶部导航div，用于对网站内容分模块显示；②第二层级：顶部标签栏；③第三层级：菜单栏；④第四层级：侧边菜单；⑤第五层级：侧边子菜单；⑥第六层级:侧边弹出菜单。通过对大量的网站内容和层次进行总结分析，我们认为，当网站结构层次迗到6级时，绝大多数情况下，网站的内容都能够分模块、分层次进行表现了，如图1。而更多的层次，通常很少用到。另外一方面，更多的层次也是不便于用户理解的。很多情况下，内容模块和层次往往只到3〜4级。因此，这里设计一个预置6个层次的网站布局。并且通过程序与css技术的协调实现不同情况下，层次的保留与去除。比如，当一个层级下面只有一个分支时，这时候的这个分支的层级就可以被忽略，从而跳过这一个层次的显示，引起布局的变化。根据上面的设计，在网站使用过程中，根据内容的取舍与设置，可以演变出多种形式迥异的网站页面布局，而实际上它们使用的完全是相同的布局，同一种布局的变形：(a)导航+左侧边栏布局；(b)导航菜单+子菜单+右侧边栏布局；(c)导航菜单+子菜单布局；(d)只有侧面导航菜单布局。实现上面的效果，主要可以采取下面两种方法：(1)将下面的JavaScript语句写在页面的标签中间，并根据需要做适当的修改。通过判断和jquery的hide()函数的作用，当当前层级下只有一个子分支时，子层级将被忽略显示。---本文来源于网络，仅供参考，勿照抄，如有侵权请联系删除---(2)在输出内容到布局时，有服务端脚本判断当前子分支的数目，如果子分支数目为1，则或者没有子分支，则设置子分支的“display”属性为“none”，子层级将被忽略显示。例如，当不要侧边栏时，可以在服务器端输出数据时仿照下面的设置：---本文来源于网络，仅供参考，勿照抄，如有侵权请联系删除---