February 25
Quando uno sviluppatore web è in procinto di creare una pagina web di solito si otterrà un documento Adobe Photoshop, o PSD, dal web designer. Questo PSD può includere le istanze progettuali più chiamati Composizioni livelli. Composizioni di livelli (un nuovo strumento di gestione livello in Photoshop) mostrano lo sviluppatore web quali cambiamenti al disegno originale di concentrarsi su. Lo sviluppatore valuta quindi ogni pagina e traduce il disegno nel formato corretto sito web e il codice. Questa guida vi aiuterà a creare una strategia per convertire correttamente PSD in pagine HTML.
Clicca attraverso ogni composizione di livelli in Photoshop per vedere i vari stati del disegno. Ogni composizione di livelli avrà varie differenze che sono importanti per la progettazione e il codice. Ad esempio, uno strato comp può avere stati di rollover; un altro può avere differenze di immagine di sfondo. Se composizioni di livelli non sono disponibili, quindi rivedere PSD come è.
Separare la progettazione in tre aree: Intestazione, Contento, piè di pagina. Questo viene fatto in Photoshop tramite guide. Creare una Guida trascinando le linee della griglia con il mouse dal bordo del documento di Photoshop al bordo delle aree che si desidera separare. Ad esempio, si desidera creare una guida che separa colpo di testa da contenuti. Di solito c'è una netta differenza da dove l'intestazione finisce e dove inizia contenuti; se non, usate il vostro intuito.
Nel testo del codice Basic Editor tag HTML: html, testa e corpo. All'interno del tag body creare un contenitore per la pagina (ad esempio, <div id = "container"> </ div>). All'interno di questo contenitore inserire un div per l'intestazione, contenuti e aree piè di pagina create guide per. In Photoshop, utilizzando il Marquee rettangolare strumento disegnare una scatola lungo i bordi delle guide create, poi sotto "Immagine" (che si trova nella parte superiore del programma) selezionare "Crop". Vai a "Immagine", quindi "Dimensione immagine" e vedrete altezza e larghezza esatte dimensioni dell'area ritagliata. Avrete bisogno di questo per definire il CSS. Per le immagini di sfondo, in Photoshop vai alla tua palette Livelli, clicca gli occhi per mostrare e nascondere certi strati fino ad ottenere solo lo sfondo è necessario.
Creare guide per padding e margini tra aree della pagina (ad esempio, l'intestazione al contenuto, contenuti a piè di pagina, piè di pagina in fondo alla pagina). Salvare la grafica di tutti gli elementi di testo in caratteri insoliti che non possono essere resi come testo di sistema. Ad esempio, il testo fatto in un tipo di carattere Papiro ha bisogno di essere affettato e salvato come immagine, perché il web non renderà come testo di sistema. Passare da composizioni di livelli per assicurarsi che le guide non si sovrappongano.
Definire universale CSS per i tag coerenti quali paragrafi, ancoraggi, tabelle, tag di intestazione, e voci di elenco. Iniziare collegando contenuti a partire con l'intestazione e piè di pagina poi riempire le aree di contenuto. L'intestazione e piè di pagina di solito sono coerenti in ogni pagina del tuo sito web. Suddividere l'area del contenuto in copia, i moduli, e la navigazione. Ottenere colori, font e l'interlinea dal PSD e inserire nel vostro file CSS.
Salvare i file CSS come CSS ei file HTML come html. Aprire file HTML attraverso molteplici browser web andando su File poi Apri posizione. Rivedere il file HTML contro il disegno di Photoshop e verificare la presenza di differenze. Nota differenze su un foglio di carta, poi correggere il codice HTML o CSS per abbinare il design PSD. Continuare questo processo fino a quando ciò che si vede nel browser web corrisponde quella del disegno PSD.