网页设计与制作课程的网页报告

eyeson20072008

本人非计算机专业，且跟计算机相关的东西可以说是相差甚远，当年日夜奋战为我喜欢的漫画《火影》做了一个html的网站，一直以为源文件丢失了，今天居然找到了，信息万分啊，{:soso_e113:}{:soso_e113:}{:soso_e113:}

分享一下我的网站报告

网页设计与制作课程的网页报告

网站标题：

火影忍者--木叶站

作者：

×××（保密）

网站内容简介：

介绍火影忍者这部动画片中主要的忍者村--木叶村的情况，包括其标志，主要的年轻忍者以及一些出色忍者的详细介绍和最近的动态。有分析内容的文章，有忍者大比拼，还有最新的内容播报。共29个页面。

主要栏目：

首页：包括最新集介绍，每期忍者推荐，年轻一代的忍者介绍，攻击力排行榜等。总共有9个栏目。下级页面：包括忍者介绍中关于部分忍者的介绍，文章链接中对内容的评析，精彩推荐《名侦探柯南》和《犬夜叉》两部漫画。也有《银魂》等，不过没有进一步做链接。最后一部分，也是页面最多的一部分，是我最喜欢的忍者的经典图片介绍，图片分为五个阶段：小时候，性格，成长，痛苦或是喜悦，另类表情，长大。每张图片的下方均附上图片说明，说明字体是黑色14号字，旁边是每位忍者的基本介绍，以及作者对人物的希望，字体是浅紫色，字符空间30.

链接情况：

导航栏有四个部分：木叶首页，忍者介绍，文章链接和精彩推荐。忍者介绍，文章链接，精彩推荐，精彩图集，木叶新生代下的四张图片均有相应的链接。忍者介绍的侧边栏里有漩涡鸣人等忍者的介绍，共四个页面。文章推荐也是一样的设置，四个页面。精彩链接的设置稍微有所不同，但是没有对侧边栏的内容进一步链接。精彩图集是链接最多的，一共是19个页面，本来想只做一两个页面，可是发现我收集了那么多图片，就停不下手了。

各个栏目网页布局方法：

主要使用框架布局来布局整个页面，整体表格使用了1像素的边框，边框颜色是浅蓝色，与背景的白色形成鲜明对比，让表格里的内容更加突出。标准视图与布局视图交相切换，对个别表格进行较细的设置，如为增加文字部分与侧边框的距离，而插入一个3像素宽的狭长表格，就把它的背景和边框都设置成了白色。侧边栏红白相间，看起来没有那么呆板。精彩图集页面里，为了使整个布局不是那么呆板，在导航栏的下面插入一个浅粉色的表格。在布局上本着风格统一，颜色搭配协调，尽量看起来干净整洁，给人一种热烈但是不喧闹的感觉。

应用模板：

忍者介绍和文章链接使用的是一个模板，首页和精彩推荐分别单独完成，不过所有的页面都用了相同的标题栏和部分侧边栏。模板的字体设置与首页和精彩推荐是一致的。精彩图片用了两个模板，一个是带左箭头的，一个是带右箭头的。（我很想做成那种flash效果的，可是不知道为什么，无法在我的电脑上使用，可能是软件版本不兼容的问题，但是我换了以后还是不行，再加上那个flash做的不好看，反而影响整体效果，所以就没有用。）

CSS技术：

共有以下css模板：首页的标题栏，黑色16号字加粗，居中分配；侧边栏，浅紫色14号字加粗，居中分配；首页的二级标题栏，黑色14号字加粗，居中分配；首页文字，浅紫色12号字正常，缩进12像素，左对齐；二级页面文字，浅紫色12号字正常，缩进5像素，左对齐，定位为上下左右各5像素空间，盒子填充上下左右各15像素空间，行高35像素；二级页面侧边栏与首页侧边栏设置同；精彩推荐中的字体设置与二级页面的文字设置相同。

图片处理：

