个人网站的设计与实现
目 录
一、引言 1
二、开发工具介绍 1
（一）Dreamweaver 1
（二）Photoshop 1
（三）Inpaint 1
三、网站内容结构 1
四、页面的具体设计 2
（一）LOGO设计 2
（二）网站的导航 2
（三）首页设计 3
（四）子页介绍 3
五、页面的具体实现 4
（一）DIV+CSS 布局 4
（二）首页的实现 4
（三）子页的实现 5
1.我的音乐页面 5
2.留言板页面 6
3.个人档页面 6
4.联系我页面 7
六、页面特效的实现 7
（一）图片切换效果 7
（二）二级导航效果 8
（三）音乐板块效果 8
七、网站测试 9
总结 10
致谢 11
参考文献 12
一、引言
本网站的主要内容包括本人基本信息，兴趣爱好等。现代社会越来越多的人们喜欢在网上展示自己，如在QQ空间，个人博客，微博等记录身边发生的事，写下自己的感言，上传一些个性照片等等，记录生活中的点点滴滴。因此个人网站也成为人们追求时尚的一种体现，个人网站也成为我们与外界沟通和交流的平台，可以让更多的人了解自己，交到兴趣相投的朋友，并在以后的求职和工作中能起到自我推荐和自我展示的作用。本网站使用了DIV+CSS实现页面布局，运用JavaScript代码实现网页特效，最终完成了个人网站的制作。
二、开发工具介绍
（一）Dreamweaver
Adobe Dream weaver是美国公司开发的，用于网页制作并管理网站的一种所见即所得的网页编辑器。同时可以制作出满足多种浏览器且页面丰富多彩的网页。
（二）Photoshop
Adobe Photos hop，简称“PS”，是由Adobe Systems开发和发行的图像处理软件。Photo shop主要处理以像素所构成的数字图像。使用软件中绘图，编辑，图像菜单
*好棒文|www.hbsrm.com +Q: ^351916072*
Adobe Dream weaver是美国公司开发的，用于网页制作并管理网站的一种所见即所得的网页编辑器。同时可以制作出满足多种浏览器且页面丰富多彩的网页。
（二）Photoshop
Adobe Photos hop，简称“PS”，是由Adobe Systems开发和发行的图像处理软件。Photo shop主要处理以像素所构成的数字图像。使用软件中绘图，编辑，图像菜单，可以高效的处理网页所需要的图片。
（三）Inpaint
Inpaint 是一个去除图片水印软件，主要删除图片中不需要的部分，如图片上的LOGO,人物，文字等。
三、网站内容结构
网站分为三栏式，首页模仿QQ空间时光轴设计，日志内容按时间顺序进行排列，因此可以清晰查看每条日志，最大亮点是有的日志添加了视频动画效果，更加吸引游客的好奇心，进而继续浏览，从而增加网站的浏览量。相册版块分了三个部分，回忆，记录了和朋友在一起的美好时光，我的大学，里面包含了宿友的合照，大学校园的照片，浏览者进入网站在时既能欣赏我们校园的美，又可以替我们学校宣传一下，青春纪念册里记录了业余时间和朋友在苏州古镇，园林等各大景点的纪念照，浏览者观看相册的同时可以欣赏苏州古镇的古色古味，小桥流水人家。
同时对照片做了很多特效，使网页更加生动。美文欣赏版块，收集了许多优美散文陶冶下大家的情操。我的音乐板块，整理了当下比较流行的音乐并和大家分享下自己最喜欢的几首歌曲。留言版块，大家可以在里面畅所欲言，对网站进行评价，可以让管理者对网站内容不断完善。个人中心板块可以看到我的基本资料，联系方式板块，有兴趣的朋友扫扫二维码加我的微信，或QQ。网站内容结构如图3-1所示：
图3-1 网站内容结构图
四、页面的具体设计
（一）LOGO设计
网站的LOGO用我的英文名angle设计，寓意可以像个小天使一样快乐成长，同时希望进入网站的访客给他们带来欢乐。在美图秀秀上制作，并且旁边添加了翅膀的图标，使LOGO更加形象生动，字体选了粉色与网站的整体风格更搭。
LOGO的效果图如图4-1所示：
图4-1 网站LOGO效果图
（二）网站的导航
导航是本网站的一个大的亮点，分布在网站的最左边，采用无序列表的形式写的，不同其他导航的是运用了JavaScript 制作了一个特效，当鼠标点击一个菜单栏会出现二级导航栏，鼠标移走时就会消失，并且列表会高度也随导航栏的增加而变高。导航效果图如图4-2所示：
图4-2 首页导航效果图
（三）首页设计
首页左上方是本网站的LOGO，为了用户的体验感受，为LOGO做了主页的链接，因此想要回到首页的时候，不需要点首页，只要单击LOGO就可以实现了。首页布局如图4-3 所示：
LOGO 背景图片
导航条
日志
版权信息
图4-3 首页布局图
首页的布局图主要通过模仿QQ空间时光轴做法，在时光轴页面左右两侧都有内容显示，中间是时间的轴线，内容区域可以发布生活笔记或随想记录过去的故事、现在的想法或者将来计划等等。等自己想回忆过去的美好时光的时候打开时光轴，细细的回往过去的点点滴滴。每条日志按时间顺序发布。给浏览者一种一目了然的感觉。浏览者除了可以欣赏文字和图片外，还可以看视频，有的日志添加了视频特效，并点击视频也可以最大化，观看效果也更加人性化，这一特效使整个首页变得更加多姿多彩。也更加吸引访客的兴趣。
日志效果图如图4-4所示：
图4-4 首页日志效果图
（四）子页介绍
我的相册版块分为，青春纪念册，我的大学，回忆，三个部分，同时也都对图片做了JavaScript 特效。青春纪念册主要包含和宿友在大学三年里周末外出时拍的照片，大部分在苏州的古镇，园林，苏
一、引言 1
二、开发工具介绍 1
（一）Dreamweaver 1
（二）Photoshop 1
（三）Inpaint 1
三、网站内容结构 1
四、页面的具体设计 2
（一）LOGO设计 2
（二）网站的导航 2
（三）首页设计 3
（四）子页介绍 3
五、页面的具体实现 4
（一）DIV+CSS 布局 4
（二）首页的实现 4
（三）子页的实现 5
1.我的音乐页面 5
2.留言板页面 6
3.个人档页面 6
4.联系我页面 7
六、页面特效的实现 7
（一）图片切换效果 7
（二）二级导航效果 8
（三）音乐板块效果 8
七、网站测试 9
总结 10
致谢 11
参考文献 12
一、引言
本网站的主要内容包括本人基本信息，兴趣爱好等。现代社会越来越多的人们喜欢在网上展示自己，如在QQ空间，个人博客，微博等记录身边发生的事，写下自己的感言，上传一些个性照片等等，记录生活中的点点滴滴。因此个人网站也成为人们追求时尚的一种体现，个人网站也成为我们与外界沟通和交流的平台，可以让更多的人了解自己，交到兴趣相投的朋友，并在以后的求职和工作中能起到自我推荐和自我展示的作用。本网站使用了DIV+CSS实现页面布局，运用JavaScript代码实现网页特效，最终完成了个人网站的制作。
二、开发工具介绍
（一）Dreamweaver
Adobe Dream weaver是美国公司开发的，用于网页制作并管理网站的一种所见即所得的网页编辑器。同时可以制作出满足多种浏览器且页面丰富多彩的网页。
（二）Photoshop
Adobe Photos hop，简称“PS”，是由Adobe Systems开发和发行的图像处理软件。Photo shop主要处理以像素所构成的数字图像。使用软件中绘图，编辑，图像菜单
*好棒文|www.hbsrm.com +Q: ^351916072*
Adobe Dream weaver是美国公司开发的，用于网页制作并管理网站的一种所见即所得的网页编辑器。同时可以制作出满足多种浏览器且页面丰富多彩的网页。
（二）Photoshop
Adobe Photos hop，简称“PS”，是由Adobe Systems开发和发行的图像处理软件。Photo shop主要处理以像素所构成的数字图像。使用软件中绘图，编辑，图像菜单，可以高效的处理网页所需要的图片。
（三）Inpaint
Inpaint 是一个去除图片水印软件，主要删除图片中不需要的部分，如图片上的LOGO,人物，文字等。
三、网站内容结构
网站分为三栏式，首页模仿QQ空间时光轴设计，日志内容按时间顺序进行排列，因此可以清晰查看每条日志，最大亮点是有的日志添加了视频动画效果，更加吸引游客的好奇心，进而继续浏览，从而增加网站的浏览量。相册版块分了三个部分，回忆，记录了和朋友在一起的美好时光，我的大学，里面包含了宿友的合照，大学校园的照片，浏览者进入网站在时既能欣赏我们校园的美，又可以替我们学校宣传一下，青春纪念册里记录了业余时间和朋友在苏州古镇，园林等各大景点的纪念照，浏览者观看相册的同时可以欣赏苏州古镇的古色古味，小桥流水人家。
同时对照片做了很多特效，使网页更加生动。美文欣赏版块，收集了许多优美散文陶冶下大家的情操。我的音乐板块，整理了当下比较流行的音乐并和大家分享下自己最喜欢的几首歌曲。留言版块，大家可以在里面畅所欲言，对网站进行评价，可以让管理者对网站内容不断完善。个人中心板块可以看到我的基本资料，联系方式板块，有兴趣的朋友扫扫二维码加我的微信，或QQ。网站内容结构如图3-1所示：
图3-1 网站内容结构图
四、页面的具体设计
（一）LOGO设计
网站的LOGO用我的英文名angle设计，寓意可以像个小天使一样快乐成长，同时希望进入网站的访客给他们带来欢乐。在美图秀秀上制作，并且旁边添加了翅膀的图标，使LOGO更加形象生动，字体选了粉色与网站的整体风格更搭。
LOGO的效果图如图4-1所示：
图4-1 网站LOGO效果图
（二）网站的导航
导航是本网站的一个大的亮点，分布在网站的最左边，采用无序列表的形式写的，不同其他导航的是运用了JavaScript 制作了一个特效，当鼠标点击一个菜单栏会出现二级导航栏，鼠标移走时就会消失，并且列表会高度也随导航栏的增加而变高。导航效果图如图4-2所示：
图4-2 首页导航效果图
（三）首页设计
首页左上方是本网站的LOGO，为了用户的体验感受，为LOGO做了主页的链接，因此想要回到首页的时候，不需要点首页，只要单击LOGO就可以实现了。首页布局如图4-3 所示：
LOGO 背景图片
导航条
日志
版权信息
图4-3 首页布局图
首页的布局图主要通过模仿QQ空间时光轴做法，在时光轴页面左右两侧都有内容显示，中间是时间的轴线，内容区域可以发布生活笔记或随想记录过去的故事、现在的想法或者将来计划等等。等自己想回忆过去的美好时光的时候打开时光轴，细细的回往过去的点点滴滴。每条日志按时间顺序发布。给浏览者一种一目了然的感觉。浏览者除了可以欣赏文字和图片外，还可以看视频，有的日志添加了视频特效，并点击视频也可以最大化，观看效果也更加人性化，这一特效使整个首页变得更加多姿多彩。也更加吸引访客的兴趣。
日志效果图如图4-4所示：
图4-4 首页日志效果图
（四）子页介绍
我的相册版块分为，青春纪念册，我的大学，回忆，三个部分，同时也都对图片做了JavaScript 特效。青春纪念册主要包含和宿友在大学三年里周末外出时拍的照片，大部分在苏州的古镇，园林，苏
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/jsjkxyjs/2573.html
