网站设计与制作-毕业论文-

1、河南经贸职业学院毕业论文职此一家网页设计与制作论文作者： 专 业：计算机多媒体技术 学 号： 班 级： 指导教师: 答辩委员会主席_ 评阅人_ _论文答辩日期_独创性声明 本人声明所呈交的毕业论文是我个人在导师指导下进行的研究工作及取得的成果。尽我所知，除文中已经标明引用的内容外，本论文不包含任何其他个人或集体已经发表或撰写过的研究成果。对本文的研究做出贡献的个人和集体，均已在文中以明确方式标明。本人完全意识到本声明的法律结果由本人承担。论文作者签名： 日期： 年 月 日毕业论文版权使用授权书 本毕业论文作者完全了解学校有关保留、使用毕业论文的规定，即：学校有权保留并向有关部门或机构送交论文的

2、复印件和电子版，允许论文被查阅和借阅。本人授权河南经贸职业学院要以将本论文的全部或部分内容编入有关数据库进行检索，可以采用影印、缩印或扫描等复制手段保存和汇编本论文。 保密，在_年解密后适用本授权书. 本论文属于 不保密。（请在以上方框内打“”）毕业论文作者签名： 指导教师签名：日期： 年 月 日 日期： 年 月 日河南经贸职业学院毕业论文摘要在互联网飞速发展的今天，网络已成为人们生活中不可缺少的一部分。网站的迷人之处在于综合使用文本、图象、声音、动画和视频等信息和内容，具有丰富的多媒体表现与互动特点，无可置疑，网站已成为最吸引人的也最有效的信息传递手段和方式。随着网络技术的发展，各类网站纷纷

3、出现。个人网站也成为了一种时尚。越来越多的人希望拥有自己的网站，开辟网络世界的一片天地，展示自己的才华和风格。这篇论文是关于我对一个网站的设计，即“职此一家”的设计。首先介绍了网页的一些基本内容，其次介绍了网页制作工具，之后从网站设计的整个流程出发，通过自己设计的这个网站作品来说明并演示一个完整的网站制作过程。在第四部分阐述了网站设计的完整步骤，由前期准备到分析设计到最后的制作。关键词：网页设计，策划，制作I目录摘要I1 绪论12 网页概述22.1 什么是网页22.2 网页设计涵盖的内容42.3 网页设计的原则43 网页制作工具53.1 梦幻网页的编织者-Dreamweaver53.2 网页动

4、画的制作软件-Flash53.3 影像与动画的制作软件Photoshop63.4 JavaScript64职此一家的设计74.1 前期准备74.1.1 整理网站资料74.1.2 网站策划74.2 分析设计74.2.1 设计分析74.2.2 色彩分析84.3 制作网站84.3.1 网站说明84.3.2 网站Logo84.3.3 网站首页94.3.4 网站列表页114.3.5 网站内容页134.3.6 网站搜索页185 结论20参考文献21致谢22231 绪论随着Internet技术及其应用的不断发展，我们的生活，学习和工作也越来越离不开内容丰富的网站，不只是政府机构和企事业单位，甚至是个人也开始

5、制作和发布自己的网站和网页。网页是宣传网站的重要窗口，内容丰富，制作精美的网页会吸引更多的访问者的浏览，这是网站的生存和发展的关键。制作和发布精美的网页已成为一项重要技能。1相对于传统设计来说，网页设计往往要结合动画，图像特效与后台的数据交互因素，在静态页面设计，图片设计和网站动画设计等方面，也可以使网站设计人员的思想得到充分体现，而Dreamweaver，Photoshop，flash作为常用设计软件也是目前网页制作的首选工具，他们都具有强大的设计制作功能1。下面会介绍到这几类软件及网站制作的流程。2 网页概述2.1 什么是网页打开浏览器，在地址栏中输入网址，显示在浏览器中的就是网页。如图所

6、示：（1）网页的基本构成元素网页实际上就是一个文件，这个文件存放在世界上某个地方的某一台计算机中，并且这台计算机与互联网相连接。构成网页的最基本元素是文字和图片。文字是网页的内容部分，图片则是为了更好地充实内容部分或者装饰网页的外观。然而，除了文字和图片以外，网页元素还包括动画、声音、视频、表单、程序等。在网页的空白处单击鼠标右键，在弹出的快捷菜单中选择“查看源文件”命令，或者在浏览器窗口中的菜单栏中执行“查看>查看源文件”菜单命令，就会弹出一个记事本文件，这就是网页的源文件。那么从源文件的角度看，网页实际上只是一个纯文本文件，它通过各种各样的标记对页面上的文字、图片、表格、声音等元素进

