网页设计报告

网页设计报告 姓名:_____ ________ 班级:_____ ______ 1、确定网站主题

我的网站的主旨在于介绍 《火影忍者》 , 《火影忍者》 是日本漫画家岸本齐史的代表作, 作品自 1999年开始在周刊《少年 jump 》上连载后,读者反应非常热烈。随后, 《火影忍者》 的 TV 动画在日本东京电视台播放, 成为最受欢迎的动漫作品之一。 故事成功地将原本隐藏 在黑暗中,用世界上最强大的毅力和最艰辛的努力去做最密不可宣和隐讳残酷的事情的忍 者, 描绘成了太阳下最值得骄傲最光明无限的的职业。 在这个忍者的世界中, 每一位年轻的 主人翁都在开拓着属于自己的忍道。

2、搜集材料

主要在网站上搜集所要的网页信息,包括图片、文字、相关的新闻,同时,查询相关的 图书、报纸、光盘、多媒体等,也可以

网站包括 8个页面多。 首页、 人物介绍、 忍术揭秘、 传说中 3忍、 晓组织等等。 常言道:“巧妇难为无米之炊”。 要想让自己的网站有血有肉,能够吸引住用户,你就要尽量搜集材 料,搜集得材料越多,以后制作网站就越容易。然后把搜集的材料去粗取精,去伪存真,作 为自己制作网页的素材。

3、规划

每一个页面用统一的背景图片,以保证网站统一的风格。用一个 Flash 做了 Loge, 搭配 合适的元素用 Fireworks 设计出独特的站标, 然后再仿制出相似的其他子页面站标, 网站整 体色调为淡黄色,然后点缀其他不同的颜色相配,突出主题,但颜色不宜过多,过杂,给人 一种杂乱的感觉。 版面设计要灵活, 根据各部分内容的不同适当的自由设计。 但是每个页面 的主元素和位置不能变,比如 loge. 版权信息等。网

页布局主要用层和表格,用层定位内容 的大体结构,再用表格具体定位。为了网页布局的协调, 还可以加入 flash 动态图片, 会达 到更好的效果。

4、选择合适的制作工具

做网页的首先工具当然为 Dreamweaver ,另外,为了处理网页中的其他元素,还可以使 用 Fireworks Flash等软件。为了简便还用了下 Photoshop 。

5、制作网页

素材、风格、模板都设计好以后,下一步就是具体的制作网页。制作网站时,首先要做 的就是站点的规划,建立一个本地站点,比如说,” Naruto ”然后再建立各个页面时,都应

该建立在本地站点中, 在网页制作时所需的各个元素都要进行统一的管理, 建立统一的文件 夹放同一类型的文件,我在制作时建立了“ image ”文件夹来存放图片,但由于我的图片收 集比较多,也没去整理导致做完后有些没用的图片没删掉。因为页面比较多我就建了个 htm

l 文件放其他子页面。

根据《火影忍者》的剧情人物特色, 在网上搜集合适的图片。 另外网页的页宽一般不超 过 1200像素,以保证左右不出现滚动条。在设计窗口中插入一个一行一列的表格,表格的 间距为 0,颜色为背景色,居中对齐,然后插入背景图片,就做成了网页的背景,网页的设 计布局为, 中间部分显示网页最新动态, 用层工具定位元素的大致位置, 在层中然后插入表 格,精确定位图像、文本的位置,同时考虑色彩搭配和布局结构,合理的配置每一个元素。 首先制作的是网站的中间的 map , map 是网页中最显眼的部分,它负责链接人物介绍。在图 中制作了热点链接,方便访问各个村的人物。之前, logo 只是一张图片。后来听说要复杂 点,就改用别的技术。 Logo 是自己用 flash 制作的遮罩旋转的简单动画,总的来说不难, 就是有些东西忘了。 还有就是老师要求的导航栏, 我用了标签行为,总的来说是完成了。但 不是太完美。点在人物介绍上 layer7出来了,但下移鼠标去 layer7时, layer7就消失了。 后来把 layer7隐藏

删了, 把 layer7隐藏动作加在导航栏里的其他标题上。 也就是鼠标在别 的标题上, layer7就消失。这里因为时间关系,只做了 2个 layer 的行为。因为之前,没 听清楚老师要求没做这个。还有就是图片背景弄不成透明, Fireworks 不行后来试了下 Pho toshop 也不行,只能把背景改为和页面背景一样的 #F7E696,这是一个不完善的地方啊。主 页里其余导航条都是卷轴状,这里合乎《火影忍者》 里的忍术卷轴这个特色。 这是我从网上 下来的, 用 fireworks 把中间的字抠了, 自己打上了几个标题。 这样可以让人感觉自己的页

面很统一。 右下角是个图片闪耀的简单动画。 之前,网站是用的软件里给定的框架做的,做 完后感觉排版有问题。感觉位置都变了, 后来自己扯了重做。 布局全用的层,终于页面规范 了,不是之前的杂乱无章。

主页如下:

下面简单介绍下几个子页面。 “尾兽人柱力”做的比较简陋,是之前用 frontpage 做 的,后来也没自己也没改。因为人物介绍这个页面,做的太庞大的了。 “忍术揭秘”这个子 页面,是框架页面。分上下 2部分,是标题和内容。每个忍术里面都做了图片的 flash ,共 8个把,这是一个小亮点 ... 传说中三忍页面,中间做了个图片浮动的鼠标点上去会停下来 的 flash ,这也是个不错的想法。晓组织这个页面,也是一个遮罩的 flash ,但这个页面我 感觉色调把握比较好。 晓组织在火影里就是给人神秘未知感的邪恶组织, 用紫色和灰色就再 好不过了,渲染到位。 Q 版人物里面,就是 Fireworks 做的一个胶卷动画。注册会员这个页 面,简单做了下表面工作。没有连接数据库。

这就是我的网页设计过程。

最后还要制作各个页面的链接, 把整个网页链接起来, 形成一个统一的整体, 方便浏览 者进行各个页面间的跳转。

6、上传测试

网页制作完毕以后, 要进行测试,在浏览器上运行自己的网站,反复测试, 以发现设计 中的缺陷。

五.设计特色

自己的 flash 用的比较多,但又比较简单。虽然以前学过了,到底是时间长了忘掉了 啊

六.心得体会

首先,非常感谢老师给了我这次,独立设计,制作网页的机会,通过这次试验,我的 收益颇多。首先,独立的实践了一个完整的网站设计的全过程,把设计中零散的注意点和 要求在自己大脑中形成了一个完整的框架体系,使平时学到的知识点有了一个质的升华, 并且合理的在试验中进行了实践。第二,在这次实验的过程中,我搜集了大量的素材和网 页设计的技术技巧方面的书,扩大了知识面,给我在以后的设计过程中能博采众长,制作 出技术精湛的网页打下了基础。最后,我感受最深的是,技术方面的学习,最重要的是自 己实践做出东西,只通过自己的亲身实践,才能学会、学懂、学通技术。

本文来源：https://www.bwwdw.com/article/2cwp.html