静态网页毕业论文要点

1、西安广播电视大学开放教育计算机信息管理专业毕业论文（设计）题目创意设计类网站的设计与实现专业层次:级别:学号:姓名:分校（工作站）：指导教师： -1 -【摘要】 计算机和计算机网络的飞速发展，人们对计算机网络的依赖是越来越 大。人们在网上聊天交友，在网上请教问题，查阅资料，还在网上听音乐。除此 之外，人们还会在网上进行商务交易、下载信息，有着众多的使用者。尤其是电 子商务大大的减少了人们对周围环境的依赖， 无论是哪里的网友， 都可以浏览到 世界各地的各类信息，非常的方便， 由于以上的优势， 各类网站如雨后春笋般的 出现，企业网站也不例外。而Web设计的健康发展依靠 web标准的采用，没有web

2、标准就不会有真正的 可访问性和连贯的设计。不用 web标准，就跟不上时代。在这样的标准时代，我 们需要网页更加容易扩展，适合自动数据交换，并且更加规整。而 css ，则实现 了页面内容与样式分离。鉴于web标准，本论文着重对div+css布局与美化公司 网页进行了讨论；同时根据客户需求， 采用 div+css 实现了咨询公司网页的设计， 具体实现了首页、 设计理念、作品展示、企业文化、 关于我们、联系我们等功能， 系统符合公司网站的需求。关键词】 企业网站 网页设计 div css Dreamweaver- 5 -目录、八、-丄前言. 1第一章 网站设计环境介绍 . 2第一节 因特网和万维网

3、2一、何为因特网 . 2二、何为万维网 . 2第二节 相关术语解释 3一、Internet . 3二、站点 . 3三、超链接 . 3四、URL. 3五、 IP 地址 4六、网页 . 4第三节 Web 标准概述 . 4一、什么是Wet标准 4二、Web的认识 5三、Web文档的三层结构 5四、Web标准的优势 6第四节Web设计技术 7一、HTML. 7二、CSS. 7第五节 浏览器 8第二章 网站需求分析 . 9第三章 技术支持 . 11第一节 Dreamweaver cs3 11第一节 Macromedia Flash 8.0 11第三节 Fireworks 12第四节 JavaScript

4、 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六、页脚 . 20第三节 内页设计 21一、设计理念 . 22二、作品展示 . 23三、企业文化 . 24四、关于我们 . 错误！未定义书签。五、联系我们 .

5、25第五章 网站的测试 . 26第六章 后续工作 . 27结 论. 29结束语 . 30参考文献 . 31附 录：网站效果图 . 32当今世界已进入信息时代，In ternet成为21世纪最受关注的行业之一,它 的飞速发展和在全球范围的普及应用正在给人类生活带来革命性变化。 网络技术 的发展也取得了巨大的成就，为网站开发提供了很好的技术支持。 网站已经成为 现阶段众多企业不可或缺的网络营销平台，互联网应用规模正在不断扩大。其中， 特别是中小型企业，对于网络平台搭建的需求相当的迫切。 各大门户网，企业网 都在WEB2.0的标准上,采用div+css来布局，因此有了此次的选题。论文详细论述了一个基

6、于公司网站开发的设计过程。在技术上，采用了 Dreamweaver网站开发工具，以HTML的超大功能结合JavaScript 的客户端语 言，这样的构造有利于以后对网站系统开发的把握，并为以后的开发积累了一定的经验，提升编程能力。其中，最主要的就是介绍和展示 DIV+CSS在网页中的最 用和魅力。本文实现了首页、设计理念、作品展示、企业策划、关于我们、联系我们等 功能，系统符合公司网站的需求。论文组织如下：首先阐述了该网站的开发背景、意义，详细介绍了div+css理论知识；其次介绍了相关的开发工具及技术基础；接着对网站的需求进行了 分析，并提出了具体的设计方案；然后展现了整个网站的具体实现，包

7、括网页 的设计和连接，各功能模块的实现；最后对该网站进行了严格的测试。30第一章网站设计环境介绍随着计算机应用的发展，网站已经是展现企业形象、介绍产品和服务、体现 企业发展战略的重要途径。网页设计是科技与艺术的结合，是商业社会的产物。 虽然网页设计也是平面设计中的一个方面， 但是网页设计有其独特的设计要求与 原则，在设计网页之前要对其有所了解。第一节因特网和万维网一、何为因特网大家可能对因特网(Internet )这个词不会感到陌生，因特网是由许许多多 计算机连接在一起构成的一个计算机网络，在这个网络中，人们可以使用各自的计算机互相传递信息；可以在自己的计算机上存储文件供别人访问；可以利用多台

