前端网页设计毕业论文.doc

前端网页设计毕业论文 本科毕业设计（论文） 题目: 学院：专业班级：姓名：指导教师：系主任： 数字媒体技术系网站前端设计与开发学号：学院院长： 二O一三年月日 毕业设计(论文)诚信声明 我谨在此保证：本人所写的毕业设计(论文)，凡引用他人的研 究成果均已在参考文献或注释中列出。设计(论文)主体均由本人独立完成，没有抄袭、剽窃他人已经发表或未发表的研究成果行为。如出现以上违反知识产权的情况，本人愿意承担相应的责任。 声明人(签名)： 年月日 摘要 21世纪是信息高速发达的时代，网络作为当今最流行最方便快捷的媒介也越来 越被人们接受，并且融入我们的生活。随着高校信息化建设的不断推进，网站的作用超越了传统的信息获取，交流它更能体现组织机构的风采，性质。所以高校院系建立本院系美观，专业，易于维护管理的网站已经势在必行。 本论文主要围绕数字媒体技术专业的门户网站为开发主题，最基本也是最必须 的三个技能。前端的开发中，在页面的布局时，HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚，弄明白，这样在开发的过程中才会得心应手。 分析并解决实现中的若干技术问题；介绍了个性化页面的背景及jsp+javascript +mysql系统的一般原理；阐述整个个性化页面生成系统的系统结构及工作原理；分析了系统实现中的特殊性，难点和重点；设计实现用户注册，用户登录，用户管理等jsp页面。分析并解决实现中的若干技术问题；建立完整的校园网站，进行测试并分析结果。 该网站有效地实现用户通过JSP页面访问来进行用户注册，登陆，并对网站内容进行有效的管理，提升了后期添加和删除信息的有效性，具有一定的应用价值 关键字：JSP；用户登录；javascript；网站美化；交互设计。 ABSTRACT Thetwenty-firstCenturyistherapiddevelopmentofinformationage,workas theworldsmostpopularandmostconvenientmediaareincreasinglyaeptedbypeople.Alongwiththeinformationdevelopment,websitefunctionsbeyondthetraditionalinformationacquisition,municationwhichcanbetterreflecttheorganizationstyle，properties.Souniversitiesestablishthedepartments,professionalappearance,easymaintenanceandmanagementofthesitehasbeenimperative. Thisthesismainlyfocusesondigitalmediatechnologymajorportalforthe developmentofthetheme,thethreemostbasicandnecessaryskills.Developmentofthefront,inthelayoutofthepage,HTMLwilldefinetheelements,positioningCSStodisplayelements,andthenthroughtheJavaScripttoachievethecorrespondingeffectandinteraction.Althoughthesurfacelooksliketheseareverysimple,butitneedstograspthingsnever.Inthedevelopment,theneedfortheseconceptsclear,understand,sointhedevelopmentprocesswillbehandy. Themainworkdoneinthisarticleisasfollows: (1)IntroducesthebackgroundandgeneralprincipleofJSP+Javascript+MySQL systempersonalizedpages; (2)Introducesthestructureandworkingprincipleoftheentirepersonalizationpage productionsystem;analysisoftheparticularity,thedifficultyandkeysystem; (3)Thedesignandimplementationofuserregistration,userlogin,usermanagement andotherJSPpage. (4)Analyzeandsolvesometechnicalproblemsinimplementation; (5)Theestablishmentofapletecampussite,testingandanalysis; ThesiteeffectivelyachievetheuserthroughtheJSPpageaesstouserregistration, login,andcarryoneffectivemanagementtothewebsitecontent,enhancetheeffectivenessofthelateadditionanddeletionofinformation,hasacertainapplicationvalue. Keywords：JSP;Userlogin;JavaScript;WebsiteLandscaping;InteractionDesign 目录 摘要 ABSTRACT 第1章绪论.1 1.1选题背景及意义.1 1.2国内外高校网站建设状况.3 1.3研究内容和拟解决的问题.5 1.4本章小结.6 第2章前端开发工具及相关技术.7 2.1前端开发环境.7 2.2前端开发工具.7 2.3前端开发相关技术.8 2.3.1Javascript简介.8 2.3.2Javascript基本特点.8 2.3.3CSS简介.9 2.3.4JQuery.9 2.4本章小结.11 第3章前端布局分析与设计.12 3.1前端总体开发流程及设计.12 3.1.1分层开发.12 3.1.2代码编写.12 3.1.3内部测试与后续优化.13 3.2前端UI设计.14 3.2.1模块分布.14 3.2.2颜色配置.15 xx版 毕业论文 题目： 响应式企业网站设计与实现 学生姓名：罗智刚学号：120xx132专业班级：B12计算机科学与技术2班 指导教师：李莉 企业导师：林志宏 二级学院：电气与信息工程学院 摘要 在信息高速发展的这个时代，网络作为现今最为方便快捷的媒介也越来越被人们接受，并且融入我们的生活。在xx年时，随着HTML5在国内的兴起，也在不断的推进着信息时代的发展，网站也逐渐脱离了传统的枯燥页面风格，如今的HTML5比起以前的HTML来说，更容易维护和管理，而且还能实现跨平台开发，减少开发成本。 本论文主要围绕写意集团的HTML5响应式网站为开发主题，用到的也是最必备的三个技能元素，在布局页面时，用HTML将元素进行定义，布局基础布局；css对展示的HTML元素布局进行定位渲染，然后利用Javascript或者jQuery实现相应的效果和交互。虽然这么看起来很简单，但这里需要认真了解的东西很多。在开发前，需要对这些概念弄清楚，在开发过程中还要考虑兼容，性能等各种问题。 分析并解决实现中的若干技术问题：介绍企业官网个性化页面的背景及HTML5响应式布局的一般原理；阐述整个企业官网的结构及工作原理；分析实现中的难点和重点； 关键词：HTML5;CSS3;响应式;javascript;网站美化;交互设计 abstract Inthiseraofrapiddevelopmentofinformationandworkasthemostconvenientmedianowincreasinglybeingaeptedandintegratedintoourlives.Inxx,withtheriseofHTML5inthecountry,hasalsobeenadvancingthedevelopmentoftheinformationage,thesiteisalsomovingawayfromthetraditionalboringpagestyle,andnowHTML5paredtothepreviousHTMLiseasiertomaintainandmanagement,butalsotoachievecross-platformdevelopment,reducedevelopmentcosts. ThispapermainlyaroundFreehandGroupHTML5Responsivewebsitedevelopmenttopics,usedinthethreemostessentialelementsofskill,inthelayoutofthepage,usingHTMLtodefinetheelements,layoutbasiclayout;csstodisplayHTMLelementspositioninglayoutrendering,thenuseJavascriptorjQuerytoachievetheappropriateeffectsandinteractions.Althoughsuchlooksverysimple,buthereneedtounderstandalotofseriousthings.Beforedevelopment,theneedtoclarifytheseconceptsinthedevelopmentprocess,butalsoconsideravarietyofproblemswithpatibility,performanceandsoon. Analyzeandsolvetechnicalproblemsinimplementationof:Theofficialwebsiteofthegeneralprinciplesofcorporatebackground personalizedpageHTML5andresponsivelayout;elaboratestructureandworkingprincipleofthewholeenterpriseofficialwebsite;AnalysisImplementationdifficultiesandpriorities; Keywords:HTML5;CSS3;responsive;javascript;websitelandscaping;InteractiveDesign 目录 第一章绪论.1 1.1本课题研究的背景和目的.1 1.2国内外HTML5响应式企业网站建设的状况.1 1.3本章小结.2 第二章前端开发及相关技术.3 2.1HTML5前端开发环境.3 2.2HTML5前端开发工具.3 2.3HTML5前端开发相关技术.3 2.3.1javascript简介.3 2.3.2javascript基本特点.4 2.3.3css简介.4 2.3.4jQuery.5 2.4本章小结.5 第三章前端布局分析与设计.6 3.1前端总体开发流程与设计.6 3.1.1分层开发.6 3.1.2代码编写.6 3.1.3内部测试与后续优化.6 3.2前端UI设计.7 3.2.1模块分布.7 3.2.2颜色配置.7 3.2.3css元素.8 3.3交互设计与UI.9 3.4网站结构布局与设计.9 3.5.1网站首页结构.9 3.5.2主题鲜明，富有特色.10 3.5网站前台页面设计.10 3.5.1首页.10 3.5.2其余子页面.10 3.7本章小结.10 摘要：网页界面作为网站信息传达的载体，网页给人最直观的感受就是它的页面框架与构造，网页设计中的构图也足以影响到整个网站给人的感受。就网页其构图而言，其视觉表现力具有影响受众审美情感的作用。本文重点讲述了“轻奢生活网”网页设计中构图技巧的运用。网站定位为时尚信息服务平台，专为热爱时尚、热爱生活的人提供前沿的设计理念与产品，内容分为设计、名品、乐活、家居四大类。运用Photoshop工具制作网站首页及栏目页及栏目子页面。结合构图技巧在网页设计界面中的运用情况，阐述几何图形运用、素材点缀、斜线修饰等构图技巧适应网页界面设计发展的新特点。 关键词：网页界面；构图设计；时尚平台；Photoshop 学院毕业论文(设计) 目录 引言.1 1市场调研.1 1.1时尚信息服务平台现状.1 1.2构图设计在网页设计中的现状.2 2文献检索.3 2.1构图在网页设计中的表现形式.3 2.2构图在网页设计中的规律.3 3设计实践.5 3.1创作初衷.5 3.2创作过程.5 3.4创作总结.20 4设计自评.21 4.1理念与市场.21 4.2创作与社会效益.22 致谢.22 参考文献.22 附录1设计作品图片.23 附录2设计作品光盘.29 引言 “轻奢生活”，不仅代表一种精品生活方式，更代表着大家正在享受的高质量生活细节，而且绝非是遥不可及的。在奢侈品消费观念方面，轻奢早已超越了“珠光宝气”的阶段，而趋于一种理性、健康的消费方式，购买奢侈品不是崇拜，而是能切实反映自我的心境、品位和信念。轻奢生活网”的定位不是“淘便宜”，瞄准的是那些因为欣赏商品的设计感而愿意多掏钱的中高端消费者。轻奢生活网的页面是时尚设计信息的载体，所以页面设计则是浏览者对信息的视觉生理、心理反应的关键。本文从视觉基础理论入手，以构图设计对视觉的影响的运用为主线，分析了网页的板式、文字、色彩、图像等元素的在网页界面中的表达方式。在网页设计上起到事半功倍的效果。从审美的角度阐释了构图设计对网页整体视觉效果的影响。 1市场调研 1.1时尚信息服务平台现状 同时各种折扣和导购信息网站也跟着出现，对各种产品信息进行汇聚和评比，给买家和卖家建立一个公共服务的平台。目前国外的新一代导购网站模式正在日益成熟，那就是社会购物，它是基于社交网络SocialNetworking的衍生品，这类网站从xx年以后出现，借助Web2.0的各项技术日益形成以借助Crowd的力量进行产品的汇聚、评比、推荐和分享，如何汇聚每个人的力量来进行购物成为了电子商务前段的新亮点。 国内外的设计师有很多出色的设计品，但他们并不擅于商业经营，导致设计品无法被更多的人发现。还有一部分消费者，他们热爱生活热爱时尚，有一定的购买能力，也愿意买高附加值的设计商品，但却不知道在哪里可以买到这些商品。 我也经过了大量的调查、查阅了很多书籍报刊资料。我参考了“美丽说”、“蘑菇街”、“返利网”等导购网站的营运模式和主要客户群，以及他们网站发展一些劣势阻力。蘑菇街的成功，告诉我们，任何事情都需要创新，只有创新才能够受 到大众的喜爱。当然，蘑菇街的成功不是偶然，这是迎合了目前大家越来越喜欢社交网站的趋势，认清消费者心理，当然这跟蘑菇街团队运营是密不可分的，没有好的运营团队也是不可能成功的。蘑菇街以分享社交为前提，吸引一大批女性的喜爱。这是社交与购物的一个非常好的结合。不仅增加了用户体验度，也给消费者提供了展示自己和分享自己喜爱物品的平台。从淘宝客，到返利网，再到现在的购物分享网站，我们很明显的可以看出，现在的用户似乎对用户体验度的要求是越来越高，因此我们在运营一个网站的时候，我们必须把用户体验度放在第一位，要相当重视，只有把用户体验度弄上去了，网站才能做得很好，用户才会更喜欢。所以研究构图设计对网页的影响是很有必要的。另外还有“花瓣网”、“淘宝网”中的家居展示页面、以及“瑞丽”、“YOKA”等时尚类网站。在了解市场动态的同时也发现针对时尚设计在生活方面的网站比较少，因此“轻奢生活”网这个生活类的设计师商品社会化导购网站是可行的。 1.2构图设计在网页设计中的现状 1.2.1网页设计的发展 作为新型平面设计的网页页面设计，数字化界面运用了和物化界面相同的视觉构成元素。新的大众媒介数字化的传播手段网络，为我们承载以前诸多媒体综合起来都难以承载的信息量，它以时效性、交互性、更新及时、不受时间、地域的限制、信息反馈及时、准确的特点，带领我们进入信息化的时代，也为我们带来了全新的视觉阅读体验。根据构图设计的不同表现，网页视觉表现为网络信息表现与信息的传递中的重要部分。 我国目前的设计走向问题，已成为设计师们研究的焦点，无论是平面设计、建筑设计或者网页设计都同样会遇到这样的问题。网页设计上出现了欧美、日、韩三大风格的并立，而我国的设计却处于一种模仿的状态，多表现为形式的跟风，少有实质性的研究。网页设计发展的近些年里，网页的视觉表现已经从当初文字编排的单一样式，发展到多种视觉元素的综合运用，而新媒介下的网页设计更是成为了视觉传达