静态网页毕业论文word格式.doc

《静态网页毕业论文word格式.doc》由会员分享，可在线阅读，更多相关《静态网页毕业论文word格式.doc（40页珍藏版）》请在三一办公上搜索。

1、重庆邮电大学高等函授专科毕业设计（论文）设计（论文）题目： 创意设计类网站的设计与实现 入学年月 2011年3月 姓 名 张琴 学 号 11800229 专 业 计算机信息管理 所属科站 重庆新华电脑学校 指导教师 郑贤 完成日期 2012 年 6 月 20 日重庆邮电大学高等函授毕业设计（专科）任务书第1页/共2页姓名张琴学号11800229专业计算机信息管理所属站重庆新华电脑学校工作单位重庆新华电脑学校电话18223274487通信地址重庆沙坪坝凤鸣山8号E-mail地址452695214设计（或论文）题目创意设计类网站的设计与实现指导教师、指导教师组组长及成员姓名职 称工作单位及所从事专

2、业郑贤中级重庆新华电脑学校，网页设计专业方向、基本理论、技术要求及设计（论文）内容纲要专业方向： 网站开发基础理论：采用网站开发的思路进行设计，具体设计作品可根据自己搜集资料的详细程度来自行选择。技术要求：1、采用Windows 2000以上的操作系统，网页三剑客 + Photoshop + div+css开发；2、采用div+css布局和美化网页；设计内容：1、 整个网站风格定位及各页面布局设计。2、 网页整体图形的制作。3、 div+css布局。4、 网站测试与后期优化。论文内容：毕业论文要求论点突出、条理清楚、论据充分、内容实际、格式规范，所针对的题目应具有一定的广泛性和实用性，结论明确

3、。论文的内容纲要应符合以下要求：1、摘要：以浓缩的形式概括课题的内容，中文摘要在500字左右。 2、目录：目录按三级标题编制，要求标题层次清晰，题文一致。 3、正文：毕业论文正文包括前言、主体和结论。要求正文字数不少于10000字。正文主体部分应按照软件工程的思想进行论述。 4、结束语：对导师和给予指导或协助完成毕业论文（设计）工作的组织和个人表示感谢。文字要简捷、实事求是。5、参考文献：文献条目只要包括三个部分：作者、标题和出版信息。数量5-10本。6、附录：是一些不宜放在正文中，但有参考价值的内容。本人在该设计中具体完成的工作1.完成调研和资料收集。2.完成使用DIV+CSS布局信息宣传类

4、网站的分析，设计，实现和测试。3.完成论文的撰写。主要参考文献、资料：唐守国.创意+：Photoshop cs4网页设计、配色与特效案例精粹. 清华大学出版社，2010年项宇峰.HTML网络编程从入门到精通. 清华大学出版社，2006年要求完成报告书的时间：2012年5月15日审批意见 函授站 （盖章）年 月 日审批意见重邮成教院（盖章） 年 月 日注：第2页/共2页；本表由指导教师填写一式三份。重庆邮电大学高等函授毕业设计（专科）评定表姓 名张琴学号11800229专业计算机信息管理所属站重庆新华电脑学校设计（或论文）题目创意设计类网站的设计与实现毕业设计（或论文）的评语：指导教师（签名）

5、年 月 日备 注重庆邮电大学高等函授毕业设计(专科) 评阅意见表毕业论文题目创意设计类网站的设计与实现评 价 项 目得分选题质量01选题符合专业培养目标，体现综合训练基本要求选题综合得分（共10分）：02题目难易度03题目工作量04理论意义或实际价值能力水平05查阅文献资料能力能力水平综合得分（共50分）：06综合运用知识能力07研究方案的设计能力08研究方法和手段的运用能力成果质量09文题相符论文成果综合得分（共40分）：10写作水平11写作规范12篇幅评阅人评定成绩（共100分） 评阅人： 重庆邮电大学高等函授毕业设计成绩总评表姓名张琴学号11800229专业计算机信息管理所 属 站重庆新

6、华电脑学校设计（或论文）题目创意设计类网站的设计与实现毕业设计指导委员会意见： 根据毕业设计指导教师和评阅教师意见，经成人教育学院高等函授毕业设计指导委员会认真评定，该学员的毕业设计总评（四级评分制）成绩为： 毕业设计指导委员会主任： 年 月 日【摘要】 计算机和计算机网络的飞速发展，人们对计算机网络的依赖是越来越大。人们在网上聊天交友，在网上请教问题，查阅资料，还在网上听音乐。除此之外，人们还会在网上进行商务交易、下载信息，有着众多的使用者。尤其是电子商务大大的减少了人们对周围环境的依赖，无论是哪里的网友，都可以浏览到世界各地的各类信息，非常的方便，由于以上的优势，各类网站如雨后春笋般的出现

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

8、节 因特网和万维网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第一节 Dreamweaver8.011第一节Macromedia Flash 8.011第三节 Fireworks12第四节 JavaScript13第五节 Adobe Photoshop8.013第六节 DIV+CSS14

9、一、什么是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前 言当今世界已进入信息时代，Internet成为21世纪最受关注的行业之一,它的飞速发展和在全球范围的普及应用正

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

11、DIV+CSS在网页中的最用和魅力。本文实现了首页、设计理念、作品展示、企业策划、关于我们、联系我们等功能，系统符合公司网站的需求。论文组织如下：首先阐述了该网站的开发背景、意义，详细介绍了div+css理论知识；其次介绍了相关的开发工具及技术基础；接着对网站的需求进行了分析，并提出了具体的设计方案；然后展现了整个网站的具体实现，包括网页的设计和连接，各功能模块的实现；最后对该网站进行了严格的测试。第一章 网站设计环境介绍随着计算机应用的发展，网站已经是展现企业形象、介绍产品和服务、体现企业发展战略的重要途径。网页设计是科技与艺术的结合，是商业社会的产物。虽然网页设计也是平面设计中的一个方面，

