南昌大学网站设计报告

本文格式为Word版，下载可任意编辑——南昌大学网站设计报告

实验报告

试验课程：学生姓名：学号：专业班级：

网页设计与制作123123456

123456789

2023年12月10日

目录

试验一网站规划报告3试验二网页制作综合试验6

南昌大学试验报告(一)

学生姓名：123学号：123456专业班级：123456789

试验类型：□验证□综合■设计□创新试验日期：试验成绩：

网站规划报告

一．

网站的名称：1号动画室网站的Logo：

网站的网址：http://.77

网站的广告语：动画也是人生的一种写照

网站的建站目标：为广大爱好观看动画的观众以及对动画不了解的观众提供一个观看、了解动画的网站

网站的受众对象：广大爱好动画的人

二．

动画行业网站目前状况的介绍：目前互联网上的动画网站好多，譬如58动漫网、腾讯动漫等等，这些网站比较大型，全面，动漫资源相对丰富。

我选择这个网站的原因：首先，我想收集一些关于历年奥斯卡的得奖动画长片，终究，奥斯卡的评奖标准在世界范围内都是相当有水准的，十分有公信力，其对于影片的审核有一系列的硬标准，对于动画电影特别如此，所以，我想收集这些动画长片资料，便利任何想观看动画的人，让他们可以在我们的网站上找到大量有关于优秀奥斯卡得奖动画的信息。我想收集这些优秀影片，让对动画不太了解的人能够体会到动画长片的魅力，改变人们认为动画只适合儿童观看，而不适合大人观看的陈旧观念。

我做这个网站的风格及创意:风格主要是LOGO，图片，文字，还有Flash。其中色调以绿色、紫色、蓝色为主。网站名称直接包含在Logo中，一目了然，主体以绿色为背景。创意是用老式的的胶卷方式展示了14张得奖影片，滚动展示，让人大致了解本网站的内容，同时，也有一股怀旧之风；在5个主栏目的导航栏中暗藏了两张图片，设置了一个“鼠标经过对象〞事件，两张图片是一致文字不同字体，重叠在一起，当鼠标点击时，会产生文字跃动的效果，并且，单击后会前往相应的网页；子网页中设置了嵌入式框架，让多张网页可以在一个页面中显示；网页中特地设置了一个经典语句栏目，中英文对照翻译，也可以让爱好英语的人可以在这里看到一些优秀经典、有意义的句子，学习一些英语口语的特别用法；除此之外，我们网站还在“动画长片〞栏目中还提供了下载资源的超链接，让人们可以便捷的下载动画电影；壁纸栏目的设计，可以让人们下载自己所

钟意的壁纸，设置自己的桌面壁纸；动画配乐栏目的设置，让爱好英文歌曲的用户可以听到一些颇为经典的音乐，感受一下动画电影配乐的经典之处。每张网页都设置了共享按钮，用户浏览网页时，看到爱好的内容就可以共享至一些社交账号，让更多好友了解到这些动画长片，同时，这也宣传了我们的网站，为网站流量的增加创造了便利。

三．

网站的栏目设置：

网站的主要内容介绍：

本网站主要有5大部分：

1.首页2.

动画长片3.动画壁纸4.动画配乐5.经典语句

四.

网站首页的设计和规划草案：

五．

技术工具：Flash、Dreamweave、Ps、logomarker、flashcreator等

南昌大学试验报告(二)

学生姓名：123学号：123456专业班级：123456789班试验类型：□验证□综合■设计□创新试验日期：2023.12.08试验成绩：

一、试验项目名称

试验Dreamweaver网页制作综合试验

二、试验目的

用Dreamweaver制作一个简单的网站,熟练把握这个网页制作软件的基本操作。

三、试验基本原理

Dreamweaver包含一个崭新、简单、高效的界面。新增了大量功能，性能更加卓越，软件的易用性也得到大步的改善。并且也易于用特效代码来增加网页的动态效果。还可以结合其他第三方软件来完善网站内容。

四、主要仪器设备及耗材

计算机及相关网页设计软件软件Dreamweaver、Flash、CSS3menu、photoshop等。

五、试验步骤

1.确定网站目标：最正确动画长片类

2.主题和风格遴选：本网站主题是最正确动画长片，色调以娇艳为主，绿色、紫色、蓝色为主。主要采用的是一些相关的获得奥斯卡的动画片为主。

