创意设计类网站的设计与实现毕业设计目录前言 (1)第一章网站设计环境介绍 (2)第一节因特网和万维网 (2)一、何为因特网 (2)二、何为万维网 (2)第二节相关术语解释 (2)一、Internet (3)二、站点 (3)三、超链接 (3)四、URL (3)五、IP地址 (4)六、网页 (4)第三节 Web标准概述 (4)一、什么是Web标准 (4)二、Web的认识 (5)三、Web文档的三层结构 (5)四、Web标准的优势 (6)第四节 Web设计技术 (7)一、HTML (7)二、CSS (7)第五节浏览器 (8)第二章网站需求分析 (9)第三章技术支持 (11)第一节 Dreamweaver8.0 (11)第一节Macromedia Flash 8.0 (11)第三节 Fireworks (12)第四节 JavaScript (13)第五节 Adobe Photoshop8.0 (13)第六节 DIV+CSS (14)一、什么是div (14)二、什么是CSS (14)三、何为样式 (14)四、何为层叠 (15)五、DIV+CSS简介 (15)第四章创意设计网的设计 (16)第一节从功能分析开始 (16)第二节首页页面设计 (17)一、结构分析 (17)二、风格定位 (18)三、页头设计 (18)四、公司简介及banner设计 (19)五、中间内容设计 (19)六、页脚 (20)第三节内页设计 (21)一、设计理念 (21)二、作品展示 (22)三、企业文化 (23)四、关于我们 (24)五、联系我们 (25)第五章网站的测试 (27)第六章后续工作 (28)结论 (29)结束语 (30)参考文献 (31)附录：网站效果图 (32)前言当今世界已进入信息时代，Internet成为21世纪最受关注的行业之一,它的飞速发展和在全球范围的普及应用正在给人类生活带来革命性变化。

网络技术的发展也取得了巨大的成就，为网站开发提供了很好的技术支持。

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

其中，特别是中小型企业，对于网络平台搭建的需求相当的迫切。

各大门户网，企业网都在WEB2.0的标准上,采用div+css来布局，因此有了此次的选题。

论文详细论述了一个基于公司网站开发的设计过程。

在技术上，采用了Dreamweaver网站开发工具，以 HTML的超大功能结合 JavaScript 的客户端语言，这样的构造有利于以后对网站系统开发的把握，并为以后的开发积累了一定的经验，提升编程能力。

其中，最主要的就是介绍和展示DIV+CSS在网页中的最用和魅力。

本文实现了首页、设计理念、作品展示、企业策划、关于我们、联系我们等功能，系统符合公司网站的需求。

论文组织如下：首先阐述了该网站的开发背景、意义，详细介绍了div+css 理论知识；其次介绍了相关的开发工具及技术基础；接着对网站的需求进行了分析，并提出了具体的设计方案；然后展现了整个网站的具体实现，包括网页的设计和连接，各功能模块的实现；最后对该网站进行了严格的测试。

第一章网站设计环境介绍随着计算机应用的发展，网站已经是展现企业形象、介绍产品和服务、体现企业发展战略的重要途径。

网页设计是科技与艺术的结合，是商业社会的产物。

虽然网页设计也是平面设计中的一个方面，但是网页设计有其独特的设计要求与原则，在设计网页之前要对其有所了解。

第一节因特网和万维网一、何为因特网大家可能对因特网（Internet）这个词不会感到陌生，因特网是由许许多多计算机连接在一起构成的一个计算机网络，在这个网络中，人们可以使用各自的计算机互相传递信息；可以在自己的计算机上存储文件供别人访问；可以利用多台计算机实现分布式应用。

Internet规模庞大，遍及全球，一旦上网，你就与全球无以计数的计算机连成一体。

二、何为万维网其中的三个“W”是英文World Wide Web的缩写，中文译为万维网。

万维网是无数个网络站点和网页的集合，它们在一起构成了因特网最主要的部分（因特网还包括电子邮件、Usenet以及新闻组等应用）。

万维网实际上是多媒体的集合，各个部分由超级链接连接而成。

我们通常使用浏览器上网观看的内容，就是万维网的内容。

比如在浏览器中输入就可以访问新浪网站的首页。

网页也称作Web页面或Web文档，它包含了文字、图像、动画和一些具有交互功能的控件。

