当前位置： >
网站构成的基本元素―网页布局
网页可以说是网站构成的基本元素。当我们轻点鼠标，在网海中遨游，一幅幅精彩的网页会呈现在我们面前，那么，网页的精彩与否的因素是什么呢？色彩的 搭配、文字的变化、图片的处理等，这些当然是不可忽略的因素，除了这些，还有一个非常重要的因素&&网页的布局。下面，我们就有关网页布局谈论一下。
网页布局类型
网页布局大致可分为&国&字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型，下面分别论述。
&国&字型：也可以称为&同&字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内 容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多是最多的一种结构类型。
2. 拐角型：这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。
3. 标题正文型：这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。
4. 左右框架型：这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。
5. 上下框架型：与上面类似，区别仅仅在于是一种上下分为两页的框架。
6. 综合框架型：上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于&拐角型&结构的，只是采用了框架结构。
封面型：这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个&进入&的链接甚至直接在 首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。
8. Flash型：其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。
9. 变化型：即上面几种类型的结合与变化，比如本站在视觉上是很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。
关于第一屏
所谓第一屏，是指我们到达一个网站在不拖动滚动条时能够看到的部分。那么第一屏有多&大&呢？其实这是未知的。一般来讲，在 800&600的屏幕显示模式(这也是最常用的)下，在IE安装后默认的状态(即工具栏地址栏等没有改变)下，IE窗口内能看到的部分为 778px&435px，一般来讲，我们以这个大小为标准就行了，毕竟，在无法适合所有人的情况下，我们只能为大多数考虑了。
说了那么多，无非是一个标准的问题，其实接下来不用我说大家也能想到，第一屏当然要放最主要的内容，关键要知道的是，我们要对第一屏能显示的面积要有个估计，而不要仅仅以自己的机器为准。其实网页制作的一个很麻烦的地方就是浏览者的机器是未知的。
有关导航栏的位置
导航栏能让我们在浏览时容易的到达不同的页面，是网页元素非常重要的部分，所以导航栏一定要清晰、醒目，一般来讲，导航栏要在&第一 屏&能显示出来，但是有时第一屏可能会小于上面所说的435px，基于这点考虑，那种横向放置的导航栏要优于纵向的导航栏考虑，原因很简单：如果浏览者的 第一屏很矮，横向的仍能全部看到，而纵向的就很难说了，因为窗口的宽度一般是不会受浏览器设置影响的，而纵向的则不确定性要大的多。
什么样的布局是最好的
这是初学者可能会问的问题。其实这要具体情况具体分析的：比如如果内容非常多，就要考虑用&国字型&或拐角型；而如果内容不算太多而一 些说明性的东西比较多，则可以考虑标题正文型；那几种框架结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活；而如果是一个企业网站想展示一下企 业形象或个人主页想展示个人风采，封面性是首选；Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。还没有提到的就 是变化型了，我只是想把这个留给各位朋友了，因为，只有不断的变化才会提高，才会不断丰富我们的网页！
, All Rights Reserved.流行的网站布局方式有哪些-筑龙博客
这家伙没有什么简介。
这家伙什么标签都没有呢。
流行的网站布局方式有哪些
在网站开发过程中，具体采取什么形式的布局方式还是要根据客户的目标网站定位来决定。一般来说，遵循以下几个原则：醒目--使用户把注意力集中到某网站并诱导其浏览内容，下面具体分析分析。1、国字型网站布局大型网站一般喜欢就是国字型的网站布局，即网站最上面是网站的标题和横幅广告条，接下来是网站的主要内容，左右分列几个版块的内容，中间为网站的主要内容，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这样的国字型网站布局也是我们在网站上看到最多的一种结构类型。2、匡字型网站布局匡字型网站布局和国字型网站布局的最大区别就是最右侧是否封口。上面是网站的标题及横幅广告，接下来左侧是一列是网站链接，右侧是很宽的网站正文，下面也是一些网站的辅助信息。3、左右框架型网站布局左右框架型网站布局，一边是左面的导航链接、一边是右面的正文。网站的最上方一般是网站的标题或标志。大部分论坛或一部分企业网站喜欢采用，结构清晰一目了然。4、上下框架型网站布局和左右框架型网站布局类似，区别仅仅在于一种上下分为两页的框架。5、自由布局型网站这样的网站布局方式一般不拘泥于一般的基本结构，通常是多种结构的混合体，这样的网站布局一般多用于个人网站。网站布局方式有很多，只要适应网站发展需要，就是好的网站布局。如果对我们感兴趣，联系我们021-原文来源：&&
nfufufuu1的最新博文
分享到微信朋友圈
打开微信"扫一扫"，扫描上方二维码请点击右上角按钮&，选择&
同时发布一条微博
$(".zhul_sy_rightBox").popupbox({geturl:ucenterDomain+"openjson/getpopupbox",format:"bigright",cssClass:"zhul_info_rightbox",waithtml:' '});
$().zlidol({geturl:weiboDomain+"userinfo/jsonidol?action=idol"})
})(jQuery);大型网站架构是一个系列文档，欢迎大家关注。本次分享主题：电商网站架构案例。从电商网站的需求，到单机架构，逐步演变为常用的，可供参考的分布式架构的原型。除具备功能需求外，还具备一定的高性能，高可用，可伸缩，可扩展等非功能质量需求（架构目标）。
根据实际需要，进行改造，扩展，支持千万PV，是没问题的。
本次分享大纲
电商案例的原因
电商网站需求
网站初级架构
系统容量估算
网站架构分析
网站架构优化
电商网站案例，一共有三篇本篇主要说明网站的需求，网站初始架构，系统容量估算方法。
一、电商案例的原因
分布式大型网站，目前看主要有几类1.大型门户，比如网易，新浪等；2.SNS网站，比如校内，开心网等；3.电商网站：比如阿里巴巴，京东商城，国美在线，汽车之家等。大型门户一般是新闻类信息，可以使用CDN，静态化等方式优化，开心网等交互性比较多，可能会引入更多的NOSQL，分布式缓存，使用高性能的通信框架等。电商网站具备以上两类的特点，比如产品详情可以采用CDN，静态化，交互性高的需要采用NOSQL等技术。因此，我们采用电商网站作为案例，进行分析。
二、电商网站需求
客户需求：
建立一个全品类的电子商务网站（B2C），用户可以在线购买商品，可以在线支付，也可以货到付款；
用户购买时可以在线与客服沟通；
用户收到商品后，可以给商品打分，评价；
目前有成熟的进销存系统；需要与网站对接；
希望能够支持3~5年，业务的发展；
预计3~5年用户数达到1000万；
定期举办双11，双12,三八男人节等活动；
其他的功能参考京东或国美在线等网站。
客户就是客户，不会告诉你具体要什么，只会告诉你他想要什么，我们很多时候要引导，挖掘客户的需求。好在提供了明确的参考网站。因此，下一步要进行大量的分析，结合行业，以及参考网站，给客户提供方案。
其他的略~~~~~
需求功能矩阵
需求管理传统的做法，会使用用例图或模块图（需求列表）进行需求的描述。这样做常常忽视掉一个很重要的需求（非功能需求），因此推荐大家使用需求功能矩阵，进行需求描述。
本电商网站的需求矩阵如下：
非功能需求
全品类的电子商务网站
分类管理，商品管理
方便进行多品类管理（灵活性）网站访问速度要快（高性能）图片存储的要求（海量小图片）
用户可以在线购买商品
会员管理，购物车，结算功能
良好购物体验（可用性，性能）
在线支付或货到付款
多种在线支付方式
支付过程要安全，数据加密（安全性）多种支付接口灵活切换（灵活性，扩展性）
可以在线与客服沟通
在线客服功能
可靠性：即时通讯
商品打分评价
目前有成熟的进销存系统
对接进销存
属于约束条件对接时要考虑数据一致性，鲁棒性
支持3~5年，业务的发展
属于约束条件伸缩性，可扩展性
3~5年用户数达到1000万
举办双11，双12,三八男人节等活动
活动管理，秒杀
突增访问流量（可伸缩）实时性要求（高性能）
参考京东或国美在线
以上是对电商网站需求的简单举例，目的是说明（1）需求分析的时候，要全面，大型分布式系统重点考虑非功能需求；（2）描述一个简单的电商需求场景，使大家对下一步的分析设计有个依据。
三、网站初级架构
一般网站，刚开始的做法，是三台服务器，一台部署应用，一台部署数据库，一台部署NFS文件系统。
这是前几年比较传统的做法，之前见到一个网站10万多会员，垂直服装设计门户，N多图片。使用了一台服务器部署了应用，数据库以及图片存储。出现了很多性能问题。
但是，目前主流的网站架构已经发生了翻天覆地的变化。一般都会采用集群的方式，进行高可用设计。至少是下面这个样子。
使用集群对应用服务器进行冗余，实现高可用；（设备可与应用一块部署）
使用数据库主备模式，实现数据备份和高可用；
四、系统容量预估
预估步骤：
注册用户数-日均UV量-每日的PV量-每天的并发量；
峰值预估：平常量的2~3倍；
根据并发量（并发，事务数），存储容量计算系统容量。
客户需求：3~5年用户数达到1000万注册用户；
每秒并发数预估：
每天的UV为200万（二八原则）；
每日每天点击浏览30次；
PV量：200*30=6000万；
集中访问量：24*0.2=4.8小时会有6000万*0.8=4800万（二八原则）；
每分并发量：4.8*60=288分钟，每分钟访问.7万（约等于）；
每秒并发量：16.7万/60=2780（约等于）；
假设：高峰期为平常值的三倍，则每秒的并发数可以达到8340次。
1毫秒=1.3次访问；
没好好学数学后悔了吧？！（不知道以上算是否有错误，呵呵~~）
服务器预估：（以tomcat服务器举例）
按一台web服务器，支持每秒300个并发计算。平常需要10台服务器（约等于）；[tomcat默认配置是150]
高峰期：需要30台服务器；
容量预估：70/90原则
系统CPU一般维持在70%左右的水平，高峰期达到90%的水平，是不浪费资源，并比较稳定的。内存，IO类似。
以上预估仅供参考，因为服务器配置，业务逻辑复杂度等都有影响。在此CPU，硬盘，网络等不再进行评估。
五、网站架构分析
根据以上预估，有几个问题：
需要部署大量的服务器，高峰期计算，可能要部署30台Web服务器。并且这三十台服务器，只有秒杀，活动时才会用到，存在大量的浪费。
所有的应用部署在同一台服务器，应用之间耦合严重。需要进行垂直切分和水平切分。
大量应用存在冗余代码
服务器SESSION同步耗费大量内存和网络带宽
数据需要频繁访问数据库，数据库访问压力巨大。
大型网站一般需要做以下架构优化（优化是架构设计时，就要考虑的，一般从架构/代码级别解决，调优主要是简单参数的调整，比如JVM调优；如果调优涉及大量代码改造，就不是调优了，属于重构）：
应用集群部署（分布式部署，集群部署和负载均衡）
单点登录（分布式Session）
数据库集群（读写分离，分库分表）
六、网站架构优化
6.1业务拆分
根据业务属性进行垂直切分，划分为产品子系统，购物子系统，支付子系统，评论子系统，客服子系统，接口子系统（对接如进销存，短信等外部系统）。
根据业务子系统进行等级定义，可分为核心系统和非核心系统。核心系统：产品子系统，购物子系统，支付子系统；非核心：评论子系统，客服子系统，接口子系统。
业务拆分作用：提升为子系统可由专门的团队和部门负责，专业的人做专业的事，解决模块之间耦合以及扩展性问题；每个子系统单独部署，避免集中部署导致一个应用挂了，全部应用不可用的问题。
等级定义作用：用于流量突发时，对关键应用进行保护，实现优雅降级；保护关键应用不受到影响。
拆分后的架构图：
参考部署方案2
如上图每个应用单独部署
核心系统和非核心系统组合部署
6.2应用集群部署（分布式，集群，负载均衡）
分布式部署：将业务拆分后的应用单独部署，应用直接通过RPC进行远程通信；
集群部署：电商网站的高可用要求，每个应用至少部署两台服务器进行集群部署；
负载均衡：是高可用系统必须的，一般应用通过负载均衡实现高可用，分布式服务通过内置的负载均衡实现高可用，关系型数据库通过主备方式实现高可用。
集群部署后架构图：
6.3 多级缓存
缓存按照存放的位置一般可分为两类本地缓存和分布式缓存。本案例采用二级缓存的方式，进行缓存的设计。一级缓存为本地缓存，二级缓存为分布式缓存。（还有页面缓存，片段缓存等，那是更细粒度的划分）
一级缓存，缓存数据字典，和常用热点数据等基本不可变/有规则变化的信息，二级缓存缓存需要的所有缓存。当一级缓存过期或不可用时，访问二级缓存的数据。如果二级缓存也没有，则访问数据库。
缓存的比例，一般1:4，即可考虑使用缓存。（理论上是1:2即可）。
根据业务特性可使用以下缓存过期策略：
缓存自动过期；
缓存触发过期；
6.4单点登录（分布式Session）
系统分割为多个子系统，独立部署后，不可避免的会遇到会话管理的问题。一般可采用Session同步，Cookies，分布式Session方式。电商网站一般采用分布式Session实现。
再进一步可以根据分布式Session，建立完善的单点登录或账户管理系统。
用户第一次登录时，将会话信息（用户Id和用户信息），比如以用户Id为Key，写入分布式Session；
用户再次登录时，获取分布式Session，是否有会话信息，如果没有则调到登录页；
一般采用Cache中间件实现，建议使用Redis，因此它有持久化功能，方便分布式Session宕机后，可以从持久化存储中加载会话信息；
存入会话时，可以设置会话保持的时间，比如15分钟，超过后自动超时；
结合Cache中间件，实现的分布式Session，可以很好的模拟Session会话。
6.5数据库集群（读写分离，分库分表）
大型网站需要存储海量的数据，为达到海量数据存储，高可用，高性能一般采用冗余的方式进行系统设计。一般有两种方式读写分离和分库分表。
读写分离：一般解决读比例远大于写比例的场景，可采用一主一备，一主多备或多主多备方式。
本案例在业务拆分的基础上，结合分库分表和读写分离。如下图：
业务拆分后：每个子系统需要单独的库；
如果单独的库太大，可以根据业务特性，进行再次分库，比如商品分类库，产品库；
分库后，如果表中有数据量很大的，则进行分表，一般可以按照Id，时间等进行分表；（高级的用法是一致性Hash）
在分库，分表的基础上，进行读写分离；
相关中间件可参考Cobar（阿里，目前已不在维护），TDDL（阿里），Atlas（奇虎360），MyCat（在Cobar基础上，国内很多牛人，号称国内第一开源项目）。
分库分表后序列的问题，JOIN，事务的问题，会在分库分表主题分享中，介绍。
将多个子系统公用的功能/模块，进行抽取，作为公用服务使用。比如本案例的会员子系统就可以抽取为公用的服务。
6.7消息队列
消息队列可以解决子系统/模块之间的耦合，实现异步，高可用，高性能的系统。是分布式系统的标准配置。本案例中，消息队列主要应用在购物，配送环节。
用户下单后，写入消息队列，后直接返回客户端；
库存子系统：读取消息队列信息，完成减库存；
配送子系统：读取消息队列信息，进行配送；
目前使用较多的MQ有Active MQ,Rabbit MQ,Zero MQ，MS MQ等，需要根据具体的业务场景进行选择。建议可以研究下Rabbit MQ。
6.8其他架构（技术）
除了以上介绍的业务拆分，应用集群，多级缓存，单点登录，数据库集群，服务化，消息队列外。还有CDN，反向代理，分布式文件系统，大数据处理等系统。
此处不详细介绍，大家可以问度娘/Google，有机会的话也可以分享给大家。
七、架构总结
以上是本次分享的架构总结，其中细节可参考前面分享的内容。其中还有很多可以优化和细化的地方，因为是案例分享，主要针对重要部分做了介绍，工作中需要大家根据具体的业务场景进行架构设计。
在文章中找不到问题答案？您还可以
热门栏目订阅 上传我的文档
 下载
 收藏
该文档贡献者很忙，什么也没留下。
 下载此文档
正在努力加载中...
网站架构基本简介
下载积分：2000
内容提示：网站架构基本简介
文档格式：DOC|
浏览次数：68|
上传日期： 18:38:18|
文档星级：
该用户还上传了这些文档
网站架构基本简介
官方公共微信