基于Bootstrap的网页开发

1JIANGSUUNIVERSITY本科毕业论文基于bootstrap的网页设计Bootstrap-basedwebdesign学院名称：计算机科学与通信工程学院专业班级：软件（嵌入式）1102班学生姓名：缪江超指导教师姓名：马汉达指导教师职称：高级工程师2015年6月2基于bootstrap的网页设计计算机科学与通信工程学院软件工程（嵌入式）缪江超摘要：：当今社会，网络是人们生活中不可或缺的一部分，网页则是传递信息的重要媒介。随着时代的进步，网页设计也随着网络技术的发展而不断发展。计算机学院实验中心信息管理系统，是2004年开发的，因设计开发时间较早，其界面已不适应当前的技术发展，不能满足师生对于网站美观要求。Bootstrap是当下最受人们欢迎的前端框架，是基于HTML、CSS、JAVASCRIPT的，它简洁灵活的特性使得Web开发更加快捷，Bootstrap提供了优雅的HTML和CSS规范，它由动态CSS语言Less写成。本文针对实验中心网站得主要问题，介绍了网页设计的相关理论，使用Bootstrap框架，对实验中心网站进行了重新布局设计，使得网站界面更为美观，用户体验更好。关键字：前端开发Bootstrap布局架构实验室网站3Bootstrap-basedwebdesignMiaoJiangchao,ComputerScienceandCommunicationEngineering,SoftwareEngineering(embedded)ProfessionalAbstract:Nowadays,networksareanindispensablepartofpeople'slives,thepageisanimportantmediumtotransmitinformation.Withtheprogressofthetimes,withthedevelopmentofnetworktechnology,webdesigncontinuetodevelop.SchoolofComputerScienceExperimentCenterInformationManagementSystem,developedin2004,duetothedesignanddevelopmenttimeearlier,theinterfacehasnotadaptedtocurrenttechnologicaldevelopments,andcannotmeettheaestheticrequirementsforteachersorstudents.NowBootstrapisthemostpopularfrontframe,whichisbasedonHTML,CSS,JAVASCRIPT,whichisacleanandflexiblefeaturesthatmakeWebdevelopmentfaster.BootstrapofferselegantlyHTMLandCSSspecification,whichiswrittenbythedynamicCSSlanguageLess.Inthispaper,themainproblemistheExperimentalCentersite,introducesthetheoryofwebdesign,useBootstrapframework,theexperimentalcentersitere-layoutdesign,makingthesitemoreattractiveinterface,betteruserexperience.KeyWords：Front-enddevelopmentBootstrapLayoutArchitectureLaboratorysite4目录第一章绪论........................................................................................................................11.1界面设计的背景与研究意义........................................................................11.2实验室网站界面重新设计的需求................................................................2第二章相关技术与理论....................................................................................................42.1HTML相关介绍...............................................................................................42.1.1HTML简介...........................................................................................42.1.2HTML5优缺点.....................................................................................42.1.3支持HTML5的相关浏览器.................................................................42.2CSS3相关介绍...............................................................................................52.2.1CSS3简介...........................................................................................52.2.2CSS3影响...........................................................................................52.3Bootstrap介绍.............................................................................................52.3.1Bootstrap概览.................................................................................52.3.2Bootstrap的特点.............................................................................62.3.4Bootstrap的优缺点.........................................................................62.3.5Bootstrap使用的必要性.................................................................72.4Webstorm技术介绍.....................................................................................72.4.1Webstorm简介.................................................................................72.4.2Webstorm特色功能.........................................................................72.4.3Webstorm优缺性.............................................................................8第三章实验室网站布局设计............................................................................................93.1设计立意........................................................................................................93.2设计原则........................................................................................................93.3网站结构规划................................................................................................93.4布局的步骤..................................................................................................113.4.1草图..............................................................................113.4.2粗略布局..........................................................................................113.4.3将布局细化......................................................................................1153.5网页排版原则...............................................................................................113.6网站设计要素...............................................................................................123.6.1网页标题..........................................................................................123.6.2网页链接..........................................................................................123.7网站详细设计...............................................................................................133.7.1网站基本结构布局图..................................................................