《宫M网》网站设计.doc

山东传媒职业学院毕业设计 设计题目 宫M网网站设计 指导教师/职称 张丽/助教 作者姓名 付慧 年级/专业 文化事业管理 目 录摘要 3前言 3一、设计作品前期提案与构思 4二、对设计作品题材的探讨与调研 5三、设计作品目标及可行性分析 5四、设计作品的制作过程 5 第一节：制作流程 5 第二节：模块页面完善 5 第三节：项目技术建设路线 8五、作品制作周期、制作心得体会及经验总结 8参考文献 10宫M网网站设计文化事业管理专业 一班 指导教师张丽摘要：网络的产生使得地球变成了地球村，无论你是哪个国家来自哪个地域，你都可以通过网络知道、学习你想要的东西。网站更是网络中必不可少的，企业可以通过建设网站来详细介绍自己的公司并扩大其经济利益和知名度。建设宫M网这个网站主要是希望喜欢宫崎骏动画片的人们能够多一个途径去了解他的电影和其幕后的一些不为大多数人知晓的东西。建设这个网站并不是说想让他做的最好或者最大等等，主要的目的还是希望多一个途径去了解宫崎骏的台前幕后，当别人在我的网站上看见别的网站没有的或者是不完善的东西，我就觉得我的目的达到了。在这次的网站建设中，我用的最多的软件是：Photoshop 、Flash 和Dreamweaver 这三种软件。关键词：宫崎骏；Photoshop ；Flash ；Dreamweaver 1、 设计作品前期提案与构思 这门课程就是电影网站设计，所以这十周左右的时间就是保证能够完成一个像样的网站，这里所说的网站不是静态网站而是一个利用多种软件完成的动态网站。 按照老师的要求，我们需要在网站的设计阶段注意：网站版式设计、色彩、昂也的形式与内容的统一、多媒体功能的利用等方面的问题。我是想要做一个关于宫崎骏电影的电影网站，因为一直特别喜欢看他的电影画面感和电影背后所折射的道理，很感人。但是网上也有不少关于宫崎骏的网站，那么如何有新意，就是我最大的问题。在观看他的影片之后，感觉其中以绿色为主，所以我初步的想法就是将电影网站的颜色设置为以绿色、浅绿色为主，希望能给所有点进网站观看的人一种放松的感觉，能够消除暂时的疲劳。主菜单我打算从首页、宫崎骏、新闻资讯、相关作品、吉卜力工作室、画作/画册这六个方面来深入，首页希望能够设置一些他的具有代表性的作品海报，右侧设置一些与宫崎骏无论是与作品还是与他的工作室有关的一些消息、资讯或者活动.二、对设计作品题材的探讨与调研 对该网站做了一些有关的调研，情况显示:有很多人喜欢看宫崎骏的动画，不光是局限于儿童有很多大人也很喜欢看，我想里面的内涵可能就是吸引人的一个必不可少的条件。因此，我觉得自己做这样一个动画网站还是有必要或者说是有用的。网站的名字暂定宫M网，意思是：宫崎骏电影迷的一个网站。主菜单详细介绍宫崎骏、新闻资讯、相关作品、吉卜力工作室、画作/画册。首页：尽量将电影中的一些具有代表性的人物、动物或者植物运用到网站的设计当中；宫崎骏：详细介绍这个人物的身份以及他所做过的事情、得过的奖.；新闻资讯：提供一些有趣、最新、有用的新闻；相关作品：宫崎骏的代表作以及最新作品的详细介绍和图片展示；吉卜力工作室：介绍关于工作室具体情况、工作人员、幕后英雄.；画作/画册：之前介绍相关作品的过程中多少也加入了不少图片，为了不重复，想要将这一个菜单建成正在将建设中的网页。网站的注重点还是在介绍宫崎骏的电影作品上。三、设计作品目标及可行性分析 设计的目标首先能够成为一个规范的网站，即使不能放在网上但是也要和网上的那些网站一样效果；其次希望通过一段小的Flash动画来引出这个网站(在网站的开始会有一段小的动画播放，播放完成之后点击动画中的设置按钮进入到该网站的首页）；然后在站头的位置设置一个千与千寻中小黑煤球的跳动的动画；之后在鼠标经过菜单选项的时候都会出现瞬间动画，这里使用悬崖上的金鱼姬里的颇妞形象来做，同样是利用Flash的操作，最后在画作/画册的网页中，“网页正在建设中，敬请期待！”这几个字利用闪动效果制作。从以上我希望达到的目标来看，这个网站的建设还是可行的，动画的制作和闪动、鼠标经过的效果都是可以用Flash动画制作软件来完成，虽然可能会有些麻烦，但还是比较好完成的。4、 设计作品的制作过程 第一节：制作流程 第一阶段的主要工作：网站建设启动，了解网站建设相关信息等； 第二阶段主要工作：项目需求调研，内容进行策划，程序进行工作前期的需求整理； 第三阶段的主要工作：项目设计制作，完成项目所有的静态页面，达到预览效果； 第四阶段的主要工作：项目程序开发及编码工作； 第五阶段的主要工作：项目添加数据及测试工作；项目建设初步验收完成； 第六阶段的主要工作：项目试运行； 第二节：模块页面完善 （一）、热门海报动态模块：在首页菜单栏的下面有大幅金典动画海报动态模块。主要是宫崎骏最经典和最新的动画海报，初步设定为全显三个宣传图片，此模块需要功能的完善和美化。 （二）、相关作品：所有动画作品的海报，点击进入详细内容。 （三）、动画片MV的剪辑：该模块需要加强功能的完善。 (四)、右侧完善：相关活动（画册征集活动、画馆吐槽），评论/解读/资料（评论：经久不衰的魅力魔女宅即便、动画也能有深度、借来的时光 但终归是值得的 、吉卜力的自由或是吉卜力的死亡。） (五)、文章内页（详细页）字体样式统一：站名（宫M网）运用迷你简胖头鱼字体，颜色CMYK分别为：14 0 42 0，图层样式是投影;菜单栏使用迷你简卡通字体，颜色CMYK为 82 69 69 36，菜单栏的背景色设置为草绿色，突出强调的使用绿色，其他字体均使用宋体。按类别规划显示颜色，相对比较整齐。(六)、影片介绍规整：对需要显示的内容，如片名、产地、类别、上映期等作统一位置的调整，使显示内容丰富而整齐。（七）、对所有图片大小的控制：不管是海报还是文章内上传的图片，我们都将调整好最佳的显示大小来实现最好的显示效果，通过程序控制图片大小比例，不使图片变形、模糊。第三节：项目技术建设路线 首先在PS中将页面全部设计完整，然后使用切片工具切割导出Web格式，利用Flash软件将需要的地方做成动画，然后再Dw中新建站点将所有的页面导入DW中超链接。5、 作品制作周期、制作心得体会及经验总结 网站的整个完成周期是八个星期，前二到三个星期主要是用于网站制作的软件熟悉、构思网站的主题、网站板块的构成设计以及用色和细节的敲定、修改，完成所有的准备工作以达到老师的要求；后三到四周主要是网站的制作；最后一两周用于修改于完善以及老师的评价建议。 在整个网站的制作过程中，最关键的其实是软件的掌握，因为搜集素材其实是非常快的一件事情，但是制作却并不简单，制作全部都是用Photoshop 、Flash 和Dreamweaver 这三种软件来完成，所以就必须对这三个软件要非常熟悉，但是由于以前并没有深入的学习再加上没好好学，所以困难是有的。为了能够做到自己理想的效果所以利用很多时间在看一些有关教程，虽然看的自己都受不了，但是当教程中教授有关我的网站的东西时，还是会特别兴奋，感觉没有白看，与我的网站完成又接近了一步。宫M网的制作，我真的、真的非常的用心，在制作过程中我有时因为解决一点小难题就会开心的要死，但有时又会因为一个小难题而心情低落的睡不好觉，但是不管怎样，我可以很自豪的说这是我花了这么长时间独自完成的一件作品，一切都是值得的，虽然会有一些的瑕疵，但是我觉得值。 有些东西看起开来很难，但其实只要你按照她的顺序或者说要点去做很简单，就像剥洋葱一样一层一层的拨开，顺着他的纹理，你会发现其实并不难。就像这个网站一样，我花了很长时间去完成，那是因为我没能好好掌握软件的操作，但只要你对这些软件了如指掌，你会做得非常轻松。每件大的事情都是由很多小的细节组成的，所以注意所有该注意的，无论大小。成就感会让你体会到付出再多都是值得的！ 六、致谢 本设计作品在制作过程中，承蒙陈小萍、张丽老师的建议、指正，在老师的耐心指导下，经过两个月的努力，使本人对网站制作的相关知识进一步得到了了解和深化。逐渐明白了如何将软件的知识应用到设计作品中，达到了理论与实践的合理完美结合。在网站设计、建设中老师给予我许多理论和技术方面的指导。在此表示由衷的感谢。本设计引用了一些网站、图片、视频的资料，在此谨向有关制作者、上传者表示深切的谢意。由于本人水平所限,难免存在不少缺点和错误,希望老师和同学批评指正。最后对参与评阅和答辩的老师表示由衷的感谢 参考文献1 ADOBE PHOTOSHOP CS4基础培训教材/Adobe专家委员会，DDS