Ez a cikk azokra a webhelyekre összpontosít, amelyeket a fejlesztők manuálisan hoznak létre, azaz ők alkotnak.

Ez a cikk azoknak a felhasználóknak szól, akik ismerik HTML és css . Az is kívánatos, hogy legalább az alapokat ismerje Adobe Photoshop

A valódi oldal létrehozásának egyik szakasza egy PSD-sablon létrehozása. Olyan neveket is találhat, mint az elrendezés, a tervezés vagy a forráskód.

A sablont a tervezőnek kell megrendelni. A tervező megrajzolja az elrendezést az Adobe Photoshop programban, és elmenti PSD formátumban.

Mit PSD formátum?

A jobb megértés érdekében egy egyszerű életpéldát hozhatunk. Gyermekkorban mindenki ragasztott alkalmazásokat. Kivágtak egy házat papírból – beragasztották. Kivágták a karácsonyfát – beragasztották. És így tovább, amíg a munka el nem készül.

És most el lehet képzelni egy olyan helyzetet, amelyben a figurákat kivágták, egy lapra kirakták megfelelő helyekre de még nem ragasztott. Így a PSD fájlformátum összevethető egy olyan alkalmazással, amelyre még nem ragasztották fel a figurákat, hanem a megfelelő sorrendben.

Ennek köszönhetően minden ilyen „figura”, vagy inkább a sablon minden egyes töredéke külön képként menthető, amelyet aztán felhasználhatunk a webhelyen.

Itt látható a létrehozandó oldal elrendezése.

Miután megvan kész sablon PSD formátumban közvetlenül az elrendezéshez léphet

  1. Hozzon létre egy mappát, ahol az elrendezést tárolni fogja, például „Webhely”.
  2. A "Site" mappában hozzon létre egy mappát a képek számára, például img.
  3. A "Webhely" mappában hozzon létre egy mappát a stílusokhoz, például a css-hez.
  4. Most el kell indítania az Adobe Photoshopot, és meg kell nyitnia a psd fájlt. Innen kell "kihúzni" az összes olyan képet, amely az oldalon lesz felhasználva.

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

Ez a gomb be- és kikapcsolja a rétegablakot. A rétegek a rátét nagyon nem ragasztott részei. A rétegek a kényelem érdekében mappákba vannak osztva, amelyek összecsukhatók és kibonthatók. A működési elve szinte ugyanaz, mint a Windows Intézőben.

Az első lépés az összes mappa összecsukása. Szükség szerint bővítse.

Most elkezdheti kihúzni a képeket

Az első lépés a kereteszköz kiválasztása. Ezután csak azt a részt válassza ki, amely korlátozza a webhely logóját

Ezt követően nyomja meg az Enter billentyűt. A kiválasztott terület kivételével minden le lesz vágva.

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

A szükséges rétegek gyors megtalálásához tegye a következőket:

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

Van azonban még két réteg, amit szintén ki kell kapcsolni. A műveletek hasonlóak.

Most mentheti. Ehhez kövesse az alábbi lépéseket

Válasszon a 4 javasolt lehetőség közül, és a javasolt második közül. Válassza ki a gif kiterjesztést.

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

Az alábbi elveket követheti:

  • fényképes minőség - jpg
  • fényképminőség átlátszó háttérrel – png-8 , nem elégedett a minőséggel - png-24
  • néhány szín a képen - gif

Az eredeti verzió visszaállításához a kivágás előtt meg kell nyitnia az előzmények ablakot

Kattintson a fájl nevére, és állítsa be a megfelelő léptéket.

A többi kép ugyanilyen módon kerül mentésre.

Ugyanez vonatkozik a mancs képére is, amely akkor jelenik meg, ha egy menüelem fölé viszi az egérmutatót.

A többi kép nem kötelező. Lehet fehér, lehet átlátszó.

Itt érdemes nagyon körültekintően kiválasztani a mentési lehetőséget, mert a psd forrásokban nem ritkák a rosszul feldolgozott élű képek. Íme egy példa:

A kép elmentve ide átlátszó háttér. Ha azonban feketén nézi, rosszul megmunkált élek láthatók. De világos háttér használatakor ez a hiba nem feltétlenül észrevehető.

A háttérhez ki kell vágnia egy kis képet, amely csempeszerűen kitölti az oldalt. Ebben a példában azonban a háttér nem ismétlődik. Ezért jobb hasonló képet találni. És megpróbálhatja felvenni, kivágva a különböző töredékeket a háttérből.

Az elrendezés kezdete. Csomagolás. Webhely fejléce.

Az elrendezést HTML5 és CSS3 fogja lefedni.

A webhely mappájában létre kell hoznia HTML fájl. Például index.html

