Web-designere er vant til å designe deres nettside mockups på Photoshop . Når du trenger å konvertere mockup til en live nettsted, vil noen Html og CSS ferdigheter være nyttig . Hvis du trenger å eksportere mockup inn din utvikling programvare eller plattform som Dreamweaver Joomla , kan du gjøre konverteringen i noen få trinn. Du trenger
Photoshop
Dreamweaver
Vis flere instruksjoner
en
Dobbeltklikk Photoshop mockup . Klikk på " File" og " Save for Web and Devices " for å eksportere den til en Web- vennlig format . Velg et filformat som JPEG eller PNG . Sett en bildekvalitet i den kommende dialogen. Klikk på " Lagre". Skriv inn et navn for bildet .
2
Crop og skille din bakgrunn begrep , skygge og gjennomsiktig grensen effekt , bunntekst og sidebar konsepter . Lagre dem til en lokal katalog . De fleste av dem er layout relevant .
3
Gå til Dreamweaver . Klikk på " File" og " New HTML-fil . " En ny HTML -filen vil bli satt opp med de viktigste rammene som header og hoveddel. Skriv inn et navn på filen .
4
Lag en CSS-fil for nettstedet ved å klikke på " CSS-stiler " på øvre høyre hjørne av Dreamweaver . Høyreklikk det tomme området for å skape nye CSS-regler . Velg " Tag ( redefinerer et HTML-element ) " fra Selector Type. Velg "kropp " og deretter " New Style Sheet File". Klikk "OK " for å begynne å definere CSS -fil
5
Importer bakgrunnsbilde og andre konsept elementer i CSS -koden : background : url ( /images /background.jpg ) ; bunntekst: . URL ( /images /footer.jpg ); .