个人网页设计说明书Word格式.docx
《个人网页设计说明书Word格式.docx》由会员分享，可在线阅读，更多相关《个人网页设计说明书Word格式.docx（14页珍藏版）》请在冰豆网上搜索。
第二种网页设计图
一、网页设计目的
1.1网页设计需求浅谈：
随着网络技术以及网页制作技术方面的日臻成熟人们越来越关注网页的美观性，所以当下网页制作的一个最主要的出发点就是网页的美观和可操作性。
在表达一些理念方面东西的时候能更加的形象化与多样化。
就全球上网的人数来说，有很多的人正通过个人空间来改变他们的生活方式，同时学生也学习到了各个方面不同的知识，人们通过自己的文字来传递着不同的信息。
作为一个发展迅速的网络空间,个人空间向我们透露着这个信息传递和情感的平台将影响接下来的几代人.
1.2个人网页设计理念：
本次毕业设计目的就是做一个属于自己的主页，通过一些信息来表达自己的一些思想与观点，还有就是一些个人对于生活的一些心得体会，再其中加入个性化的元素能表现自己符合自己性格的色彩搭配与文字图画以及音频，当然也是对过去的留恋，故空间名取名为流年，给人一种怀旧的感觉。
1.3制作背景
a.网站项目的名称：
个人空间
b.用户：
普通的用户
1.4术语定义
个人空间：
就是一个网页，它通常是由简短且经常更新的信息所构成这些张贴的文章都按照年份和日期倒序排列，也就是最新的放在最上面，最旧的在最下面。
不同的内容和目的有很大的不同，从对网络资源的整理与评论，到有关公司、个人的构想，从新闻、照片到日记、诗歌、散文，甚至科幻小说都应有尽有。
二、网页设计说明以及浏览工具
2.1网页设计说明
（1）名称：
流年
（2）性质：
（3）主要内容：
这是一个以个人空间为主题的网页设计，所包括的页
面开场动画、主页、日志、相册、音乐、资料、留言板等。
（4）版式：
左边为导航区，右边为展示区。
（5）风格：
主调请亲而不失格调，色彩淡雅，版面活泼风趣。
2.2字体、色彩方案
为了个人空间网页设计能够更好投入到实际操作中，特此准备了两种方
案。
（1）一种为淡暖色系
黄绿色（C:
9M:
0Y:
36K:
0）
1
为主色调
橙色调（C:
0M:
30Y:
70K:
为辅色调
朱红色（C:
:
32M:
:
72Y:
85K:
29）
1为辅色调
字体均采用华康少女字体、华康采风字体、华康娃娃体。
（2）—种为清蓝色系（备选方案）
淡蓝色（C：
0Y：
0）为主色调
粉红色（C：
7M:
33Y：
0K：
0）■为辅色调
桔黄色（C:
36丫：
47K：
字体均采用楷体字体、仿宋字体、黑体
（3）整体色彩都采用代表忧伤的颜色，以便烘托出“流年”这个主题,达到更好的视觉上的享受。
2.3工作环境：
操作系统：
WindowsXP以上系统
制作工具：
PhotoshopCS5
2.4浏览工具：
IE浏览器
三、个人网页功能模块设计（第一种方案）
3.1空间动画
本页采用贴图的形式来展现整个动画，主体上以书为主，以图片为辅,
书本上C'
ESTLAVIE（这就是生活）正在诉述着人生的种种，零零碎碎的照片，CRY,NEVER，LOST，BELONG,EVEN各种的心情，从不同角度展现生活的美，让用空间那种独特的方式向读者娓娓道来我的生活。
文本区：
文字都运用华康隶书体，给人一种亲切感而又不失严肃。
色彩区：
整页运用灰色（C：
4M:
4Y：
4K：
4）为主,
白色（C：
0K:
赤褐色（C:
：
20M:
30Y：
45K：
0）殺懑觀紳
黑色（C:
0M:
100）
29）为辅
3.2主页
-kr-卫甲W百JJa*lt
主页采用了左中下的框架结构，左上角的空间名称“流年”让人充分了解主题，字的旁边添加一些线条花加以点缀，显得生动活泼。
在左侧的导航栏中的选项界面运用圆形的方式将其逐一展现出，并且均在每一张页面上
能够得到显示，右侧的图片区放入一张小女孩对过去的怀念之情的手绘图。
下边的导航栏中以新鲜事、相册、联系方式展现，相册中运用到了时间轴，照片在一定时间内可以飘过，这样增加了画面的跳跃感。
在所有页面中都采用了简洁的样式，从而达到网页表现与内容分离的目的，让我能更好的设计网页的显示效果。
整体页面以黄绿色（C：
0丫：
0）为主
色调
橙色调（C：
70K：
“流年”采用了方正隶二简体字体，48，严谨而不失大体，其色彩为
29）。
“主页、日志、相册、音乐、资料、留言板”采用了华康少女文字，
简单14
以黄绿色（C：
36K：
0）为已打开页面,
0）为未打开页面
“新鲜事、相册”采用了华康流线体，流畅14，以（C:
55Y:
鲜一
下方的日志排列采用了方正隶变简体，9.5，以黑色（C:
0K:
100），以及联系方式采用了华康少女字体，10，以橙黄色（C:
55Y:
74K:
0），粉红色（C:
37K:
0）。
3.3日志
个人日志中仅仅是一个日志列表的显示，我所做的就是用传统的样式让日志展现出来，按照日期来排列，并且标注一些日志是最新的，整个日志列表有日期、标题、浏览量以及横线、翻页栏来组成。
同时将个人的联
系方式放到了左下角，以便访客可以及时和我联系。
日志列表的最上角的运用了三张照片和一张信封、一杯咖啡，希望访客能够在品尝咖啡的同时来享受这些所带来的触动。
右上角的白色的SPINGTHESTORY粘贴在墨迹上，仿佛在诉说着这些故事的深远，并且与右下角的山水图对应。
色彩区:
黄绿色（C：
0）为辅色调
“日期、标题、浏览量”采用了Adobe楷体std，12，黑色（C:
100）。
日志列表中的日期、浏览量，采用了Arialz字体，而日志名采用了方
正隶变字体，统一大小9.5，灰色（C:
57M:
49Y:
48K:
15）
3.4日志简介
铳年
FateteerO1nightwme顷mm间曲门闻
HPfic<
fitl>
町VlFDO「QW（i+*ijrrRM
F也*vlr»
~n\niitfla血ifiA[±
HJ^|mjnUKambEdb|*4i«
cfiHnr*«
■■mk^rH
li右闻陛ifsciic-i^rin-j
ihdTtaAffl^加山晔TheRide414曲YpiiiUfe即*On口已meunpViEOOOWdlHrQVKwa
FrrfK4Hfw'
Jtsynb*i*Hp护口『『占彳幵匚.珊：
《^
In3呷inIvl^^iivltr^viil^f*i■屮H,ik,iil*■曾4■n^nAT
4^-r^idyikRQn^fJn~yoci¥
1ESDCONdaagf«
ok
-M仙-MH呻M
□twwHi^'
ZaK^L
tkparfHdknHrtto-pirin]
#『由尸Ke城勺■irtdba佃■Mustv呵和gajE丄中r：
訝Lxein倚总匸
rwwk'
Tarii-ft-irj--vrijt^a*ncv-npvaivdb|tMctnrmii
lnpyifMJlKi他・1・^17*1叩«
iJ・1阳11刖丫ihiriw■祁t神却.
在日志简介中我采用了最简洁的排版，文本区我插入了FATE/ZERO
NIGHT这篇文章，紧跟其后就是创作的时间以及阅读量。
文章下方还有“赞、转载、分享、评论、复制地址、举报、更多等多种对文章的选项，到文章的右下角还有上一篇以及下一篇的提示。
整体版面简洁大方，让人能够一目了然。
在整个页面的右下角的插入图片，主要目的是为了让访客能够体会这个图片对生活的期待。
Y:
50K:
18）
Arial字体，10，灰色（C:
59M:
50
文本区的导航栏的文字采用了Arialz黑体std字体，10,浅灰色（C:
29M:
24Y：
24K：
3.5相册界面:
此页面中采用了左右的排版，左侧为导航栏包括左下角的联系方式，当访客打开电子相册时，就会出现一个翻开的书，书上粘贴着一个关于寻找过去，珍惜现在所拥有的童话故事“小王子”，画面色彩清晰分明，能在那么一瞬间走入访客的心里，并且点击进入这个浅蓝色按钮，继续欣赏下去循环下去。
整体画面清新，主题明显，色彩暖人心。
“个人相册”采用了楷体字体，能够方便访客进入界面，25，灰色（C:
67M:
60Y:
59K:
44）.，“点击进入”采用了黑体，8，
白色（（C:
0Y:
0K:
下方的相册简介采用了华康采风体，6,浅灰色（C:
58M:
50丫:
49K:
17），整体字体运用的合理到位，活泼而又不失单调。
3.6相册展示:
相册展示中我采用的流动的方式来展示照片，在展示区运用了一个展示
栏，有树叶，有房子，带给人一种清新的感觉，能够充分的烘托出主题，图片大都选用了色彩比较温和而又不失风格，而且相册名为清新，图片与名称相呼应。
大图片为一个小女孩正在望着天空，戴着一个猫咪的帽子，被风吹起的头发，飘起的裙摆，就这样，轻轻地走进人的心底。
下方的小图片采用的是流动展示的方式，点击下方的指示栏就可以进入下一组图片。
整体版面干净明了。
0）为辅色调上方的相册名称“清新、暖暖、唯美、意境、浪漫”采用了华康娃娃
体，17，深橙色（C：
19M:
57丫：
82K：
4）为未打开的相册,
暗绿色（C:
39M:
17Y:
96K:
1）为已打开的相册。
F方的流动相册的“BACK、NEXT”采用了华康童童体，16，橘黄
色（C:
25Y:
64K:
3.7音乐:
音乐的界面采用了左右两侧的排版来向访客展示，左侧的导航栏沿袭一
贯的风格，右侧的展示区标题部分“ENJOYYOURSELF,SMILE（享受自己,笑一笑）”希望访客可以放松心态来享
升级会员 