Un modello Web è una pagina Web layout di base --- o --- contenitore si può riutilizzare per creare più pagine . Il modello fornisce la struttura di base per il vostro sito web , consentendo di mantenere un tema costante e il layout in tutto il sito senza dover ricreare ogni pagina . Mentre Photoshop non è tecnicamente un programma di progettazione pagina Web , è possibile utilizzarlo per creare modelli Web da " affettare " l'immagine PSD in varie sezioni e poi esportare il PSD a una pagina Web HTML . È quindi possibile aprire il file di template HTML in Dreamweaver o qualche altro programma di progettazione Web e utilizzarlo per creare le pagine per il tuo sito web . Cose che ti serviranno
Adobe Photoshop CS3 o versione successiva
Show More Istruzioni
1
Inizia un nuovo documento in Photoshop . Dategli le dimensioni che si desidera utilizzare per le pagine Web , come questo: Fare clic su "File" sulla barra dei menu e scegliere " Nuovo" per aprire la finestra di dialogo Nuovo . Digitare la larghezza ( in pixel) nel campo " Larghezza" e l'altezza ( in pixel ) nel campo "Altezza" . Fare clic su " OK ".
2
Creare il banner per la vostra pagina web. Il banner , naturalmente , è l'immagine grafica che visualizza nella parte superiore della pagina . E ' di solito costituita da un logo aziendale e di alcune altre immagini relative a un prodotto o servizio . È possibile inserire un'immagine esistente o usare la vernice di Photoshop e strumenti di testo per creare il banner .
3
Creare i pulsanti per la vostra pagina web. Questi diventeranno collegamenti , o " punti caldi ", che prendono gli utenti del sito a pagine differenti all'interno del sito . O inserire le immagini dei pulsanti esistenti e metterli dove vuoi nel template o usare la vernice di Photoshop e strumenti di testo per creare i pulsanti .
4
Selezionate lo strumento " Slice" ( quinto pulsante da cima a Casella degli strumenti ) . Se non è stato utilizzato lo strumento Sezione prima, questo pulsante è probabilmente impostato su un altro strumento . Fare clic e tenere premuto il pulsante, quindi scegliere " Slice Tool " dal fly- out .
5
Trascinate lo strumento Slice intorno al primo pulsante o area nel modello in cui si desidera creare un collegamento . Questo crea una casella " Slice" intorno all'oggetto . Photoshop pone questo dialogo in una cella di una tabella che diventerà una tabella HTML separato quando si esporta il documento in HTML .
6
Fai clic destro sulla nuova slice e scegliere " Modifica Opzioni sezione " dal fly - menù fuori. Si apre la finestra di dialogo Opzioni sezione .
7
Inserire l'URL che si desidera su questo pulsante per creare un collegamento a nel campo " URL" . È anche possibile inserire altre informazioni per il pulsante , ad esempio la pagina del browser di destinazione e tag alternativi . Se si desidera modificare le dimensioni e la posizione della sezione , farlo con le opzioni nella sezione " Dimensioni" della finestra di dialogo . Fare clic su " OK ".
8
Ripetere i passaggi precedenti per la creazione e la modifica di fette le opzioni di sezione per ciascun pulsante nel modello .
9
Fare clic su " File" nel menu bar e scegliere "Salva per Web e dispositivi. " Si apre la finestra di dialogo Salva per Web e dispositivi . Da qui è possibile modificare diversi aspetti del modello, ad esempio il colore di sfondo, la compressione delle immagini e di qualità , dimensioni del documento e così via . Queste opzioni sono ben etichettati e parlano da soli . ( Potete vedere in anteprima il codice HTML per questo modello facendo clic sul pulsante "Anteprima " . ) Economici 10
Fare clic sul pulsante "Salva" . Assegnare un nome e salvare il file HTML . È stato creato il modello web . Ora è possibile aprirlo in un editor di pagine Web e di aggiungere i tuoi contenuti .