静态网页本科毕业论文.docx
《静态网页本科毕业论文.docx》由会员分享，可在线阅读，更多相关《静态网页本科毕业论文.docx（33页珍藏版）》请在冰豆网上搜索。
静态网页本科毕业论文
静态网页本科毕业论文
设计（论文）题目：
创意设计类网站的设计与实现
完成日期2012年6月20日
论文内容：
毕业论文要求论点突出、条理清楚、论据充分、内容实际、格式规范，所针对的题目应具有一定的广泛性和实用性，结论明确。
论文的内容纲要应符合以下要求：
1、摘要：
以浓缩的形式概括课题的内容，中文摘要在500字左右。
2、目录：
目录按三级标题编制，要求标题层次清晰，题文一致。
3、正文：
毕业论文正文包括前言、主体和结论。
要求正文字数不少于10000字。
正文主体部分应按照软件工程的思想进行论述。
4、结束语：
对导师和给予指导或协助完成毕业论文（设计）工作的组织和个人表示感谢。
文字要简捷、实事求是。
5、参考文献：
文献条目只要包括三个部分：
作者、标题和出版信息。
数量5-10本。
6、附录：
是一些不宜放在正文中，但有参考价值的内容。
本人在该设计中具体完成的工作
1.完成调研和资料收集。
2.完成使用DIV+CSS布局信息宣传类网站的分析，设计，实现和测试。
3.完成论文的撰写。
主要参考文献、资料：
唐守国.《创意+：
Photoshopcs4网页设计、配色与特效案例精粹》.清华大学出版社，2010年
项宇峰.《HTML网络编程从入门到精通》.清华大学出版社，2006年
要求完成报告书的时间：
2012年5月15日
审
批
意
见
函授站
（盖章）
年月日
审
批
意
见
重邮成教院
（盖章）
年月日
注：
第2页/共2页；本表由指导教师填写一式三份。
重庆邮电大学高等函授毕业设计（专科）评定表
姓名
张琴
学号
11800229
专业
计算机信息管理
所属站
重庆新华电脑学校
设计（或论文）题目
创意设计类网站的设计与实现
毕业设计（或论文）的评语：
指导教师（签名）
年月日
备注
重庆邮电大学高等函授毕业设计（专科）评阅意见表
毕业论文题目
创意设计类网站的设计与实现
评价项目
得分
选题
质量
01
选题符合专业培养目标，体现综合训练基本要求
选题综合得分（共10分）：
02
题目难易度
03
题目工作量
04
理论意义或实际价值
能力水平
05
查阅文献资料能力
能力水平综合得分（共50分）：
06
综合运用知识能力
07
研究方案的设计能力
08
研究方法和手段的运用能力
成果质量
09
文题相符
论文成果综合得分（共40分）：
10
写作水平
11
写作规范
12
篇幅
评阅人评定成绩（共100分）评阅人：
重庆邮电大学高等函授毕业设计成绩总评表
姓名
张琴
学号
11800229
专业
计算机信息管理
所属站
重庆新华电脑学校
设计（或论文）题目
创意设计类网站的设计与实现
毕业设计指导委员会意见：
根据毕业设计指导教师和评阅教师意见，经成人教育学院高等函授毕业设计指导委员会认真评定，该学员的毕业设计总评（四级评分制）成绩为：
毕业设计指导委员会主任：
年月日
【摘要】计算机和计算机网络的飞速发展，人们对计算机网络的依赖是越来越大。
人们在网上聊天交友，在网上请教问题，查阅资料，还在网上听音乐。
除此之外，人们还会在网上进行商务交易、下载信息，有着众多的使用者。
尤其是电子商务大大的减少了人们对周围环境的依赖，无论是哪里的网友，都可以浏览到世界各地的各类信息，非常的方便，由于以上的优势，各类网站如雨后春笋般的出现，企业网站也不例外。
而Web设计的健康发展依靠web标准的采用，没有web标准就不会有真正的可访问性和连贯的设计。
不用web标准，就跟不上时代。
在这样的标准时代，我们需要网页更加容易扩展，适合自动数据交换，并且更加规整。
而css，则实现了页面内容与样式分离。
鉴于web标准，本论文着重对div+css布局与美化公司网页进行了讨论；同时根据客户需求，采用div+css实现了咨询公司网页的设计，具体实现了首页、设计理念、作品展示、企业文化、关于我们、联系我们等功能，系统符合公司网站的需求。
【关键词】企业网站网页设计divcssDreamweaver
前言
当今世界已进入信息时代，Internet成为21世纪最受关注的行业之一,它的飞速发展和在全球范围的普及应用正在给人类生活带来革命性变化。
网络技术的发展也取得了巨大的成就，为网站开发提供了很好的技术支持。
网站已经成为现阶段众多企业不可或缺的网络营销平台，互联网应用规模正在不断扩大。
其中，特别是中小型企业，对于网络平台搭建的需求相当的迫切。
各大门户网，企业网都在WEB2.0的标准上,采用div+css来布局，因此有了此次的选题。
论文详细论述了一个基于公司网站开发的设计过程。
在技术上，采用了Dreamweaver网站开发工具，以HTML的超大功能结合JavaScript的客户端语言，这样的构造有利于以后对网站系统开发的把握，并为以后的开发积累了一定的经验，提升编程能力。
其中，最主要的就是介绍和展示DIV+CSS在网页中的最用和魅力。
本文实现了首页、设计理念、作品展示、企业策划、关于我们、联系我们等功能，系统符合公司网站的需求。
论文组织如下：
首先阐述了该网站的开发背景、意义，详细介绍了div+css理论知识；其次介绍了相关的开发工具及技术基础；接着对网站的需求进行了分析，并提出了具体的设计方案；然后展现了整个网站的具体实现，包括网页的设计和连接，各功能模块的实现；最后对该网站进行了严格的测试。
第一章网站设计环境介绍
随着计算机应用的发展，网站已经是展现企业形象、介绍产品和服务、体现企业发展战略的重要途径。
网页设计是科技与艺术的结合，是商业社会的产物。
虽然网页设计也是平面设计中的一个方面，但是网页设计有其独特的设计要求与原则，在设计网页之前要对其有所了解。
第一节因特网和万维网
一、何为因特网
大家可能对因特网（Internet）这个词不会感到陌生，因特网是由许许多多计算机连接在一起构成的一个计算机网络，在这个网络中，人们可以使用各自的计算机互相传递信息；可以在自己的计算机上存储文件供别人访问；可以利用多台计算机实现分布式应用。
Internet规模庞大，遍及全球，一旦上网，你就与全球无以计数的计算机连成一体。
二、何为万维网
有上网经历的会知道，在浏览器的地址栏中经常出现“WWW”，比如要访问XX网站就需输入“WWW”。
其中的三个“W”是英文WorldWideWeb的缩写，中文译为万维网。
万维网是无数个网络站点和网页的集合，它们在一起构成了因特网最主要的部分（因特网还包括电子邮件、Usenet以及新闻组等应用）。
万维网实际上是多媒体的集合，各个部分由超级链接连接而成。
我们通常使用浏览器上网观看的内容，就是万维网的内容。
比如在浏览器中输入“”,就可以访问新浪网站的首页。
网页也称作Web页面或Web文档，它包含了文字、图像、动画和一些具有交互功能的控件。
第二节相关术语解释
一、Internet
Internet（英特网）诞生于上世纪60年代，发展非常慢，到90年代才开始迅速发展。
现在英特网已经是世界上最大的网络的，联在英特网上的电脑有数亿台。
上面的资料、信息数不胜数，所以有人把英特网叫成是信息的海洋、知识的海洋。
二、站点
所谓站点，就是将网页文件和素材文件，有条理地放置站点文件夹里，这些文件与文件夹就构成了网站的实质内容。
站点文件夹里除了网页文件还有素材文件，所谓素材就是网页中所用到的图像、声音、视频等，这些内容是以单独文件的形式存在。
三、超链接
我们在浏览网页时，当鼠标指针指向某段文本或是某个图像，鼠标指针变成小手状，单击鼠标可以打开其他的网页或是跳转到其他的网站，这就是超链接。
采用超链接技术可以将不同的网站、网站中的不同网页、网页中的不同位置彼此串在一起，实现相互间的跳转，方便信息的浏览和查找。
人们通过超链接可以很方便很迅速地访问分布于全球计算机上的海量资源，实现在互联网中的漫游。
超链接能使Web服务存在广泛和持久的生命力，超链接可以说是Web的灵魂。
四、URL
URL（UniformResourceLocator的缩写），统一资源定位器。
互联网中某种信息资源以某种方式存储在网络中的某处，必须用一个惟一的URL来进行标识，这样才能方便查找。
对于Web来说，可以简单并通俗把URL理解为网址。
每个Web网页都有自己的网址，在浏览器地址栏里输入网页的URL，就可以访问这个网页。
例如，
五、IP地址
为了使互联网上的电脑主机在通信时能够相互识别，每台主机都分配一个能表示其位置的IP（InternetProtocol）地址，这如同公用电话网中电话的号码一样。
IP地址是由专门的互联网机构来分配。
IP地址具有惟一性，是由32位二进制数组成，分为四组，每组8位，每组之间用小数点分隔，在实际之中常转换成十进制数表示。
六、网页
网页，是网站中的一页，通常是HTML格式（文件扩展名为.html或.htm或.asp或.aspx或.php或.jsp等）。
网页通常用图像档来提供图画。
网页要透过网页浏览器来阅读。
网页是构成网站的基本元素，是承载各种网站应用的平台。
通俗的说，您的网站就是由网页组成的。
如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。
所谓网站（Website），就是指在网际网路（因特网）上，根据一定的规则，使用HTML等工具制作的用於展示特定内容的相关网页的集合。
简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯（信息），或者利用网站来提供相关的网路服务（网络服务）。
人们可以通过网页浏览器来访问网站，获取自己需要的资讯（信息）或者享受网路服务。
第三节Web标准概述
一、什么是Web标准
Web标准是由W3C（WorldWideWebConsortium）和其他标准化组织指定的一系列规范的集合，其中包含了（X）HTML、XML和CSS。
Web标准的目的在于创建一个统一的用于Web表现层的技术标准，以便通过不同浏览器或终端设备向最终用户展示信息内容。
二、Web的认识
Web（WorldWideWeb，简称WWW，又称万维网）是目前Internet上应用最广泛也是最重要的信息服务类型，它已经影响了Internet上的广告、新闻、电子商务和展示信息等各个服务领域。
Web采用浏6hy览器/服务器（B/S）工作模式，其运作模式可以描述为：
请求→处理→应答。
Web以超文本标记语言HTML（HyperTextMarkupLanguage）与超文本传输协议HTTP（HyperTextTransferProtocol）为基础，通过浏览器为用户提供方便友好的信息浏览界面。
Web将位于全世界互联网上不同网址的相关信息有机地编织在一起。
在Web服务方式中，信息以页面（或称Web页）的形式存储在Web服务器中，这些页面采用超文本的方式对信息进行组织，通过链接将一页信息链接到另一页信息。
这些相互链接的页面既可以放置在同一台主机上，也可以放置在不同的主机上。
页面到页面的链接信息由统一资源定位器URL（UniformResourceLocator）维持。
用户通过客户端应用程序（即浏览器）向Web服务器发出请求，服务器根据客户端的请求将保存在服务器中的某个页面返回给客户端，浏览器接收到页面后对其进行解释，最终将信息以图、文、声并茂的形式呈现给用户。
Web服务的特点在于高度的集成性，它能够实现不同类型的信息（如文本、图像、声音、动画和视频等）和服务（如New、FTP、Telnet、Gopher及Mail等）的无缝链接，特别适合于广域网中信息的组织、检索与显示。
三、Web文档的三层结构
Web文档通常包含三个不同的层次（见图1.1）。
首先是结构层，该层的内容是由（X）HTML编写的文本文档。
它包含文档的内容，以及由（X）HTML添加的语义化的标记。
第二层为表现层，该层内容是CSS样式代码。
它描述了文档该以何种样式呈现在访问者面前，样式包括页面各部分的布局、文字段落排版、背景图片和颜色等。
第三层是行为层，该层定义了文档模型以及如何与客户进行交互，所涉及技术主要是DOM以及ECMAScript脚本语言。
图1.1结构、表现和行为及各部分所涉及的技术
四、Web标准的优势
1、易于开发和维护
一个大型的网站往往需要很多人员的参与，他们的分工也不同，有负责样式设计的，有负责页面编码的，有负责样式编写的等。
由于内容结构和表现的分离，不同开发人员可以独立工作，专注于自己负责的内容。
样式信息和内容是相互独立的，因此同一个样式信息可用于不同的内容中，从而实现代码重用。
这种做法可用减少重复编码，加快开发进度。
样式信息重用也使得维护工作大大减轻，只需要修改一小部分样式代码，就可以使所有用到该样式的区域同时改变外观。
2、高兼容性
由于W3C对Web标准的推动，越来越多的浏览器支持由W3C制定的各种标准，从而使得根据标准编写的Web页面在不同的浏览器中均能获得一致的效果。
3、高灵活性
现在，越来越多的人使用手机或PDA访问网站，通常这些设备的屏幕要远远小于PC机的显示器。
网页的内容和表现的分离使得我们可以针对不同平台和设备应用不同的样式文件，而网页内容无须改动。
对于需要打印输出的页面，我们也无须再提供另一份“适合打印”的页面，取而代之的只是新的CSS样式。
4、提高访问速度
内容与表现的分离，使得页面中不再包含冗余的样式代码，而独立出来的样式表可以充分地进行重用，网页整体代码量大大减少。
这样不仅能占用更少的网络带宽，提高页面载入速度，同时浏览器也能对页面进行快速解析，显示给用户。
5、提高用户体验
从Web应用的角度看，用户体验（UserExperience,UE）指的是Web应用程序能够提供直观简洁的用户界面、简便的操作以及有效的交互方式。
只有当用户亲自使用时才能体验带它们。
用户体验包含了多方面的内容，其中一致性、可用性等方面均通过标准化开发来实现。
比如各个页面使用统一的ＣＳＳ样式，利用行为层技术改善交互设计等。
第四节Web设计技术
Web设计涵盖的范围相当广，本节只介绍一些构建Web文档所需的几项最基本的技术。
一、HTML
HTML，英文全成为HyperTextMarkupLanguage，中文译为超文版标记语言。
它是用来创建Web文档的语言。
页面元素是由特定的标记来确定的，这些标记告诉浏览器该如何显示这个页面。
所谓超文本，就是一种含有指向其他文档链接的文本，即我们俗称的链接。
超文本把存放于不同计算机中的文档链接在一起。
访问者不必关心链接所指的内容到底位于何处，只需要在链接上单击一下鼠标，页面马上转到所指的文档中去。
二、CSS
HTML可以将内容、结构和格式化的信息都包含在同一个Web文档中，这样做虽然简单易行，但也存在很多问题。
各种信息存放在一起不利于文档的维护，修改起来费时费力。
因此HTML应只负责文档的内容和结构，而格式化信息交给一套新的语言来完成，这就是CSS，它也是本论文的主角。
CSS全称为CascadingStyleSheet，中文译为层叠样式表（也有译作级联样式表的）。
其作用就是要控制HTML的页面布局和外观样式，使Web文档内容结构和表现形式完全分离。
第五节浏览器
网页和浏览器是分不开的，用户正是通过浏览器来达到访问网页的目的。
浏览器（Browser）是一种软件程序，可以和网络建立连接并与之通信。
它可以将存在于万维网中的特定网页获取下来，对网页中的内容进行分析，并按照一定的规则显示出来。
目前主浏览器有：
①InternetExplorer1995年微软公司推出并与Windows95操作系统进行捆绑销售。
②MozillaFirefox由Mozilla基金会与数百个自愿者开发的网页浏览器。
③OperaOperaSoftware开发的Opera（）浏览器是一款适用于各种平台、操作系统和嵌入式网络产品的高品质、多平台产品。
第二章网站需求分析
网站是企业向用户和网民提供信息的一种方式，是企业开展电子商务的基础设施和信息平台。
企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站则是反映企业形象和文化的重要窗口。
在建站的可行性分析方面，设计中，我主要针对已经确定的需求和目标，研究网站建设的社会环境、市场等可行性、技术可行性，经济可行性以及开发人员等问题。
在IT行业迅速发展的今天,企业网站的建设已经成为一个企业发展必不可少的存在。
对于创意设计有限公司来说，我们将建立一个以宣传为目的的网站类型。
将于短期内强力打造公司的宣传力度，让更多的客户了解，信任公司。
网站的建设，也是公司对于宣传方面的长期投资。
企业品牌形象。
对于一个以生产为主的大型企业而言，企业的品牌形象至关重要。
特别是对于互联网技术高度发展的今天，大多客户都是通过网络来了解企业产品、企业形象及企业实力，因此，企业网站的形象往往决定了客户对企业产品的信心。
建立具有国际水准的网站，能够极大的提升企业的整体形象。
产品展示。
一般其他营销模式的企业网站都是注重产品展示来加强企业的宣传力度，但是对于创意设计有限公司来说，没有其实际物品展示，只有展现其出众的业绩实例才能让客户信服，才能从侧面展现出公司的实力，让客户更放心的把业务交给公司处理。
公司介绍。
具体介绍出公司的发展史，结构，业务流程等等一系列来加大公司的宣传力度，好让客户能全面的了解公司。
公司的详细信息，都将批注在网页上，好让顾客方便联系。
在推销的同时更要注重企业的特色推广和服务信息等。
内部管理优化。
网站的建设将会为企业内部的管理带来一种全新的模式。
网站是实现这一模式的平台。
在降低企业内部资源顺好、减低成本、加强企业员工与员工，企业与员工之间的联系和沟通等方面发挥巨大的作用，最终使企业的运营和运作打到最大的优化。
第三章技术支持
第一节Dreamweaver8.0
Dreamweaver是创建和管理网页的专业化可视编辑器。
使用Dreamweaver可以轻松创建跨平台、跨浏览器的页面。
Macromedia的RoundtripHTML技术允许用户随意导入HTML文档而无需重新设置代码格式。
Dreamweaver可以为用户做到：
使用动态HTML功能（例如具有动态效果的层和行为）而不用写一行代码。
它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。
Dreamweaver还是一个可以完全自定义的应用程序。
用户可以创建自己的对象和命令修改菜单和快捷键，甚至编写JavaScript代码扩展Dreamweaver的行为和属性检查器。
至于Dreamweaver工作区是非常灵活的，因此它可以适应各种不同的工作风格和使用水平。
常用的Dreamweaver工作区组件有以下若干种：
①文档窗口可显示当前文档，文档的外观和浏览器中看到的非常相似。
②装载器中包含一些打开和关闭常用检查器和模板的按钮。
③对象工具栏包含创建不同类型的对象（例如图象、表格和层等）的按钮。
④属性检查器显示选定对象的属性。
⑤快捷菜单可以使用户对当前选择或区域快速执行某些命令。
⑥可固定的浮动工具栏允许用户将浮动窗口、检查器和工具栏组合在一个或多个选择窗口中。
第一节MacromediaFlash8.0
MacromediaFlash8.0用于web站点的交互式的矢量图形和动画的制作，它可制作出
用于浏览时的导航控制、制作动画图标、带同步声音的大段的动画，创建出生动富于表现力的网页。
Flash中的图形都是矢量的，占据存储空间较少，因而下载时间短，且能很好地适应浏览者不同尺寸的屏幕。
Flash的交互性的大部分设置就在Action和FsCommand里，通过对Action和FsCommand的设置，你可以随意的设置各事件发生的效果，还有对变量及函数的设置。
第三节Fireworks
AdobeFireworks可以加速Web设计与开发，是一款创建与优化Web图像和快速构建网站与Web界面原型的理想工具。
Fireworks不仅具备编辑矢量图形与位图图像的灵活性，还提供了一个预先构建资源的公用库,并可与AdobePhotoshop、AdobeDreamweaver和AdobeFlash软件省时集成。
在Fireworks中将设计迅速转变为模型，或利用来自Illustrator、Photoshop和Flash的其它资源。
然后直接置入Dreamweaver中轻松地进行开发与部署。
Fireworks特性如下：
①矢量编辑与位图编辑。
创建和编辑矢量图像与位图图像，并导入和编辑本机Photoshop文件。
②图像优化。
采用预览、跨平台灰度系统预览、选择性JPEG压缩和大量导出控件，针对各种交付情况优化图像。
③高效的Photoshop和Illustrator集成。
导入Photoshop（PSD）文件，导入时可保持分层的图层、图层效果和混合模式。
将Fireworks（PNG）文件保存回Photoshop（PSD）格式。
导入Illustrator（AI）文件，导入时可保持包括图层、组和颜色信息在内的图形完整性。
④智能缩放。
通过9切片缩放智能地缩放矢量图像或位图图像中的按钮与图形元件。
将9切片缩放与新的自动形状库相结合,以加速网站和应用程序的原型构建进度。
⑤简化的Dreamweaver和Flash集成。
复制FireworksCS3中的任意对象,并直接粘贴到DreamweaverCS3中。
创建可保存为CSS和HTML的弹出菜单。
将Fireworks（PNG）文件直接导出至FlashCS3,导出时可保持矢量、位图、动画和多状态不变,然后在FlashCS3中编辑文件。
众所周知，在网页上的jpg图片如果过大，会严重影响页面的打开速度，Fireworks提供优化图片的功能，即缩小图片的KB，而且不影响画面的质量（除非放大了与原图对比）。
由于很多人喜欢用photoshop制作jpg图片，所以它的容量会很大,最终还是要用Fireworks来处理一下。
第四节JavaScript
JavaScript是一种基于对象（Object）和事件驱动（EventDriven）并具有安全性能的脚本语言。
使用它的目的是与HTML超文本标记语言、Java脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。
从而可以开发客户端的应用程序等。
它是通过嵌入或调入在标准的HTML语言中实现的。
它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择。
第五节AdobePhotoshop8.0
Photoshop8.0是目前最流行的图形、图像编辑设计软件，在数码影像
升级会员 