微网站的开发

微网站的开发没有固定的样式，大多数情况下，主要是根据客户的需求来实现相应的业务。

本章我们将讲解如何开发实现微网站。该微网站的需求主要是相关新闻动态及活动的发布、政策法规知识的宣传，以及常用生活知识技巧。我们先期使用静态网页来实现。要求读者具体一定的 HTML、CSS、JavaScript 的基础知识。

在手机和计算机站点上查看站点是有区别的。计算机站点屏幕大，可容纳信息多，访问速度快；而手机屏幕小、可容纳信息小，一般还使用手指进行点击。这就决定了手机网站文字图片不能做得太细，内容也不宜过多。

根据手机屏幕高大于宽的特点，网站首页采用「吕」形布局设计，上部分为横幅部分，下部分为导航栏目区，导航栏目又分为三栏，每栏并排 2 个图标。这样设计页面简洁、层次清晰，并能更好地突出主要内容，如图 5-2 所示。

图 5-2 首页布局

横幅部分使用幻灯轮播的方式，宣传口号，这样可以吸引访问者的注意，加强宣传效果。

其中导航栏目中主要有以下功能：

1）关于我们：用于介绍单位内部的组织架构等信息。

2）最新动态：提供最新的新闻、活动等信息内容的发布。

3）政策法规：公布最新的政策法规资料等信息。

4）安全常识：提供生产生活常用的安全知识。

5）官方微博：链接到腾讯微博，查看最新发布的动态信息。

6）社区留言：链接到微社区中，提供和网友的互动功能。

我们把横幅内容放到一个盒子之中，其中定义一个宽度为 3 倍图片宽度的列表，用来存放 3 张用于展示横幅的图片，并将 3 张图片设置为表格单元格元素，用于特效中的滑动。代码如下所示：

<div style="-webkit-transform:translate3d(0,0,0);"> <div id="banner_box" class="box_swipe" style="visibility: visible; "> <ul style="list-style-type: none; list-style-position: initial;list-style-image: initial; width: 1920px; -webkit-transition-duration:500ms; -webkit-transform: translate3d(0px, 0px, 0px); "> <li style="width: 640px; display: table-cell; vertical-align: top; "> <a onclick="return false;"> <img src="img/banner3.jpg" alt="" style="width:100%;"> </a> </li> <li style="width: 640px; display: table-cell; vertical-align: top; "> <a onclick="return false;"> <img src="img/banner2.jpg" alt="" style="width:100%;"> </a> </li> <li style="width: 640px; display: table-cell; vertical-align: top; "> <a onclick="return false;"> <img src="img/banner1.jpg" alt="" style="width:100%;"> </a> </li> </ul> <ol> <li class="on"></li> <li class=""></li> <li class=""></li> </ol> </div> </div>

为了同一时刻只显示一张图片，需要将其他部分的单元格图片隐藏起来，同时对所有的元素都做出相应的处理，横幅盒子的样式控制代码如下：

