HTML5课程类微信公众号设计(8)
图4-3： 原文链接的设置
添加好原文链接，保存并发布，这样当你点击这条消息的时候，就会有“阅读全文”的字样，点击它就会翻转到该链接指向的网页。当然，还可以选择另外一种方式，那就是启用服务器配置[15]。在开发一栏中，选择基本配置，就出现服务器配置的页面。服务器配置如图4-4所示。
图4-4： 服务器配置
填写好服务器URL、Token令牌、消息加密密钥，选择消息加密解密的方式，点击启用，就可以启用服务器。需要注意的是，这两种方式是冲突的，只能选择其中的一种。本课题因为成本的原因，选择前一种方式。
4。2 前台页面设计
搭建好平台后，接下来就是前台页面设计，前台页面是供学生使用的。学生在前台进行课程概要学习、观看教学视频、问题交流等。本课题页面设计包括主页模块设计、课程概要模块设计、本书作者模块设计、教学视频模块设计、作业下载模块设计、问题交流模块设计和联系我们模块设计。
4。2。1 首页模块设计
主页是一个网站的导航页，在主页上可以链接到别的网页上。首先，要设置好全局样式，将页面设置为HTML5文档类型。本课题采用了Bootstrap框架进行开发。项目中的每个页面都要按照下面的格式进行设置。
<!DOCTYPE html>
<html lang="zh-CN">
。。。
</html>
lang=”zh-CN”表示网页的字符集为中文简体。Bootstrap框架是移动设备优先，所以网页要设置为能够触屏缩放。为了能够适当绘制和触屏缩放，需要在<head>之中添加viewport元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1">
“width=device-width”表示网页的宽度为设备的宽度，这样就可以在移动端缩放。intial-scale表示页面首次被显示是可视区域的缩放级别，取值为1表示按实际尺寸显示，无任何缩放。
如果想要引用某个CSS文件和JS文件，可以按照下面的格式来引用。
<link href="css/bootstrap。css" rel="stylesheet"/>
<script type="javascript" src="js/bootstrap。js"></script>
引入文件后，你就可以调用文件内的样式和方法。一般，把字体，颜色，图像等画面样式的处理由CSS统一编辑，在HTML文件里调用就可以了。Bootstrap是将全局 font-size 设置为14px，line-height 设置为1。428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。所有网页上的共性内容，比如背景，可以写在一个文件里，这样避免了代码的重复编写，利于修改。对于个别网页的样式要求，可以直接写在HTML文件中，一般写在<head>标签内。
处理好样式后，你就可以处理页面布局了。页面布局可以用Dreamweaver工具进行设计。首先，一个网站需要先设计好首页的布局，首页的布局直接影响整个网站的设计，首页相当于网站的“脸面”，所以，首页的布局非常重要。本毕业设计的首页页面布局如图4-5所示。
图4-5： 首页页面
首先，设置标题，HTML支持<h1>到<h6>的标题标签，可以设置一到六级标题。本课题以“操作系统”为例设计的课程网站，所以标题设为“操作系统”，选用的是<h1>的标题标签。设置好标题后，设置导航栏，导航栏使用<ul>标签和<li>标签。具体代码，如下：
<ul class="nav nav-pills nav-stacked">