Webbdesigners används för att designa deras hemsida prototyper på Photoshop . När du behöver för att konvertera din mockup till en levande plats , kommer vissa HMTL och CSS kunskaper vara användbara . Om du behöver exportera din mockup i din utveckling programvara eller plattform som Dreamweaver Joomla , kan du göra konverteringen i några få steg . Saker du behöver
Photoshop
Dreamweaver
Visa fler instruktioner
1
Dubbelklicka på Photoshop mockup . Klicka på " File " och " Spara för webb och enheter " för att exportera den till en webbsida format . Välj ett filformat som JPEG eller PNG . Ställ en bildkvalitet i den kommande dialogen . Klicka på " Spara ". Ange ett namn för din bild .
2
Beskär och separera din bakgrund begrepp , skugga och transparent kant effekt , sidfot och begrepp sidebar . Spara dem till en lokal katalog . De flesta av dem är layouten relevant .
3
Gå till Dreamweaver . Klicka på " File " och " New HTML -fil . " En ny HTML -fil kommer att inrättas med huvudramarna såsom sidhuvud och kropp avsnittet . Ange ett namn för filen .
4
Skapa en CSS -fil för webbplatsen genom att klicka på " CSS-format " i det övre högra hörnet av Dreamweaver . Högerklicka på tomt område för att skapa nya CSS-regler . Välj " Tag ( omdefinierar ett HTML-element ) " från Selector Type . Välj " kropp " och sedan " Ny formatmallsfil . " Klicka på " OK " för att börja definiera CSS -fil
5
Importera din bakgrundsbild och andra element koncept i din CSS-kod : bakgrund : URL ( /images /background.jpg ) , sidfot : . URL ( /images /footer.jpg ) ,.
