Photoshop är ett bra verktyg för att designa bilden delar av din webbplats , inklusive rollover knappar , rullgardinsmenyer och grafik som länkar till andra webbsidor . Dock är Photoshop självt inte en webbsida skapande verktyg . Lyckligtvis är det relativt lätt att exportera din prototyp till en webb- grafik format , samt bygga en HTML- webbsida som använder dessa inslag . Tänk på att interaktiva komponenter såsom hypertext länkar , knappar rollover och drop - down menyer kräver ytterligare arbete . Flytta utöver grunderna är mycket beroende på din applikation , och kan kräva särskild programmering. Saker du behöver Photoshop HTML Redaktör webbläsare Visa fler instruktioner Grundläggande webbsida 1
Öppna din prototyp i Photoshop och exportera till ett webb -stödda bildformat . Välj " Spara för webb och enheter " från Arkiv -menyn . I dialogrutan väljer du antingen JPEG , GIF eller PNG . Välj en bildkvalitet , med tanke på att högre kvalitet ökar filstorleken . 2
" Spara " filen på disk , ge den ett namn som " myPrototype.jpg . "
3
Öppna din HTML- editor och skapa en ny webbsida . De flesta HTML-editorer skapar en sida skelett webben för dig . 4
Lägg ett bildelement direkt under öppningen
. Bilden elementet kommer att ta formen : . . 5
Spara din hemsida och ladda in alla webbläsare
Bortom grunderna 6
Förbättra din layout genom att använda antingen tabeller eller Cascading Style Sheets ( CSS ) för att placera din layout . Den rekommenderade metoden är att ta de enskilda skikten , eller skivor , skapade i Photoshop och placera dem med hjälp av CSS . Den görs rätt , skapar detta en " flytande " layout som omplacerar layouten som webbläsaren storlek ändras . 7
Förbättra hastigheten med repeterande bakgrund element . I Photoshop , skapa ett 5 - pixel bred bit av din bakgrund och spara den till fil . I HTML , kan du upprepa elementet med bakgrunden attribut av din
,
eller CSS . Syntax för varje fall varierar , så kontrollera din HTML guide . Var noga med att ställa in bakgrunden attributet " upprepa ". 8
Använd bildscheman att skapa enkla länkar från en bild till en annan webbsida . Enligt webbutvecklare Gregory Hodges , skapa en
