论文排版格式.docx

《论文排版格式.docx》由会员分享，可在线阅读，更多相关《论文排版格式.docx（20页珍藏版）》请在冰豆网上搜索。

论文排版格式

茂名职业技术学院

毕业设计

 报告书

题目：

系（部）

专　业

班级

姓名

指导教师

日期

毕业设计任务书

一、课题

以Dreamweaver、Photoshop、Flash等相关软件平台，设计和开发一个“学院部门网站”。

学生可从如下部门中挑选其中一个作为自己的完成对象。

如招生就业处、成人教育部、中专部、人事处、总务处、纪检部门、心理咨询网站、团委、思想政治部等部门网站。

通过这些部门网站，广大师生能更方便的了解各部门的信息，下载资源，与各部门信息的交互。

还能积极扩大学院对社会的宣传度。

要求开发出的网站界面简洁、美观、大方。

二、任务与设计内容

任务：

利用Dreamweavercs5平台，以学院的某个部门为背景，设计学院部门网站，完成设计报告书。

背景：

随着互联网的广应用，

目标：

1、网站主题明确，网站内容要求紧贴部门主题，达到宣传本部门的效果；

2、网站的页面至少要包含3个页面：

主页、列表页、文章页；

3、网站设计——布局合理、设计精美、结构完整，页面的美工设计技术含量高，网站效果让客户满意；

4、网站结构合理，网页间的链接正确；

5、整体视觉效果好，整个网站在设计上统一和谐；

6、页面易用性，用户使用方便；

7、页面兼容性，在各种浏览器各种分辨率下能正常运行；

8、FLASH技术的运用情况好；

9、尽量使用CSS来制作网页，可修改性好，整个网站进行修改时方便，易更新；

10、网站设计好，要求将网站发布到网络上，实践使用。

三、设计进度

第一阶段：

需求分析和总体设计。

（10月15日-10月20日）

第二阶段：

收集和制作网站的相关素材资料，根据需求分析设计PS效果图，完成主页、Logo图的制作。

并进行毕业设计的中期检查。

（10月21日-11月4日）

第三阶段：

根据效果图，用CSS技术完成网页布局。

（11月5日-11月25日）

第四阶段:

调试网站。

使其兼容主流浏览器，将网站上传到网络。

（11月26日-11月30日）

第五阶段：

完成毕业设计报告书。

在教师指导下完成答辩词的ppt文档，熟练掌握设计相关的知识和操作，做答辩的准备。

（12月1日-12月16日）

第六阶段：

按照系里的统一安排，在指定时间参加答辩。

指导教师签名2012年月日

教研室主任签名年月

摘要

在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。

网站已经成为现阶段众多企事业单位、学校不可或缺的网络营销平台，互联网应用规模正不断扩大。

各大新闻门户网、企业网、学校网，绝大部分网站采用CSS+DIV技术来开发网站。

本论文主要阐述了茂名职业技术学院中专部门网站的设计思想、设计技术和网站开发过程。

根据该部门的建站需求，进行具体页面的组织和设计。

制作学院中专部网站，用到了HTML+DIV+CSS技术做网页布局，PHOTOSHOP技术处理网页图片、JS技术做网页特效。

IETESTER技术测试网站，FLASHFXP技术上传网站。

还巧妙地运用了颜色搭配、美学等相关的知识。

通过这些软件，把设计理念体现在网站建设中，实现了茂名职业技术学院中专部门网站的各种功能。

关键词：

div+css，IETESTER，FLASHFXP

第一章绪论

在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。

Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。

因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。

为了更好的办学，提高学校知名度，特构建茂名职业技术学院中专部网站。

一.1开发背景

通过网站，全面宣传，展示学校风采、优点与特色，发布学校的活动安排与招生政策等信息内容，使学生及家长曾加对学校的了解，增强学生、家长与学校之间的联系，在Internet网上，让学生及家长及时得到学校发布的重要信息，同时也帮助了学校完成部分事务，提高办事效率，给学生、家长与学校最方便的联系桥梁。

在这里学生及家长也可以提出意见及想法，互通教学之间的意见想法，更加有效的办好教学，和学生需要哪样的教学方式能够更好的吸收与接纳，这些都能成为学校的参考，以便更加的提高学校的教学质量。

一.2网站制作背景

网络在当今社会的影响力迅速膨胀，所以互联网也就演化为企业快速成长的发动机。