A mappában css hozzon létre egy fájlt stílus.css .

Ráadásul a mappában css be kell tenni 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, blockquote, pre, a, abbr, mozaikszó, cím, nagy, idéz, kód, del, dfn, em, img, ins, kbd, q, s, samp, kicsi, ütés, erős, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, cikk, félre, vászon, részletek, beágyaz, ábra, képfelirat, lábléc, fejléc, hgroup, menü, navigáció, kimenet, rubin, szakasz, összefoglaló, idő, jel, hang, videó (margó: 0; kitöltés: 0; szegély: 0; betűméret: 100%; betűtípus: öröklődik; függőleges igazítás: alapvonal ; ) /* HTML5 megjelenítési szerepkör visszaállítása régebbi böngészőkhöz */ cikk, félre, részletek, képfelirat, ábra, lábléc, fejléc, hcsoport, menü, navigáció, szakasz (megjelenítés: blokk; ) törzs ( sor magassága: 1; ) ol, ul ( lista-stílus: nincs; ) blockquote, q (idézőjelek: nincs; ) blockquote:before, blockquote:after, q:before, q:after ( tartalom: ""; tartalom: nincs; ) table ( border- összeomlás: összeomlás; határ r-távolság: 0; )

A tény az, hogy különböző böngészők Ugyanaz a címke lehet különféle beállításokat. A böngészők közötti kompatibilitás biztosítása érdekében ezeket alaphelyzetbe kell állítani. A fenti kódot Eric Mayer készítette.

Először be index.html meg kell írni a fő címkéket.

GUABI Natural

A stílusok címkéjéhez be kell állítani a hátteret.

Mint már említettük, a háttér itt nem ismétlődik. Ezért ésszerűbb lenne bármelyik hasonlót választani.

Body( background-image: url(../img/bg.gif); )

Most létre kell hoznia a webhely burkolóját - egy blokkot, amelybe az összes tartalom kerül.

csomagolás

közel a záráshoz

a blokk azonosítót a megjegyzések közé írják. Címkeidővel
sok lesz, és zűrzavar keletkezhet. Nem derül ki, hogy melyik div zár be.

A blokkon belül található a burkolószó is. Ideiglenesen ott van. A cél az, hogy lássa a blokkot az elrendezés során, és megkülönböztesse a többitől. Ugyanezen okból a blokk stílusaiban átmenetileg némi világos háttér kerül megadásra.

A stílusok beállításához ismernie kell a szélességét és a felső és alsó behúzásokat. A méréshez megteheti Adobe Photoshop Használja a Négyszögletes kijelölő eszközt a webhely képének jobbról bal szélére történő kiválasztásához. A magasság nem számít.

A szélesség az "Info" ablakban látható

964 képpontos lett.

Ugyanígy már csak a kijelölés magassága a fontos, a szélesség nem, a behúzásokat felülről és alulról mérjük.

Felül 100px, alul 85px derült ki.

Ily módon a forrásban lévő távolságok meghatározásra kerülnek.

#wrapper (szélesség: 964px; margó-felső: 100px; margó-jobb: automatikus; margó-alsó: 85px; margó-bal: automatikus; háttérszín: #FF9; )

A bal és a jobb margó automatikusra van állítva. Ez a blokkot középre igazítja.

Oldal:

A szerzőtől: ma remek nap a weboldal gyors megváltoztatására! Készen áll arra, hogy online építse fel vállalkozását? Szeretne új weboldalt létrehozni a legújabb dizájn, pixelről pixelre? Vagy szeretné átdolgozni a régi oldalt az új trendek érdekében? Ehhez valóban kreatív embernek kell lennie, és képesnek kell lennie a Photoshoppal együttműködve csúcsminőségű webhelyek létrehozására. Még ha Ön egy professzionális webtervező is, aki rendelkezik a megfelelő képességekkel, minden képpont testreszabása még mindig eltart egy ideig, az összes oldal létrehozása az ügyfél webhelyéhez, és minden UI-elem, terület és apró részlet figyelmet fordít. Mindez időbe telik.

Sokkal gyorsabb, ha olyan jó minőségű PSD-webhelysablont veszünk, amelyet már minden pixelhez gondosan megterveztek. Különböző Photoshop-fájlok hatalmas választékával rendelkezünk. Egyszer vagy havi előfizetésként használhatók.

A legjobb PSD webhelysablonok az Envato Elements-en (korlátlan használat)

2016-ban elindult az Envato Elements weboldal, amely azonnal vad népszerűségre tett szert. Csak egy ajánlat van az oldalon (all inclusive):

Regisztráljon az Envato Elements szolgáltatásban, és korlátlan számú psd webhelysablont, témákat, betűtípusokat, grafikai készleteket és egyebeket tölthet le. Mindezt egy havi díjért. Minden helyes! Letöltés professzionális sablonokés grafikák kedvedre, testreszabhatod mindezt a projektedhez.

