Létrehozása WordPress téma a PSD fájl
Tehát, az első része a bemutató PSD-elrendezés hozta létre nekem, kész átalakítani egy teljesen kimunkált WordPress téma. Ebben a részben fogjuk kezdeni, hogy végre egy renderelt témát a gyakorlatban, az lesz nekem a Dreamweaver és Photoshop programokat. Mielőtt azonban belevágnánk, szeretnék egy kis kitérőt: tudom, hogy van egy eszköz a Photoshop „Detail» (szelet), amely lehetővé teszi, hogy gyorsan átalakítani PSD-elrendezés kész hely felhasználása nélkül Dreamweaver. Ez a módszer valóban nyit gazdag lehetőségeket exportáló CSS / HTML táblázatok képekkel, és ha azt akarjuk, hogy használja tiszta CSS oldal igazítás, akkor mentse az eredménye Töredékek, mint a „Csak képek”. A kellemetlenségért előre stílus az, hogy az összes elem felhasználásával abszolút pozicionálás, amely nem teszi lehetővé összpontosító tetszőleges szélességű monitorra.

Ezt követően, azt fokozatosan haladt a Dreamweaver. Itt elvitt tegye a következőket:
1. Hozzon létre egy új index.html fájlt - utóbb meg kell bontani a megfelelő php-files, de most megyek dolgozni az egész dokumentumot.
2. Hozzon létre egy üres CSS fájlban. Szabványok szerinti meg kell nevezni «style.css»; ez lesz a stílust egy témát.

Most már elindíthatja a kódot. Az első dolog, elkezdtem - ez meg a kezdő blokk #wrapper div. Megkérdeztem szélessége megegyezik az értéke 960 (mert tudom használni a workflow-automatizálás a 960 Rács System), és az összes árrés meghatározása: „auto”. Ez a lépés lehetővé tette, hogy középre a div az oldalon, azaz a téma középre lesz a külső függően a képernyő felbontása (összes saját témák vannak optimalizálva a felbontása 1024 × 768 és így tovább).
E lépés után, elkezdtem kivágni kép egy részét a Photoshop (vagy használja a szelet, akár Crop), és átadják a Dreamweaver. Elkezdtem a fejléc fájlokat:

„Elfelejtett logo!” - mondhatnánk, és én válaszolok: „Ne aggódj, minden rendben van. Most kelj fel neki. " Az itt bemutatott képek a screenshot, szolgál, a háttérben a saját blokk div (#header div). Ezen belül a blokk div tettem a logó, és adjunk hozzá egy hivatkozás a - template tag, ami automatikusan beilleszti a blog URL-címét (akkor is, ha a blog nem a gyökérkönyvtárban a helyén).
Áttérve. Következő napirenden navigáció. Azt vágja darabokra a Photoshop (tettem ezt annak érdekében, hogy ezt követően hozzon létre egy szép hover-hatás):
Ezeknek a képeknek (és a megfelelő pár, hogy hozzon létre egy légpárnás hatás) a képeket tartalmazó mappát, úgy döntöttem, hogy hozzon létre egy rendezetlen lista (ul), hogy megjelenjen a navigációs képernyőn. Mivel az alapértelmezett lista jelenik meg, mint egy függőleges vonal, és keresem felülnézetben, volt valami köze.
Én hozzá a következő sort a CSS stílusok:
Amennyiben Ön nem a dömpingelt CSS-stílusok, akkor meg kell adni a következő tulajdonságot, hogy távolítsa el a markerek a listából:
Így elkészítettem egy .html fájlt, majd később osztani több php-szerkezeti egység.