7、行描述（例如字体、颜色、大小），而浏览器则对这些标记进行解释并生成页面，这样就得到我们所看到的网站页面了。（2）网页的设计构思网页设计是一个感性思考与理性分析相结合的复杂的过程，它的方向取决于设计的任务，它的实现依赖于网页的制作。网页设计中最重要的东西并不是在软件的应用上，而是在于设计者对网页设计的整理以及设计制作的水平，还在于设计者自身的美感以及对页面的把握上。设计的任务网页设计的任务是指设计者要表现的主题和需要实现的功能。设计的任务是要实现设计者的意图，并非创造美。网站的性质不同，设计的任务也不同，从形式上可将站点分为以下3类。资讯类网站：例如网易、新浪、搜狐门户网站。这类网站为浏览器提供

8、大量的信息，而且访问量较大，因此需注意页面的分割，结构的合理，页面的优化，界面的人性化设计等问题。资讯和形象相结合的网站：像一些大公司的网站，高校的网站等。这类网站在设计上要求较高，保证资讯网站特点的同时要突出企业单位的形象。形象类网站：比如一些小型公司或单位的网站，这类网站一般较小，有的只有几页，需要实现的功能也较为简单，网页设计的主要任务是突出企业形象。这类网站对设计者的美工水平较高。设计的实现可以分为两个部分：一网站的规划及草图的绘制（可在图纸上完成）。二页面的制作（需在计算机上完成）。设计者的第一步是设计版面布局，可以将网页看做传统的报刊杂志编辑。网页的元素有文字、图像、动画，设计者要

9、做的工作就是以最适合的方式将图片、文字和动画摆放在页面的不同位置。接下来就要通过软件将设计的蓝图变为现实。造型的组合在网页设计中，设计者主要通过视觉效果表现主题。造型在视觉传统中是非常重要的一个元素，抛去图像还有文字的问题，画面上的所有元素可以统一作为画面的基本构成要素点、线、面进行处理。通常使用的组合手法有秩序、比例、均衡、对称、连续、间隔、重叠、反复、交叉、节奏、韵律、归纳、变异、特写、反射等，这些组合手法都有各自的特点，在设计中应根据具体情况选择最适合的表现手法。（3）网页设计的特点1.交互性2. 版式的不可控性3.技术与艺术结合的紧密性4.多媒体的综合性5.多维性2.2 网页设计涵盖的

10、内容（1）网页中的视听元素主要包括网页中的文本、背景、按钮、图标、图像、表格、颜色、导航、背景音乐、动态影像等。（2）网页版面设计网页的版式设计与报刊杂志等平面媒体的版式设计有很多相通之处，它在网页的艺术设计中占据着重要的地位，所谓网页的版式设计是指在有限的屏幕空间上将各种视听元素进行有机的排列组合，将理性思维以个性化的形式表现出来，是一种具有个人风格和艺术特色的视听传达方式。它在传达信息的同时也产生了感官上的美感和精神上的享受。2.3 网页设计的原则1.为用户考虑的原则使用者优先观念 考虑用户浏览器 考虑用户的网络连接2.主题突出原则3.整体原则4.内容与形式相统一的原则5.更新和维护的原则

11、23 网页制作工具3.1 梦幻网页的编织者-DreamweaverDreamweaver是创建和管理网页的专业化可视编辑器。使用Dreamweaver可以轻松创建跨平台、跨浏览器的页面。Macromedia的Roundtrip HTML技术允许用户随意导入HTML文档而无需重新设置代码格式。Dreamweaver可以为用户做到：使用动态HTML功能（例如具有动态效果的层和行为）而不用写一行代码。它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。Dreamweaver还是一个可以完全自定义的应用程序。用户可以创建自己的对象和命令修改菜单和快捷键，甚至编写JavaScript

12、代码扩展Dreamweaver的行为和属性检查器。至于Dreamweaver工作区是非常灵活的，因此它可以适应各种不同的工作风格和使用水平。常用的Dreamweaver工作区组件有以下若干种：(一) 文档窗口可显示当前文档，文档的外观和浏览器中看到的非常相似。(二) 装载器中包含一些打开和关闭常用检查器和模板的按钮。(三) 对象工具栏包含创建不同类型的对象（例如图象、表格和层等）的按钮。(四) 属性检查器显示选定对象的属性。(五) 快捷菜单可以使用户对当前选择或区域快速执行某些命令。(六) 可固定的浮动工具栏允许用户将浮动窗口、检查器和工具栏组合在一个或多个选择窗口中3。3.2 网页动画的制作

13、软件-FlashFlash用于web站点的交互式的矢量图形和动画的制作，它可制作出用于浏览时的导航控制、制作动画图标、带同步声音的大段的动画，创建出生动的富于表现力的网页。Flash中的图形都是矢量的，占据存储空间较少，因而下载时间短，且能很好地适应浏览者不同尺寸的屏幕。Flash 的交互性的大部分设置就在 Action 和 Fs Command 里，通过对 Action 和 Fs Command 的设置，你可以随意的设置各事件发生的效果，还有对变量及函数的设置3。3.3 影像与动画的制作软件PhotoshopPhotoshop是目前最流行的图形、图像编辑设计软件，在数码影像处理、图像编辑合成

