毕业设计（论文）-焕延网站技术工作室官网设计与开发-前端开发

全日制本科生毕业论文 题 目： 焕延网站技术工作室官网设计与开发前端开发学 院： 计算机与信息科学学院 专业年级： 计算机科学与技术2012级 学生姓名： 学号： 指导教师： 职称： 副教授 2016 年 5 月 6 日焕延网站技术工作室官网设计与开发前端开发摘 要：本网站前端开发主要是采用BootStrap、CSS3、 Html5以及JavaScript等技术开发的响应式网站，开发目标和技术要点体现在网站的响应式上。关键词：BootStrap；响应式网站；CSS3Abstract:The front-end development of the website mainly adapts bootstrap,CSS3, HTML5 and JavaScript as well as other techniques to develop a responding website. The objective and technical points of this development reflect on the responses of the website.Key words:Bootstrap;Responsive Website;CSS3全套设计加扣 30122505822015年是电子商务发展的关键一年也是令人期待的一年。随着国家“互联网”行动计划的实施，响应式网站再次被推到中国经济转型期备受关注的“风口”上。个性化、专业化的网站需求日益增大，所以如何运用新技术做出高质量的网站已经成为前端开发工程师思考的问题之一。网页的结构设计、整体布局、动态交互性，包括响应式等诸多元素都要遵循W3C标准规范，而BootStrap就是顺应时代的一大产物，它是一种前端开发框架，由规范的CSS，Html，JavaScript插件构成，其最大的优势是响应式布局，使得开发者可以方便的让网页无论在台式机、平板设备、手机上都获得最佳的体验。响应式网站拥有高性价比并有着出色的用户体验。它可以自动侦测设备屏幕的大小，对网站的内容和布局灵活调整，让网站在任何设备上都有令人惊艳的显示效果。换言之，无论使用什么设备，响应式网站都可以给访问者最好的用户体验。1 响应式网站可行性分析1.1 可行性研究与以往的工作室网站设计风格相比，Bootstrap的设计风格有更友好的界面，而响应终端可以使得网站能在不同设备有不同的呈现，一个网站兼容不同设备，扩大了浏览群的范围，这是传统网站所做不到的。1.2 技术可行性本网站总体主要是采用Dreamweaver、Git、Pingendo、Navicat等工具进行开发的，其中前端开发主要是使用Dreamweaver、Bootstrap、Pingendo工具开发，数据库使用MySQL数据库，服务器使用阿里云服务器,服务器操作系统运用的是CentOS7.1系统，运用yum源搭建Lamp服务器环境，并用Filezilla工具把本地网页文件上传到远程服务器上。在网站开发的过程中使用Git工具来进行版本管理。Git工具的好处以及教程在网上已有很多，在这里我便不再赘述。通过已掌握的这几种软件开发技术，在加上指导老师的悉心帮助，因此技术上是可行的。1.3 经济可行性本网站的开发所需资金很少，开发运行后，管理员可以通过审核资料，控制网站内容的显示，审核通过后即可在首页看到更新，因此在经济上是绝对可行的。1.4 操作可行性本网站直观易懂，使用方便，管理员只要经过简单的培训，就可以轻松管理维护本网站。综上所述，从技术上、经济上、可操作性上都是可行的，而且要求不高，所以本网站的开发是可行的。2 需求分析 从技术的角度来看，响应式网站主要考虑以下几个因素：根据手机屏幕的特点要把台式机的版面裁切成手机版面，只显示最核心的内容。台式机屏幕分辨率大多数都是1920*1080，笔记本电脑最常用的都是1366*768，所以在设计的时候，台式机和笔记本电脑采用了相同的格式布局。当屏幕宽度大于等于1200px时与屏幕宽度为1366px下的网页布局一致。当屏幕宽度在大于等于860px到1200px之间时以屏幕宽度为1024px下的网页布局为标准进行布局。而当屏幕宽度小于860px时，网页布局以720px下的网页布局为标准进行布局，具体分析可以看如下逻辑图。如图2-1所示。图2-1 逻辑流程图3 网站设计3.1 网站结构图本网站主要为了研究和实施响应式网站的理论和积累开发经验，所以本论文以响应式网站为核心，以展示“网站技术工作室”的内容为载体来检验响应式网站的功能。网站结构图如图3-1所示。图3-1 网站结构图3.2 制作线框原型根据不同的设备屏幕尺寸，对网页的布局分别采用不同构建方式。布局应该是一种弹性的栅格布局，不同尺寸下弹性适应。设备样式图如图3-2所示。图3-2 设备样式图3.3 Css3 media 媒体查询器的用法 设置Meta标签首先我们在使用media的时候需要设置下面这段代码，来兼容移动设备的展示效果：这段代码的几个参数解释：width = device-width：宽度等于当前设备的宽度initial-scale：初始的缩放比例（默认设置为1.0） minimum-scale：允许用户缩放到的最小比例（默认设置为1.0） maximum-scale：允许用户缩放到的最大比例（默认设置为1.0） user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）本网站中CSS3的媒体查询具体实现：下面这段代码的意思是当页面宽度大于等于1200px的时候执行1366px布局，CSS样式如下：下面这段代码的意思是当页面宽度大于等于860px并小于1200px的时候执行1024px布局，CSS样式如下：下面这段代码的意思是当页面宽度小于860px的时候执行720px布局，CSS样式如下：4 网站的具体实施4.1 确定网站形象风格所谓网站风格是指网站页面设计上的视觉元素组合在一起的整体形象，展现给人的直观感受。这个整体形象包括网站的配色、字体、页面布局、内容、交互性、海报、宣传语等因素。网站风格应当与工作室的整体形象相一致，比如说工作室的整体色调、工作室的行业性质、工作室文化、提供的相关产品或服务特点都需要在网站的风格中得到体现。4.1.1 网站色彩网站给人的第一印象来自视觉冲击，不同的色彩搭配4可产生不同的效果。为了凸显网站的前卫感和科技感，在该设计中以蓝色、白色为主。其中蓝色代表永恒、沉静、理智、诚实、清爽、科技，白色则代表了纯真、明快、简单、洁净。4.1.2 网站字体对于字体的选用，本网站选择了标准字体，它是用于标题、主菜单的特有字体。为了体现网站的独有风格，选择“楷体”作为主要字体，旨在给人一种清新明目感。网站的字体及颜色搭配示范如图4-1所示。图4-1 网站字体及颜色搭配示范图4.2 确定网站模块该网站主要包含的内容有基本的导航模块、工作室及成员介绍、相关产品及服务介绍、相关网站链接、博客检索功能及后台管理等功能。详情见图3-1。4.3 网页的具体展示4.3.1 网站首页网站首页主要介绍了本工作室的工作宗旨、服务性质、服务范围以及核心团队成员的展示，PC端效果图效果如图4-2所示。(1)(2)(3)(4)(5)4-2 网站首页PC端效果图网站首页手机端效果图如图4-3所示。 (1) (2)图4-3 网站首页手机端效果图4.3.2 联系我们联系我们页面主要呈现的是本工作室成员的详细介绍，以及核心成员的风采展示，PC端效果如图4-4所示。(1)(2)(3)图4-4 联系我们PC端效果图联系我们手机端部分效果图如图4-5所示。 (1) (2)图4-5 联系我们手机端效果图4.3.3 关于我们联系我们页面主要介绍了工作室的服务流程、服务项目以及部分成品展示。效果如图4-6所示。图4-6 关于我们页面效果图4.3.4 博客博客页面的主要功能是工作室的管理人员定时对相关资讯进行更新，以博文的形式进行展示，供览客浏览。PC端效果如图4-7所示。(1)(2)(3)图4-7 博客PC端效果图博客页面手机端部分效果如图4-8所示。 (1) (2)图4-8 博客页面手机端效果图4.3.5 登陆/注册界面每个览客都可以根据需要注册或者登陆该网站，与工作人员进行业务咨询或者技术交流，登陆/注册界面如图4-9所示。图4-9 登陆/注册界面图5 具体实现5.1 Bootstrap前端开发工具介绍Bootstrap是目前很受欢迎的前端框架。它的特点是基于HTML5和CSS3开发的，其简洁灵活，使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它是由动态CSS语言Less写成。在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件，Bootstrap自带了13个jQuery插件，这些插件为Bootstrap中的组件赋予了生命。其中包括:模式对话框、标签页、滚动条、弹出框等。组件方面它包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包含下拉菜单、按钮组、按钮下拉菜单、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。框架代码可以对Bootstrap中所有的CSS变量进行修改，依据自己的需求裁剪代码，所以Bootstrap是一款非常方便快捷的前端开发工具。5.2 Pingendo开发工具介绍Pingendo是与Bootstrap完美配合的前端开发工具，内置了包含快速嵌入CSS Tags,Widgets,Bootstrap组件，Bootstrap模板的Snippets模块和定义网站SEO信息，CSS样式的inspector,同时也提供了手工书写代码的窗口。利用inspector和Snippets就能让对前端代码不熟悉的设计师轻松搞定静态页面制作，并且Pingendo还考虑到了响应式前端的开发需求，提供了480px、768px、980px、1200px四种常见分辨率下的UI变化及预览功能。5.3 Git版本控制管理工具的介绍Git 最初由Linus Torvalds编写，用于 Linux 内核开发的版本控制工具,Git 与常用的版本控制工具 CVS、Subversion 等不同，它采用了分布式版本库的方式，不必服务器端软件支持，使源代码的发布和交流极其方便。与其他的软件版本开源管理工具相比Git具有很多的优势，比如更方便的Merge以及管理，更健壮的系统，对网络的依赖性更低和更少的“仓库污染”。5.4 结构分析使用Bootstrap的栅格系统进行各显示终端的显示布局。在PC端使用大宽屏显示，在平板端显示单列或单行双列布局进行高清显示，在手机端使用全单列布局显示，例如在手机端中，主页顶端的导航栏将自动适应变成一颗菜单按钮，具体前端页面考察请详看设计作品。效果图分别以不同的设备屏幕尺寸来区分，网页原型根据3种不同设备屏幕的尺寸，设计了3种对应的布局结构。分析可知，在pc端也就是在屏幕宽度在大于等于1200px时，我们网页大体主要上中下结构，分为header，content以及footer三个区域。其中，content区由分为flex-image（图片轮播），以及content-top和copyright区域。而当屏幕宽度在860px到1200px之间的时候，网页的主体布局结构依然是上中下结构，其中content区域又分为上中下三行自适应排列（浮动），web网页开发中这种横向自适应宽度称为液态布局。当屏幕宽度小于860px时，网页全部是竖式布局，content区全部有单个div展现，并且隐藏了content-top区，使其在手机端能够简洁的展示网站的内容。图5-1展示了PC端的本网站的布局结构。图5-1 PC网页布局图平板电脑布局如图5-2所示。图5-2 平板电脑布局图手机端的布局如图5-3所示。图5-3 手机端网页布局图页面加载的时候，CSS会启动媒体查询，针对不同设备的屏幕尺寸选择加载不同的CSS样式，前面已经说明了，这里就不在赘述。5.4 模板设计本次项目开发中我将每个页面都制作为一个单独的.html模块，关于每个页面的页头和页脚，我们首先搭建好首页的header和footer结构以及样式，之后的每个页面都统一引用公用HTML片段中的header.html和footer.html。6 与后台的连接主要通过URL进行传参，如博客文章列表调用后台连接控制器进行输出。先使用$this-assign(前端中使用的变量名,控制器中声名的变量名，用于赋值给前端中使用);函数方法进行变量声名，然后使用$this-display(模版名称);进行视图输出。如在URL中使用https:/servername/muicspan/blog.php/Home/控制器名/方法名?id=1，其中id为GET或POST方法获取参数，在控制器中进行运算后显示相关页面视图等交互界面。7 结束语通过这次毕业设计的实践练习，我不仅学会了如何开发响应式网站，更学会了如何解决开发中遇到的问题。响应式网站的核心是媒体查询，针对不同设备的宽度而渲染不同的样式布局，基于这个核心技术来进一步实现网站的响应式。HTML5和CSS3是这次开发中的根本，这也是未来互联网做web开发的导向，HTML5标签简洁，在桌面端与移动端的兼容性比较好。CSS3在原来的基础上增加了更多的动画效果，原来的图片圆角等问题，CSS3也都可以非常简单的解决。所以CSS3为网页的效果打下了坚实的基础。在这次前端开发过程中，从初次接触响应式到深入理解响应式并具体运用到网站的建设，其间有遇到很多问题，比如布局不够合理、需求分析不够明确、样式理解不够准确、逻辑设计不够科学等，但是这些问题在老师和队友的共同帮助下都迎刃而解。这次毕业设计我收获颇多，遇到问题的时候我学会主动请教队友，同时老师在这个过程中给与了很大的帮助和很多的鼓励，在此，我非常感谢我的指导老师戴政国。这次毕业设计增加了我对学习的主动性和积极性，以及前端开发知识面的深度和广度。并且在和队友的配合过程中，也学到了很多关于后台开发的知识，并对此充满了兴趣，在于队友合作的同时也培养和提升了我的团队合作精神以及责任感。在合作开发的过程中，我的队友教会了我很多东西，遇到问题的时候给了我很多的帮助，在此，我也非常感谢我的队友潘子烨。所以这次毕业设计对我的大学生涯来说是一次非常珍贵的经验，因为它让我体验到了从理论知识到实际操作的真实感。毕业在即最后由衷感谢重庆师范大学的接纳和培养，感谢重庆师范大学所有老师对我的细心栽培和无私奉献。 参考文献:1 弗拉纳根. JavaScript权威指南M. 北京：大学出版社，2007.2 姬付梓. 创意设计M. 北京：大R学出版社，2011. 3 吉轮瓦特.CSS3指南M. 北京：大学出版社，2012.4 宋虹. Photoshop图形图像处理M. 湖南：湖南大学出版社，2011. 5 张旭东. Dreamweaver8 + PHP动态网页开发从入门到精通J. 北京：人民邮电出版社，2007.6 Chrarles Wyke-Smith. CSS设计指南（第三版）. 图灵出版社.7 夏曼. 用DIV_CSS布局技术实现网页设计J. 软件导刊，2010. 8 尚博. 基于DIV+CSS的网页布局方法解析J. 电脑知识与技术，2010 9 Jonathan Chaffer. jQuery基础教程（第四版）. 图灵出版社,2012.10 Ben Frain响应式Web设计：HTML4和CSS3实现，图灵出版社，2012.11 邓良松,刘海岩,陆丽娜. 软件工程M. 西安：西安电子科技大学出版社，2007.12 张英男. ASP.NET 2.0网络编程M. 北京：电子工业出版社，2008.