网站设计与制作毕业论文设计.docx

网站设计与制作毕业论文设计.docx

《网站设计与制作毕业论文设计.docx》由会员分享，可在线阅读，更多相关《网站设计与制作毕业论文设计.docx（23页珍藏版）》请在冰豆网上搜索。

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

经贸职业学院

毕业论文

《职此一家》网页设计与制作

论文意娜

专业：

计算机多媒体技术

学号：

班级：

11电子六班

指导教师:

州

辩论委员会主席____________评阅人______________

论文辩论日期______________

独创性声明

本人声明所呈交的毕业论文是我个人在导师指导下进展的研究工作与取得的成果。

尽我所知，除文中已经标明引用的容外，本论文不包含任何其他个人或集体已经发表或撰写过的研究成果。

对本文的研究做出贡献的个人和集体，均已在文中以明确方式标明。

本人完全意识到本声明的法律结果由本人承当。

论文作者签名：

意娜

日期：

年月日

毕业论文使用授权书

本毕业论文作者完全了解学校有关保存、使用毕业论文的规定，即：

学校有权保存并向有关部门或机构送交论文的复印件和电子版，允许论文被查阅和借阅。

本人授权经贸职业学院要以将本论文的全部或局部容编入有关数据库进展检索，可以采用影印、缩印或扫描等复制手段保存和汇编本论文。

□，在________年解密后适用本授权书.

本论文属于

不□。

〔请在以上方框打“√〞〕

毕业论文作者签名：

意娜指导教师签名：

日期：

年月日日期：

年月日

摘要

在互联网飞速开展的今天，网络已成为人们生活中不可缺少的一局部。

的迷人之处在于综合使用文本、图象、声音、动画和视频等信息和容，具有丰富的多媒体表现与互动特点，无可置疑，已成为最吸引人的也最有效的信息传递手段和方式。

随着网络技术的开展，各类纷纷出现。

个人也成为了一种时尚。

越来越多的人希望拥有自己的，开辟网络世界的一片天地，展示自己的才华和风格。

这篇论文是关于我对一个的设计，即“职此一家〞的设计。

首先介绍了网页的一些根本容，其次介绍了网页制作工具，之后从设计的整个流程出发，通过自己设计的这个作品来说明并演示一个完整的制作过程。

在第四局部阐述了设计的完整步骤，由前期准备到分析设计到最后的制作。

关键词：

网页设计，策划，制作

1绪论

随着Internet技术与其应用的不断开展，我们的生活，学习和工作也越来越离不开容丰富的，不只是政府机构和企事业单位，甚至是个人也开始制作和发布自己的和网页。

网页是宣传的重要窗口，容丰富，制作精美的网页会吸引更多的访问者的浏览，这是的生存和开展的关键。

制作和发布精美的网页已成为一项重要技能。

[1]

相对于传统设计来说，网页设计往往要结合动画，图像特效与后台的数据交互因素，在静态页面设计，图片设计和动画设计等方面，也可以使设计人员的思想得到充分表现，而Dreamweaver，Photoshop，flash作为常用设计软件也是目前网页制作的首选工具，他们都具有强大的设计制作功能[1]。

下面会介绍到这几类软件与制作的流程。

2网页概述

2.1什么是网页

打开浏览器，在地址栏中输入网址.2345.，显示在浏览器中的就是网页。

如下列图：

〔1〕网页的根本构成元素

网页实际上就是一个文件，这个文件存放在世界上某个地方的某一台计算机中，并且这台计算机与互联网相连接。

构成网页的最根本元素是文字和图片。

文字是网页的容局部，图片如此是为了更好地充实容局部或者装饰网页的外观。

然而，除了文字和图片以外，网页元素还包括动画、声音、视频、表单、程序等。

在网页的空白处单击鼠标右键，在弹出的快捷菜单中选择“查看源文件〞命令，或者在浏览器窗口中的菜单栏中执行“查看>查看源文件〞菜单命令，就会弹出一个记事本文件，这就是网页的源文件。

