顾胜利论文

山东传媒职业学院

毕业设计

设计题目 利用DIV+CSS技术进行企业网站的设计

指导教师/职称 邱军辉/助教

作者姓名 顾胜利

年级/专业 11级/计算机多媒体技术

山东传媒职业学院

2013年11月5号

- 1 -

目录

摘要： ............................................................................................................ 错误！未定义书签。 1.绪言 ............................................................................................................ 错误！未定义书签。

1.1 概述 ................................................................................................. 错误！未定义书签。 1.2 研究的目的 ..................................................................................... 错误！未定义书签。 1.3 研究的意义 ..................................................................................... 错误！未定义书签。 1.4 使用的软件及运行情况 ................................................................. 错误！未定义书签。 2 企业网站的定位与内容 ............................................................................. 错误！未定义书签。

2.1 确定网站主题和名称 ..................................................................... 错误！未定义书签。 3 网站的规划 ................................................................................................. 错误！未定义书签。

3.1 设计网站标志(logo) ..................................................................... 错误！未定义书签。 3.2 确定网站结构 ................................................................................. 错误！未定义书签。 3.3确定网站的链接结构 ...................................................................... 错误！未定义书签。 3.4 网站风格 ......................................................................................... 错误！未定义书签。

3.4.1 网站的配色 ......................................................................... 错误！未定义书签。 3.5 素材的搜集 ..................................................................................... 错误！未定义书签。 3.6 绘制原型图 ..................................................................................... 错误！未定义书签。 4 网页制作..................................................................................................... 错误！未定义书签。

4.1 制作工具 ......................................................................................... 错误！未定义书签。 4.2 网页制作的主要技术 ..................................................................... 错误！未定义书签。

4.2.1 DIV ....................................................................................... 错误！未定义书签。 4.2.2 CSS ....................................................................................... 错误！未定义书签。 4.2.3 Div+css ............................................................................... 错误！未定义书签。 4.3.CSS 对不同浏览器的兼容性解决办法 ......................................... 错误！未定义书签。 5 小组合作与分工 ......................................................................................... 错误！未定义书签。 6 成果展示..................................................................................................... 错误！未定义书签。 如图4为主页和子页页面效果图。 ............................................................. 错误！未定义书签。 7 收获 ............................................................................................................ 错误！未定义书签。 8 总结 ............................................................................................................ 错误！未定义书签。 谢辞 ................................................................................................................ 错误！未定义书签。 参考文献......................................................................................................... 错误！未定义书签。

- 1 -

利用div+css技术进行企业网站设计

计算机多媒体 11级1班 指导老师：邱军辉

摘要：随着时代的发展和网络技术的进步，网络已经融入到我们的日常生活和工作，企业也要有自己的网站。DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，div+css 是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离，页面加载快，适应未来网络应用更多的需求。在网站设计中不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。 关键词：div；css；网页设计

