A professzionális webtervezők weboldal-sablonokat fejlesztenek, általában olyan erőteljes grafikus szerkesztőkben, mint az Adobe Photoshop. A munka eredménye egy képpel ellátott fájl, amelyet ebben a formában megkapunk az ügyfél számára. A kész dizájn, vagyis egy weblap elrendezéséhez használni kell a sablont.
Szükséges
raszteres grafikus szerkesztő Adobe Photoshop
Utasítás
1. lépés
Nyissa meg a sablonfájlt az Adobe Photoshop grafikus szerkesztőben. Válassza a Fájl és Megnyitás menüpontot, vagy nyomja meg a Ctrl + O billentyűkombinációt. Az utána megjelenő párbeszédpanelen lépjen a könyvtárba a fájllal, jelölje ki a listában, és kattintson a "Megnyitás" gombra.
2. lépés
Válasszon kényelmes skálát a sablonkép megtekintéséhez. Használja a Zoom eszközt vagy a helyi menü elemeket. Válasszon egy skálát, amely lehetővé teszi a kurzor pixel pontossággal történő pozícionálását. Erre a referenciavonalak pontos beállításához van szükség.
3. lépés
Alakítson ki egy referenciavonalat a sablonkép fölé. Kapcsolja be a vonalzók megjelenítését a dokumentumablakokban, ha még nincs bekapcsolva. Ehhez nyomja meg a Ctrl + R billentyűkombinációt, vagy válassza a menü Nézet és vonalzók menüpontját.
4. lépés
Vízszintes referenciavonal hozzáadásához vigye az egérmutatót a felső vonalzó fölé. Tartsa nyomva a bal oldali gombot. Vigye az egérmutatót lefelé a képterületre. Hasonlóképpen, a megfelelő vonalzóval hozzáadhat vízszintes vonalakat.
5. lépés
Adja hozzá a szükséges számú referenciavonalat, és helyezze el a sablon régióinak felosztásának határai mentén. A vonalaknak végig kell menniük azon a helyen, ahol a sablont kivágni kívánják. Korlátozniuk kell az összes képet és logikai területet (logó, webhelyfejléc, vízszintes és függőleges menük stb.), Amelyek egy weboldalon megjelennek.
6. lépés
Aktiválja a Szelet eszközt. Gombja a függőleges eszköztáron található.
7. lépés
Hozza létre a szükséges számú vágási területet a Szelet eszköz segítségével. Válasszon kényelmes skálát a sablon megjelenítéséhez. Az egérrel állítsa be a területek határait. A harmadik lépésben hozzáadott irányelvek pontos pozícionálást biztosítanak a létrehozott objektumok határain. Szükség esetén állítsa be a meglévő területeket a Szeletválasztó eszközzel.
8. lépés
Szükség szerint változtassa meg a vágási területek tulajdonságait. Aktiválja a Szeletválasztó eszközt. Kattintson a jobb gombbal a kívánt területre. A helyi menüben válassza a Szeletbeállítások szerkesztése elemet. A megjelenő Szeletbeállítások párbeszédpanelen válassza ki a terület típusát (kép, üres terület, táblázat), a háttér kitöltési módot, szükség esetén adja meg a nevet, a cél URL-t, az alt="Kép" attribútum tartalmát és egyéb értékeket. Kattintson az OK gombra.
9. lépés
Vágja el a sablont. Válassza a menü Fájl és Mentés webre és eszközökre parancsát, vagy nyomja meg a Shift + Ctrl + Alt + S billentyűkombinációt. A Mentés webre és eszközökre párbeszédpanelen adja meg a formátumot és a képtömörítési paramétereket, amelyekbe a sablont felvágja. Kattintson a Mentés gombra. Megjelenik az Optimalizált név mentése párbeszédpanel.
10. lépés
Válassza a HTML és képek (*.html) elemet a Fájltípus legördülő listából, és a Fájlnév mezőbe írja be annak a fájlnak a nevét, ahová a sablon HTML-jelölése kerül. A Szeletek listában válassza az Összes szelet elemet. Adja meg a kimenet könyvtárát és kattintson a "Mentés" gombra.
11. lépés
HTML fájl kerül a célkönyvtárba, ami valójában egy kész websablon. A Képek alkönyvtár tartalmazni fogja azokat a képeket, amelyekbe az eredeti sablont felvágták.
