A böngészőben az oldal még mindig üres lesz, de a dokumentum szerkezete már érthető, készen áll.

Telepítse az alapvető formázást

Most menjünk a CSS-tervezéshez a kezdeti dekorációs dokumentum beállításához.

Nyisd ki style.css. És adja hozzá a kódsorokat, amelyek az alábbiakban találkoznak.

Az alapértelmezett oldalon findents és mezőket távolítunk el:

* (Margin: 0px, Padding: 0px;)

A linkek színeit a felhasználó viselkedésétől függően (a kurzor fáj, nem találta meg, meglátogatta), és távolítsa el a hangsúlyt az egérmutató, amelyen az egérmutató:

A: Link (color: # D72020;) A: hover (Text-decoration: none; color: # FF0000;) A: Meglátogatott (color: # D72020;)

Konfigurálja az oldal fő kialakítását: Háttérszínt és kép-szubsztrátumot írunk elő (megadom a képszintes tölteléket), állítsa be a színt, a stílust és a betűméretet:

Body (Háttér: # FFD723 URL (kép / back_all.jpg) repeat-x; font: 13px Tahoma, Verdana, Arial, Helvetica, sans-serif; color: # 333333;)

A tartalomblokk meghatározása:

#Content (Margin: 0 Auto, Háttér: #FFFFFF, Width: 786px, szöveg-igazítás: balra;)

Most frissítheti az oldalt. Tele van egy mintás szubsztráttal. Míg az egyetlen látható változás, amelyre az ingatlan felelős háttér. osztály test..

Horizontális menü létrehozása

Van egy indítás, és most már közvetlenül a fő blokkok elkezdheted a réteget.

Kezdjük, persze, a sapkákból. Amely viszont vízszintes menüblokkokból és logóból áll.

Először állítsa be a sapkák mindkét elemének általános kialakítását: szöveges igazítás a bal szélhez, fehér háttér és magasság 306px:

#Ader (háttér: #FFFFFFF; magasság: 306px, szöveg-igazítás: balra;)

Tehát kaptunk egyfajta űrkupakot: egy fehér téglalap, amely az elemei megtalálható.

Logikus lenne most, hogy most vízszintes menüt végezzen. Tehát megteszünk, de csak a HTML-hez való beillesztése előtt meg kell készíteniük a CSS szabályokat, különben meg fogja nézni a böngészőt, hogy szörnyű lesz.

Bemutatjuk az első beállításokat: Állítsa be a bal oldali határ 2 pixel vastag, szélességét és magasságát, valamint ismételje meg a tengely x háttér rajzolását:

#Menu (Border balra: 2px szilárd #FFFFFFF, szélesség: 779px; magasság: 80px; Háttér: URL (képek / header_top.gif) ismétlés-x;)

A böngészőben lévő oldal azonnal átalakul, és így fog kinézni.

Most hozzáadhatja a menüt a fájlhoz index.html:

Az oldal frissítésével láthatod, hogy tényleg megjelent.

Csak itt a link típusa sok kívánni fog. Meghatározzuk saját szabályaikat (igazítás, szélesség, szín, zsírság stb.), És hivatkozunk a linkekre a színváltással, és visszatér a frissítés eltávolításához a sablonban:

#Menu a (float: maradt, szélesség: 99px, magasság: 46px; kijelző: blokk: blokk; szöveg-igazítás: központ; szöveges dekoráció: nincs; szín: #FFFFFF; Betűtípus: merész; betűkészlet: 14px; -Top: 35px;) #menu a: lebeg (szín: # D72020, szöveges dekoráció: aláhúzás;)

Most a menüformázás összehasonlítható a PSD sablonnal.

Vegye figyelembe, hogy az elem végrehajtása megváltozik, ha a mutató az, hogy hozza (a szabályok felelősek #Menu a: lebeg).

A logó testreszabása

Már van egy logója, és a mappában van, továbbra is hozzá kell adnia az oldalhoz és formázza a szabályokat. Mindkettő CSS eszközöket készíthet, mint amit nem kapunk.

#logo (háttér: #FFFFFFF URL (képek / big_pic.jpg) No-Repeat; Szélesség: 738px; magasság: 146px; Szöveg-igazítás: balra; padding-top: 80px; Padding-Bal: 40px; Bording-Bal: 4px Szilárd #ffffff;)

A logó egyenletesen illeszkedik.

Az egyetlen dolog, amit hiányzik, a szöveg. A blokkban hiányzó betét logó Fájl index.htmlÚgy, hogy ez megtörténik:

A szöveg megjelent, de azt is ki kell adni.

Azon alapul, hogy a logó szinte mindig referencia, akkor a megfelelő osztályok tervezését állapítjuk meg.

#logo a (szöveges dekoráció: nincs; szöveges transzformáció: kisbetűs, betűtípus-stílus: dőlt; betűméret: 36px; szín: #FFFFFF;) #logo h2 a (betűméret: 24px;)

Nem kell semmit megmagyaráznod itt, az összes olyan tulajdonsággal, amit többet tudsz a CSS-leckékről. Azonban a szöveg megjelenése megváltozott, és általában a kalap most jobban néz ki, mint a PSD elrendezés.

Finomuljuk az oldal fő részét

Ezután konfigurálja a legnagyobb blokkot, amelyen az összes egyedi tartalom elhelyezhető. 500px lesz, és a webhely jobb oldalára kerül. Hozunk létre a szabályokat elhelyezése, tervezése címoldalára, bekezdések és linkek (már szóltunk az összes tulajdonságait a CSS cikkek).

#Right (úszó: jobb, szélesség: 500px; párnázott jobb: 10px;) #right h4 (Margin: 0, Padding: 0px; Betűméret: 12px; szín: # D72020;) # ; Szöveges dekoráció: nincs;) #right p (margó: 0, párnázás: 0, padding-bottom: 10px;) # margó: 0; Padding: 0; Padding-Top: 10px; Szín: # D72020; )

Mivel csak a blokk szélességét rögzítettük, nem lesz látható változás, amíg betölti azt tartalommal - az oldalmagasság a tartalomtól függően változhat.

Töltse ki a tartályt jobb. Festék képeket egy egyszerű asztalon.

Képtár

Konyha

A tartalom kapott jelölést, de egyértelműen nincs fehér háttér, ez nem elég, hogy nem fog megjelenni hamarosan.

A bal oldali panel létrehozása

Az elrendezés során, de az elrendezés rajzolása után kiderült, hogy az oldalsó menünek még mindig van albekezdése, és akkor jelennek meg, amikor lebegnek a fő pontra, és eltűnnek, amikor nincsenek mutatók.

Tokok, amikor módosítania kell a design "on the go", nagyon gyakran vannak. A menük és a fő tartalom közötti távolság lehetővé teszi számunkra, hogy beillesztsük az albekezleteket, de a hangsúly érdekes az almenü eltűnésével és megjelenésével.

Adja meg a következő kódot a CSS fájlba.

#left (Padding: 10px, szélesség: 237px, párnázott jobb: 1em;) #left H3 (szélesség: 225px; magasság: 25px; betűméret: 14px; betűtípus-balra: 15px; Top: 15px; Szöveg-transzformáció: nagybetűs; Szín: # #FFFFFFF; Háttér: URL (képek / title.gif) No-Repeat) #left ul (margó: 0, Padding: 10px; Lista-stílus: nincs; szélesség: 100px ; betűméret: 18px;) #left li ul (pozíció: abszolút; balra: 90px; Top: 0, kijelző: nincs;) #Left ul li (pozíció: relatív; margó) alsó: 20px;) #LEFT UL LI A (Kijelző: Blokk; Szöveges dekoráció: Nincs; szín: # Nincs szín: #FFFFFCC; Háttér: # FF9900; Padding: 5px; határ: 1px tömör arany; Border-Bottom: 0; ) #left Li Li (margó alsó: 0px, szélesség: 150px;) #left p (párnázás: 10px; határ-alsó: 1px szilárd # D72020; határérték: 1px szilárd # D72020; határérték: 1px szilárd ;)

Figyeljen az osztályok szabályaira ul és li - A menü eltűnésének titka ott van, bontsa ki magad.

A HTML dokumentum bal oldali tartályában adja hozzá az információs blokkot a menü nélkül.

Információ

Ünnepi kedvezményeket kínálunk Önnek. További...

Menü

A fehér háttér még alacsonyabb az oldalon.

Most itt az ideje, hogy a bal oldali ablaktáblát a HTML fájlba helyezze. A felső navigációtól eltérően a listák végrehajtják, amelyeket a CSS-szabályokból észleltek.

• Képtár
  • Konyha
  • Ágy.
  • Falak
  • Előszoba
  • Szekrények
  • Számítógépes asztalok
• Szerződés
• Ár
  • Konyha
  • Ágy.
  • Falak
  • Előszoba
  • Szekrények
  • Számítógépes asztalok
• Minták
  • Üveg
  • Forgácslap
  • Furnitura
  • Stb.
• Névjegyzék
• Fontos

Helló, kedves blogolvasók honlapja. A mai feladatunk egy úgynevezett webhely elrendezést alkot, amely nem használja (tegnapi elrendezés), hanem div elemek. Azok. Ki kell építeniük a felső rész (kupak), az alsó rész (lábléc) és három oszlopot.

By the way, már megoldottunk ilyen feladatot, amikor írtam.

Úgy tűnik, hogy nem szükséges megismételni, de nem fogom ezt megtenni. Ma elvben részletesen leírják a helyszíni elrendezés módszere, valamint párhuzamosan, fontolja meg az irányelvek kinevezését @Import és @media (Előre) az általunk tanulmányozva (a bázis szinten, természetesen) a Stylist Markup CSS nyelvétől.

Helyszíni elrendezés blokkokon - szüksége van rá?

Ráadásul az aktuális időpontban már van időnk, hogy szétszereljük a HTML nyelvet a csontokon, az eredeti forrásra támaszkodva a konzorcium arcán. Úgy gondolom azonban, hogy nem mindenki az én figyelmeztetésemmel, és azonnal rohant a tanulmányozásra is.

És én is megértettem. Végtére is, önmagában, ezeknek a dolgoknak tudatában nem fognak hírnevet vagy gazdagságot hozni, de csak egy csomó időt vesz igénybe, amelyet sokkal kellemesebb foglalkozással lehet elhelyezni. Ugyanígy, hogy az evőeszközök használatának képessége nem garantálja Önnek az ízletes étel jelenlétét az asztalon. A megfelelő pillanatban azonban hasznos lehet, és nem játszik jelentőségtelen szerepet.

Én magam dönthetek el tíz évvel ezelőtt bármi, hogy tanulmányozzák a HTML-t, de elkezdődtek a kezdetben, véleményem szerint, és nagyon gyorsan lehűtötték ezt az ötletet, és inkább az agy fölé emelte az agyat, látványos játékkal a következő lövőben.

Igen, igen, ha a játékok voltak a hobbim, és most ez a hobbi lett egy weboldal, és lehetőségem van arra, hogy gyakorlatban megvalósítsem a gyakorlatban néhányat egyszer. És analógiával a játékokkal, az általam megszerzett pénzösszegek száma még mindig olyan virtuális szemüvegek, amelyek megmutatják, milyen sikeresen haladok előre.

Már láttam már meglepett, bár a házastársam alapvetően megváltoztatta hozzáállását a következő hobbijaimnak (sajnálatos, hogy ő ellenőrzi ezt a cikket a nyelvtani hibákra, különben az összes változást részletesebben leírnám), Ehhez a bloghoz hasonlóan az összes kezdeti elvárásaival és kétségeivel a rozsdás számlák formájában valós kipufogógázokat ad (olvassa el, hogyan lehet a Cyphyricks a Cyphyricks-t a Cyphyrick képernyőn az egyéni vállalkozó számított számláján.

Általánosságban elmondható, hogy ez a lírai visszavonulás véletlenszerűen történik, mert azt szeretném mondani, hogy a HTML és a CSS kis téglák az internetes üzletág építésében, de a helyszíni elrendezés elvek birtoklása és megértése bizonyos számú szemüveget ad el azoknak, akik elhanyagolták.

A webes projekt általános sikere pontosan attól függ, hogy az ilyen kb. Az olyan eljárás, amellyel egyszerű (és gyakran nagyon kellemes) aktiválható a távoli sarokban. Csak nem emlékszem egy dologra -, hogy lehetővé tette, hogy lépjek át, hogy a láthatatlan akadályt, a lustaság és a letargikusságból szőttek. Lehetséges, hogy a kártyák egyszerűen így fekszenek. Ezért kívánok neked is, hogy legyőzze ezt a korlátot, de nem tudom megmondani, hogyan kell csinálni.

Oké, folytatjuk azokat, akik nem váltanak. Hogyan építsünk egy webhely elrendezést DIV elemek és stílusszabályok használatával? Lássuk. Természetesen utánozzuk az elrendezés munkáját, mi lesz egy helyi számítógépen, csak az összes olyan fájl, amelyre szüksége van az egyik mappájába. Nincs hosting és. Az elvek megértéséhez felesleges lesz.

Tehát folytassa az elrendezést. Kezdjük, létrehoztunk és hívjuk a mappát a jövőbeni webes projekt fájljainak tárolásához, majd hozzon létre egy szövegfájlt kiterjesztéssel. HTML és a névindex. Mi is létrehozunk egy másikat, aki hívja a CSS-t (a külső styles fájlok ebben a mappában élnek.

Hozzáadhat egy másik mappát, ahol a webhely elhelyezésére használt képeket dobjuk, amely része lesz (háttérképek). Azt tanácsolom, hogy optimalizálja vagy más szóval a maximumot.

Nos, most másolja a "hal" az index.html-ben. A kóddal való együttműködéshez nagyon kényelmes lehet használni, bár ha munkája van, akkor a funkcionális megoldás drimmernek tűnhet:

Először is, mint mindig, meg kell mennie, amelynek célja az alábbi cikkben részletes módon írja le. A meta címkén belül jelezzük a böngésző helyes értelmezését, amikor megnyitja a projektünket. Minden dokumentumnak tartalmaznia kell egy kitöltött (oldalcím), így hozzáadtuk a "hal" -ra.

Nyilvánvaló, hogy a webhely olyan definíció szerint van meghatározva, mivel a dokumentumok valamennyi komponenseinek egy tartománynevére való részvétele miatt azonban a látogatók számára a fő érv a weboldalak hasonló formájaként szolgál, és hogy szükségünk lesz rá figyelembe kell venni az elrendezés során.

Ezért külső fájlt kell tartalmaznunk olyan stílusokkal, amelyeket teljesen minden oldalra használnak. De emellett további CSS-fájlok is lehetnek, amelyek lehetővé teszik például a webes projekt különböző részeit egy kicsit másnak.

Következésképpen a túlfolyó a bal vagy a jobb oldali oszlopban nem okoz arányos növekedését blokk azonosító VNUTR és VNESH (lebegő elemek magassága szüleik, vagy más szóval, a konténerek nem érintik), ami azt jelenti, a tartalom jön A korlátaikon túl, egy láblécre fog menni, és túlmutat a határok elrendezésében. Ágy.

De van egy negyedik blokk eleme az ID Podporka, amely nem tartalmaz semmilyen tartalmat (és ezért nem lesz látható a weboldalon), és amely az esemény megszüntetésére szolgál. Az OBDHIY.CS-ek kódjában egyszerű szabályt képviselünk ennek a választónak. Ennek eredményeként az Idporka Idporkával rendelkező blokk hasznos tulajdonságot szerez nekünk - figyelembe veszi az elülső lebegő elemet (a fentiekben a fentiekben hivatkozik).

Így A jobb vagy bal oldali oszlopban lévő tartalom növekvő tartalmával arányos kiegyenlítés lesz az ID Podporka-val, és ez Ez a címke már nem lebegő, akkor az ID VNUTR és a VNESH blokkjai figyelembe veszik, és arányosan növelik méretét függőlegesen:

Most minden úgy tűnik, hogy megfelelően működik. Azonban a webhely elrendezése még nem fejeződött be. Tegyük fel, hogy az index.html-ben készültünk, így a főoldal elrendezése, de más partícióban az elrendezés típusa eltérőnek kell lennie (Például, nem kell három, de csak két oszlop). Hogyan juthat el ebből a helyzetből?

Nyilvánvaló, hogy erre a célra eltérő index.html. Ehhez az index.html tartalma átmásolható egy új fájlra, például Razdel.html-re, mert Szerkessze a meglévő kódot könnyebb lesz, mint írja újra.

Nos, a kaszkád stílusú táblázatokkal rendelkező fájl, például Razdel.css. Pontosan bennük változik, és ugyanakkor részletesen megnézzük, hogy pontosan hogyan használja a @Importot. Irányelv ilyen esetekben.

Kezdjük a razdel.html-vel:

...

Megváltoztattuk a cím címe címét, és megváltoztattuk a Razdel.css plug-in stílusainak nevét. Ugyanakkor természetesen szükség lesz a CSS mappában, amelyet ez a nagyon stylist jelölő fájl létrehozhat. Merkedünk, hogy emlékeztessünk arra, hogy az index.html-hez, az OsnovNoy.css-ek stílusához csatlakoztunk, amelyben csak a @Import-irányelvt írtunk elő az OBDHIY.CSS fájlból származó szabályok betöltésére:

@Import URL (obdhiy.css);

Nem leszünk az intelligens verse-ben, és egy új (akár üres) stílusos fájl kezdetén a propyash-ben teljesen ugyanazon az irányelvben. Így ismét háromszálú elrendezést kapunk, azonban csak néhány szabályt adunk hozzá egy kicsit később, akkor könnyedén megfordítjuk a két scial. Még így sem. Egy másik fájlt hozunk létre a DVEKOLONKI.CS-k CSS mappában és a következő tartalomban:

#Right #center (margó jobb: 0;) #vnesh (háttérkép: nincs;)

Mit csináltunk? Tilos a megfelelő oszlopot megjeleníteni a weboldalakon. Mi is eltávolítottuk a külső francia bekezdés jobbra a központi oszlophoz, mert már nem szükséges. Nos, a végén tiltottuk, hogy megmutassuk a háttérképet ugyanabban a jobb oldali oszlopban. Általában mindannyian a megfelelő oszlopunk a szakasz elrendezésében teljesen megsemmisült.

Nos, most csak ez a nagyon dvekolonki.css maradt, hogy befejezze a kétpacula elrendezésének elrendezését a Razdel.css fájlhoz való csatlakozáshoz, amelynek végső tartalma most így néz ki:

@Import URL (obdhiy.css); @Import URL (dvolonki.css);

Az alábbiakban foglalt szabályok (a dvekolonki.css) magasabb prioritást élveznek, ami azt jelenti, hogy megfigyelik őket a weboldalon. Ennek eredményeként, amikor a Razdel.html megnyitásakor már megfigyelheti a kétoszlopos elrendezési opciót:

Valójában további feladat volt, hogy fontolja meg az opciókat. használja a @Import irányelvet a telephelyek modern elrendezésébenMit gondolok, hogy megbánjuk.

Most továbbra is bizonyítani kell a @Media irányelv munkáját, amelyet a cikk elején adtam fel. Nagyon közvetett hozzáállása az elrendezéshez, de még mindig nem mondható, hogy valószínűleg elég rövid lesz.

Elrendezés elrendezés a nyomtatáshoz a @Media irányelv segítségével

A @Media irányelv nem lehet hasznos Önnek, és az olvasóidat, akik weboldalt kívánnak kinyomtatni grafikai örömök és szükségtelen információk nélkül. A felhasználóknak csak a központi oszlopban találhatók. Kalap, lábléc, bal és jobb hangszórók, amelyekre nincs szükség - csak a cikk szövege.

A modern böngészők bármelyikében történő nyomtatás előnézete során természetesen kikapcsolhatja a háttérnyomtatást, azaz. Színes dekoráció, de a böngésző nem mindig képes lesz elválasztani a gabonát egymástól függetlenül (tartalom) az elrontott (navigáció), így segíteni kell neki, hogy ne reméljünk semmilyen reményt.

Ezenkívül a nyomtatás során a fő dolog elveszik, ami az internetet olyan népszerűvé teszi - az a képesség, hogy más oldalakra való áttéréshez való áttérés. Papíron az összes a hiperhivatkozások teljesen nem informatívak lesznekHa ez nem gondoskodik előre. Adjunk hozzá egy hiperhivatkozást a háromszálas elrendezésünkhöz, és nézzük meg, hogyan fog megjelenni, ha megpróbál nyomtatni egy weboldalt.

Így a felhasználó, aki egy ilyen WebLine-t kinyomtatott, soha nem fogja tudni, és melyik blog még mindig a legjobb. Akkor gyerünk nuances a nyomtatásraÉs ezt a már említett @Media irányelv segíti.

Két lehetőség van a médiák használatára, amelyekre e stílusokat kell alkalmazni. Megadhatja a média attribútumot a Link címkén, amellyel külső stílusfájlok vannak csatlakoztatva. De ebben az esetben a böngésző többletkérelmet fog tenni a kiszolgálónak, ami nem jó. Azonban ez a módszer jogosult az élethez, és úgy néz ki, mint ez a szégyen:

A média attribútumban Más értékeket használhat:

1. mindent - Alapértelmezés szerint használják, és azt jelenti, hogy ezt a stílusfájlt teljesen kimeneti eszközökhöz kell használni.
2. braille-olvasó eszközök ujjal (vak vagy látássérültek esetén)
3. kézi - PDA, okostelefonok és egyéb triák
4. nyomtatás - Nyomtatók
5. képernyő - képernyőmonitorok képernyők, amelyeken böngésznek a webhelyén
6. beszéd - beszéd böngészők
7. vetület - projektorok
8. tTY - TELETIPES ÉS EGYÉB RHYLAD, amelyen a képpontok dimenzióját nem lehet használni
9. tV - jó jó tv

A fenti példában a média attribútum használatával külön stílusos fájlt csatlakoztatott a webes dokumentumhoz, hogy megjelenjen a monitoron, és külön-külön nyomtassa ki (Print.css). Olyanok vagyunk, mint ez, és meg kell valósítani egy elrendezést ebben a leckében, de jobb lesz egy kicsit másképp csinálni, a stílusfájlban regisztrált @Media irányelv használatával.

Ha felhívta a figyelmet, akkor ezzel a fekvéssel, amelyet választottunk (@Import segítségével), van egy közös stílusfájl, amely mindig kapcsolódik ezen irányelvben - Obdhiy.css. Pontosan benne van, elkezdünk elkötelezni.

@Media saját szintaxissal rendelkezik:

@Media képernyő, TV (csak akkor hajtja végre a választók és szabályok, amelyek csak akkor kerülnek végrehajtásra, ha a weboldal megjelenik az eszköz vesszője felett

Az obdhiy.css fájlunkban a @Media képernyőiről szóló már belüli már rendelkezésre álló szabályokba lépünk, elegendő a végső soron, hogy egyszerűen hozzáadja a szükséges CSS-szabályokat a nyomdaid dokumentum megjelenítéséhez @Media nyomtatás.:

@Media nyomtatás (* (szín: # 000! Fontos, háttér: átlátszó! ;) A: után (tartalom: "(" attr (href) ")";))

Ha emlékszel, a választó * az összes ilyen stílusszabályok alkalmazása abszolút minden HTML kódelemre. Igaz, egy ilyen választó minimális lehetséges prioritások, így kéri a színe minden eleme fekete, a háttér átlátszó, a színe és a Háttér szabályokat, kénytelenek vagyunk nem hozza a helyzet a számlálás előtt prioritásokat a telepítést.

A HTML-választó esetében az alapértelmezett betűkészlet feladatot írjuk elő, mert a nyomtató annyira világosabb. Nos, a betűtípus megkérdezte senkit Serif (Serif). A kijelzőn: nincs, tilos a testkészlet (sapkák, határidős és hangsugárzók) megjelenítésére, és a margó: 0 megengedett tartalom a középső oszlopból, hogy elfoglalja az összes rendelkezésre álló helyet szélességben.

Utolsó választó a: utána Projektor és jobban megérteni, hogy pontosan mit mond, azt tanácsolom, hogy futjon a következő kiadványokon () és. De meglehetősen egyszerű célra van szüksége - lásd a papíron, ahol pontosan az ólom hiperhivatkozások.

Miután a pszeudo-elem lehetővé teszi, hogy a böngésző dokumentum kiépítése közben tartalmat generáljon. Utána lehetővé teszi számunkra, hogy a hiperhivatkozás URL-címét közvetlenül azután, hogy a legtöbb hivatkozás elhelyezhető. Ez egy speciális CSS tartalomszabályt használ, amely csak két pszeudo-elemre működik: utána és korábban.

A tartalomszabályon belül helyet írunk le, és kinyitunk egy kerek tartót, majd adjunk hozzá tartalmat a téren keresztül

Ez a cikk megvitatásra kerül az olyan webhelyekről, amelyeket a fejlesztők manuálisan hoztak létre, azaz megemlítettük.

A cikk a felhasználók számára ismert HTML. és CSS. . Azt is kívánatos, hogy legalább az alapítványt ismerjük Adobe Photoshop.

A valódi weboldal létrehozásának egyik szakasza egy PSD sablon létrehozása. Még mindig olyan nevek, mint elrendezés, tervezés vagy forrás.

A sablont a tervezőnek kell megrendelni. A tervező az Adobe Photoshop elrendezését írja le, és PSD formátumban menti.

Mi a PSD formátum?

A jobb megértés érdekében egy egyszerű életmódot hozhatunk. Gyermekkorban minden ragasztó alkalmazás. Vágja ki a papírházat. Vágja le a karácsonyfa beillesztését. És így amíg a munka nem kész.

És most el tudod képzelni azt a helyzetet, amelyen a számokat kivágták, a megfelelő helyeken lebomlanak, de még nem ragasztottak. Tehát a PSD fájlformátum összehasonlítható az alkalmazással, amelyhez a számok még nem ragasztottak, de a kívánt sorrendbe helyezték őket.

Ennek köszönhetően minden ilyen "funkció", és pontosabban a sablon minden egyes fragmense külön képként menthető, amelyet ezután használhatunk a webhelyen.

Itt van egy oldalelrendezés, amelyet létrehozunk.

Miután van egy kész sablon formátumú formátumban, közvetlenül a rétegbe megy

1. Hozzon létre egy mappát, amelyben az elrendezést tárolják, például a "webhely".
2. A "Site" mappában hozzon létre egy mappát a képekhez, például az IMG-hez.
3. A "Site" mappában hozzon létre egy mappát a stílusokhoz, például a CSS-hez.
4. Most meg kell futtatnia az Adobe Photoshop programot, és nyissa meg a PSD fájlt. Innen "kihúznia kell" az összes használt képet az oldalon.

Itt kell figyelnie a "Rétegek" gombra. Az ábrán piros oválisban kiemelve van.

Ez a gomb bekapcsolja és kikapcsolja a rétegablakot. Rétegek - ezek a leginkább ragasztott appliqué detail. A kényelem rétegei elosztják a mappákhoz, amelyek összehajthatók és telepíthetők. A működés elve majdnem ugyanaz, mint a Windows Intézőben.

Először is, minden mappa jobban együttműködik. Szükség szerint telepítse.

Most elkezdheti a "kihúzható" képeket

Először is ki kell választania egy szerszámkeretet. Ezután csak a webhely logójára korlátozza a részt

Ezt követően nyomja meg az Enter billentyűt. Még kivéve, ha a dedikált területet levágják.

Most eltávolíthatja a hátteret. Ehhez kapcsolja ki a réteget a háttérrel.

A kívánt rétegek gyors megtalálásához a következő műveleteket hajthatja végre:

Itt a réteget "2. ábra" -nak nevezik. A szem képére kattintva a réteg láthatatlanná válik.

Azonban két réteg van, amelyeket meg kell leválasztani. Hasonlóak.

Most már menthet. Ehhez a következő lépéseket kell végrehajtania.

Válasszon 4 javasolt opció közül, és a javasolt másodpercből. Bővítés Válassza ki a GIF lehetőséget.

Fájl név logo.gif. . Fájl mentése mappába img . A többi képet ott kell megmenteni.

Követheti ezeket az elveket:

• fényképészeti minőség - jpg.
• fényképészeti minőség átlátszó háttérrel pNG-8. , nem felel meg a minőségnek - png-24
• kis színek a képen - gIF.

Annak érdekében, hogy visszaadja a kezdeti opciót a vágáshoz, meg kell nyitnia a Story ablakot

Futtassa a kattintást a fájlnévre, és állítsa be a megfelelő léptéket.

Más képek ugyanúgy kerülnek mentésre.

Ugyanez vonatkozik a mancs képére, amely megjelenik a menüelem lebegése esetén

A képek többi része opcionális. Ön fehér, átlátszó.

Itt nagyon óvatosan válassza ki a Mentés opciót, mert száz a PSD forrásforrás-forrású képek, amelyek rosszul kezelt élek vannak. Itt van egy példa:

A képet átlátszó háttéren mentették. Azonban, amikor a fekete - rosszul kezelt élek láthatóak. De ha könnyű háttér használata - ez a hiba károsodhat.

A háttérben egy kis képet kell vágnia, amely kitölti az oldalt csempe formájában. Ebben a példában azonban a háttér nem ismétlődik. Ezért jobb, ha hasonló képet találunk. És megpróbálhatja kiválasztani, kivágni a különböző töredékeket a háttérből.

A rétegek kezdete. Csomagolás. Helyfejléc.

Az elrendezés a HTML5 és a CSS3 segítségével történik.

A webhely mappájában létre kell hoznia egy HTML fájlt. például index.html.

Mappában cSS. Fájl létrehozása style.css. .

Ezenkívül a mappában cSS. El kell tüntetnie a fájlt reset.css. A következő kóddal

/ * v2.0 | 20110126 Licenc: Nincs (Public Domain) * / html, Body, Div, Span, Applet, Object, IFrame, H1, H2, H3, H4, H5, H6, P, Idézetblokk, Pre, A, Röv, rövidítése, Cím, Nagy, idézett, kód, del, dfn, em, img, ins, kbd, q, s, samp, kicsi, sztrájk, erős, al, sup, tt, var, b, u, i, tt, var, b, U, én, központ, dl, dt, dd, ol, ul, li, fieldset, forma, címke, legenda, asztal, felirat, tody, tfoot, thread, tr, th, td, cikk, félre, vászon, részletek, Beágyaz, ábra, figcaption, footer, header, h brutroup, menü, nav, kimenet, rubin, szakasz, összefoglaló, idő, jel, hang, videó (margó: 0, párnázás: 0; határ: 0, betűméret: 100% ; font: örökli; vertical-align: Baseline;) / * HTML5 DISPLAY-ROLE RESET régebbi böngészőkhöz * / CIKK, félre, részleteket FIGCAPTION, ábra, lábjegyzet, fejléc, HGROUP, menü NAV § (display: block; ) Test (vonalmagasság: 1,) ol, ul (listastílus: nincs;) Blockquote, Q (idézetek: nincs;) BlokkQuTquote: korábban, blokkvidék: Utaster, Q: korábban, Q: után (tartalom: ""; Tartalom: Nincs;) Táblázat (Border- Collapse: Collapse; Borde R-spacing: 0; )

Az a tény, hogy ugyanazon címke különböző böngészőjei különböző beállításokkal rendelkezhetnek. A böngésző biztosítása érdekében vissza kell állítani őket. A fent javasolt kódot Eric Mayer fejlesztette ki.

Első B. index.html Írja be a fő címkéket.

A stílusok címkéjén A háttérbe kell telepítenie.

Amint már említettük, a háttér itt nincs megismételve. Ezért a racionális válasszon hasonlóakat.

Test (háttérkép: URL (.. / img / bg.gif);)

Most meg kell hoznia egy webhelyburkolatot - egy blokkot, amelyben minden tartalom elhelyezhető.

A zárás mellett

A kommentár írta a blokkazonosítót. Idővel Tagov

Sok lesz, és zavaros lehet. Ez érthetetlen, ahol a div.

A blokk belsejében a csomagolás. Ide átmenetileg. A cél az, hogy lássuk a blokkot a hazugság alatt, és megkülönböztesse a többitől. Ugyanezen okból néhány fényes háttér átmenetileg a blokk stílusában lesz.

Stílusok telepítéséhez meg kell ismerni a szélességét és a beágyazódást felülről és alulról. Megakadályozhatja Adobe Photoshop. A "téglalap alakú terület" eszköz kiemeli a hely oldalát a jobb oldali széléből. A magasság nem fontos.

Szélesség látható az "Info" ablakban

964px kiderült.

Hasonlóképpen, a kiválasztott terület magassága már fontos, és nem szélesség, a francia bekezdéseket felülről és alulról mérjük.

Az alábbi 100px-en az alábbi 85px-en történt.

Ily módon meghatározzák a forrás bármely távolságait.

#Wrapper (szélesség: 964px, margó-top: 100px; margó jobb: Auto, margó alsó: 85px; margó-bal: autó; háttér szín: # ff9;

A jobb és a bal auto francia bekezdés. Ennek köszönhetően a blokk igazodik a központba.

Oldal:

Ebben a cikkben szeretnék körülbelül négy különböző módon megismerni az elrendezést több oszlopokkal. Minden módszer előnye van és hátránya. Annak bemutatására, hogy ezek az elrendezések hogyan működnek és megjelennek, létrehoztam egy egyszerű webhelyet, amely HTML táblákat, a CSS Float, a CSS keretrendszert és a Flexbox tulajdonságot használja.

Az új élet első napja

Ebben a cikkben négy különböző módot használunk az oldal elhelyezésére:

• Táblázatok. Nem kell külön stílusfájlt használni. És ami még fontosabb, nem törik meg.
• Úszó. A CSS tulajdonságról beszélünk. Ez meglehetősen közös módja a weboldal elrendezésének létrehozásához. És ebben az esetben külön stíluslapot kell használnunk. A HTML fájlt csak a weblap tartalmának meghatározásához használják. Ha be szeretné igazítani a tartalmat, akkor a CSS fájlt kell használnia.
• CSS-keretrendszerek. Úgy működnek, mint amilyenek JavaScript-keretrendszer. Csatlakoztassa a forrásfájlt a címben (például, ), És készen áll a munkára! Önnek nem kell megadnia a tulajdonságok értékeit. Ez olyan osztályokat használ, amelyeket a keretfejlesztők elkészítettek az Ön számára.
• Flexbox. A FLEXBOX rövid név CSS rugalmas doboz elrendezési modul. Ez egy újabb az úszó technológiához képest. A flexbox alapelve - olyan tartályt biztosít, amely képes megváltoztatni a benne foglalt elemek szélességét, magasságát és eljárását. Ha teljes mértékben töltse ki az összes szabad helyet, akkor a Div Flexbox elrendezéséhez kell használnia. Például, hogy lefedje az összes eszközt és a képernyőméretet. A lebegő tartály kiterjeszti a teljes képernyőt kitöltő elemeket.

Most itt az ideje, hogy megpróbáljuk mindegyiküket.

A létrehozás módja

Ez az én webhelyem tervezés:

Asztalok

A webhely sapka létrehozásához használtam a pozíciót: relatív tulajdonság. Próbáljuk meg a karcolásból egy táblázatos elrendezéssel.

Itt van a HTML kódom:

			Cinematron.
	ITTHON	Premiers.	Jegyiroda.	Fotók.

És ez az, amit kaptam:

Amint láthatod, ez nem ugyanaz a kalap. Ismerősnek tűnik, de a helyszín egy kicsit megváltozott. És ezért. Tudja, hogy a táblázatok kiválóak a szimmetrikus pozícionáláshoz. De más célokra nem alkalmasak. Figyeljen a kód nagy részére is. De a táblázatoknak egy hasznos funkciója van. Ez az, amit tehetünk:

tÁBLÁZAT, TD (BONDER COLLAPSE: összeomlás; határ: 1px szilárd vörös;)

És látni fogod, hogy az elrendezés így kezdett nézni:

Így könnyedén meghatározhatja, hogy mi található, ha zavaros.

Most rossz hír. Nézd meg újra a HTML-kódot. Ez egy egyszerű asztal, de képzelje el, hogyan fog kinézni több tucat sejtrel. Ez az, amit a forráskód:

Cinematron.

Minden olyan dolog, amit tudnod kell a filmekről

• iTTHON.
• premiers.
• jegyiroda.
• fotók.

És a CSS fájl:

#ADERER (magasság: 230px, háttérkép: URL (../ képek / fejléc1.jpg); Háttér ismétlés: No-Repeat; Font-Face: "Shift", Sans-Serif;) #HEADER H2 Méret: 4EM; Pozíció: Relatív; Top: 30px, Bal: 550px; Kijelző: Inline, Inline;) # # # betűméret: 1.3em; Betatív: relatív; Top: 50px; Bal: 60px; Kijelző: inline) #menu (pozíció: relatív, felső: 100px, bal: 340px; kijelző: inline-blokk;) #menu li (betűtípus-súly: merész; megjelenítés: inline; szöveges transzformáció: nagybetűs; 14px;) #menu bemenet (betűméret: 0,7em; szöveges transzformáció: kisbetű, szöveg-igazítás: jobb; pozíció: relatív; felső: -4px;

Ebben az esetben a Blokk elrendezését a CSS segítségével kell használni. Ilyesmi alkalmazása:

div (pozíció: relatív; felső: 100px, bal: 100px;)

Megadja a mozgást

100 képponttal lefelé és 100 képponttal jobbra a kezdeti helyzetével kapcsolatban. Ezen tulajdonságok segítségével könnyen áthelyezhető a szöveg az oldalon. Az egyik sarokról a másikra mozgathatja, hogy meghatározza, hogy melyik pozíció a legjobb. Ez jobb, mint az asztal.

Úszó.

Az úszó tulajdonságot széles körben használják a webhely blokk elrendezéséhez. Ezt a tulajdonságot a tartalomterület fő területének visszavonására fogjuk venni. Egy kis példa segít jobban megérteni, hogyan működik:

Három sokszínű eleme van.

. Zöld az alapvető cikkekhez, Piros hírcikkekhez és kékhez az alagsorhoz.

De a CSS-fájl:

#Green (szélesség: 200px, magasság: 200 px, határ: határ: 1px szilárd zöld; úszó: balra; margó: 5px;) #red (szélesség: 100px; magasság: 200 px; határ: 1px szilárd vörös; margó: 5px; lebeg ;) #Blue (szélesség: 310px, magasság: 100px, határ: 1px kék; margó: 5px; világos: mindkettő;)

És ez az, amit tettünk:

A rétegek lefektetésekor az úszó tulajdonságon keresztül adja meg, mit akar az elemed

lebegett. Ezután megadja az elmozdulás irányát. Ez általában lebeg: balra vagy úszásra: jobb. Ha megad egy elemet

Váltás balra, akkor megteszi, amíg a szabad hely véget ért.

A következő lebegő elem az első, és így tovább. A következő lebegő elem tele lesz, mint a víz! De ha nem szeretné csökkenteni az összes objektumot "a vízen", használhatja a tiszta tulajdonságot. Meghatározza, hogy az elem melyik oldala nem áramlik lebegő elemeket.

Itt van az elrendezésem a fő tartalomhoz:

Első cikk fejléc.

Első cikk BodyRead Több

Második cikk fejléc

Második cikk BodyRead Több

Első hírek Cikk fejléc

Első hírek Cikk teste

Második hírek Cikk fejlécje

Második hírek Cikk teste

Most legyen lebegő:

# Főtartalom (szélesség: 780px, úszó: bal, bal,) #News (margó balra: 20px, úszó: balra; szélesség: 180px;)

Van egy nagy blokk a cikkek és egy kisebb blokk a hírek. A Float tulajdonságot használtuk: balra és képekre. Kérjük, vegye figyelembe, hogy a címke által lefolyódott. Ez az elrendezés úgy néz ki, mint a kedvenc magazinod.

CSS-keretrendszerek

Ha kicsit lusta vagy

Ha nincs ideje zavarni a CSS-elrendezést kóddal, használhatja az egyik CSS-keretrendszert. Példánkban a bootstrap-t használjuk. Ehhez letöltenie kell, és csatlakoztatnia kell a HTML fájlba.

A Bootstrap tartalmaz egy rácsot, amely 12 egyenlő oszlopból áll. A HTML elemeket úgy kell megrendelni, hogy más számú oszlopot fedezzenek fel. Így létrejött az egyéni elrendezések. A tartalom minden egyes része a hálózathoz képest a megadott számú oszlopon keresztül igazodik, amelyre kiterjednek.

Itt van egy példa:

Ebben a példában létrehoztunk egy karakterláncot. Ezt követően két egyenlő oszlopot helyezett be benne. Mindegyikük a tizenkét rendelkezésre álló oszlop közül hatra terjed ki.

HTML kód:

HAMAROSAN:

És ez az, amit kaptam:

Jól néz ki. És amikor szóló a helyszínen a PSD nem is kell szerkeszteni a CSS fájlban. De nem látod, mi történik belül.

Flexbox

Klasszikus holnap

A Flexbox segítségével létrehozzuk a "Boxing-Office" webhely részét. Itt van egy HTML kód:

• Hamupipőke: $ 67.9m
• Fuss egész éjjel: $ 11.0m
• Kingsman: A titkos szolgáltatás: $ 6.2m
• Fókusz: $ 5,7m
• Chappie: $ 5,7m
• Mcfarland USA: $ 3.6m
• A Duff: $ 2.9m
• Amerikai mesterlövész: $ 2.8m

Itt van egy CSS kód a "BoxOffice" tartályhoz:

#BoxOffice (szélesség: 780px; Magasság: 500 képpont; background-image: URL (../ images / box_office_cropped.jpg); background-repeat: Cover; border-radius: 5px; padding: 20px;)

Most itt az ideje, hogy rugalmas tartályt hozzunk létre. Ehhez állítsa be a kijelzőt: FLEX elem. Az elrendezés szabályai szerint a Flexbox minden eleme a fő és a keresztirányú tengelyek mentén található:

A FLEXBOX esetében kétféle tulajdonságot állítunk be. Az első a rugalmas tartály, a második - a rugalmas elemek kitöltésére szolgál. Tekintsük részletesen az első típusú.

Alapértelmezés szerint a fő tengely vízszintes, így az elemek egymás után lesznek. A fő tengely megváltoztatásához használhatjuk a Flex irányú tulajdonságot. A következő értékek: sor, sor-hátramenet, oszlop és oszlop-fordított. Az oszlop értékét fogjuk használni. Adjuk hozzá a magasság tulajdonságot is. Miért van szüksége, meg fogod érteni egy kicsit később:

fLEX-CONTAINER (magasság: 300px, kijelző: flex, flex irány: oszlop;)

Itt van, amit a kis box irodánk úgy néz ki:

Mi használtuk HEIGHT tulajdon, mert nem akarjuk, hogy a flexbox tartály átfedés a kép a nyíl alján a háttérben.

A Flexbox lehetővé teszi a tartalom módosítását a HTML fájl megváltoztatása nélkül. Például, ha módosítani szeretné az elemek helyét az ellenkezőjére, akkor megváltoztathatja a flex irány értékét az oszlopok fordítottá. Ez megváltoztatja a flexbox irányát az ellenkezőjére. De meg kell változtatnia az elemek sorrendjét a tartályon belül.

Ehhez használjuk a tartalom tulajdonát. Elérhető: Flex-Start, Flex-End, Center, Space között és tér körül. Ehhez be kell állítania az igazolvány-tartalom értékét, ami egyenértékű a Flex-End.

Itt van a kód:

FLEX-CONTAINER (magasság: 300px, kijelző: FLEX, FLEX-DIREICT: oszlop-hátramenet, indoklás-tartalom: flex-end;)

És hogy ezek a változások tükröződtek:

A keresztirányú tengely mentén is mozgathatja az elemeket. Ez az Align-tételek tulajdonságát használja. Beállíthatja a következő értékeket: flex-start, flex-end, center, alapvonal vagy szakasz.

Ahhoz, hogy használja, adjon tulajdonságot a flexbox választóhoz:

FLEX-CONTAINER (ALIGN-TÉTELEK: Flex-End;)

Minden elem a jobb szélre változik:

Van egy másik hasznos tulajdonság - Flex-Wrap. Képzeld el, hogy a box iroda gyorsan növekszik. Mi történik, ha többé válik, mint a tartály? Semmi rossz, ha a Flex-Wrap tulajdonságot használja.

Próbálja meg hozzáadni a következő kódot.

HTML elrendezési elemek

A webhelyek gyakran több oszlopban találhatók (mint egy magazin vagy újság).

A HTML5 specifikáció új szemantikai elemeket kínál, amelyek meghatározzák a weboldal különböző részeit:

HTML elrendezés elrendezések

A több oszlop elrendezésének négy különböző módja van. Minden módszer előnye és hátránya:

• Táblázat HTML modell
• Modell float CSS.
• A CSS modellje.
• Modell flexbox CSS.

Melyik választani?

Táblázat HTML modell

Elem

Nem tervezték az eszköz elrendezésére! Feladatelem Táblázatos adatok megjelenítése. Tehát jobb, ha nem használhat asztalok az elrendezés elrendezéséhez! Ők lesznek rendetlenség a kódban. És képzeld el, milyen nehéz lesz újjáépíteni webhelyét néhány hónap alatt.

Tipp: Ne használjon táblázatokat az elrendezés megjelöléséhez!

A CSS modellje.

Ha gyorsan szeretné létrehozni az elrendezést, olyan kereteket használhat, mint a w3.css vagy Bootstrap.

Modell float CSS.

Gyakran közös, hogy az összes webes elrendezést a CSS tulajdonságok lebegésével.

Az úszó könnyen tanulható - csak emlékeznie kell arra, hogy az úszó tulajdonságai és a világos munka tulajdonságai. Hátrányok: A lebegő elemek a dokumentumáramláshoz kötődnek, ami károsíthatja a rugalmasságot.

Példa az elrendezés lebegésére.

Városi galéria

London

London Anglia fővárosa. Ez a legnépesebb város az Egyesült Királyságban, több mint 13 millió lakosú külvárosokkal.

A Thames folyó partján állva London két évezredén volt egy nagy település, a történetének, aki a rómaiak alapítását hagyta, aki Londiniumot hívta.

Tetszett a cikket? Oszd meg

Ajánlott cikkek a témában

A Flash Player miért nem működik, és hibaelhárítás

Maga a laptop kikapcsol, mit kell tennie?

HP Pavilion DV6: Jellemzők és vélemények

A látogatók most beszélnek

Formázási pont ábrázolása lebegőpontos számok Hogyan tárolják a negatív számokat a számítógép memóriájában Asus.

Számítógépes krumplit, és nem kapcsolja be, mit tegyen? D-link

Miért nem működik az egér egy laptopon vagy egéren? Android

Hogyan lehet növelni vagy csökkenteni az oldal méretét (betűtípus) az osztálytársakban? Problémák