Div layouter er design for websider som inneholder beholdere for webinnhold , for eksempel bilder , tekst og linker . De bidrar til å opprettholde et ensartet utseende for nettsider. Adobe Photoshop er " Slice Tool " og " Save for Web og enheter " kommandoer tillate brukere å opprette en Div. layout visuelt ved å legge sideelementer og deretter opprette containere direkte på bordet , istedenfor å bruke HTML og CSS-kode eller stole på pre -laget div oppsett, som også krever kunnskap om kode for å tilpasse . Du trenger
Adobe Photoshop programvare
Vis flere instruksjoner
en

Åpne Photoshop og lage en ny web-dokument ved å velge " File > New " fra applikasjonsmenyen og sette "Preset " drop -down til " Web ". Still dine ønskede dimensjoner for layouten i " Bredde" og "Høyde " feltene , eller velg en av de standard Web layout størrelser fra " Size " drop -down .
2

Legg til ønsket visuell bilder til oppsettet ditt . Disse kan inkludere bilder importert ved hjelp av " File > Place "-kommandoen , figurer , 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 den med " Slice Tool" valgt. Lage individuelle skiver for hver tekst element , knapp , bilde eller linje. Disse skivene 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 du sette opp hvert element i oppsettet slik at det best kan vises på nettet . Juster innstillingene for hver skive du opprettet ved å klikke på hver individuelt ved hjelp av " Slice Select Tool" øverst til venstre i dialogboksen , og endre format, kvalitet og farge innstillingene deretter til høyre i boksen. Klikk på " Lagre " når du har optimalisert hver skive til dine preferanser .
5

Navn layout fil 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 " Slices " drop- downs er satt til "Default Settings " og " All Slices " hhv . Klikk på " Lagre". Layouten er nå klar til å bli åpnet i et Web - editor som Dreamweaver , der du kan legge til lenker og atferd til de Div deler du har laget med " Slice Tool. "