1、 全 日制 本科生毕业论文题 目： 焕延网站技术工作室官网设计与开发前端开发学 院： 计算机与信息科学学院 专业年级： 计算机科学与技术 学生姓名： 学号： XXXXXXXX 指导教师： 职称： XXXXX 年 月 日第 1 页 （共 18 页）焕延网站技术工作室官网设计与开发前端开发摘 要：本网站前端开发主要是采用 BootStrap、CSS3、 Html5以及 JavaScript等技术开发的响应式网站，开发目标和技术要点体现在网站的响应式上。关键词：BootStrap；响应式网站；CSS3Abstract:The front-end development of the website
2、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;CSS32015年是电子商务发展的关键一年也是令人期待的一年。随着国家“互联网”行动计划的实施，响应式网站再
3、次被推到中国经济转型期备受关注的“风口”上。个性化、专业化的网站需求日益增大，所以如何运用新技术做出高质量的网站已经成为前端开发工程师思考的问题之一。网页的结构设计、整体布局、动态交互性，包括响应式等诸多元素都要遵循 W3C标准规范，而 BootStrap就是顺应时代的一大产物，它是一种前端开发框架，由规范的 CSS，Html，JavaScript 插件构成，其最大的优势是响应式布局，使得开发者可以方便的让网页无论在台式机、平板设备、手机上都获得最佳的体验。响应式网站拥有高性价比并有着出色的用户体验。它可以自动侦测设备屏幕的大小，对网站的内容和布局灵活调整，让网站在任何设备上都有令人惊艳的显示
4、效果。换言之，无论使用什么设备，响应式网站都可以给访问者最好的用户体验。1 响应式网站可行性分析第 2 页 （共 18 页）1.1 可行性研究与以往的工作室网站设计风格相比，Bootstrap 的设计风格有更友好的界面，而响应终端可以使得网站能在不同设备有不同的呈现，一个网站兼容不同设备，扩大了浏览群的范围，这是传统网站所做不到的。1.2 技术可行性本网站总体主要是采用 Dreamweaver、Git、Pingendo、Navicat 等工具进行开发的，其中前端开发主要是使用 Dreamweaver、Bootstrap、Pingendo 工具开发，数据库使用 MySQL数据库，服务器使用阿里云
5、服务器,服务器操作系统运用的是 CentOS7.1系统，运用 yum源搭建 Lamp服务器环境，并用 Filezilla工具把本地网页文件上传到远程服务器上。在网站开发的过程中使用 Git工具来进行版本管理。Git 工具的好处以及教程在网上已有很多，在这里我便不再赘述。通过已掌握的这几种软件开发技术，在加上指导老师的悉心帮助，因此技术上是可行的。1.3 经济可行性本网站的开发所需资金很少，开发运行后，管理员可以通过审核资料，控制网站内容的显示，审核通过后即可在首页看到更新，因此在经济上是绝对可行的。1.4 操作可行性本网站直观易懂，使用方便，管理员只要经过简单的培训，就可以轻松管理维护本网站。
6、综上所述，从技术上、经济上、可操作性上都是可行的，而且要求不高，所以本网站的开发是可行的。2 需求分析 第 3 页 （共 18 页）从技术的角度来看，响应式网站主要考虑以下几个因素：根据手机屏幕的特点要把台式机的版面裁切成手机版面，只显示最核心的内容。台式机屏幕分辨率大多数都是 1920*1080，笔记本电脑最常用的都是 1366*768，所以在设计的时候，台式机和笔记本电脑采用了相同的格式布局。当屏幕宽度大于等于 1200px时与屏幕宽度为 1366px下的网页布局一致。当屏幕宽度在大于等于 860px到 1200px之间时以屏幕宽度为 1024px下的网页布局为标准进行布局。而当屏幕宽度小
7、于860px时，网页布局以 720px下的网页布局为标准进行布局，具体分析可以看如下逻辑图。如图 2-1所示。图 2-1 逻辑流程图3 网站设计3.1 网站结构图本网站主要为了研究和实施响应式网站的理论和积累开发经验，所以本论文以响应式网站为核心，以展示“网站技术工作室”的内容为载体来检验响应式网站的功能。网站结构图如图 3-1所示。第 4 页 （共 18 页）图 3-1 网站结构图3.2 制作线框原型根据不同的设备屏幕尺寸，对网页的布局分别采用不同构建方式。布局应该是一种弹性的栅格布局，不同尺寸下弹性适应。设备样式图如图 3-2所示。图 3-2 设备样式图3.3 Css3 media 媒体查
8、询器的用法 设置 Meta标签首先我们在使用 media的时候需要设置下面这段代码，来兼容移动设备的展第 5 页 （共 18 页）示效果：这段代码的几个参数解释：width = device-width：宽度等于当前设备的宽度initial-scale：初始的缩放比例（默认设置为 1.0） minimum-scale：允许用户缩放到的最小比例（默认设置为 1.0） maximum-scale：允许用户缩放到的最大比例（默认设置为 1.0） user-scalable：用户是否可以手动缩放（默认设置为 no，因为我们不希望用户放大缩小页面） 本网站中 CSS3的媒体查询具体实现：下面这段代码的意
9、思是当页面宽度大于等于 1200px的时候执行 1366px布局，CSS 样式如下：下面这段代码的意思是当页面宽度大于等于 860px并小于 1200px的时候执行 1024px布局，CSS 样式如下：下面这段代码的意思是当页面宽度小于 860px的时候执行 720px布局，CSS样式如下：4 网站的具体实施第 6 页 （共 18 页）4.1 确定网站形象风格 所谓网站风格是指网站页面设计上的视觉元素组合在一起的整体形象，展现给人的直观感受。这个整体形象包括网站的配色、字体、页面布局、内容、交互性、海报、宣传语等因素。网站风格应当与工作室的整体形象相一致，比如说工作室的整体色调、工作室的行业性
10、质、工作室文化、提供的相关产品或服务特点都需要在网站的风格中得到体现。4.1.1 网站色彩网站给人的第一印象来自视觉冲击，不同的色彩搭配 4可产生不同的效果。为了凸显网站的前卫感和科技感，在该设计中以蓝色、白色为主。其中蓝色代表永恒、沉静、理智、诚实、清爽、科技，白色则代表了纯真、明快、简单、洁净。4.1.2 网站字体对于字体的选用，本网站选择了标准字体，它是用于标题、主菜单的特有字体。为了体现网站的独有风格，选择“楷体”作为主要字体，旨在给人一种清新明目感。网站的字体及颜色搭配示范如图 4-1所示。图 4-1 网站字体及颜色搭配示范图4.2 确定网站模块该网站主要包含的内容有基本的导航模块、
11、工作室及成员介绍、相关产品及服务介绍、相关网站链接、博客检索功能及后台管理等功能。详情见图 3-1。4.3 网页的具体展示第 7 页 （共 18 页）4.3.1 网站首页网站首页主要介绍了本工作室的工作宗旨、服务性质、服务范围以及核心团队成员的展示，PC 端效果图效果如图 4-2所示。(1)(2)第 8 页 （共 18 页）(3)(4)(5)4-2 网站首页 PC 端效果图网站首页手机端效果图如图 4-3所示。第 9 页 （共 18 页）(1) (2)图 4-3 网站首页手机端效果图4.3.2 联系我们联系我们页面主要呈现的是本工作室成员的详细介绍，以及核心成员的风采展示，PC 端效果如图 4-4所示。(1)(2)
