《创意设计类网站的设计与实现毕业设计》

1、重庆邮电大学高等函授毕业设计专科任务书第1页/共2页姓名学号专业计算机信息管理所属站重庆新华电脑学校工作单位重庆新华电脑学校 通信地址重庆沙坪坝凤鸣山8号E-mail地址设计或论文题目创意设计类网站的设计与实现指导教师、指导教师组组长及成员姓名职 称工作单位及所从事专业中级重庆新华电脑学校，网页设计专业方向、根本理论、技术要求及设计论文内容纲要专业方向： 网站开发根底理论：采用网站开发的思路进行设计，具体设计作品可根据自己搜集资料的详细程度来自行选择。技术要求：1、采用Windows 2000以上的操作系统，网页三剑客 + Photoshop + div+css开发；2、采用div+css布局

2、和美化网页；设计内容：1、 整个网站风格定位及各页面布局设计。2、 网页整体图形的制作。3、 div+css布局。4、 网站测试与后期优化。论文内容：毕业论文要求论点突出、条理清楚、论据充分、内容实际、格式标准，所针对的题目应具有一定的广泛性和实用性，结论明确。论文的内容纲要应符合以下要求：1、摘要：以浓缩的形式概括课题的内容，中文摘要在500字左右。 2、目录：目录按三级标题编制，要求标题层次清晰，题文一致。 3、正文：毕业论文正文包括前言、主体和结论。要求正文字数不少于10000字。正文主体局部应按照软件工程的思想进行论述。 4、结束语：对导师和给予指导或协助完成毕业论文设计工作的组织和个

3、人表示感谢。文字要简捷、实事求是。5、参考文献：文献条目只要包括三个局部：作者、标题和出版信息。数量5-10本。6、附录：是一些不宜放在正文中，但有参考价值的内容。本人在该设计中具体完成的工作1.完成调研和资料收集。2.完成使用DIV+CSS布局信息宣传类网站的分析，设计，实现和测试。3.完成论文的撰写。主要参考文献、资料：唐守国.?创意+：Photoshop cs4网页设计、配色与特效案例精粹?. 清华大学出版社，2021年项宇峰.?HTML网络编程从入门到精通?. 清华大学出版社，2006年要求完成报告书的时间：2021年5月15日审批意见 函授站 盖章年 月 日审批意见重邮成教院盖章 年

4、 月 日注：第2页/共2页；本表由指导教师填写一式三份。重庆邮电大学高等函授毕业设计专科评定表姓 名学号专业计算机信息管理所属站重庆新华电脑学校设计或论文题目创意设计类网站的设计与实现毕业设计或论文的评语：指导教师签名 年 月 日备 注重庆邮电大学高等函授毕业设计(专科) 评阅意见表毕业论文题目创意设计类网站的设计与实现评 价 项 目得分选题质量01选题符合专业培养目标，表达综合训练根本要求选题综合得分共10分：02题目难易度03题目工作量04理论意义或实际价值能力水平05查阅文献资料能力能力水平综合得分共50分：06综合运用知识能力07研究方案的设计能力08研究方法和手段的运用能力成果质量0

5、9文题相符论文成果综合得分共40分：10写作水平11写作标准12篇幅评阅人评定成绩共100分 评阅人： 重庆邮电大学高等函授毕业设计成绩总评表姓名学号专业计算机信息管理所 属 站重庆新华电脑学校设计或论文题目创意设计类网站的设计与实现毕业设计指导委员会意见： 根据毕业设计指导教师和评阅教师意见，经成人教育学院高等函授毕业设计指导委员会认真评定，该学员的毕业设计总评四级评分制成绩为： 毕业设计指导委员会主任： 年 月 日【摘要】 计算机和计算机网络的飞速开展，人们对计算机网络的依赖是越来越大。人们在网上聊天交友，在网上请教问题，查阅资料，还在网上听音乐。除此之外，人们还会在网上进行商务交易、下载

6、信息，有着众多的使用者。尤其是电子商务大大的减少了人们对周围环境的依赖，无论是哪里的网友，都可以浏览到世界各地的各类信息，非常的方便，由于以上的优势，各类网站如雨后春笋般的出现，企业网站也不例外。而Web设计的健康开展依靠web标准的采用，没有web标准就不会有真正的可访问性和连贯的设计。不用web标准，就跟不上时代。在这样的标准时代，我们需要网页更加容易扩展，适合自动数据交换，并且更加规整。而css，那么实现了页面内容与样式别离。鉴于web标准，本论文着重对div+css布局与美化公司网页进行了讨论；同时根据客户需求，采用div+css实现了咨询公司网页的设计，具体实现了首页、设计理念、作品

