个人网页设计说明书.docx

1、个人网页设计说明书个人网页设计说明书一、 网页设计目的1.1网页设计需求浅谈 21.2个人网页设计理念 21.3制作背景 21.4术语定义 2二、 网页设计以及浏览工具2.1网页设计说明 3-2.2色彩方案 32.3工作环境 32.4浏览工具 3-三、 个人网页功能模块设计3.1空间动画 43.2主页 -3.3日志 73.4日志简介 83.5相册界面 93.6相册展示 10-3.7音乐 113.8音乐列表 123.9个人资料 133.10留言板 34四、总结4.1技术总结 13- 34.2个人心得总结 15 3附加：第二种网页设计图一、网页设计目的1.1 网页设计需求浅谈：随着网络技术以及网页

2、制作技术方面的日臻成熟人们越来越关注网页 的美观性，所以当下网页制作的一个最主要的出发点就是网页的美观和可 操作性。在表达一些理念方面东西的时候能更加的形象化与多样化。就全 球上网的人数来说，有很多的人正通过个人空间来改变他们的生活方式， 同时学生也学习到了 各个方面不同的知识，人们通过自己的文字来传递着 不同的信息。作为一个发展迅速的网络空间 ,个人空间向我们透露着这个信 息传递和情感的平台将影响接下来的几代人 .1.2 个人网页设计理念：本次毕业设计目的就是做一个属于自己的主页，通过一些信息来表 达自己的一些思想与观点，还有就是一些个人对于生活的一些心得体会， 再其中加入个性化的元素能表现

3、自己符合自己性格的色彩搭配与文字图画 以及音频，当然也是对过去的留恋，故空间名取名为流年，给人一种怀旧 的感觉。1.3制作背景a.网站项目的名称：个人空间b.用户：普通的用户1.4术语定义个人空间：就是一个网页，它通常是由简短且经常更新的信息所构成 这些张贴的文章都按照年份和日期倒序排列，也就是最新的放在最上面， 最旧的在最下面。不同的内容和目的有很大的不同，从对网络资源的整理 与评论，到有关公司、个人的构想，从新闻、照片到日记、诗歌、散文， 甚至科幻小说都应有尽有。二、网页设计说明以及浏览工具2.1网页设计说明（1）名称：流年（2 ）性质：个人空间（3 ）主要内容：这是一个以个人空间为主题的

4、网页设计，所包括的页面开场动画、主页、日志、相册、音乐、资料、留言板等。（4） 版式：左边为导航区，右边为展示区。（5） 风格：主调请亲而不失格调，色彩淡雅，版面活泼风趣。2.2字体、色彩方案为了个人空间网页设计能够更好投入到实际操作中， 特此准备了两种方案。（1） 一种为淡暖色系黄绿色(C: 9 M : 0 Y: 36 K: 0)1为主色调橙色调(C: 0 M : 30 Y: 70 K: 0)为辅色调朱红色(C: 32 M: : 72 Y: 85 K: 29)1为辅色调字体均采用华康少女字体、华康采风字体、华康娃娃体。（2）种为清蓝色系（备选方案）淡蓝色（C： 9 M : 0 Y： 36 K

5、: 0） 为主色调粉红色（C： 7 M : 33 Y： 0 K： 0） 为辅色调桔黄色（C: 0 M : 36 丫： 47 K： 0） 为辅色调字体均采用楷体字体、仿宋字体、黑体(3)整体色彩都采用代表忧伤的颜色，以便烘托出“流年”这个主题, 达到更好的视觉上的享受。2.3工作环境：操作系统：Windows XP 以上系统制作工具：Photoshop CS52.4浏览工具：IE浏览器三、个人网页功能模块设计(第一种方案)3.1 空间动画本页采用贴图的形式来展现整个动画，主体上以书为主，以图片为辅,书本上C EST LA VIE （这就是生活）正在诉述着人生的种种，零零碎碎的 照片，CRY, N