8、计算机实现分布式应用。In ternet规模庞大，遍及全球，一旦上网，你就与 全球无以计数的计算机连成一体。、何为万维网有上网经历的会知道，在浏览器的地址栏中经常出现 “WWW比如要访问百 度网站就需输入“ WWW.baidu.co” 其中的三个“ W 是英文 World Wide Web 的缩写，中文译为万维网。万维网是无数个网络站点和网页的集合，它们在一起构成了因特网最主要的部分(因特网还包括电子邮件、Use net以及新闻组等应用)。万维网实际上是多媒体的集合，各个部分由超级链接连接而成。我们通常使 用浏览器上网观看的内容，就是万维网的内容。比如在浏览器中输入“ ” ,就可以访问新浪网站

9、的首页。网页也称作 Wet页面或 Web 文档，它包含了文字、图像、动画和一些具有交互功能的控件。第二节相关术语解释一、InternetInternet（英特网）诞生于上世纪60年代，发展非常慢，到90年代才开始迅 速发展。现在英特网已经是世界上最大的网络的，联在英特网上的电脑有数亿台。 上面的资料、信息数不胜数，所以有人把英特网叫成是信息的海洋、知识的海洋。二、站点所谓站点，就是将网页文件和素材文件，有条理地放置站点文件夹里，这些 文件与文件夹就构成了网站的实质内容。站点文件夹里除了网页文件还有素材文 件，所谓素材就是网页中所用到的图像、声音、视频等，这些内容是以单独文件 的形式存在。三、超

10、链接我们在浏览网页时，当鼠标指针指向某段文本或是某个图像，鼠标指针变成小手状，单击鼠标可以打开其他的网页或是跳转到其他的网站，这就是超链接。 采用超链接技术可以将不同的网站、网站中的不同网页、网页中的不同位置彼此串在一起，实现相互间的跳转，方便信息的浏览和查找。人们通过超链接可以很 方便很迅速地访问分布于全球计算机上的海量资源，实现在互联网中的漫游。超链接能使Web服务存在广泛和持久的生命力，超链接可以说是 Web勺灵魂。四、URLURL（Uniform Resource Locator 的缩写），统一资源定位器。互联网中某 种信息资源以某种方式存储在网络中的某处，必须用一个惟一的URL来进行

11、标识，这样才能方便查找。对于 Web来说，可以简单并通俗把URL理解为网址。每 个Web网页都有自己的网址，在浏览器地址栏里输入网页的URL就可以访问这个网页。例如，其意思就是采用 http 超文本传输协议访问新浪网的首页，由于网页均是通过http超文本传输协议进行访问，默认下，“http:/ ”可以省略不输五、IP地址为了使互联网上的电脑主机在通信时能够相互识别，每台主机都分配一个能表示其位置的IP （ Internet ProtocoI ）地址，这如同公用电话网中电话的号码 一样。IP地址是由专门的互联网机构来分配。IP地址具有惟一性，是由32位二 进制数组成，分为四组，每组8位，每组之间

12、用小数点分隔，在实际之中常转换 成十进制数表示。六、网页网页，是网站中的一页，通常是HTM格式（文件扩展名为.html或.htm或.asp 或.aspx或.php或.jsp等）。网页通常用图像档来提供图画。网页要透过网页浏 览器来阅读。网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，您的 网站就是由网页组成的。如果您只有域名和虚拟主机而没有制作任何网页的话， 您的客户仍旧无法访问您的网站。所谓网站（Website），就是指在网际网路（因特网）上，根据一定的规则， 使用HTML等工具制作的用於展示特定内容的相关网页的集合。简单地说，网站 是一种通讯工具，就像布告栏一样，人们可以通过

13、网站来发布自己想要公开的资 讯（信息），或者利用网站来提供相关的网路服务（网络服务）。人们可以通过网 页浏览器来访问网站，获取自己需要的资讯（信息）或者享受网路服务。第三节Web标准概述一、什么是Wet标准Web标准是由 W3C（World Wide WebConsortium ）和其他标准化组织指定的一系列规范的集合，其中包含了（ X HTMLXML和CSS Web标准的目的在于创 建一个统一的用于 Web表现层的技术标准，以便通过不同浏览器或终端设备向最终用户展示信息内容二、Web的认识Web（World Wide Web简称 WW，W又称万维网）是目前In ternet 上应用最广 泛也

14、是最重要的信息服务类型，它已经影响了 In ternet上的广告、新闻、电子 商务和展示信息等各个服务领域。 Web采用浏6hy览器/服务器（B/S）工作模 式，其运作模式可以描述为：请求一处理一应答。Web以超文本标记语言HTML（HyperText Markup Language）与超文本传输协 议HTTP（Hyper Text Transfer Protocol）为基础，通过浏览器为用户提供方便友好的信息浏览界面。Web将位于全世界互联网上不同网址的相关信息有机地 编织在一起。在 Web服务方式中，信息以页面（或称 WebM）的形式存储在 Web 服务器中，这些页面采用超文本的方式对信息

15、进行组织，通过链接将一页信息链 接到另一页信息。这些相互链接的页面既可以放置在同一台主机上，也可以放置在不同的主机上。页面到页面的链接信息由统一资源定位器URL（U niformResource Locator）维持。用户通过客户端应用程序（即浏览器）向Web服务器发出请求，服务器根据客户端的请求将保存在服务器中的某个页面返回给客户 端，浏览器接收到页面后对其进行解释，最终将信息以图、文、声并茂的形式呈 现给用户。Web服务的特点在于高度的集成性，它能够实现不同类型的信息（如 文本、图像、声音、动画和视频等）和服务（如 New FTP Telnet、Gopher及 Mail等）的无缝链接，特别

16、适合于广域网中信息的组织、检索与显示。三、Web文档的三层结构Wet文档通常包含三个不同的层次 （见图1.1 ）。首先是结构层，该层的内容 是由（X） HTMLS写的文本文档。它包含文档的内容，以及由（X） HTML添加的 语义化的标记。第二层为表现层，该层内容是CSS样式代码。它描述了文档该以 何种样式呈现在访问者面前，样式包括页面各部分的布局、文字段落排版、背景 图片和颜色等。第三层是行为层，该层定义了文档模型以及如何与客户进行交互， 所涉及技术主要是DOM以及ECMAScript脚本语言。图1.1结构、表现和行为及各部分所涉及的技术四、Web标准的优势1、易于开发和维护一个大型的网站往往

17、需要很多人员的参与， 他们的分工也不同，有负责样式 设计的，有负责页面编码的，有负责样式编写的等。由于内容结构和表现的分离， 不同开发人员可以独立工作，专注于自己负责的内容。样式信息和内容是相互独立的，因此同一个样式信息可用于不同的内容中， 从而实现代码重用。这种做法可用减少重复编码，加快开发进度。样式信息重用也使得维护工作大大减轻， 只需要修改一小部分样式代码，就 可以使所有用到该样式的区域同时改变外观。2、高兼容性由于W3C寸Wet标准的推动，越来越多的浏览器支持由 W3（制定的各种标准， 从而使得根据标准编写的Web页面在不同的浏览器中均能获得一致的效果。3、咼灵活性现在，越来越多的人使

18、用手机或PDA访问网站，通常这些设备的屏幕要远远 小于PC机的显示器。网页的内容和表现的分离使得我们可以针对不同平台和设 备应用不同的样式文件，而网页内容无须改动。对于需要打印输出的页面，我们 也无须再提供另一份“适合打印”的页面，取而代之的只是新的CSS样式。4、提高访问速度内容与表现的分离，使得页面中不再包含冗余的样式代码， 而独立出来的样 式表可以充分地进行重用，网页整体代码量大大减少。这样不仅能占用更少的网 络带宽，提高页面载入速度，同时浏览器也能对页面进行快速解析，显示给用户。5、提高用户体验从Web应用的角度看，用户体验(User Experience,UE )指的是 Web应用程

19、 序能够提供直观简洁的用户界面、 简便的操作以及有效的交互方式。只有当用户 亲自使用时才能体验带它们。用户体验包含了多方面的内容，其中一致性、可用 性等方面均通过标准化开发来实现。 比如各个页面使用统一的CSS样式， 利用 行为层技术改善交互设计等。第四节Web设计技术Web设计涵盖的范围相当广，本节只介绍一些构建Web文档所需的几项最基 本的技术。一、HTMLHTML英文全成为HyperText Markup Language,中文译为超文版标记语言。它是用来创建Web文档的语言。页面元素是由特定的标记来确定的，这些标记告 诉浏览器该如何显示这个页面。所谓超文本，就是一种含有指向其他文档链接

