网页设计报告

兰州财经大学陇桥学院信息工程系课程设计报告课程名称：动态网页设计与实现设计题目：家乡情系别：信息工程系专业(方向)：电子商务年级、班：2014级（1）班学生姓名：刘晨晨学生学号：20140680118指导教师：张鑫2016年12月303青春Happying一、网站设计的背景青春很短暂却很美好。我们的青春里包含了太多美好的东西。有亲情，那是我们青春开始的地方。有友情，那是我们青春里最宝贵的东西。有爱情，有我们青春有我们最珍贵的东西。网页从我们的青春开始设计，让浏览者可以清晰的认识我们的青春。二、网站分析与设计（一）网站功能及要求1.借助网站的媒体支持能力，为我们青春的各个人物、事情做了最直观的表达，达到宣传效果。2.本网站定位于展示型静态网站，重点是让人们可以更主观的了解我们的青春都包含什么，除却主页，其他五个页面都分别展示了亲情，友情，爱情，珍贵回忆以及我们的青春不散场等方面。方便浏览者浏览，期间有大量的图片，还有触动人心的故事，让浏览者浏览过后可以对网站留下深刻的影响。（二）网站模块结构设计通过对青春各个方面的分析，为了让浏览者更简洁的看到效果，我对每一个网页的导航做了简化处理，每一个网页的导航都相当简洁。在设计方3面，主页的设计相当简单，由浅入深，可以很好的吸引浏览者浏览。采用图片文字相结合的方法，使其网页更具吸引性。主调偏暖，使人们在了解青春的时候，可以敢到快乐，这正是我们的网页所要达到的目的。其中，整个网站的页面包括如图1所示的模块：图1模块划分三、网站的设计与实现（一）素材的准备1、做网站，准备素材是最重要的一环，不仅要收集许多内容各异的文字图片，还要设计各种网站的排版格式与美工。2、网站的布局是我从网上下载的，一些框架都是现成的，但是其中涉及的图片文字是自己找并且在PS上自己修改的，关于文字部分，很多的内容是自己写的，关于英文部分，有的是从网上翻译过来的，保证了其正青春Happying首页家人友情的重要爱情青春至爱青春不散场3确性。（二）网页设计更简洁的看到青春里对我们重要的人和事：浏览者通常对不同的网站的风格要求是不同的。我们的网站主题是青春Happying，所以我采用暖色调的底色，图片也都是积极向上的。使我们的网站做到“快乐”。（三）制作中所需要的技术1.Photoshop2.Dreamweaver3.文本4.图片展示5.超链接链接方法四、网站测试通过web浏览器测试网站网页是否显示。（本网站适合在火狐、360浏览器浏览，不适合在IE浏览器进行浏览）将做好的六个页面中的代码分别放入Dreamweaver中，点击F12按钮，选择火狐或360浏览器。如图4所示：图2测试按钮3（一）首页代码：!DOCTYPEhtmlhtmllang=enheadmetacharset=utf-8metahttp-equiv=X-UA-Compatiblecontent=IE=edgemetaname=viewportcontent=width=device-width,initial-scale=1title青春Happying/home/title!--Bootstrap--linkhref=css/bootstrap.min.cssrel=stylesheetlinkhref==stylesheetlinkrel=stylesheethref=css/flexslider.csstype=text/csslinkhref=css/styles.css?v=1.6rel=stylesheetlinkhref=css/queries.css?v=1.6rel=stylesheetlinkhref=css/jquery.fancybox.cssrel=stylesheet!--Fonts--linkhref='=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic'rel='stylesheet'type='text/css'!--HTML5ShimandRespond.jsIE8supportofHTML5elementsandmediaqueries--!--WARNING:Respond.jsdoesn'tworkifyouviewthepageviafile://--!--[ifltIE9]scriptsrc==![endif]--/headbodysectionclass=navigationdivclass=container-fluiddivclass=rowdivclass=col-md-8col-md-offset-2col-sm-8col-sm-offset-2col-xs-8col-xs-offset-2navclass=pullulclass=top-navliahref=#media青春路上spanclass=indicatoriclass=fa3fa-angle-right/i/span/a/li/ul/nav/div/div/div/sectionsectionclass=heroid=herodivclass=containerdivclass=rowdivclass=col-md-12text-rightahref=#iclass=fafa-naviconfa-2xnav_slide_button/i/a/div/divdivclass=rowdivclass=col-md-8col-md-offset-2text-centerh1class=animatedbounceInDown青春Happying/h1pclass=animatedfadeInUpDelay宁愿跑起来被绊倒无数次，也不愿意规规矩矩走一辈子。就算跌倒也要豪迈的笑。青春是一曲流年，我们似乎懵懂中学会了珍惜。/p/div/divdivclass=rowdivclass=col-md-2col-md-offset-5text-centerahref==0&byline=0&portrait=0&color=1883ad&autoplay=1class=hero-play-btnvariousfancybox.iframePlayButton/a/div/divdivclass=rowdivclass=col-md-6col-md-offset-3text-centerahref=family.htmlclass=get-started-btnGetStarted/a/div/div/div/sectionsectionclass=download-nowid=getstarteddivclass=containerdivclass=row/div/div/sectionsectionclass=testimonialsid=media3divclass=containerdivclass=rowdivclass=col-md-12text-centerdivid=firstSliderulclass=slideslidivclass=avatarimgsrc=../图片/亲情2.jpgwidth=152height=128/divh1我会在你身旁把你搀扶。就像当初你带着我，走出人生第一步/h1/lilidivclass=avatarimgsrc=../图片/友情.jpgwidth=152height=128/divh1真挚的友谊，不会因时间的阻隔而冲淡。昔日的承诺，也不会因漫长的岁月而改变。/h1/lilidivclass=avatarimgsrc=../图片/爱情.jpgwidth=152height=128/divh1书不成字，纸短情长。/h1/li/ul/div/div/div/div/sectionsectionclass=featuresid=featuresdivclass=containerdivclass=row/divdivclass=row/div/div/sectiondivclass=copyrights/divsectionclass=designid=designdivclass=containerdivclass=row/div/div/section!--jQuery(necessaryforBootstrap'sJavaScriptplugins)--scriptsrc==js/jquery.fancybox.pack.js/script3!--Includeallcompiledplugins(below),orincludeindividualfilesasneeded--scriptsrc=js/bootstrap.min.js/scriptscriptsrc=js/scripts.js?v=1.7/scriptscriptsrc=js/jquery.flexslider.js/scriptscriptsrc=js/jquery.smooth-scroll.js/scriptscriptsrc=js/modernizr.js/scriptscriptsrc=js/waypoints.min.js/script/body/html图3首页截图图4首页截图（二）体会家人部分代码：3headerid=headerdivclass=centertext-centerh1class=bigheadlineFamily/h1h4class=subheadlineWearefamily,sowewillloveeachother,forever/h4/divdivclass=bottomadata-scrollhref=#navigationclass=scrollDownanimatedpulseid=scrollToContenticlass=pe-7s-angle-down-circlepe-va/i/a/div/header!--Navigationarea--sectionid=navigationdivclass=containerdivclass=rowdivclass=col-xs-6divclass=logoadata-scrollhref=#b