第5章Divcss网页布局.
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
《商务网页设计与制作》
导入
长沙民政
DIV+CSS已成为网站标准（或称“WEB标准”）中常用术语之一，其中DIV 是一个标签，称为块元素（或层元素）。DIV元素是用来为html文档内大 块（block-level）的内容提供结构和背景的元素，类似于表格技术中的 <tabele>标签。DIV的起始标签和结束标签之间的所有内容都是用来构成 这个块的。块的大小和位置由其属性来控制，或者是通过使用样式表（即 CSS）格式化这个块来进行控制。
2、网页DIV布局实现
长沙民政
新建站点，在该站点中新建index.html网页，切换到代码模式下，自动产生以下内容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </head> <body> </body> </html>
本文档采用简体中文编码；还有一种常用的编码是UTF- 8编码，它是国际
通用的编码。不管采用哪种编码，本文档中包含的css样式表或包含的其它 文件中的代码必须和本文档的代码编码一致，否则会出现乱码。
《商务网页设计与制作》
任务1：首页DIV框架制作
长沙民政
在<body></body>标签对中写入DIV的基本结构，代码如下： <body> <DIV id="container"><!--页面层容器--> <DIV id="Header"><!--页面头部--></DIV> <DIV id="Banner"><!--页面广告--></DIV> <DIV id="Nav"><!--页面导航--></DIV> <DIV id="Content"><!--主体内容--></DIV>
《商务网页设计与制作》
任务1：首页DIV框架制作
长沙民政
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 以上语句说明该文档是过渡类型，另外还有框架和严格类型，目前一般
表示部分的意思。页面分块如下图所示：
《商务网页设计与制作》
任务1：首页DIV框架制作
实际的页面布局及嵌套关系如下图所示。
长沙民政
《商务网页设计与制作》
任务1：首页DIV框架制作
长沙民政
根据上图的分析，本页面DIV结构如下（此处用样式来区分不同的DIV）
│body {} /*HTML元素，具体不做说明*/
└#Container {} /*页面层容器*/ ├#Header {} ├#Nav {} ├#Banner {} └#Footer {} /*页面头部*/ /*页面导航*/ /*页面广告*/
├#Content {} /*主体内容*/ /*页面底部*/
《商务网页设计与制作》
任务1：首页DIV框架制作
都采用过渡类型。因浏览器对XHTML的解析比较宽松，允许使用HTML4.01
中的标签，但必须符合XHTML的语法。建议保留这句话，删除它可能引 起某些样式表失效，或产生其它意想不到的问题。
《商务网页设计与制作》
任务1：首页DIV框架制作
长沙民政
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 表示文档的语言编码，类似平时说的汉语、英语。“gb2312”是告诉浏览器，
《商务网页设计与制作》
最终网站首页效果图
长沙民政
将本项目的实施分解为以下几个子任务：
任务1：首页DIV框架制作 任务2：内容制作 任务3：CSS特效导航栏制作
《商务网页设计与制作》
长沙民政
CSS：层叠样式表(Cascading Style Sheet ),定义了如何显示HTML元素， 用来控制网页的样式和布局。
CSS控制div外观示意图
《商务网页设计与制作》
长沙民政
由此可见，应用了CSS的Div外观和字体大小都与默认的样式不同。 因此，人们常用不同的CSS来区分DIV。（在这里#ZW为一个ID样式，
其细节说明参考后续内容）
《商务网页设计与制作》
任务1：首页DIV框架制作
1、网页DIV层次规划
长沙民政
通过分析，网页可以分成几个大的区域，将页面用DIV分块。DIV是HTML的标签，
长沙民政
第五章 DIV+css网页布局
《商务网页设计与制作》
长沙民政
学习目标
• • 掌握DIV+CSS方法布局网页 熟练运用CSS 美化网页
《商务网页设计与制作》
长沙民政
项目概述
• 小小李所在的项目团队承接了长沙市碧雅园花卉苗木基地网站建设业务，通 过前期需求分析，网页美工小王已绘制了网站首页的效果图。经理让小李在 两天时间内根据效果图，为该苗木基地网站制作静态的前台页面。为方便与 网站后台系统集成，要求小李使用DIV+CSS技术制作网站的前台页面。
《商务网页设计与制作》
长沙民政
例如在某个页面<body></body>中输入如下代码： <body>
<div></div>
<div></div> </body> 在设计模式下，产生的效果如下图所示。
Байду номын сангаас
Div示意图
《商务网页设计与制作》
长沙民政
在<head></head>中插入以下代码，用来定义一个名为zw的样式： <head> <style type="text/css"> <!-#zw {font-size: 12px; width:200px; } --> </style> </head> <body> <div id="zw">This is a test</div> <div>This is a test</div> </body> 产生的效果如下图所示。