主要使用了PhotoShop和fireworks工具，所有图片均是自己处理过的。网页标志图在原有图片的基础上，使用了木质效果，图中的红色弧线是用钢笔工具画出来以后又用橡皮图章工具修改的，为使其更好看，表格设置为边框和间距各1像素；导航栏是应用了蓝色按钮效果的图片，并且增加了其与标志图和标题栏的间距；木叶标志和结印手势都使用了fireworks的动画功能，分别有7帧和5帧。前者是大小的转变，首先将图片的背景颜色设置为与表格背景颜色相同，使之融为一体，然后再制作动画时，将画布设置为相同颜色，避免大小变化后，出现背景颜色不一致的现象。后者基本与前者同，但是不用设置画布颜色，因为图片完全可以遮住画布。（这两个动画是在机房的fireworksmx下做出的，很奇怪的是我使用fireworkscs3用同样的步骤做出的动画无法在dreamweavermx下应用，可能是版本不兼容吧。）几乎所有的图片都设置了背景颜色与其所在表格颜色相同，而且大小与表格大小相符，并且使之完全在正中间。设置背景颜色时，主要使用了魔棒工具，填充工具和吸管工具。拉开各幅图片之间的距离，看起来更为协调和整洁。星星，漩涡和圆环小图标均使用了钢笔工具，以及应用的效果，如渐变，内斜角等，（这些图标是在fireworkscs3下做出的，这是我使用的版本。我记不得步骤了，因为fireworkscs3是英文界面，我是尝试了很多效果才定下来的，那些效果的英文名我不认识。）侧边栏的图标也是使用的fireworkscs3，但是字体是在PhotoShop下加进去的，因为英文版的fireworkscs3无法加中文字体。我想尽量使用同一风格的图片，这样可以省去很多图片处理的时间，结果网上的火影图片资源能够为我所用的不多，多数图片是我在动画上直接截取的。而且由于PhotoShop掌握的不好，所以很多图片处理的比较粗糙，还好因为图片太小，看起来不是那么明显。

Flash工具完成的工作

精彩图集下使用的是最简单的flash，一共使用14张图片，左右循环移动。向左移动是550帧，向右移动也是550帧。Flash学的太少了，所有做不出效果更好的。

耗费时间：

耗时一个多月，每周基本上花10个小时左右。因为我很喜欢这部动画片，而且电脑里存有很多关于它的动画，能够时刻激励我继续做下去。

心得体会：

对软件的不熟练很浪费时间，明明做好的东西因为不知道什么原因就会发生变化，之前做好的东西只好全部换掉，做了很多无用功。构思的变化也很折磨人，有的时候忽然有一个更好的想法，就不得不把以前的布局换掉，而且图像的大小，字体的大小和颜色也全部都要换。颜色的调整一直都不满意，本来想用网上关于火影网页的颜色，但是那些商业气息很浓的颜色不是我喜欢的，也不是我想表达的，所有关于颜色的搭配了解和应用的太少，反而成了最为头痛的东西，因为不知道什么时候已经选好的颜色我就不喜欢了。大量的图片选择和处理是一件很耗时间的工作，因为从网上找的图片基本没有完全合适的，都要做一定的修改，而且有些人物的图片找不到我想要的，只好一集一集的从头看，把我想要的图片截出来。做网页是一件脑力劳动和体力劳动的活，当然能够熟练应用软件和具备丰富相关知识的人可能认为脑力劳动更多，但是很大程度上靠做出来再看效果的我来说，做网页是需要大量体力劳动的。不过最终出来的这个结果是我最满意的。我知道可以做的更好，加入更多的元素，图片的选择和处理可以更加细致，增加更多的链接，但是时间太紧迫了。这个学期除了有6篇论文外，还有9门考试，实在没有精力一个人去完成一个庞大的网站，与他人合作也因别人对这部动漫没有兴趣而告吹。不过以后有时间了，我一定继续完善网站，增加更多的页面和变化，《火影》在继续，我也要继续。

eyeson20072008

eyeson20072008

GIF 动画

eyeson20072008

结印手势

我思故我在

借报告一用，谢了。

meng_lin

很用心、很认真……