.box_swipe{ overflow:hidden; position:relative; } .box_swipe ul{ -webkit-padding-start: 0px; } .box_swipe>ol{ height:20px; position: relative; z-index:10; margin-top:-25px; text-align:right; padding-right:15px; background-color:rgba(0,0,0,0.3); } .box_swipe>ol>li{ display:inline-block; margin:5px 0; width:8px; height:8px; background-color:#757575; -radius: 8px; } .box_swipe>ol>li.on{ background-color:#ffffff; }

而导航栏目区列表则存放 6 个内容项，每个内容项都包括链接、图片及文字说明，相应的代码如下：

<ul class=「list_ul」> <li> <a href=「aboutus.html」> <figure> <div> <img src=「img/11f296bbc0f83cbde8c02784bc3c73fa.gif」> </div> <figcaption> 关于我们 </figcaption> </figure> </a> </li> <li> <a href=「latest.html」> <figure> <div> <img src=「img/908746f5f33374115b975b7a515781bd.png」> </div> <figcaption> 最新动态 </figcaption> </figure> </a> </li> <li> <a href=「laws.html」> <figure> <div> <img src=「img/34c38e577f5e7787337fea161a0d761a.jpg」> </div> <figcaption> 政策法规 </figcaption> </figure> </a> </li> <li> <a href=「safe.html」> <figure> <div> <img src=「img/f47eabd4255e84ab792d5fe5f8e86698.jpg」> </div> <figcaption> 安全常识 </figcaption> </figure> </a> </li> <li> <a href=「http://t.qq.com/doucube」> <figure> <div> <img src=「img/f93306140828edaa5f825d7cd2f09f0f.jpg」> </div> <figcaption> 官方微博 </figcaption> </figure> </a> </li> <li> <a href=「http://wx.wsq.qq.com/182998484」> <figure> <div> <img src=「img/991df18911fce16072ac94e206b89bea.jpg」> </div> <figcaption> 社区留言 </figcaption> </figure> </a> </li> </ul>

每个元素占用 50% 的宽度，这样就形成一排两列的效果，最终所有项一共组成 3 排。相应的样式控制代码如下所示。

.list_ul{ margin:10px 5px; overflow:hidden; } .list_ul a{ color:#666; display:block; background:#fff; :1px solid #efefef; -radius:8px; -webkit-box-shadow:1px 2px 1px rgba(0,0,0,0.3); padding:10px 0; margin:5px; } .list_ul figcaption{ line-height: 30px; } .list_ul figure>div{ height:60px; overflow:hidden; } .list_ul li{ display:inline-block; width:50%; float:left; text-align:center; -webkit-box-sizing:-box; } .list_ul li img{ max-width:52px; max-height:63px; }

上述代码的最终实现效果就是一个首页，如图 5-2 所示。

为了让横幅中的图片以滑动的形式展示出来，需要用到 Swipe JS 组件。

Swipe JS 是一个轻量级的移动滑动组件，支持 1:1 的移动碰触等特性，可以让移动 Web 应用展现更多的内容，能解决很多移动 Web 对滑动的需求。其官方网站为 http://swipejs.com/。

为了让图片能够滑动，需要将横幅容器传递到 Swipe 函数中，同时设置相应的参数以控制滑动效果。Swipe 提供如下参数设置：

□startSlide：滑动的索引值，即从*值开始滑动，默认值为 0

□speed：滑动的速度，默认值 300 毫秒

□auto：自动滑动，单位为毫秒

□continuous：是否循环滑动，默认值为 true

□disableScroll：是否允许触摸时滚动屏幕，默认值 false

□stopPropagation：停止事件传播，默认值 false

□callback：回调函数

□transitionEnd：滑动过渡时调用的函数

对于横幅中的图片列表，其滑动控制代码如下：

<script> $(function(){ new Swipe(document.getElementById('banner_box'), { speed:500, auto:3000, callback: function(){ var lis = $(this.element).next("ol").children(); lis.removeClass("on").eq(this.index).addClass("on"); } }); }); </script>

在上述代码中，将 ID 为「banner_box」的元素所包含的图片作为滑动对象，并且定义滑动速度为 500 毫秒，滑动间隔时间为 3000 毫秒，即每 3 秒钟换一张图片，每次换图时间为半秒钟，这样就现实了幻灯的效果。

横幅中的图片滑动效果如图 5-3 所示，右图是第一张滑动切换到第二张时的效果。

图 5-3 图片滑动效果

栏目相当于一个目录，集中了所有详细内容的名称，便于访问者快速浏览详细内容的概要。同时，对于上下相邻的两个栏目，通过其编号的奇偶性不同来设置不同的背景色。

对于每个内容，我们使用二级标题的形式来展示，大标题是文章的标题，使用粗体显示，小标题是副标题，不使用粗体。

栏目页使用列表的方式将法律法规、新闻活动信息等相同的内容列出，同时每个内容元素带上 a 链接，以便用户点击时可以访问详细内容。其实现代码如下：

<ul class=「list_ul」> <li> <a href=「news02.html」 class=「tbox」> <dt> <hgroup> <h1> 落实群教实践活动，积极开展打非行动 </h1> <h2> 区安监局直管科坚持群众路线教育实践活动，创新安全监管模式 </h2> </hgroup> </dt> </a> </li> <li> <a href=「news15.html」 class=「tbox」> <dd> <div><img src=「img/15image002.jpg」></div> </dd> <dt> <hgroup> <h1> 省安全生产示范县命名授牌暨市最佳安监人员命名仪式举行 </h1> <h2> 正值全国安全生产月活动如火如荼开展的重要时刻，6 月 16 日上午，在 </h2> </hgroup> </dt> </a> </li> </ul>

相应的样式控制代码如下所示：

.list_ul li{ overflow:hidden; background:#f2f3f7; } .list_ul li:nth-of-type(2n){ background:#e5e8ef; } .list_ul li:nth-of-type(2n) dd>div:before{ background:#e5e8ef; } .list_ul li a{display:block;} .list_ul li a>*{ color:#707070; height:60px; vertical-align: middle; } .list_ul li dd div{ position:relative; width:100px; height:60px; overflow:hidden; text-align:center; } .list_ul li dd img{ width:100%; min-height:100%; } .list_ul li hgroup>*{ text-indent:10px; line-height:20px; font-size:14px; font-weight:100; overflow: hidden; height: 20px; padding-right: 10px; } .list_ul li hgroup>h2{ font-size:12px; color:#909090; }

法律法规及最新动态的两个栏目的最终实现效果如图 5-4 所示。

图 5-4 栏目页效果

内容页面的设计主要包括两种形式，一种是生活类的内容介绍页面，另一种是新闻类的内容介绍页面。两种介绍均以图文并茂的形式展示。生活类的页面搭配相应场景的图片，而新闻类的页面则搭配新闻现场的图片介绍。内容页最终是一个图文形式的展示页。

生活类的页面核心代码实现如下：

<div class=「banner」> <img src=「img/anquanchangshi.jpg」> </div> <div class=「cardexplain」> <ul class=「round」> <li> <h2> 防地震须知 </h2> <div class=「text」> （1）保持镇定，切勿离开处身地方。<br> （2）躲在桌子或坚固结构物下寻求掩护。<br> （3）远离窗户、玻璃隔板、架或有悬挂物件处。<br> （4）地震时不要躲在楼梯底下。<br> （5）准备应付更多次余震。<br> （6）如您的房屋受到损坏，请立即通知管理处。<br> （7）切勿散播谣言或夸大的报告。 </div> </li> </ul> </div>

新闻类的页面核心代码实现如下：

<section class=「news_article」> <header> <h3> 区安监局开展以「防治职业病，职业要健康」为主题的《职业病防治法》宣传活动 </h3> <small class=「gray」>2014.04.28</small> </header> <article> <p>&nbsp； &nbsp； &nbsp； &nbsp；区安全监管局在《职业病防治法》宣传周活动期间，以推进职业卫生基础建设和职业卫生管理示范企业创建为契机，突出以「防治职业病，职业要健康」为主题，开展了形式多样宣传活动。针对辖区粉尘职业危害较严重的情况，把尘肺病防治作为宣传重点，工作人员深入粉尘、有机溶剂危害较严重的机械加工、家具制作等企业，开展有针对性的宣传，切实维护劳动者的健康权益。活动期间，区安全监管局联合经开区安监局安排工作人员 48 人次，深入园区企业进行宣传。共印制了宣传横幅 15 条、宣传展板 40 块、职业卫生告知牌 3000 块、宣传单 10000 余份、答疑解惑 120 余人次。<br></p> <p style=「text-align:center；」> <img src=「img/5image008.jpg」 alt=「」> </p> <p>&nbsp； &nbsp； &nbsp； &nbsp；&nbsp；本次宣传活动得到了湖南省职业病防治院的大力支持，红网和湖南安全与防灾杂志社的记者也到现场进行了宣传采访。 </p> </article> </section>

可以看出，这些页面的实现方式其实比较简单，内容页的实现效果如图 5-5 所示。

图 5-5 内容页实现效果

如果要实现内容在后台的发布，一般需要用到框架，例如 ThinkPHP，用于文章的保存及管理；同时还需要一个编辑器，例如百度 UEditor，用于编辑文章。

除了自己开发的页面之外，我们还可以接入两个有代表性并和微信兼容非常好的第三方应用，分别是腾讯微博和微社区。这两个应用可以让使用户在微网站上参与沟通互动，让用户有机会发表他们的意见建议，帮助改进服务。

腾讯微博的申请地址是 http://t.qq.com/。申请了腾讯微博之后，运营者可以发布新的动态信息，用户可以评论、转发内容。

微社区的申请地址是 http://wsq.qq.com/。用户可以在微社区中发帖和进行回复。与微博不同的是，在微社区中，用户不仅能接收信息，还能创造信息。

申请腾讯微博后，将直接获得个人的微博地址，如方倍工作室的腾讯微博地址为 http://t.qq.com/doucube。而申请微社区之后，也会分配一个链接地址，如方倍微社区的链接地址为 http://wx.wsq.qq.com/182998484。将上述地址填入链接后，在微信中打开微博和微社区的效果如图 5-6 所示。

图 5-6 腾讯微博和微社区