那么从源文件的角度看，网页实际上只是一个纯文本文件，它通过各种各样的标记对页面上的文字、图片、表格、声音等元素进展描述〔例如字体、颜色、大小〕，而浏览器如此对这些标记进展解释并生成页面，这样就得到我们所看到的页面了。

〔2〕网页的设计构思

网页设计是一个感性思考与理性分析相结合的复杂的过程，它的方向取决于设计的任务，它的实现依赖于网页的制作。

网页设计中最重要的东西并不是在软件的应用上，而是在于设计者对网页设计的整理以与设计制作的水平，还在于设计者自身的美感以与对页面的把握上。

设计的任务

网页设计的任务是指设计者要表现的主题和需要实现的功能。

设计的任务是要实现设计者的意图，并非创造美。

的性质不同，设计的任务也不同，从形式上可将站点分为以下3类。

资讯类：

例如网易、新浪、搜狐门户。

这类为浏览器提供大量的信息，而且访问量较大，因此需注意页面的分割，结构的合理，页面的优化，界面的人性化设计等问题。

资讯和形象相结合的：

像一些大公司的，高校的等。

这类在设计上要求较高，保证资讯特点的同时要突出企业单位的形象。

形象类：

比如一些小型公司或单位的，这类一般较小，有的只有几页，需要实现的功能也较为简单，网页设计的主要任务是突出企业形象。

这类对设计者的美工水平较高。

设计的实现

可以分为两个局部：

一．的规划与草图的绘制〔可在图纸上完成〕。

二．页面的制作〔需在计算机上完成〕。

设计者的第一步是设计版面布局，可以将网页看做传统的报刊杂志编辑。

网页的元素有文字、图像、动画，设计者要做的工作就是以最适合的方式将图片、文字和动画摆放在页面的不同位置。

接下来就要通过软件将设计的蓝图变为现实。

造型的组合

在网页设计中，设计者主要通过视觉效果表现主题。

造型在视觉传统中是非常重要的一个元素，抛去图像还有文字的问题，画面上的所有元素可以统一作为画面的根本构成要素——点、线、面进展处理。

通常使用的组合手法有秩序、比例、均衡、对称、连续、间隔、重叠、反复、交叉、节奏、韵律、归纳、变异、特写、反射等，这些组合手法都有各自的特点，在设计中应根据具体情况选择最适合的表现手法。

〔3〕网页设计的特点

2.版式的不可控性

2.2网页设计涵盖的容

〔1〕网页中的视听元素

主要包括网页中的文本、背景、按钮、图标、图像、表格、颜色、导航、背景音乐、动态影像等。

〔2〕网页版面设计

网页的版式设计与报刊杂志等平面媒体的版式设计有很多相通之处，它在网页的艺术设计中占据着重要的地位，所谓网页的版式设计是指在有限的屏幕空间上将各种视听元素进展有机的排列组合，将理性思维以个性化的形式表现出来，是一种具有个人风格和艺术特色的视听传达方式。

它在传达信息的同时也产生了感官上的美感和精神上的享受。

2.3网页设计的原如此

使用者优先观念

考虑用户浏览器

考虑用户的网络连接

[2]

3网页制作工具

3.1梦幻网页的编织者------Dreamweaver

Dreamweaver是创建和管理网页的专业化可视编辑器。

使用Dreamweaver可以轻松创建跨平台、跨浏览器的页面。

Macromedia的RoundtripHTML技术允许用户随意导入HTML文档而无需重新设置代码格式。

Dreamweaver可以为用户做到：

使用动态HTML功能〔例如具有动态效果的层和行为〕而不用写一行代码。

它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。

Dreamweaver还是一个可以完全自定义的应用程序。

用户可以创建自己的对象和命令修改菜单和快捷键，甚至编写JavaScript代码扩展Dreamweaver的行为和属性检查器。

至于Dreamweaver工作区是非常灵活的，因此它可以适应各种不同的工作风格和使用水平。

常用的Dreamweaver工作区组件有以下假如干种：

