Div layouter är design för webbsidor som innehåller behållare för webbinnehåll , t.ex. bilder , text och länkar . De bidrar till att upprätthålla ett enhetligt utseende för webbsidor . Adobe Photoshop är " Slice Tool " och " Spara för webben och enheter " kommandona tillåter användare att skapa en Div layout visuellt genom att lägga till sidelement och sedan skapa behållare direkt på layouten , istället för att använda HTML och CSS -kod eller förlita sig på färdiga div layouter , vilket också kräver kunskaper i koden för att skräddarsy . Saker du behöver
Adobe Photoshop programvara
Visa fler instruktioner
1
Öppna Photoshop och skapa en ny webb dokument genom att välja " Arkiv > Nytt " från programmenyn och ställa in " Preset " rullgardinsmenyn till " webben ". Ange önskade dimensioner för din layout i " Bredd " och "Höjd " fält , eller välja en av de standardstorlekar webblayoutverktyg från " Size " drop -down .
2
Lägg ditt önskade visuella bilder till din layout . Dessa kan innehålla bilder som importerats med " File > Place " -kommandot , formar , knappar eller text som skapats med " Type Tool . " Addera 3
Välj " Slice Tool " från Tools panel och skiva varje element i din layout genom att klicka och dra över det med " Slice Tool " valts . Skapa individuella segment för varje text-element , knapp , bild eller linje . Dessa skivor kommer att fungera som de Div element i din webbsida layout .
4
Klicka på " Arkiv " -menyn och välj " Spara för webben och enheter " för att få upp rutan optimering dialogrutan , vilket gör att du ställa in varje element i din layout så att den bäst kan visas på webben . Justera inställningarna för varje skiva du skapat genom att klicka på varje individuellt med hjälp av " Slice Select Tool " längst uppe till vänster i dialogrutan och ändra formatet , kvaliteten och färginställningarna därefter till höger i rutan . Klicka på " Spara " när du har optimerat varje skiva till dina preferenser .
5
Namn din layout filen och välj en plats för det i de angivna fälten i " Optimerad Spara som" i dialogrutan . Ändra " Format " rullgardinsmenyn " HTML och bilder " och se till "Inställningar" och "skivor " drop- downs är inställda på "Standardinställningar" och " alla sektorer " respektive . Klicka på " Spara ". Din layout är nu redo att öppnas i ett webb - editor som Dreamweaver , där du kan lägga till länkar och beteenden till Div avsnitt du skapat med " Slice Tool . " Addera ditt
