layout div sono i disegni per le pagine Web che includono contenitori per contenuti Web, come ad esempio immagini, testo e link. Essi contribuiscono a mantenere un aspetto uniforme per le pagine web. "Strumento Slice" di Adobe Photoshop e "Salva per Web e dispositivi" comandi 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 affidamento su div pre-made layout, che richiedono anche la conoscenza del codice per personalizzare.

istruzione

1 Aprire Photoshop e creare un nuovo documento Web selezionando "File> Nuovo" dal menu delle applicazioni e l'impostazione del "Preset" a discesa per "Web". Impostare le dimensioni desiderate per il layout nel "Larghezza" e campi di "altezza", oppure selezionare una delle dimensioni di layout Web standard dalla "Dimensione" menu a discesa.

2 Aggiungere le immagini visive desiderate al layout. Questi possono includere immagini importate utilizzando il comando "File> Inserisci", le forme, i pulsanti o testo creati con il "Tipo di strumento."

3 Selezionare l'opzione "Strumento Slice" dal pannello Strumenti e tagliare ogni elemento del layout facendo clic e trascinando su di esso con lo strumento "Slice" selezionato. Creare fette individuali per ogni elemento di testo, pulsante, immagine o linea. Queste fette serviranno 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 vi permetterà di impostare ogni elemento del layout in modo che possa meglio essere visualizzato sul web. Regolare le impostazioni per ogni porzione creata cliccando su utilizzando singolarmente la "fetta strumento di selezione" in alto a sinistra della finestra di dialogo, e la modifica delle impostazioni del formato, qualità e colore di conseguenza alla destra della casella. Fai clic su "Salva" dopo aver ottimizzato ogni fetta alle proprie preferenze.

5 Un nome al file di layout e selezionare una posizione per esso i campi indicati del "Salva ottimizzato come" finestra di dialogo. Modificare il "Format" discesa "HTML e immagini" e assicurarsi che le "Impostazioni" e "fette" drop-down sono impostati su "Impostazioni predefinite" e "Tutte le fette", rispettivamente. Fai clic su "Salva". Il layout è ora pronto per essere aperto in un Web-editor come Dreamweaver, in cui è possibile aggiungere link e comportamenti alle sezioni Div creati con lo strumento "Slice".