不帅 发表于 2015-1-15 23:18:03

来一发应当如何把HTML布局化

有些差异相对轻微,有充分的理由将这两种HTML5规范草案合并为一,让浏览器制造商与网络开发者不必面对不兼容的窘境。网页制造Poluoluo文章简介:第一种多是你还没有了解CSS处置页面的道理。在你思索你的页面全体体现效果前,你应该先思索内容的语义和布局,然后再针对语义、布局增加CSS。这篇文章将告知你应当如何把HTML布局化。
DIV+css的布局
你正在进修CSS结构吗?是否是还不克不及完整把握纯CSS结构?一般有两种情形拦阻你的进修:
 第一种多是你还没有了解CSS处置页面的道理。在你思索你的页面全体体现效果前,你应该先思索内容的语义和布局,然后再针对语义、布局增加CSS。这篇文章将告知你应当如何把HTML布局化。
  另外一种缘故原由是你对那些十分熟习的体现层属性(比方:cellpadding,、hspace、align="left"等等)一筹莫展,不晓得该转换成对应的甚么CSS语句。当你办理了第一种成绩,晓得了怎样布局化你的HTML,我再给出一个列表,具体列出本来的体现属性用甚么CSS来取代。
  布局化HTML
  我们在刚进修网页制造时,老是先思索怎样计划,思索那些图片、字体、色彩、和结构计划。然后我们用Photoshop大概Fireworks画出来、切割成小图。最初再经由过程编纂HTML将一切计划复原体现在页面上。
  假如你但愿你的HTML页面用CSS结构(是CSS-friendly的),你必要转头重来,先不思索“表面”,要先思索你的页面内容的语义和布局。
  表面并非最主要的。一个布局优秀的HTML页面能够以任何表面体现出来,CSSZenGarden是一个典范的例子。CSSZenGarden匡助我们终极熟悉到CSS的壮大力气。
  HTML不单单只在电脑屏幕上浏览。你用photoshop经心计划的画面大概不克不及显现在PDA、挪动德律风和屏幕浏览机上。可是一个布局优秀的HTML页面能够经由过程CSS的分歧界说,显现在任何中央,任何收集设备上。
  入手下手思索
  起首要进修甚么是"布局",一些作家也称之为"语义"。这个术语的意义是你必要剖析你的内容块,和每块内容服务的目标,然后再依据这些内容目标创建起响应的HTML布局。
  假如你坐上去细心剖析和计划你的页面布局,你大概失掉相似如许的几块:
  标记和站点称号
  主页面内容
  站点导航(主菜单)
  子菜单
  搜刮框
  功效区(比方购物车、收银台)
  页脚(版权和有关功令声明)
  我们一般接纳DIV元从来将这些布局界说出来,相似如许:
  <divid="header"></div>
  <divid="content"></div>
  <divid="globalnav"></div>
  <divid="subnav"></div>
  <divid="search"></div>
  <divid="shop"></div>
  <divid="footer"></div>
  这不是结构,是布局。这是一个对内容块的语义申明。当你了解了你的布局,就能够加对应的ID在DIV上。DIV容器中能够包括任何内容块,也能够嵌套另外一个DIV。内容块能够包括恣意的HTML元素---题目、段落、图片、表格、列表等等。
  依据下面报告的,你已晓得怎样布局化HTML,如今你能够举行结构和款式界说了。每个内容块都能够放在页面上任何中央,再指定这个块的色彩、字体、边框、背景和对齐属性等等。
  利用选择器是件美好的事
  id的称号是把持某一内容块的手腕,经由过程给这个内容块套上DIV并加上独一的id,你就能够用CSS选择器来准确界说每个页面元素的表面体现,包含题目、列表、图片、链接大概段落等等。比方你为#header写一个CSS划定规矩,就能够完整分歧于#content里的图片划定规矩。
  别的一个例子是:你能够经由过程分歧划定规矩来界说分歧内容块里的链接款式。相似如许:#globalnava:link大概#subnava:link大概#contenta:link。你也能够界说分歧内容块中不异元素的款式纷歧样。比方,经由过程#contentp和#footerp分离界说#content和#footer中p的款式。从布局上讲,你的页面是由图片、链接、列表、段落等构成的,这些元素自己其实不会对显现在甚么收集设备中(PDA仍是手机大概收集电视)有影响,它们能够被界说为任何的体现表面。
  一个细心布局化的HTML页面十分复杂,每个元素都被用于布局目标。当你想缩进一个段落,不必要利用blockquote标签,只需利用p标签,并对p加一个CSS的margin划定规矩就能够完成缩进目标。p是布局化标签,margin是体现属性,前者属于HTML,后者属于CSS。(这就是布局于体现的相分别.)
  优秀布局的HTML页面内几近没有体现属性的标签。代码十分洁净简便。比方,本来的代码<tablewidth="80%"cellpadding="3"border="2"align="left">,如今能够只在HTML中写<table>,一切把持体现的器材都写到CSS中往,在布局化的HTML中,table就是表格,而不是其他甚么(好比被用来结构和定位)。
  亲身理论一下布局化
  下面说的只是最基础的布局,实践使用中,你能够依据必要来调剂内容块。经常会呈现DIV嵌套的情形,你会看到"container"层中又有别的层,布局相似如许:
  <divid="navcontainer">
  <divid="globalnav">
  <ul>alist</ul>
  </div>
  <divid="subnav">
  <ul>anotherlist</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属性,必需给这个浮动元素界说一个宽度。
  marginwidth="0"leftmargin="0"marginheight="0"topmargin="0"margin:0;利用CSS,margin能够设置在任何元素上,不单单是body元素,更主要的,你能够分离指定元素的top,right,bottom和left的margin值。
  vlink="#333399"alink="#000000"link="#3333FF"a:link#3ff;
  a:visited:#339;
  a:hover:#999;
  a:active:#00f;
  在HTML中,链接的色彩作为body的一个属性值界说。全部页面的链拂尘格都一样。利用CSS的选择器,页面分歧部分的链接款式能够纷歧样。
  bgcolor="#FFFFFF"background-color:#fff;在CSS中,任何元素都能够界说背景色彩,不单单范围于body和table元素。
  bordercolor="#FFFFFF"border-color:#fff;任何元素都能够设置边框(boeder),你能够分离界说top,right,bottom和left
  border="3"cellspacing="3"border-width:3px;用CSS,你能够界说table的边框为一致款式,也能够分离界说top,right,bottomandleft边框的色彩、尺寸和款式。
  你可使用table,tdorth这些选择器.
  假如你必要设置无边框效果,可使用CSS界说:border-collapse:collapse;
  <brclear="left">
  <brclear="right">
  <brclear="all">
  clear:left;
  clear:right;
  clear:both;
  很多2列大概3列结构都利用float属性来定位。假如你在浮动层中界说了背景色彩大概背景图片,你可使用clear属性.
  cellpadding="3"
  vspace="3"
  hspace="3"padding:3px;用CSS,任何元素都能够设定padding属性,一样,padding能够分离设置top,right,bottomandleft。padding是通明的。
  align="center"text-align:center;
  margin-right:auto;margin-left:auto;
  Text-align只合用于文本.
  象div,p如许的块级能够经由过程margin-right:auto;和margin-left:auto;来程度居中
  一些使人遗憾的技能和事情情况
  因为扫瞄器对CSS撑持的不完美,我们偶然候不能不接纳一些技能(hacks)或创建一种情况(Workarounds)来让CSS完成传统办法一样的效果。比方块级元素偶然候必要利用程度居中的技能,盒模子bug的技能等等。一切这些技能都在MollyHolzschlag的文章《IntegratedWebDesign:StrategiesforLong-TermCSSHackManagement》中有具体申明。
  别的一个关于CSS技能的资本站点是BigJohn和HollyBergevin的“PositionisEverything”。
  了解浮动举动
  EricMeyer的《ContainingFloats》将匡助你把握怎样利用float属性结构。float元素偶然候必要扫除(clear),浏览《HowToClearFloatsWithoutStructuralMarkup》将十分有匡助。</p>
历经多年来的停滞不前,如今全球信息网联盟(WorldWideWebConsortium,W3C)重拾HTML标准化。

飘飘悠悠 发表于 2015-1-17 21:43:10

帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

莫相离 发表于 2015-1-25 21:52:34

Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

老尸 发表于 2015-2-4 09:14:30

学Dreamweaver技术的过程其实是一个增加信心的过程。

山那边是海 发表于 2015-2-9 21:32:04

还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

简单生活 发表于 2015-2-27 22:32:30

每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。

分手快乐 发表于 2015-3-9 16:28:10

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。

乐观 发表于 2015-3-17 01:07:59

经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.

小女巫 发表于 2015-3-23 13:05:18

直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
页: [1]
查看完整版本: 来一发应当如何把HTML布局化