Hvordan lage en Div Layout i Photoshop

Div oppsett er design for web-sider som inneholder beholdere for webinnhold, for eksempel bilder, tekst og lenker. De hjelper opprettholde et ensartet utseende for nettsider. Adobe Photoshop er "Slice Tool" og "Lagre for Web og enheter" kommandoer tillate brukere å opprette en Div layout visuelt ved å legge til sideelementer og deretter opprette containere direkte på bordet, istedenfor å bruke HTML og CSS-kode eller stole på pre-laget div oppsett, som også krever kjennskap til koden for å tilpasse.

Bruksanvisning

1 Åpne Photoshop og skape en ny web-dokument ved å velge "File> New" fra programmenyen og sette "Preset" drop-down til "Web". Sett dine ønskede dimensjoner for layouten i "Bredde" og "Høyde" felt, eller velge en av standard Web layout størrelser fra "Size" drop-down.

2 Legg dine ønskede visuelle bilder til layout. Disse kan inkludere bilder som er importert ved hjelp av "File> Place" -kommandoen, former, knapper eller tekst som er opprettet med "Type Tool."

3 Velg "Slice Tool" fra Verktøy Panel og skjær hvert element i layouten ved å klikke og dra over det med "Slice Tool" valgt. Lag individuelle skiver til hver tekst element, knapp, bilde eller linje. Disse skiver vil tjene som div elementer i Web layout.

4 Klikk på "File" -menyen og velg "Lagre for Web og enheter" for å få opp optimalisering dialogboksen, som vil tillate deg å sette opp hvert element i utformingen slik at den best kan vises på nettet. Juster innstillingene for hver skive du har opprettet ved å klikke på hver individuelt ved hjelp av "Slice Select Tool" øverst til venstre i dialogboksen, og endre innstillingene format, kvalitet og fargetilsvarende på høyre side av sekstenmeteren. Klikk "Lagre" når du har optimalisert hver skive til dine preferanser.

5 Navn layout filen og velg en plassering for det i de angitte feltene i "Lagre optimalisert som" dialogboksen. Endre "Format" drop-down "HTML og bilder" og sørge for at de "Innstillinger" og "stykker" drop-downs er satt til "Standardinnstillinger" og "Alle Slices" hhv. Klikk på "Lagre". Din layout er nå klar til å åpnes i en Web-editor som Dreamweaver, der du kan legge til lenker og atferd til de Div deler du har laget med "Slice Tool."