July 31
PSD o Photoshop documento è un formato di file specifico per immagini e grafica creati all'interno dell'applicazione Adobe Photoshop. Photoshop è spesso usato dai web designer per creare mock up di disegni del sito. Una volta che un disegno è completato, il modello PSD viene applicato al sito utilizzando HTML e CSS. CSS o Cascading Style Sheets, contengono codice dettare lo stile generale di un sito web. Spesso è compito dello sviluppatore Web per convertire il modello di PSD a CSS e HTML per visualizzare con successo il design del sito sul Web.
1 Aprire il file PSD di Photoshop.
2 Fare clic sull'icona "occhio" di ogni livello nella finestra Livelli eccezione dello sfondo per rendere visibile solo lo sfondo. Scegliere "Salva per Web e dispositivi," e salvarlo come file JPG.
3 Aprire un nuovo file nel blocco note e inserire il seguente codice CSS per lo sfondo:
body {
fondo: URL ( 'mybackground.jpg');
}
Sostituire "mybackground.jpg" con il nome della tua immagine di sfondo.
4 Selezionare "Analisi" e "strumento righello" dal menu principale del Photoshop, e usare questo per annotare le dimensioni delle varie parti della pagina Web, come ad esempio l'intestazione, piè di pagina, il contenuto principale e le barre laterali. Si noti inoltre per allineamento e colori di ogni elemento.
5 Definire le diverse parti del layout Web in CSS utilizzando le informazioni raccolte nel passaggio quattro. Ad esempio, il CSS per un colore grigio barra laterale sinistra, 300 pixel di larghezza è definito come:
sidebar {
float: left;
width: 900px;
altezza: 300px;
background-color: #ccc;
}
Completa questo per tutte le altre parti, come l'intestazione, il contenuto e piè di pagina.
6 Determinare gli stili dei font utilizzati nel modello PSD. Fare doppio clic sul livello di testo nella casella di livello. La barra degli strumenti testo visualizzato mostra il tipo di font utilizzato e la dimensione del carattere.
7 Aggiungere gli stili dei font nel CSS. Per esempio, se Arial grassetto con una dimensione del font di 20px viene utilizzato per le intestazioni, digitare il seguente CSS:
h1 {
font-family: Arial;
font-size: 20px;
colore nero;
font-weight: bold;
}
8 Salvare il file CSS.
9 Aprire un nuovo file nel blocco note e creare il file HTML. Aggiungere il file CSS utilizzando il seguente codice:
<Head>
<Link href = "style.css" rel = "stylesheet" type = "text / css">
</ Head>
Sostituire "style.css" con il nome del file CSS.
10 Digitare tutti i contenuti per il corpo utilizzando le diverse classi e selettori definiti nel file CSS. Per esempio:
<Body>
<Div id = "header"> <h1> Il mio sito web </ h1> </ div>
<Div id = "container">
<Div id = "WEEE"> Inserisci il contenuto qui </ div>
<Div id = "sidebar"> contenuto Sidebar </ div>
<Div>
<Fatto id = "footer"> contenuti piè di pagina </ div>
</ Body>
11 Salvare il file HTML nella stessa cartella in cui si trova il file CSS.
12 Vedi il tuo sito in un browser e confrontarlo con il modello PSD. Apportare le modifiche necessarie per rendere i due identiche.