Alább látható az Envato Elements, Elementy Multipurpose PSD legnépszerűbb sablonja. 19 jár hozzá PSD fájl s, üzletek elrendezése, blogtervezés, portfólióoldalak stb.

Ha regisztrál az Envato Elements szolgáltatásra, korlátlan számú fájlt tölthet le, és korlátlanul használhatja őket havi 29 dollárért. A normál havi ár 49 dollár, most itt az ideje, hogy megragadja ezt a nagy kedvezményt.

Ha korlátozottak az igényei, vagy inkább külön vásárolna grafikát és webes tartalmat, több ezer kész sablonunk van a ThemeForest-en.

PSD webhelysablonok a ThemeForest-en

Alább a TOP PSD sablonok 2016-os webhelyek, amelyeket megvásárolhat vagy letölthet. Ez csak egy csepp a vödörben abból a kötetből, amit a professzionális webdizájnerek hetente feltöltenek a ThemeForestbe. Vessen egy pillantást 2016 legjobb Photoshop webhelysablonjaira:

A megfelelő dizájn egy közepes webhelyet műalkotássá változtat:

Az Ön webhelyén az eladások az egekbe szökhetnek, és maradandó benyomást kelthet a potenciális vásárlókban, ezáltal növelve minimális ár.

Átalakíthatod az identitásodat – alakíts át egy közepes márkát cukorkává.

Vállalkozása (vagy ügyfelei) online valósíthatja meg terveit és lehetőségeit!

A TOP 10 PSD webhelysablon (a ThemeForest 2016-ból)

Alább található a TOP 10 PSD webhelysablon a ThemeForest webhelyen. Minden sablont tehetséges webtervezők hoznak létre, akik időt és odafigyelést fektetnek a PSD-fájlok minden részletébe.

1. Cesis – Átfogó, többcélú PSD webhelysablon

2016 legjobb PSD-sablonkészlete a funkciók széles skálájával. A Photoshopban több mint 100 mintát tartalmazó készlet, az elrendezések letisztultak és nagyon rugalmasak. Lenyűgöző sablonok, minden pixel illeszkedik, 1170 képpontos rácsrendszeren alapul. Használjon maketteket weboldal létrehozásához bármilyen típusú cég számára, a divatblogoktól a művészeti portfóliókig vagy kreatív vállalkozásokig.

2. OnePro – Kreatív PSD webhelysablon

A One Pro egy tiszta SPD webhelysablon népszerű dizájnnal. A sablon használja jó rendszer rácsok, amelyek segítségével számos különböző webhely hozható létre személyes oldalakkal, üzletekkel vagy vállalati blogokkal. Ebben a sablonban legalább 55 logikusan elrendezett PSD-fájl található. Használja ezt a témát gyors alkotás gyönyörű oldalak.

3. Electro — Electronics Online Store PSD-sablon

Az Electro egy rendkívül funkcionális készlet, amely 36 PSD-sablonból áll. A sablon letisztult, könnyű dizájnnal rendelkezik, és készen áll egy csodálatos online elektronikai áruház létrehozására. A sablonfájlok professzionálisan vannak rendezve és csoportokba rendezve a könnyebb használat érdekében. Három egyedi honlap és 5 egymással kombinálható fejléc is tartozik hozzá.

Modern tendenciákés a webfejlesztés megközelítései

Tanulja meg a gyors növekedés algoritmusát a nulláról a weboldalkészítés során

4. Kör – Egyedi PSD webhelysablon

A Circle egy PSD webhelysablon, amely lenyűgöző dizájnnal érkezik. 173 réteges PSD-fájlt és sokféle tervet kap. Ez egy modern, letisztult és professzionális weboldalkészlet, amely különböző cégek számára testreszabható. A tervek grid rendszeren alapulnak, ami megkönnyíti a Photoshop fájlok bármely CMS-re konvertálását.

5. Agora – Csodálatos e-kereskedelmi PSD-sablon

Az Agora egy modern, könnyű és kreatív e-kereskedelmi sablon. Ha ezt a készletet választja, a felhasználók imádni fogják webhelyét. Az oldal gyönyörű és egyedi élményt nyújt a felhasználóknak. A PSD-sablonok sport stílusban készülnek, de bármit eladhatnak. 14 gyilkos dizájnt és 6 grafikus csúszkát tartalmaz!

6. A Spectre – Ügynökség webhelysablonja