7、展示、企业文化、关于我们、联系我们等功能，系统符合公司网站的需求。【关键词】企业网站 网页设计 div css Dreamweaver目 录前 言1第一章 网站设计环境介绍2第一节 因特网和万维网2一、何为因特网2二、何为万维网2第二节 相关术语解释3一、Internet3二、站点3三、超链接3四、URL3五、IP地址4六、网页4第三节 Web标准概述4一、什么是Web标准4二、Web的认识5三、Web文档的三层结构5四、Web标准的优势6第四节 Web设计技术7一、HTML7二、CSS7第五节 浏览器8第二章 网站需求分析9第三章 技术支持11第一节11第一节11第三节 Fireworks1

8、2第四节 JavaScript13第五节13第六节 DIV+CSS14一、什么是div14二、什么是CSS14三、何为样式14四、何为层叠15五、DIV+CSS简介15第四章 创意设计网的设计16第一节 从功能分析开始16第二节 首页页面设计16一、结构分析17二、风格定位18三、页头设计18四、公司简介及banner设计19五、中间内容设计19六、页脚20第三节 内页设计21一、设计理念21二、作品展示22三、企业文化23四、关于我们24五、联系我们25第五章 网站的测试27第六章 后续工作28结 论29结束语30参考文献31附 录：网站效果图32前 言当今世界已进入信息时代，Interne

9、t成为21世纪最受关注的行业之一,它的飞速开展和在全球范围的普及应用正在给人类生活带来革命性变化。网络技术的开展也取得了巨大的成就，为网站开发提供了很好的技术支持。网站已经成为现阶段众多企业不可或缺的网络营销平台，互联网应用规模正在不断扩大。其中，特别是中小型企业，对于网络平台搭建的需求相当的迫切。各大门户网，企业网都在WEB2.0的标准上,采用div+css来布局，因此有了此次的选题。论文详细论述了一个基于公司网站开发的设计过程。在技术上，采用了 Dreamweaver网站开发工具，以 HTML的超大功能结合 JavaScript 的客户端语言，这样的构造有利于以后对网站系统开发的把握，并为

10、以后的开发积累了一定的经验，提升编程能力。其中，最主要的就是介绍和展示DIV+CSS在网页中的最用和魅力。本文实现了首页、设计理念、作品展示、企业筹划、关于我们、联系我们等功能，系统符合公司网站的需求。论文组织如下：首先阐述了该网站的开发背景、意义，详细介绍了div+css理论知识；其次介绍了相关的开发工具及技术根底；接着对网站的需求进行了分析，并提出了具体的设计方案；然后展现了整个网站的具体实现，包括网页的设计和连接，各功能模块的实现；最后对该网站进行了严格的测试。第一章 网站设计环境介绍随着计算机应用的开展，网站已经是展现企业形象、介绍产品和效劳、表达企业开展战略的重要途径。网页设计是科技

11、与艺术的结合，是商业社会的产物。虽然网页设计也是平面设计中的一个方面，但是网页设计有其独特的设计要求与原那么，在设计网页之前要对其有所了解。第一节 因特网和万维网一、何为因特网大家可能对因特网Internet这个词不会感到陌生，因特网是由许许多多计算机连接在一起构成的一个计算机网络，在这个网络中，人们可以使用各自的计算机互相传递信息；可以在自己的计算机上存储文件供别人访问；可以利用多台计算机实现分布式应用。Internet规模庞大，普及全球，一旦上网，你就与全球无以计数的计算机连成一体。二、何为万维网有上网经历的会知道，在浏览器的地址栏中经常出现“WWW，比方要访问百度网站就需输入“。其中的三

12、个“W是英文World Wide Web的缩写，中文译为万维网。万维网是无数个网络站点和网页的集合，它们在一起构成了因特网最主要的局部因特网还包括电子邮件、Usenet以及新闻组等应用。万维网实际上是多媒体的集合，各个局部由超级链接连接而成。我们通常使用浏览器上网观看的内容，就是万维网的内容。比方在浏览器中输入“,就可以访问新浪网站的首页。网页也称作Web页面或Web文档，它包含了文字、图像、动画和一些具有交互功能的控件。第二节 相关术语解释一、InternetInternet(英特网)诞生于上世纪60年代，开展非常慢，到90年代才开始迅速开展。现在英特网已经是世界上最大的网络的，联在英特网上

