网页制作设计报告.docVIP

《网页制作》课程期末考查设计报告 ? 题 目： 个人主页网站的设计与实现 系 部： 数学与应用数学系 专 业： 信息与计算科学 姓 名： 谢小军 学 号： 班 级： 信计一班 学 期： 2011年下学期 目　录 一、 绪论 3 1、网站主题 3 2、网站规划 3 二、 正文 3 1、网页制作的前期策划与准备 3 2、设计方案 4 3、网页实现 5 3.1首页——个人主页 5 3.1．1具体设置以及部分JavaScript定义代码 6 3.2我的日志 11 3.3我的相册 12 3.4我的音乐 12 3.5我的档案 13 3.6我的爱好——我喜欢的明星 13 三、 设计小结 13 1、设计中遇到的问题及解决 14 2、心得体会 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所示： 图2 3、网页实现 3．1 首页——个人主页 网页制作中我使用了Adobe Dreamweaver CS5软件，我认为所有网页的总体布局是一样的，因此先总体的做了个网页的模板，在此模板的基础上，再去设计各个子页面。此模板由导航区，内容区以及友情链接区组成。首页中每一个模块都是用AP Div布局的。用id和类可以简便的使用AP Div对网页进行扩展，这样使网站条理清晰，便于加入其他内容元素以及修改。 首页的开头主题部分借助Macromedia Flash 8软件制作的一个动态主题文字的flash文件，给人一种全新的感觉。效果如下： 接着是一个用Spry 菜单栏作为主页的导航，效果如下： 还有主体部分的最中间及最新照片的显示都是通过Macromedia