而不管您从事什么样的行业，未来都离不开互联网。

而网站其宣传作用，在这个竞争激烈的数字化信息时代，企业建立自己的网站已经刻不容缓。

中专部网站可以提供一个信息发布平台，24小时全天服务的平台，中专部网站通过简单幽雅、特点鲜明的网页来表达自己的产品信息和服务，并及时、全面的接受用户的信息查询和信息反馈。

方便广大师生之间的沟通。

学院网站的建设关系到一个学院的外在的形所在，它所表达的是一个学院的一种对外宣传的有力方法之一。

校园的信息化已成为学校发展的潮流，校园网建设成为学校信息化建设的焦点。

我们中专部网站提供了一个中专部发布部门通知、部门新闻、资料下载的信息平台。

一.3开发工具的选用与介绍

在本网站设计中，我选择Dreamweaver8作为开发工具，运用PhotoshopCP处理好图片效果，应用在网页中，用Flash制作漂亮的动画，并在网页中使用，Dreamweaver8是Macromedia公司的开发产品，是目前使用最为广泛的网页制作软件。

它以强大的功能和友好的操作界面倍受广大网页设计工作者的欢迎，成为网页制作的首选软件。

新版本的Dreamweaver8提供了更加完善的站点管理机制，采用了多种先进技术，能够快速高效地创建极具表现力和动感效果的网页，使网页创作过程变得简单。

Dreamweaver8可以说是一个集网页创作、网站开发与站点管理于一身的超重量级的创作工具。

一.3.1Dreamweaver软件简介

Dreamweaver与Flash、Fireworks都是Macromedia公司开发的产品，这三者被称为“网页设计三剑客”。

Dreamweaver的优势在于它不仅是优秀的所见即所得的编辑软件，同时也兼顾了HTML代码编辑，可以让用户方便地在两种模式之间切换。

Dreamweaver作为一款优秀的网页设计软件，不仅具有同类软件的所有功能，而且具有自身的许多出色设计理念，例如行为（behavikrs）、时间轴（Timelime）、资源（Assers）、CSS样式等，可以让我们无需手写代码，就能轻松地创建各种动态效果。

另外，Dreamweaver强大的自定义及扩展功能，允许我们定制自己的对象、命令、菜单及快捷键等，从而大大提高工作效率。

另外，支持跨浏览的HTML和层叠样式表也是Dreamweaver的一大特点，所以使用Dreamweaver制作的网页无需担心浏览器的兼容性。

Dreamweaver8是建立Web站点和应用程序的专业工具。

它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

从对基于CSS的设计的领先支持到手工编码功能，Dreamweaver提供了专业人员在一个集成、高效的环境中所需的工具。

开发人员可以使用Dreamweaver及所选择的服务器技术来创建功能强大的Internet应用程序，从而使用户能连接到数据库、Web服务和旧式系统。

·语言版本：

中文·版本：

8中文版 系统配置 Win9x/Me/NT/2000/XP/2003/win7/

Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver8的发布，更坚定Dreamweaver在该领域的地位。

它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。

1、灵活的编写方式Dreamweaver具有灵活编写网页的特点，不但将世界一流水平的“设计”和“代码”编辑器合二为一，而且在设计窗口中还精化了源代码，能帮助用户按工作需要定制自己的用户界面。

可视化编辑界面Dreamweaver是一种所见即所得的HTML编辑器，可实现页面元素的插入和生成。

或视化编辑环境大量减少了代码的编写，同时亦保证了其专业性和兼容性，并且可以对内部的HTML编辑器和任何第三方的HTML编辑器进行实时的访问。

无论用户习惯手工输入HTML源代码还是使用可视化的编辑界面，Dreamweaver都能提供便捷的方式使用户设计网页和管理网站变得更容易。

功能更多的CSS支持——CSS可视化设计、CSS检查工具；动态跨浏览器验证当保存时系统自动检查当前文档的跨浏览器有效性，可以指定何种浏览器为测试用浏览器，同时系统自动检验以确定页面有没有目标浏览器不支持的tags或CSS结构。

动态跨浏览器有效性检查功能可以自动核对tags和CSS规则是否适应目前的主浏览器；强大的WEB站点管理功能；内建的图形编辑引擎；Dreamweaver的集成特性Dreamweaver8继承了Fireworks、Flash和Shockwave的集成特性，可以在这些Web创作工具之间自由地切换，轻松地创建美观实用的网页；丰富的媒体支持能力可以方便地加入Java、Flash、Shockwave、ActiveX以及其他媒体。

