Layout

postat acum 4 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!

Comentariu postate de g la data de 13.05.2019
Amazing blog! Do you have any hints for aspiring writers? I'm hoping to start my own website soon but I'm a little lost on everything. Would you suggest starting with a free platform like Wordpress or go for a paid option? There are so many choices out there that I'm totally confused .. Any tips? Thank you!
Comentariu postate de download minecraft for free la data de 14.05.2019
I'm really enjoying the theme/design of your blog. Do you ever run into any web browser compatibility issues? A few of my blog readers have complained about my site not operating correctly in Explorer but looks great in Chrome. Do you have any solutions to help fix this problem?
Comentariu postate de kyrie shoes la data de 15.05.2019
My spouse and i got really glad Raymond could deal with his web research from the precious recommendations he had while using the weblog. It's not at all simplistic to simply always be making a gift of secrets which often men and women may have been trying to sell. So we know we need you to appreciate for this. All the explanations you've made, the simple site navigation, the friendships your site make it possible to create - it's got mostly excellent, and it's helping our son and our family understand the subject is awesome, and that's extremely indispensable. Thanks for everything!
Comentariu postate de minecraft download for free la data de 16.05.2019
Hi, i read your blog occasionally and i own a similar one and i was just wondering if you get a lot of spam remarks? If so how do you stop it, any plugin or anything you can suggest? I get so much lately it's driving me mad so any support is very much appreciated.
Comentariu postate de download minecraft for free la data de 17.05.2019
Hi there, after reading this awesome piece of writing i am too delighted to share my knowledge here with friends.