为网站设计一个“高级”选项卡

大家使用软件时经常能够发现,在打开选项对话框后,会显示一些简单的常规选项,但如果常规选项不能满足需要,可以再击“高级按钮,面板会扩大,并显示出一些高级选项。这样,既能屏蔽软件设置的复杂性,又不失高级功能的定制性。还能够节省屏幕空间,不会因为一打开选项菜单就面对烟花缭乱的选项而不知所措,我们在网站设计时也可以加入这样的功能。

现在的网页设计中也经常使用这种方法。比如某个软件下载站,打开页面后显示一整张大表,里面是一行行的软件名称等最基本信息,但单击“详细”后,并不弹出新页,而是在当前行下“挤”出一行显示更详细的信息。这种方法比弹出新页要直观快速的多,并且显得更专业。另外,一个经常使用这个功能的地方时ID注册页面,比如注册一个免费邮箱或论坛账号,往往首先显示出简单注册界面,在点击高级功能后,才会显示出输入更多个人信息的界面。

我们使用Dreamweaver来设计这个功能,其实设计起来也比较简单,用到了HTML的语句,其中,onclick和if语句是实现这个功能的关键。因为使用了if语句判断当前状态,所以效果为第一单击时显示出“高级”功能,再一次点击时,隐藏“高级”功能。所以如何有效的利用有限的显示空间显示出尽可能多的内容,是每一个网页设计者要考虑的内容,“高级”功能的实现正好解决了网页空间设计的问题。

分类目录: 建站教程 | 标签: 网站  设计  高级  选项卡   | 评论:0
上一篇: 用表格布局网页时出现错位怎么办
下一篇: 使用表格进行网页排版