基于响应式布局的英语学习网站前端设计与实现
魏尊亮
【摘 要】如何做好一个英语学习网站的前端设计？首先应该以需求分析为基础，树立响应式布局的核心理念，运用HTML、CSS、JavaScript技术，结合前端框架Bootstrap和jQuery库，还要用到Sublime Text和Adobe Illustrator等开发工具。这样，一个崭新的英语学习网站的前端设计即可圆满实现。
【Abstract】How to complete the design of the front end of an English learning website？ First of all， we should take the requirement analysis as the basis， set up the core concept of the response layout， use HTML， CSS， JavaScript technology， combine the front frame Bootstrap and jQuery library， and also use Sublime Text and Adobe Illustrator and other development tools. In this way， a brand-new design of the front end of an English learning website can be successfully implemented.
【关键词】前端设计；学习网站；响应式页面设计；Bootstrap
【Keywords】front-end design； learning website， responsive web design， Bootstrap
【中图分类号】P393；G633.41 【文献标志码】A 【文章编号】1673-1069（2018）08-0187-02
1 引言
越来越多网络英语学习者出现，慢慢形成了拥有众多学习用户的学习网站，它们以自己独特的优势，吸引着越来越多的英语学习者投入到这种新型的语言学习环境中去。英语学习网站能够提供给学习者一个良好的平台，使学习者能够自由地共享资源。英语学习网站能够使学习用户根据自己的实际情况，自主掌控其学习进度，这种新型的学习方式刚好是我们所需要的。
英语学习网站资源是传统英语学习所没有的，更重要的是英语学习网站中的资源和信息具有权威性，能够确保学习者在学习英语的过程中获取最有用和最感兴趣的话题和信息，避免英语学习的误区，自我测验的题目和答案都是经过仔细校准的，一方面提高学习者的信心，另一方面也是对在线英语网站的一种发展[1]。
因此，在这样的大背景下，设计并制作针对大学生学习英语的网站，以英语学习的几大主要方面——听、说、读、写为网站主要组成部分，进行资源整合，让英语学习者快捷地在一个网站上接触到多种英语资源，以多种方式进行学习。网站以前端框架Bootstrap为基础进行前端开发，制作出响应式的网页，以满足移动端的需求。
2 网站前端开发的常用技术和工具
网站前端开发技术主要是HTML。除此之外，还有CSS（层叠样式表）。CSS是一种使表现形式和内容分离，包括布局，颜色和字体等等的技术。优先级由层次结构决定级联效果。另外，JavaScript也是WEB前端开发技术，几乎所有现代Web浏览器都支持它而无需插件[2]。Bootstrap也是一种网站前端开发技术。Bootstrap用于创建响应式、移动端优先的免费和開源的前端Web框架，由Twitter推出，一直是GitHub上的热门开源项目[3]。有的网站制作也把Query用作前端开发技术。它是一个JavaScript框架[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，如需使用JavaScript插件（Bootstrap的所有JavaScript插件都依赖jQuery），还须引入jQuery[6]。
Bootstrap需要HTML5文档类型。其栅格系统（Grid System）用于通过一系列的行（row）与列（column）的组合来创建页面布局。每行最多可以有12列，也可以将某些列组合起来创造更宽的一列[7]。
4.3 页面设计与实现
首先是导航栏。它在每个页面的顶部，包括有LOGO（链接到网站首页），听力，口语，阅读，写作，登陆，注册，可点击标签进入相应的页面。
页面底部的主要内容是一个向上的按钮，点击可以回到页面顶部，并且使用jQuery添加了一个顺滑地滚动（Scroll）效果，提升了点击按钮的交互性。
主页的主要元素为两张图片组成的图片轮播（Carousel），其中第一个界面有网站LOGO和标语，第二个界面有优美的中英文句子。
图片轮播效果是响应式的，可以根据屏幕宽度自动调整大小。图片轮播中，使用了Bootstrap响应式页面设计的另一个代表技术——媒体查询。@media可以针对不同的屏幕尺寸设置不同的样式，这里可以设定当屏幕宽度小于768px时，图片轮播的标题标签便不再显示。
听力的一级页面使用Bootstrap的.nav-pills类实现动态的胶囊式标签页（Pills），点击胶囊菜单可切换各类听力材料。听力的二级页面是听力材料的音频及对应的原文，音频使用标签添加，其中control属性添加对音频的控制，包括播放、暂停和音量调节。
口语的一级页面的材料板块使用Bootstrap的.thumbnial类将图片和文字结合在一起，图片可根据屏幕的大小自动缩放为合适的宽度。口语的二级页面的布局设计与听力的一级页面的设计类似，也使用了Bootstrap的.nav-pills类实现胶囊式切换菜单，在页面内容上使用标签添加了多个音频。
阅读的一级页面的布局左边新闻板块使用Bootstrap的栅格系统的.col-sm-7类，占据页面的7/12的宽度。阅读的二级页面布局与一级页面类似，左边为新闻原文，右边为周内头条新闻板块。
写作的一级页面布局由四个.table类的表格构成，表里的内容是各类英文习作。写作的二级页面为写作文章原文。
然后，登录和注册界面使用Bootstrap的JavaScript插件模态框（Modal）来实现。模态框的组件包括头形、主体和一组放置于底部的按钮。添加一段JavaScript代码用来模拟登录注册效果。
最后是测试。一是浏览器兼容性测试。浏览器最重要或者说核心的部分是渲染引擎（Rendering Engine），一般习惯称为浏览器内核。它负责对网页语法进行解释并渲染网页，决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也不同，因此，同一网页在不同的内核的浏览器里的渲染效果也不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。测试所用的浏览器为市面上主流的浏览器：IE 11，Trident内核；火狐，Gecko内核；谷歌，Webkit内核。二是关于测试结果。经过测试，网站要能很好地兼容IE 11，火狐和谷歌浏览器，Bootstrap框架下各个组件和元素，以及使用jQuery添加的动态效果都能在以上三款浏览器中展现。
【参考文献】
【1】张州，李存永.HTML5和CSS3.0在网页设计中的新特性和优势探讨[J].无线互联科技， 2015 （8）：11-12.
【2】 S.Charles， John Resig： Building Jquery[J]. COMPUTER， 2015（5）：23-25.
【3】Bootstrap中文网[EB/OL].http： //v3.bootc-ss.com/css/. 2015（11）：20.
【4】李宝敏. 动态网页设计与开发应用教程[M].北京：清华大学出版社， 2012.
【5】张树明.基于响应式Web设计的网页模板的设计与实现[J]. 计算机与现代化， 2013， 1（6）：125-127.
【6】D.Cochran. Bootstrap实战[M].北京：人民邮电出版社， 2015.
【7】田佳妮，翟悅.DIV+CSS在网页布局中的应用研究[J].电脑知识与技术， 2015（2）：74-76.
【摘 要】如何做好一个英语学习网站的前端设计？首先应该以需求分析为基础，树立响应式布局的核心理念，运用HTML、CSS、JavaScript技术，结合前端框架Bootstrap和jQuery库，还要用到Sublime Text和Adobe Illustrator等开发工具。这样，一个崭新的英语学习网站的前端设计即可圆满实现。
【Abstract】How to complete the design of the front end of an English learning website？ First of all， we should take the requirement analysis as the basis， set up the core concept of the response layout， use HTML， CSS， JavaScript technology， combine the front frame Bootstrap and jQuery library， and also use Sublime Text and Adobe Illustrator and other development tools. In this way， a brand-new design of the front end of an English learning website can be successfully implemented.
【关键词】前端设计；学习网站；响应式页面设计；Bootstrap
【Keywords】front-end design； learning website， responsive web design， Bootstrap
【中图分类号】P393；G633.41 【文献标志码】A 【文章编号】1673-1069（2018）08-0187-02
1 引言
越来越多网络英语学习者出现，慢慢形成了拥有众多学习用户的学习网站，它们以自己独特的优势，吸引着越来越多的英语学习者投入到这种新型的语言学习环境中去。英语学习网站能够提供给学习者一个良好的平台，使学习者能够自由地共享资源。英语学习网站能够使学习用户根据自己的实际情况，自主掌控其学习进度，这种新型的学习方式刚好是我们所需要的。
英语学习网站资源是传统英语学习所没有的，更重要的是英语学习网站中的资源和信息具有权威性，能够确保学习者在学习英语的过程中获取最有用和最感兴趣的话题和信息，避免英语学习的误区，自我测验的题目和答案都是经过仔细校准的，一方面提高学习者的信心，另一方面也是对在线英语网站的一种发展[1]。
因此，在这样的大背景下，设计并制作针对大学生学习英语的网站，以英语学习的几大主要方面——听、说、读、写为网站主要组成部分，进行资源整合，让英语学习者快捷地在一个网站上接触到多种英语资源，以多种方式进行学习。网站以前端框架Bootstrap为基础进行前端开发，制作出响应式的网页，以满足移动端的需求。
2 网站前端开发的常用技术和工具
网站前端开发技术主要是HTML。除此之外，还有CSS（层叠样式表）。CSS是一种使表现形式和内容分离，包括布局，颜色和字体等等的技术。优先级由层次结构决定级联效果。另外，JavaScript也是WEB前端开发技术，几乎所有现代Web浏览器都支持它而无需插件[2]。Bootstrap也是一种网站前端开发技术。Bootstrap用于创建响应式、移动端优先的免费和開源的前端Web框架，由Twitter推出，一直是GitHub上的热门开源项目[3]。有的网站制作也把Query用作前端开发技术。它是一个JavaScript框架[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，如需使用JavaScript插件（Bootstrap的所有JavaScript插件都依赖jQuery），还须引入jQuery[6]。
Bootstrap需要HTML5文档类型。其栅格系统（Grid System）用于通过一系列的行（row）与列（column）的组合来创建页面布局。每行最多可以有12列，也可以将某些列组合起来创造更宽的一列[7]。
4.3 页面设计与实现
首先是导航栏。它在每个页面的顶部，包括有LOGO（链接到网站首页），听力，口语，阅读，写作，登陆，注册，可点击标签进入相应的页面。
页面底部的主要内容是一个向上的按钮，点击可以回到页面顶部，并且使用jQuery添加了一个顺滑地滚动（Scroll）效果，提升了点击按钮的交互性。
主页的主要元素为两张图片组成的图片轮播（Carousel），其中第一个界面有网站LOGO和标语，第二个界面有优美的中英文句子。
图片轮播效果是响应式的，可以根据屏幕宽度自动调整大小。图片轮播中，使用了Bootstrap响应式页面设计的另一个代表技术——媒体查询。@media可以针对不同的屏幕尺寸设置不同的样式，这里可以设定当屏幕宽度小于768px时，图片轮播的标题标签便不再显示。
听力的一级页面使用Bootstrap的.nav-pills类实现动态的胶囊式标签页（Pills），点击胶囊菜单可切换各类听力材料。听力的二级页面是听力材料的音频及对应的原文，音频使用标签添加，其中control属性添加对音频的控制，包括播放、暂停和音量调节。
口语的一级页面的材料板块使用Bootstrap的.thumbnial类将图片和文字结合在一起，图片可根据屏幕的大小自动缩放为合适的宽度。口语的二级页面的布局设计与听力的一级页面的设计类似，也使用了Bootstrap的.nav-pills类实现胶囊式切换菜单，在页面内容上使用标签添加了多个音频。
阅读的一级页面的布局左边新闻板块使用Bootstrap的栅格系统的.col-sm-7类，占据页面的7/12的宽度。阅读的二级页面布局与一级页面类似，左边为新闻原文，右边为周内头条新闻板块。
写作的一级页面布局由四个.table类的表格构成，表里的内容是各类英文习作。写作的二级页面为写作文章原文。
然后，登录和注册界面使用Bootstrap的JavaScript插件模态框（Modal）来实现。模态框的组件包括头形、主体和一组放置于底部的按钮。添加一段JavaScript代码用来模拟登录注册效果。
最后是测试。一是浏览器兼容性测试。浏览器最重要或者说核心的部分是渲染引擎（Rendering Engine），一般习惯称为浏览器内核。它负责对网页语法进行解释并渲染网页，决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也不同，因此，同一网页在不同的内核的浏览器里的渲染效果也不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。测试所用的浏览器为市面上主流的浏览器：IE 11，Trident内核；火狐，Gecko内核；谷歌，Webkit内核。二是关于测试结果。经过测试，网站要能很好地兼容IE 11，火狐和谷歌浏览器，Bootstrap框架下各个组件和元素，以及使用jQuery添加的动态效果都能在以上三款浏览器中展现。
【参考文献】
【1】张州，李存永.HTML5和CSS3.0在网页设计中的新特性和优势探讨[J].无线互联科技， 2015 （8）：11-12.
【2】 S.Charles， John Resig： Building Jquery[J]. COMPUTER， 2015（5）：23-25.
【3】Bootstrap中文网[EB/OL].http： //v3.bootc-ss.com/css/. 2015（11）：20.
【4】李宝敏. 动态网页设计与开发应用教程[M].北京：清华大学出版社， 2012.
【5】张树明.基于响应式Web设计的网页模板的设计与实现[J]. 计算机与现代化， 2013， 1（6）：125-127.
【6】D.Cochran. Bootstrap实战[M].北京：人民邮电出版社， 2015.
【7】田佳妮，翟悅.DIV+CSS在网页布局中的应用研究[J].电脑知识与技术， 2015（2）：74-76.