（一）文档窗口可显示当前文档，文档的外观和浏览器中看到的非常相似。

（二）装载器中包含一些打开和关闭常用检查器和模板的按钮。

（三）对象工具栏包含创建不同类型的对象〔例如图象、表格和层等〕的按钮。

（四）属性检查器显示选定对象的属性。

（五）快捷菜单可以使用户对当前选择或区域快速执行某些命令。

（六）可固定的浮动工具栏允许用户将浮动窗口、检查器和工具栏组合在一个或多个选择窗口中[3]。

3.2网页动画的制作软件----Flash

Flash用于web站点的交互式的矢量图形和动画的制作，它可制作出用于浏览时的导航控制、制作动画图标、带同步声音的大段的动画，创建出生动的富于表现力的网页。

Flash中的图形都是矢量的，占据存储空间较少，因而下载时间短，且能很好地适应浏览者不同尺寸的屏幕。

Flash的交互性的大局部设置就在Action和Fsmand里，通过对Action和Fsmand的设置，你可以随意的设置各事件发生的效果，还有对变量与函数的设置[3]。

3.3影像与动画的制作软件—Photoshop

Photoshop是目前最流行的图形、图像编辑设计软件，在数码影像处理、图像编辑合成、广告设计、封面设计、美术绘画、网页设计等领域都被广泛地应用。

（一）文字处理更加方便

（二）图层集使图层管理更有序。

（三）图像的剪切和剪裁比拟方便。

（四）所有工具的选项板会出现在工具选项栏工作区顶部，方便参数的设置。

（五）可以方便地用路径绘画，丰富的几何形状工具，通过选择工具的不同工作模式，可创建路径、几何形状或几何填充区，使矢量绘图功能得到了加强[3]。

3.4JavaScript

JavaScript是一种基于对象（Object）和事件驱动（EventDriven）并具有安全性能的脚本语言。

使用它的目的是与HTML超文本标记语言、Java脚本语言〔Java小程序〕一起实现在一个Web页面中多个对象，与Web客户交互作用。

从而可以开发客户端的应用程序等。

它是通过嵌入或调入在标准的HTML语言中实现的。

它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择[3]。

4《职此一家》的设计

4.1前期准备

4.1.1整理资料

所谓的整理资料，就是一个资料收集的过程。

不同的有不同的收集方式，有的会用到数码相机去拍摄，有的会用到扫描仪去扫描，然而《职此一家》中的素材大都是文章，有少局部是图片，因此我选择从网上搜索所需的素材。

当然仅靠这些资料，可能无法满足的需要，所以我会在设计制作页面时适当地进展补充。

4.1.2策划

一件事情的成功与否，其前期策划举足轻重。

策划是设计的前提，主要包括确定的用户群和定位的主题。

最重要的一点是应该切实遵循“以人为本〞的创作思路。

《职此一家》的主题

以“职〞字为主展开，跟求职有关，具体来说就是对求职前期的准备做了一下汇总，里面设有简历封面、求职信、求职故事、职场礼仪等。

现在的招聘比拟多，像58同城、赶集网、前程无忧、智联招聘等，我们都可以去寻找自己中意的公司与职位，所以在《职此一家》中没有设置招聘信息。

《职此一家》适合初次求职者或刚入职不久的人群，的容可以让他们从中受益。

4.2分析设计

4.2.1设计分析

整体来说，《职此一家》大致分为上中下三栏。

上栏放置Logo、导航菜单。

下栏放置制作者、、联系方式等信息。

中间栏又分为左、中、右三局部。

左边放置背景图片；中间为页面的主体局部，用来显示文章和图片；右边放置了会员登录框、站搜索框和一些推荐信息。

矩形代表着正式，规如此。

所以整个页面几乎都是以矩形布局的。

4.2.2色彩分析

《职此一家》的主色调为橙色和白色。

因为橙色代明确朗、亲切、活力，明度比红色高，因而较红色更温暖，鲜艳，给人活泼，甘美，富丽，明朗，亲切和充满朝气的感觉，一般用在激励的环境下。

