毕业设计作品制作说明.pdf

作品制作说明 课题 图像类网页设计与制作图像类网页设计与制作 学学院院电子信息工程学院电子信息工程学院 专专业业（方方向向）动漫设计与制作专业（游戏开发方向）动漫设计与制作专业（游戏开发方向） 班班级级动漫动漫 091091 学学号号090206133090206133 姓姓名名魏茂武魏茂武 完成日期完成日期20112011 年年 1212 月月 2222 号号 指导教师指导教师杨丹杨丹 南通职业大学电子信息工程学院作品制作说明 1 图像类网页设计与制作 作品简介 随着 Internet 的诞生和发展,许多人不再仅仅局限于网上冲浪， 而是参与到网站建 设中。 旅游建站相当于在网上建立一个家， 你就可以在这里向游客介绍江苏的旅游景点， 展示江苏旅游风景文化，推销江苏的风光。网页制作作为网站制作中一个重要的环节， 相对于传统的平面设计而言，网页设计具有更多的新颖性，更多可以表现的手法。现在 的网站建设与制作过程，网页设计与制作的具体经历，包括：网页设计与制作过程中的 网页布局、色彩构置、框架结构等。 本文以江苏旅游景点网站为例，主要体现了网站的布局、实现、浏览、网站数据安 全等内容。本网站主要运用 Dreamweaver、JSP、Tomcat 来制作的。网站的主要内容包 括主页、旅游风光、旅游文化、规划保护、友情链接、联系我们、版权声明、关于本站、 用户登录或注册等。 南通职业大学电子信息工程学院作品制作说明 2 南通职业大学电子信息工程学院作品制作说明 3 1 1 绪论绪论 1.11.1 主页功能主页功能 通过主页，可以让学生了解江苏旅游的主要风景文化，通过主要板块的设置初 步对江苏旅游风景文化的结构有所了解，通过此网站来展示我江苏旅游风景文 化的特色。 主页让浏览者更加方便快捷的了解江苏的旅游景点，风光文化。 1.21.2 子页功能子页功能 通过子页将网站内容更加条理化、更加详细、更加方便地展现给浏览者。 子页中将每个板块的内容具体化、深入化、详细化。让浏览者详细了解江苏风 景文化。 动态的设计能够让浏览者及时快捷地与管理员取得联系， 并可以提出宝贵意见。 1.31.3 开发工具的选用及介绍开发工具的选用及介绍 选用的开发工具及相关软件主要有： Dreamweaver 8 Dreamweaver 8 可以用最快速的方式将 Fireworks，FreeHand，或 Photoshop 等档 案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于 选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dreamweaver 能与您喜爱的 设计工具，如 Playback Flash，Shockwave 和外挂模组等搭配，不需离开 Dreamweaver 便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使 Dreamweaver 自动开启 Firework 或 Photoshop 来进行编辑与设定图档的最佳化。总体来说，Dreamweaver 8 是 网页制作工具，界面简洁、操作高效、功能强大，能够高效的制作网页。 Photoshop Photoshop 可分为图像编辑、图像合成、校色调色及特效制作部分：图像编辑是图 像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜象、透视等。也 可进行复制、去除斑点、修补、修饰图像的残损等；图像合成则是将几幅图像通过图层 操作、工具应用合成完整的、传达明确意义的图像，这是美术设计的必经之路；总体来 南通职业大学电子信息工程学院作品制作说明 4 说， PS 是图象图形处理软件， 在网页制作过程中处理图片渲染网页起着不可嘀咕的作用， 两者各有千秋，可以相互配合使用。 Flash Flash 可以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之 间的任何内容，制作小动画及简易小网页，与 Dreamweaver 两者配合使用。 JSP,Tomcat JSP 技术使用 Java 编程语言编写类 XML 的 tags 和 scriptlets， 来封装产生动态网 页的处理逻辑,将网页逻辑与网页设计和显示分离，支持可重用的基于组件的设计，使 基于 Web 的应用程序的开发变得迅速和容易。 Tomcat 是一个轻量级应用服务器，在中小型系统和并发访问用户不是很多的场合 下被普遍使用，是开发和调试 JSP 程序的首选。对于一个初学者来说，可以这样认为， 当在一台机器上配置好 Apache 服务器，可利用它响应对 HTML 页面的访问请求。实际 上 Tomcat 部分是 Apache 服务器的扩展， 但它是独立运行的， 所以当你运行 tomcat 时， 它实际上作为一个与 Apache 独立的进程单独运行的。如图 1.3 所示。 图 1.3 Tomacat 界面 南通职业大学电子信息工程学院作品制作说明 5 2 2 网站总体分析与设计网站总体分析与设计 2.12.1 网页设计的重点分析网页设计的重点分析 网页主页的设计至关重要。 主页的设计关系着整个网站的布局设计与内容介绍。 网页主页中布局的设计与风格、色彩搭配上至关重要。 网页副页模板的设计也是非常重要的，怎么样让它方便快捷的展现各个版块的 内容。 网页中也要注意一些 java 脚本的运用。要妥善运用这些工具。 2.22.2 网页设计的难点分析网页设计的难点分析 网页设计中最难设计的就是主页的版面设计是如何的设计、还有就是色彩搭配 是否合理是否符合公司企业的性质。 网页设计中子页设计模板要谨慎小心的设计，做到最完美的状态。 网页设计中各种元素的搭配是一个比较难的问题！既要美观好看、又要合理。 2.32.3 总体设计与构架总体设计与构架 本站共 5 个栏目，分别为主页、旅游风光、旅游文化、登录或注册、规划保护。每 个栏目又由不等的子栏目构成。如图 2. .1 所示。 图 2.1 主页版块 在各个组成部分中，又可细分为各个子模块。 在旅游风光分为 39 个模块。如图 2. .2 所示。 南通职业大学电子信息工程学院作品制作说明 6 图 2.2 旅游风光子页 旅游文化分为 13 个子模块。江苏的 13 市。如图 2. .3 所示。 图 2.3 旅游文化子页 登录活注册模块分为两个模块登录和注册。如图 2. .4 所示。 图 2.4 登录注册界面 3 3 静态页面设计静态页面设计 南通职业大学电子信息工程学院作品制作说明 7 3.13.1 主页设计主页设计 首先是导航栏， 点击任一导航进入相应的页面， 方便用户更快更好的浏览页面。 然后按照事先的网页布局来进行设计，最适当位置安插动画图片。 动画下面是江苏省会南京中山陵的图片。 在下面是做的滚动字幕。 然后是网站的友情链接等。 制作效果局部图片如图 3. .1 所示 图 3.1 主页 3.23.2 子页设计子页设计 子页的布局使用了模板来统一风格，基本形式如图 3.2 所示。 图 3.2 子页 3.33.3 CSSCSS 样式样式 南通职业大学电子信息工程学院作品制作说明 8 在制作网站的制作过程中，CSS 样式的运用很多。CSS 的运用使本网站的统一设置 起到了关键作用。在子页中文字的制作过程中运用了 CSS 样式，导航同样运用了 CSS 样 式，另外在网页字体的设置中，使网页更加整齐、一致。 4 4 动态页面设计动态页面设计 4.14.1 用户注册用户注册 用户注册，提示注册成功，否则登录失败。如图 4.1 所示。 图 4.1 注册界面 4.24.2 用户登录用户登录 用户登录，提示登录成功，否则登录失败。如图 4.2 所示。 图 4.2 界面 南通职业大学电子信息工程学院作品制作说明 9 总结 网页制作主要是利用图形制作软件和处理软件进行网页效果图的制作。 我们需要了 解一个网站的制作过程， 并知道网页制作在网站制作中的作用， 一方面结合具体的实例， 多加练习， 培养对于技术的敏感和快速适应性， 注意到技术变化带来的各种新的可能性， 消除技术所形成的障碍； 另一方面要多方面、 多角度地感受与掌握电脑设计的时尚语言， 扩展对传统设计范畴的认识。 经过这么长时间的磨练，我对网页制作的基本操作都已熟知。在制作的过程中最难 解决的问题就是动态页面的设计，之间出现了各种各样的问题，通过自己慢慢的调试和 老师、同学的帮助，最终将网站完成了。网页的制作不仅仅是图片加文字的简单组合， 它包括了页面的整体风格、设计、布局，颜色的搭配与组合等各方面的知识；网站网页 设计是一种非常难做但是又非常有意思的工作，我们可以任意发挥自己的创意，让我们 飞翔在自由创意的国度里。但是做网页也要做到谨慎小心，要一丝不苟的做！只有对各 种知识的全面掌握，对各种软件的熟练使用以及培养考虑问题的全面性，才能构建出一 个受欢迎的网站。 通过这次锻炼