13、的电脑有数亿台。上面的资料、信息数不胜数，所以有人把英特网叫成是信息的海洋、知识的海洋。二、站点所谓站点，就是将网页文件和素材文件，有条理地放置站点文件夹里，这些文件与文件夹就构成了网站的实质内容。站点文件夹里除了网页文件还有素材文件，所谓素材就是网页中所用到的图像、声音、视频等，这些内容是以单独文件的形式存在。三、超链接我们在浏览网页时，当鼠标指针指向某段文本或是某个图像，鼠标指针变成小手状，单击鼠标可以翻开其他的网页或是跳转到其他的网站，这就是超链接。采用超链接技术可以将不同的网站、网站中的不同网页、网页中的不同位置彼此串在一起，实现相互间的跳转，方便信息的浏览和查找。人们通过超链接可以很

14、方便很迅速地访问分布于全球计算机上的海量资源，实现在互联网中的漫游。超链接能使Web效劳存在广泛和持久的生命力，超链接可以说是Web的灵魂。四、URLURLUniform Resource Locator的缩写，统一资源定位器。互联网中某种信息资源以某种方式存储在网络中的某处，必须用一个惟一的URL来进行标识，这样才能方便查找。对于Web来说，可以简单并通俗把URL理解为网址。每个Web网页都有自己的网址，在浏览器地址栏里输入网页的URL，就可以访问这个网页。例如， :/ sina /index.html，其意思就是采用 超文本传输协议访问新浪网的首页，由于网页均是通过 超文本传输协议进行访问

15、，默认下，“ :/可以省略不输。五、IP地址为了使互联网上的电脑主机在通信时能够相互识别，每台主机都分配一个能表示其位置的IPInternet Protocol地址，这如同公用 网中 的号码一样。IP地址是由专门的互联网机构来分配。IP地址具有惟一性，是由32位二进制数组成，分为四组，每组8位，每组之间用小数点分隔，在实际之中常转换成十进制数表示。六、网页网页，是网站中的一页，通常是HTML格式文件扩展名为.html或.htm或.asp或.aspx或.php或.jsp等。网页通常用图像档来提供图画。网页要透过网页浏览器来阅读。 网页是构成网站的根本元素，是承载各种网站应用的平台。通俗的说，您的

16、网站就是由网页组成的。如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。 所谓网站(Website)，就是指在网际网路因特网上，根据一定的规那么，使用HTML等工具制作的用於展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯信息，或者利用网站来提供相关的网路效劳网络效劳。人们可以通过网页浏览器来访问网站，获取自己需要的资讯信息或者享受网路效劳。第三节 Web标准概述一、什么是Web标准Web标准是由W3CWorld Wide Web Consortium和其他标准化组织指定的一系列标准的集合，其中包含

17、了XHTML、XML和CSS。Web标准的目的在于创立一个统一的用于Web表现层的技术标准，以便通过不同浏览器或终端设备向最终用户展示信息内容。二、Web的认识Web(World Wide Web，简称WWW，又称万维网)是目前Internet上应用最广泛也是最重要的信息效劳类型，它已经影响了Internet上的广告、新闻、电子商务和展示信息等各个效劳领域。 Web采用浏6hy览器/效劳器B/S工作模式，其运作模式可以描述为：请求处理应答。Web以超文本标记语言HTML(Hyper Text Markup Language)与超文本传输协议 (Hyper Text Transfer Proto

18、col)为根底，通过浏览器为用户提供方便友好的信息浏览界面。 Web将位于全世界互联网上不同网址的相关信息有机地编织在一起。在Web效劳方式中，信息以页面或称Web页的形式存储在Web效劳器中，这些页面采用超文本的方式对信息进行组织，通过链接将一页信息链接到另一页信息。这些相互链接的页面既可以放置在同一台主机上，也可以放置在不同的主机上。页面到页面的链接信息由统一资源定位器URL(Uniform Resource Locator)维持。用户通过客户端应用程序即浏览器向Web效劳器发出请求，效劳器根据客户端的请求将保存在效劳器中的某个页面返回给客户端，浏览器接收到页面后对其进行解释，最终将信息以

