April 24
Non è necessario essere un esperto in HTML o CSS per creare la propria pagina Web. Se hai progettato un layout in Adobe Photoshop, ma non si sa cosa passi da compiere per convertire il file PSD in HTML, è possibile esportare l'immagine in formato HTML dall'interno di Photoshop sé. Prima di esportare il layout, tuttavia, è necessario prima utilizzare lo strumento sezione per tagliare l'immagine in diverse sezioni in modo da rendere il layout più facile da modificare una volta che è convertito in formato HTML. Dopo aver salvato il file come un documento Web in Photoshop, è possibile scambiare alcuni dei HTML con CSS per ripulire il codice.
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. Fai clic su "Strumento Slice" 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à divisa in due sezioni separate.
3 Ripetere il passaggio da due a continuare affettare il layout in diverse sezioni a seconda delle necessità. Passare il mouse sul bordo di una scatola di confine per ridimensionare il dialogo, se necessario.
4 Fare clic su "File", una volta che hai finito di spaccare il layout in sezioni separate. Fai clic su "Salva per Web e dispositivi" per aprire una nuova finestra.
5 Fai clic su "Salva", quindi selezionare "HTML e immagini" dal menu a discesa "Formato". Un nome al file, quindi fare clic 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 "</ style>" tag tra i "<head>" e "</ head>" tag nella parte superiore della pagina.
7 Inserire il seguente tra i "<style>" tag e "</ style>:
body {
}
tavolo {
}
8 Aggiungere i seguenti attributi per l'elemento "corpo" nel CSS, in modo che il codice è simile al seguente:
body {
background-color: # X;
margin: 0;
}
Sostituire "X" con il colore di sfondo desiderato per la pagina; utilizzare Adobe Photoshop per trovare il codice esadecimale del colore desiderato.
9 Aggiungere i seguenti attributi per l'elemento "tavolo" nel CSS:
tavolo {
Larghezza: W px;
altezza: H px;
padding: 0;
border: 0px;
}
Sostituire "W" e "H" con i valori associati per "larghezza" e "altezza", come visualizzato nella "<table>" tag. Utilizzare lo strumento "Trova" - si accede premendo il tasto "Ctrl" e "F" - per individuare la "larghezza" e "altezza" attributi, 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 il tasto "Ctrl" e "S" per completare la creazione di un tema HTML / CSS da un file PSD.