Come fare un layout Div in Photoshop

layout Div sono i disegni per le pagine Web che includono contenitori per i contenuti Web , come immagini , testo e link . Aiutano a mantenere un aspetto uniforme per le pagine web . Comandi "strumento Slice" di Adobe Photoshop e "Salva per Web e dispositivi " consentono agli utenti di creare un layout Div. visivamente con l'aggiunta di elementi della pagina e quindi la creazione di contenitori direttamente sul layout , piuttosto che utilizzare codice HTML e CSS o basandosi su pre -made layout div , che richiedono anche la conoscenza del codice da personalizzare. Cose che ti serviranno
Adobe Photoshop
Mostra più istruzioni
1

Aprire Photoshop e creare un nuovo documento Web selezionando "Archivio> Nuovo" dal menu dell'applicazione e l'impostazione del "Preset" discesa per "Web ". Impostare le dimensioni desiderate per il layout nel campo "Altezza" "Larghezza" e , oppure selezionare uno dei formati standard di layout web dal " formato " a discesa.
2

Aggiungi la tua visuale desiderata immagini sul layout. Questi possono includere immagini importate utilizzando il " > File Place" di comando , le forme , i pulsanti o il testo creato con il " Tipo di strumento . "
3

Seleziona lo strumento " Slice" da Strumenti pannello e affettare ogni elemento del layout facendo clic e trascinando su di esso con lo strumento " Slice " selezionato . Creare singole sezioni per ciascun elemento di testo , pulsante , immagine o linea . Queste fette servirà come gli elementi div nel layout web .
4

Fare clic sul menu "File" e selezionare "Salva per Web e dispositivi " per aprire la finestra di dialogo di ottimizzazione , che permetterà di impostare ogni elemento del layout in modo che possa meglio essere visualizzate sul web . Regolare le impostazioni per ogni porzione creata cliccando su ciascuna singolarmente utilizzando la " fetta strumento di selezione " in alto a sinistra della finestra di dialogo , e la modifica delle impostazioni del formato , la qualità e il colore di conseguenza a destra della casella . Fare clic su "Salva" quando hai ottimizzato ogni fetta le vostre preferenze.
5

Nome tuo file di layout e selezionare una posizione per esso nei campi indicati del " Salva ottimizzato come " finestra di dialogo. Cambia il "Formato" drop- down " HTML e immagini " e assicurarsi che le "Impostazioni" e le "fette" menu a discesa sono impostati su "Impostazioni predefinite " e " tutte le sezioni ", rispettivamente . Fare clic su " Salva". Il layout è ora pronto per essere aperto in una web - editor come Dreamweaver , dove è possibile aggiungere collegamenti e comportamenti alle sezioni Div creati con lo strumento " Slice ".