19、图、文、声并茂的形式呈现给用户。 Web效劳的特点在于高度的集成性，它能够实现不同类型的信息如文本、图像、声音、动画和视频等和效劳如New、FTP、Telnet、Gopher及Mail等的无缝链接，特别适合于广域网中信息的组织、检索与显示。三、Web文档的三层结构Web文档通常包含三个不同的层次见图1.1。首先是结构层，该层的内容是由XHTML编写的文本文档。它包含文档的内容，以及由XHTML添加的语义化的标记。第二层为表现层，该层内容是CSS样式代码。它描述了文档该以何种样式呈现在访问者面前，样式包括页面各局部的布局、文字段落排版、背景图片和颜色等。第三层是行为层，该层定义了文档模型以及如何

20、与客户进行交互，所涉及技术主要是DOM以及ECMAScript脚本语言。图1.1 结构、表现和行为及各局部所涉及的技术四、Web标准的优势1、易于开发和维护一个大型的网站往往需要很多人员的参与，他们的分工也不同，有负责样式设计的，有负责页面编码的，有负责样式编写的等。由于内容结构和表现的别离，不同开发人员可以独立工作，专注于自己负责的内容。样式信息和内容是相互独立的，因此同一个样式信息可用于不同的内容中，从而实现代码重用。这种做法可用减少重复编码，加快开发进度。样式信息重用也使得维护工作大大减轻，只需要修改一小局部样式代码，就可以使所有用到该样式的区域同时改变外观。2、高兼容性由于W3C对We

21、b标准的推动，越来越多的浏览器支持由W3C制定的各种标准，从而使得根据标准编写的Web页面在不同的浏览器中均能获得一致的效果。3、高灵活性现在，越来越多的人使用 或PDA访问网站，通常这些设备的屏幕要远远小于PC机的显示器。网页的内容和表现的别离使得我们可以针对不同平台和设备应用不同的样式文件，而网页内容无须改动。对于需要打印输出的页面，我们也无须再提供另一份“适合打印的页面，取而代之的只是新的CSS样式。4、提高访问速度内容与表现的别离，使得页面中不再包含冗余的样式代码，而独立出来的样式表可以充分地进行重用，网页整体代码量大大减少。这样不仅能占用更少的网络带宽，提高页面载入速度，同时浏览器也

22、能对页面进行快速解析，显示给用户。5、提高用户体验从Web应用的角度看，用户体验User Experience,UE指的是Web应用程序能够提供直观简洁的用户界面、简便的操作以及有效的交互方式。只有当用户亲自使用时才能体验带它们。用户体验包含了多方面的内容，其中一致性、可用性等方面均通过标准化开发来实现。比方各个页面使用统一的样式，利用行为层技术改善交互设计等。第四节 Web设计技术Web设计涵盖的范围相当广，本节只介绍一些构建Web文档所需的几项最根本的技术。一、HTMLHTML，英文全成为 HyperText Markup Language，中文译为超文版标记语言。它是用来创立Web文档的

23、语言。页面元素是由特定的标记来确定的，这些标记告诉浏览器该如何显示这个页面。所谓超文本，就是一种含有指向其他文档链接的文本，即我们俗称的链接。超文本把存放于不同计算机中的文档链接在一起。访问者不必关心链接所指的内容到底位于何处，只需要在链接上单击一下鼠标，页面马上转到所指的文档中去。二、CSSHTML可以将内容、结构和格式化的信息都包含在同一个Web文档中，这样做虽然简单易行，但也存在很多问题。各种信息存放在一起不利于文档的维护，修改起来费时费力。因此HTML应只负责文档的内容和结构，而格式化信息交给一套新的语言来完成，这就是CSS，它也是本论文的主角。CSS全称为Cascading Styl

24、e Sheet，中文译为层叠样式表也有译作级联样式表的。其作用就是要控制HTML的页面布局和外观样式，使Web文档内容结构和表现形式完全别离。第五节 浏览器网页和浏览器是分不开的，用户正是通过浏览器来到达访问网页的目的。浏览器Browser是一种软件程序，可以和网络建立连接并与之通信。它可以将存在于万维网中的特定网页获取下来，对网页中的内容进行分析，并按照一定的规那么显示出来。目前主浏览器有： Internet Explorer 1995年微软公司推出并与Windows 95操作系统进行捆绑销售。 Mozilla Firefox 由Mozilla基金会与数百个自愿者开发的网页浏览器。 Oper

