Bazele CSS și HTML. Aspect bloc. Lecție despre aspectul blocurilor
Procesul de creare a unui site web necesită foarte multă muncă și necesită anumite cunoștințe în programare și o investiție considerabilă de timp. Nașterea oricărui site web începe cu designerul care își desenează aspectul, apoi aspectul finit este trimis pentru aspect. Acest proces ar trebui examinat mai detaliat.
Anumiți termeni vor ajuta să răspundă la întrebarea ce este aspectul.
Un site web este o colecție de fișiere sau documente electronice aparținând unui singur proprietar (individ sau organizație), situate în rețea și unite sub o singură adresă IP sau nume de domeniu.
Aspectul site-ului web este formarea paginilor sale web într-un editor de text folosind limbajul de marcare hipertext.
Designerul de aspect al paginii web este un specialist în aspect care aranjează textul, graficele și alte tipuri de informații pe o pagină de document (pagina de site).
HTML este principalul limbaj de marcare hipertext pentru paginile de pe Internet. Baza acestui limbaj este un set de elemente închise pe ambele părți într-o etichetă (deschiderea și închiderea fiecărui element are propriile atribute care îi determină principalele proprietăți); Atributul este întotdeauna specificat în eticheta de deschidere.
În termeni mai simpli, sarcina unui designer de layout este să traducă toate elementele unei pagini de site într-o limbă accesibilă oricărui browser de internet. În acest caz, pagina afișată în browser ar trebui să fie extern cât mai aproape de aspectul designerului.
Ce este aspectul site-ului folosind tabele?
Orice document tradus în HTML este un set de elemente specifice închise în etichete. Cu doar câțiva ani în urmă, majoritatea site-urilor web au fost concepute folosind tabele. Codul paginii s-a dovedit a fi foarte greoi și greu de citit. A fost dificil să-i facem modificări, deoarece am continuat să lucrăm la pagină. În plus, browserul de internet percepe tabelul ca un singur obiect, astfel încât afișarea conținutului său începe numai după ce a fost descărcat complet pe computer. Acest lucru este vizibil mai ales pentru acei utilizatori a căror viteză de internet lasă mult de dorit. Momentan folosit extrem de rar. În ciuda acestui fapt, fiecare designer de layout ar trebui să-și cunoască elementele de bază, de exemplu, cel puțin pentru a putea face orice ajustări la codul scris cu câțiva ani mai devreme de predecesorul său care lucrează la crearea site-ului.
Ce este aspectul site-ului folosind blocuri?
Un site care utilizează un element div are avantajele și dezavantajele sale. Principalele sale avantaje includ:
- simplitatea codului, lizibilitatea și compactitatea acestuia;
- capacitatea de a implementa cele mai complexe soluții de proiectant;
Codul scris folosind blocuri este mai ușor de editat ulterior și este convenabil să schimbați designul paginilor site-ului. În acest caz, nu este nevoie să corectați codul HTML în sine. Toate modificările sunt făcute într-un fișier CSS creat separat.
Un designer de layout poate înțelege pe deplin ce înseamnă aspectul site-ului folosind blocuri, cunoscând și folosind tehnologia de foaie de stil în cascadă (CSS) în munca sa. CSS este un limbaj formal distinct folosit pentru a descrie aspectul unei pagini de site. Astfel, după ce a creat cadrul general al paginii în HTML, designerul de layout începe să o proiecteze (definind fundalul paginii, dând diferite culori elementelor acesteia, plasând imagini, scalandu-le etc.) folosind foi de stil în cascadă.
Poate că, în timp, va apărea un mod și mai nou și mai compact de aranjare a paginilor site-ului web. Între timp, designerii de layout care obțin un loc de muncă peste tot trebuie să răspundă la întrebarea ce este aspectul site-ului folosind blocuri și care sunt avantajele acesteia.
Un designer de layout HTML este un specialist care proiectează pagini web. Cu alte cuvinte, creează un șablon HTML pentru un site web folosind cunoștințele despre codul HTML și toate caracteristicile de stil și design grafic.
codificator HTML este un specialist care proiectează pagini web. Cu alte cuvinte, creează un șablon HTML pentru un site web folosind cunoștințele despre codul HTML și toate caracteristicile de stil și design grafic. Profesia este potrivită pentru cei care sunt interesați de informatică (vezi alegerea unei profesii pe baza interesului pentru disciplinele școlare).
HTML - o abreviere pentru Hyper Text Markup Language (engleză) - este un limbaj de marcare hipertext adoptat de World Wide Web pentru crearea și publicarea paginilor web. În consecință, un designer de aspect HTML este un specialist care realizează aspectul paginilor web. Cu alte cuvinte, creează un șablon HTML pentru un site web folosind cunoștințele despre codul HTML și toate caracteristicile de stil și design grafic. Codul generat ar trebui să fie afișat în mod egal în toate browserele („compatibilitate între browsere”), ținând cont de diferitele rezoluții ale monitorului și numărul de culori.
Caracteristicile profesiei
Responsabilitățile funcționale ale unui designer de layout HTML sunt să implementeze conceptul și ideea unui site dezvoltat de un designer web sub formă de cod HTML. Procesul de creare a unui șablon HTML constă în mai multe etape:
- analiza design grafic al site-ului web
- selectarea modelului de șablon
- tăierea sprite-urilor grafice
- Asamblare șabloane HTML
În prezent, există un număr mare de programe de calculator care automatizează munca unui designer de layout, diverse editori de text cu evidențierea codului, editori vizuali (Notepad++, Adobe Dreamweaver), framework-uri front-end (seturi de fragmente de cod și biblioteci de clase pentru accelerarea dezvoltarea unui layout de site prin prototipare - ZurbFoundation -4 etc.). Ele vă permit să scrieți fragmente mari de cod într-un mod vizual, adică rezultatul fiecărei etape de lucru poate fi observat într-o fereastră separată. Dar un codificator HTML profesionist nu folosește aceste programe. El trebuie să fie capabil să utilizeze codificarea HTML manual, fără ajutorul editorilor vizuali, pentru a asigura corectitudinea maximă a codului cu greutate minimă.
Un codificator HTML trebuie să cunoască foile de stil CSS în cascadă, să aibă JavaScript și abilități de bază de programare web în PHP, Perl sau Java, precum și editorii grafici de bază Photoshop, Fireworks, Gimp. Un designer de layout cu experiență poate crea un site web mic folosind editorul de text Microsoft Word cu un număr minim de instrumente și instrumente.
Munca de succes a unui designer de layout HTML se bazează pe trei piloni: cod de înaltă calitate, principii de utilizare și design adaptiv. Cod de înaltă calitate trebuie să fie bine structurat și să aibă designul semantic corect în conformitate cu regulile de optimizare SEO. Principiul de utilizare implică simplitate în dezvoltarea interfeței. Navigarea pe site nu ar trebui să forțeze vizitatorii să se gândească bine. Simplitatea interfeței este cheia succesului proiectului. Design adaptiv va face site-ul prietenos cu dispozitivele mobile.
Când lucrați la proiecte mari, munca unui designer de layout HTML se rezumă la crearea doar a unui aspect al site-ului web. În el sunt instalate diverse module și elemente de către programatori înalt specializați. Dar la proiectele mici, codificatorul HTML trebuie să lucreze cu codul de la început până la sfârșit.
Avantajele și dezavantajele profesiei
- posibilitatea de a învăța o profesie în mod independent
- cerere mare pe piața muncii
- nevoia de îmbunătățire și actualizare constantă a cunoștințelor
- posibilitatea de a lucra de la distanță
- granițele neclare dintre munca unui designer web, programator web și producător de bannere fac posibilă lucrul în domenii conexe.
- există o anumită rutină și monotonie
- nevoia de a sta la computer pentru perioade lungi de timp
Loc de munca
Companii de internet, firme de dezvoltare de site-uri web, studiouri de design, organizații cu proiecte proprii pe internet, muncă independentă
Calități importante
- atentie, concentrare
- capacitatea de concentrare
- răbdare în identificarea propriilor greșeli
- perseverenţă
- precizie
- dorinta de a lucra spre rezultatul final.
Pregătire pentru a deveni un codificator HTML
De regulă, codificatorii HTML stăpânesc singuri profesia. Dar există și cursuri de specialitate. Nu este nevoie de educație specială pentru a obține un loc de muncă. Principala cerință a angajatorilor: experiență de lucru susținută de un portofoliu. Trebuie să știți: HTML (manual), CSS 1, CSS 2, JavaScript, Dreamweaver, Front Pages, Photoshop, PHP, MySQL, XML\XSL.
(în persoană, Moscova). O instituție de învățământ internațional specializată în educația informatică. Funcționează din 1999. 42 de filiale în 16 țări. Cel mai mare centru de instruire autorizat pentru Microsoft, Cisco, Autodesk. Studenții primesc certificate internaționale și o diplomă internațională. Scopul principal este angajarea fiecărui absolvent.
Salariu
Salariu din 04.02.2019
Rusia 15000—70000 ₽
Moscova 35000—100000 ₽
Remunerația depinde de regiunea de reședință a codificatorului HTML, de specificul instituției în care lucrează și de amploarea întreprinderii. Salariul poate varia de la 40 la 70 de mii de ruble pe lună în stadiul inițial. În Moscova și în orașele mari, un designer de layout HTML cu experiență câștigă aproximativ 100 de mii de ruble pe lună.
Etape și perspective de carieră
Un programator HTML începător care a câștigat experiență și se străduiește să își îmbunătățească nivelul profesional în viitor poate aplica pentru posturile de designer web, programator web sau producător de bannere.
Etape ale amenajării site-ului, tipuri de site-uri și metode de layout
Un site web este un set de documente HTML legate logic. Logica prin care aceste documente sunt legate se numește structură a site-ului sau hartă a site-ului.
Înainte de începerea layout-ului, fișierul de design grafic este analizat în detaliu, după care este tăiat în părți, pe baza căruia este alcătuit un document HTML, care este un set structurat de etichete HTML. Acest lucru se întâmplă în mai multe etape:
- se generează o foaie de stil în cascadă cu o descriere a schemei de culori a site-ului și aranjarea elementelor pe pagină
- meniurile, butoanele de formular și toate controalele site-ului sunt formate
- interfața cu utilizatorul este în curs de dezvoltare.
În urma acestor acțiuni, se obține un șablon de site HTML. Dacă avem de-a face cu un site static, în această etapă șablonul este umplut cu conținut, apoi site-ul este încărcat pe hosting.
Dacă site-ul este dinamic, atunci este necesar să se integreze șablonul HTML cu sistemul de management al conținutului site-ului. Această etapă necesită cunoașterea arhitecturii șablonului CMS și a limbajului de programare pe partea de server.
Conform aspectului, toate site-urile sunt împărțite în 3 grupuri:
- Rigid fix
- cauciuc adaptiv (fluid adaptabil)
- Elastic extensibil
Un tip de aspect fix este un design în care lățimea unei coloane sau a unei figuri este specificată în pixeli și specificată cu precizie.
Tipul de layout fluid este un design în care lățimea unei coloane sau a unei figuri este setată ca procent din rezoluția curentă a ecranului.
Fiecare tip de design are propriile sale avantaje și dezavantaje. În fiecare caz specific, alegerea designului depinde de problema rezolvată. Este posibil și un design mixt: unele coloane ale designului tabelului pot fi setate în procente, altele în pixeli.
Metode de aranjare:
Dispunerea tabelului a fost metoda principală de aspect; utilizat în prezent pentru a crea cadre, a alinia elemente, a seta grile modulare și a crea fundaluri colorate.
Aspect folosind straturi. Straturile sunt elemente structurale care sunt plasate pe o pagină web prin suprapunerea lor unele peste altele cu precizie pixelă. Parametrii stratului pot fi modificați dinamic prin scripturi, ceea ce face posibilă crearea diferitelor efecte pe pagină: meniuri derulante, jocuri, bannere extensibile, ferestre plutitoare etc.
Dispunerea blocurilor se realizează folosind blocuri de etichete (
Pe baza principiilor folosirii instrumentelor de marcare HTML, se face o distincție între marcajul logic și cel de prezentare (fizic). De exemplu, textul italic poate fi obținut folosind eticheta , și folosind eticheta . În primul caz, se pune accent logic pe text, care de obicei este afișat cu caractere cursive, iar în al doilea, cursive sunt specificate în mod explicit. Adică, primul caz este concentrat pe scop logic, al doilea - pe aspect (prezentare), iar în al doilea - pe scop logic. Marcajul logic are un avantaj semnificativ - independența față de tipul și designul paginilor web utilizate. În acest caz, puteți utiliza același aspect pentru ecran, imprimare și dispozitive mobile, ajustând în același timp aspectul folosind fișiere de stil separate.
Dezvoltarea unui site web competent este un proces complex în mai multe etape. Aspectul site-ului este o parte integrantă a procesului de producție a site-ului web. Ce este aspectul site-ului - acesta este procesul de creare a unei pagini web pe baza unui aspect gata făcut. Acest proces implică crearea codului paginii utilizând limbajul de marcare hipertext html, adaptat pentru browser, și stilizarea acestuia folosind foi de stil în cascadă (CSS). Nu este nevoie să încercați să configurați singur site-ul, este mai indicat să comandați serviciile unui designer de layout. La urma urmei, trebuie să țină cont de numeroase caracteristici, atât regulile de aspect, cât și parametrii pentru afișarea documentelor în diferite browsere.
Dezvoltarea site-ului ținând cont de regulile de bază ale bunelor maniere
Aspect și design pentru lățimea paginii
Dezvoltarea site-ului, pentru a nu rupe designul gândit inițial, trebuie să țină cont de faptul că internauții au monitoare cu rezoluții diferite. În acest caz, există două opțiuni pentru aspectul designului site-ului web: un site web cu lățime fixă și un site web flexibil. Lățimea unui site fix este determinată pe baza faptului că, conform statisticilor, majoritatea utilizatorilor folosesc monitoare cu o rezoluție de 1024x768 pixeli. Prin urmare, pentru a evita apariția unei bare de defilare orizontale și distorsiunea designului, trebuie să luați o lățime medie a aspectului de aproximativ 800-990 pixeli. Dezavantajul acestei metode de layout este utilizarea ineficientă a spațiului liber. Un aspect fluid al site-ului web se realizează datorită faptului că unitățile de măsură pentru aspectul designului sunt în mare parte procente, ceea ce vă permite să întindeți aspectul pe întreaga lățime a ferestrei browserului. Dispunerea și designul aspectului cauciucului este cel mai de preferat.
Aspectul site-ului ținând cont de compatibilitatea între browsere
Astăzi, există o serie de browsere populare folosite de oameni pentru a naviga pe internet. Acestea includ: Internet Explorer, Opera, Mozilla Firefox, Google Chrome, Netscape Navigator, Safari și altele. Fiecare dintre ele are mai multe versiuni, iar fiecare poate afișa aceeași pagină, reprezentată în format html, în moduri diferite. Toți creatorii de browsere se străduiesc să ajungă la un singur standard pentru utilizarea limbajului de marcare hipertext, dar există încă dezacorduri, așa că aspectul site-ului trebuie să țină cont de compatibilitatea între browsere.
Aspect de site web competent cu cod curat
O altă regulă a bunelor maniere atunci când proiectați un site web este codul curat și frumos. Ce înseamnă? Aceasta înseamnă că codul de markup al paginii HTML este frumos formatat, conține comentarii și blocuri logice evidențiate. Folosirea foilor de stil în cascadă (CSS) va șterge codul de etichete inutile și va ușura semnificativ greutatea site-ului în ansamblu. Dispunerea site-ului folosind toate aceste manipulări este necesară pentru a simplifica codul și veți întâmpina cel mai mic număr de probleme la corectarea, modificarea și finalizarea acestuia. Codul compact corect va face mai ușor pentru motoarele de căutare să indexeze site-ul dvs., iar greutatea sa redusă va reduce timpul de încărcare a site-ului dvs.
Aspect tabelar și bloc al site-ului web
Este posibil să proiectați un site web în două moduri fundamental diferite. Prima modalitate este utilizarea tabelelor. Aspectul tabelului folosește elemente de marcare care nu corespund semanticii pe care o poartă pentru a obține efecte externe, în măsura în care tabelele nu erau destinate inițial să construiască un cadru de pagină, ci serveau pentru introducerea standard de date. Pentru a configura un site web utilizând aspectul tabelului, adesea devine necesar să folosiți mai multe tabele imbricate. Această abordare face adesea foarte dificilă procesarea paginilor de către browser, mărește dimensiunea documentului și reduce viteza de încărcare a fișierelor și poate duce la erori în cod. Este mai convenabil și mai corect, din punctul de vedere al credințelor despre separarea conținutului și designului, să așezi un site folosind straturi (blocuri). Aspectul site-ului bazat pe blocuri oferă mai multe oportunități, vă permite să faceți codul mai compact și să creșteți viteza de încărcare a paginii web. Este mult mai convenabil să personalizați proprietățile stratului prin CSS. Folosind aspectul stratificat, puteți dezvolta mult mai eficient un site web care va fi afișat corect în browsere.
Aspectul site-ului este o muncă pentru profesioniști
Este mai bine să comandați un site de la un profesionist. Un site web proiectat profesional are un stil unificat și afișează toate elementele conceptului de design. Are proprietăți bune de utilizare în navigare și permite chiar și unui utilizator fără experiență să navigheze cu ușurință pe site. Aspectul site-ului ia în considerare uneori nevoia anumitor instrumente de lucru: un computer puternic, cu o cantitate mare de memorie RAM. Și, în sfârșit, doar un profesionist cu experiență înțelege complexitatea comportamentului diferitelor browsere și utilizează corect diferite elemente de stil pentru a afișa cu acuratețe designul paginilor site-ului.
Această lecție este recomandată celor care abia încep să stăpânească complexitățile creării site-urilor web. Contine Noțiuni de bază O HTML și CSS. Urmând instrucțiunile din această lecție pas cu pas, în doar câteva minute vei crea un șablon pentru site-ul tău.
Vom crea un șablon de site folosind aspectul blocului, folosesc eticheta - „ DIV».
Pasul 1 - Marcarea paginii web folosind etichete HTML
În primul rând, trebuie să ne marcam pagina web folosind etichete HTML. Numai după aceasta puteți trece la proiectarea site-ului folosind foi de stil CSS în cascadă.
HTML- Acest limbaj de marcare hipertext. Cu ajutorul lui este creat structura pagini web. Etichetele HTML sunt folosite în aceste scopuri. Sunt cuprinse între paranteze"<" и ">".
Etichetele vin de obicei în perechi - de deschidere și de închidere. Acesta din urmă diferă prin faptul că are un „/” după prima paranteză. (De exemplu:
). Folosind etichete, definiți ce va apărea pe pagina dvs. web.Foi de stil în cascadăCSS aplica mai tarziu. Sunt necesare pentru a plasa conținutul etichetelor în anumite locuri din pagină, precum și pentru a da acestui conținut aspectul dorit.
Cele mai simple etichete de pagină web sunt:
Ulterior, tocmai între etichete veți plasa alte etichete pentru a marca elementele paginii web.
O etichetă importantă pentru structurarea unei pagini este eticheta În interiorul acestei etichete puteți plasa alte etichete HTML de care veți avea nevoie pentru a crea conținutul site-ului dvs. (linkuri, text, imagini etc.). Toate aceste elemente vor fi apoi stilizate folosind foi de stil în cascadă CSS. Acum, folosind un editor grafic (Photoshop de exemplu), să desenăm blocurile paginii noastre web: Codul HTML pentru această pagină va arăta ca mai jos. Acesta este un exemplu de utilizare a etichetei div:
După cum puteți vedea, fiecare etichetă div am dat un anumit Selector ID
. Adică, am dat fiecărui bloc individual al paginii noastre propriul său nume. Acest lucru este necesar pentru ca mai târziu, la stilarea blocurilor din fișierul CSS, să putem distinge un bloc de altul. Există două tipuri selectoare
. ID- folosit pentru blocuri unice, cele care nu se repetă în altă parte a paginii. În timp ce selectorul CLASĂ- sunt folosite pentru a desemna blocuri repetate. De asemenea, am închis toate blocurile într-un bloc " recipient„. Acest lucru se face pentru ca ulterior să ne putem plasa întreaga pagină așa cum ne dorim. Pasul 2 - Atașarea foii de stil CSS
După cum sa menționat deja, foaia de stil CSS determină designul elementelor unei pagini web. Puteți să-l plasați fie în documentul dvs. html, fie să atașați un fișier extern. În acest tutorial vom folosi ultima opțiune. Dacă ați deschis deja pagina web în browser, nu veți găsi nimic acolo. Acest lucru se datorează faptului că nu ți-ai umplut blocurile cu niciun conținut și nici nu le-ai dat nicio formă sau culoare. Puteți adăuga conținut pentru blocuri între etichetele corespunzătoare. Dar vom seta forma, locația, culoarea și alte manifestări externe ale blocurilor folosind un fișier CSS. Dar mai întâi trebuie să-l creați. Să-l numim style.css și să-l plasăm în același folder cu documentul html. După aceasta, în fișierul html, între etichete trebuie să adăugați următoarea linie:
În acest fel legăm aceste două fișiere împreună. Acum, la afișarea unei pagini web, browserul va folosi fișierul de stil corespunzător. Pasul 3 - setați stilul
Sintaxa CSS constă dintr-un selector, o proprietate și o valoare. Un selector este o etichetă pentru care doriți să definiți aspectul oferindu-i o varietate de proprietăți. O proprietate este specificată folosind diverse atribute, care la rândul lor pot lua valori diferite. Pentru a scrie alte selectoare decât o etichetă corp, se folosesc semnele „ #
"fie" .
„. vin înaintea numelui selectorului. Primul este folosit pentru a indica selector ID, al doilea, respectiv pe selector CLASĂ. Un selector poate avea orice număr de proprietăți. Care sunt închise în bretele" {}
". #selector ( Valoarea proprietății; Valoarea proprietății; Valoarea proprietății; }
.selector( Valoarea proprietății; Valoarea proprietății; Valoarea proprietății; }
Avem urmatorii selectori: corp Proprietăți CSS și valori posibile: fundal (fundal) poate fi specificat printr-o imagine sau o culoare sau ambele. Pentru ca imaginea să fie afișată, trebuie să specificați calea către ea. Dacă fundalul primește o culoare, atunci se folosește sistemul hexazecimal (#ffffff pentru alb etc.). Proprietatea color este folosită pentru a defini culoarea textului. marimea fontului- dimensiunea textului, setata in diverse sisteme de masurare, aici vom folosi pixeli. marginea- determină amplasarea blocului. Punctul de plecare poate fi fie fereastra browserului, fie limitele altor elemente ale paginii web. Deoarece dorim să plasăm pagina noastră în mijlocul ferestrei browserului, vom scrie următoarele valori pentru această proprietate: 0px auto 0px auto. Intrarea poate părea mai simplă decât 0px automat. La setarea acestor valori, numărătoarea inversă continuă în sensul acelor de ceasornic: sus - dreapta - jos - stânga. Deoarece sus și jos și dreapta și stânga sunt identice, nu este nevoie să le duplicați. lăţime- latimea blocului. înălţime- înălțime. pluti- o proprietate care ne permite să poziționăm elementele selectoare, în principal la stânga sau la dreapta. Acum să adăugăm codul în fișierul nostru style.css (la urma urmei, l-ați creat deja, nu?): corp ( #container ( #antet ( #navigație ( #meniul ( #conținut ( #subsol ( Notă La momentul scrierii, nu toate browserele afișau corect pagina web creată. Pentru a elimina acest dezavantaj, puteți utiliza un bloc suplimentar, care ar trebui să fie plasat imediat în spatele blocului conţinut. Iată codul său HTML: #clar ( Și între etichete cap Notați ce codificare trebuie să folosească browserul dacă încercați brusc să adăugați text rusesc la blocurile dvs.:
Cod HTML final:
corp (
fundal: #f3f2f3;
culoare: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
dimensiunea fontului: 12px;
}
#container (
fundal: #FFFFFF;
marja: 30px automat;
latime: 900px;
înălțime: 1000px;
}
#antet (
fundal: #838283;
înălțime: 200px;
latime: 900px;
}
#navigație (
fundal: #a2a2a2;
latime: 900px;
înălțime: 20px;
}
#meniul (
fundal: #333333;
plutește la stânga;
latime: 200px;
inaltime: 600px;
}
#conținut (
fundal: #d2d0d2;
plutire: dreapta;
latime: 700px;
inaltime: 600px;
}
#clar (
clar:ambele;
}
#subsol (
fundal: #838283;
înălțime: 180px;
latime: 900px;
}
Sperăm că această lecție v-a permis să înțelegeți elementele de bază ale lucrului cu HTML și CSS
. Iată cum arată în browser: Anterior, pe internet era larg răspândit tipul tabelar de aspect, căruia îi este dedicată această pagină. Cu toate acestea, de-a lungul timpului, această abordare a creării unei structuri de site web a devenit depășită și a fost înlocuită cu aspectul bloc. Dacă aspectul tabelului implică faptul că conținutul paginii este în interiorul etichetei Aspectul blocului este lipsit de dezavantajele aspectului tabelar - este indexat mai bine de motoarele de căutare, codul său nu este atât de extins, iar blocurile Singurul dezavantaj vizibil al aspectului bloc este că site-urile create pe acesta pot fi afișate diferit în browsere. Pentru a evita acest lucru, trebuie să faceți aspectul „cross-browser”, adică afișat în mod egal de orice browser. Un aspect al site-ului web este creat într-un editor grafic: este marcat unde va fi localizată ce zonă a paginii (antet, partea de jos, bară laterală, conținut principal) și cât spațiu va ocupa imaginile și fundalurile; Fiecare parte a paginii este plasată în propriul bloc Documentul HTML final este o colecție de blocuri
recipient
antet
navigare
meniul
conţinut
subsol
familie de fonturi
- această proprietate definește familia de fonturi în care va fi afișat textul. De regulă, trei tipuri de fonturi sunt specificate simultan. Prin urmare, dacă browserul nu l-a putut afișa pe primul, are multe din care să aleagă (Trebuchet MS, Arial, Times New Roman).
fundal: #f3f2f3;
culoare: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
dimensiunea fontului: 12px;
}
fundal: #FFFFFF;
marja: 30px automat;
latime: 900px;
înălțime: 1000px;
}
fundal: #838283;
înălțime: 200px;
latime: 900px;
}
fundal: #a2a2a2;
latime: 900px;
înălțime: 20px;
}
fundal: #333333;
plutește la stânga;
latime: 200px;
inaltime: 600px;
}
fundal: #d2d0d2;
plutire: dreapta;
latime: 700px;
inaltime: 600px;
}
fundal: #838283;
înălțime: 180px;
latime: 900px;
}
clar:ambele;
}
Diferențele dintre aspectul bloc și aspectul tabelar
, atunci conceptul de aspect al blocurilor se bazează pe utilizarea activă a etichetelor universale
este un tabel care ar trebui folosit pentru a afișa date tabelare și nimic mai mult.
Esența aspectului blocului