20、的 文本，即我们俗称的链接。超文本把存放于不同计算机中的文档链接在一起。访问者不必关心链接所指的内容到底位于何处， 只需要在链接上单击一下鼠标，页 面马上转到所指的文档中去。、CSSHTML可以将内容、结构和格式化的信息都包含在同一个 Web文档中，这样 做虽然简单易行，但也存在很多问题。各种信息存放在一起不利于文档的维护， 修改起来费时费力。因此HTML应只负责文档的内容和结构，而格式化信息交给 一套新的语言来完成，这就是 css它也是本论文的主角。CSS全称为Cascading Style Sheet ，中文译为层叠样式表（也有译作级联样式表的）。其作用就是要控制HTML!勺页面布局和外观

21、样式，使Wet文档内容结 构和表现形式完全分离。第五节浏览器网页和浏览器是分不开的，用户正是通过浏览器来达到访问网页的目的。浏览器（Browser）是一种软件程序，可以和网络建立连接并与之通信。它可以将 存在于万维网中的特定网页获取下来，对网页中的内容进行分析，并按照一定的规则显示出来。目前主浏览器有： In ternet Explorer 1995年微软公司推出并与 Win dows 95操作系统进行捆绑销售。 Mozilla Firefox 由Mozilla基金会与数百个自愿者开发的网页浏览 器。 Opera Opera Software 开发的 Opera （ ）浏览 器是一款适用于各种

22、平台、操作系统和嵌入式网络产品的高品质、多平台产品。第二章网站需求分析网站是企业向用户和网民提供信息的一种方式， 是企业开展电子商务的基础 设施和信息平台。企业的网址被称为“网络商标”，也是企业无形资产的组成部 分，而网站则是反映企业形象和文化的重要窗口。在建站的可行性分析方面，设计中，我主要针对已经确定的需求和目标， 研 究网站建设的社会环境、市场等可行性、技术可行性，经济可行性以及开发人员 等问题。在IT行业迅速发展的今天，企业网站的建设已经成为一个企业发展必不可 少的存在。对于创意设计有限公司来说，我们将建立一个以宣传为目的的网站类 型。将于短期内强力打造公司的宣传力度，让更多的客户了解

23、，信任公司。网站 的建设，也是公司对于宣传方面的长期投资。 企业品牌形象。对于一个以生产为主的大型企业而言，企业的品牌形象至关重要。特别是对于互联网技术高度发展的今天，大多客户都是通过网络来了解企业产品、企业 形象及企业实力，因此，企业网站的形象往往决定了客户对企业产品的信心。 建 立具有国际水准的网站，能够极大的提升企业的整体形象。 产品展示。一般其他营销模式的企业网站都是注重产品展示来加强企业的宣传力度，但是对于创意设计有限公司来说，没有其实际物品展示，只有展现其出众的业绩实 例才能让客户信服，才能从侧面展现出公司的实力，让客户更放心的把业务交给 公司处理。 公司介绍。具体介绍出公司的发展

24、史，结构，业务流程等等一系列来加大公司的宣传力 度，好让客户能全面的了解公司。公司的详细信息，都将批注在网页上，好让顾 客方便联系。在推销的同时更要注重企业的特色推广和服务信息等。 内部管理优化。网站的建设将会为企业内部的管理带来一种全新的模式。 网站是实现这一模 式的平台。在降低企业内部资源顺好、减低成本、加强企业员工与员工，企业与 员工之间的联系和沟通等方面发挥巨大的作用，最终使企业的运营和运作打到最 大的优化。第三章技术支持第一节 Dreamweaver cs3.0Dreamweaver是创建和管理网页的专业化可视编辑器。使用Dreamweaver可 以轻松创建跨平台、跨浏览器的页面。M

25、acromedia的Roundtrip HTML技术允许 用户随意导入HTML文档而无需重新设置代码格式。Dreamweaver可以为用户做到：使用动态 HTML功能（例如具有动态效果的 层和行为）而不用写一行代码。它甚至还可以检查用户的工作成果在所有流行的 平台和浏览器中可能发生的错误。Dreamweave还是一个可以完全自定义的应用程序。用户可以创建自己的对象和命令修改菜单和快捷键，甚至编写JavaScript代码扩展Dreamweaver的行为和属性检查器。至于Dreamweaver工作区是非常灵活的，因此它可以适应各种不同的工作风 格和使用水平。常用的Dreamweaver工作区组件有

