Crearea unui design simplu de pagină web
Folosind informațiile obținute din temele anterioare, să creăm un design de bază pentru o pagină web simplă. În primul rând, să definim structura de bază a paginii web:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet">
<title>Stilizare pe blocuri în HTML5</title>
</head>
<body>
<div id="header">
<h1>MySyte.com - Site despre Lorem Ipsum</h1>
<div id="nav">
<ul>
<li><a href="#">Acasă</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Despre site</a></li>
</ul>
</div>
</div>
<div class="wrapper">
<div id="sidebar1" class="aside">
<h2>Pasajul standard Lorem Ipsum</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..."</p>
</div>
<div id="sidebar2" class="aside">
<h2>Traducerea din 1914 de H. Rackham</h2>
<p>Este un fapt stabilit că un cititor va fi distras de conținutul citibil al unei pagini atunci când se uită la aspectul său.</p>
<h3>Opțiuni</h3>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</div>
<div id="article">
<h2>Ce este Lorem Ipsum?</h2>
<p>Lorem Ipsum este pur și simplu textul surogat al industriei tipografice și de setare a textelor...</p>
<p>Contrar credinței populare, Lorem Ipsum nu este pur și simplu text aleatoriu. Are rădăcini într-o lucrare de literatură latină clasică din 45 î.e.n., fiind vechi de peste 2000 de ani...</p>
</div>
</div>
<div id="footer">
<p>Contacte: admin@mysyte.com</p>
<p>Drepturi de autor (c) MySyte.com, 2016</p>
</div>
</body>
</html>Începutul cuprinde antetul site-ului - un bloc cu header, care include titlul paginii și bara de navigație. Apoi urmează blocul wrapper, care conține două bare laterale și blocul principal de conținut al paginii. Barele laterale, de asemenea, conțin anumite informații, dar este important că sunt definite înaintea blocului principal. La final, se află un mic footer.
Începutul paginii web definește includerea fișierului styles.css, care va stiliza pagina web. Prin urmare, creăm un fișier styles.css în același director cu pagina web și definim următorul conținut:
* {
box-sizing: border-box;
}
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, ul, li{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
body {
font-family: Verdana, Arial, sans-serif;
background-color: #f7f7f7;
}
#header{
background-color: #f4f4f4;
}
#header h1 {
font-size: 24px;
text-transform: uppercase;
font-weight: bold;
padding: 30px 30px 30px 10px;
clear: both;
}
#nav {
background-color: #eee;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#nav li {
float: left;
list-style: none;
}
#nav a {
display: block;
color: black;
padding: 10px 25px;
text-decoration: none;
border-right: 1px solid #ccc;
}
#nav li:last-child a {
border-right: none;
}
#nav a:hover {
font-weight: bold;
}
#nav:after {
content: " ";
display: table;
clear: both;
}
.wrapper{
background-color: #f7f7f7;
}
.aside h2 {
font-size: 0.95em;
margin-top: 15px;
}
.aside h3 {
font-size: 0.85em;
margin-top: 10px;
}
.aside p, .aside li {
font-size: .75em;
margin-top: 10px;
}
.aside li{
list-style-type: none;
}
#sidebar1 {
float: left;
width: 20%;
padding: 0 10px 0 20px;
}
#sidebar2 {
float: right;
width: 20%;
padding: 0 20px 0 10px;
}
#article{
background-color: #fafafa;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
margin-left: 20%;
margin-right: 20%;
padding: 15px;
width: 60%;
}
#article:after{
clear:both;
display:table;
content:'';
}
#article h2{
font-size: 1.3em;
margin-bottom:15px;
}
#article p{
line-height: 150%;
margin-bottom: 15px;
}
#footer{
border-top: 1px solid #ccc;
font-size: .8em;
text-align: center;
padding: 10px 10px 30px 10px;
}
#nav ul, #header h1, .wrapper, #footer p {
max-width: 1200px;
margin: 0 auto;
}
.wrapper, #nav, #header, #footer{
min-width: 768px;
}Primele trei stiluri resetează setările de stil implicite pentru elementele pe care le folosim, precum și setează stilul elementului body.
Următoarea pereche de stiluri gestionează afișarea antetului și a titlului paginii:
#header{
background-color: #f4f4f4;
}
#header h1 {
font-size: 24px;
text-transform: uppercase;
font-weight: bold;
padding: 30px 30px 30px 10px;
clear: both;
}Următorul set de stiluri gestionează crearea unei bare de navigație orizontale:
#nav {
background-color: #eee;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#nav li {
float: left;
list-style: none;
}
#nav a {
display: block;
color: black;
padding: 10px 25px;
text-decoration: none;
border-right: 1px solid #ccc;
}
#nav li:last-child a {
border-right: none;
}
#nav a:hover {
font-weight: bold;
}
#nav:after {
content: " ";
display: table;
clear: both;
}Într-o temă anterioară s-a discutat detaliat crearea unei bare de navigație orizontale. Principial, aici nu se adaugă nimic nou: pentru elementele <li> se setează plasarea în linie (float: left;), datorită căreia acestea sunt aranjate într-un rând, iar fiecare link este făcut un element de bloc (display: block;)
Apoi urmează setarea părții centrale a paginii, în special, a sidebarurilor:
.wrapper{
background-color: #f7f7f7;
}
.aside h2 {
font-size: 0.95em;
margin-top: 15px;
}
.aside h3 {
font-size: 0.85em;
margin-top: 10px;
}
.aside p, .aside li {
font-size: .75em;
margin-top: 10px;
}
.aside li{
list-style-type: none;
}
#sidebar1 {
float: left;
width: 20%;
padding: 0 10px 0 20px;
}
#sidebar2 {
float: right;
width: 20%;
padding: 0 20px 0 10px;
}Stilul clasei wrapper permite setarea culorii de fundal pentru panourile laterale. Pentru fiecare sidebar se definește o lățime de 20% din lățimea paginii. Valorile procentuale vor permite ajustarea automată a lățimii blocurilor la lățimea ferestrei browserului la extinderea sau îngustarea acesteia.
Apoi urmează stilurile pentru blocul de conținut principal și pentru footer:
#article{
background-color: #fafafa;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
margin-left: 20%;
margin-right: 20%;
padding: 15px;
width: 60%;
}
#article:after{
clear:both;
display:table;
content:'';
}
#article h2{
font-size: 1.3em;
margin-bottom:15px;
}
#article p{
line-height
: 150%;
margin-bottom: 15px;
}
#footer{
border-top: 1px solid #ccc;
font-size: .8em;
text-align: center;
padding: 10px 10px 30px 10px;
}Deoarece panourile laterale au fiecare o lățime de 20%, pentru blocul principal se setează o lățime de 60% și margini de 20% pe dreapta și stânga.
Și la final sunt câteva stiluri destul de importante:
#nav ul, #header h1, .wrapper, #footer p {
max-width: 1200px;
margin: 0 auto;
}
.wrapper, #nav, #header, #footer{
min-width: 768px;
}La început, pentru o serie de selectori se definește o lățime maximă de 1200 de pixeli. Asta înseamnă că elementele principale ale paginii nu vor depăși 1200 de pixeli. Și marginile automate stânga și dreapta vor centra conținutul elementelor.
Adică, la o lățime a browserului de 1400 de pixeli, aceste elemente cu lățimea de 1200 de pixeli vor fi plasate ca și cum ar fi în centru, iar pe dreapta și stânga vor fi margini de (1400-1200)/2 = 100 de pixeli.
Al doilea stil permite setarea unei lățimi minime fixe pentru o serie de elemente. Astfel, în final, la comprimarea ferestrei browserului, sidebarurile și blocul principal vor arăta mai mult sau mai puțin bine, iar la comprimarea ferestrei sub 768 de pixeli se va forma o bară de derulare.
Acest model de dimensiuni nu este ideal. În continuare, vom examina concepte mai flexibile și răspândite bazate pe design adaptiv.
În cele din urmă, vom obține următorul machet simplu:
