Easywd.lv Kā izveidot mājas lapu

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

Lietotāju novērtējums:  / 2
SliktākaisLabākais 

 

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.

Piezīme 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 ,...........

Piezīme 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

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