Layout

postat acum 2 ani de Stefanescu Mihai in categorie HTML

Layout-ul unei pagini web este foarte important si dureaza destul de mult sa faci un design care sa arate bine si sa incarce intr-un mod placut pe orice dispozitiv.

Inprezent exista o multime de framework-uri JavaScript sau CSS ce te ajuta sa faci un design responsiv foarte reusit, dar inca se mai pot face design-uri placute folosind doar div-uri si tabele.In acest curs am sa va arat cateva exemple de layout-uri simple facute in HTML.

Layout pe baza de tabele

Cel mai simplu si popular mod (s-a folosit pana prin 2012-2013 de majoritatea designerilor, iar acum in 2014 a inceput sa nu mai fie asa de folosit)  este folosirea unui tabel pentru scheletul designului tau.

<!DOCTYPE html>
<html>
<head>
<title>Layout HTML folosind tabele</title>
</head>
<body>
<table width="100%" border="0">
  <tr>
    <td colspan="2" bgcolor="#b5dcb3">
      <h1>Asta este partea de head a site-ului</h1>
    </td>
  </tr>
  <tr valign="top">
    <td bgcolor="#aaa" width="50">
      <b>Meniul</b><br />
      HTML<br />
      PHP<br />
      PERL...
    </td>
    <td bgcolor="#eee" width="100" height="200">
        Continutul site-ului
    </td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="#b5dcb3">
      <center>
      Copyright © 2011 Invata-Programare.ro
      </center>
    </td>
  </tr>
</table>
</body>
</html>

Design pe baza de tabele cu mai multe coloane

Puteti face un deisgn pe baza de tabele cu mai multe coloane (stanga/dreapta si continutul pe mijloc).

<!DOCTYPE html>
<html>
<head>
<title>Layout HTML pe 3 coloane</title>
</head>
<body>
<table style='width: 100%;'>
	<tr> <td colspan="3" style='background: #b5dcb3;'>Header</td> </tr>
	<tr>
		<td style='width: 20%;background: #aaa;'>PHP<br/>HTML<br/>CSS<br/>C++<br/>C#</td>
		<td style='background: #efefef;'>content</td>
		<td style='width: 20%;background: #aaa;'>Reclame</td>
	</tr>
	<tr> <td colspan="3" style='background: #b5dcb3;'>Footer</td> </tr>
</table>
</body>
</html>

 Layout pe baza de Div si Span

Div-ul este un element de tip block folosit la gruparea altor elemente HTML. Folosind acest element de tip block putem grupa elemente <span> de tip inline.

Chiar daca putem obtine ceva foarte frumos cu tabele, rolul lor nu este de a fi folosite la layout-ul site-ului, ci sunt mai potrivite pentru afisarea de date tabulare (ex: rapoarte).

<!DOCTYPE html>
<html>
<head>
<title>Layout HTML cu Div si SPAN</title>
</head>
<body>
	<div style='height: 45px;font-size: 30px;background: #b5dcb3;'>Header</div>
		<div>
			<span style='background: #ccc;float: left; width: 10%;'>Stanga</span>
			<span style='background: #efefef; width: 80%;display: inline-block;'>Continut</span>
			<span style='background: #ccc;float: right; width: 10%;'>Dreapta</span>
		</div>
	<div style='height: 45px;font-size: 30px;background: #b5dcb3;'>Footer</div>
</div>
</body>
</html>

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!