26、以下若干种： 文档窗口可显示当前文档，文档的外观和浏览器中看到的非常相似。 装载器中包含一些打开和关闭常用检查器和模板的按钮。 对象工具栏包含创建不同类型的对象（例如 图象、表格和层等）的按钮。 属性检查器显示选定对象的属性。 快捷菜单可以使用户对当前选择或区域快速执行某些命令。 可固定的浮动工具栏允许用户将浮动窗口、检查器和工具栏组合在一个 或多个选择窗口中。第一节 Macromedia Flash 8.0Macromedia Flash 8.0用于web站点的交互式的矢量图形和动画的制作，它可制作出用于浏览时的导航控制、制作动画图标、带同步声音的大段的动画，创建出生动富于表现力的网页。Fl

27、ash中的图形都是矢量的，占据存储空间较少，因而 下载时间短，且能很好地适应浏览者不同尺寸的屏幕。Flash的交互性的大部分设置就在Action 和Fs Comma nd里，通过对Action和Fs Comma nd的设置，你可以随意的设置各事件发生的效果，还有对 变量及函数的设置。第三节 FireworksAdobe Fireworks可以加速 Web设计与开发，是一款创建与优化 Web图像 和快速构建网站与Web界面原型的理想工具。Fireworks不仅具备编辑矢量图 形与位图图像的灵活性，还提供了一个预先构建资源的公用库，并可与AdobePhotoshop、Adobe Dreamweav

28、er和 AdobeFlash 软件省时集成。在 Fireworks 中 将设计迅速转变为模型，或利用来自川ustrator、Photoshop和Flash的其它资源。然后直接置入Dreamweaver中轻松地进行开发与部署。Fireworks特 性如下： 矢量编辑与位图编辑。创建和编辑矢量图像与位图图像，并导入和编辑 本机Photoshop文件。 图像优化。采用预览、跨平台灰度系统预览、选择性 JPEG压缩和大量 导出控件，针对各种交付情况优化图像。 高效的 Photoshop 和 Illustrator 集成。导入 Photoshop (PSD)文件，导入时可保持分层的图层、图层效果和混合模

29、式。 将Fireworks (PNG)文 件保存回Photoshop (PSD) 格式。 导入Illustrator (AI)文件， 导入时可保持包括图层、组和颜色信息在内的图形完整性。 智能缩放。通过9切片缩放智能地缩放矢量图像或位图图像中的按钮与 图形元件。将9切片缩放与新的自动形状库相结合，以加速网站和应用程序的 原型构建进度。 简化的Dreamweaver和Flash 集成。复制Fireworks CS3中的任意对 象,并直接粘贴到Dreamweaver CS3中。 创建可保存为CSS和HTML的弹出 菜单。 将Fireworks (PNG) 文件直接导出至Flash CS3,导出时可

30、保持矢量、 位图、动画和多状态不变,然后在Flash CS3中编辑文件。众所周知，在网页上的jpg图片如果过大，会严重影响页面的打开速度， Fireworks提供优化图片的功能，即缩小图片的KB而且不影响画面的质量(除 非放大了与原图对比)。由于很多人喜欢用photoshop制作jpg图片，所以它的 容量会很大,最终还是要用Fireworks来处理一下。第四节 JavaScriptJavaScript 是一种基于对象(Object)和事件驱动(Event Driven) 并具有安 全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java脚本语言(Java小程序)一起实现在一个 Web

31、页面中链接多个对象，与 Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了 HTML语言的缺陷，它是Java与HTM折衷的选择。第五节 Adobe Photoshop8.0Photoshop 8.0是目前最流行的图形、图像编辑设计软件，在数码影像处理、 图像编辑合成、广告设计、封面设计、美术绘画、网页设计等领域都被广泛地应 用。 文字处理更加方便 增加的图层集使图层管理更有序。 新增图像功能：图像的剪切和剪裁更加方便。 将所有工具的选项板改进为工具选项栏放置在工作区顶部，方便先项参 数的设置。 为了更方便地用路径绘画，改进增加了几