3.素材制作：相关制作涉及flash、photoshop、CSS3menu等；4.利用Dreamweaver进行网页制作：

a.整个网站基本框架的建立。利用Dreamweaver建立起整个网站的基本框架，就宛如修建房屋一样，先建立起整个外部结构，再进行内部结构的完善，主要是利用表格以及内嵌式框架搭建网站初步轮廓。

b.素材准备与制作。在百度上探寻最正确长片的有关资料，一些最正确电影得奖信息、下载资源、壁纸图片、动画原声音乐、中英文台词剧本，利用Word进行文字整理工作，对于篇幅量大的文字先用Word进行文字预处理，再直接导入Dreamweaver，减少文字处理工序；利用Photoshop将一些图片整理在一起，调整图片大小以适应相应网页预留位置的大小，将图片与表格完美对齐，并利用PS中的一些特别字体制成图片，使得可以在网页中显示一些特别字体，而不用考虑用户的电脑中是否安装有相应的字体，更好的浮现网页，使得网页中的文字更加丰富多彩；整理一些歌单以及歌曲的相关信息，下载相应的MP3歌曲；整理中英文台词剧本，找寻对应的句子，细细品味其语句的经典所在。

c.元素填充。将搜集的有关本网页的相关素材全部放至网页中，依照预先设置好的位置排放，并且为文字元素设置相应的CSS样式、超链接；为图片添加相应的超链接，以及设置图片热区，链接到相应的网站。

d.特效添加。利用flash将14张图片制作成一张会自动播放的胶片式动画；再另用一段Div代码设置另一种形式的图片滚动，鼠标移至图片上会有暂停的效果，以让观看者更好的观看图片的详细状况；用“鼠标经过图像〞事件将两张不一样字体一致颜色、大小的图片放置在一起，当鼠标经过图像时，产生文字跃动效果。

e.测试检查。检查所有的超链接，以及路径的设置，路径尽量设置为相对路径，避免出现图片找不到的状况；将网页在不同分辩率的显示屏上进行显示，检验网页是否能在不同分辩率的屏幕上完全显示以及页面的留白状况。

f.制作总结。网页设计是一个十分繁杂的工作，前期的网页规划与设计是最为重要的地方，由于它是整个网站是否能够得到用户爱好的关键所在，特别是网站主题的确定这一块十分难选择，网站主题的选择还是应当小而精，最好选择自己擅长或者感兴趣的内容，选题不要太滥，目标定位不要过高；除此之外，网站整体风格的设计也是十分难的，特别是作为一个动画介绍类网站，其主题风格应当是轻快明白的，让人能够回归到童年的感觉，所以，在选择网站主色调之前，很难决定，最终还是选择了绿色为主色调，辅之以蓝色、紫色，这样给人的感觉更舒畅一些。这些前期的准备工作花费了很长的时间，选题和素材的收集都是十分重要的工作。后期的网站的实现与测试反而没有用太多的时间，依靠Dreamweaver这款“所见即所得〞的软件，使得网站代码的输入工作量得到减少，让网站设计人员有更多的时间放在网站的规划与设计上，这是十分好的。一个好的网站制作成功，是需要多款软件相互搭配的，譬如Photoshop、flash等软件的灵活运用是可以为网站增光添彩的。网站还是应当本着“内容第一，形式其次；二者兼备，即为佳作〞的思想，以此来制作较为成功的网站。

六、试验数据及处理结果

网站首页展示：

“动画长片〞子栏目：

“动画壁纸〞子栏目：

“动画配乐〞子栏目：

“经典语句〞子栏目：

在经典语句子栏目下设置了嵌套框架，让多个网页在一个网页框架中显示。如：

七、思考探讨题或体会或对改进试验的建议

第一次制作完整的网站，存在好多不足之处。在颜色搭配方面和特效制作方面存在不足。网站主题的选择还是过于广泛了点，还可以再精细点，其中，经典语句栏目下，应当还可以提供相应的中英文台词剧本的下载，这样也可以让用户体会到原版英文台词的幽美所在；对于图片的后期处理还不是很到位，有较为明显的修图痕迹；没有较多的运用到flash动画，这个原是可以为网站增加大量动态效果的；在本网站中使用的一些脚本代码经常出现被浏览器自动屏蔽掉的问题，这个以后有待用更好的编程语言来解决，使用兼容性更好的编程语言来设计网页，从而使得