Layout

Stefanescu Mihai 2 years ago 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>

Programator de ~8 ani, am lucrat la proiecte din mai multe industrstrii, de la eCommerce la telecomunicatii la automatizari. In acest timp am folosi diferite tehnologii, de la PHP, MySQL, PostgreSql, RabbitMq, Redis, Memcached si altele.


Get in touch
Pentru nelamuriri, dubii, comentarii si chestii de pe suflet ne putem auzi pe Discord, Reddit sau poti deschide o discutie noua pe forum

Club-ul este dedicat membrilor si ofera access la mai multe zone ale website-ului.
Login Register

🔖 Bookmarks
âœĻ Pentru a sustine aceasta comunitate am sa te rog sa te autentifici sau sa te inregistrezi!

🌊ïļ Discord
Back to top
Folosim cookie-uri pentru a oferi functionalitatile critice ale aplicatiei Invata-Programare. Folosim cookie-uri si pentru a analiza traficul, pentru care e nevoie de consimtamantul dvs. explicit.