很多人把HTML5技术捧得太高，高到对自己动手做HTML5网站丧失了自信，也不愿意相信如今的建站黑科技。做一个小小的企业网站还要和网络公司商讨十天半月，其实用这点时间，你可以做十个企业响应式网站。' ]2 A! J: U5 N& M( O+ W7 _
. {( a& g0 N6 X0 y2 Q9 ?
下面以信息类的企业官网为例，给大家讲讲HTML5响应式建站的黑科技。笔者用的是建站宝盒V9，主要针对的是不懂技术的建站人群。先安装一套响应式模板：- x: Z1 A: K/ Q8 U4 `2 `
' R9 q- W+ D/ Y( z, j
( \/ w N6 _+ I, E1 p$ L6 i; r7 |+ V1 H( W( o8 @
考虑到大家做网站的习惯，先从首页开始讲起。宝盒采取的是流布局+自由布局模式，所以打开界面后可以看到一栏一栏的编辑框，框内有多种模块结合。首先是顶部，通常放的是企业的logo和导航栏，可以在系统设置中开启共享头部，这样网站的每个页面都能看到这个模块中的内容。模块都是直接添加，想更省事可以直接修改模板网站的图片。
2 k e0 U8 U0 ^
. N* q- B3 k/ D" c5 E
" Z4 b, Q$ h5 X; f+ l: e5 F7 Q
0 v9 o) t) m3 b. |6 {: J
. Q% S8 P8 H" ], U' y
8 ~( L6 }5 q. O: W, T' a% T2 P$ E接下来是网站banner，宝盒提供十款以上的轮播样式，同样为拖拽添加，直接上传企业处理后的轮播图。注意：轮播图一定程度决定网站颜值，图片像素不能太低。, X# f& \' a5 K+ X, x
% Q/ z" |3 ?% n% l0 X. u6 m* ^. [6 v
8 v& a# S, _- O9 W% z+ ?/ ]. X7 ?9 j
6 D: p9 f, C6 j+ F
网站首页通常会系统介绍公司的产品和服务、新闻等，所以接下来的模块就要重点放这些内容。
' B Q2 Q" u+ a* X" k5 d! y' ^
: c0 t3 D4 X/ C+ k5 W
0 J$ f" {; M) X; [/ t* b7 i
1 H0 e( z& i% {8 i6 ~4 t; J l比如产品，这样的效果是有容器模块+图片+文字模块组合而成的。很多人说响应式很难调试，其实是不擅于使用容器模块。容器模块属于一个区域板块，里面可以再添加其他模块，但只要在一个容器中的内容，之后切换到移动端就会集中显示，避免错乱。
0 W, k; T$ V B( y" T k6 N4 i# P1 R
q: W6 N+ V+ |2 @
5 q+ q) f0 n( g8 R/ k4 ~
, q( S* n4 w$ ~) O
# t7 }7 X5 O( B4 j5 T: h # `! a" Y) l: C
+ V7 r1 \6 T, F+ t4 A y
切换到手机效果，从左到右的布局自动调整为从上而下。
# ]. l' ?/ [( M- _) k; c% b* M1 I5 N4 m+ [; n9 P. e5 Q
) b0 j; q4 b4 i7 F# ~# ~; n4 B; ^( e& C0 C& \' h5 A
 . Q) [6 B; X8 A' |& H) U
* D8 k! W0 W5 [. @# b4 N* D' Y
之后是新闻模块，也是在新的区域模块中添加，直接添加一个新闻模块，进入属性框的新闻管理添加内容，显示效果如图：
) @- X' F+ `% ]0 v4 c( i
2 ]0 {- p+ Y+ T0 N ~2 b , ?$ m% o4 { h6 p* U
* N; y* @8 I1 N d9 I( Y
部分企业需要在网站的底部添加合作伙伴，添加方法是直接添加图片，在属性中设置动画效果，拖拽到合适的位置即可。
6 p2 c' j$ z, K# ]+ t# M- C
) r2 |0 H1 ` D0 `
$ L3 R6 v+ O7 O: a/ p
9 e: q2 h+ P j' h6 K8 C4 x, B之后就是网站底部了，通常会放置二维码，联系方式等，也是在容器模块中加入不同模块组合。 R- K) u7 k6 g$ h
! A) B) r" K' d& G/ j
/ n; s* B( j2 v
' Q/ p) O! c/ F% j+ l# J首页完成后即可修改其他页面，要切换到其他页面，在顶部导航栏中直接进入即可，设置方法大同小异。
: G5 r' u( Y& l8 J2 n! A/ m* y* k. G+ x' h/ z7 X5 B
 7 V% f/ \+ I& j' x6 P( o% r0 y
9 e3 T8 \# S8 i% p6 E
大家比较担心的还是手机站错乱的问题，除了在制作网站的时候时刻留意手机站的展现效果，及时调整外，推荐大家适当地显示和隐藏模块，一些不必要的模块隐藏起来更有利于手机站的排版和整体显示效果。
5 a8 _- t S1 e) @2 u, j! A- ?) {. D" G/ |7 a
8 G7 i) U. Y& j8 i7 s3 h9 ~6 |* J$ f
& f9 `+ `4 _# ^9 r% b网站做好后，直接预览效果即可。网站上传发布后，复制提条网址到不同终端，即可看到不同布局的展现效果。这就是传说中高大上的HTML5响应式网站，做起来也没有大家想象中那么困难对不对？6 N7 x0 u' T5 P0 Q @$ Y1 b
 $ W: q4 N+ |! y. P
( f; X- u8 P: I6 r! J还有一个收录问题，HTML5本身对搜索引擎是友好的，只要合理设置关键字，大家很容易就能在搜索引擎找到你了。希望上面的内容对大家做企业网站有所帮助。
( U @) @# B2 I5 y' M' G vHTML5响应式网站建设：iisp.com/special/v9special/index.php?S=ashley
5 b. n( i& \) l4 b; I# a0 g5 C9 f |
本人严正声明：此帖在全世界只有一个沙发。沙发两边的扶手同属于一个沙发。任何企图想制造两个或两个以上沙发的行为都必将遭到包括本人在内的全世界人民的反对和强烈谴责!