经过以上分析我的导航选用橙色做背景。

4.3制作

4.3.1说明

导航栏目包含：

首页，简历封面，简历模板，求职信，面试技巧，职场礼仪，写作技巧等。

注：

简历封面为纯图片，其它栏目为纯文章，简历模板在文章容完毕之处可以点击下载。

底部信息包含：

友情，站长统计，信息，联系方式和备案号。

4.3.2Logo

logo的表现形式一般可以分为特定图案，特定文字和合成文字。

《职此一家》的logo采用纯文字形式，由英文AsThisOne和中文职此一家组成，上下排部，上部英文呈扇形弯曲，下部职此一家横排排列，之后为突出“职〞字，将职字稍作倾斜处理。

整个看起来简单大方。

如图4-1。

图4-1logo

4.3.3首页

〔1〕首页原型图

图4-2首页原型图

〔2〕首页效果图

图4-3首页效果图

4.3.4列表页

〔1〕列表页原型图

图4-4列表页原型图

〔2〕文章列表页效果图

图4-5文章列表页效果图

〔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结论

此次毕业设计可以说是对我们大学生活三年来的一个总结性考察，里面包含了我们学过的很多方面的知识，平时的学习都是自己听教师讲解，或者就是做练习之类，缺少了自己的独立思考，通过这次的毕业设计，让自己清楚了解到自己的学习程度，和自我学习思考的能力。

从第一次听到“同学们，我们该写毕业论文了〞这几个字时那种发愁的状态，到最后看到自己做出的设计论文的成功，体验了一次从茫然到无助，到最后的成功的那种欣慰，真的让自己受益匪浅，也使自己明白了，无论今后做什么事情，都要一步一步做好规划，多从问题的关键出发，分析不同的思路，多做总结与比拟，从而得到最优的结果。

这次的论文设计让我重新了解了很多在学校所学不到的东西，也借此回顾了一下我大学所学的知识。

它让我掌握了很多网页设计与制作的知识和PS软件的运用，让我对我所学过的知识有所巩固和提高。

在整个过程中，我学到了新知识，扩大了知识面。

也让我认识到了学海无涯的真正含义，我将会不断的学习新的知识，让自己的能力得到进一不的提升。

在论文的设计中它不仅培养了我严谨的思维方法，更造就了我积极乐观的生活态度。

而且还要做到稳重但又不失创新，开朗但不浮躁，兴趣广泛，思路开阔，办事沉稳，团结合作的精神。

参考文献

[1]陆京梅.网页设计师就业实战大揭秘，2009年10月，前言局部

[2]陆京梅.网页设计师就业实战大揭秘，2009年10月，16～26

[3]许广辉.《个人求职的设计与实现》.

wenku.baidu./view/75f02b4333687e21af45a9c.

最后访问日期2013年11月20日

致

在此次毕业设计过程中，辅导我们实训的两位教师给予了我极大的帮助。

他们认真负责的工作态度和丰富的理论和实际操作能力都使我收益匪浅。

无论在理论上还是在实践中，他们都给予我很大的帮助，在他们的帮助下使得整个能与时的设计完成，并从中学到了很多以前没有学到的知识，所以，非常感教师耐心的指导。

还有，在我设计整个的过程中，同学也给了我很大的帮助，特别是在的上传方面，我请教了多位同学，同学们都乐意指导，在这里我一起表示感。

最后要感在这三年的学习和生活中给予我关怀和照顾的每一位可敬的教师，感他们的无私奉献！

感他们的悉心教诲！

感他们为我们付出的点点滴滴！

感母校对我的培养！

是他们，让我懂得了做人的道理，无论以后我走到哪里，我都会记得他们给予我的关怀和帮助。

无论何时，我都会以我曾经是他们的学生而感到骄傲，我在这即将毕业离校的时候，我衷心的祝愿各位教师工作顺利，同时，我也祝愿我的同学到可以找的一份好的工作，都有一个好的前程。