14、、广告设计、封面设计、美术绘画、网页设计等领域都被广泛地应用。(一) 文字处理更加方便(二)图层集使图层管理更有序。(三)图像的剪切和剪裁比较方便。(四)所有工具的选项板会出现在工具选项栏工作区顶部，方便参数的设置。(五) 可以方便地用路径绘画，丰富的几何形状工具，通过选择工具的不同工作模式，可创建路径、几何形状或几何填充区，使矢量绘图功能得到了加强3。3.4 JavaScriptJavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中

15、链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择3。4职此一家的设计4.1 前期准备4.1.1 整理网站资料所谓的整理网站资料，就是一个资料收集的过程。不同的网站有不同的收集方式，有的会用到数码相机去拍摄，有的会用到扫描仪去扫描，然而职此一家网站中的素材大都是文章，有少部分是图片，因此我选择从网上搜索所需的素材。当然仅靠这些资料，可能无法满足网站的需要，所以我会在设计制作网站页面时适当地进行补充。4.1.2 网站策划一件事情的成功与否，其前期策划举足轻重。网站策

16、划是网站设计的前提，主要包括确定网站的用户群和定位网站的主题。最重要的一点是应该切实遵循“以人为本”的创作思路。职此一家网站的主题以“职”字为主展开，跟求职有关，具体来说就是对求职前期的准备做了一下汇总，里面设有简历封面、求职信、求职故事、职场礼仪等。现在的招聘网站比较多，像58同城、赶集网、前程无忧、智联招聘等，我们都可以去寻找自己中意的公司及职位，所以在职此一家中没有设置招聘信息。职此一家适合初次求职者或刚入职不久的人群，网站的内容可以让他们从中受益。4.2 分析设计4.2.1 设计分析整体来说，职此一家网站大致分为上中下三栏。上栏放置网站Logo、导航菜单。下栏放置制作者、版权、联系方式

17、等信息。中间栏又分为左、中、右三部分。左边放置背景图片；中间为页面的主体部分，用来显示文章和图片；右边放置了会员登录框、站内搜索框和一些推荐信息。矩形代表着正式，规则。所以整个页面几乎都是以矩形布局的。4.2.2 色彩分析职此一家网站的主色调为橙色和白色。因为橙色代表明朗、亲切、活力，明度比红色高，因而较红色更温暖，鲜艳，给人活泼，甘美，富丽，明朗，亲切和充满朝气的感觉，一般用在激励的环境下。经过以上分析我的导航选用橙色做背景。4.3 制作网站4.3.1 网站说明导航栏目包含：首页，简历封面，简历模板，求职信，面试技巧，职场礼仪，写作技巧等。注：简历封面为纯图片，其它栏目为纯文章，简历模板在文

18、章内容结束之处可以点击下载。底部信息包含：友情链接，站长统计，版权信息，联系方式和备案号。4.3.2 网站Logo网站logo的表现形式一般可以分为特定图案，特定文字和合成文字。职此一家网站的logo采用纯文字形式，由英文As This One和中文职此一家组成，上下排部，上部英文呈扇形弯曲，下部职此一家横排排列，之后为突出“职”字，将职字稍作倾斜处理。整个看起来简单大方。如图4-1。图 4-1 网站logo4.3.3 网站首页（1）首页原型图图4-2 首页原型图（2）首页效果图图4-3 首页效果图4.3.4 网站列表页（1）列表页原型图图4-4 列表页原型图（2）文章列表页效果图图4-5 文

19、章列表页效果图（3）图片列表页效果图图4-6 图片列表页效果图4.3.5 网站内容页（1）内容页原型图图4-7 内容页原型图（2）文章内容页效果图图4-8 文章内容页效果图（3）图片内容页效果图第一种效果图：图4-9 图片内容页效果图<一>第二种效果图：图4-9 图片内容页效果图<二>第三种效果图：图4-9 图片内容页效果图<三>4.3.6 网站搜索页（1）搜索页原型图图4-10 搜索页原型图（2）搜索页效果图图4-11 搜索页效果图5 结论 此次毕业设计可以说是对我们大学生活三年来的一个总结性考察，里面包含了我们学过的很多方面的知识，平时的学习都是自己听老

20、师讲解，或者就是做练习之类，缺少了自己的独立思考，通过这次的毕业设计，让自己清楚了解到自己的学习程度，和自我学习思考的能力。从第一次听到“同学们，我们该写毕业论文了”这几个字时那种发愁的状态，到最后看到自己做出的设计论文的成功，体验了一次从茫然到无助，到最后的成功的那种欣慰，真的让自己受益匪浅，也使自己明白了，无论今后做什么事情，都要一步一步做好规划，多从问题的关键出发，分析不同的思路，多做总结与比较，从而得到最佳的结果。这次的论文设计让我重新了解了很多在学校所学不到的东西，也借此回顾了一下我大学所学的知识。它让我掌握了很多网页设计及制作的知识和PS软件的运用，让我对我所学过的知识有所巩固和提高。在整个