32、何形状工具，通过选择工具的不同工作模式，可创建路径、几何形状或几何填充区，使得矢量绘图功能得到了 加强。第六节DIV+CSS一、什么是divdiv标签和其他HTM标签没有什么区别，需要由关闭标志。如果不加入任何css样式，它的效果类似vp标记。Div示例代码如下： 内容 把css的扩展属性放入div标签中，就可以控制div容器中的所有HTML元 素显示在屏幕上的具体位置，为了实现这种1:1的精确控制，必须给当前的div加上唯一的id，用来区分其他div标记。还有一种情况是：你想让一类或者说 几个div具有相同的样式属性时，可以给每个div加上class属性，这样具有同 样class属性的div

33、标记样式相同。代码如下：内容 内容 二、什么是CSSCSS是英文Cascading Style Sheet缩写形式，中文译为层叠样式表或级联 样式表。Web设计者可利用它来定义文档的样式，这里指的文档不仅限于（X）HTML通过CSS设计者可控制文档的字体、颜色、图像、表格、链接和布局格 式，同时设计者也可以将表示样式外观的信息从内容中分离出来，集中放置在页面的某一部分，甚至可保存为独立的文件，从而减少文件的大小，节省网络的宽 带、节约web设计者维护代码的时间。CSS有如此多的好处，掌握和使用好它对 于web设计者来说是非常必要的。三、何为样式样式一词对于我们来说并不陌生，即使尚未接触CSS的