12、但是网页设计有其独特的设计要求与原则，在设计网页之前要对其有所了解。第一节 因特网和万维网一、何为因特网大家可能对因特网（Internet）这个词不会感到陌生，因特网是由许许多多计算机连接在一起构成的一个计算机网络，在这个网络中，人们可以使用各自的计算机互相传递信息；可以在自己的计算机上存储文件供别人访问；可以利用多台计算机实现分布式应用。Internet规模庞大，遍及全球，一旦上网，你就与全球无以计数的计算机连成一体。二、何为万维网有上网经历的会知道，在浏览器的地址栏中经常出现“WWW”，比如要访问百度网站就需输入“WWW”。其中的三个“W”是英文World Wide Web的缩写，中文译为

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

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

15、在互联网中的漫游。超链接能使Web服务存在广泛和持久的生命力，超链接可以说是Web的灵魂。四、URLURL（Uniform Resource Locator的缩写），统一资源定位器。互联网中某种信息资源以某种方式存储在网络中的某处，必须用一个惟一的URL来进行标识，这样才能方便查找。对于Web来说，可以简单并通俗把URL理解为网址。每个Web网页都有自己的网址，在浏览器地址栏里输入网页的URL，就可以访问这个网页。例如，五、IP地址为了使互联网上的电脑主机在通信时能够相互识别，每台主机都分配一个能表示其位置的IP（Internet Protocol）地址，这如同公用电话网中电话的号码一样。IP

16、地址是由专门的互联网机构来分配。IP地址具有惟一性，是由32位二进制数组成，分为四组，每组8位，每组之间用小数点分隔，在实际之中常转换成十进制数表示。六、网页网页，是网站中的一页，通常是HTML格式（文件扩展名为.html或.htm或.asp或.aspx或.php或.jsp等）。网页通常用图像档来提供图画。网页要透过网页浏览器来阅读。 网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，您的网站就是由网页组成的。如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。 所谓网站(Website)，就是指在网际网路（因特网）上，根据一定的规则，使用HTML等工具制

17、作的用於展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯（信息），或者利用网站来提供相关的网路服务（网络服务）。人们可以通过网页浏览器来访问网站，获取自己需要的资讯（信息）或者享受网路服务。第三节 Web标准概述一、什么是Web标准Web标准是由W3C（World Wide Web Consortium）和其他标准化组织指定的一系列规范的集合，其中包含了（X）HTML、XML和CSS。Web标准的目的在于创建一个统一的用于Web表现层的技术标准，以便通过不同浏览器或终端设备向最终用户展示信息内容。二、Web的认识Web(Wor

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

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

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

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

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

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

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

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

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

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

28、公司。公司的详细信息，都将批注在网页上，好让顾客方便联系。在推销的同时更要注重企业的特色推广和服务信息等。 内部管理优化。网站的建设将会为企业内部的管理带来一种全新的模式。网站是实现这一模式的平台。在降低企业内部资源顺好、减低成本、加强企业员工与员工，企业与员工之间的联系和沟通等方面发挥巨大的作用，最终使企业的运营和运作打到最大的优化。第三章 技术支持第一节 Dreamweaver8.0Dreamweaver是创建和管理网页的专业化可视编辑器。使用Dreamweaver可以轻松创建跨平台、跨浏览器的页面。Macromedia的Roundtrip HTML技术允许用户随意导入HTML文档而无需重

29、新设置代码格式。Dreamweaver可以为用户做到：使用动态HTML功能（例如具有动态效果的层和行为）而不用写一行代码。它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。Dreamweaver还是一个可以完全自定义的应用程序。用户可以创建自己的对象和命令修改菜单和快捷键，甚至编写JavaScript代码扩展Dreamweaver的行为和属性检查器。至于Dreamweaver工作区是非常灵活的，因此它可以适应各种不同的工作风格和使用水平。常用的Dreamweaver工作区组件有以下若干种： 文档窗口可显示当前文档，文档的外观和浏览器中看到的非常相似。 装载器中包含一些打开

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

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

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

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

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

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

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

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

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

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

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

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

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

43、表现本身的风格的同时，在功能上使用户更加便利。网站的前台页面包括首页、设计理念、作品展示、企业文化、关于我们、联系我们等。第二节 首页页面设计有了基于准备之后的网站策划，就可以开始进行页面设计了，页面设计主要包括创意、色彩和版式三个方面。创意会使网页在众多的竞争对手中脱颖而出；色彩可以使网页获得生命的力量；板式则是和用户沟通的核心，所以这三者缺一不可。一般的网站都需要这样一些版块站名称（logo）、广告区，导航区、新闻区、友情链接和版权等版块。这些版块又可以称之为模块。选择哪些模块，实现哪些功能是否需要添加其他模块都是首页设计制作时首先需要确定的，下面我们就开始具体的首页设计制作工作。一、结构分析根据需求可以知道，在页面上部要有logo和导航，接下来使banner，中间部分的左侧显示若干次要的栏目，右侧则显示部分文章的内容及作品展示，页面最底端为页脚区域，显示一些版权信息。很明显可以用四行两列的布局方式来安排页面内容。如下图：图 4.1 页面布局安排二、风格定位打开一个网站，给用户留下第一印象的既不是网站丰富的内容，也不是网站合理的版面布局，而是网站的色彩。色彩对人的视觉效果非常明显，一个网站设计成功与否，在某种程度上取决于设计者对色彩