December 6
Photoshop è un buon strumento per la progettazione di elementi di immagine del tuo sito web, tra cui pulsanti rollover, menu e grafica che si collegano ad altre pagine web a discesa. Tuttavia, Photoshop in sé non è uno strumento di creazione pagina web. Per fortuna, è relativamente facile per esportare il prototipo in un formato grafico web-friendly, e costruire una pagina web HTML che utilizza questi elementi. Tenete a mente che i componenti interattivi come i collegamenti ipertestuali, pulsanti rollover e menu a discesa richiedono lavoro aggiuntivo. Andando oltre le nozioni di base dipende in larga misura la vostra applicazione, e può richiedere conoscenze di programmazione specializzato.
1 Aprire il prototipo in Photoshop e l'esportazione in un formato immagine web supportato. Scegliere "Salva per Web e dispositivi" dal menu File. Nella finestra di dialogo selezionare JPEG, GIF o PNG. Selezionare una qualità d'immagine, tenendo presente che gli aumenti di qualità più elevata dimensione del file.
2 "Salva" il file su disco, dandogli un nome, ad esempio "myPrototype.jpg."
3 Aprite il vostro editor HTML e creare una nuova pagina web. La maggior parte degli editor HTML creerà una pagina web scheletro per voi.
4 Aggiungere un elemento di immagine direttamente sotto il tag di apertura <body>. L'elemento di immagine avrà la forma: <img src = "myPrototype.jpg" />.
5 Salvare la pagina web e caricare in qualsiasi browser.
6 Migliorare il layout utilizzando uno tabelle o Cascading Style Sheets (CSS) per posizionare il layout. Il metodo preferito è quello di prendere i singoli strati, o fette, creati in Photoshop e posizionarli usando i CSS. Fatto correttamente, questo crea un layout "liquida" che riposiziona il layout del browser viene ridimensionata.
7 Migliorare la velocità utilizzando elementi di sfondo che si ripetono. In Photoshop, creare un livello 5-pixel fetta del vostro background e salvarlo in un file. In HTML, è possibile ripetere l'elemento utilizzando l'attributo del <body>, <table> o di stile CSS sfondo. Sintassi per ogni caso varia, in modo da controllare la tua guida HTML. Assicurarsi di impostare lo sfondo attribuire a "ripetizione".
8 Utilizzare mappe immagine per creare semplici collegamenti da un'immagine a un'altra pagina web. Secondo web developer Gregory Hodges, creare un <map> elemento all'interno di un tag <div>, quindi definire il <area> per la vostra immagine. L'area conterrà le coordinate della vostra immagine per collegare e fare riferimento al file immagine da caricare.
9 Utilizzare JavaScript per creare azioni di rollover e menu di navigazione, come elenchi a discesa. Anche se questo può essere un compito più impegnativo, editori web professionali come Dreamweaver e GoLive sostenere la creazione di azioni di ribaltamento e di navigazione, in modo da non dover scrivere il codice JavaScript a mano.
10 Aggiungere elementi multimediali interattivi come animazioni Flash, applet Java e file Shockwave per migliorare l'esperienza dell'utente. Utilizzare il <object> elemento di inserire e posizionare questi nella vostra pagina web. Anche in questo caso, uno strumento web professionale renderà il lavoro molto più facile.