第二节相关术语解释一、InternetInternet(英特网)诞生于上世纪60年代，发展非常慢，到90年代才开始迅速发展。

现在英特网已经是世界上最大的网络的，联在英特网上的电脑有数亿台。

上面的资料、信息数不胜数，所以有人把英特网叫成是信息的海洋、知识的海洋。

二、站点所谓站点，就是将网页文件和素材文件，有条理地放置站点文件夹里，这些文件与文件夹就构成了网站的实质内容。

站点文件夹里除了网页文件还有素材文件，所谓素材就是网页中所用到的图像、声音、视频等，这些内容是以单独文件的形式存在。

三、超链接我们在浏览网页时，当鼠标指针指向某段文本或是某个图像，鼠标指针变成小手状，单击鼠标可以打开其他的网页或是跳转到其他的网站，这就是超链接。

采用超链接技术可以将不同的网站、网站中的不同网页、网页中的不同位置彼此串在一起，实现相互间的跳转，方便信息的浏览和查找。

人们通过超链接可以很方便很迅速地访问分布于全球计算机上的海量资源，实现在互联网中的漫游。

超链接能使Web服务存在广泛和持久的生命力，超链接可以说是Web的灵魂。

四、URLURL（Uniform Resource Locator的缩写），统一资源定位器。

互联网中某种信息资源以某种方式存储在网络中的某处，必须用一个惟一的URL来进行标识，这样才能方便查找。

对于Web来说，可以简单并通俗把URL理解为网址。

每个Web网页都有自己的网址，在浏览器地址栏里输入网页的URL，就可以访问这个网页。

例如，/index.html，其意思就是采用http超文本传输协议访问新浪网的首页，由于网页均是通过http超文本传输协议进行访问，默认下，“http://”可以省略不输。

五、IP地址为了使互联网上的电脑主机在通信时能够相互识别，每台主机都分配一个能表示其位置的IP（Internet Protocol）地址，这如同公用电话网中电话的号码一样。

IP地址是由专门的互联网机构来分配。

IP地址具有惟一性，是由32位二进制数组成，分为四组，每组8位，每组之间用小数点分隔，在实际之中常转换成十进制数表示。

六、网页网页，是网站中的一页，通常是HTML格式（文件扩展名为.html或.htm或.asp 或.aspx或.php或.jsp等）。

网页通常用图像档来提供图画。

网页要透过网页浏览器来阅读。

网页是构成网站的基本元素，是承载各种网站应用的平台。

通俗的说，您的网站就是由网页组成的。

如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。

所谓网站(Website)，就是指在网际网路（因特网）上，根据一定的规则，使用HTML等工具制作的用於展示特定内容的相关网页的集合。

简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯（信息），或者利用网站来提供相关的网路服务（网络服务）。

人们可以通过网页浏览器来访问网站，获取自己需要的资讯（信息）或者享受网路服务。

第三节 Web标准概述一、什么是Web标准Web标准是由W3C（World Wide Web Consortium）和其他标准化组织指定的一系列规范的集合，其中包含了（X）HTML、XML和CSS。

Web标准的目的在于创建一个统一的用于Web表现层的技术标准，以便通过不同浏览器或终端设备向最终用户展示信息内容。

二、Web的认识Web(World Wide Web，简称WWW，又称万维网)是目前Internet上应用最广泛也是最重要的信息服务类型，它已经影响了Internet上的广告、新闻、电子商务和展示信息等各个服务领域。

Web采用浏6hy览器/服务器（B/S）工作模式，其运作模式可以描述为：请求→处理→应答。

Web以超文本标记语言HTML(Hyper Text Markup Language)与超文本传输协议HTTP(Hyper Text Transfer Protocol)为基础，通过浏览器为用户提供方便友好的信息浏览界面。

Web将位于全世界互联网上不同网址的相关信息有机地编织在一起。

在Web服务方式中，信息以页面（或称Web页）的形式存储在Web 服务器中，这些页面采用超文本的方式对信息进行组织，通过链接将一页信息链接到另一页信息。

这些相互链接的页面既可以放置在同一台主机上，也可以放置在不同的主机上。

页面到页面的链接信息由统一资源定位器URL(Uniform Resource Locator)维持。

用户通过客户端应用程序（即浏览器）向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页面在不同的浏览器中均能获得一致的效果。