[HTML & CSS] Realizarea unui Web Layout
Codarea unui Web Layout, folosind DIV-uri si CSS.
Vom incepe cu elementele de baza ale unei pagini web, si anume
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> </body> </html>
In antet-ul paginii (intre tag-urile <head>...</head>) vom adauga regulile CSS, folosind
<style type="text/css"> /* Aici se va afla CSS-ul*/ </style>
Vom crea un DIV care va reprezenta site-ul propriu-zis. Il vom numi "container".
<div class="container"> </div>
Structura site-ului va fi urmatoarea
Nota: Am incercat sa reprezint cu chenar rosu elementele principale, iar cu chenar verde elementele DIV-ului "main".
In limbaj HTML, codul ar arata cam asa
<div class="container">
<div class="header">
</div>
<div class="menubar">
</div>
<div class="main">
<div class="sidebar">
</div>
<div class="content">
</div>
</div>
<div class="footer">
</div>
</div>Pentru inceput, vom adauga o culoare pe fundal, vom aseza site-ul central, si vom stabili latimea acestuia (768 px).
body {
background-color:#292929;
text-align:center /* Pentru IE, ca DIV-ul "container" sa fie asezat central */
}
.container {
width:768px;
margin:auto; /* Centrarea site-urilor, pentru restul browser-elor */
text-align:left;
font:normal 11px Verdana, Arial, Helvetica, sans-serif /* Am setat font-ul "default" pentru site */
}In continuare ne vom ocupa de zona numita header. Pentru afisarea titlului si a descrierii am folosit cate doua DIV-uri. Iata codul HTML
<div class="header">
<div class="header_title"><a href="index.html">Your Site Name</a></div>
<div class="header_description">Your Site Description</div>
</div>Si partea de CSS
.header {
width:768px;
height:134px;
background-image:url(images/header.png); /* Calea catre banner */
background-repeat:no-repeat
}
.header_title, .header_description {
width:768px;
text-align:center;
color:#FFFFFF;
font-weight:bold;
}
.header_title {
padding-top:35px; /* Marginea fata de partea superioara a site-ului */
}
.header_title a{
font-size:40px;
color:#FFFFFF;
text-decoration:none
}
.header_description {
font-size:20px;
padding-top:10px /* Marginea fata de DIV-ul titlului */
}Observam ca ne trebuie banner-ul. De aceea vom deschide in Photoshop sursa layout-ului, vom selecta Layer-ul ce contine banner-ul si vom apasa CTRL + Click pe iconita acestuia. Vom obtine selectia a ceea ce contine Layer-ul, si anume
Nu ne ramane decat sa o copiam (CTRL + C) intr-un alt document (CTRL + N) si sa o salvam (CTRL + S), folosind formatul PNG (daca folositi alt format, va trebui sa modificati calea imaginii in CSS) si numele header.png. Pentru a fi cat mai ordonat, am facut un director numit images in care am pus toate imaginile.
Urmeaza sa lucram la meniu. Codul HTML este urmatorul
<div class="menubar">
<div class="menu">
<a href="index.html#">Link1</a>
<a href="index.html#">Link2</a>
<a href="index.html#">Link3</a>
<a href="index.html#">Link4</a>
<a href="index.html#">Link5</a>
<a href="index.html#">Link6</a>
</div>
</div>Am folosit DIV-ul menu pentru a alinia pe verticala cat mai bine link-urile.
Si stilurile CSS
.menubar {
width:100%;
height:45px;
background-image:url(images/menubar.png);
background-repeat:repeat-x;
text-align:center;
}
.menu {
padding-top:15px /* Marginea superioara folosita pentru a alinia link-urile */
}
.menubar a {
font-weight:bold;
font-size:14px;
color:#000;
text-decoration:none;
margin:0px 20px;
}
.menubar a:hover {
color:#0066CC
}Background-ul pentru meniu, va fi, de fapt, o imagine de 1px latime care se va repeta pe orizontala. Pentru a o obtine, ne vom intoarce la Photoshop si vom selecta Layer-ul ce contine background-ul meniului. Cu ajutorul instrumentului Rectangular Marquee Tool (M) vom realiza o selectie de 1px latime, precum in imaginea urmatoare (am folosit zoom-ul)
Nu urmeaza decat sa efectuam operatiile de mai devreme pentru a salva imaginea intr-un nou fisier, sub denumirea de menubar.png.
DIV-ul main contine cele doua coloane: sidebar si content. Am aplicat acestuia margine superioara, pentru a-l distanta de meniu.
.main {
margin-top:20px;
}Am folosit un DIV box pentru fiecare "cutie" de informatie, cuprinzand titlul si continutul, delimitate de catre doua DIV-uri. Iata codul HTML pentru coloana stanga
<div class="sidebar">
<div class="box">
<div class="box_title">Title</div>
<div class="box_content">Content</div>
</div>
<div class="box">
<div class="box_title">Title</div>
<div class="box_content">Content</div>
</div>
</div>Si cel CSS
.sidebar {
float:left; /* Aliniem coloana in partea stanga */
width:210px
}
.box {
width:100%;
margin-bottom:20px;
}
.box_title {
background-image:url(images/box.png);
width:100%;
height:20px;
margin-bottom:1px;
color:#FFFFFF;
font-size:12px;
font-weight:bold;
text-align:center;
padding-top:7px
}
.box_content {
background-color:#dedede;
padding:5px
}Pentru a obtine imaginea box.png, in Photoshop, vom folosi urmatoarea selectie, copiand din Layer-ul care contine background-ul titlului.
Iata si codul HTML pentru DIV-ul content
<div class="content">
<div class="box">
<div class="box_title">Title</div>
<div class="box_content">Content</div>
</div>
</div>Si partea de CSS
.content {
margin-left:230px;
* width:535px /* Regula speciala pentru IE, pentru ca nu respecta latimea */
}Am folosit un mic "trick". Pentru a nu defini din nou un DIV pentru "cutie", de data aceasta mai lat, am aplicat DIV-ului box o latime de 100% din dimensiunea "parintelui". Astfel incat, in functie de locul unde il folosesc, se va modela de la sine. Cum nu am specificat latimea DIV-ului content (in afara de IE), ci numai marginea in partea stanga, aceasta va fi exact cat sa ajunga pana in extremitatea dreapta a site-ului.
Urmeaza footer-ul. Iata codul HTML
<div class="footer">
<div class="footer_left"><a href="index.html#">Disclaimer</a> - <a href="index.html#">Terms and Conditions</a> - <a href="index.html#">Contact</a></div>
<div class="footer_right">© 2008 <a href="index.html">Your Site Name</a> - All rights reserved</div>
</div>footer_left reprezinta link-urile din partea stanga, iar footer_right zona de copyright.
Iata si partea de CSS
.footer {
width:100%;
height:22px;
background-image:url(images/footer.png);
background-repeat:repeat-x;
font-size:9px;
font-weight:bold;
color:#666666
}
.footer a {
color:#666666;
text-decoration:none
}
.footer a:hover {
text-decoration:underline
}
.footer_left {
float:left;
margin:5px
}
.footer_right {
float:right;
margin:5px
}Intorcandu-ne la Photoshop, vom copia din Layer-ul ce contine background-ul footer-ului urmatoarea selectie
Daca vom adauga asa DIV-ul footer, vom constata ca se aliniaza tot in partea dreapta, precum content (bineinteles, la toate browserele in afara de IE). Acest lucru se datoreaza acelui float: left pe care l-am aplicat DIV-ului sidebar. Pentru a remedia aceasta problema, va trebui sa "curatam" efectele stilului float, adaugand un nou DIV, exact inaintea [i]footer[i]-ului.
<div style="clear:both"></div>
Iar pagina este gata! Nu ramane decat sa ne bucuram de rezultate. Am pus aici intregul cod.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {
background-color:#292929;
text-align:center
}
.container {
width:768px;
margin:auto;
text-align:left;
font:normal 11px Verdana, Arial, Helvetica, sans-serif
}
.header {
width:768px;
height:134px;
background-image:url(images/header.png);
background-repeat:no-repeat
}
.header_title, .header_description {
width:768px;
text-align:center;
color:#FFFFFF;
font-weight:bold
}
.header_title {
padding-top:35px
}
.header_title a{
font-size:40px;
color:#FFFFFF;
text-decoration:none
}
.header_description {
font-size:20px;
padding-top:10px
}
.menubar {
width:100%;
height:45px;
background-image:url(images/menubar.png);
background-repeat:repeat-x;
text-align:center
}
.menu {
padding-top:15px
}
.menubar a {
font-weight:bold;
font-size:14px;
color:#000;
text-decoration:none;
margin:0px 20px
}
.menubar a:hover {
color:#0066CC
}
.main {
margin-top:20px
}
.sidebar {
float:left;
width:210px
}
.box {
width:100%;
margin-bottom:20px
}
.box_title {
background-image:url(images/box.png);
width:100%;
height:20px;
margin-bottom:1px;
color:#FFFFFF;
font-size:12px;
font-weight:bold;
text-align:center;
padding-top:7px
}
.box_content {
background-color:#dedede;
padding:5px
}
.content {
margin-left:230px;
* width:535px
}
.footer {
width:100%;
height:22px;
background-image:url(images/footer.png);
background-repeat:repeat-x;
font-size:9px;
font-weight:bold;
color:#666666
}
.footer a {
color:#666666;
text-decoration:none
}
.footer a:hover {
text-decoration:underline
}
.footer_left {
float:left;
margin:5px
}
.footer_right {
float:right;
margin:5px
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="header_title"><a href="index.html">Your Site Name</a></div>
<div class="header_description">Your Site Description</div>
</div>
<div class="menubar">
<div class="menu">
<a href="index.html#">Link1</a>
<a href="index.html#">Link2</a>
<a href="index.html#">Link3</a>
<a href="index.html#">Link4</a>
<a href="index.html#">Link5</a>
<a href="index.html#">Link6</a>
</div>
</div>
<div class="main">
<div class="sidebar">
<div class="box">
<div class="box_title">Lorem Lipsum</div>
<div class="box_content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut quis nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus enim est, cursus porta, euismod quis, tempor at, lorem. Fusce in tortor. Maecenas lectus velit, vulputate ut, laoreet ac, pretium et, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque rhoncus. Morbi lacus. In vel mi vel erat sollicitudin lacinia. Donec dapibus urna sed felis. Phasellus sed justo. Nullam dignissim, arcu ut nonummy tristique, eros augue laoreet neque, ut tristique arcu tellus eu ipsum. Ut tristique quam et dolor. Nunc metus. Fusce venenatis est et dui tempus facilisis. Donec viverra orci sit amet magna. Aliquam in nulla.
</div>
</div>
<div class="box">
<div class="box_title">Lorem Lipsum</div>
<div class="box_content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut quis nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus enim est, cursus porta, euismod quis, tempor at, lorem. Fusce in tortor. Maecenas lectus velit, vulputate ut, laoreet ac, pretium et, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque rhoncus. Morbi lacus. In vel mi vel erat sollicitudin lacinia. Donec dapibus urna sed felis. Phasellus sed justo. Nullam dignissim, arcu ut nonummy tristique, eros augue laoreet neque, ut tristique arcu tellus eu ipsum. Ut tristique quam et dolor. Nunc metus. Fusce venenatis est et dui tempus facilisis. Donec viverra orci sit amet magna. Aliquam in nulla.
</div>
</div>
</div>
<div class="content">
<div class="box">
<div class="box_title">Lorem Lipsum</div>
<div class="box_content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut quis nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus enim est, cursus porta, euismod quis, tempor at, lorem. Fusce in tortor. Maecenas lectus velit, vulputate ut, laoreet ac, pretium et, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque rhoncus. Morbi lacus. In vel mi vel erat sollicitudin lacinia. Donec dapibus urna sed felis. Phasellus sed justo. Nullam dignissim, arcu ut nonummy tristique, eros augue laoreet neque, ut tristique arcu tellus eu ipsum. Ut tristique quam et dolor. Nunc metus. Fusce venenatis est et dui tempus facilisis. Donec viverra orci sit amet magna. Aliquam in nulla.<br /><br />
Nulla bibendum varius orci. Nam lobortis nisl vitae libero. Vestibulum vehicula nisl quis lorem ultrices ullamcorper. Aliquam tristique massa eu justo. Praesent ac tortor. Aenean aliquam. Duis adipiscing rhoncus justo. Ut posuere, mi at congue mattis, risus augue porta elit, a convallis mi purus et purus. Ut odio. Nullam ultricies euismod odio. Fusce cursus elementum ligula. Mauris pharetra vestibulum nunc. Curabitur tellus nisi, mattis ut, mattis a, aliquam ut, pede. Suspendisse bibendum consectetuer elit. Morbi urna elit, aliquam non, semper ut, ultricies eget, lorem. In justo libero, gravida a, gravida ut, hendrerit quis, lacus. Fusce tellus orci, molestie vitae, sodales vel, ultrices nec, neque. Proin ornare nunc eu risus bibendum fringilla.<br /><br />Pellentesque consequat risus in risus. Curabitur rhoncus. Suspendisse dui enim, tempor vel, porta sagittis, lobortis vitae, turpis. Maecenas ante leo, faucibus eu, sollicitudin vel, malesuada laoreet, quam. Fusce est enim, interdum sit amet, hendrerit quis, laoreet at, neque. Cras eu risus ut odio tincidunt volutpat. Praesent arcu pede, luctus quis, aliquet non, cursus eu, lacus. Proin mattis tincidunt metus. Donec orci turpis, facilisis vel, adipiscing eu, porttitor et, metus. Curabitur condimentum mauris euismod turpis.</div>
</div>
</div>
</div>
<div style="clear:both"></div>
<div class="footer">
<div class="footer_left"><a href="index.html#">Disclaimer</a> - <a href="index.html#">Terms and Conditions</a> - <a href="index.html#">Contact</a></div>
<div class="footer_right">© 2008 <a href="index.html">Your Site Name</a> - All rights reserved</div>
</div>
</div>
</body>
</html>Autor: AdyX
