Hvordan lage et nettsted Illustrator

De mest grunnleggende nettsteder vil ha en tittellinje, navigasjonsfelt med faner til forskjellige nettsider og en seksjon for innhold. Lage en nettside med Adobe Illustrator er en av de enklere programmer å bruke. Det er mange designprogrammer du kan velge mellom, og det grunnleggende er lett å forstå. Du vil bruke enkle vektorgrafikk for å lage en nettside i Illustrator. Vektorgrafikk er design som bruker punkter, linjer, kurver og former for å lage bilder i motsetning til rastergrafikk som bruker piksler, for eksempel i Adobe Photoshop.

Bruksanvisning

Opprette en Root mappe og sette opp Dreamweaver

1 Lag en mappe på skrivebordet. For å gjøre dette, høyreklikk på skrivebordet og velg "New Folder" i rullegardinmenyen. Dette blir din rotmappen. Mappen navnet noe du liker.

2 Åpne Dreamweaver, klikk på "Site" på toppen og velg "Nytt nettsted." Nettstedet definisjon menyen vil åpne, og vil ta deg gjennom trinnene du trenger for å sette opp et nettsted i Dreamweaver.

3 Navn nettstedet ditt i det angitte feltet. Du trenger ikke å bekymre deg om å fylle ut feltet for en nettadresse. Etter du navnet ditt nettsted klikk "Next".

4 Sett denne siden innstillingen til "Nei, jeg ønsker ikke å bruke en server teknologi." Klikk "Next" for å gå til neste gruppe med innstillinger.

5 Velg "Rediger lokale kopier på min maskin, så laste opp til server (Internett) når du er klar." Deretter klikker du på mappeikonet og deretter i menyen som åpnes finne rotmappen, velg den og klikk "Velg". Når du har gjort det klikk "Next" for å gå videre til neste trinn.

6 Velg "None" for hvordan du vil koble til den eksterne serveren. Klikk på Neste når du har justert denne innstillingen. Klikk "Done" etter å ha gjennom innstillingene.

Designing Web Page i Illustrator

7 Åpne Adobe Illustrator og klikk "Opprett ny Web dokument." Det er ikke nødvendig å justere noen av innstillingene, så klikker du på "OK" for å fortsette.

8 Design en enkel "hjem" siden for nettstedet ditt ved hjelp av verktøylinjen. Lag bare en tittellinje, en navigeringslinje og et område for innholdet. Du kan gjøre dette ved hjelp av rektangel verktøyet og den type verktøy. I navigasjonsfeltet, opprette under kategori-kategoriene for å navigere til forskjellige sider. For eksempel, hvis du har et nettsted for en restaurant, kan du sette opp sub kategori-kategoriene for hjem, hovedretter og desserter.

9 Velg "Slice" verktøy fra verktøylinjen når du har det grunnleggende for ditt nettsted designet. Opprett din første skive ved å tegne ut en boks rundt tittelområdet. Gjenta dette med navigasjons bar område og innholdsområdet.

10 Bytt til "Slice Select" -verktøyet. Det dukker opp hvis du holder museknappen nede på skive verktøyet. Dobbeltklikk på tittelen skive. Når "Slice Options" menyen åpnes, navngi skive og deretter trykke "OK". Gjenta dette trinnet med navigasjonslinjen skive og innholdsområdet skive.

11 Gå til filmenyen og velg "Lagre for Web og enheter." Du kan velge om du vil lagre bilder som GIF eller JPEG. Klikk på "Lagre".

12 Velg "Other ..." i redninger optimalisert som menyen. Dette finner du under skivene nedtrekksmenyen. Du vil få en meny som åpnes med Redd alternativer.

1. 3 Endring fra "HTML" til "Slices" i utgangsinnstillingsmenyen. Denne rullegardinmenyen er nest øverst. Etter å ha valgt "Slices," endre innstillingen her for å "generere CSS."

14 Endre bakgrunnsfarge til "None" i bakgrunnen menyen. Klikk på "OK". Sett "Format" til "HTML og bilder." Endre "Innstillinger" til "Alle bruker Slices."

15 Endre navnet på filen til "indeks" i lagre som delen. Angi plasseringen du lagrer på som root mappen du opprettet i den første delen. Klikk "Lagre" når du har gjort dette.

Etterbehandling ditt nettsted i Dreamweaver

16 Åpne Dreamweaver, velg "File> Open" og åpne index.html filen du eksporterte fra Illustrator. Du bør være i stand til å finne dette i rotmappen.

17 Gi din nettside en tittel. Øverst på siden kan du finne et område for en tittel. Plasser navnet på siden du jobber med i denne delen. For eksempel, hvis du arbeider på hjemmesiden din, vil du ønsker å sette "hjem" i tittelen område.

18 Lag en hotspot link for navigasjon ved å klikke på navigasjons skive. Nederst, klikker du den blå hotspot kartet verktøyet og trekke ut en boks rundt den første navigasjonslinjen kategorien. Plasser navnet på HTML-filen du vil koble til i lenkeboksen. For eksempel, hvis du tegner en boks rundt fanen hjemme, ville du skrive "index.html" i lenkeboksen. Du må også sørge for at du gir den en alt navn så lesere for blinde og døve brukere kan lese linken høyt eller skriv det i blindeskrift. I alt avsnittet skriver hjem.

19 Gjenta dette trinnet for hver av dine navigasjons bar faner. For eksempel, hvis din neste navigasjonslinjen kategorien er for entrees, ville du trekke ut en boks rundt kategorien, type "entrees.html" i lenkeboksen, og skriv "entrees" i alt boksen.

20 Koble tittelområdet og innholdet område uten å lage en hotspot. For å gjøre dette, klikk på bildet, og deretter legge til navnet på HTML du ønsker å linke til i linken området. For eksempel, ville tittellinjen være knyttet til "index.html". Pass på at grenseområdet sier "0"

21 Gå til "File> Save". Dette vil være hjemmesiden for nettstedet ditt, og grunnlaget for alle de andre HTML-sider for nettstedet ditt også.

22 Endre tittelen eiendom på toppen av indeksen til hva neste side på nettstedet ditt kommer til å være.

23 Velg "File> Save As", og navnet på filen "entrees.html." Navnet må være små og har ingen mellomrom.

24 Gjenta disse trinnene for alle gjenværende nettsider. En enkel måte å se på dette er rett og slett se på hver av dine navigasjons bar faner. Hver kategori vil trenge en egen nettside utpekt for det.

25 Test koblingene ved å klikke på bildet av en globus på toppen av skjermen. Dette vil vise deg nøyaktig hvordan nettstedet vil se ut når opp til et nettsted.

Hint

  • Disse trinnene fungerer uansett hvor enkelt eller komplisert nettstedet ditt er. Start med det grunnleggende og øve på å bruke Illustrator å endre sammensetning, farger, fonter og andre designelementer.