6、EVER，LOST，BELONG, EVEN各种的心情，从不同角度 展现生活的美，让用空间那种独特的方式向读者娓娓道来我的生活。文本区：文字都运用华康隶书体，给人一种亲切感而又不失严肃。色彩区：整页运用灰色（C： 4 M : 4 Y： 4 K： 4） 为主,白色（C： 0 M : 0 Y： 0 K: 0）赤褐色（C:： 20 M: : 30 Y： 45 K： 0）殺懑觀紳黑色（C:： 0 M: : 0 Y： 0 K： 100）朱红色（C: 32 M: : 72 Y: 85 K: 29） 为辅3.2 主页-kr-卫甲 W 百 JJ a *lt主页采用了左中下的框架结构，左上角的空间名称“流年”让

7、人充分 了解主题，字的旁边添加一些线条花加以点缀，显得生动活泼。在左侧的导 航栏中的选项界面运用圆形的方式将其逐一展现出， 并且均在每一张页面上能够得到显示，右侧的图片区放入一张小女孩对过去的怀念之情的手绘图。 下边的导航栏中以新鲜事、相册、联系方式展现，相册中运用到了时间轴， 照片在一定时间内可以飘过，这样增加了画面的跳跃感。在所有页面中都采 用了简洁的样式，从而达到网页表现与内容分离的目的，让我能更好的设计 网页的显示效果。色彩区：整体页面以黄绿色（C： 9 M : 0 丫： 36 K: 0） 为主色调橙色调（C： 0 M : 30 Y： 70 K： 0） 为辅色调“流年”采用了方正隶二简

