南昌大学网站设计报告

实 验 报 告

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

网页设计与制作 123 123456

123456789

2015年 12月10日

目录

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

南昌大学实验报告(一)

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

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

网站规划报告

一．

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

网站的网址：

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

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

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

二．

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

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

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

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

三．

网站的栏目设置：

网站的主要内容介绍：

本网站主要有5大部分：

1. 首页 2.

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

四.

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

五．

技术工具：Flash、Dreamweave、Ps、logomarker、flash creator等

南昌大学实验报告(二)

学生姓名： 123 学 号： 123456 专业班级： 123456789班 实验类型：□ 验证 □ 综合 ■ 设计 □ 创新 实验日期： 2015.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这款“所见即所得”的软件，使得网站代码的输入工作量得到减少，让网站设计人员有更多的时间放在网站的规 …… 此处隐藏：2240字，全部文档内容请下载后查看。喜欢就下载吧 ……