A Spectre egy modern, lapos sablon ügynökségek számára. A dizájn letisztult, 12 reszponzív oldallal és témablokkokkal, amelyeket tetszés szerint keverhet és párosíthat. Rengeteg tervezési funkció, stílusos vonalikonok, vektoros formák, szemet gyönyörködtető UI-elemek, például profilok, fülbemászó idézetek és megjelenített képek. A sablon testreszabott a Bootstrap számára, 12 oszloppal és 1170 képpont szélességgel. Ez egy jól megtervezett, vonzó PSD-fájlkészlet, amely készen áll a következő tervezésben való használatra.

7. Szakértők – Üzleti és pénzügyi PSD-sablon

Ha az egyik legjobb sablont keresi új pénzügyi webhelyéhez, az Experts nagyszerű választás. Tartalmaz 55 PSD fájlt, rengeteg dizájnt kezdőlap, valamint egyedi oldalak, ahol elhelyezheti az árakat, véleményeket, szolgáltatásait stb.

Ez a sablon egy öltöny és nyakkendő az Ön vállalkozásához. A sablon jogászok, pénzügyi társaságok, befektetési cégek, könyvelők és minden más számára készült szakmai tevékenység. 21 fejléc közül választhat, rengeteg lábléc és tökéletesen illeszkedő komponensek, valamint testreszabható szakaszok.

8. Begge – Modern Fashion Store PSD sablon

Ha idén azt a célt tűzi ki maga elé, hogy kifejezetten a divatos ruhák területén indít egy webáruházat, ez a sablon kifejezetten Önnek készült. Optimális kialakítás, amely először az Ön termékeit és képeit mutatja be.

Tiszta elrendezés nagyon világos felépítéssel. A dizájn lenyűgöző, és átfedő blokkbetétekkel szervezett, hogy megragadja a látogatók figyelmét. A PSD-fájlok rendszerezve vannak, és gyorsan testreszabhatók, hogy illeszkedjenek webhelyéhez!

9. Digitális Ügynökség – SEO/Marketing sablon

Digitális Ügynökség – PSD webhelysablon SEO és különféle ügynökségek számára. Anyagtervezésen alapul, tiszta UI-elemeket keverve élénk színekkel. Csak arra vár, hogy hozzáadja fotóit és grafikáit, mielőtt feltölti az oldalra. Választhat, hogy vásárol egy PSD-fájlt, vagy vásárol egy WordPress-verziót kóddal, beépített Bootstrap 3-mal és számos funkcióval.

10. Volter – Kreatív webhelysablon (PSD)

Kreatív PSD webhelysablon szokatlan design stílussal. A Voltert úgy tervezték, hogy bemutassa portfólióját, gyönyörű képeit, és új látogatókat vonzzon sajátos betűtípusával. Itt bemutathatja munkáját, leírhatja szolgáltatásait, és elmondhatja az új ügyfeleknek, miért érdemes Önt alkalmazniuk.

A PSD fájl rendelkezik nagy felbontásúés a Bootstrap 1170px grid alapján nagyon könnyű vele dolgozni. Legjobb sablon teljesen készen áll a munkára, vegyen és tervezzen egyedi oldalakat!

Szerezzen be új webhelysablonokat (PSD)!

Fedezzen fel több száz professzionális PSD-sablont, amelyet tehetséges webdesignerek hoztak létre a ThemeForest-en. Vagy ha sokat akarsz letölteni Photoshop sablonok, témák és grafikai készletek rendszeresebben, nézze meg az Envato Elements szolgáltatást, ahol rengeteg minőségi fájlt tölthet le és használhat korlátok nélkül, egyszeri havi díj ellenében.

Az előző cikkben világosan bemutattam, hogyan lehet Photoshopban weboldal elrendezést készíteni, és az eredmény egy egyszerű, de nem figyelemfelkeltő sablon lett.

Ebben a cikkben bemutatom, hogyan alakíthatja át PSD-elrendezésből kész weblappá HTML-jelölőeszközök és Cascading Style Sheets (CSS) segítségével.

Általánosságban elmondható, hogy sokféle megközelítés létezik a sablonok elkészítésére: valaki először alaposan megrajzolja a sablont, és csak ezután készíti el az elrendezést, valaki hozzávetőlegesen megrajzolja a tervet, és az elrendezés során vonásokat ad hozzá; egyesek először rajzolnak, majd kivágnak, mások (ahogyan az előző cikkben tettük) közvetlenül a terv létrehozása során mentik el a grafikus objektumokat. Még az elrendezési és rajzeszközök is mindenkinél mások: vannak, akik bővítményeket telepítenek és működnek vizuális szerkesztők, mások használják standard készlet lehetőségek és betűtípusok egy egyszerű szerkesztőben ... általában az alábbiakban csak egy lesz a sok közül.

Előkészületi szakasz