8、体字体， 48，严谨而不失大体，其色彩为朱红色(C: 32 M: : 72 Y: 85 K: 29) 。“主页、日志、相册、音乐、资料、留言板”采用了华康少女文字，简单14以黄绿色(C： 9 M : 0 Y： 36 K： 0) 为已打开页面,橙色调(C: 0 M : 30 Y: 70 K: 0) 为未打开页面 “新鲜事、相册”采用了华康流线体，流畅14，以(C: 0 M : 55 Y:鲜一下方的日志排列采用了方正隶变简体，9.5，以黑色(C: 0 M : 0 Y:0 K: 100)，以及联系方式采用了华康少女字体，10，以橙黄色(C: 0 M :55 Y: 74 K: 0)，粉红色(C: 0

9、M : 30 Y: 37 K: 0) 。3.3 日志个人日志中仅仅是一个日志列表的显示，我所做的就是用传统的样式 让日志展现出来，按照日期来排列，并且标注一些日志是最新的，整个日 志列表有日期、标题、浏览量以及横线、翻页栏来组成。同时将个人的联系方式放到了左下角，以便访客可以及时和我联系。日志列表的最上角的 运用了三张照片和一张信封、一杯咖啡，希望访客能够在品尝咖啡的同时 来享受这些所带来的触动。右上角的白色的 SPING THE STORY粘贴在 墨迹上，仿佛在诉说着这些故事的深远，并且与右下角的山水图对应。色彩区:黄绿色(C： 9 M : 0 Y： 36 K: 0) 为主色调橙色调(C：

10、0 M : 30 Y： 70 K: 0) 为辅色调“日期、标题、浏览量”采用了 Adobe楷体std，12，黑色(C: 0 M : 0 Y: 0 K: 100 )。日志列表中的日期、浏览量，采用了 Arialz字体，而日志名采用了方正隶变字体，统一大小9.5，灰色(C: 57 M : 49 Y: 48 K: 15)3.4日志简介铳年FateteerO1 night wme顷 mm 间曲门闻HPfic 町 VlFDOQW(i+*ijrrR MF也* v lrn niitfla 血i fiA HJ|m jn UKambEd b| *4i cfiHnr* mkrHli 右闻陛if sciic-iri

11、n-jihdTtaAffl 加山晔 The Ride 414曲Y pi iiUfe即* On口已 meunp ViEOO OW dlHrQVK waFrrfK 4H fw Jtsyn b*i *Hp 护口占彳幵匚.珊：I n 3呷in Ivl iivltr viil f*i 屮H, i k,i il* 曾4 nnAT4 -ridyikR QnfJ nyoci 1ESD CON daagf ok-M 仙 -MH 呻 MtwwH iZaKLt k parfHd kn Hrtto-pirin#由尸Ke城勺 irtd ba佃 Mustv呵和 gajE 丄中r：訝Lxein倚总匸rwwkTari i-

12、ft-i rj- -vrijta* ncv- npvaivd b| tM ctnrmiil n pyifMJl Ki 他117*1 叩 iJ 1阳11刖丫 i hi riw 祁t 神却.在日志简介中我采用了最简洁的排版，文本区我插入了 FATE/ZERONIGHT这篇文章，紧跟其后就是创作的时间以及阅读量。 文章下方还有“赞、 转载、分享、评论、复制地址、举报、更多等多种对文章的选项，到文章的 右下角还有上一篇以及下一篇的提示。整体版面简洁大方，让人能够一目了 然。在整个页面的右下角的插入图片，主要目的是为了让访客能够体会这个 图片对生活的期待。色彩区:Y: 50 K: 18)Arial 字体

13、，10，灰色(C: 59 M : 50文本区的导航栏的文字采用了 Arialz黑体std字体，10 ,浅灰色（C:29 M : 24 Y： 24 K： 0）3.5 相册界面:流年此页面中采用了左右的排版，左侧为导航栏包括左下角的联系方式， 当访客打开电子相册时，就会出现一个翻开的书，书上粘贴着一个关于寻 找过去，珍惜现在所拥有的童话故事“小王子”，画面色彩清晰分明，能在 那么一瞬间走入访客的心里，并且点击进入这个浅蓝色按钮，继续欣赏下 去循环下去。整体画面清新，主题明显，色彩暖人心。色彩区:“个人相册”采用了楷体字体，能够方便访客进入界面，25，灰色(C :67 M : 60 Y : 59 K

14、 : 44) .， “点击进入”采用了黑体，8，白色(C : 0 M : 0 Y : 0 K : 0)下方的相册简介采用了华康采风体，6,浅灰色(C : 58 M : 50 丫 :49 K : 17)， 整体字体运用的合理到位，活泼而又不失单调。3.6 相册展示:相册展示中我采用的流动的方式来展示照片，在展示区运用了一个展示栏，有树叶，有房子，带给人一种清新的感觉，能够充分的烘托出主题，图 片大都选用了色彩比较温和而又不失风格，而且相册名为清新，图片与名称 相呼应。大图片为一个小女孩正在望着天空，戴着一个猫咪的帽子，被风吹 起的头发，飘起的裙摆，就这样，轻轻地走进人的心底。下方的小图片采用 的

15、是流动展示的方式，点击下方的指示栏就可以进入下一组图片。整体版面 干净明了。色彩区：黄绿色（C： 9 M : 0 Y： 36 K: 0） 为主色调橙色调（C： 0 M : 30 Y： 70 K: 0） 为辅色调 上方的相册名称“清新、暖暖、唯美、意境、浪漫”采用了华康娃娃体，17，深橙色（C： 19 M : 57 丫： 82 K： 4） 为未打开的相册,暗绿色（C: 39 M : 17 Y: 96 K: 1） 为已打开的相册。F方的流动相册的“ BACK、NEXT”采用了华康童童体，16，橘黄色(C: 0 M : 25 Y: 64 K: 0)3.7 音乐:音乐的界面采用了左右两侧的排版来向访客展示，左侧的导航栏沿袭一贯的风格，右侧的展示区标题部分“ENJOY YOURSELF, SMILE （享受自己, 笑一笑）”希望访客可以放松心态来享