25、a Opera Software 开发的Opera :/ opera 浏览器是一款适用于各种平台、操作系统和嵌入式网络产品的高品质、多平台产品。第二章 网站需求分析网站是企业向用户和网民提供信息的一种方式，是企业开展电子商务的根底设施和信息平台。企业的网址被称为“网络商标，也是企业无形资产的组成局部，而网站那么是反映企业形象和文化的重要窗口。在建站的可行性分析方面，设计中，我主要针对已经确定的需求和目标，研究网站建设的社会环境、市场等可行性、技术可行性，经济可行性以及开发人员等问题。在IT行业迅速开展的今天,企业网站的建设已经成为一个企业开展必不可少的存在。对于创意设计来说，我们将建立一个以宣

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

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

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

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

30、且能很好地适应浏览者不同尺寸的屏幕。Flash 的交互性的大局部设置就在 Action 和 Fs Command 里，通过对 Action 和 Fs Command 的设置，你可以随意的设置各事件发生的效果，还有对变量及函数的设置。第三节 FireworksAdobe Fireworks可以加速 Web 设计与开发，是一款创立与优化 Web 图像和快速构建网站与 Web 界面原型的理想工具。Fireworks不仅具备编辑矢量图形与位图图像的灵活性， 还提供了一个预先构建资源的公用库, 并可与 Adobe Photoshop、Adobe Dreamweaver和Adobe Flash软件省时集成

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

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

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

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

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

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

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

38、位方式,真正地到达了w3c内容与表现相别离。HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。XHTML语言是一种可以将HTML语言标准化，用XHTML语言重写后的HTML页面可以应用许多XML应用技术。使得网页更加容易扩展，适合自动数据交换，并且更加规整。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。以下是DIV+CSS的特点简介： 符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。 支持浏览器的向后兼容，也就是无论未来的浏览器大

39、战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。 搜索引擎更加友好。相对与传统的table, 采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。 样式的调整更加方便。内容和样式的别离，使页面和样式的调整变得更加方便。 现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。 CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。 表现和结构别离，在团队开发中更容易分工合作而减少相互关联性。第四章 创意设计网的设计有了网站设

40、计的根底，企业网站的需求，技术的支持，一级级前面素材等一系列的准备之后可以开始设计一个网站了，下面就与大家分享我设计的创意设计网。第一节 从功能分析开始将要做的是一个公司网站，该公司专为客户做网站设计的，因此建设网站的目的主要有两个：一是使浏览者或潜在的客户迅速了解公司大局部已经完成或正在进行的工程及相关的资料，这就要求网站的文字要简练，尽量减少大篇幅的文字表达，工程效果图要精彩，当然网页的页面效果也要漂亮，以使浏览者或潜在的客户感觉到公司的设计水平高；二是使浏览者或潜在的客户迅速了解公司对业务的一般操作流程，以便能够与公司方便快捷地进行联系和沟通，减少不必要的中间环节及由此带来的麻烦。建立公

41、司网站要有一个清晰的网站布局。比方说，导航条要不要？很多人说那东西人人在做，就显得太俗没个性，难显示出新潮。但导航条之所以有那么多人在用，是因为它给浏览者一个明确的布局，便利人们查找本身所需的信息。从某种角度上说，大家都在用的东西就说明它确实被大家所接受。要清楚网站做出来是给每一个人普通用户看的。网站还要经常更新，给人以新意。设计技术的成长，带来了网页世界的繁荣。尤其在崇尚个性的今天，设计者们更是将页面设计表示的淋漓尽致。用户欣喜的看到那些僵化的设计模式正在被逐个打破，网页设计充满了朝气。但是，作为网页设计者，不能一味的只追求个性的表现，还必需兼顾到用户和客户的习惯，在表现本身的风格的同时，在

42、功能上使用户更加便利。网站的前台页面包括首页、设计理念、作品展示、企业文化、关于我们、联系我们等。第二节 首页页面设计有了基于准备之后的网站筹划，就可以开始进行页面设计了，页面设计主要包括创意、色彩和版式三个方面。创意会使网页在众多的竞争对手中脱颖而出；色彩可以使网页获得生命的力量；板式那么是和用户沟通的核心，所以这三者缺一不可。一般的网站都需要这样一些版块站名称logo、广告区，导航区、新闻区、友情链接和版权等版块。这些版块又可以称之为模块。选择哪些模块，实现哪些功能是否需要添加其他模块都是首页设计制作时首先需要确定的，下面我们就开始具体的首页设计制作工作。一、结构分析根据需求可以知道，在页