Dreamweaver具有强大的多媒体处理功能，在设计DHTML和CSS方面表现得极为出色，它利用JavaScript和DHTML语言代码轻松地实现网页元素的动作和交互操作。

Dreamweaver还提供行为和时间线两种控件来产生交互式响应和进行动画处理。

9、超强的扩展能力Dreamweaver还支持第三方插件，任何人都可以根据自己的需要扩展Dreamweaver的功能，并且可以发布这些插件。

一.3.2FLASH软件简介

FLASH是目前最优秀的网络动画之一。

它的出现，宣告了网络动画时代的到来。

由于FLASH本身具有强大和灵活的网络交互功能所以它在窄带领域已经成为事实上的交互多媒体技术标准。

Flash在保证传输速度的同时还提供了非常丰富的交互动画效果它是如此简单和有效以至任何人在短时间内都可以成为闪客高手。

可以说Flash在推动网络动画的普及与大众文化方面功不可没。

与位图图形相比矢量图形需要的内存和存储空间小很多因为它们是以数学公式而不是大型数据集来表示的随着上网人数的剧增越来越多的商业客户开始重视网络这个宣传、展示的平台网络广告近些年也呈快速发展之势。

Flash，是一种创作工具，目前最新的版本为AdobeFlashCS5.5Professional（2011年发布）。

设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。

Flash可以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何内容。

通常，使用Flash创作的各个内容单元称为应用程序，即使它们可能只是很简单的动画。

您也可以通过添加图片、声音、视频和特殊效果，构建包含丰富媒体的Flash应用程序。

Flash特别适用于创建通过Internet提供的内容，因为它的文件非常小。

Flash是通过广泛使用矢量图形做到这一点的。

与位图图形相比，矢量图形需要的内存和存储空间小很多，因为它们是以数学公式而不是大型数据集来表示的。

位图图形之所以更大，是因为图像中的每个像素都需要一组单独的数据来表示。

一.3.3AdobePhotoshop软件简介

AdobePhotoshop，简称“PS”，是一个由AdobeSystems公司开发和发行的图像处理软件。

Photoshop主要处理以像素所构成的数字图像。

使用其众多的编修与绘图工具，可以更有效的进行图片编辑工作。

可多数人对于Photoshop的了解仅限于“一个很好的图像编辑软件”，并不知道它的诸多应用方面。

Photoshop的应用领域很广泛的，在图像处理、视频、出版各方面都有涉及。

Photoshop的专长在于图像处理，而不是图形创作；有必要区分一下这两个概念；图像处理是对已有的位图图像进行编辑加工处理以及运用一些特殊效果，其重点在于对图像的处理加工；图形创作软件是按照自己的构思创意，使用矢量图形来设计图形，而网站的美工也用到它。

一.3.4DIV+CSS技术简介

CSS是英语CascadingStyleSheets（层叠样式表单）的缩写，它是一种用来表现HTML或XML等文件式样的计算机语言。

DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，div+css是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，真正地达到了w3c内容与表现相分离。

HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。

XHTML语言是一种可以将HTML语言标准化，用XHTML语言重写后的HTML页面可以应用许多XML应用技术。

使得网页更加容易扩展，适合自动数据交换，并且更加规整。

在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。

以下是DIV+CSS的特点简介：

1）符合W3C标准。

微软等公司均为W3C支持者。

这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。

2）支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是遨游，您的网站都能很好的兼容。

3）搜索引擎更加友好。

相对与传统的table，采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。

4）样式的调整更加方便。

内容和样式的分离，使页面和样式的调整变得更加方便。

现在YAHOO，MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。

5）CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。

第二章网站的分析与布局

二.1网站的色彩分析

中专部网站主要是使用蓝色为主，蓝色是冷色调最典型的代表色，是网站设计中运用得最多的颜色，也是许多人钟爱的颜色。

蓝色非常纯净，通常让人联想到海洋、天空、水、宇宙。

纯净的蓝色表现出一种美丽、冷静、理智、安详与广阔。

由于蓝色沉稳的特性，具有理智、准确的意象，在商业设计中，强调科技、效率的商品或企业形象，大多选用蓝色当标准色，企业色，如电脑，汽车，影印机，摄影器材等等，另外蓝色也代表忧郁，这是受了西方文化的影响，这个意象也运用在文学作品或感性诉求的商业设计中。

