Maak een Illustrator-document dat is 960 pixels breed met een hoogte van uw keuze afhankelijk van de inhoud en het ontwerp dat u in gedachten hebt. Een site 960 px breed voldoet aan de meest populaire beeldscherm resolutie breedte van 1024 px zodra de schuifbalk en de randen van een venster in aanmerking worden genomen . Kopen van 2

Maak een handgetekende schets van de fundamentele visuele lay-out van uw website als u dit nog niet hebt gedaan . Dit zal u voorzien van een handig hulpmiddel voor het maken van binnen Illustrator .
3

Maak uw lay-out met behulp van de afbeelding en de tekst hulpmiddelen voor een gestileerde kop . Als uw ontwerp omvat ruimte voor tekst , zoals blog posts , verlaat de ruimte in dat gebied leeg of maak een rand voor eenvoudige afbakening .
4

gidsen toe om uw ontwerp tot de verschillende onderdelen van bakenen de lay-out . Dit is erg belangrijk omdat je gebruik maken van deze gidsen te plakken , waarbij de grenzen van de elementen te definiëren op uw website te maken . Gidsen kunnen u helpen line-up objecten met precisie. Klik op de verticale of horizontale liniaal en sleep de muis naar de plaats waar u de gids te worden gevestigd willen .
5

dubbel - check de plaatsing van uw gidsen voor precisie en nauwkeurigheid . Trekken meer indien nodig, op elk element , zoals navigatie beelden die zullen worden links op uw site te scheiden .
Generating Code
6

Selecteer " Object " uit het menu , selecteer vervolgens " Slice " en kies "Create uit Guides . " Wanneer de schijfjes worden gemaakt zul je kleine zwarte doosjes zien binnen elk sneetje met een overeenkomstig aantal . Selecteer " File " uit het menu en kies " Opslaan voor web en apparaten . " Selecteer de slice select tool, die is de tweede icoon in het menu gereedschap aan de rechterkant van het scherm onder het pictogram van de hand . Selecteer alle segmenten .
7

Selecteer de optimalisatie-instellingen van de opties aan de rechterkant van het scherm . U kunt vooraf ingestelde instellingen te kiezen of maak een aangepast profiel afhankelijk van of u wilt dat uw foto's zijn JPEG, GIF -of PNG-bestanden . U kunt ook de kwaliteit van de beelden aan te passen .

Voorbeeld verschillende instellingen 8 door op de " 2 - up " en " 4 - up " tabs . In de linker benedenhoek van elk voorbeeld kunt u de optimalisatie informatie zoals bestandsgrootte en browser rendering moment bekijken . Klik op de knop "Opslaan" . Bepaal waar u wilt dat uw foto's en code op te slaan en ga naar dat gebied met behulp van de " Waar : " button
9

Kies de indeling voor uw werk . . Als je bedreven bent in HTML en willen alleen de beelden omdat je later toevoegt code voor hen , kies dan " alleen afbeeldingen . " Als je nu een beginner of liever de HTML gegenereerd voor u , kiest u de optie ' HTML en afbeeldingen " . Als u liever voor de positionering van de elementen die moeten worden georganiseerd met Cascading Style Sheets in plaats van tabellen , selecteert u de "Default Settings " en kies "Exporteren als CSS -lagen " in het tabblad " Lagen " .
10

Open het HTML-bestand vanuit een browser op uw werk te bekijken . Bewerk de bestanden met een webdesign programma .