英文学习网站前端构建分析

1、 弁言

越来越多网络英语学习者出现, 慢慢形成了拥有浩繁学习用户的学习网站, 它们以本身独特的上风, 吸引着越来越多的英语学习者投入到这种新型的语言学习环境中去。英语学习网站能够提供应学习者一个优秀的平台, 使学习者能够自由地共享资源。英语学习网站能够使学习用户根据本身的现实情况, 自立掌控其学习进度, 这种新型的学习方法刚好是我们所必须要的。

英语学习网站资源是传统英语学习所没有的, 更紧张的是英语学习网站中的资源和信息具有权威性, 能够确保学习者在学习英语的过程中获取最有效和最感爱好的话题和信息, 避免英语学习的误区, 自我测验的标题和答案都是经过细心校准的, 一方面提升学习者的信念, 另一方面也是对在线英语网站的一种发展[1]。

因此, 在这样的大背景下, 设计并制作针对大门生学习英语的网站, 以英语学习的几大重要方面———听、说、读、写为网站重要组成部分, 进行资源整合, 让英语学习者快捷地在一个网站上接触到多种英语资源, 以多种方法进行学习。网站曩昔端框架Bootstrap为基础进行前端开发, 制作出自适应式的网页, 以知足移动端的需求。

2、 网站前端开发的常用技术和工具

网站前端开发技术重要是HTML。除此之外, 还有CSS (层叠样式表) 。CSS是一种使体现情势和内容星散, 包括布局, 颜色和字体等等的技术。优先级由条理结构决定级联结果。另外, Java Script也是WEB前端开发技术, 几乎所有当代Web欣赏器都支撑它而无需插件[2]。Bootstrap也是一种网站前端开发技术。Bootstrap用于创建自适应式、移动端优先的免费和开源的前端Web框架, 由Twitter推出, 一向是Git Hub上的热门开源项目[3]。有的网站制作也把Query用作前端开发技术。它是一个Java Script框架[4], 该框架雄厚的成熟插件可供开发者使用[5]。

网站前端开发使用的工具有两个。一个是Sublime Text。另一个是Adobe Illustrator CC, 用它可精准、方便地设计出网页LOGO。

3、 英文学习网站需求分析

英文学习网站属于综合性的英语学习网站, 分为听力、口语、阅读、写作四个板块, 面向的重要用户群为大门生, 因此英文学习资源要在高校门生的学习范围之内, 包括最惯用的英语资源。在页面内容的设置上应看重精炼, 防止过多纷繁复杂的内容造成不友爱的用户体验。

近年来, 各种移动智能设备的飞速发展和广泛应用促进了互联网应用向移动平台方向发展, 呈现多元化的趋势。台式机表现器的尺寸越来越大, 27英寸甚至30英寸的表现器也很惯用。因此, 我们欣赏本来专门为台式电脑预备的网页页面已经不再适合在小屏幕的移动设备和高分辨率的大表现器上使用了。

2010年, Marcotte提出自适应式网页设计的概念, 它把流体栅格、弹性图片和媒体查询这三项技术有机地结合起来。根据不同设备的屏幕情况, 自适应式网页设计能够主动根据屏幕大小、分辨率对页面内容进行重新排版, 使得网页内容更好地适应设备, 显现完善的表现结果。一样平常来说, 页面设计者会优先使紧张内容先表现出来, 其他内容依据某些细则依次排列, 用户可以通过滑动或滚动页面进行欣赏[5]。

4、 英文学习网站前端设计与实现

4.1、 LOGO设计和页面风格

网站风格简约, 内容布局简单、明净, 不会有繁杂的视觉结果。各种元素之间有适当内边距 (padding) 和外边距 (margin) , 易于欣赏和使用。

4.2、 Bootstrap框架

Bootstrap是最受迎接的开发自适应式布局框架。可从其官方网站下载, 包括CSS等。这样可以对本地CSS文件里的CSS变量进行修改, 依据本身的需求改变预定好的样式, 也可用CDN, 如需使用Java Script插件 (Bootstrap的所有Java Script插件都依靠j Query) , 还须引入j Query[6]。

Bootstrap必须要HTML5文档类型。其栅格体系 (Grid System) 用于通过一系列的行 (row) 与列 (column) 的组合来创建页面布局。每行最多可以有12列, 也可以将某些列组合起来创造更宽的一列[7]。

4.3、 页面设计与实现

首先是导航栏。它在每个页面的顶部, 包括有LOGO (链接到网站首页) , 听力, 口语, 阅读, 写作, 登陆, 注册, 可点击标签进入相应的页面。

页面底部的重要内容是一个向上的按钮, 点击可以回到页面顶部, 并且使用j Query添加了一个顺滑地滚动 (Scroll) 结果, 提高了点击按钮的交互性。

主页的重要元素为两张图片组成的图片轮播 (Carousel) , 其中第一个界面有网站LOGO和标语, 第二个界面有精美的中英词句子。

图片轮播结果是自适应式的, 可以根据屏幕宽度主动调整大小。图片轮播中, 使用了Bootstrap自适应式页面设计的另一个代表技术———媒体查询。@media可以针对不同的屏幕尺寸设置不同的样式, 这里可以设定当屏幕宽度小于768px时, 图片轮播的题目标签便不再表现。

听力的一级页面使用Bootstrap的.nav-pills类实现动态的胶囊式标签页 (Pills) , 点击胶囊菜单可切换各类听力材料。听力的二级页面是听力材料的音频及对应的原文, 音频使用<audio>标签添加, 其中control属性添加对音频的控制, 包括播放、停息和音量调节。

口语的一级页面的材料板块使用Bootstrap的.thumbnial类将图片和笔墨结合在一路, 图片可根据屏幕的大小主动缩放为合适的宽度。口语的二级页面的布局设计与听力的一级页面的设计类似, 也使用了Bootstrap的.nav-pills类实现胶囊式切换菜单, 在页面内容上使用<audio>标签添加了多个音频。

阅读的一级页面的布局左边消息板块使用Bootstrap的栅格体系的.col-sm-7类, 占有页面的7/12的宽度。阅读的二级页面布局与一级页面类似, 左边为消息原文, 右边为周内头条消息板块。

写作的一级页面布局由四个.table类的表格构成, 表里的内容是各类英文习作。写作的二级页面为写作文章原文。

然后, 登录和注册界面使用Bootstrap的Java Script插件模态框 (Modal) 来实现。模态框的组件包括头形、主体和一组放置于底部的按钮。添加一段Java Script代码用来模仿登录注册结果。

最后是测试。一是欣赏器兼容性测试。欣赏器最紧张或者说核心的部分是渲染引擎 (Rendering Engine) , 一样平常风俗称为欣赏器内核。它负责对网页语法进行诠释并渲染网页, 决定了欣赏器如何表现网页的内容以及页面的格式信息。不同的欣赏器内核对网页编写语法的诠释也不同, 因此, 统一网页在不同的内核的欣赏器里的渲染结果也不同, 这也是网页编写者必须要在不同内核的欣赏器中测试网页表现结果的缘故原由。测试所用的欣赏器为市面上主流的欣赏器:IE 11, Trident内核;火狐, Gecko内核;谷歌, Webkit内核。二是关于测试效果。经过测试, 网站要能很好地兼容IE 11, 火狐和谷歌欣赏器, Bootstrap框架下各个组件和元素, 以及使用j Query添加的动态结果都能在以上三款欣赏器中显现。