网站产品介绍2级页面结构布局设计.docVIP

产品2级网站布局设计 1、产品2级页面产品中心布局设计 页面布局：上、中、下三个部分，依次为header、content、footer。其中header、footer部分沿用自网站主体模块。 网页背景色调：天蓝色自上而下主渐变，以迎合主站的天蓝色背景色调。 页面主体部分居中宽度为960px； 网页主体content部分采用两列浮动的布局。网页使用流式布局的话即尺寸采用百分数而不是像素设置的。这样能够相对于浏览器窗口进行伸缩，例如主体使用960px，而大多数用户使用的浏览器窗口为1250px那么百分数就是（960/1250）*100%=76.8%。 页面顶部部分Head的布局 1、Header部分由三部分组成，分别由logo、hot-line、nav、banner部分组成。 第一部分有logo和hot-line组成。 第二部分由Navegatiom导航栏水平导航条。 第三部分是滚动图片bannner，能最大限度的在明显的位置滚动显示信息。 2、页面主体部分Content的布局 主体content部分布局为2列式布局分别由side-bar和main组成. 1、side-bar Side-bar位于content左边用于显示产品中心(product-center)部分,由产品中心和主目录的树形拉层叠式菜单(nav-right).如下图所示 Nav-right菜单显示主要用于显示客户类型,右弹出的菜单显示符合该类型用户适合使用以及可选择的产品. 这样设计最大限度的保证客户在相对容易理解的直接相关的行业,直观明了的知道适合自己使用的产品.不用浪费时间一一查看所有产品相关信息. 2、main· 该部分位于content内部的右侧，是展示产品的相关信息的展区。展示有左边的图片（W：210px；H：182px）和右边的文字介绍（w：380px；H：182；）组成。 该页面目录式的显示了产品中心的产品，介绍产品的相关信息。More按钮设置点击进入相关产品的详细内容介绍。 Footer页面底部部分的布局设计 Footer部分具体显示公司相关信息、联系方式、公司邮箱等等. 1、违章查询产品3级页面产品中心布局设计 产品3级页面产品中心布局 产品介绍部分的主体部分content的布局设计。 Header部分和footer部分沿用了2级也面的布局，在主体部分content的main层做相应的调整。 1、layout 具体的产品介绍采用页面的tab选项卡切换页面，最大限度的显示在一个页面显示最大的信息量，避免用户了解相关信息而拉动长长的页面导致用户产生反感。 Header Content footer Header Content Footer Banner Nav-right 教育机构 手机报系统 适用对象：详情 适用业务：详情