Blog web design stúdió «hogy egy oldal»

Ma szeretnénk beszélni az elrendezés az egész telek és beszéljétek meg, mi valójában a feltételes típusok, és amelyet úgy kell tekinteni, valójában nem létezik. Szeretném röviden megvitatják az elrendezés a technológia maga és milyen programozási nyelveket használnak hozzá, valamint a fókusz a vita három alaptípusa elrendezés - fix, gumi és adaptív.

Mi az elrendezés a honlap (html layout)

Önmagában a kifejezés arra utal, kivetését átadása a rajz elrendezése a működési állapotát az alkatrészek, amelybe az elrendezés - lehet szöveget, képeket, táblázatokat és egyéb elemeket. Ebben az esetben figyelembe vesszük az elrendezés oldalak, vagy ahogy gyakran nevezik - HTML elrendezés, bár vannak mások a fajok, például újságpapír. De mi tárgyalunk az elrendezés weboldalakat. használt web design.

Annak érdekében, hogy szabjon ki húzott elrendezés, amely egyébként gyakran egy, a PSD és felhívjuk a Photoshop, meg kell tudni, hogy kifejezetten erre a célra jelölőnyelv HTML formátumban - Hypertext Markup Language, amely egy speciális, úgynevezett címkék, amelyek leírják a helyét elemek az oldalon. Egy jó kóder, örülnek a nézeti elrendezés, amely még mindig a hagyományos statikus kép, egyszerre mentálisan osztja a képet alkotórészeire és már előre tudja, milyen címkék fognak dokumentumban ismertetett, és milyen fajta elrendezés leginkább alkalmas egy adott alkalomra. Azóta, és kezdődik az „ébredés” az elrendezés. Először is, meg kell poraskinut agyat, majd nyissa meg a „Jegyzettömb” és most az üzletet.

Sőt, amellett, hogy a HTML jelölőnyelv létezik, és felül - CSS, ami szükséges, hogy leírja a stílus elemeit, és ad nekik egy kész megjelenés, mivel a HTML csak nagyjából leírja a helyét a legtöbb ilyen elemek az oldalon. Természetesen lehetőség van a HTML-ben, hogy álljon néhány stílusok és a kiterjesztett attribútumok címkék, és a legtöbbet bizonyos eredményeket, de aztán az elrendezés nem felel meg az előírásoknak, a W3C (amelyek nem csodaszer, de csak ajánlások, az úton), a kód az oldalon lesz olvasható, a keresők, valamint nem lesz ilyen boldog (nekik kell majd szétszedni a sok szemetet a kódot), és valóban ez mauvais tonna, és most nagyon kevés, aki erre. CSS - Cascading Style Sheets (Cascading Style Sheets) nem tekinthető önálló programozási nyelv, de a beavatkozás is lehet nevezni a feltételes nyelv, amely leírja a stílus elemeket az oldalon. Kétségtelen benne, mint máshol, vannak finomságok és titkot, amit tudnod kell, hogy legyen egy jó oldal elrendezését.

A főbb elrendezési oldalakon

Mindent a szétválás elrendezés jellemzi címkéket, amelyek használják a szervezetben a dokumentum, úgy véljük, túl feltétele, és nem gondolja, hogy a táblázatos elrendezés valójában lényegében megegyezik a számla, valamint a blokk. Bár sokan tévesen azt hiszik, így van, és fújja teljes másolása cikkek egymástól, gondolkodás nélkül, és tudta, mit mondanak. Az a tény, hogy az elrendezés is használható táblázatok és rétegek (blokkok), így nincs értelme a világos különbséget ezeket az elemeket. Miféle hely, ahol írhat szöveget csak egy asztalon? Tudja valaki úgy gondolja, hogy ilyen dolgok történnek az online asztaloknál nem használt egyetlen blokk elem? Kezdjük azzal, hogy a címke

az idő és egy blokk elem, amelyet a szöveg kiemeléséhez bekezdését. És ha a helyszínen nincs szöveg és bekezdések nélkül, ez nem az a webhely, és az ördög tudja, mit. Ugyanez mondható el a blokk elrendezés. Mit szólnál be egy táblát az ár vagy más információ? Sőt, elég gyakori probléma az elrendezés a képtelenség, hogy összehangolják elemek a függőleges tengelyen, ha a blokkon belül elem és egy nem állandó magasságú. Ilyen esetekben, a táblázat cella, azzal jellemezve, ellentétben a réteg működik CSS tulajdonság vertical-align: közép; .

Következtetés: A táblázat és a blokk elrendezés nem létezik!

Ami pedig a fajta elrendezés, hogy valóban létezik, de még mindig meglehetősen hagyományos, meg tudjuk különböztetni három fő típusa van:

A rögzített elrendezésű

A rögzített szélességű elrendezést honlapján ez nem változtat semmilyen körülmények között (kivéve abban az esetben, hibák oszthatatlan sornyi szöveget és képeket is széles), m. E. Az elrendezés szélessége előre ismert és mereven szerelt stílusokat. Ez a fajta elrendezés nagyon kényelmes és jó, kivéve, hogy csak a DTP, t. Hogy. A legegyszerűbb, és ideje volt a legkevesebb és erőfeszítést igényel. A viselkedés minden eleme az oldalon lehet előre előre - nem kell számítani semmilyen érdeke, akkor teljesen figyelmen kívül hagyja a felhasználó a képernyő felbontását. Mindenesetre, mivel ugyanazt a mintát, a szélessége, amely rögzített. Innen a neve - a rögzített elrendezésű.

gumi elrendezése

Gumi kódoló eltér rögzített, hogy a szélessége a helyet előre nem ismert, és függ a felhasználó képernyőjén szélességét. Meg kell jegyezni, hogy a gumi elrendezés nem mindig tölti ki a képernyőt 100%, egyesek úgy vélik, hogy ez helytelen. Sőt, előfordul, hogy tartalmaz valamilyen minimális és maximális szélessége az oldalon, és attól függően, a képernyő felbontása, a helyszínen van nyújtva vagy sűrített, hanem egy bizonyos méretet. majd leáll. Ez a hatás könnyen megvalósítható tulajdonságok min-width és max-width. hogy alkalmazni kell a fő tartályba, amely tartalmazza mindazokat az elemeket az oldalon.

Gumi elrendezés - a második végrehajtható komplexitás, azaz a szélessége a webhely nem ismert előre, és módosítani kell, és konkrétan meghatározott szélességének minden elem nem fog működni ... Ebben az esetben jön a támogatás százalékos. Elég gyakran, látható úszó elemek, amelyeknek a száma a vonalon változhat felfelé vagy lefelé, ismét, attól függően, hogy a felhasználó a képernyő mérete. Például, a kis képernyőn az áru 3 egy sorban, és egy nagyon nagy - 6, és a közöttük lévő közbenső értékek másodlagos képernyők - a 4. és 5. A lebegő elemek jellemzően alkalmazásával hajtják végre tulajdonságait vagy lebegnek hozzárendelési blokkban elem tulajdonságai display: inline-block; . így egy fél blokk és fél építettek úgy, hogy a transzfer az új vonal nem hajtjuk végre.

adaptív elrendezése