Tehát bárhol (legalábbis az Asztalon, legalább egy külön mappában) hozzon létre egy fájlt index.html. Ugyanabban a könyvtárban adja hozzá a könyvtárat képeket. Tartalmazni fogja a sablonban és az oldalon használt összes képet. Mivel a grafikai elemeket előre kivágtuk, azonnal átmásoljuk a képek mappába, és a következő neveket adjuk nekik:

  • back_all- weboldal háttere.
  • header_top- fejléc háttér.
  • nagy_kép- logó.
  • cím- a bal oldali panel címsorainak háttere.
  • lábléc- az oldal aljának kitöltése.
  • 1 mini- az első fotó az oldal fő részére.
  • 2 mini- második fotó.

Az index.html oldalt tartalmazó mappában hozzon létre egy fájlt stílusok.css- tartalmazza majd a sablon stíluslapjait.

A Jegyzettömb nem ajánlott kódszerkesztéshez. Sokkal jobb erre a célra jegyzettömb szerkesztő++. Ez egy szintaktikai kiemelő különböző nyelvek(HTML és CSS - beleértve) egy olyan program, amiben sokkal kényelmesebb fejleszteni, mint benne egyszerű szerkesztők szöveges dokumentumok.

Ossza fel a dokumentumot blokkokra

Nyissa meg a dokumentumot index.htmlés írja be a következő kódot:

Webhely sablon

Mentse el a fájlt. Ezeket a címkéket már régóta tanulmányoztuk, és nem szorulnak magyarázatra. A fenti kóddal létrehoztuk a HTML oldal alapját, most blokkokra kell osztanunk - adja meg a dokumentum szerkezetét, mi fog következni benne.

7 blokkunk van, ezeket azonosítónként (attribútumérték id):

1. tartalom- az a blokk, amelyben a többi blokk tárolva lesz.

2. fejléc- fejléc blokk, amelyen belül lesz:

2.1. menü- felső navigáció.

2.2. logó- kép szöveggel.

3. jobb- az oldal fő része.

4. bal- bal oldali panel.

5. lábléc- az oldal alja.

Tehát írunk (a tárolóba illessze be a következő kódot):

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

Állítsa be az alapvető formázást

Most térjünk át a CSS-stílusra, hogy a dokumentum kezdeti megjelenését adjuk.

Nyisd ki stílus.cssés adja hozzá az alább látható kódsorokat.

Alapértelmezés szerint a paplan és a margók eltávolítása az oldalról:

* ( margó: 0 képpont; kitöltés: 0 képpont; )

A linkek színét a felhasználó viselkedésétől függően állítjuk be (lebegett, nem mozgott, meglátogatott), és eltávolítjuk az aláhúzást azokról a hivatkozásokról, amelyek felett az egérmutató található:

