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

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

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

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

经贸职业学院

毕业论文

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

论文作者：

意娜

专业：

计算机多媒体技术

学号：

11060310615

班级：

11电子六班

指导教师:

州

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

论文答辩日期______________

独创性声明

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

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

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

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

论文作者签名：

意娜

日期：

年月日

毕业论文使用授权书

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

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

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

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

本论文属于

不□。

（请在以上方框打“√”）

毕业论文作者签名：

意娜指导教师签名：

日期：

年月日日期：

年月日

摘要

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

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

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

个人也成为了一种时尚。

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

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

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

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

关键词：

网页设计，策划，制作

摘要I

1绪论1

2网页概述2

2.1什么是网页2

2.2网页设计涵盖的容4

2.3网页设计的原则4

3网页制作工具5

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

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

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

3.4JavaScript6

4《职此一家》的设计7

4.1前期准备7

4.1.1整理资料7

4.1.2策划7

4.2分析设计7

4.2.1设计分析7

4.2.2色彩分析8

4.3制作8

4.3.1说明8

4.3.2Logo8

4.3.3首页9

4.3.4列表页11

4.3.5容页13

4.3.6搜索页18

5结论20

参考文献21

致22

1绪论

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

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

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

[1]

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

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

2网页概述

2.1什么是网页

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

如图所示：

（1）网页的基本构成元素

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

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

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

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

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

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

（2）网页的设计构思

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

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

①设计的任务

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

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

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

资讯类：

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

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

资讯和形象相结合的：

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

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

形象类：

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

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

②设计的实现

可以分为两个部分：

一．的规划及草图的绘制（可在图纸上完成）。

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

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

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

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

③造型的组合

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

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

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

（3）网页设计的特点

1.交互性

2.版式的不可控性

3.技术与艺术结合的紧密性

4.多媒体的综合性

5.多维性

2.2网页设计涵盖的容

（1）网页中的视听元素

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

（2）网页版面设计

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

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

2.3网页设计的原则

1.为用户考虑的原则

①使用者优先观念②考虑用户浏览器③考虑用户的网络连接

2.主题突出原则

3.整体原则

4.容与形式相统一的原则

5.更新和维护的原则[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同城、赶集网、前程无忧、智联招聘等，我们都可以去寻找自己中意的公司及职位，所以在《职此一家》中没有设置招聘信息。

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