基于DIV+CSS网页设计技术论文
毕业论文(基于div+css的Tasty美食网站的界面设计)【范本模板】
毕业论文（设计）题目基于DIV+CSS的美食网站界面设计指导老师＊***＊专业班级 **＊*＊＊*姓名 *＊＊学号＊*＊*＊＊＊＊* 2014 年05 月30 日摘要：美食，贵的有山珍海味，便宜的有街边小吃。
美食是不分贵贱的，只要是自己喜欢的，就可以称之为美食.吃前有期待、吃后有回味的东西。
美食遭遇心情的时候,美食已不仅仅是简单的味觉感受，更是一种精神享受。
美食还体现人类的文明与进步。
本网站以美食作为窗口，让海内外观众领略中华饮食之美，进而感知中国的文化传统和社会变迁。
本文的主要内容集中在：对网站界面制作过程的详细描述，对div+css布局进行讨论，并对网站开发过程中使用的开发工具和技术做了简要的介绍。
关键词：网页设计;div+css；Dreamweaver；美食网站目录引言 01市场调研 01.1 网站开发背景和需求 01。
2 同类型网站的分析 (1)2 文献检索 (2)2。
1 css样式编写规则 (2)2。
2 div+css布局方式 (3)2。
3 JavaScript编写规则 (4)2。
4 网站配色方案 (4)3 设计实践 (4)3。
1 设计立意 (4)3.2 创作过程 (5)3.2.1美食网站类主题与版面的分析 (6)3.2。
2美食网站效果图的设计与制作 (7)3。
2。
3界面元素的制作过程 (8)3。
2.4首页界面的制作过程 (9)3。
2。
5简介界面的制作过程 (13)3.2.6中式美食界面的制作过程 (13)3.2。
7相册界面的制作过程 (14)3。
2。
8西式美食界面的制作过程 (16)3.2。
9联系我们界面的制作过程 (17)3.3 制作中遇到的问题和解决方法 (19)4 网站的测试 (19)结论 (21)致谢 (22)参考文献 (23)引言随着信息时代的来临，IT行业已经成为现今最受关注的行业之一，它发展飞速且在全球范围内广泛、普及应用,人类的生活因此有了革命性的变化。
同时，网络技术的发展也取得了卓越的成就，为网站开发、界面设计等奠定了坚实的基础。
DIV+CSS技术基础与页面布局设计-网页设计论文-计算机论文
DIV+CSS技术基础与页面布局设计-网页设计论文-计算机论文——文章均为WORD文档，下载后可直接编辑使用亦可打印——一、DIV+CSS 技术基础传统的html 标签中，既有结构标签，也有表现标签。
用DIV+CSS 技术设计网页，是一次设计思维方式的转变，其能使页面的结构与表现相分离，这样，同样的内容与结构，就可以使用不同的CSS 样式实现不同的表现形式。
通过定义CSS样式的方法，可以在不更改页面内容和结构的前提下，更换页面的布局和表现效果[1].（一）DIV 技术。
DIV 全称为division,即区分/ 划分的意思。
DIV 标签是块级元素，用来为HTML文档内大块的内容提供结构和背景。
HTML文档中的块由对应的一组起始标签DIV 和结束标签/DIV 构成，其定位一般由DIV标签属性或引用CSS样式实现。
DIV 标签定义的块是可以被嵌套的，用于布局复杂的网页。
因此，这为网页布局提供了有利技术支持。
另外，在所构成的块中，可以放置文字、图像和表格等各种网页元素，方便对网页进行设计。
（二）CSS技术1.CSS 基础。
CSS 是Cascading Style Sheets 的英文缩写，中文翻译为层叠样式表，简称样式表，它是W3C 组织制定的，用于控制（加强）网页内容显示效果的一种标记性语言。
样式就是格式，用于设置显示内容的样式；层叠是指当在HTML 文档中引用多个定义样式的样式文件（CSS 文件）时，若多个样式文件间所定义的样式发生冲突，将依据层次顺序进行处理[2].CSS 语法为：选择器{属性1:属性值1;属性2:属性值2;}2.CSS 选择器类型。
选择器是用来定义CSS 样式的名称，根据其构成形式不同，可分为基本型选择器、特殊型选择器两类。
其中，基本型选择器有标签选择器、类选择器和ID 选择器三种；特殊型选择器主要由三类基本选择器演变生成，主要有组合选择器、群组选择器、后代选择器、子选择器、相邻选择器、属性选择器、伪类选择器和通配符选择器。
DIV+CSS网页排版技术探讨
块 （ ｂ ｌ ｏ ｃ ｋ — ｌ ｅ ｖ ｅ １ ）的 内容提 供结 构和 背景 的元 素 。 也 可 以是 用 户 自定 义 的样 式 Ｐ ｒ ｏ ｐ ｅ ｒ ｔ ｖ为 属 性 ， Ｄ Ｉ Ｖ的起始 标 签和结 束标 签 之 间 的所 有 内容 都是 ｖ ａ ｌ ｕ ｅ 为属 性值 属 性 和属 性值 之 问用 冒号 隔开 用来 构 成 这 个块 的 ． Ｄ Ｉ Ｖ 的 作 用 就 是 把 内 容标 识 多 个 定 义 之 问 用 分 号 隔 开 在一 个 区域 内 ． 并不 负 责其 它事情 ． 其 中所包 含元 素 的特性 均 由 Ｃ Ｓ Ｓ样 式 来 完 成
三、 实 例 演Hale Waihona Puke 示 需要 新 建和 删除
首 先根 据 客户 的需求进 行 页面 的绘 制 ．绘制 完成 后进行 切 割 ． 切 割后进行 布 局设计 ． 似 设我 们 当几 个元 素样 式属性 一样 时 ．可 以共 同渊用 绘 制 完 成 后 的 网 页 布 局 如 下 ３所 示 ．
际 案 例 来 分 析 ＤＩ Ｖ＋ＣＳ Ｓ排 版 网 页的 过 程 和 方 法
【 关 键词 】 ： 网页排 版
一
ＤＩ Ｖ Ｃ Ｓ Ｓ盒子 Ｃ Ｓ Ｓ 语 法
任何 Ｈ Ｔ ＭＬ元 素都可 以看作 是 一个盒 子 ． 用 Ｃ Ｓ Ｓ
、
前 言
随 着 ＷＥ Ｂ标 准 的 推 广 和 普 及 ．越 来 越 多 的 布 局 网 页 主 要 就 是 通 过 Ｃ Ｓ Ｓ定 义 的 大 小 不 一 的
ｌ ６ ８
福 建 电
脑
Ｄ Ｉ Ｖ ＋ Ｃ Ｓ Ｓ网页 排版 技 术 探讨
韩 竹 萍
（厦 门 工 商 旅 游 学 校 福 建 厦 门 ３ ６ １ ０ （ ） ４）
网页设计中DIV+CSS布局技术的应用研究
网页设计中DIV+ C SS布局技术的应用研究文/惠州工程技术学校张继皇进人信息时代后，我国信息技术获得长足的发展，互联网已经成为人们生活中非常重要的部分，人与人的信息交流和娱乐活动，信息的收集和查阅，都离不开互联网。
在互联网发展过程中，非常重要的一环是页面设计，页面是用户第一眼对互联网的视图，可以说页面设计喻含着互联网技术的发展规律。
传统的界面充满着各种漏洞和不合理，新技术的发明则促进了整个页面设计的巨大飞跃。
在这样的情况下，I行业在网页设计开发过程中，DIV+ C S S的布局技术得到广大技术工作者大量好评，开发人员用DIV+ C SS的布局技术实现了五彩斑斓的页面、流畅美观的视图，用户在与页面进行交互中，感受到快速的传输效果、下载速度，开发人员对于网页的维护和开发的难度也大大降低，操作流程得到相当大的优化。
一、 D IV+ C S S技术基础DIV+C S S技术在计算机网页设计领域非常多，技术体系非常完善，DIV+C S S技术可以使页面的结构与表现不处在统一的结构中，这样页面设计的灵活度大大增加。
相同的内容和结构，CSS样式可以实现不同的页面效果。
在CSS样式下，不改变内容和结构，可以对页面效果进行修改。
1.D IV技术DIV全称为division,即“区分/划分”的意思。
<DIV> 标签是块级元素，用来为HTML文档内大块的内容提供结构和背景。
HTML文档中的块由对应的一组起始标签<D IV> 和结束标签</DIV>构成，其定位一般由<DIV>#签属性或引用CSS样式实现。
DIV标签定义的块是可以被嵌套的，用于布局复杂的网页。
因此，网页的布局因为DIV可以说是如虎添翼，通过对模块的编辑，可以随意放文字和图片，并能方便地对页面进行修改。
2. C SS技术上述介绍DIV时顺便提了 C S S的一些具体情况，程序员在给HTML页面增加一些新的样式时，标签选择器、：i d选择器和类选择器是程序员经常需要使用到的。
基于DIV+CSS技术网页布局应用与实践
＃ ｔ ｏ ｐ ｛ ｂ ａ ｃ ｋ ｇ ｒ ｏ ｕ ｎ ｄ — ｉ ｍａ ｇ ｅ ： ｕ ｒ ｌ （ 一 ， ｉ ｍ ａ ｇ ｅ ｓ ０ ３ ／ ｉ ｎ ｄ ｅ ｘ Ｏ ３ ０ １ ． ｇ ｉ ｆ ） ；
ｗｉ ｄ ｔ ｈ： ９ ５０ ｐｘ ； ｈ ｅｉ ｇ ｈｔ ： １ ６ ０ｐ ｘ；
见 的 网 页 布局 实例 ， 解析 Ｉ ） Ｉ Ｖ＋ Ｃ Ｓ Ｓ 技术的应用 ， 为后 续 网 页布 局 设 计 时提 出一种 新 的解 决 方 案
关键词 ： ＤＩ Ｖ； ＣＳ Ｓ ； 网 页布 局 ； 网 页设 计
中 图分 类 号 ： Ｔ Ｐ ３ ９ ３
文 献标 识 码 ： Ａ
文章编号 ： １ ０ ０ ９ — ３ ０ ４ ４ （ ２ Ｏ １ ４ ） ３ ４ — ８ ｌ ２ ８ — ０ １ 基本框架 。
摘要 ： 近年 来随 着Ｗｅ ｂ 标准 的普及 ， ＤＩ Ｖ ＋ ＣＳ Ｓ 技 术在 网页布局 中越 来越 多的使 用， ＤＩ Ｖ ＋ Ｃ Ｓ Ｓ 技 术在 网页设计与制作 中所 占的地位 越来越 高， 传统的使用表格（ ｔ ａ ｂ ｌ ｅ ） 进行的 网页布局方式逐渐被淘汰 ， 在此背景下 ， 该 文通过一 个网页设计 中最常
＜ ｂ ｏ ｄ ｙ ＞ ＜ ｄ ｉ ｖ ｉ ｄ ＝ ” ｔ ｏ ｐ ” ＞
随着 Ｗｅ ｂ 标 准在 闫内的逐渐 普及 及很多业 内人士 的大 力 推行 ， 很 多网站 已经 开始 重构。Ｗｅ ｂ 标准提 将 网页的 内容与 表 现分离 ， 同事 要求 Ｈ Ｔ ＭＩ 义 具有 良好的结构 。 此需 要抛 弃 传统 的表格 （ ｔ ａ ｂ ｌ ｅ ） 布局 方式 ， 采Ｈ ｊ Ｄ Ｉ Ｖ布局 ， 并 且使 用 Ｃ Ｓ Ｓ 层叠 式样式表来实现页而 的外观 。
论文：CSS_DIV网页设计初探
学术探讨一、 CSS的基本概念CSS （层叠样式表），是控制网页样式并允许将样式与网页内容分离的一种标签性语言。
在html 网页中，各种标签以及位于标签中间的所有内容，组成了整个页面。
例1：<p>CSS 标签</p>该句代码的功能是将文字“CSS 标签”以段落的格式显示在网页中。
如果希望标题变成蓝色、黑体，则要引入<font>标签，如下所示。
例2：<p><font color=”#0000FF ” face=”黑体”>CSS 标签</font></p>虽然看上去并不十分麻烦，但是当页面的内容是整篇文章时，就十分麻烦。
但引入CSS 对其中的<p>标签进行设置，就完全不同。
例3：<head><style>p{ font-family:幼圆; color:red;}</style></head><body> <p>CSS 标签1</p> <p>CSS 标签2</p> </body>其显示效果与例2完全一样。
页面中最开始的是<style>标签，以及其中对<p>标签的定义。
二、 CSS的基本写法1.在body 内实现将css 写在具体标签中是最直接的一种，它对html 的标签使用style 属性，然后将CSS 代码写在其中。
例4：<p s t y l e ="c o l o r :#F F 0000; f o n t -s i z e :20p x ; t e x t -decoration:underline;">css 入门</p>将css 写在具体标签中是最简单的，但要为每一个标签设置style 属性，其成本较高，而且网页容易过胖，因此不推荐使用。
运用DIV+CSS技术对网页进行布局
（ １ ） 用表格排版的页面很难再修改或升级。 当页面制作完成后 ， 如果要将其中的某些位置对调 ， 那么表格排版的工作量相当于重新
表格 、 图片等各种ＨＴ ＭＬ 元素。 因此 ， ＜ｄ ｉ ｖ ＞与＜／ ｄ ｉ ｖ ＞中的 内容视 制作一个页面 。 而ｃ ｓ ｓ 排版利用ｐ ｏ ｓ ｉ ｔ ｉ ｏ ｎ ｔ 和ｆ ｌ ｏ ａ 属性可 以轻松地 移 为 一 个 独 立 的对 象 ， 受Ｃ Ｓ Ｓ 的控 制 。 例如 ： 动和 重新定位各个块 ， 实现让用户动态选择界面的功能 。 ３ ． １ 如何在 网页中控制Ｄｉ Ｖｅ ？ 的文字垂直居中显示 （ ２ ） 用表格排版 的页面在 下载时必须等整个表格 的内容都下载 先定义一个ｄ ｉ ｖ 元 素， 再给ｄ ｉ ｖ ） ￣ Ｉ 上属性 ｍａ ｒ ｇ ｉ ｎ： ０ ｐ ｘ ａ ｕ ｔ ｏ ； 完 毕 后 才 会 一 次性 显 示 出 来 ， 而 利 用 ＤＩ Ｖ＋ Ｃ Ｓ Ｓ 排 版 的 页面 在 下 载 时， 各个 子块 可以分 别下载显示 ， 从而提高了页面的下载速度 。 （ ３ ） 复杂的表格设计使得设计极为不易 ， 修 改更 为复杂， 最后生 成的网页代码除了表格本身的代码， 还有许多没有任何意义的图像
能更 强， 灵 活性 也更 高。 关键词 ： 表格 Ｃ Ｓ Ｓ ＤＩ Ｖ 网页布局
中图分 类号： Ｔ Ｐ ３ ９ ３
文献标 识码 ： Ａ
文章编 号： １ ０ ０ ７ — ９ ４ １ ６ （ ２ ０ １ ３ ） ０ ６ ０ ２ ０ ０ — ０ １
１ 传统 的 表格 布局
文代码得到极大的精简 ， 也减少了ＨＴ ＭＬ 代码 ， 正文就突出了， 搜索
CSS DIV论文
湖南农业大学毕业论文关于WEB网页设计中CSS的应用学生姓名：覃兵年级专业：2008级计算机科学与技术指导老师及职称：王志明讲师学院：成人教育学院湖南·长沙提交日期：20 年月目录摘要 (1)关键词 (1)1 前言 (1)2 CSS的优势 (2)维护方便 (2)下载浏览迅速 (2)强大的样式功能 (2)容易阅读网页原始文件 (2)3 样式表的加入法 (2)3.1 以style属性值的形式加入 (2)在网页文件的HEAD元素间加入样式表 (3)链接到外部的CSS文件 (4)4 CSS设计WEB页的部分技巧 (5)CSS设计网页文字样式的技巧 (5)表格内容强制换行的技巧 (6)网页背景图不滚动的技巧 (7)4.4 用CSS改变鼠标形状的技巧 (8)4.5 设计图形与文字位置的技巧 (9)5 结论 (10)参考文献 (11)致谢 (11)关于WEB网页设计中CSS的应用学生：覃兵指导老师：王志明（湖南农业大学成人教育学院，长沙410128）摘要：本文从维护方便、下载浏览迅速、强大的样式功能、容易阅读网页原始文件等四个方面介绍了在WEB页中使用CSS的优势。
以及从CSS样式表以style属性值的形式加入WEB页、在网页文件的HEAD元素间加入CSS样式表、链接到外部的CSS文件加入WEB页等三个方面介绍了CSS加入WEB页的方法。
并从设计网页文字样式、表格内容强制换行、网页背景图不滚动、CSS改变鼠标形状、在网页中设计图形与文字位置等五个方面论述了CSS设计WEB页的一些技巧。
关键词：CSS；方法；样式表；网页；HTML1 前言在WEB网页的设计中，HTML只定义了网页的结构和各个要素，而让浏览器自己决定各要素以何种形式显示。
不说HTML的网页缺少动感，就是在网页内容的排版布局上也有很多困难，如果不是专业人员或特别有耐心的人，很难让网页按自己的构思和创意来显示信息。
即便是掌握了HTML语言精髓的人也要通过多次地测试，才能驾驭好这些信息的排版，过程十分漫长和痛苦。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
基于DIV+CSS的网页设计技术
摘要：本文首先介绍了div和css技术的特点，然后对css盒子模型进行了分析，最后通过具体的实例讲解了div+css网页布局技术的方法和实现流程，实例表明，该技术具有代码简洁、表现和内容相分离等优势。
关键词：div css 网页设计
0 引言
html[1](hypertext mark-up language)，即超文本标记语言，是当前网络上应用最为广泛的语言，也是组成网页文档的基本语言。
html主要包括头部（head）、主体（body）两大部分，头部是描述浏览器所需要的信息，主体则包含所要说明的具体内容。
在一般网页设计中，我们需要设计的内容就体现在主体中。
div元素是用来为html文档内大块的内容提供布局的结构和背景。
它是html中的一个标签，此标签的作用就是定位网页内容中的图片、文字、视频等相关信息。
一般我们也叫为div层定位。
css(cascading style sheet)，层叠样式表，是用于控制网页样式并允许将样式信息与网页分离的一种标识性语言。
css 是 1996由w3c 审核通过，并且推荐使用的。
css 的引入就是为了使 html语言更好的适应页面的美工设计。
它以 html语言为基础，提供了丰富的格式化功能，如字体、颜色、背景和整体排版等，并且网页设计者可以针对各种可视化浏览器（包括显示器、打印机、打字机、投影仪和 pda 等）来设置不同的样式风格。
css的引入引发了网页
设计一个又一个的新高潮。
使用css设计的优秀页面层出不穷。
1 css盒子模型[2]
盒子模型是css控制页面时一个很重要的概念，只有很好的掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。
所有页面中的元素都可以看成是盒子，占据着一定的页面空间，一般说来这些被占据的空间往往要比单纯的内容大。
换句话说，可以通过调整盒子的边框和距离等参数，来调节盒子的位置和大小。
一个页面由很多这样的盒子组成，这些盒子之间会相互影响，因此掌握盒子模型需要从两方面来理解。
一是理解一个孤立的盒子的内部结构，二是理解多个盒子之间的相互关系。
在css中，一个独立的盒子模型由 cotent内容，border 边框，padding内边距和margin外边距4 个部分组成。
如图1所示。
图1 盒子模型
一个盒子实际所占有的宽度或高度是由内容+内边距+边框+外
边框组成的。
在css中，可以通过设定width和height的值来控制内容所占的矩形的大小，并且对于任何一个盒子，都可以分别设定 4 条边各自的 boder、padding 与margin。
因此只要利用好这些属性就很够实现各种各样的排版效果。
2 div+css的基本设计
若采取div和css的网页布局结构，首先需要用div来分块，定义语义结构；然后用css来定位和添加样式，如浮动、位置、对
齐属性、加入背景等；最后在这个css定义的各个块中添加相应的样式，如文字、图片等。
下面通过最常用的三栏式自适应宽度布局实例介绍使用div+css布局网页的基本方法。
用标记把网页区分成不同的区块,包括header、content（其中有sidebar边栏区域和main主体区域）、footer三个区域，分别作为网页的头部、内容和版权区域。
编写html文档代码如下：
头部
边栏
主要内容
版权
设置其css样式文件代码如下：
#container{margin:0 auto;width:90%;}
#header{height:200px;margin-top:20px;border:2px solid;} #content{height:500px;width:100%;margin-bottom:10px;} #sidebar{float:right;width:30%;height:500px;border:1px solid;}
#main{float:left;width:70%;height:400px;border:2px solid;}
#footer{height:60px;border:1px solid;}
其中，width属性设置为百分比形式，表示当窗口大小发生变化时，页面的宽度也随之变化。
container的margin属性为0 auto，表示上下边距为0像素，auto表示左右边距为自动，实现网页的居中显示。
sidebar的float属性为right，标识靠右对齐，main的float属性为left，表示靠左对齐，实现中间两列竖栏的显示效果。
border属性为2px solid，表示2个像素宽的实线边框。
3 总结
基于div+css方法实现了网页的布局定位，具有表现和内容相分离等优势，已经成为一种网页设计的趋势和标准。
通过对div和css技术的研究，介绍网页布局应用实例和使用该技术布局网页的方法和流程。
在实际操作过程中还须要根据不同的风格和内容灵活应用各布局元素及css样式。