网设计方案报告专业资料.doc

上传人：精***

文档编号：2423487

上传时间：2024-05-30

格式：DOC

页数：41

大小：6.39MB

《网设计方案报告专业资料.doc》由会员分享，可在线阅读，更多相关《网设计方案报告专业资料.doc（41页珍藏版）》请在咨信网上搜索。

兰州财经大学陇桥学院信息工程系课程设计报告课程名称：动态网页设计与实现设计题目：故乡情系别：信息工程系专业 (方向)：电子商务年级、班：级（1）班学生姓名：刘晨晨学生学号：0680118 指导教师：张鑫 12月30 青春Happying 一、网站设计背景青春很短暂却很美好。咱们青春里包括了太多美好东西。有亲情，那是咱们青春开始地方。有情谊，那是咱们青春里最宝贵东西。有爱情，有咱们青春有咱们最贵重东西。网页从咱们青春开始设计，让浏览者可以清晰结识咱们青春。二、网站分析与设计（一）网站功能及规定 1. 借助网站媒体支持能力，为咱们青春各个人物、事情做了最直观表达，达到宣传效果。 2. 本网站定位于展示型静态网站，重点是让人们可以更主观理解咱们青春都包括什么，除却主页，其她五个页面都分别展示了亲情，情谊，爱情，贵重回忆以及咱们青春不散场等方面。以便浏览者浏览，期间有大量图片，尚有触动人心故事，让浏览者浏览过后可以对网站留下深刻影响。（二）网站模块构造设计通过对青春各个方面分析，为了让浏览者更简洁看到效果，我对每一种网页导航做了简化解决，每一种网页导航都相称简洁。在设计方面，主页设计相称简朴，由浅入深，可以较好吸引浏览者浏览。采用图片文字相结合办法，使其网页更具吸引性。主调偏暖，使人们在理解青春时候，可以敢到高兴，这正是咱们网页所要达到目。其中，整个网站页面涉及如图1所示模块：青春Happying 首页家人情谊重要爱情青春至爱青春不散场图1 模块划分三、网站设计与实现（一）素材准备 1、做网站，准备素材是最重要一环，不但要收集许多内容各异文字图片，还要设计各种网站排版格式与美工。 2、网站布局是我从网上下载，某些框架都是现成，但是其中涉及图片文字是自己找并且在PS上自己修改，关于文字某些，诸多内容是自己写，关于英文某些，有是从网上翻译过来，保证了其对的性。（二）网页设计更简洁看到青春里对咱们重要人和事：浏览者普通对不同网站风格规定是不同。咱们网站主题是青春Happying，因此我采用暖色调底色，图片也都是积极向上。使咱们网站做到“高兴”。（三）制作中所需要技术 1. Photoshop 2. Dreamweaver 3. 文本 4.图片展示 5.超链接链接办法四、网站测试通过web浏览器测试网站网页与否显示。（本网站适合在火狐、360浏览器浏览，不适合在IE浏览器进行浏览）将做好六个页面中代码分别放入Dreamweaver中，点击F12按钮，选取火狐或360浏览器。如图4所示：图2 测试按钮（一）首页代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width，initial-scale=1"> <title>青春Happying/home</title>  <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="" rel="stylesheet"> <link rel="stylesheet" href="css/flexslider.css" type="text/css"> <link href="css/styles.css?v=1.6" rel="stylesheet"> <link href="css/queries.css?v=1.6" rel="stylesheet"> <link href="css/jquery.fancybox.css" rel="stylesheet">  <link href=':100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>    </head> <body> <section class="navigation"> <div class="container-fluid"> <div class="row"> <div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2"> <nav class="pull"> <ul class="top-nav"> <li><a href="#media">青春路上 <span class="indicator"><i class="fa fa-angle-right"></i></span></a></li> </ul> </nav> </div> </div> </div> </section> <section class="hero" id="hero"> <div class="container"> <div class="row"> <div class="col-md-12 text-right"> <a href="#"><i class="fa fa-navicon fa-2x nav_slide_button"></i></a> </div> </div> <div class="row"> <div class="col-md-8 col-md-offset-2 text-center"> <h1 class="animated bounceInDown">青春Happying</h1> <p class="animated fadeInUpDelay">宁愿跑起来被绊倒无多次，也不乐意规规矩矩走一辈子。就算跌倒也要豪迈笑。青春是一曲流年，咱们似乎懵懂中学会了爱惜。</p> </div> </div> <div class="row"> <div class="col-md-2 col-md-offset-5 text-center"> <a href=";byline=0&portrait=0&color=1883ad&autoplay=1" class="hero-play-btn various fancybox.iframe">Play Button</a> </div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3 text-center"> <a href="family.html" class="get-started-btn">Get Started</a> </div> </div> </div> </section> <section class="download-now" id="getstarted"> <div class="container"> <div class="row"></div> </div> </section> <section class="testimonials" id="media"> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <div id="firstSlider"> <ul class="slides"> <li> <div class="avatar"><img src="../图片/亲情2.jpg" width="152" height="128"></div> <h1>我会在你身旁把你搀扶。就像当时你带着我，走出人生第一步</h1> </li> <li> <div class="avatar"><img src="../图片/情谊.jpg" width="152" height="128"></div> <h1>诚好情谊，不会因时间阻隔而冲淡。昔日承诺，也不会因漫长岁月而变化。</h1> </li> <li> <div class="avatar"><img src="../图片/爱情.jpg" width="152" height=128"></div> <h1>书不成字，纸短情长。</h1> </li> </ul> </div> </div> </div> </div> </section> <section class="features" id="features"> <div class="container"> <div class="row"></div> <div class="row"></div> </div> </section> <div class="copyrights"></div> <section class="design" id="design"> <div class="container"> <div class="row"></div> </div> </section>  <script src=""></script> <script src="js/jquery.fancybox.pack.js"></script>  <script src="js/bootstrap.min.js"></script> <script src="js/scripts.js?v=1.7"></script> <script src="js/jquery.flexslider.js"></script> <script src="js/jquery.smooth-scroll.js"></script> <script src="js/modernizr.js"></script> <script src="js/waypoints.min.js"></script> </body> </html> 图3 首页截图图4 首页截图（二）体会家人某些代码： <header id="header"> <div class="center text-center"> <h1 class="bigheadline">Family</h1> <h4 class="subheadline">We are family,so we will love each other，forever</h4> </div> <div class="bottom"> <a data-scroll href="#navigation" class="scrollDown animated pulse" id="scrollToContent"><i class="pe-7s-angle-down-circle pe-va"></i></a> </div> </header>  <section id="navigation"> <div class="container"> <div class="row"> <div class="col-xs-6"> <div class="logo"><a data-scroll href="#body" class="logo-text">Famiiy Love</a></div> </div> <div class="col-xs-6"> <div class="nav"> <a href="#" data-placement="bottom" title="Menu" class="menu" data-toggle="dropdown"><i class="pe-7s-menu"></i></a> <div class="dropdown-menu"> <div class="arrow-up"></div> <ul> <li><a data-scroll href="#body">Stories of Love<i class="pe-7s-home"></i></a><span class="menu-effect"></span></li> </ul> </div> </div> </div> </div> </div> </section>   <section id="portfolio" class="portfolio-area"> <div class="container"> <h2 class="block_title">Stories of Love</h2> <div class="row port cs-style-3"> <div class="col-md-4 col-sm-6 col-xs-12 item-space"> <figure> <img src="../图片/小.jpg" width="361" height="325"> <figcaption> <h3>Litter</h3> <span>当你还很小时候，父母花了很长时间教你用勺子、筷子吃东西，教你穿衣服、系鞋带、系扣子，教你洗脸，教你梳头发，教你做人道理</span> <a href="friendship.html">Take a look </a></figcaption></figcaption> </figure> </div> <div class="col-md-4 col-sm-6 col-xs-12 item-space"> <figure><img src="../图片/老.jpg" width="361" height="325"> <figcaption> <h3>Older</h3> <span>当她们有天变老时，当她们想不起来或接不上话时，当她们做事不利索时，请不要责怪她们。由于你在慢慢长大，而她们在慢慢变老。</span> <a href="friendship.html">Take a look </a></figcaption></figcaption> </figure> </div> <div class="col-md-4 col-sm-6 col-xs-12 item-space"> <figure> <img src="../图片/老2.jpg" width="361" height="325"> <figcaption> <h3>Love</h3> <span>如果有一天，当她们站也站不稳走也走不动时候，请紧紧握住她们手，陪她们慢慢地走。就像当年她们牵着咱们同样...</span> <a href="friendship.html">Take a look </a></figcaption></figcaption> </figure> </div> <div class="col-md-4 col-sm-6 col-xs-12 item-space"> <figure> <img src="../图片/老3.jpg" width="361" height="325"> <figcaption> <h3>Leave</h3> <span>当你羽翼丰满，父母放手让你独自飞翔时，你体会到了什么叫怀念。父母唠叨变成了你最怀念话语。当所有都关怀你飞累不累时，也许只有她们守在电话前紧张着你累不累。</span> <a href="friendship.html">Take a look </a></figcaption></figcaption> </figure> </div> <div class="col-md-4 col-sm-6 col-xs-12 item-space"> <figure> <img src="../图片/老4.jpeg" width="361" height="325"> <figcaption> <h3>Long or Short</h3> <span>父母是咱们青春开始，她们教会咱们做人道理，在咱们荒唐青春里，有过她们笑，泪。在咱们不懂得爱惜、肆意挥霍青春时候，可曾想过：咱们还能陪她们多久，或者，她们还能陪咱们多久。长or短？</span> <a href="friendship.html">Take a look </a></figcaption></figcaption> </figure> </div> <div class="col-md-4 col-sm-6 col-xs-12 item-space"> <figure> <img src="../图片/老5.jpg" width="361" height="325"> <figcaption> <h3>Start</h3> <span>极其平凡却又深厚感情，留在她们和咱们心里，陪伴咱们走过毕生。青春才刚开始，温暖阳光下咱们，无所畏惧昂首阔步。</span> <a href="friendship.html">Take a look </a></figcaption> </figure> </div> </div> </div> </section> </body> 图5 家人截图（三）、温暖情谊某些代码 <body>  <div class="banner"> <div class="header"> <div class="container"> <div class="header-main"> <div class="logo"><a href="index.html"><img src="images/cr-logo.png" alt=""></a></div> <ul class="bann-icons"> <li><a href="#" class="fa"> </a></li> <li><a href="#" class="tw"> </a></li> <li><a href="#" class="g"> </a></li> </ul> <div class="top-nav"> <span class="menu"> <img src="images/icon.png" alt=""/></span> <nav class="cl-effect-1"> <ul class="res"> <li><a class="scroll"href="#about">About</a></li> <li><a class="scroll"href="#services">friendship</a></li> <li><a href="第4个网页/love.html">Finish or begin</a></li> </ul> </nav>  <script> $( "span.menu" ).click(function() { $( "ul.res" ).slideToggle( 300，function() { // Animation complete. }); }); </script> </div> <div class="clearfix"> </div> </div> </div> </div> </div>   <div class="features"> <div class="container"> <div class="features-main"> <div class="col-md-6 fea-left"> <a href="#" rel="title" class="mask"> <img src="../图片/情谊1.jpg" width="700" height="369" alt="" class="img-responsive zoom-img"> </a> </div> <div class="col-md-6 fea-right"> <div class="fea-top-img"> <a href="#" rel="title" class="mask"> <img src="../图片/情谊2.jpg" width="700" height="369" alt="" class="img-responsive zoom-img"> </a> </div> <div class="fea-bot-img"> <a href="#" rel="title" class="mask"> <img src="../图片/情谊3.jpg" width="700" height="369" alt="" class="img-responsive zoom-img"> </a> </div> </div> <div class="clearfix"> </div> </div> </div> </div>  <div class="copyrights">Collect from <a href="" title="网站模板">网站模板</a></div>  <div class="about" id="about"> <div class="container"> <div class="about-main"> <h4>Beautiful Essay</h4> <h5>世界很忙，而你刚好乐意为我有空</h5> <p>其实有时候，你可以清晰地懂得，有再会说出去了，就真是再会了。大学毕业散伙饭，这中间小某些人，你也许是第一次见到，也是最后一次。我有她们联系方式，咱们还会再会面，咱们这样对自己说。可翻看微信通讯录，点过赞评论过，有着不少互动那些，其实，好久都没有再会过了。“有时间出来聚聚“，评论里咱们都喜欢那么说，也许有那么一瞬间，咱们都当真了。今天又重要约会，算了，还是把班加完吧.....原觉得全世界都是周一到周五上班上学，周六日休息，咱们应当有很大段重叠休息时光才对。然而不是这样。读书时候，世界简朴，我和同窗，我和父母。不外乎这两种关系，毕业之后感觉是：还能留在你身边人，已属不易。我愿你约你，你乐意出来，我有时间，你也刚好有时间，缺失了其中任何一环，都进行不下去。其实咱们都心里明白。每一次回绝，有真忙，也有"不乐意为了你有空闲"罢了。你啊，请不要做一头扎进事情里猛兽，冷酷而残忍令人胆怯，在我猛低头间错过美好事物里，大概已经存满了可以用足毕生勇气。世界很忙，谢谢你，刚好乐意为我有空。</p> </div> </div> </div>   <div class="testimo"> <div class="container"> <div class="testimon-main"> <h3>Youth</h3> <p>Relationshio in this life we all speak in fridenship</p> </div> </div> </div>   <div class="services" id="services"> <div class="container"> <div class="services-main"> <div class="service-top"> <h3>friendship</h3> </div> <div class="col-md-6 services-grid"> <div class="col-md-5 serv-img"><img src="../图片/有你.jpeg" width="405" height="405" alt="" class="img-responsive"></div> <div class="col-md-7 serv-text"> <h4><a href="#">Together</a></h4> <p>咱们曾经说过，要陪着彼此始终到永远。牵彼此手，是咱们青春里最美瞬间。</p> </div> <div class="clearfix"> </div> </div> <div class="col-md-6 services-grid"> <div class="col-md-5 serv-img"><img src="../图片/有你2.jpeg" width="405" height="405" alt="" class="img-responsive"></div> <div class="col-md-7 serv-text"> <h4><a href="#">Cry</a></h4> <p>青春里，咱们都曾经为某个人哭过。在咱们最伤心时候，是朋友陪着咱们。做咱们最坚强后盾。 </p> </div> </div>

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档保存到电脑，查找使用更方便

14 金币

申诉本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请申请举报、认领或删除 立即下载

配套讲稿：: 如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
特殊限制：: 部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
关键词：: 设计方案报告专业资料

咨信网温馨提示：
1、咨信平台为文档C2C交易模式，即用户上传的文档直接被用户下载，收益归上传人（含作者）所有；本站仅是提供信息存储空间和展示预览，仅对用户上传内容的表现方式做保护处理，对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿，我们不确定上传用户享有完全著作权，根据《信息网络传播权保护条例》，如果侵犯了您的版权、权益或隐私，请联系我们，核实后会尽快下架及时删除，并可随时和客服了解处理情况，尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确)，网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据，个别因单元格分列造成显示页码不一将协商解决，平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺，下载前须认真查看，确认无误后再购买，务必慎重购买；若有违法违纪将进行移交司法处理，若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传，付费前请自行鉴别，如您付费，意味着您已接受本站规则且自行承担风险，本站不进行额外附加服务，虚拟产品一经售出概不退款（未进行购买下载可退充值款），文档一经付费（服务费）、不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印，是因预览和防盗链等技术需要对页面进行转换压缩成图而已，我们并不对上传的文档进行任何编辑或修改，文档下载后都不会有水印标识（原文档上传前个别存留的除外），下载后原文更清晰；试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓；PPT和DOC文档可被视为“模板”，允许上传人保留章节、目录结构的情况下删减部份的内容；PDF文档不管是原文档转换或图片扫描而得，本站不作要求视为允许，下载前自行私信或留言给上传者【精***】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用；网站提供的党政主题相关内容(国旗、国徽、党徽－－等)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
6、文档遇到问题，请及时私信或留言给本站上传会员【精***】，需本站解决可联系【微信客服】、【 QQ客服】，若有其他问题请点击或扫码反馈【服务填表】；文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“【版权申诉】”（推荐），意见反馈和侵权处理邮箱：1219186828@qq.com；也可以拔打客服电话：4008-655-100；投诉/维权电话：4009-655-100。

关于本文

本文标题：网设计方案报告专业资料.doc
链接地址：https://www.zixin.com.cn/doc/2423487.html

精***

内容提供者

实名认证

查看上传人更多文档

部分上传会员的收益排行 01、路***（￥15400+），
02、曲****（￥15300+），
03、wei****016（￥13200+）,
04、大***流（￥12600+），
05、Fis****915（￥4200+），
06、h****i（￥4100+），
07、Q**（￥3400+），
08、自******点（￥2400+），
09、h*****x（￥1400+），
10、c****e（￥1100+）,
11、be*****ha（￥800+），
12、13********8（￥800+）。

相似文档

自信AI助手