Profesionálni weboví návrhári vyvíjajú šablóny webových stránok, zvyčajne vo výkonných grafických editoroch, ako je napríklad Adobe Photoshop. Výsledkom práce je súbor s obrázkom, ktorý je v tejto podobe poskytnutý zákazníkovi. Ak chcete použiť hotový dizajn, to znamená rozložiť webovú stránku, musíte šablónu vystrihnúť.
Nevyhnutné
rastrový grafický editor Adobe Photoshop -
Inštrukcie
Krok 1
Otvorte súbor šablóny v grafickom editore Adobe Photoshop. V ponuke vyberte položky Súbor a Otvoriť alebo stlačte kombináciu klávesov Ctrl + O. V dialógovom okne, ktoré sa potom zobrazí, prejdite do adresára so súborom, vyberte ho v zozname a kliknite na tlačidlo „Otvoriť“.
Krok 2
Vyberte vhodnú mierku na prezeranie obrázka šablóny. Použite nástroj na zväčšenie alebo položky kontextovej ponuky. Vyberte mierku, ktorá vám umožní umiestniť kurzor s presnosťou na pixely. To je nevyhnutné na presné nastavenie referenčných čiar.
Krok 3
Nad obrázkom šablóny vytvorte množinu referenčných čiar. Zapnite zobrazenie pravítok v oknách dokumentu, ak ešte nie je zapnuté. Ak to chcete urobiť, stlačte kombináciu klávesov Ctrl + R alebo z ponuky vyberte možnosť Zobraziť a pravítka.
Krok 4
Presunutím kurzora myši nad horné pravítko pridáte vodorovnú referenčnú čiaru. Stlačte a podržte ľavé tlačidlo. Posuňte kurzor myši nadol na oblasť obrázka. Rovnako môžete pomocou pravítka pridať vodorovné čiary.
Krok 5
Pridajte požadovaný počet referenčných čiar a umiestnite ich pozdĺž hraníc rozdelenia oblastí šablóny. Čiary by mali prechádzať všetkými miestami, kde chcete šablónu vystrihnúť. Mali by obmedzovať všetky obrázky a logické oblasti (logo, hlavička webu, horizontálne a vertikálne ponuky atď.), Ktoré budú prezentované na webovej stránke.
Krok 6
Aktivujte nástroj Slice. Jeho tlačidlo je na zvislom paneli nástrojov.
Krok 7
Vytvorte požadovaný počet rezných plôch pomocou nástroja Slice Tool. Vyberte vhodnú mierku na zobrazenie šablóny. Pomocou myši nastavte hranice oblastí. Pokyny pridané v treťom kroku poskytnú presné umiestnenie hraníc objektov, ktoré vytvoríte. V prípade potreby upravte existujúce oblasti pomocou nástroja na výber rezu.
Krok 8
Podľa potreby zmeňte vlastnosti rezných oblastí. Aktivujte nástroj na výber rezu. Kliknite pravým tlačidlom myši na požadovanú oblasť. V kontextovej ponuke vyberte položku Upraviť možnosti rezu. V zobrazenom dialógovom okne Možnosti rezu vyberte typ oblasti (obrázok, prázdna oblasť, tabuľka), režim vyplnenia pozadia, prípadne zadajte názov, cieľovú adresu URL, obsah atribútu alt="Obrázok" a ďalšie hodnoty.. Kliknite na tlačidlo OK.
Krok 9
Vystrihnite šablónu. V ponuke vyberte možnosť Súbor a Uložiť pre web a zariadenia alebo stlačte kombináciu klávesov Shift + Ctrl + Alt + S. V dialógovom okne Uložiť pre web a zariadenia zadajte parametre formátu a kompresie obrázkov, do ktorých bude šablóna vyrezaná. Kliknite na tlačidlo Uložiť. Zobrazí sa dialógové okno Uložiť optimalizované ako.
Krok 10
V rozbaľovacom zozname Typ súboru vyberte HTML a obrázky (*.html) a do poľa Názov súboru zadajte názov súboru, do ktorého bude umiestnená značka šablóny HTML. V zozname Plátky vyberte Všetky plátky. Zadajte adresár pre výstup a kliknite na tlačidlo „Uložiť“.
Krok 11
Súbor HTML bude umiestnený v cieľovom adresári, čo je v skutočnosti hotová šablóna webovej stránky. Podadresár obrázkov bude obsahovať množinu obrázkov, na ktoré bola pôvodná šablóna vystrihnutá.
