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) |
|