在许多国家警察的制服是蓝色的。

因为蓝色有着勇气、冷静、理智、永不言弃的含义。

中专部网站使用蓝色，蓝色的朴实、稳重、内向性格，衬托那些性格活跃、具有较强扩张力的色彩，运用对比手法，同时也活跃页面。

表达着深远、永恒、沉静、无限、理智、诚实、寒冷的多种感觉。

给人很强烈的安稳感，同时还能够表现出和平、淡雅、洁净、可靠等。

二.2网站的内容分析与布局

中专部网站是个集信息、交流为一体的网站。

是为了让学校与学生、学生与学校能够有一种全新的交流平台。

中专部网站建设的内容是为了学校发布的最新招生信息、最新教育新闻、更新学院信息等资讯以及与学生交互而设计的。

按照系统开发的基本观点对网站进行分解，从内容上可对网站作如下划分：

院系介绍：

通过学校的创办历史，位置、学校的教学特色，特出学校为为社会培养了大批中、高级复合型技能人才，现已成为粤西综合性职业教育的著名品牌学校，是广东省农村劳动力转移就业定点培训基地。

专业介绍：

主要是介绍本校可报读的专业。

会详细的对专业进行介绍、各专业的未来发展前景、可考取那些专业资格证书、专业的就读情况等的信息供学生们了解，以便于做出合适自己的选择。

师资队伍：

主要是介绍本校的师资情况，通过建设，进一步优化教师队伍学历结构和学缘结构，稳定骨干教师队伍，造就拔尖人才，培养若干名在国内外有重大影响的学术带头人，形成和聚集一批有相当知名度的学术创新团队，建成一支整体水平较高、充满活力的适应学校事业发展需要的师资队伍。

教研结构：

主要是组织教师开展教材教法研究，总结推广教学经验，提高教师的文化业务水平，保证教学任务的完成。

教学管理：

教学过程是根据一定的社会要求与教学目的和学生身心发展的特点，由教师的教和学生的学所组成的双边活动过程。

这个过程是由教师、学生、教学内容和手段等要素构成。

所以本校根据实际情况，做好教学计划，具体的实训安排通知等项目。

党建工作：

主要是本校的党工作安排与党活动的通知等。

学生工作：

会及时公告出学生的主要工作安排与学生的活动，以及毕业生的实习情况的等。

本网站利用Dreamweaver进行开发，其功能目标是要实现信息在线浏览的功能。

本系统建成后，对各功能模块进行了反复的测试，经过多次的修改各功能模块已经达到设计的要求。

本网站开发技术先进、功能模块齐全并且具有较好的通用性。

在本网站中界面的设计主要还是图文结合，以简洁大方为主。

文字：

文字元素是信息传达的主体部分。

网页中的文字主要包括标题、信息、文字链接、几种主要形式。

标题和传统媒体中信息传达的基本作用相同，是内容的简概说明一般比较醒目、优先编排。

文字作为占据页面重要比率的元素，同时又是信息重要载体，它的字体、大小、颜色和排布对页面整体设计影响极大。

图形：

图形在网页界面中具有重要作用。

合理的运用图形，可以生动直观、形象地表现设计主题。

网页中常用的图形格式包括jpg和gif，这两种格式压缩比高，不需要浏览器安装插件即可直接阅览。

图形元素包括标题、背景、主图、链接图标四种。

页面版式：

版式是网页界面设计的重要组成部分，它将文字、图形等视觉元素进行组合配置，使页面整体视觉效果美观和谐，简单大方，便于阅读，实现信息传达的最佳效果。

本网站结构图如图3.1所示。

图3.1结构图

第三章网站界面的前台

三.1网站前台展示

网站主页是一个网站的总体门户，如果网站主页设置得不好，直接影响到网站的质量，因此，网站主页要在视觉上美观、整洁、大方，在内容上丰富、健康。

网站主页用学校教学楼做主刊图，采用静、动相结合的方式，即静态的主画面和动态的图片相结合，体现学校的勃勃生气，静态主页方式介绍学校风采、优点特色、信息发布，对图片新闻，就得利用PhotoshopCS处理好图片，运用Flash制作好动画效果后插入网页来实现。

网站首页界面如图4.1所示。

图4.1首页界面

网页总体框架部分代码。

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

第一章