A:link ( szín: #D72020; ) a:hover ( szöveg-dekoráció: nincs; szín: #FF0000; ) a:látogatott ( szín: #D72020; )

Felállítjuk az oldal alapkialakítását: előírjuk a háttérszínt és a háttérképet (beállítjuk a kép vízszintes kitöltését), beállítjuk a színt, stílust és betűméretet:

Törzs ( háttér: #FFD723 url(images/back_all.jpg) repeat-x; betűtípus: 13px Tahoma, Verdana, Arial, Helvetica, sans-serif; szín: #333333; )

Tartalomblokk meghatározása:

#content ( margó: 0 automatikus; háttér: #ffffff; szélesség: 786 képpont; szövegigazítás: balra; )

Most frissítheti az oldalt. Hátsó mintával van kitöltve. Eddig az egyetlen látható változás, amiért az ingatlan felelős háttér osztály test.

Vízszintes menü készítése

Van egy kezdet, és most már közvetlenül elkezdheti a fő blokkok elrendezését.

Kezdjük természetesen a kalappal. Ami viszont egy vízszintes menü és egy logó blokkjaiból áll.

Először is állítsuk be mindkét fejlécelem általános megjelenését: szövegigazítás balra, fehér háttér és 306 képpont magasság:

#fejléc ( háttér: #ffffff; magasság: 306 képpont; szövegigazítás: balra; )

Így kaptunk egyfajta fejléc teret: egy fehér téglalapot, amelyen az elemei fognak elhelyezkedni.

Logikus lenne most megtenni vízszintes menü. Ezt fogjuk megtenni, de csak a HTML-be való beillesztés előtt kell elkészítenünk a CSS-szabályokat, különben szörnyen fog kinézni a böngészőben.

Végezzük el az első beállításokat: állítsuk a bal oldali szegélyt 2 pixel vastagra, a menü szélességét és magasságát, valamint az X tengely mentén ismétlődő háttérképet:

#menu (bal oldali szegély: 2px tömör #ffffff; szélesség: 779px; magasság: 80px; háttér: url(images/header_top.gif) ismétlés-x; )

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

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

Frissítve az oldalt, láthatod, hogy valóban megjelent.

Csak itt a hivatkozások típusa hagy kívánnivalót maga után. Állítsunk be rájuk saját szabályainkat (igazítás, szélesség, szín, félkövérség stb.), a lebegtetett hivatkozásoknál pedig állítsuk be a színváltozást, és adjuk vissza a sablonból eltávolított aláhúzást:

#menu a ( float: balra; szélesség: 99px; magasság: 46px; kijelző: blokk; szövegigazítás: középre; szövegdekoráció: nincs; szín: #ffffff; betűsúly: félkövér; betűméret: 14px; kitöltés -felső: 35px; ) #menü a:hover ( szín: #D72020; szövegdekoráció: aláhúzás; )

A menü formázása most hozzárendelhető a PSD-sablonhoz.

Ügyeljen arra, hogyan változik az elem kialakítása, ha a mutatót rá mozgatja (erért a szabályok a felelősek). #menu a:hover).

A logó testreszabása

A logó már megvan, és a mappában van, csak hozzá kell adni az oldalhoz és formázni a szabályokkal. Mindkettő megtehető CSS használatával amit nem fogunk elmulasztani.

#logo ( háttér: #ffffff url(images/big_pic.jpg) no-repeat; szélesség: 738px; magasság: 146px; szövegigazítás: balra; padding-top: 80px; padding-bal: 40px; border-bal: 4px szilárd #ffffff;)

A logó pontosan méretben van beillesztve.

Az egyetlen dolog, ami hiányzik belőle, az a szöveg. Helyezze be a hiányzót a blokkba logó fájlt index.html megszerezni:

A szöveg megjelent, de azt is formázni kell.

Abból kiindulva, hogy a logó szinte mindig egy hivatkozás, a megfelelő osztályokhoz állítjuk be a designt.

#logo a ( szövegdekoráció: nincs; szövegátalakítás: kisbetűs; betűstílus: dőlt; betűméret: 36 képpont; szín: #FFFFFF; ) #logo h2 a ( betűméret: 24 képpont; )

Itt nem kell magyarázni semmit, minden tulajdonságot ismersz a CSS leckékből. azonban megjelenés A szöveg megváltozott, és általában a fejléc most még jobban néz ki, mint a PSD-elrendezésen.

Az oldal fő részének szedése

Ezután beállítjuk a legnagyobb blokkot, amelyre az összes egyedi tartalom kerül. 500 képpontot foglal el, és a webhely jobb oldalán található. Állítsuk be a pozicionálás szabályait, a címsorok, bekezdések és hivatkozások kialakítását (a CSS-ről szóló cikkekben már beszéltünk minden tulajdonságról).

#jobb ( lebegés: jobb; szélesség: 500 képpont; kitöltés jobb: 10 képpont; ) #jobb h4 ( margó: 0; kitöltés: 0px; betűméret: 12 képpont; szín: #D72020; ) #jobb a ( szín: #D72020 ; szövegdekoráció: nincs; ) #jobb p ( margó: 0; kitöltés: 0; kitöltés-alsó: 10px; ) #jobb h2 ( margó: 0; kitöltés: 0; kitöltés felső: 10px; szín: #D72020; )

Mivel csak a blokk szélességét rögzítettük, addig nem lesz látható változás, amíg nem töltjük fel tartalommal - az oldal magassága tartalomtól függően változik.

Töltsük meg a tartályt jobb. A képek egy egyszerű táblázatba kerülnek.

Képtár


Konyhák


A tartalom jelölést kapott, de ez nyilvánvalóan nem elég fehér háttér, amely hamarosan nem jelenik meg teljesen.

A bal oldali panel létrehozása

Terítés közben, de a tervrajz megrajzolása után kiderült, hogy oldalsáv alelemei is lesznek, és ezeknek akkor kell megjelenniük, amikor az egérmutatót a fő elem fölé viszi, és el kell tűnnie, ha nincs rajta mutató.

Elég gyakoriak az olyan helyzetek, amikor „menet közben” kell finomítani a tervezést. A menü és a fő tartalom közötti térköz lehetővé teszi alpontok beszúrását, de ami érdekes, az az almenü eltűnési-megjelenési trükkje.

Írja be a következő kódot a CSS-fájlba.

#bal ( padding: 10px; szélesség: 237px; padding-right: 1em; ) #left h3 (szélesség: 225px; magasság: 25px; betűméret: 14px; betűméret: félkövér; kitöltés balra: 15px; padding- felső: 15 képpont; szövegátalakítás: nagybetűs; szín: #ffffff; háttér: url(images/title.gif) no-repeat ) #left ul ( margó: 0; kitöltés: 10px; listastílus: nincs; szélesség: 100 képpont ; betűméret: 18px; ) #bal li ul ( pozíció: abszolút; bal: 90 képpont; felső: 0; kijelző: nincs; ) #bal ul li ( pozíció: relatív; margó-alsó: 20 képpont; ) #left ul li a ( kijelző: blokk; szövegdekoráció: nincs; szín: #ffffcc; háttér: #ff9900; kitöltés: 5px; szegély: 1px tömör arany; keret-alsó: 0; ) #bal li:hover ul ( kijelző: blokk; ) #bal li li ( margó-alsó: 0px; szélesség: 150px; ) #bal p (padding: 10px; szegély-alsó: 1px tömör #D72020; szegély-bal: 1px tömör #D72020; szegély-jobb: 1px tömör # D72020 ;)

Ügyeljen az osztályszabályokra ulés li- az étlap eltűnésének titka ott van, fedd fel magad.

Először adjunk hozzá egy menü nélküli információs blokkot a HTML dokumentum bal oldali tárolójához.

Információ

Ünnepi kedvezményeket biztosítunk. További...


Menü

A fehér háttér lejjebb terjedt az oldalon.

Itt az ideje beilleszteni a bal oldali panel menükódját a HTML-fájlba. Ellentétben a felső navigációval, listák segítségével valósítja meg, ami a CSS-szabályokból is látható.

Weboldal fejlesztése során a legjobb, ha mindent leegyszerűsítünk, amennyire csak lehetséges, mivel lehetőségünk van néhány kattintással telepíteni egy kész sablont, és elkezdeni dolgozni. Ez különösen igaz azokra, akik vagy nem erősek a programozásban, vagy korlátozott idejük van. De ha az a cél, hogy az oldalt egyedibbé tegye, bizonyos készségekkel rendelkezik az elrendezésben, de még mindig szeretne időt megtakarítani, akkor van egy nagyszerű megoldás - kész webhelyelrendezések az elrendezéshez.

Az ilyen elrendezéseket a tervezők a Photoshopban készítik, és valójában közönséges oldalgrafikai fájlok. Nincsenek vágva, hanem egyes fájlokban érkeznek. Előnyük, hogy a tervező önállóan tudja a megrendelő egyedi igényeihez igazítani a tervet. Igen, és a PSD-sablonok meglehetősen olcsók. Az egyik vezető Themeforest sablonoldalon az elrendezés ára 3 dollártól kezdődik.

A hétköznapi felhasználók számára a webhely elrendezése nem lesz különösebben hasznos, ezért azt javaslom, hogy ne veszítsen extra időt és idegeket, és azonnal válasszon egy kész webhelysablont. Igen, drágábbak, mint a PSD-sablonok, de ez a különbség több mint megtérül a megspórolt idővel, valamint azzal, hogy nincs szükség további elrendezésre és szakember bevonására az adott rendszerhez való alkalmazkodáshoz. Weboldalunkon egy egész rovat található több ezernek, bármilyen célból. Vannak sablonjaink és egyéb CMS-eink is. Segítségükkel megértheti majd, hogy a weboldalfejlesztés valójában nagyon egyszerű!

A professzionális felhasználók számára bemutatjuk a legjobb húsz PSD-elrendezést különféle célokra: üzleti célokra, kreativitásra, blogra és e-kereskedelemre. Szinte minden PSD-elrendezésnek van WordPress-verziója, így kezdőknek is javaslom, hogy olvassák el ezt az ismertetőt.

Weboldal elrendezések kezdőknek és tapasztalt felhasználóknak

TheFox – Többcélú webhelyelrendezés

Ez a legnépszerűbb elrendezés tartalmaz összetevőket egy bloghoz, üzlethez, céloldalhoz, portfólióhoz és vállalati webhelyhez. Mindegyik ízlés- és stílusérzékkel készült. A készlet 280 PSD fájlt tartalmaz. A WordPress szerelmesei számára elérhető egy kész verzió ehhez a CMS-hez.

Avada – Univerzális PSD-makett

Ez az elrendezés 59 egyedi kialakítású PSD-fájlt tartalmaz különféle típusú webhelyekhez, beleértve az online boltokat, portfóliókat és blogokat. Dobozos és széles változat is elérhető. A világ legnépszerűbb WordPress-megoldásának számító Avada-sablonnak van egy teljes WordPress-verziója is (360 ezer elégedett ügyfél).

AdelFox – Többcélú PSD-sablon

150 Photoshop-fájl, amely több tucat honlapot, online áruházat, portfóliót, blogot és egyéb oldallehetőségeket rejt. Mindegyik támogatja a rövid kódokkal való munkát, ami azt jelenti, hogy a tartalom hozzáadása nagyon egyszerű lesz. Alkalmazások: kreatív blog, híroldal, személyes portfólió és céges oldal.

Fekete + fehér - egyszerű elrendezés minimalista dizájnnal

Letisztult, elegáns lehetőség azok számára, akik egyedibbé szeretnék tenni weboldalukat. Ideális gyönyörű fotókat tartalmazó webhelyekhez. Semmi extra - csak a legfontosabb.

HATALMAS – Univerzális PSD-makett a tökéletes webhelyhez

Az elrendezés nagyon stílusos, és sokféle lehetőséget kínál bármilyen feladathoz. A Photoshop készségeinek használatával elérheti a design egyediségét. Teljes szélességű szakaszok, harmonikák és legördülő menük támogatása.

Léteznek WordPress és Joomla verziók ehhez az elrendezéshez, hogy megkönnyítsék a fejlesztést.

Enfold – népszerű weboldalelrendezések PSD formátumú elrendezéshez

Ez egy univerzális elrendezés bármely tevékenységi területen működő vállalat számára. A 31 jól szervezett Photoshop-fájl lehetővé teszi, hogy egy kicsit módosítsa a beállításokat, ami egyedi megjelenést eredményez. Az elrendezésben szereplő összes ikon és betűtípus ingyenes. Van egy Enfold WordPress téma is azok számára, akik nem akarják megizzadni.

Waxom – Pure Universal Photoshop Layout

238 fájl, letisztult dizájn, Google betűtípusok és Bootstrap rács. Alkalmazások: portfólió, hosting, gyógyszer, utazás, templom, ingatlan, autók, online kereskedelem és üzlet. Vannak mobil elrendezések és WordPress téma is, mindössze 59 dollárért.

Körök – klassz weboldalelrendezések tökéletes dizájnnal

Ez az elrendezés ötvözi a lenyűgöző dizájnt erőteljes funkcionalitással és használhatósággal. Támogatja a Bootstrap griddel való munkát. Mind a 14 PSD-fájl bármelyikben megnyílik Photoshop verziók. Nagyon kényelmesen vannak rétegekbe rendezve, hogy könnyebb legyen velük dolgozni.

Travelo - utazási iroda elrendezési készlet

Ez az elrendezés stílusos mintákat tartalmaz utazásszervezők és utazási irodák számára. 21 csúszka opció a Revolution és a Layer Slider támogatásával. 12 honlap elrendezés. Létezik WordPress verzió is.

Delimondo - Reszponzív étterem webhely-elrendezés

Ez az elrendezés 5 tervezési stílust tartalmaz, mindegyik 10 oldalas. Összesen 50 PSD-fájl található a tervezés alapos testreszabásához. Támogatás a csúszkákhoz, foglalási űrlapokhoz és ingyenes Google betűtípusokhoz.

Ez egy speciális tervezési elrendezés, amelyek különösen népszerűek az orosz felhasználók körében. Az elrendezés támogatja a változatokat kezdőlap, valamint kategóriák oldalai, termék-összehasonlítás, bevásárlókosár, fizetés, bejelentkezés/regisztráció, fiókot, blog és mások.

Foglalja le utazását – a webhely elrendezései az utazásszervezők elrendezéséhez

Ezt a PSD-sablont olvasóink már ismerik a WordPress-sablonnak köszönhetően, amely foglalási szolgáltatásokhoz, utazási irodákhoz, szállodákhoz és utazási blogokhoz használható. A megtervezett fájloknak van egy kezdőlapja keresősávval, egy keresési eredményoldal, valamint az összes információt tartalmazó szállodaoldalak. Összesen 16 PSD fájl van.

Utazási Iroda – Többfeladatos utazási PSD weboldal elrendezése

Letisztult dizájn foglalási funkciókkal utazási és ingatlanügynökségek számára. Három színstílusban kapható: kék, zöld és narancssárga. Összesen 59 PSD fájl van!

Vélemények kész WordPress oldalakról a turisztikai szektor számára, lásd és.

Super Duper - stílusos elrendezés minden vállalkozás számára

Ebben az elrendezésben 150 Photoshop fájlok 21 kezdőlap elrendezést, több mint 50 online áruház opciót, 10 blogoldalt és még 2 egyoldalas webhelytervet is talál. Mobil elrendezések biztosítottak.

Carry Hill – az iskola weboldalának PSD elrendezése

Ennek az elrendezésnek az egyedi kialakítása kiválóan alkalmas iskolai és kreatív weboldalakra egyaránt. 8 egyszerű PSD fájl a főoldal, a blog, a galéria, a kapcsolati adatok és egyéb oldalak kialakításával. A Doodles támogatja.

Nevelési WordPress témák több áttekintésben figyelembe vettük:, és.