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

兰州财经大学陇桥学院 信息工程系课程设计汇报 课 程 名 称：动态网页设计和实现 设 计 题 目：家乡情 系 别：信息工程系 专 业 (方 向)：电子商务 年 级、 班：级（1）班 学 生 姓 名：刘晨晨 学 生 学 号：0680118 指 导 教 师：张鑫 12月30 青春Happying 一、网站设计背景 青春很短暂却很美好。我们青春里包含了太多美好东西。有亲情，那是我们青春开始地方。有友谊，那是我们青春里最宝贵东西。有爱情，有我们青春有我们最珍贵东西。网页从我们青春开始设计，让浏览者能够清楚认识我们青春。 网站分析和设计 （一）网站功效及要求 借助网站媒体支持能力， 为我们青春各个人物、事情做了最直观表示，达成宣传效果。 本网站定在展示型静态网站，关键是让大家能够更主观了解我们青春全部包含什么，除却主页，其它五个页面全部分别展示了亲情，友谊，爱情，珍贵回想和我们青春不散场等方面。方便浏览者浏览，期间有大量图片，还有触感人心小说，让浏览者浏览过后能够对网站留下深刻影响。 （二）网站模块结构设计 经过对青春各个方面分析，为了让浏览者更简练看到效果，我对每一个网页导航做了简化处理，每一个网页导航全部相当简练。在设计方面 ，主页设计相当简单，由浅入深，能够很好吸引浏览者浏览。采取图片文字相结合方法，使其网页更具吸引性。主调偏暖，使大家在了解青春时候，能够敢到愉快，这正是我们网页所要达成目标。其中，整个网站页面包含图1所表示模块： 青春Happying首页家人友谊关键爱情青春至爱青春不散场 青春Happying 首页 家人 友谊关键 爱情 青春至爱 青春不散场 图1 模块划分 网站设计和实现 （一）素材准备 做网站，准备素材是最关键一环，不仅要搜集很多内容各异文字图片，还要设计多种网站排版格式和美工。 网站布局是我从网上下载，部分框架全部是现成，不过其中包含图片文字是自己找而且在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 !-- Bootstrap -- 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 !-- Fonts -- link href=:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic rel=stylesheet type=text/css !-- HTML5 Shim and Respond.j