网页制作设计报告.doc

成绩： 网页制作课程期末考查设计报告题 目： 个人主页网站的设计与实现 系 部： 数学与应用数学系 专 业： 信息与计算科学 姓 名： 谢小军 学 号： 09415123 班 级： 信计一班 学 期： 2011年下学期 目录一、绪论31、网站主题32、网站规划3二、正文31、网页制作的前期策划与准备32、设计方案43、网页实现53.1首页个人主页53.11具体设置以及部分JavaScript定义代码63.2我的日志113.3我的相册123.4我的音乐123.5我的档案133.6我的爱好我喜欢的明星13三、设计小结131、设计中遇到的问题及解决142、心得体会14四、参考文献14一、 绪论1、网站主题本网站主要是实现一个个人主页。相信每个人在网上都有自己的个人空间，不管是QQ空间，还是51空间等等，很多人都想把自己的主页弄得绚丽多彩，漂漂亮亮的，希望在众多的空间中脱颖而出，得到更多人的关注，因此此网站将告诉同学们我们自己去构建完全属于自己的一个主页，而且通过此网站可以使同学们更加的了解个人主页的组成。2、网站规划本网站共分有11个板块，分为我的主页、我的日志、我的相册、我的音乐、我的档案、我的好友、我的下载、我的爱好、我的博客、我的心情、我的家园，目前分别有对其中的七项进行介绍。整个网站采用黑色为主色调，黑色给人以遐想，神秘的感觉，所以更能给人以视觉的冲击。整个网站的开头都是以一个flash文件，通过运用flash设置不断变化的文字效果，符合人的审美标准。为了使网页的风格保持一致，主要只有一个CSS模板。不同的网页在制作时，对主要的CSS模板进行继承，加入了新的元素来满足不同的需求。布局方面，本网页主要采用了AP Div和表格布局页面，因为AP Div布局更灵活，而且易于修改，这样每个部分就好像一个独立的，你要修改哪个地方直接修改与它相关的而不会影响其他的部分。为了突出主题，每个子网页的头部部分及导航栏都与主页相同而且背景颜色也都一致。对JavaScript的运用主要集中在特效方面。分别是图片的自动从右向左滚动，还有日志导航的自动从下往上滚动，还有记录在此网站停留的时间等。首页网站分主要分为为三大块，头部，主体，和底部。头部用以一个与个人主页题目相关的flash体现主题，并体现网站的内容；主体内分为三个块，左边用来介绍自己，以及登录的界面还有热点话题导航，中间主要显示最近日志更新导航，体现主页的主题，在右边插入一个flash的MV用来显示最新更新的照片，接着是相册的风采显示；底部用来添加主页地址连接以及联系方式，整个网站的设计条理清晰，层次分明。二、 正文1 网页制作的前期策划和准备 在正式制作我们的网页之前，我们将主题确定在介绍个人主页上，一共做了11个子页面，但是真正有内容的只有6个，其他4个由于时间关系就有待改进了，因此加上主页，有内容的网页一共是7个。 然后我们确定了一下各网页的整体布局以及颜色的选取，由于是个人主页欣赏，因此整体的颜色决定采用黑色，既符合广大同学们的喜爱同时也给人以视觉的冲击。确定了这些后，就是上网查找有关资料，看看别人的个人主页是怎么做的，还有查找需要的一些图片等。为了让网页做得更能符合当今网页设计的潮流，在网上找了一着动态效果的代码，通过仔细阅读，修改成自己想要的样子。2 设计方案主架构设计，结构图如图1所示：主页我的主页我的日志我的相册我的音乐我的档案我的好友我的下载我的爱好我的心情我的博客我的家园图1个人主页的首页设计，结构图如图2所示： 首页 主题flash 导航 登录界面滚动新日志导航热点话题信息栏 照片展示图23、网页实现31 首页个人主页网页制作中我使用了Adobe Dreamweaver CS5软件，我认为所有网页的总体布局是一样的，因此先总体的做了个网页的模板，在此模板的基础上，再去设计各个子页面。此模板由导航区，内容区以及友情链接区组成。首页中每一个模块都是用AP Div布局的。用id和类可以简便的使用AP Div对网页进行扩展，这样使网站条理清晰，便于加入其他内容元素以及修改。首页的开头主题部分借助Macromedia Flash 8软件制作的一个动态主题文字的flash文件，给人一种全新的感觉。效果如下：接着是一个用Spry 菜单栏作为主页的导航，效果如下：还有主体部分的最中间及最新照片的显示都是通过Macromedia Flash 8制作的不断变化动态效果，至于一些诗所用的字体是在网上找的一些动态图片。效果如下：首页的主体部分使用了JavaScript技术，加入了最新日志自动由下向上不断移动的动态导航效果以及接着相册图片自动切换的功能，增加网页的动态效果。还有停留时间显示，最低端的文字从右弹出。效果分别如下：在最左边通过表单设置了一个登陆界面，以及添加了一些相关的按钮。接着下面插入了一个表格，表格里内容为最近热门话题的内容在所有的页面中，背景图片均为黑色，目的与主体颜色一致，效果如下：下面请看具体设置。3.1.1具体设置以及部分JavaScript定义代码最近日志更新动态导航效果：效果如右图：效果如图：3.2 我的日志介绍：在这一页中，开头部分不变，然后在主体部分插入一个多个AP Div，每个部分分别为每篇日志的内容。效果如下：3.3 我的相册： 开头部分照样与首页不变，然后再主题中插入多个AP Div，并在每个AP Div中插入照片，并为照片设置链接，效果如下：3.4 我的音乐： 开头部分与首页不变，然后插入一个多行的表格，然后为每行加入歌手，歌名，并加上背景图片，效果如下：3.5 我的档案开头部分与首页不变，此页主要分三部分，分别为：头像、个人资料、基本资料，首先插入一个AP Div，然后插入照片，个人资料、基本资料分别插入一个惰性的表格，效果如下： 3.6 我的爱好我喜欢的明星主题分为两部分，左边分别插入一个AP Div，然后插入明星的图片，右边分别插入一个多行多列的表格，并分别填上他们的资料及一些相关内容，效果如下： 三、设计小结1、设计中遇到的问题及解决首先在设计之初我对布局无从下手，不知道我想要的这样一个主页该怎么样去布局会更美观、更漂亮，这个过程也让我考虑了很多天并且浏览了网上许多优秀个人网页的布局。其次，在设计过程中，对色调以及内容的排版上也没有什么很好的思路，经过不断的尝试和比较才终于让自己渐渐有点满意。接着的问题是对一些动态效果的实现，虽然老师已经提供了一些关于通过使用JavaScript定义实现的一些动态效果，但是刚开始使用起来经常会出现无法实现的情况，通过不断的尝试以及查阅网上资料，才终于实现了自己想要的结果。最后，在设计完成之后，发现不够美观生动，于是自己开始动手学flash。在制作过程会遇到各种各样的问题，但是通过问同学和网上资料最终还是都一一解决了。2、心得体会在进行个人主页课程设计的这几天里，我利用了学习之余的一切可利用的剩余时间，全心全意投入到网页世界，去不断的学习，去不断的探索；同时去不断的充实，去不断的完善自我，在网络的天空下逐渐的美化自己的人生！本次期的网业设计课程，开展了动态思维训练教学活动，对于我们学生来说，可以激发学习兴趣，调动学习的自觉性，自己动脑、动手，动口，运用网络资源，结合教材及老师的指导，通过自身的实践，创作出积聚个人风格、个性的个人网页。总体来说，这次的网页课程设计中，我学会了很多知识，虽然过程比较艰辛，但在INTENET领域中，有了一个展示自我的空间，我觉得很