Abstract:With the development of the times and the progress of network technology,network has been integrated into our daily life and work, enterprises should alsohave their own web sites. DIV+CSS is a web standard (or \"WEB\") one of thecommonly used terms, div+css is a webpage layout method, which is different from HTML webpage design language in the form of this a webpage layout method (table) positioning method, can realize the webpage content with the performance of phase separation, the page load faster, adaptation future network application more demand. No longer use form positioning technology in website design, but to achieve a variety of location using DIV+CSS approach. Keyword: div；css；Dreamweaver

1.绪言 1.1 概述

网页制作是网站策划师、网络程序员、网页设计师等岗位，应用各种网络程序开发技术和网页设计技术，为企事业单位、公司或个人在全球互联网上建设站点，并包含域名注册查询和主机托管等服务的总称。企业网站的格局可以通过网页制作软件根据企业要求很好的体现，我主要研究的是div+css的应用。

1.2 研究的目的

随着WEB2.0标准化设计理念的普及，国内很多大型门户网站已经纷纷采用DIV+CSS

- 2 -

制作方法，通过研究div+css的应用技巧，可以熟练的应用软件更好的制作网页。可以根据企业的主题文化更好的进行企业网站的设计。

1.3 研究的意义

可以减少代码的编写，在不熟悉HTML语句的情况下，照样可以制作网页，且减少了网页的体积，加快了下载速度，使浏览者在浏览网页内容时更加流畅。有利于网站的宣传推广。有利于自己更好的掌握DIV+CSS这门技术，从而更好的进行企业网站的设计。

1.4 使用的软件及运行情况

使用的软件：dreamweaver软件由美国著名的网站应用开发工具生产厂商Adobe Macromedia于2005年6月推出并正式投入市场以来，已经发展得相当成熟。关于Dreamweaver的技术介绍的相关书籍与网络信息相当丰富。通过大学中软件开发环境课程的学习，对Dreamweaver有了比较深刻的认识，并比较轻松的掌握了Dreamweaver的操作。因此，软件技术可以完成任务的要求。

软件运行环境：Dreamweaver是一款简体中文软件，可以在Win2003/WinXP/WIN7中安全运行

2 企业网站的定位与内容 2.1 确定网站主题和名称

网站主题是网站的大方向，它包含了网站的主要内容，主题的制定影响子网页的内容和布局。所有的子网页都是围绕网站的主题制定的，所以一个网站一定要有一个明确鲜明的主题。我研究的是小企业的网站，一些大型企业的网站会通过视觉来统一企业形象，和实体公司一样，一个杰出的网站也需要整体的形象包装和设计。有创意的CI设计，对网站的宣传推广有事半功倍的效果。

主题确定了就可以给网站起名字了，名字要合理合法合情；要易记易懂，要有特色。 3 网站的规划

3.1 设计网站标志(logo)

logo是指网站的标志可以是中文、英文字母，也可以是符号、图案等。标志的设计创意应当来自网站的名称和内容。最常用和最简单的方式是用自己网站的英文名称作标志，采用不同的字体、字母的变形、字母的组合可以很容易制作好自己的标志。如图1就是我们作品设计的logo。

图1 网站logo

- 3 -

3.2 确定网站结构

网站结构清晰会使浏览者一目了然，也利于网站的维护。栏目的实质是一个网站的大纲索引，索引应该将网站的主题明确显示出来。我们设计的作品的网站结构图如图2所示。

华域酒店顾问（CHC）

首页

关于华域 核心服务 客户案例 华域视点 联系华域

华域简介 核心服务 案例选录 市场资讯 联系方式

图2 网站结构图

3.3确定网站的链接结构

网站的链接结构是指页面之间相互链接的拓扑结构，主要有两种基本方式。一种是树状链接结构，一种是星状链接结构。我们设计的企业网站用的是树状链接结构。条理更清晰，更直观。

3.4 网站风格 3.4.1 网站的配色

色调是视觉最敏感的要素，色彩风格是最容易识别的风格，颜色的使用在网页制作中起着非常关键的作用，有很多网站以其成功的色彩搭配令人过目不忘。因此网站的主题和侧重点确定色彩的配置，例如清新淡雅的色调、浓重热烈的色调、沉稳庄重的色调等等都可以明确地表现网站的风格特点；另外，颜色还具有许多象征性的意义，如绿色象征自然、环保等意义；黑色象征严肃、深沉、神秘等......。色彩的搭配尤为重要，不同的色彩搭配，具有不同的视觉效果，而企业网站一般采用对比鲜明，冲击强烈的色彩作为网页的主色调，即以一两种基色的搭配为主色，来显示企业富有竞争力特性。

3.4.2 页面版式

版式是以平面上的几何特征表现风格的要素。它是页面板块的布置和相对位置的设计，不同风格的版式，具有不同的效果，它体现在排列的位置和形状、素材分布的密集度和松散度、图片和文字的配合及相互嵌套的形式、对称或不对称、留白或交错、整齐和错落的布置方式等，例如，中式古典、西洋古典、现代抽象、颓废反叛、精致奢华、前卫时尚、温馨浪

- 4 -

漫、简约质朴等多种风格，而一般企业网站的页面风格应当简洁明了沉稳大方。

3.5 素材的搜集

框架确定好之后，就要准备素材了，一般包括图片，文字，声音，视频，友情链接等。获取方式可以通过网络，也可以自己动手制作。我们作品设计过程中的素材主要是通过网络在网上获取的。 3.6 绘制原型图

设计初稿，规划好网页格局很内容板块，要能鲜明的展现企业的产品，体现企业的文化。 首先确定主页页面板块图如图3所示。

图3 主页页面板块图

4 网页制作 4.1 制作工具

软件：Dreamweaver CS4。

4.2 网页制作的主要技术 4.2.1 DIV

div 可定义文档中的分区或节， div 标签可以把文档分割为的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。 如果用 id 或 class 来标记div，那么该标签的作用会变得更加有效。

div 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是div 固有的唯一格式表现。可以通过div 的 class 或 id 应用额外的样式。 不必为每一个div 都加上类或 id，虽然这样做也有一定的好处。 可以对同一个div 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

4.2.2 CSS

CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML

- 5 -

或XML等文件样式的计算机语言。

CSS能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象盒模型的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

在过去我们在设计网页的时候，都是使用一般的html语法去定义文字或版面的配置。但使用上却会看到一大堆的属性定义，造成网页设计上html太过烦杂，因此当你使用css下去设计之后，你会发现整个精简很多,让网页设计的结构面更加活跃。支援很多的视觉设计属性，让网页设计更加活泼美观。更可以精确的控制网页设计的美编与文字或图片的编排，因此在制作与管理上提高不少的网页设计的效率。在制作上可以使用多个页面去定义在同一个css档案上，修正起来也比较方便。

优点整合：易于维护和改版，你只要简单的修改几个CSS文件，就可以重新设计整个网站的页面。大大缩减页面代码，提高页面浏览速度,缩减带宽成本；结构清晰，容易被搜索引擎搜索到，天生优化了seo ；缩短改版时间，只要简单的修改几个CSS文件就可以重新设计有成百上千页面的站点；强大的字体控制和排版能力。CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。 提高易用性。使用CSS可以结构化HTML

4.2.3 Div+css

div+css 是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离，精简了许多页面代码，提高了下载速度，使访问速度得到提升，简化了网页设计的工作量。 4.3.CSS 对不同浏览器的兼容性解决办法

由于CSS 在不同浏览器中存在兼容性问题，所以在使用 DIV+CSS 布局中，可能导致相同的内容在不同浏览器中出现不同的显示效果，为了解决这些方面的问题，以下针对CSS 某些属性的用法提出相应的一些解决办法。

⑴页面居中问题在IE浏览器下，可以通过定义CSS 样式body {text- align: center;}来实现页面居中，但在FireFox（以下简写为FF）浏览器下此属性就失效了。解决办法：使用\"margin- left: auto; margin- right : auto; \"

⑵padding属性在不同浏览器的显示问题当给DIV设置padding属性后，在FF浏览器中会导致width和height增加(DIV的实际宽度=DIV宽+Padding), 但在IE浏览器中width和height不会增加，这就导致相同的内容在不同浏览器中出现不同的显示效果。解决办法：给DIV设定IE、FF两个宽度，在IE的宽度前加上IE特有标记\" * \"号。例如：#divwidth{ padding:5px; width:100px; *width:110px; }

⑶奇怪的间隙问题有的时候我们明明设好了高度，可在IE上却看见一些奇怪的间隙。解决办法：试试在有空隙的DIV上加上\"font- size:0px;\"

- 6 -

⑷关于手形光标要将页面内容的光标显示为手形，通常的做法是使CSS属性cursor: hand; 但这于做法只适用于IE解决办法：cursor: pointer;

⑸浮动在IE产生双倍距离问题例如：#box{ float:left; width:100px; margin:0 0 0 100px; } 这种情况之下IE会产生200px的距离。解决办法：在以上属性的基础上，加上display:inline，使浮动忽略。

⑹UL和FORM标签的padding与margin ul标签在FF中默认是有padding值的, 而在IE中只有margin默认有值。FORM标签在IE中,将会自动margin一些边距,而在FF中margin则是0；解决办法：css中首先都使用这样的样式ul,form{margin:0; padding:0;}。

⑺截字省略号.hh { - o- text- overflow:ellipsis; text- overflow:ellipsis; white- space:nowrap; overflow:hidden; }这个CSS是定义当内容溢出宽度后会自行的截掉超出部分的文字，并以省略号结尾，但注意Firefox并不支持。

5 小组合作与分工

在整个企业网站的设计和制作过程中，我们采用了小组合作的方式。小组进行讨论，确定网站主题和风格以及各个页面的排版问题。然后，共同寻找各自负责内容所需要的素材。我主要负责的是网站后期细节调整和兼容性调试 。

6 成果展示

如图4为主页和子页页面效果图。

图4 主页和子页效果图

- 7 -

7 收获

没开始做的时候，觉得应该挺简单的，因为看别人做的很快，但是真正做起来才发现没那么简单，很多特效都要请教同学。效率低，但通过大家的共同努力还是成功的完成了。通过对该课题的学习研究和实际应用，认识到自己的很多不足之处。通过与同学老师的交流和在网上查的资料，也都一一改进。知道不能不动手，不要眼高手低，还懂得了团队的合作。掌握一门过硬的技术对以后的学习工作和生活都有很大的帮助。 8 总结

通过利用div+css技术进行企业网站设计，加快了企业数字化的建设，一方面可以展现现有企业信息和企业文化，然后充分整合利用；另一方面拓展了企业的道路，极大的提高企业的市场占有率。

谢辞

论文写作完毕，在此感谢学院老师三年的教育和培养。论文写作之初遇到了很多问题，在指导老师的帮助下找到了论文写作的思路，在此感谢指导老师——邱军辉老师的悉心指导和帮助。愿老师身体健康、心情愉悦、工作顺利！并感谢信息工程系各位专业老师三年里孜孜不倦的教诲!

参考文献

[1] 贾庆萍 主编，《网页设计与制作实训教程》中国广播电视出版社；

[2] 朱印宏 邓艳超 编著，《DIV+CSS网站布局从入门到精通》北京希望电子出版社；

- 8 -

论文 题目：利用div+css技术进行企业网站设计 作者 姓名：顾胜利 初评 成绩： 评语： 答辩表现： 总评成绩： 阅评组成员签字： 阅评组组长签字： 年 月 日

- 9 -