Home Hardware Networking Programmazione Software Domanda Sistemi
Conoscenza Informatica >> software >> Photoshop >> .

Come convertire un prototipo di Photoshop per Web HTML

Photoshop è un buon strumento per la progettazione di elementi di immagine del tuo sito web , compresi pulsanti rollover , menu a discesa e la grafica con collegamenti ad altre pagine web. Tuttavia, Photoshop sé non è uno strumento di creazione pagina web . Per fortuna, è relativamente facile per esportare il prototipo in un formato grafico web-friendly , e di costruire una pagina web HTML che utilizza questi elementi . Tieni presente che le componenti interattive come collegamenti ipertestuali, pulsanti rollover e menu a discesa richiedono un lavoro supplementare . Andando oltre le nozioni di base è fortemente dipendente dalla vostra applicazione , e può richiedere la conoscenza di programmazione specializzato . Cose che ti serviranno
Photoshop
HTML Editor
Browser Web
Show More Istruzioni
di base Pagina web
1

Aprire il prototipo in Photoshop e esportare in un formato di immagine web supportato . Scegliere " Salva per Web e dispositivi " dal menu File . Nella finestra di dialogo selezionare JPEG, GIF o PNG . Selezionare una qualità di immagine , tenendo presente che gli aumenti più alta qualità dimensione del file.
2

" Salva " il file su disco, dandogli un nome , ad esempio " myPrototype.jpg . "

3

Aprite il vostro editor HTML e di creare una nuova pagina web. La maggior parte dei redattori HTML creerà una pagina web scheletro per voi .
4

Aggiungi un elemento immagine direttamente sotto il tag . L'elemento di immagine avrà la forma : . .
5

Salva la tua pagina web e caricare in qualsiasi browser

al di là di base
6

Migliorare il layout utilizzando tabelle o Cascading Style Sheets (CSS ) per posizionare il vostro layout. Il metodo preferito è quello di prendere i singoli strati , o fette , creati in Photoshop e posizionarle utilizzando i CSS . Fatto correttamente , questo crea un layout "liquido" che riposiziona il layout del browser viene ridimensionata.
7

migliorare la velocità utilizzando ripetuti elementi di sfondo . In Photoshop , creare un 5 pixel a livello fetta del tuo background e salvarlo in un file . In HTML , è possibile ripetere l'elemento utilizzando l'attributo della vostra ,

o di stile CSS sfondo . Sintassi per ogni caso varia , in modo da controllare la tua guida HTML . Assicurarsi di impostare l'attributo background per " ripetere ".
8

Utilizzare mappe immagine per creare semplici collegamenti da un'immagine a un'altra pagina web. Secondo sviluppatore web Gregorio Hodges , creare un elemento all'interno di un tag

, quindi definire il per la vostra immagine . L'area conterrà le coordinate della vostra immagine di collegare e fare riferimento il file di immagine da caricare .
9

utilizzare JavaScript per creare azioni di rollover e menu di navigazione , quali elenchi a discesa . Anche se questo può essere un compito più impegnativo , editor web professionali come Dreamweaver e GoLive sostenere la creazione di azioni di ribaltamento e della navigazione , in modo da non dover scrivere il codice JavaScript a mano .
10

Aggiungi elementi interattivi multimediali come animazioni Flash , applet Java e file Shockwave per migliorare l'esperienza dell'utente. Utilizzare l'elemento Il posizionamento di questi nella vostra pagina web. Anche in questo caso , uno strumento web professionale renderà il lavoro molto più facile .

 

software © www.354353.com