网页设计报告.doc

.目 录一、设计题目1二、设计性质、目的和任务11、设计性质12、设计目的和任务1三、设计内容2四、设计说明3（一）、网站标题的创意和设计4（二）、站标的创意和设计4（三）、栏目的创意和设计5（四）、网页的设计61、毛遂自荐（二级页）62、天真烂漫（二级页）7（1）、如梦年华（三级页）8（2）、在水一方（三级页）93、朝气蓬勃（二级页）114、菁色岁月（二级页）12（1）、书声琅琅（三级页）13（2）、同舟共济（三级页）145、斗志昂扬（二级页）15五、设计总结17一、设计题目白驹过隙，岁月静好二、设计性质、目的和任务1、设计性质本课程设计是学生在学习网页设计软件Dreaweaver和Flash动画设计课程后的实践性很强的专业课课程设计，是对所学Dreaweaver和Flash知识的综合运用，为培养职业核心能力与素质奠定基础，在专业人才培养方案中起重要作用。2、设计目的和任务 (一)内容：综合利用Dreamweaver和Flash设计制作一个网站。设计题目：在线购物网站或个人网站，任选其一（具体名称和栏目自定）。(二)要求：1、网站和素材制作要有自己的创意。2、通过设计熟练掌握网页设计和Flash素材制作的基本流程和各种常用工具的使用方法和技巧。3、Dreamweaver的内容要求：、有图文的混合排版,要有自己设计的图像素材 (可是静态或Flash动画)。、要有自己设计的站标（静态或Flash动画任选）。、网页要求体现不同布局（表格布局、层布局、框架布局）。、要有CSS样式、模板和库的使用。、要有鼠标经过图像。、制作弹出信息对话框。、随主页弹出的广告窗口。、要有项目列表或编号列表。、多种超链接的设置。、有插入的声音文件或背景音乐。4、Flash的内容要求：、熟练掌握Flash的基本操作方法。、设计网站的Flash标题文字动画（或Flash的TOP文件），做到动画新颖且与主题风格一致。、根据网站风格、内容的需要制作相应的动画广告或其它动画素材，要有形状补间动画、运动补间动画、蒙版动画，动画中可根据需要加入声音或音乐。注意：以上要求为设计的基本要求，各项均是必须有的，缺少某项将影响成绩！三、设计内容网站类型：个人网站网站结构: 我 我制作的是个人网站, 这个网站介绍的是我的成长过程，主要包括我的家乡、个人信息，以及同窗好友的友情和到现在的大学生活的感悟。四、设计说明进入网站，映入眼联的是“白驹过隙，岁月静好”的一种时光的沉淀，舞动的蝴蝶，伴随着音乐的旋律蝴蝶轻轻的挥舞着翅膀，整个网页给人一种心灵得到放松，精神得到舒缓的感觉，背景采用淡雅的颜色，突出了温情，使色彩显得更加的协调。因为蝴蝶以其身美、形美、色美、情美被人们欣赏，历代咏诵。蝴蝶是最美丽的昆虫，被人们誉为“会飞的花朵”，是一种高雅的象征，可以令人体会到回归大自然的赏心悦目，所以我采用了Flash做出蝴蝶翩翩起舞的效果，与主题的“白驹过隙，岁月静好”相结合，使主题更加的鲜明。（一）、网站标题的创意和设计网站标题构思：以“白驹过隙，岁月静好”为中心来讲述从童年、少年到青年的成长过程等一系列的回忆碎片，表达对未来的憧憬。通过学习过的Photoshop对文字进行变形和修饰，达到自己想要的这种炫彩效果，突显出一种与众不同的岁月感。 （二）、站标的创意和设计站标构思：伴随着时光飞快的流逝，人生有各种不同的经历,而能体现时光流逝的最好象征就是风，就像一匹白驹奔跑时带动的风，风可以轻柔，可以平静，亦可以怒吼，就像我们伴随着时光的流逝慢慢成长经历情感的过程，而我们则是其中的主角,以自我为中心体验独无二的的生活。每个人都有自己的任知和对生活的感触，我很平凡，但是却依旧有属于自己的成长，无论开心与否，都是对自己足迹的一种见证。世界很大，属于我们的并不多。可是生活是一种态度，我乐与在自己所拥有的天地中尽情享受时光带来的酸甜苦辣。为了与标题“白驹过隙，岁月静好”相呼应,通过Photoshop把所需要的文字和英文进行输入和对字体的变换，然后一系列的工具完成所需要的文字效果。（三）、栏目的创意和设计网站导航：我用Photoshop输入的文字，然后经过字体变换，颜色搭配，最后通过特效描边进行最后的加工，形成了导航的最终样式，虽然导航字体没有经过太多的加工和修饰，但是却与网站的页面整体相互辉映，给人一种很协调的画面感 。网站包括五个栏目，分别是：毛遂自荐：这个页面介绍的是我自己的个人信息。毛遂自荐是形容一个人自告奋勇，善于介绍自己，所以我用这个成语作为这一页的标题。天真烂漫：这个页面介绍的是孩童时代，它有两个下级页面，分别是“如梦年华”和“在水一方”，天真烂漫是形容儿童心地单纯善良，坦率自然，所以我用这个成语作为这一页的标题。朝气蓬勃：这页介绍的是少年时代，青涩而又腼腆。菁色岁月：这个页面介绍的是学生时代，它有两个下级页面，分别是“书声琅琅”和“同舟共济”，菁代表的是华丽、精华，事物最纯粹、最美好的部分，而我们的学生时代则是我们记忆中最美好的一部分，所以我用菁色岁月作为这一页的标题。斗志昂扬：这个页面介绍的是大学时代，大学时代的我们意气风发，像一只雄鹰欲展翅翱翔于蓝天，于是我用了斗志昂扬这个有代表性的成语当做该页面的标题，表达了对未来最美好的憧憬。（四）、网页的设计1、毛遂自荐（二级页）背景采用海滩、贝壳、和书本相结合，常年的海浪将沙粒冲刷成平整细腻的肌肤，平整有序，自然恬静，沙粒虽然微小，但是平凡之中却彰显出一份坚韧，微小的沙粒仿佛诉说着美好固然存在，可却需要千百个日日夜夜的不断冲刷才能破茧成蝶，绽放光芒。 背景上放着一张书的图片，书代表知识的财富，人类进步的阶梯，“书中自有黄金屋”“书中自有颜如玉”，我们在书中成长，增长见识，我的灵感就是从中而来，在书本上用书写文字的方式记录了我的个人信息，通过Photoshop对文字进行修改，书本形式的文字与自然恬静的海滩贝壳巧妙结合，使之形成一种充满书卷气息的氛围。2、天真烂漫（二级页）就像标题说的一样，“天真烂漫”用Flash动画展示了孩童时代最美的瞬间。绿色是自然界中常见的颜色，它既不是冷色，也不是暖色，代表着清新、希望、平静和舒适之感，因此在梦幻般气泡的背景图片搭配flash枫叶动画动静结合，很自然的与标题“天真烂漫”关联到了一起。气泡在阳光下散发出彩虹般的微笑，气泡虽然是瞬间的美丽，却也是永恒的刹那，而枫叶的轻轻飘舞也体现了对儿时的怀念与向往。梦幻般的文字，采用绿色字体与背景相结合通过鼠标经过图像的修饰后别有一番趣味，众所周知，童年是大多数人一生中最美的时光，可当我们长大之后才发觉童年的美好，因此，童年对我们来说是一段如梦一般的年华；“在水一方”，这次我引用了诗经，蒹葭的一句诗，“所谓伊人，在水一方”古人用这句诗表达了对伊人的深刻思念，而我则借古人的感情抒发了对家乡的热爱和思念之情。所以“如梦年华”和“在水一方”理所当然的被我用为了这一页的标题。返回主页的标志则是采用了英文与形状的搭配，也做成了绿色，意在与背景相结合。 （1）、如梦年华（三级页） 这一页的背景依旧延续“天真烂漫”的气泡风格，不过确是粉色系调的泡泡作为背景，因为粉色象征着清纯、美好，给人一种淡雅脱俗的美感，梦之所以被称之为梦，是因为它不可触碰却又真是的存在，所以气泡无疑是对如梦幻般年华的最好诠释。 世间有许多微笑，有蒙娜丽莎动人的微笑，有父母那亲切地微笑，而最能打动每个人心灵深处却是孩子们发自内心的微笑，我们可以拒绝平庸，可以拒绝风雨，但我们却无法拒绝孩子们那一朵朵发自内心深处的微笑，我希望孩子的微笑可以散播在世间的每一个角落，所以我只用了这一幅插图和一段描述孩子内心世界的文章作为这一页的主要内容，使图片和文学综合起来更加的生动形象。（2）、在水一方（三级页）“在水一方”这一页我介绍的是我的家乡东北，采用了朝阳初升的海边沙滩作为背景，晴空万里的天气会令人的情绪在无形之中达到最好的状态，图片则是选择了三张具有代表性的碧草蓝天，白雪皑皑和美食，然后搭配了一段对家乡赞美的文章。“天苍苍，野茫茫，风吹草地见牛羊”。晴朗湛蓝的天空,像碧玉一样澄澈，房屋错落有序的格调与这碧草蓝天相连接，绿树成荫仰望蓝天，那些变幻莫测的云，或流动，或停驻，有意无意地为蓝天添了装饰；在这样的时刻，除了纯净和安祥，你几乎再找不到合适的词语来描绘。 雪后的景象，银白覆满大地，天地连成一线，模糊了边界，模糊了天地，只有那一串脚印，如细碎的花，缀在地的一角，成为静谧的注释，整个村子好像变成了一个粉妆玉砌，充满了诗情画意的童话世界。 美食不仅仅是简单地味觉感受，更是一种精神享受，所以我用了一段描写家乡的文字和东北特有的美食，使之更加凸显“在水一方”这一页面对家乡的诠释。3、朝气蓬勃（二级页）这个页面我没有太多的描述，而是会采用了窗口弹出的方式显示为“对不起，该网站正在建设中”4、菁色岁月（二级页） 这个页面我用了沙滩作为背景，沙滩上的沙粒在日日夜夜海水的冲刷下，不断的磨砺着自身，一颗沙粒也许不算什么，可是数以万计的沙粒聚在一起却能绽放出奇异的光芒，而沙粒也代表了学生时代的我们，每天通过学习知识充实自身，而那些年我们也在同窗好友的陪伴下一起度过那段快乐的时光。 这个页面我运用了广告弹出窗口，窗口里的背景是一个小纸人难过的表情，更形象的表达出网络出错的难过之情，也为这个弹出窗口增加了一丝趣味；而文字则是自己通过Photoshop实现的特效文字，使之与背景相互结合。（1）、书声琅琅（三级页） “书声琅琅”这个页面我想表达的是高中生活，所以主题是我的高中学校，背景则是采用了一片绿油油的田野，而田野中的乡间小路则是代表着希望，恢弘大气的校园一角和诙谐有趣的师生趣事与背景相得益彰。 映入眼帘的学校和课间体操，师生之间的欢乐，无一不在体现着学生时代的学习氛围。 （2）、同舟共济（三级页） 这一页的背景我采用的是天蓝色的海面，海面上漂着一艘小船，有几只海鸥在自由的飞翔，而我们的成长岁月就像这海鸥一样，迎着风浪翱翔的同时，身边一定有朋友和你风雨不误，同舟共济，正是那看不见摸不到却无比珍贵的友情支持着我们奋不顾身的前行着。 我在“同舟共济”这个页面还用了几幅图片和文字的描述，诙谐而又唯美的图片与背景相互协调，令人看对友情的珍贵更加的珍惜。5、斗志昂扬（二级页）这一页我想表达的是对大学生活和未来的勇往直前，我特别喜欢蓝色，蓝色代表沉稳干净，而主题是一种斗志昂扬的精神，所以选用海边朝阳初升作为背景，我们则是八九点的太阳，迎接未来，成语斗志昂扬的意思是情绪高涨，斗争的意志旺盛，因此我采用斗志昂扬作为这一页的标题。 除了背景与图片的搭配，我还运用了文字的一些特效和鼠标经过图像的功能，乘风破浪的勇气和斗志昂扬的精神正是我们大学生所需要的特质去迎接未来出现在我们生活中的挑战。这个区域用了一段优美的文章，让你欣赏页面的同时扩展阅历，增强学习的乐趣。五、设计总结两周的实训时间说长不长，说短不短。但从中我学到了很多知识，更加巩固了Dreamweaver和flash中基本工具的使用和制作网页所要考虑的一系列问题，受益匪浅。这次实训让我明白制作网页应该先定位网页的方向，确定网站的标题。标题在个人主页中起了很重要的作用，他很大部分的决定了你整套个人主页的定位是否正确，一个好的名字必须有概括性的、简短的、有特色的、容易记得还要符合自己主页的主题和风格。选好标题后，开始采集内容，内容必须紧随着标题，在采集内容过程中，很重要的一个“特”色，个人主页中的特色，应该突出自己独特的个性，把自己的兴趣、爱好尽情的发挥。在制作网页过程中，需要配合flash动画的适时加入，更要明白做此类动画所