43、面上部要有logo和导航，接下来使banner，中间局部的左侧显示假设干次要的栏目，右侧那么显示局部文章的内容及作品展示，页面最底端为页脚区域，显示一些版权信息。很明显可以用四行两列的布局方式来安排页面内容。如下列图：图 4.1 页面布局安排二、风格定位翻开一个网站，给用户留下第一印象的既不是网站丰富的内容，也不是网站合理的版面布局，而是网站的色彩。色彩对人的视觉效果非常明显，一个网站设计成功与否，在某种程度上取决于设计者对色彩的运用和搭配。因为网页设计属于一种平面效果设计，在排除立体图形、动画效果之外，在平面图上，色彩的冲击力是最强的，它很容易给用户留下深刻的印象。因此，在设计网页时，必须要

44、高度重视色彩的搭配。本网站的搭配主色为：白、淡蓝、黑、三种颜色。白色代表纯洁、纯真、朴素、神圣、明快。淡蓝色代表热情、活泼、热闹、温暖、幸福、桔祥。黑色代表崇高、坚实、严肃、刚健、端庄，充分代表了一个企业应有的气质和形象。给客户留下深刻的印象。三、页头设计网站的页头主要分为两个局部。一是Logo，logo使一张准备好的图片，直接放置在头部容器左侧，调整好位置；二是导航条，网站导航条因为有立体感效果，因此它需要脱离文本流，因此在控制样式的时候要用定位，相对于文本流的定位。网站的导航栏目可以让用户对网站的内容及信息一目了然。导航分为：首页、作品展示、设计理念、企业筹划、关于我们、联系我们。导航采用

45、的是ul li布局，然后再用a标签对其他相关网页进行链接，设计和操作上都非常简单。相关代码如下： 首  页 设计理念 作品展示 企业文化 关于我们 联系我们 四、公司简介及banner设计Banner可以说是企业网页中一道美丽的风景线。网页中的banner信息代表着一个企业的素质和形象，所以应该表现的大气、端庄而且精细。还更要表现出一个企业应该有的朝气和活力。因此banner图片加文字说明成为首选。实例展示从侧面让客户了解到公司的实力。在首页的版面，先是用Photoshop对网站模板进行切片，然后用DIV+CSS进行排版。图 4.2 banner五、中间内容设计根据 浏览者

46、在阅读时经常采用从上到下，从左到右的习惯，主体内容中，将“优秀网站案例靠左边放，这样能更好地吸引浏览者的眼球，同时也表达公司的专业、能力等。优秀网站案例采用网页图片切换的形式展现在首页中，使整个首页处于于静于动的画面。右边那么是创意设计公司的设计理念。图 4.3 中间局部六、页脚 页脚用.foot 在里面嵌套表格排列，左面是其他友情链接等等，右面是法律条款和网站的版权属于本公司等,.foot 高17像素，宽935像素。由于浏览器的兼容性问题，为了使四个DIV能居中对齐，在网页中用了margin:0 auto来实现。图 4.4 底部版权图图 4.5 首页整体图第三节 内页设计其他页面的导航和页面

47、属性都是采用首页的导航和body属性。一、设计理念设计理念界面展示了公司设计的理念，同时还附带了公司设计的一些行业案例，让客户体会到本公司的专业。左边的链接为以后的编辑奠定根底。效果图如下列图4.6所示：图4.6 设计理念二、作品展示作品展示模版可以介绍公司的特色，让游客更充分的了解公司、公司业务所面向地方对象。左边列举了公司业务工程，左边的链接为以后的编辑奠定根底。效果图如下列图4.7所示：图4.7 作品展示三、企业文化此页面的的设计为左边是代表流程的图片，右边详细介绍了公司的企业文化等信息，让客户清晰的了解公司的文化，效劳信息等等。效果图如下列图4.8所示：图 4.8 企业文化四、关于我们

48、关于我们页面用来展示最近公司所接受业务的进程让，如此才能让客户更放心。网页中给出了公司的设计流程图、公司的营业资格证等，让客户对本公司的能力更认可。效果图如下4.9图所示：五、联系我们联系我们板块能实现交流的目的，让客户对公司的开展，公司的业务流程提出珍贵的意见和建议，这样公司才能更好的为自己定位，才能根据客户提出的意见来完善自身。联系我们页面lianxi.html，主要介绍公司所在地、公司联系 、公司地图等信息。网站的联系我们界面效果，如下列图4.10所示：图4.10 联系我们第五章 网站的测试编码完成后，就要对源程序进行测试。软件测试的目的在于争取在第一时间发现程序中的错误，以便于及时纠错

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