你的位置:首页 > 网页设计

[网页设计]顶求网首页整体设计思路


整体架构

顶求网首页是一个web2.0博客类的网站首页,在该网站中用户可以发表博客,也可以推荐图书给其他用户。所以,在首页中主要分三个板块——文章、图书、用户。另外,网站的头部和尾部还要有导航(navigator,固定在头部)和脚注(footer),而这些元素也是整个网站都要用到的,具体实现时可以把它们放在网站的布局模板中。

板块划分

文章板块——将最新、最热的文章以标签页(tabs)切换的方式放在该模块中,为了页面的美观,将有带有图片的文章放在轮换图片(caoursel)插件中,最右侧放置热门文章分类。样式如下图所示:

首页文章板块

图书板块--按照图书的分类将图书放在首页中,点击不同的分类切换到不同的选项卡,这部分采用自己用Jquery写的Tabs,并将其整合到BootStrap环境中。最右侧同样是图书的分类。效果图如下所示:

首页图书板块

用户板块——将新加入的用户和对社区贡献最多的用户放在首页中,效果图如下:

首页用户板块

要用到的BootStrap元素

布局页面导航条——这里要用到固定在网页头部的导航条,并在其中整合用户登录模块,代码如下:

    <div  role="navigation">       <div >         <div >          <a  href="首页URL">顶求网</a>          <a  href="图书页面URL">图书</a>          <a  href="文章页面URL">文章</a>        </div>        <div  >            <button type="button"  data-toggle="dropdown">              会员登陆 <span ></span>            </button>            <ul  role="menu">               <LI><a href="会员登陆页面URL"  target="_top">会员登陆</a></LI>               <LI><a href="会员注册页面URL"  target="_top">会员注册</a></LI>            </ul>        </div>    </div> </div>

文章板块需要用到的BootStrap元素
1.轮换图片插件(caoursel),解决了图片变形的问题。
2.标签页插件(tabs),美化了默认插件,并增加了定时滑动时间。
3.信息按钮(btn-info)插件,用于列出分类信息

图书板块需要用到的元素
1.自己用Jquery写的Tabs插件
2.自己写的分类标签

用户板块用到的BootStrap元素
1.BootStrap原生tabs
2.圆形图片(image_circle)

本文首发于顶求网,转载请注明来源