网站界面设计类.docx

毕 业 论 文（设计）题 目 基于DIV+CSS的XXX企业 网站界面设计 指导老师 钱丽丹 专业班级 软件技术20111 姓 名 张梦琪 学 号 20112030109 2014 年 05 月 30 日浙江经贸职业技术学院毕业论文(设计)摘 要：计算机和计算机网络的飞速发展，人们对计算机网络的依赖是越来越大。本文就雪音网络科技官网的规划于建设，以软件工程的方法对过程经行了分析与研究。本文的主要工作集中在：对web页进行概述，主要是对Internet的历史和发展作了回顾，在web页的定义而后特性上进行阐述。而Web设计的健康发展依靠web标准的采用，没有web标准就不会有真正的可访问性和连贯的设计。不用web标准，就跟不上时代。在这样的标准时代，我们需要网页更加容易扩展，适合自动数据交换，并且更加规整。而css，则实现了页面内容与样式分离。鉴于web标准，本论文着重对div+css布局我公司网页进行了讨论。并对网站开发过程中使用的开发工具和技术作了简要的介绍。对网站建设中提及到术语经行了解释，并对个人网站的由来和发展经行了讨论；对自己的个人网站从规划建设经行了详细的分析；使用Dreameaver、HBuilder、photoshop等技术实现了个人网站的各种功能并且就网站建设提出了自己的观点与建议。关键词：网页设计；CSS+DIV；Dreamweaver；HBuilder；Photoshop；个人网站第3页目 录前 言11网站开发背景11.1 web概述11.1.1 认识WEB11.1.2 认识WEB2.0标准21.2 可行性分析42 DIV+CSS详解42.1 DIV+CSS简介42.2 级联样式表简介52.3 DIV+CSS布局的优点52.3.1 利于搜索引擎蜘蛛爬行52.3.2 易于修改62.3.3 减少网页加载时间62.3.4 代码精简62.3.5 相对表格的嵌套问题62.3.6 搜索排名的影响72.4 div+css布局方式72.5 div+css理论概述82.5.1 理解CSS盒子模型82.5.2 转变思路92.5.3 实现结构与表现分离92.6 div+css的兼容性问题92.6.1 div的垂直居中问题92.6.2 margin加倍的问题92.6.3浮动ie产生的双倍距离92.6.4 IE与宽度和高度的问题102.6.5 页面的最小宽度102.6.6 DIV浮动IE文本产生3象素的bug102.6.7 IE捉迷藏的问题102.6.8 IE6下为什么图片下有空隙产生103 开发工具的介绍113.1 梦幻网页的编织者Dreamweaver113.2 图形、图像编辑设计软件制作软件Adobe Photoshop cs2114 网站总体分析和设计124.1 网站开发的需求分析124.2 网站的总体设计134.3 整体风格设计154.3.1 页面属性设计154.3.2 色彩搭配164.3.3 连接效果164.3.4 导航设计174.3.5 细节设计174.4 首页设计174.4.1 DIV分布和概述174.4.2 搜索关键字与描述194.5 其他页面设计195 网站的测试23结 论24致谢24前 言当今世界已进入信息时代，Internet成为21世纪最受关注的行业之一,它的飞速发展和在全球范围的普及应用正在给人类生活带来革命性变化。网络技术的发展也取得了巨大的成就，为网站开发提供了很好的技术支持。网站已经成为现阶段众多企业不可或缺的网络营销平台，互联网应用规模正不断扩大。其中，特别是中小型企业，对于网络平台搭建的需要求相当的迫切。各大门户网，企业网都在WEB2.0的标准上,采用CSS+DIV来布局网站，所以才有了此次的选题。论文详细论述了一个基于公司网站的开发的设计过程。在技术上，采用了 Dreamweaver网站开发工具，以 HTML的超大功能结合 JAVAScript 的客户端语言，并加以 FLASH 等动画以增加网站的动态效果。这样的构造有利于以后对网站系统开发的把握，并给以后的开发积累一定的经验，提升编程能力。其中，最主要的就是介绍和展示DIV+CSS在网页中的最用和魅力。本文实现了首页、新闻、案例、介绍、联系、搜索、留言、联系我们、等功能，全面化个人网站的需求。论文组织如下：首先阐述了该系统的开发背景、意义，详细介绍了div+css理论知识；其次介绍了相关的开发工具及技术基础；接着对网站的需求进行了分析，并提出了具体的设计方案；然后展现了整个系统的具体实现，包括网页的设计和连接，各功能模块的实现；最后对该网站进行了严格的测试。1网站开发背景1.1 web概述1.1.1 认识WEBweb本意是蜘蛛网和网的意思。现广泛译作网络、互联网等技术领域。表现为三种形式，即超文本（hypertext）、超媒体（hypermedia）、超文本传输协议（HTTP）等。Web(World Wide Web，简称WWW，又称万维网)是目前Internet上应用最广泛也是最重要的信息服务类型，它的影响已经进入了Internet上的广告、新闻、电子商务和展示信息等各个服务领域。 Web采用浏览器/服务器（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等）的无缝链接，特别适合于广域网中信息的组织、检索与显示。1.1.2 认识WEB2.0标准“Web 2.0”的概念开始于一个会议中，展开于OReilly公司和MediaLive国际公司之间的头脑风暴部分。所谓互联网先驱和OReilly公司副总裁的戴尔多尔蒂(Dale Dougherty)注意到，同所谓的“崩溃”迥然不同，互联网比其他任何时候都更重要，令人激动的新应用程序和网站正在以令人惊讶的规律性涌现出来。更重要的是，那些幸免于当初网络泡沫的公司，看起来有一些共同之处。那么会不会是互联网公司那场泡沫的破灭标志了互联网的一种转折，以至于呼吁“Web 2.0”的行动有了意义？我们都认同这种观点，Web 2.0会议由此诞生。WEB 标准不是某一个标准，而是一系列的标准集合，网页主要是由三部分组成：结构（structure）、表现（presentation）、和行为（behavior）。对应的标准也分为三个方面：结构化标准语言主要包括 XHTML和XML ，表现标准语言主要包括CSS，行为标准主要包括对象模型（如 W3CDOM）、ECMAScripr等。这些标准大部分由W3C起草和发布， 也有一些是其他标准组织制订的标准， 比如 ECMA (European computer Manufacturers Asscoiation) 的 ECMASscript 标准。 我们来简单了解下这些标准：一、结构标准语言XML 是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0，参考WWW.W3.ORG/TR/2000/REC-XML-30001006。和xthml一样，xml 同样是来源于SGML，但是xml是一种能定义其他语言的语。xml 最初设计的目的是弥补html的不足，以强大的扩展性妈祖网络信息发布的需要，够来逐渐用于网络数据的转换和描述。关于xml 的好处和技术规范描写，这里就不说了有更多的数据可供参考。xhtml是 The Extensible Hapertext Markup Language 可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日发布的XthML1.0 ，xml 虽然是数据转换的能力强大，完全可以替代HTML，但是面对成千上万的已有的站点，直接串通XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了xhtml 。简单的说，建立xhtml的目的就是实现XHTML向xml的过渡。二、表现标准语言CSS是 Caseading Style Sheets 层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2。W3C创建CSS标准的目的是以CSS取代表格式布局、帧和其它表现的语言。纯CSS布局与结构式xhtml结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。三、行为标准(1)DOMDOM 是 Document Object Model 文档对象模型的缩写。根据 W3C 规范/dom/,DOM是一种浏览器，平台，语言的借口，使得你可以访问页面其它的标准组件。简单的理解，DOM解决了 Netscaped 的Javascript和Microsoft 的 Jscript 之间的冲突，给予web 设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对象。(2)ECMAScriptECMAScript是ECMA（European Computer Manufacturers Association) 制订的标准脚本语言JAVAScript。目前推荐遵循的是 ECMAScript 262。CSS是Caseading Style Sheets 的简称。实际上它是一组样式。我们对CSS样式并不陌生，在网上冲浪时，几乎随时都在与CSS打交道，在网页上没有使用过CSS的网页可能不好找，不管你用什么工具软件制作网页，都在有意无意的使用CSS。用好CSS能使你的网页更加的简练，为什么同样内容的网页，有的人能做出及时KB，而高手做出来的只有十几KB，CSS在其中的作用是不言而喻的。1.2 可行性分析*2 DIV+CSS详解2.1 DIV+CSS简介CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或 XML 等文件式样的计算机语言。DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式,真正地达到了w3c内容与表现相分离。HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。XHTML语言是一种可以将HTML语言标准化，用XHTML语言重写后的HTML页面可以应用许多XML应用技术。使得网页更加容易扩展，适合自动数据交换，并且更加规整。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。以下是DIV+CSS的特点简介： 符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。 支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。 搜索引擎更加友好。相对与传统的table, 采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。 样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。 现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。 CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。 表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。2.2 级联样式表简介有三种方法可以在站点网页上使用样式表：将网页链接到外部样式表。 在网页上创建嵌入的样式表。 应用内嵌样式到各个网页元素。 每一种方法均有其优缺点： 当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表 中作一次更改 而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以 .css 做为文件扩展名，例如 Mystyles.css。 当人们只是要定义当前网页的样式，可使用嵌入的样式表。嵌入的样式表是一种级联样式表，“嵌”在网页的 标记符内。嵌入的样式表中的样式只能在同一网页上使用。 使用内嵌样式以应用级联样式表属性到网页元素上。 如果网页链接到外部样式表，为网页所创建的内嵌的或嵌入式样式将扩充或覆盖外部样式表中的指定属性。2.3 DIV+CSS布局的优点2.3.1 利于搜索引擎蜘蛛爬行根据总结和经验，div+css布局有利于蜘蛛的爬行，拿html的table布局和div+css布局的网页来做对比，很显然table的字节大于div+css的，字节小就有益于搜索引擎蜘蛛下载页面所用的时间，缩减页面代码量，可以提高页面浏览速度。而且也有益于蜘蛛爬行到网站深处。2.3.2 易于修改提高易用性，使用CSS可以结构化HTML，可以轻松控制页面的布局。CSS编写容易，可以像写html代码一样轻松地编写CSS。在一般情况下，div+css布局的网站，都是将html页面和css文件分开的，div+css的特点就是能将网页的内容和表现形式分离，将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。网站改版方便，只要修改CSS文件就可以重新构建网站。所以，假如你要修改网站整站布局的话，一般只需要修改css文件里的的个别属性即可，而这种特点是table不具备的。可重复使用，编程完成多处使用。你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。2.3.3 减少网页加载时间缩减页面代码量，可以提高页面浏览速度，在几乎所有的浏览器上都可以使用。前面就提到过，div+css是将css文件和html文件分开的，当用户点击网站时，是在同时下载css文件和html文件，所以可以提高打开网页的速度，而table是必须以标签开始到结束才能显示网页内容。另外，div的html文件则是边加载边显示，这样是不是提高了用户体验? Google已经将网页加载速度列入了排名的因素，尽管这个因素只能影响排名的一小部分，甚至可以忽略，但是有利于seo的办法，我们为什么不用?2.3.4 代码精简如果使用DIV+CSS布局，网页的页面代码精简，使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。Table 中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div 更能体现样式和结构相分离，结构的重构性强。2.3.5 相对表格的嵌套问题在一些文章是称，搜索引擎一般不喜欢抓取三层以上的表格嵌套，这一点一直没有得到搜索引擎官方的证实。我的也不能完全肯定是不是，就目前掌握的情况来看，在解析Table布局的页面，遇到多层表格嵌套时，会跳过嵌套的内容或直接放弃整个页面。使用Table布局，为了达到一定的视觉效果，不得不套用多个表格。如果嵌套的表格中是核心内容，解析时跳过了这一段没有抓取到页面的核心，这个页面就成了相似页面。网站中过多的相似页面会影响排名及域名信任度。2.3.6 搜索排名的影响页面结构简洁清晰，容易被搜索引擎搜索到完成了对网站优化工作。如果我们在设计时运用于基于XTHML标准的DIV+CSS布局，在设计完成要尽可能的完善到能通过W3C验证。事实证明使用XTHML架构的网站排名状况一般都不错。这一点或许会有争议，但至少这样不会有什么坏处。方便搜索引擎的搜索，用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价。2.4 div+css布局方式对于网站DIV+CSS设计越来越受到业界的关注，从个人网站到企业及门户网站，页面设计人员已经将DIV+CSS作为了业界标准。如果用DIV+CSS来构建和美化网站，那么DIV就是整个网站的骨架，CSS样式就是网站的衣服。其中的内容，就是血肉。要入手设计一个网站。那么，就要从DIV的布局开始。DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。各大个人网、企业网、门户网基本上都在推崇DIV+css这一布局方式。比如：腾讯网、IBM官网、等等。其中就以IBM官网来说，顶部是导航，下面为FLASH，底部用UL 列举出公司各项服务的连接。从整体布局来看，采用的是单栏式，是页面看上去简洁大方，现在的网页布局主流也从繁杂华丽转变到简单大方，个人也比较推崇后者。所以对于重庆逸飞咨询有限公司的网站也从DIV+CSS着手，模仿IBM官网div布局。本网站的骨架架构如下图2.1： 图2.1 设计中网站的骨架图2.5 div+css理论概述2.5.1 理解CSS盒子模型什么是CSS的盒子模式呢？为什么叫它是盒子？在网页设计中常听到一些属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。盒模型3D效果图如下图2.2所示：图2.2 css2.0盒模型在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同，CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏。与现实联系起来后对这种模式就更为容易接受了，方便了我们后期的教学。2.5.2 转变思路传统的前台网页设计是这样进行的：根据要求，先考虑好主色调，要用什么类型的图片，用什么字体、颜色等等，然后再用Photoshop这类软件做出网站的小样，最后再切成小图，通过设计HTML生成页面，改用CSS排版后，我们要转变这个思路，此时我们主要考虑的是页面内容的语义和结构，因为一个强CSS控制的网页，等做好网页后，你还可以轻松的调用你想要的网页风格，况且CSS排版的另外一个目的是让代码易读，区块分明，强化代码重用，所以结构很重要。2.5.3 实现结构与表现分离这也用CSS布局的特色所在，结构与表现分离后，代码才简洁，更新才方便。给出一个实例，对比把样式写进去和分离开的区别，进一步说明结构与表现分离的优点，在这里建议学生单独建立css文件与页面进行链接，这样的方式会使代码部分更为清淅。2.6 div+css的兼容性问题2.6.1 div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 。2.6.2 margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline; 2.6.3浮动ie产生的双倍距离#box float:left; width:100px; margin:0 0 0 100px; /这种情况之下IE会产生200px的距离 display:inline; /使浮动忽略 这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);#box display:block; /可以为内嵌元素模拟为块元素 display:inline; /实现同一行排列的效果 diplay:table。2.6.4 IE与宽度和高度的问题 IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度，比如要设置背景图片，这个宽度是比较重要的。2.6.5 页面的最小宽度min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个 放到 标签下，然后为div指定一个类。2.6.6 DIV浮动IE文本产生3象素的bug左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距。2.6.7 IE捉迷藏的问题当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。 2.6.8 IE6下为什么图片下有空隙产生解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom 都可以解决.等各种解决兼容性问题。3 开发工具的介绍3.1 梦幻网页的编织者DreamweaverDreamweaver是创建和管理网页的专业化可视编辑器。使用Dreamweaver可以轻松创建跨平台、跨浏览器的页面。Macromedia的Roundtrip HTML技术允许用户随意导入HTML文档而无需重新设置代码格式。Dreamweaver可以为用户做到：使用动态HTML功能（例如具有动态效果的层和行为）而不用写一行代码。它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。Dreamweaver还是一个可以完全自定义的应用程序。用户可以创建自己的对象和命令修改菜单和快捷键，甚至编写JavaScript代码扩展Dreamweaver的行为和属性检查器。至于Dreamweaver工作区是非常灵活的，因此它可以适应各种不同的工作风格和使用水平。常用的Dreamweaver工作区组件有以下若干种： 文档窗口可显示当前文档，文档的外观和浏览器中看到的非常相似。 装载器中包含一些打开和关闭常用检查器和模板的按钮。 对象工具栏包含创建不同类型的对象（例如 图象、表格和层等）的按钮。 属性检查器显示选定对象的属性。 快捷菜单可以使用户对当前选择或区域快速执行某些命令。 可固定的浮动工具栏允许用户将浮动窗口、检查器和工具栏组合在一个或多个选择窗口中。3.2 图形、图像编辑设计软件制作软件Adobe Photoshop cs2Photoshop cs2是目前最流行的图形、图像编辑设计软件，在数码影像处理、图像编辑合成、广告设计、封面设计、美术绘画、网页设计等领域都被广泛地应用。 文字处理更加方便 增加的图层集使图层管理更有序。 新增图像功能：图像的剪切和剪裁更加方便。 将所有工具的选项板改进为工具选项栏放置在工作区顶部，方便先项参数的设置。 为了更方便地用路径绘画，改进增加了几何形状工具，通过选择工具的不同工作模式，可创建路径、几何形状或几何填充区，使得矢量绘图功能得到了加强。4 网站总体分析和设计4.1 网站开发的需求分析随着网络技术的饿不断发展,网络应用已经渗透到人类社会的各个角落作为网络，世界色支撑点的网站,更是人们关注的热点：政府利用网站宣传自己的施政纲领, 日益成为与百姓交流的直通车；企业利用网站宣传自己的形象,挖掘无限商机，个人利用网站展示个性风采,创建彼此沟通的桥梁.越来越多的企业希望拥有网。建立个人网站要有一个清晰的网站布局。比如说，导航条要不要？很多人说那东西人人在做，就显得太俗没个性，难显示出新潮。但导航条之所以有那么多人在用，是因为它给浏览者一个明确的布局，便利人们查找本身所需的信息。从某种角度上说，大家都在用的东西就说明它确实被大家所接受。要清楚网站做出来是给每一个人普通用户看的。网站还要经常更新，给人以新意。设计技术的成长，带来了网页世界的繁荣。尤其在崇尚个性的今天，设计者们更是将页面设计表示的淋漓尽致。用户欣喜的看到那些僵化的设计模式正在被逐个打破，网页设计充满了朝气。但是，作为网页设计者，不能一味的只追求个性的表现，还必需兼顾到用户和客户的习惯，在表现本身的风格的同时，在功能上使用户更加便利。网站导航结构图如下图4.1所示：站长设计首页新闻博客素材联系我们图4.1 网站导航功能需求结果：生成5个页面，index.HTML-网站首页；blog.html-网站新闻；notes.html-网站案例；styles.html-网站介绍; lianxi.html-网站联系。4.2 网站的总体设计与传统媒体不同，网页除了文字和图像以外，还包含声音、视频和动画等新兴多媒体元素，更借助由代码语言编程所实现的各种交互式效果，增加了网页界面的生动性和复杂性，也使得网页设计者需要考虑更多页面元素的排布、优化。一般来说，网页的界面主要由下面几个因素构成： 文字：文字元素是信息传达的主体部分。网页中的文字主要包括标题、信息、文字链接、几种主要形式。标题和传统媒体中信息传达的基本作用相同，是内容的简概说明一般比较醒目、优先编排。文字作为占据页面重要比率的元素，同时又是信息重要载体，它的字体、大小、颜色和排布对页面整体设计影响极大。我所使用的文字是宋体12号，因为这样看得比较清楚，使整个页面整洁，网页中都普遍的使用，让顾客一看就忍不住继续看，所以在此我选择12号宋体作为网页的主体文字样式。 图形：图形在网页界面中具有重要作用。合理的运用图形，可以生动直观、形象地表现设计主题。网页中常用的图形格式包括jpg和gif，这两种格式压缩比高，得到了规范浏览器的支持，下载速度快，具有跨平台的特性，不需要浏览器安装插件即可直接阅览。图形元素包括标题、背景、主图、链接图标四种。本文所使用的图片主要是自己收集的比较精美。如下图4.2：图4.2图案展示 页面版式：版式是网页界面设计的重要组成部分，它将文字、图形等视觉元素进行组合配置，使页面整体视觉效果美观和谐，简单大方，便于阅读，实现信息传达的最佳效果。如下图4.3：图4.3 页面版式 色彩：彩色网页比单色网页更具吸引力；色彩本身具有象征作用。 4.3 整体风格设计4.3.1 页面属性设计页面中的整体格式和布局都在stley.css中，其中body设计如下:body margin: 0;padding: 0;line-height: 1.7em;font-family: 宋体;font-size: 12px;color: #d1c7ba; background: #372e23;各个页面的字体为：宋体、大小为12像素，字体颜色#d1c7ba。背景颜色我采用#372e23， #372e23这种背景色它与其他任何颜色的搭配都比较合适，不显花哨，简洁大方。Body与页面的边距为零。4.3.2 色彩搭配打开一个网站，给用户留下第一印象的既不是网站丰富的内容，也不是网站合理的版面布局，而是网站的色彩。色彩对人的视觉效果非常明显，一个网站设计成功与否，在某种程度上取决于设计者对色彩的运用和搭配。因为网页设计属于一种平面效果设计，在排除立体图形、动画效果之外，在平面图上，色彩的冲击力是最强的，它很容易给用户留下深刻的印象。因此，在设计网页时，必须要高度重视色彩的搭配。本网站的搭配主打为：白、灰、蓝、三种颜色。白色代表纯洁、纯真、朴素、神圣、明快。灰色也是一种很大器的颜色，几乎能与所有的颜色相辅相成。灰色有种很内敛、很隐约的暗香袭人的意味。蓝色是博大的色彩，天空和大海这辽阔的景色都呈蔚蓝色。蓝色是永恒的象征，它是最冷的色彩。纯净的蓝色表现出一种美丽、文静、理智、安祥与洁净。采用这种色彩搭配给游客留下深刻的印象。4.3.3 连接效果对于一个页面不仅要设计其字体和其他风格，还要有链接效果，使页面更加的生动，stley.css中的链接效果如下：a, a:link, a:visited color: #0074c5; text-decoration: none;a:hover color: #009900;text-decoration: underline;页面的链接效果设置为：已经访问的连接样式字体颜色为白色，无下划线，字体加粗为正常值；当有鼠标悬停在链接上样式字体颜色为#FFFF33，有下划线。4.3.4 导航设计网站的导航栏目可以让用户对网站的内容及信息一目了然。导航分为：首页、新闻、博客、素材、联系我们。首先采用div布局，里面嵌套ul形式然后相关css部分。相关代码如下：Div布局部分： 首页 新闻 博客 素材 联系我们 4.3.5 细节设计1PX凹陷西线的设计给网页带来了分成次的美观、图片的选择给人醒目、大方的感觉、按钮的设计给顾客赏心悦目的感觉，搜索工具的设计方便了游客轻松的实现网页功能的搜索。留言效果方便了直接与顾客交流的机会，提高了网站水平。4.4 首页设计4.4.1 DIV分布和概述由于个人完整给人的形象应该是专业、大方，所以主页的设计和布局我采用大方简单又不失活泼的原则。首页整体用1个大的DIV里面包含两个小的（上下个一个）DIV。Div设置效果为：总体都设置了宽度，居中格式，背景颜色及背景图片，其他还有内边距，高等。内容界面是一个网站走向成功道路上必不可少的因素。网站的内容代表着一个好网站的素质和形象，所以应该表现的大气、端庄而且精细。还更要表现出一个网站应该有的朝气和活力。因此我首先选中色彩搭配比较大方，整体布局比较清晰简洁的内容模式。在首页的版面，先是用Photoshop对网站模板进行切片，然后用DIV+CSS进行排版。首先自然映入颜面的是logo设计，一个特殊于类似酒瓶的图标给我们是用心品，只有我们心与心交流加上我们实力制作给网站设计达到一种酒醉的境界，页面效果如下图4.4所示：图4.4 页面效果根据因为浏览者在阅读时候经常采用从上到下，从左到右的习惯，主体内容中，我将“公司简介”和“博客帖子”各自放一边，“logo”放在了上面的位置而且和搜索一起完美搭配这样能更好地吸引浏览者的眼球，同时也体现网站的专业、得体。底部不仅能够展示网站的各种优点，而且突出显示出网站整体结尾的完美，看着简介而又大方得体，真是赏心悦目呀！4.4.2 搜索关键字与描述为了有利于搜索引擎的收录，在首页专门设置了mate信息，设置相关关键字和描述。相关代码如下：4.5 其他页面设计其他页面设计整体风格跟主页布局风格一致，就只是内容布局格式不一样，更加直观、简洁明了，其中联系页面附加有留言网站整体风格的源于首页的改装，在联系页面中附加了留言内容给顾客留下了直接心与心沟通的交流机会，首先心灵沟通直接给人温暖的感觉，专业的一块-心灵沟通模式，让你们生层次的了解我们，更加有资质，实力，专业，精心为你们服务。接着左边是留言和公司信息，左边是博客帖子简洁大方，给人心情愉悦。新闻网站直接吸引顾客的是网站新闻四个大字，突出显示新闻的作用，新闻的作用在于建设型网站系列适用于中小型企业，并以web2.0的核心理念为指导，高端视觉设计需求，及交互性需求。新闻的作用突出本网站品牌，很好的展示本网站的形象，全方位的展示您的想法，互动平台的搭建，信息功能完善。博客页面，依然是四个大字首先映入我们颜面的是博客中心，博客中心是介绍专注与人交流，专业从事心与心的沟通，通过精美的原创网站设计，高质量的网站建设，为用户制作一流的网站。并且介绍网站设计经验，专为中小企业提供网站建设服务。致力于中小企业网站建设、网页设计制作、网站优化，为多家中小企事业单位提供了网站建设及网页设计服务。博客所关注的领域包含：互联网、电脑网络、网站架设、搜索引擎、编程开发、社会化网络、网络营销、互联网地图、Google Earth、Web 2.0等；专注于网站开发。目前已经成长为一个以IT技术为主导，全面发展而又有自身特色的原创互联网科技博客。站长素材展示的是成功案例产品介绍，产品分类：中小企业类、门户类、商城购物类集团品牌高端设计类、教育类等。素材的作用通过成功案例的展示让顾客深刻了解本公司，所以拥有优秀的网站设计是你们公司成功的关键，优秀的网站首先展示不尽是公司的完美的信息而且表现出公司的实力。您不想让您的企业发展得更快吗？您不想让你的企业产品的知名度更广吗？你不想让您的产品销量更大吗？难道您会眼睁睁地看着竞争对手抢走您的定单吗？为什么同行的生意会越做越好，而您企业的发展和产品却是陷入困境，销量平平一直不好吗？所以拥有优秀的网站设计是你们公司成功的关键，与本公司合作最大的感受就是实力！图4.5联系我们页面图4.6新闻页面图4.7博客页面图4.8素材页面5 网站的测试编码完成后，就要对源程序进