中国梦大学生综合网站设计与实现网页设计与制作实践考核作品设计说明书.docVIP

2016—2017学年第一 任课教师：  摘要 本网页主要HTML语言编写，利用Adobe Dreamweaver CS6作为开发工具，网站是以提倡年轻人积极向上生活方式，引导他们热爱生活，敢于追求梦想的理念作为主题。具体分为中国梦、音乐和生活三个模块。都是按照现在年轻人的生活方式而设计的。每个模块里都有资源共享的模块，能够将每个人的不同资源进行最大程度的共享，并且还可以交到志同道合的朋友。通过分享和沟通，让彼此见证成长，共同进步，为实现我们的梦想而努力，更是为中国梦贡献出自己的力量。 关键字：中国梦 青春 音乐 生活 目录 一、网页概述 1 1.1网页简介 1 1.2 网页组成 1 1.2.1主页 1 1.2.2中国梦 1 1.2.3音乐 1 1.2.4生活 1 二、网页设计 2 2.1主页的设计 2 2.1.1logo设计 2 2.1.2banner设计 2 2.1.3子页导航 2 2.1.4底部 2 2.1.5风格与色彩搭配 3 2.2子页设计 3 2.2.1中国梦子页 3 2.2.2音乐子页 4 2.2.3生活子页 6 2.3技术运用 7 三、总结 7 四、致谢 8 五、附录 8 一、网页概述 1.1网页简介 本次网页设计，主要用HTML语言编写，利用Dreamweaver8.0 作为开发 工具，中间插入了一些 JavaScript语言用以编制一些特效，如左右移动图片，主要内容是有关年轻人的生活方式和理想追求，以图片和文字介绍相结合的方式，加上一些有关资源的链接，以网站浏览的方式为新时代的年轻人提供一个交流理想、分享资源、共同成长的一个平台。希望能够在聚集一大批有理想有抱负，积极面对生活的年轻人，让这里成为一个为你提供温暖的小窝。 1.2 网页组成 1.2.1主页 主页包括关于、联系。还有三个模块中国梦、音乐和生活。其中关于和音乐部分是我主要负责设计制作的。 1.2.2中国梦 有“曾经”、“现在”和“未来”三个小版块来记录你梦想的轨迹。“祖国给我力量”板块收集了所有关于国家的一些扶持和奖励政策，可是实时了解必威体育精装版的动态。“共同见证梦想的成长”板块是给大家共同分享和交流追梦过程的经验以及酸甜苦辣，让大家共同见证梦想的诞生。 1.2.3音乐 首先有四个小板块，分别介绍将音乐分为四个种类，是用户可以通过自己的喜好来选择不同风格的音乐。然后是音乐资源分享板块，这里可以互相分享一些小众的音乐资源，并且可以找到一些收费的音乐资源。最后按照分享资源的多少盒下载量来进行一个综合排行榜。 1.2.4生活 头部是四个板块，分别是运动、奋斗、发现、张扬。体现出年轻人该有的活力，可以根据自己的个性点击不同的板块，里面有符合板块主题的内容。然后是推荐模块，每天更新不同的内容，根据用户的浏览习惯，提供必威体育精装版的内容。然后就是分享的部分，秀出你的生活。 二、网页设计 2.1主页的设计 2.1.1logo设计 Logo是用英文单词young组成，黄底白字，表达出我们年轻的主题。 图2.1 2.1.2banner设计 由个模块精选出来的一些热门内容通过JavaScript的滑动效果，循环的展现出来。 图2.2 2.1.3子页导航 用每个模块的英文字母首字母作为logo，黑底白字，下面在加上子页的英文，简单明了。 图2.3 2.1.4底部 底部是一下有关的网站的链接。 图2.4 2.1.5风格与色彩搭配 整个首页我们给大家展现出的是一个风格简洁、大方的感觉。色彩以黑白红为主，黑白给人以简洁明了，红色加以反差，是整个风格显得简洁而不简单，绚丽而又脱俗。 2.2子页设计 2.2.1中国梦子页 首先是一个大的背景图，加上习近平总书记的关于中国梦的论述。 图2.5 然后就是三个小的分模块：NOCE、NOW、FUTURE; 图2.6 再就是“祖国给你力量”和“共同见证梦想的成长”两个模块。都是以左边图片，右边文字进行排版的。 最后是与主页相同的底部。 2.2.2音乐子页 首先是一幅大的音乐现场图，下面接着嵌入四个小的音乐分类模块。主要代码为： !-- banner -- div class=music_banner div class=container div class=caption div class=slider /div /div /div /div !-- //banner -- !-- banner-bottom -- div class=banner-bottom div class=container div class=bottom-grids div class=col