Hvordan konvertere en mockup til HTML

Webdesignere brukes til å designe sine prototyper på nettsteder på Photoshop. Når du trenger å konvertere mockup til en levende nettsted, vil noen hmtl og CSS ferdigheter være nyttig. Hvis du trenger å eksportere mockup i utviklingsprogramvaren eller plattform som Dreamweaver Joomla, kan du gjøre konverteringen i noen få trinn.

Bruksanvisning

1 Dobbeltklikk på Photoshop mockup. Klikk "Fil" og "Lagre for Web og enheter" for å eksportere den til en Web-vennlig format. Velg et filformat som JPEG eller PNG. Angi en bildekvalitet i den kommende dialogen. Klikk på "Lagre". Skriv inn et navn for bildet.

2 Beskjær og skille bakgrunn konsept, skygge og gjennomsiktig kant effekt, bunntekst og sidestolpen konsepter. Lagre dem til en lokal katalog. De fleste av dem er layout relevante.

3 Gå til Dreamweaver. Klikk "Fil" og "New HTML-fil." En ny HTML-fil vil bli satt opp med de viktigste rammer slike som header og kropp delen. 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 (omdefinerer et HTML-element)" fra Selector Type. Velg "kroppen" og deretter "New Style Sheet File". Klikk "OK" for å begynne å definere CSS-fil.

5 Importer bakgrunnsbilde og andre konsept elementer inn i CSS-koden: background: URL (/images/background.jpg); bunntekst: URL (/images/footer.jpg) ;.