Div layout er design til websider , der indeholder beholdere til webindhold , såsom billeder, tekst og links. De hjælpe med at opretholde et ensartet udseende for websider . Adobe Photoshop er " Slice Tool " og " Gem til web og enheder" kommandoer tillader brugere at oprette en Div layout visuelt ved at tilføje sideelementer og derefter oprette containere direkte på layout, snarere end at bruge HTML og CSS kode eller stole på pre-made div layouts , som også kræver kendskab til koden for at tilpasse . Ting du skal
Adobe Photoshop software
Vis Flere Instruktioner
1
Åbn Photoshop og oprette et nyt Web dokument ved at vælge " Filer> Ny" fra programmenuen og indstilling af "Preset " drop- down til "Web ". Indstil din ønskede dimensioner til dit layout i " Bredde" og " Højde " felter , eller vælg en af de standard web layout størrelser fra " Size" drop- down .
2
Tilføj din ønskede visuelle billeder til dit layout . Disse kan omfatte billeder, der importeres ved hjælp af " Filer> Placer " kommando, figurer , knapper eller tekst oprettet med "Type Tool ".
3
Vælg " Slice Tool " fra Tools Panel og skær hvert element i dit layout ved at klikke og trække over det med det valgte " Slice Tool " . Skabe individuelle skiver til hver enkelt tekst element , knap, billede eller linje. Disse skiver vil tjene som DIV elementer i din web layout.
4
Klik på " Filer" og vælg "Gem til web og enheder " for at opdrage den optimering dialogboksen, som vil gøre det muligt dig at oprette hvert element i dit layout , så det bedst kan vises på internettet . Juster indstillingerne for hver skive , du har oprettet , ved at klikke på hver enkelt ved hjælp af " Slice Select Tool " ved øverst til venstre i dialogboksen, og ændre formatet , kvalitets-og farveindstillinger tilsvarende i højre side af kassen. Klik på "Gem ", når du har optimeret hver skive til dine præferencer .
5.
Name dit layout fil, og vælg en placering til den i de angivne felter i " Gem optimeret som " dialogboks. Skift "Format " drop- down " HTML og billeder" og sørg for, "Indstillinger " og " Slices " drop- downs er indstillet til "Standardindstillinger" og "Alle Slices " hhv . Klik på " Gem". Dit layout er nu klar til at blive åbnet i en Web - editor såsom Dreamweaver, hvor du kan tilføje links og adfærd for at div sektioner, du oprettede med " Slice Tool ".
< br >
