Trecem de la structura de tabel la div-new

Tema postării de astăzi este foarte relevantă atât pentru webmasterii obișnuiți, cât și pentru webmasterii cu o părtinire generală. Mai mult, deoarece aspectul site-urilor din ultima vreme pentru mine este activitatea principală, atunci acesta este cel mai preferat subiect.







Despre asta și vorbește.

Întrucât problemele de optimizare a site-ului în timpul dezvoltării pentru mine nu stau întotdeauna în ultimul loc, un prim pas important în acest proces este crearea de cod pentru paginile de dimensiune optimă. adică folosind cât mai puțini parametri posibil pentru etichetele cu ieșirea lor într-un fișier separat de foi de stil cascadă (CSS).

Practica 3-plus de ani de experiență a demonstrat - deoarece poate încerca să reducă dimensiunea paginii cu o metodă de aspect tabel, la urma urmei, numărul de tag-uri folosite de ei înșiși, pur și simplu mare, pentru că trebuie să multiplice investească o masă la alta pentru a obține rezultatul dorit.

La urma urmei, de fapt, tabelele au fost inventate special pentru producția de date tabulare. nu pentru marcarea elementelor paginii.

Ce se află în tabel:

pot fi reprezentate în formă de bloc (diva) aspect:

și este nevoie de o cantitate mult mai mică de spațiu pe disc.

Diferența dintre scara paginii și, în special, întregul site, devine foarte semnificativă și afectează în mod direct viteza descărcării resursei web, care ar trebui să vizeze orice comandant web.

Așa cum se spune, totul vine cu experiență, așa că, aparent, acum câteva luni, când am decis să încerc divuri, acest tip de aspect mi-a provocat un mare interes și de atunci a fost un favorit pentru mine.

Iată avantajele pe care le văd în schemele de bloc în comparație cu tabloul:

  • Reducerea semnificativă a dimensiunii paginii. de regulă, de 2-3 ori (în funcție de complexitatea structurii paginilor), ceea ce reduce semnificativ timpul de încărcare al site-ului web. În același timp, crește în mod semnificativ dimensiunea CSS-fișier, dar datorită faptului că el a fost o dată utilizatorul este în cache de browser atunci când accesarea celorlalte pagini deja citite de pe computerul său, ca urmare a site-ului este încărcat mult mai rapid decât cele de masă.
  • Scăderea traficului Internet la nivel mondial. Corolarul primului element.
  • Reducerea încărcării serverului. Din nou, efectul primului paragraf.
  • Este mult mai convenabil să modificați designul paginilor site-ului, redate într-un fișier CSS. În acest caz, practic nu este necesar să editați codul HTML.






Ușurința de manipulare a elementelor site-ului. Orice specialist SEO va confirma că cu cât este mai mare conținutul paginii în codul HTML, cu atât această pagină este mai semnificativă în ceea ce privește optimizarea motorului de căutare. Motoarele de căutare vor da mai mult respect unei astfel de pagini și o vor indexa rapid.

Datorită posibilităților aspectului divin, puteți obține că codul se duce mai întâi la conținutul principal al paginii și numai apoi coloanele antet, stânga și / sau dreapta. Aspectul paginii nu se modifică deloc. Fără îndoială, tabelele pot atinge acest rezultat, dar divas face mult mai ușor de implementat.

  • Vizibil plăcut este transparența codului paginii diva - nu există grămezi de etichete, totul este foarte frumos și compact.
  • Abilitatea de a face divas se bazează pe cunoașterea tehnologiei CSS. Ie dacă aveți o bună cunoaștere a tabelelor de stiluri de cascadă, atunci pot spune cu încredere că este foarte ușor să se restructureze într-un aspect bloc.

    Acum direct la practică.

    Nedumerit de necesitatea de a explora un pic mai multe informații despre structura blocului, pe internet am gasit beneficiul sau de orientare spre interior și a spus despre tehnologia acestei aspect metode (după cum am înțeles, de aspectul divuri, în general, este mult mai puțin practice de lucru decât pentru aspectul tabelar). Cu toate acestea, existau resurse web care aveau informațiile necesare. După ce ați studiat, puteți obține o idee despre aspectul blocului și puteți încerca să aplicați cunoștințele în practică.

    Deci, iată sursele pe care le voi sfătui. Va fi utilă studierea celor care doresc să treacă la DIV și să-și dezvolte abilitățile în CSS.

    Iată câteva cărți pe care le-am recomandat pentru lectură într-una din paginile de discuții Abonează-te:

    • Jeffrey Zeldman. "Web-design prin standarde" (Probleme generale ale designului modern, digresiei istorice)
    • Dan Cederholm. "Proiectare web-bulletproof." (Practica pură și trucuri)
    • Eric Meyer. "Fișe de stil CSS-cascadă. Un ghid detaliat. "(Ei spun că aceasta este doar o biblie!)

    Un punct important pe care îl veți întâlni atunci când vă mutați la aspectul de blocare este necesitatea de a aplica diferite hack-uri pentru afișarea inter-browser-ului de pagini. După tabele, există o mulțime de bug-uri în aspectul minunat, de cele mai multe ori, de regulă, există un management cu ajutorul acelorași hacks disponibile pentru fiecare browser.

    Într-un articol separat care se actualizează periodic, am compilați hack-uri pentru diferite browsere de internet moderne: CSS-uri personale pentru Internet Explorer, Opera, FireFox, Safari, Google Chrome.

    Cu experiența de aspect CSS, cantitatea de hacks pe care o utilizați va fi redusă la minimum. Și întotdeauna să depună eforturi pentru a face fără ele, tk. de fapt hack-urile CSS sunt rele.

    De asemenea, vreau să acordăm atenție următoarei proprietăți, care este necesară pentru a seta lățimea minimă a paginii pentru aspectul blocului. astfel încât atunci când browserul este restrâns, informațiile nu se mișcă în heap (dacă lățimea paginii este "cauciuc"):

    Asta e tot pentru moment.







    Trimiteți-le prietenilor: