图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">

上一篇:jsp网络考试题库和组卷管理系统的设计
下一篇:JSP教师学生教学互动系统设计+ER图

asp.net+sqlserver信息安全技术...

Android课程同步练习系统的设计

Html5+css3+js电瓶车企业移动办公系统设计

HTML5云平台的移动学习系统-移动端设计

jsp网上课程学习成绩信息分析系统的设计

HTML5设备运行可视化仿真在网页中的发布

java+mysql操作系统原理课程题库系统的设计

新課改下小學语文洧效阅...

LiMn1-xFexPO4正极材料合成及充放电性能研究

互联网教育”变革路径研究进展【7972字】

张洁小说《无字》中的女性意识

安康汉江网讯

老年2型糖尿病患者运动疗...

网络语言“XX体”研究

我国风险投资的发展现状问题及对策分析

ASP.net+sqlserver企业设备管理系统设计与开发

麦秸秆还田和沼液灌溉对...