Come convertire un mockup in HTML

September 29

Come convertire un mockup in HTML


Web designer sono utilizzati per progettare i loro modelli di siti web su Photoshop. Quando è necessario convertire il mockup di un sito dal vivo, alcune abilità HMTL e CSS saranno utili. Se avete bisogno di esportare il mockup nel vostro software di sviluppo o di una piattaforma come Dreamweaver Joomla, è possibile effettuare la conversione in pochi passaggi.

istruzione

1 Fare doppio clic sul Photoshop mockup. Fai clic su "File" e "Salva per Web e dispositivi" per esportarlo in un formato web amichevole. Selezionare un formato di file, come JPEG o PNG. Impostare una qualità d'immagine nella finestra di dialogo imminente. Fai clic su "Salva". Inserire un nome per l'immagine.

2 Crop e separare il concetto di fondo, ombra e effetto frontiera trasparente, piè di pagina e sidebar concetti. salvarli in una directory locale. La maggior parte di essi sono la layout rilevante.

3 Vai a Dreamweaver. Fai clic su "File" e "Nuovo file di HTML." Un nuovo file HTML sarà allestito con le cornici principali come intestazione e la sezione del corpo. Inserire un nome per il file.

4 Creare un file CSS per il sito cliccando "stili CSS" nell'angolo in alto a destra di Dreamweaver. Pulsante destro del mouse l'area vuota per creare nuove regole CSS. Scegliere "Tag (ridefinisce un elemento HTML)" dal tipo di selezione. Scegliere "corpo" e poi "Nuovo file foglio di stile." Fai clic su "OK" per iniziare a definire file CSS.

5 Importa la tua immagine di sfondo e altri elementi concettuali nel codice CSS: Priorità: URL (/images/background.jpg); piè di pagina: URL (/images/footer.jpg) ;.