中国梦大学生综合网站的设计与实现--《网页设计与制作》实践考核作品设计说明书汇.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