Crearea unui machet de pagină și stilizarea
În general, o pagină web constă din multe elemente diferite care pot avea o structură complexă. Prin urmare, la crearea unei pagini web, este necesar să poziționați aceste elemente în mod corespunzător, să le stilizați astfel încât să fie aranjate pe pagină în mod corespunzător. Astfel, apare întrebarea creării unui machet al paginii, a stilizării acesteia.
Există diferite metode, strategii și tipuri de stilizare. Inițial, stilizarea pe baza tabelului era răspândită, deoarece tabelele permit, la nevoie, să împarți foarte ușor și simplu tot spațiul unei pagini web în rânduri și coloane. Rândurile și coloanele sunt destul de ușor de gestionat și în ele se poate poziționa orice conținut. Acest lucru a determinat popularitatea stilizării pe bază de tabel.
Cu toate acestea, stilizarea pe bază de tabel nu creează cele mai flexibile pagini din punct de vedere al designului, ceea ce este deosebit de relevant într-o lume în care nu există o singură rezoluție a ecranului, dar există ecrane mari pe televizoare, ecrane mici pe tablete și phablete, ecrane foarte mici pe smartphone-uri etc. Toată această diversitate de ecrane nu a putut fi satisfăcută de stilizarea pe bază de tabel.
Prin urmare, treptat, i-a succedat stilizarea pe blocuri. Stilizarea pe blocuri este un nume relativ condiționat pentru metodele și tehnicile de stilizare, când în majoritatea paginilor web se utilizează proprietatea CSS float, iar elementul principal de construcție al paginilor web este elementul <div>, adică, de fapt, blocul. Utilizând proprietatea float și elementele div sau alte elemente, se poate crea o structură a paginii din mai multe coloane, asemenea stilizării pe bază de tabel, care va fi mult mai flexibilă.
Anterior, într-una dintre temele precedente, a fost examinată acțiunea proprietății float. Acum o utilizăm pentru a crea o pagină web cu două coloane. Să presupunem că, în partea de sus și în partea de jos, vom avea în mod standard un antet și un subsol, iar în centru, două coloane: o coloană cu meniu sau bara laterală și o coloană cu conținutul principal.
La început, definim toate blocurile. Când lucrăm cu elemente care utilizează înconjurarea și proprietatea float, ordinea lor este importantă. Astfel, codul elementului plutitor, la care este setată proprietatea float, trebuie să vină înaintea elementului care înconjoară elementul plutitor. Adică, blocul barei laterale va veni înaintea blocului conținutului principal:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Stilizare pe blocuri în HTML5</title>
<style>
div{
margin: 10px;
border: 1px solid black;
font-size: 20px;
height: 80px;
}
#header{
background-color: #ccc;
}
#sidebar{
background-color: #ddd;
}
#main{
background-color: #eee;
height: 200px;
}
#footer{
background-color: #ccc;
}
</style>
</head>
<body>
<div id="header">Antetul site-ului</div>
<div id="sidebar">Bara laterală</div>
<div id="
main">Conținutul principal</div>
<div id="footer">Footer</div>
</body>
</html>Deci, deocamdată, pagina arată aproximativ astfel:
Înălțimea, marginea și spațiile dintre blocuri în acest caz sunt adăugate doar pentru frumusețe, pentru a identifica spațiul blocului și pentru a-l separa de alte blocuri.
Apoi, pentru a muta blocul barei laterale în stânga în raport cu blocul conținutului principal și pentru a obține efectul de înconjurare, trebuie să specificăm la blocul barei laterale proprietatea float: left și o lățime preferabilă. Lățimea poate fi fixă, de exemplu, 150 px sau 8 em. Sau, de asemenea, puteți utiliza procente, de exemplu, 30% - 30% din lățimea containerului body.
Pe de o parte, blocurile cu lățime fixă sunt mai ușor de gestionat, dar pe de altă parte, valorile procentuale ale lățimii permit crearea unor blocuri mai flexibile, elastice, care își schimbă dimensiunile când dimensiunile ferestrei browserului se modifică.
Ultimul pas este să setăm spațiul dintre blocul conținutului principal și blocul barei laterale. Deoarece, în timpul înconjurării, blocul înconjurător poate înconjura elementul plutitor atât din dreapta, cât și de jos, dacă elementul plutitor are o înălțime mai mică, atunci trebuie să stabilim un spațiu, cel puțin egal cu lățimea elementului plutitor.
De exemplu, dacă lățimea barei laterale este de 150px, pentru blocul conținutului principal puteți seta un spațiu de 170px, ceea ce va crea un spațiu gol între cele două blocuri.
În acest caz, nu ar trebui să specificăm în mod explicit lățimea blocului conținutului principal, deoarece browserele îl extind automat pentru a ocupa tot spațiul disponibil.
Astfel, luând în considerare tot ce s-a spus mai sus, modificăm stilurile blocurilor barei laterale și conținutului principal în următorul mod:
#sidebar {
background-color: #ddd;
float: left;
width: 150px;
}
#main {
background-color: #eee;
height: 200px;
margin-left: 170px; /* 150px (lățimea barei laterale) + 10px + 10px (2 spații) */
}În cele din urmă, avem bara laterală pe partea stângă a blocului principal:
Înălțimea blocurilor în acest caz este indicată condiționat pentru o mai bună vizualizare, în realitate, de obicei, înălțimea va fi setată automat de browser.
Crearea unei bare laterale drepte va fi similară, doar că acum trebuie să setăm la bara laterală valoarea float:right, iar la blocul conținutului principal un spațiu pe dreapta:
#sidebar{
background-color: #ddd;
float: right;
width: 150px;
}
#main{
background-color:#eee;
height: 200px;
margin-right: 170px;
}
În acest caz, structura html rămâne aceeași, blocul barei laterale trebuie să precede blocul conținutului principal.
