资源描述：
《网页设计报告...doc》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。
1、网页设计报告姓名:_____________班级:___________1、确定网站主题我的网站的主旨在于介绍《火影忍者》,《火影忍者》是日本漫画家岸本齐史的代表作,作品自1999年开始在周刊《少年jump》上连载后,读者反应非常热烈。随后,《火影忍者》的TV动画在日本东京电视台播放,成为最受欢迎的动漫作品之一。故事成功地将原本隐藏在黑暗中,用世界上最强大的毅力和最艰辛的努力去做最密不可宣和隐讳残酷的事情的忍者,描绘成了太阳下最值得骄傲最光明无限的的职业。在这个忍者的世界中,每一位年轻的主人翁都在开拓着属于自己的忍道。2、搜集材料主要在网站上搜集所要的网页信息,包括图片、文字、相关
2、的新闻,同时,查询相关的图书、报纸、光盘、多媒体等,也可以网站包括8个页面多。首页、人物介绍、忍术揭秘、传说中3忍、晓组织等等。常言道:“巧妇难为无米之炊”。要想让自己的网站有血有肉,能够吸引住用户,你就要尽量搜集材料,搜集得材料越多,以后制作网站就越容易。然后把搜集的材料去粗取精,去伪存真,作为自己制作网页的素材。3、规划每一个页面用统一的背景图片,以保证网站统一的风格。用一个Flash做了Loge,搭配合适的元素用Fireworks设计出独特的站标,然后再仿制出相似的其他子页面站标,网站整体色调为淡黄色,然后点缀其他不同的颜色相配,突出主题,但颜色不宜过多,过杂,给人一种杂乱的
3、感觉。版面设计要灵活,根据各部分内容的不同适当的自由设计。但是每个页面的主元素和位置不能变,比如loge.版权信息等。网页布局主要用层和表格,用层定位内容的大体结构,再用表格具体定位。为了网页布局的协调,还可以加入flash动态图片,会达到更好的效果。4、选择合适的制作工具做网页的首先工具当然为Dreamweaver,另外,为了处理网页中的其他元素,还可以使用FireworksFlash等软件。为了简便还用了下Photoshop。5、制作网页素材、风格、模板都设计好以后,下一步就是具体的制作网页。制作网站时,首先要做的就是站点的规划,建立一个本地站点,比如说,”Naruto”然后再
4、建立各个页面时,都应该建立在本地站点中,在网页制作时所需的各个元素都要进行统一的管理,建立统一的文件夹放同一类型的文件,我在制作时建立了“image”文件夹来存放图片,但由于我的图片收集比较多,也没去整理导致做完后有些没用的图片没删掉。因为页面比较多我就建了个html文件放其他子页面。根据《火影忍者》的剧情人物特色,在网上搜集合适的图片。另外网页的页宽一般不超过1200像素,以保证左右不出现滚动条。在设计窗口中插入一个一行一列的表格,表格的间距为0,颜色为背景色,居中对齐,然后插入背景图片,就做成了网页的背景,网页的设计布局为,中间部分显示网页最新动态,用层工具定位元素的大致位置,
5、在层中然后插入表格,精确定位图像、文本的位置,同时考虑色彩搭配和布局结构,合理的配置每一个元素。首先制作的是网站的中间的map,map是网页中最显眼的部分,它负责链接人物介绍。在图中制作了热点链接,方便访问各个村的人物。之前,logo只是一张图片。后来听说要复杂点,就改用别的技术。Logo是自己用flash制作的遮罩旋转的简单动画,总的来说不难,就是有些东西忘了。还有就是老师要求的导航栏,我用了标签行为,总的来说是完成了。但不是太完美。点在人物介绍上layer7出来了,但下移鼠标去layer7时,layer7就消失了。后来把layer7隐藏删了,把layer7隐藏动作加在导航栏里的
6、其他标题上。也就是鼠标在别的标题上,layer7就消失。这里因为时间关系,只做了2个layer的行为。因为之前,没听清楚老师要求没做这个。还有就是图片背景弄不成透明,Fireworks不行后来试了下Photoshop也不行,只能把背景改为和页面背景一样的#F7E696,这是一个不完善的地方啊。主页里其余导航条都是卷轴状,这里合乎《火影忍者》里的忍术卷轴这个特色。这是我从网上下来的,用fireworks把中间的字抠了,自己打上了几个标题。这样可以让人感觉自己的页面很统一。右下角是个图片闪耀的简单动画。之前,网站是用的软件里给定的框架做的,做完后感觉排版有问题。感觉位置都变了,后来自己
7、扯了重做。布局全用的层,终于页面规范了,不是之前的杂乱无章。主页如下:下面简单介绍下几个子页面。“尾兽人柱力”做的比较简陋,是之前用frontpage做的,后来也没自己也没改。因为人物介绍这个页面,做的太庞大的了。“忍术揭秘”这个子页面,是框架页面。分上下2部分,是标题和内容。每个忍术里面都做了图片的flash,共8个把,这是一个小亮点...传说中三忍页面,中间做了个图片浮动的鼠标点上去会停下来的flash,这也是个不错的想法。晓组织这个页面,也是一个遮罩的flash
