职称计算机手机看课
您的位置:职业培训教育网  > 职称计算机 > 复习指导 > 复习资料 > 正文

HTML结构化DIV+CSS布局入门指南(一)

2008-03-19 13:24  来源: 纠错 打印 收藏   

  你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习:

  第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加CSS.这篇文章将告诉你应该怎样把HTML结构化。

  另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,、hspace、align=“left”等等)束手无策,不知道该转换成对 应的什么CSS语句。

  当你解决了第一种问题,知道了如何结构化你的HTML,我再给出一个列表,详细列出原来的表现属性用什么CSS来代替。

  结构化HTML

  我们在刚学习网页制作时,总是先考虑怎么设计,考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。

  如果你希望你的HTML页面用CSS布局(是CSS-friendly的),你需要回头重来,先不考虑“外观”,要先思考你的页面内容的语义和结构。

  外观并不是最重要的。一个结构良好的HTML页面可以以任何外观表现出来,CSS Zen Garden是一个典型的例子。CSS Zen Garden帮助我们最终认识到CSS的强大力量。

  HTML不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义,显示在任何地方,任何网络设备上。

  开始思考

  首先要学习什么是“结构”,一些作家也称之为“语义”。这个术语的意思是你需要分析你的内容块,以及每块内容服务的目的,然后再根据这些内容目的建立起相应的HTML结构。

  如果你坐下来仔细分析和规划你的页面结构,你可能得到类似这样的几块:

  标志和站点名称主页面内容站点导航(主菜单)

  子菜单搜索框功能区(例如购物车、收银台)

  页脚(版权和有关法律声明)

  我们通常采用DIV元素来将这些结构定义出来,类似这样:

  <div id=“header”></div>

  <div id=“content”></div>

  <div id=“globalnav”></div>

  <div id=“subnav”></div>

  <div id=“search”></div>

  <div id=“shop”></div>

  <div id=“footer”></div>

  这不是布局,是结构。这是一个对内容块的语义说明。当你理解了你的结构,就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块,也可以嵌套另一个DIV.内容块可以包含任意的HTML元素——标题、段落、图片、表格、列表等等。

  根据上面讲述的,你已经知道如何结构化HTML,现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方,再指定这个块的颜色、字体、边框、背景以及对齐属性等等。

  使用选择器是件美妙的事id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标 题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则,就可以完全不同于#content里的图片规则。

  另外一个例子是:你可以通过不同规则来定义不同内容块里的链接样式。类似这样:#globalnav a:link或者 #subnav a:link或者#content a:link.你也可以定义不同内容块中相同元素的样式不一样。例如,通过#content p和#footer p分别定义#content和#footer中p的样式。从结构上讲,你的页面是由图片、链接、列表、段落等组成的,这些元素本身并不会对显示在什么网络 设备中(PDA还是手机或者网络电视)有影响,它们可以被定义为任何的表现外观。

  一个仔细结构化的HTML页面非常简单,每一个元素都被用于结构目的。当你想缩进一个段落,不需要使用blockquote标签,只要使用p标签,并对p 加一个CSS的margin规则就可以实现缩进目的。p是结构化标签,margin是表现属性,前者属于HTML,后者属于CSS.(这就是结构于表现的 相分离。)

  良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如,原先的代码<table width=“80%” cellpadding=“3” border=“2” align=“left”>,现在可以只在HTML中写<table>,所有控制表现的东西都写到CSS中去,在结构化的HTML中, table就是表格,而不是其他什么(比如被用来布局和定位)。

  亲自实践一下结构化

  上面说的只是最基本的结构,实际应用中,你可以根据需要来调整内容块。常常会出现DIV嵌套的情况,你会看到“container”层中又有其它层,结构类似这样:

  <div id=“navcontainer”>

  <div id=“globalnav”>

  <ul>a list</ul>

  </div>

  <div id=“subnav”>

  <ul>another list</ul>

  </div>

  </div>

  嵌套的div元素允许你定义更多的CSS规则来控制表现,例如:你可以给#navcontainer一个规则让列表居右,再给#globalnav一个规则让列表居左,而给#subnav的list另一个完全不同的表现。

  用CSS替换传统方法下面的列表将帮助你用CSS替换传统方法:

  HTML属性以及相对应的CSS方法HTML属性

  CSS方法说明align=“left”

  align=“right” float: left;

  float: right; 使用CSS可以浮动 任何元素:图片、段落、div、标题、表格、列表等等

  当你使用float属性,必须给这个浮动元素定义一个宽度。

[1][2]

2016年职称计算机考试网上辅导
课程名称
老师/课时数/免费试听
价格
购买课程
中文Windows WIN7操作系统
100元
中文Windows XP操作系统
100元
Word 2003中文字处理
100元
Excel 2003中文电子表格
100元
PowerPoint 2003中文演示文稿
100元
Word 2007中文字处理
100元
Excel 2007中文电子表格
100元
PowerPoint 2007中文演示文稿
100元
金山演示2005
100元
Internet应用(XP)
100元
Internet应用(Win7)
100元
Photoshop 6.0图像处理
100元
Flash MX 2004动画制作
100元
Access 2000数据库管理系统
100元
WPS Office办公组合中文字处理
100元
金山文字2005
100元
金山表格2005
100元
FrontPage 2000网页制作
100元
Dreamweaver MX 2004网页制作
100元
AutoCAD2004制图软件
100元
Authorware 7.0多媒体制作
100元
Visual Foxpro 5.0数据库管理系统
100元
Photoshop CS4图像处理
100元
Project 2000项目管理
100元
用友财务(U8)软件
100元
用友财务(T3)会计信息化软件
100元
Frontpage 2003网页制作
100元
相关资讯:
网站导航:
职业培训教育网                    更多>>
 经 济 师 指南 动态 查分 试题 复习  职 称 英 语 指南 动态 查分 试题 复习
 职称计算机 指南 动态 查分 试题 复习  招 标 师 指南 动态 查分 试题 复习
 公 务 员 指南 动态 查分 试题 复习  人力资源管理 指南 动态 查分 试题 复习
 教师资格 指南 动态 查分 试题 复习  农村信用社 指南 动态 查分 试题 复习
 公共营养师 指南 动态 查分 试题 复习  心理咨询师 指南 动态 查分 试题 复习
一级消防师 指南 动态 查分 试题 复习 二级消防师 指南 动态 查分 试题 复习

·考试简介 ·报名条件 ·考试科目 ·免考条件
·考试时间 ·考试证书 ·成绩查询 ·指定教材
·合格标准 ·证书期限 ·职称英语

  • 视频课程
按教材章节体系全面讲解,
帮助考生掌握知识点、夯实基础。
视频课程

  

真实环境模拟;
紧扣最新大纲;
免费试用,终身升级;
题库及时更新;
版权声明
  1、凡本网注明 “来源:职业培训教育网”的所有作品,版权均属职业培训教育网所有,未经本网授权不得转载、链接、转贴或以其他方式使用;已经本网授权的,应在授权范围内使用,且必须注明“来源:职业培训教育网”。违反上述声明者,本网将追究其法律责任。
  2、本网部分资料为网上搜集转载,均尽力标明作者和出处。对于本网刊载作品涉及版权等问题的,请作者与本网站联系,本网站核实确认后会尽快予以处理。
  本网转载之作品,并不意味着认同该作品的观点或真实性。如其他媒体、网站或个人转载使用,请与著作权人联系,并自负法律责任。
  3、本网站欢迎积极投稿
  4、联系方式:
编辑信箱:chinatat@chinatat.com
电话:010-82333888