În partea anterioară, am creat o prezentare pentru paginile web ale site-ului nostru Web. Și astfel le-au făcut mai atractive.
Astfel de creatii mizerabile de Web au fost tipice pentru mijlocul anilor '90 - zorii epoca WWW. Acum arata, cel putin, arhaice.
Deci, următorul pas pe care îl vom face este crearea de pagini Web mai atractive și mai ușor de utilizat. Cu alte cuvinte, vom face Web design. Și anume design-ul web al containerului.
De această dată, partea teoretică va fi destul de lungă. Vom învăța principiile de proiectare a paginilor Web moderne, vom lua în considerare schema cea mai frecvent utilizată a acestui design, vom afla ce este markupul și cum este creat și vom cunoaște o nouă schemă de creare a navigației pe un site Web, decât ierarhia pe care o cunoaștem (vezi Capitolul 6).
Dezavantaje ale Text Web Design
Proiectul bazat pe web, pe baza căruia am creat paginile Web ale primului nostru site web, este adesea numit text. diferența de: toate fragmentele conținutului paginii web sunt în același „flux“ a textului și a făcut ca unele dintre capitolele și secțiunile sale, precedate de antete. Aceasta este cea mai veche versiune de Web-design; acesta este modul în care priviți primele pagini Web.
Capitolul 13. Designul containerului Web
Avantajul designului web-textual este unul - ușurința implementării. De fapt, o pagină Web conține doar informații care ar trebui să fie prezente pe aceasta; Orice elemente speciale concepute pentru a crea design-ul în sine, în acest caz nu există.
Are mai multe deficiențe.
Utilizat pe site-uri Web construite folosind Web design text, sistemul de navigare ierarhic este incomod, deoarece nu vă permite să mergeți la pagina Web dorită cu un singur clic.
Paginile web de text sunt extrem de arhaice.
Deci, va trebui să căutăm o alternativă la un design web bazat pe text, care nu are aceste dezavantaje.
Amenajarea paginilor web
Și există o astfel de alternativă!
În loc de un "flux" de text pe pagina Web, mai multe sunt create. Ca rezultat, pagina Web este împărțită în mai multe coloane separate, fiecare conținând propriul fragment al conținutului său. Astfel, sunt evidențiate coloanele separate pentru bara de navigare, știrile site-ului Web și, bineînțeles, conținutul principal al paginilor web.
Apropo, schema prezentată în Fig. 13.1, este acum folosit în practică cel mai adesea.
Fig. 13.1. Schema unei pagini Web creată folosind markup
În general, structura coloanelor și blocurilor largi rămâne neschimbată. Dacă apar modificări, ele nu sunt foarte semnificative. De exemplu, coloana cu știrile site-ului Web, care este prezentă pe pagina principală, lipsește pe celelalte pagini Web.
Ambele coloane și blocuri largi sunt în curs de formare folosind containere bloc. (Anterior, pentru acest lucru au fost utilizate și tabele.) Parametrii locației și dimensiunii acestor elemente sunt specificați utilizând stilurile CSS. După cum puteți vedea, pentru aceasta folosim deja tehnologii Internet cunoscute.
Totalitatea elementelor paginii Web destinate divizării paginii web în coloane și blocuri largi se numește marcare. În plus, același principiu se numește principiul divizării conținutului unei pagini Web în fragmente.
Beneficiile utilizării marcajului atunci când creați pagini web sunt enumerate mai jos.
Deoarece fiecare piesă semnificativă de conținut este localizată separat, procesul de căutare a informațiilor necesare pe pagina Web este mult simplificat.
Paginile web create folosind marcajele arată mult mai bine și mai moderne decât textul simplu.
De asemenea, dezavantajele au loc.
Capitolul 13. Designul containerului Web
Fiecare pagină web, în plus, trebuie să includă elemente care formează marcajele în sine, ceea ce sporește în continuare volumul acestora.
Deoarece paginile web conțin mai multe fragmente identice (bara de navigare, titlul site-ului web etc.), costurile forței de muncă pentru editarea conținutului acestor fragmente cresc. Deci, dacă trebuie să schimbăm, să spunem, bara de navigare, va trebui să facem acest lucru pe toate paginile Web ale site-ului Web.
Dar aceste dezavantaje nu sunt atât de semnificative și se estompează în fața celor mai bogate posibilități de proiectare a paginilor Web furnizate de markup. Adesea, astfel de pagini web pentru varietatea de design nu sunt inferioare paginilor ziarelor și chiar le depășesc. Și tu crezi de ce presa tipărită moarte.
Marcare prin containere bloc. Container Web Design
Așa cum am menționat deja, în momentul în care marcarea paginilor web este cel mai adesea creată folosind containere bloc cunoscute în Capitolul 12. Există mai multe motive pentru aceasta.
Cu ajutorul containerelor, putem realiza un proiect de aproape orice complexitate, constând din mai multe coloane și blocuri largi având lățimi diferite, evidențiate cu un fundal colorat, linii și muchii. Aceste containere pot conține orice: text, imagini, tabele și alte recipiente cu conținut diferit.
HTML-ul care creează un container bloc este extrem de compact. De fapt, pentru a pune un container pe o pagină Web, este nevoie doar de o pereche de etichete -
• Containerele sunt manipulate rapid de către browserele Web moderne, direct la viteza fulgerului.
Din păcate, containerele ca mijloc de creare a marcajului au dezavantaje.
În unele cazuri este dificil să se realizeze designul dorit cu ajutorul containerelor și, pe lângă acestea, trebuie să utilizați și mese.
Din mai multe motive (vom examina mai târziu), conținutul paginilor Web construite pe containere poate avea o lățime fixă. De fapt, astfel de pagini web sunt concepute pentru o rezoluție specifică a ecranului.
Cu toate acestea, aceste deficiențe nu pot fi numite critice. În caz contrar, containerele ca mijloc de creare a marcajului ar fi cu greu câștigat popularitate.
Rămâne de spus că modul de creare a marcării utilizând containere bloc a fost numit un design web al containerului.
Trimiteți-le prietenilor: