Non è necessario essere un esperto di HTML o CSS per creare la propria pagina Web. Se hai progettato un layout in Adobe Photoshop, ma non so cosa passi da compiere per convertire il file PSD in HTML, è possibile esportare l'immagine in HTML all'interno di Photoshop stesso. Prima di esportare il layout, tuttavia, si dovrebbe in primo luogo utilizzare lo strumento sezione tagliare l'immagine in diverse sezioni al fine di rendere il layout più facile da modificare una volta che viene convertito in HTML. Dopo aver salvato il file come un documento Web in Photoshop, è possibile scambiare alcune del codice HTML con CSS per ripulire il codice.

Istruzioni

1

Avviare Adobe Photoshop, quindi fare clic su "Apri". Passare alla cartella in cui è memorizzato il file PSD. Fare doppio clic sul file per aprire il layout. Fare clic su "Slice Tool" o premere "c".

2

Selezionare un'area all'esterno dell'immagine. Trascinare il mouse sopra la sezione desiderata, quindi rilasciare il pulsante del mouse per creare una casella di contorno. L'immagine verrà suddiviso in due sezioni separate.

3

Ripetere il passaggio due per continuare affettare il layout in diverse sezioni, come necessario. Passa il mouse sopra il bordo di una casella di contorno per ridimensionare la casella, se necessario.

4

Una volta che hai finito di spaccare il layout in sezioni separate, fare clic su "File". Fare clic su "Salva per Web e dispositivi" per aprire una nuova finestra.

5

Fare clic su "Salva", quindi selezionare "HTML" e "immagini" dal menu a discesa "Formato". Nome del file, quindi di nuovo su "Salva" per rendere un tema HTML dal file PSD.

6

Aprire il documento HTML in un editor di testo come blocco note, vim o Notepad + +. Aggiungere il "< style >" e "< / stile >" tag tra il "< head >" e "< / head >" tag nella parte superiore della pagina.

7

Inserire il seguente tra il "< style >" e "< / stile > Tag:

corpo () {
}

tabella {
}

8

Aggiungere gli attributi seguenti all'elemento "body" nel CSS, in modo che il codice è simile al seguente:

corpo () {
colore di sfondo: #X;
margin: 0;
}

Sostituire "X" con il colore di sfondo desiderato della pagina; utilizzare Adobe Photoshop per trovare il codice esadecimale per il colore desiderato.

9

Aggiungere i seguenti attributi per l'elemento "table" nel CSS:

tabella {
Larghezza: W px;
Altezza: H px;
padding: 0;
border: 0px;
}

Sostituire "W" e "H" con i valori associati per "larghezza" e "altezza", come visualizzato nel tag "< table >". Utilizzare lo strumento "Trova"..--accessibile premendo "Ctrl" e "F" - per individuare gli attributi "larghezza" e "altezza", se necessario.

10

Rimuovi "bgcolor", "leftmargin,", "topmargin," "marginwidth" e "marginheight" dal tag "< body >". Rimuovi "id", "larghezza", "altezza", "confine", "cellspacing" e "cellpadding" dal tag "< table >".

11

Premere "Ctrl" e "S" per completare la creazione di un tema HTML/CSS da un file PSD.

Consigli & Avvertenze

• Per trovare il codice esadecimale per il colore desiderato in Adobe Photoshop, fate clic sul campione di colore nella barra degli strumenti, quindi evidenziare il campo accanto a "#".
• Anche se Adobe Photoshop offre un metodo rapido e facile per convertire i file PSD in HTML, si può trovare più semplice utilizzare un WYSIWYG..--come Adobe Dreamweaver, Microsoft Expression o Amaya - per fare un tema HTML/CSS.