34、人也不难理解样式的 含义。当你使用Microsoft Word 一类的字处理程序时，几乎总要更爱某些样式 以达到更好的效果，比如设定标题为加粗的三号黑体字，每一段的开始流出两个CSS空格等。样式表不能孤立地使用，因为它本身并不包含任何内容信息。当然也不仅仅能同Web文档一起使用，它还能定义 XMLS至软件界面的样式。四、何为层叠与样式相比，了解层叠一词的CSS初学者可能就比较少了，层叠是CSS中的 术语，它包含了一系列的规则，浏览器根据这个规则来确定样式应该如何应用到 页面的各个元素中去。五、DIV+CSS简介DIV+CSS是网站标准(或称“ WEB标准”中常用术语之一，div+css是一种

35、网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格(table )定位方式,真正地达到了 w3c内容与表现相分离。HTMI语言自HTML4.01 以来，不再发布新版本，原因就在于 HTML语言正变得越来越复杂化、专用化。 XHTM语言是一种可以将HTML语言标准化，用XHTMI语言重写后的HTMLK面可 以应用许多XML应用技术。使得网页更加容易扩展，适合自动数据交换，并且更 加规整。在XHTMI网站设计标准中，不再使用表格定位技术，而是采用 DIV+CSS 的方式实现各种定位。以下是 DIV+CSS的特点简介： 符合W3C标准。微软等公司均为 W3C支持者。这一点是最

36、重要的，因为 这保证您的网站不会因为将来网络应用的升级而被淘汰。 支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。 搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页， 对于搜索引擎的收录更加友好。 样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更 加方便。 现在YAHOO,MS等国际门户网站，网易，新浪等国内门户网站，和主 流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了 DIV+CSS是大势所 趋。 CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省 大量带宽，而且众所周知，

37、搜索引擎喜欢清洁的代码。 表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。第四章创意设计网的设计有了网站设计的基础，企业网站的需求，技术的支持，一级级前面素材等一 系列的准备之后可以开始设计一个网站了， 下面就与大家分享我设计的创意设计 网。第一节从功能分析开始将要做的是一个公司网站，该公司专为客户做网站设计的，因此建设网站的 目的主要有两个：一是使浏览者或潜在的客户迅速了解公司大部分已经完成或正 在进行的项目及相关的资料，这就要求网站的文字要简练，尽量减少大篇幅的文 字叙述，项目效果图要精彩，当然网页的页面效果也要漂亮，以使浏览者或潜在 的客户感觉到公司的设计水平高；二是使浏览者

38、或潜在的客户迅速了解公司对业 务的一般操作流程，以便能够与公司方便快捷地进行联系和沟通，减少不必要的 中间环节及由此带来的麻烦。建立公司网站要有一个清晰的网站布局。 比如说，导航条要不要？很多人说 那东西人人在做，就显得太俗没个性，难显示出新潮。但导航条之所以有那么多 人在用，是因为它给浏览者一个明确的布局， 便利人们查找本身所需的信息。 从 某种角度上说，大家都在用的东西就说明它确实被大家所接受。要清楚网站做出 来是给每一个人普通用户看的。网站还要经常更新，给人以新意。设计技术的成长，带来了网页世界的繁荣。尤其在崇尚个性的今天，设计者 们更是将页面设计表示的淋漓尽致。用户欣喜的看到那些僵化的

39、设计模式正在被 逐个打破，网页设计充满了朝气。但是，作为网页设计者，不能一味的只追求个 性的表现，还必需兼顾到用户和客户的习惯，在表现本身的风格的同时，在功能 上使用户更加便利。网站的前台页面包括首页、设计理念、作品展示、企业文化、 关于我们、联系我们等。第二节首页页面设计有了基于准备之后的网站策划，就可以开始进行页面设计了，页面设计主要 包括创意、色彩和版式三个方面。创意会使网页在众多的竞争对手中脱颖而出； 色彩可以使网页获得生命的力量；板式则是和用户沟通的核心，所以这三者缺 不可。一般的网站都需要这样一些版块站名称（logo ）、广告区，导航区、新闻区、 友情链接和版权等版块。这些版块又可

40、以称之为模块。选择哪些模块，实现哪些 功能是否需要添加其他模块都是首页设计制作时首先需要确定的，下面我们就开始具体的首页设计制作工作。一、结构分析根据需求可以知道，在页面上部要有logo和导航，接下来使banner，中间 部分的左侧显示若干次要的栏目， 右侧则显示部分文章的内容及作品展示，页面最底端为页脚区域，显示一些版权信息。很明显可以用四行两列的布局方式来安 排页面内容。如下图：logo和导航banner底部版权部分图4.1页面布局安排二、风格定位打开一个网站，给用户留下第一印象的既不是网站丰富的内容， 也不是网站 合理的版面布局，而是网站的色彩。色彩对人的视觉效果非常明显，一个网站设 计

41、成功与否，在某种程度上取决于设计者对色彩的运用和搭配。因为网页设计属于一种平面效果设计，在排除立体图形、动画效果之外，在平面图上，色彩的冲 击力是最强的，它很容易给用户留下深刻的印象。因此，在设计网页时，必须要 高度重视色彩的搭配。本网站的搭配主色为：白、淡蓝、灰色、三种颜色。白色代表纯洁、纯真、 朴素、神圣、明快。淡蓝色代表热情、活泼、热闹、温暖、幸福、吉祥。灰色代 表崇高、坚实、严肃、刚健、端庄，充分代表了一个企业应有的气质和形象。给 客户留下深刻的印象。三、页头设计网站的页头主要分为两个部分。一是 Logo, logo使一张准备好的图片，直 接放置在头部容器左侧，调整好位置；二是导航条，

42、网站导航条因为有立体感效 果，因此它需要脱离文本流，因此在控制样式的时候要用定位， 相对于文本流的定位。网站的导航栏目可以让用户对网站的内容及信息一目了然。导航分为：首页、作品展示、设计理念、企业策划、关于我们、联系我们。导航采用的是ul li 布局，然后再用a标签对其他相关网页进行链接，设计和操作上都非常简单。相 关代码如下：vli class=lefthref=index.html 首   页作品展示v/lia vlixa href=show.html设计理念v/li vlixa href=we nhua.htmlvlixa href=lia nxi.html效果图如下

43、：企业策划联系我们四、网站内页结构设计作品展示-support.html设计理念-about.html企业策划-blog.html联系我们-co ntact.html五、中间内容设计根据 浏览者在阅读时经常采用从上到下，从左到右的习惯，主体内容中，将“优秀网站案例”靠左边放，这样能更好地吸引浏览者的眼球，同时也体现公 司的专业、能力等。优秀网站案例采用网页图片切换的形式展现在首页中，使整ttrch. I瓦 20&| FdT b? Om*g | Til也打理夷贰它还鼻咅Eb豪菱X记f加危换少ME*且4|01煽屋闪EJfli* 同云-Mil KWS 3nJE Z啊w童孚nPX3BTI !IT* Z

44、 :碍冒許RWS护u=qw二 ilFiRD：益土肓鼻 皿!ft X：詈竄盅化乂孟t h工一-*4込肛3：M 审理1横淆工鼻”atBIU 1*T#3B3*-3-ter=*K第二节内页设计其他页面的导航和页面属性都是采用首页的导航和body属性。、设计理念设计理念界面展示了公司设计的理念，同时还附带了公司设计的一些行业案 例，让客户体会到本公司的专业。左边的链接为以后的编辑奠定基础。 效果图如 下图4.6所示：Menu在賓7芒鱼荐自然軽2J苗ETrifle.工昌走5 =泾时上攀丁垮岳The cooperation unit: 丁三肓三孟-一： = ： =M. . ；：* = _ 22：5 r =

45、=Works showText typesettingAbout2昊畀悪8砖旦1W. n 电怎仲4茧盂呼 址冠E西连廿曾甕工护專齐.ts. fka.工H5gng宣nE_LE亦事塔段痹七工.*ME：M*=W 甕汪 竝型驚址nJiJti耳可it 十具THtpMg甲6样雷冲总图4.6设计理念、作品展示作品展示模版可以介绍公司的特色，让游客更充分的了解公司、 公司业务所面向地方对象。左边列举了公司业务项目左边的链接为以后的编辑奠定基础。效果图如下图4.7所示：图4.7 作品展示The cooperation unitK帕F祜綁ft曲ST=5-三、企业文化此页面的的设计为左边是代表流程的图片， 右边详细

46、介绍了公司的企业文化等信息，让客户清晰的了解公司的文化，服务信息等等。效果图如下图4.8所示:TaMenu- T企业策划The cooperation unit上rT址匕奘WW 3UL X比全业矢丈褰才基禹育養性怛丸盘窑三三:二二- 三君三二 已:J三壬一勺席一 ?-rAaxft弧 叮全业總L克也只胡k 匪齐申誌慈豪肘垂磁.才蛇整僮3亦秀P.車弐宁呑杞年卓.丄一盖久三壬2弊戈尊衣弩、互弓三二、港曹窜M 一毎咗乞、A焙、尊進 丁弋衷舟于耳尋弓奎.结亠蝇爭一E寒七诅育託上書勿二芒圧岸話常咨.疏習客兽左克客汽的有畠毎七=-罢恭是三宠界 力空4CA鰹営塞T*、隹芝複亠、耳首沐 护基拒 宀，1 r*-.

47、阿竺富是當至工.r 0 r I*f v Am- r -rr t t4.8企业文化四、联系我们联系我们板块能实现交流的目的，让客户对公司的发展，公司的业务流程提 出宝贵的意见和建议，这样公司才能更好的为自己定位，才能根据客户提出的意 见来完善自身。联系我们页面主要介绍公司所在地、 公司联系电话、公司地图等 信息。网站的联系我们界面效果，如下图 4.10所示：CpintactMenuft琴一戸三：=：-The cooporation unitSc nd us mil图4.10联系我们第五章网站的测试编码完成后，就要对源程序进行测试。软件测试的目的在于争取在第一时间 发现程序中的错误，以便于及时纠错

48、，增加软件可靠性。它在整个系统设计实施 过程中占有相当的分量。测试是软件开发时期的最后一个阶段， 也是软件质量保 证中至关重要的一个环节。测试的目的是为了尽可能的发现程序中存在的错误， 其任务就是消除网站故 障，保证程序的可靠运行，最终把一个高质量的网站系统交给用户使用。 一般来说在每个模块完成之后就要对它作必要的测试， 这种测试被称为单元测试，模块 的测试者也就是编写者。编码和单元测试属于网站生命周期的同一阶段。这个阶 段结束之后，对网站系统还应该进行各种综合测试， 这是网站生命周期的另一个 独立的阶段，由专门的测试人员承担。在网页中的测试阶段主要是对网站进行浏览器兼容性测试。在网页测试的阶

49、段我分别安装了 IE8、火狐等浏览器，并且进行了逐个测试。在多次实践中或多 或少都遇到了不可调节的 DIV浮动问题，但是最后还是在老师的指导和书籍查 阅后，嵌入表格完成了页面设计，使页面在各个浏览器中显示正常。第六章后续工作本企业网站以前台静态 HTML为主，其中关键是描述 DIV+CSS在网页布局中 的妙用、巧用。但要真正的去完善一个网站，还需要更多的专业知识，比如说， 数据库、其他后台相关语言，网站的安全，网站的发布，日常维护和更新，等等 一系列问题，更是还有关于网站后台管理的拓展分布， 想要完成一个网站，每一 项必不可少的步骤。完成网站后，还要多网站进行整体优化和宣传推广，这样， 才能让网站增加人气和点击率。但是由于时间、精力和专业知识的关系。就把这 一系列事情归纳为后续工作。在以后的时间里不断的去学习、 摸索，然后慢慢的 去完善这个网站。28我的毕业设计快要结束了，我在学校的时间也就要划上结束符号， 这最后的 符号是问号、逗号或者感叹号再有几天也就有结果了。 我想在这大学的最