HTML lapas izkārtojuma veidošana, tas vienkārši jāzin

Lietotāju novērtējums:

/ 2

Detaļas: Publicēts Pirmdiena, 16 Decembris 2013 18:41; Skatīts: 1302

Website izkārtojums, elementu izvietojums

Lielākā daļa tīmekļa vietnes ir izveidojuši savu saturu vairākās kolonnās (formatēti,
piemēram, žurnāli vai avīzes).

Vairākas kolonnas ir izveidotas, izmantojot <div> vai <table> elementus. CSS tiek izmantoti,
lai pozicionētu elementus vai lai radītu fonu un attiecīgi noformatētu saturu.

	Pat ja tas ir iespējams izveidot jauku izkārtojumus ar HTML tabulām, tabulas tika izstrādātas, lai saturēt tabulas datus - ne kā izkārtojuma rīks!

HTML Izvietojums - Izmantojot <div> Elementu

Div elements ir bloka līmeņa elements, ko izmanto grupējot HTML elementus.

Nākamajā piemērā izmanto piecus div elementus, lai izveidotu vairāku kolonnu izkārtojumu,
es ar krāsām atdalīšu tos DIV elementu, lai būtu saprotamāk:

Piemērs

<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:500px"> <-- kā pēc nosaukuma
var saprast, šitais <div> ir konteineris visam saturam.  -->

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com</div>

</div>    <-- satura beigas -->

</body>
</html>

Izmēģiniet to pats »

HTML kods rada šādu rezultātu:

Main title of web page

Izvēlne
HTML
CSS
JavaScript

Saturs iet šeit

Autortiesības © W3Schools.com

HTML Izvietojums (izkārtojums)- izmantojot tabulas

Vienkāršs veids, kā izveidot izkārtojumu, ir, izmantojot HTML <table> tag.

Vairāki kolonnas var tikt izveidotas, izmantojot <div> vai <table> elementus.
CSS tiek izmantots, lai nostādīt elementus, vai, lai radītu fonu ,...........

	Izmantojot <table> izveidot jauku izkārtojums nav pareiza izmantošana elementa. No <table> elementa mērķis ir parādīt tabulas datus!

Nākamajā piemērā izmanto tabulu ar 3 rindām un 2 slejām - pirmo un pēdējo rindu
apvieno kolonnās, izmantojot colspan atribūtu, arī mēģināšu sadalīt krāsās,lai būtu
saprotamāk:

Piemērs

<!DOCTYPE html>
<html>
<body>

<table width="500" border="0">   <!-- tabula sākas, visa lapas satura
konteiners -->
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>

<tr>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;">
Content goes here</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</td>
</tr>
</table>           <!-- satura beigas (tabulas) -->

</body>
</html>

Izmēģiniet to pats »

HTML kods rada šādu rezultātu:

Main title of web page
Izvēlne HTML CSS JavaScript	Satura iet šeit
Autortiesības © W3Schools.com

HTML izkārtojums - Noderīgi padomi

Padoms: Lielākās priekšrocības, izmantojot CSS ir tas, ka, ja jums vietu CSS kodu ārējā
stila lapas, jūsu vietne kļūst daudz vieglāk uzturēt. Jūs varat mainīt izkārtojumu visām savām
lapām, rediģējot vienu failu. Lai uzzinātu vairāk par CSS, izpētīt mūsu CSS pamācību .

Padoms: Tā kā uzlabotam izkārtojumam vajadzīgs laiks, lai izveidotu, ātrāks variants ir
izmantot veidni, jeb template. Meklēt Google bezmaksas tīmekļa vietni, veidnes - templates
(tie ir pre-built mājas
izkārtojumi var izmantot un pielāgot).

Ja šajos piemēros kaut kas nebija īsti saprotams, droši komentējiet, pēc vajadzības izskaidrošu
katru rindu ;).

HTML izkārtojums Birkas

Tag	Description
<div>	Defines a section in a document (block-level)
<span>	Defines a section in a document (inline)