Bygg et nettsted for små bedrifter på én side med Adobe Muse

Adobe Muse er et kraftig verktøy som har gjort webdesign overraskende enklere og interessant. Enklere når det gjelder ingen kodekrav for å lage profesjonelle nettsider og interessant når det gjelder full kontroll over designet i motsetning til andre dra og slipp-applikasjoner.

En av de mest imponerende funksjonene til denne WYSIWYG-applikasjonen (What You See Is What You Get) er at den gir en passende arbeidsflyt for å hjelpe designeren med trinnvis utvikling av nettstedet.

Etter at du er ferdig med denne opplæringen, vil du:

• Ha klar forståelse av alle tekniske og designmessige aspekter ved Muse.
• Vet hvordan du designer profesjonelt på kortere tid.
• Vet om noen gratis ressurser der du kan finne fantastisk grafikk for nettstedet ditt.
• Lag et fullt fungerende nettsted med én side på kort tid.

Krav til denne opplæringen

Du må laste ned visse bilder, vektorer og fonter for å lage denne siden. Men du kan fortsatt følge med uten disse eiendelene. For å organisere innholdet riktig, lag en egen mappe for nettstedet ditt.

• Gå til pexels.com og last ned:

  • 4 bilder i størrelsen 1160 x 480 for lysbildefremvisning. Her er et skjermbilde fra pexels. Du kan legge inn denne størrelsen i boksen «egendefinert størrelse» på denne nettsiden.

  • 6 bilder i størrelsen 271 x 208 for ‘tjenester’-delen.

  • 1 bilde i størrelsen 1160 x 692 for «Kontakt oss»-delen.

• Gå til freepik.com og last ned:

  • Ett kryssikon (du kan redigere dette ikonet i illustrator eller bare laste ned png-filen fra feepik).
  • 6 ansiktsbilder for delen «Testimonials».

• Gå til subtlepatterns.com og last ned ‘brickwall’-mønsteret for ‘Testimonials’-delen.

• Når du fortsetter med denne opplæringen, vil jeg fortelle deg hvordan du laster ned de nødvendige skriftene (det kan gjøres inne i Muse).

• Bruk dummy-teksten fra lipsum.com.

LA OSS KOMME I GANG!

Klargjøring av arbeidsplass og oppsett av topptekst

1 Opprett et nytt nettsted ved å gå til Fil > Nytt nettsted (Ctrl+N) og angi verdiene som vist nedenfor. Ikke glem å merke av i avmerkingsboksen som sier «Sticky Footer». Klikk OK og du får PLAN-modus. Dobbeltklikk på A-Master nederst i et grått område. Du vil lage alt på denne mastersiden.

2 Velg tekstverktøy fra verktøyboksen på venstre side av programvinduet. Klikk og dra på lerretet eller siden for å lage en tekstboks. Gå til tekstpanelet (Ctrl+T), under rullegardinmenyen fonter, se etter nettfonter og velg «Legg til nettfonter» og last ned følgende fonter:

• Rammetto One
• Klump
• Questrial
• Raleway
• Noble
• PT Uten
• Ubuntu
• Hummer

Etter å ha lastet ned disse skriftene, slett denne tekstboksen.

3 Gå til lagpanelet på høyre side av programvinduet. Hvis den ikke er der, gå til Vindu-menyen > Lag. Du vil se der et lag som heter Layer 1 (blå farge). Dette er standardlaget, og alt du lager eller plasserer på lerretet går inn der. Dobbeltklikk på dette laget og navngi det som ‘Overskrift’.

4 Inne i lagpanelet klikker du på det lille brettede papirikonet nederst til høyre. Ved å klikke på dette opprettes et nytt lag med rød farge. Igjen, dobbeltklikk på dette laget og gi det nytt navn til «Innhold».

5 Klikk og dra dette innholdslaget og plasser det under overskriftslaget. Vi har gjort dette fordi vi vil at headeren vår skal være på toppen av alt.

6 Velg topptekstlag og skjul sammen lagpanelet.

7 Velg rektangelverktøy fra verktøykassen eller trykk ‘m’ på tastaturet.

8 Tegn et lite rektangel på lerretet og sørg for at kantfargen er blå, noe som indikerer at dette objektet er inne i overskriftslaget.

9 Gå til Transform-panelet øverst til høyre i programvinduet. La bredden (W) stå og legg inn 50 innerhøyde (H) felt og trykk enter. (Ikke bekymre deg for X- og Y-verdier.)

10 Øverst på siden vil du se to linjer med blå farge (vist på skjermbildet nedenfor). Disse kalles «guider». Når du holder musepekeren over den første guiden, står det «Topp på siden, dra for å justere utfylling over siden», og den andre sier «Overskrift, dra for å justere posisjonen». Det er veldig viktig å sette opp disse veiledningene helt i begynnelsen.

11 Nå, ettersom vi har laget et rektangel på H=50, klikk, hold og dra ‘top of page’-guiden til boksen som vises nedenfor når du begynner å dra, vil si Y=50.

12 På samme måte drar du overskriftsguiden ovenfor til toppen av siden til den sier Y=0. Vi har gjort dette for å sette opp headerområdet vårt. (Du vil kanskje eksperimentere med å plassere disse guidene på forskjellige posisjoner for forskjellige resultater, men det er bra for nå.)

13 Velg rektangelet vi nettopp opprettet, dra det til overskriftsområdet slik at det passer riktig.

14 Nå må vi øke bredden på rektangelet og gjøre det 100 % slik at overskriften ser perfekt ut på alle skjermstørrelser. Utvid rektangelet til begge kantene og pass på at det klikker med kantene. En oransje guide vil dukke opp som sikrer at objektet er knipset. Når du øker bredden på rektangelet, vil popup-vinduet si W=100 % eller W=1160 når du kommer til kanten.

15 Hold rektangelet valgt, klikk på ordet Fyll under applikasjonsmenyen og angi alternativene som følger. Velg den første fargen som svart og andre farge: R=37, G=37, B=37.

16 Gå til Fil > Lagre nettsted. Lagre siden din hver gang du gjør en endring.

17 Lag en tekstboks og skriv inn – ‘example.com’ og endre formateringen som vist nedenfor.

18 Juster størrelsen på tekstboksen slik at hele teksten vises på én linje. Velg denne tekstboksen og dra den over det svarte rektangelet. Juster den til det vertikale midten av rektangelet (en blå linje vil fortelle deg når den er sentrert) og fest den til venstre kant som vist nedenfor.

19 Lag en tekstboks og skriv inn – ‘Hjem’. Endre formateringen som følger. Juster tekstboksens bredde og høyde tilsvarende. Du kan også gjøre dette fra transformasjonspanelet. Min er W=52, H=17.

20 Kopier og lim inn denne tekstboksen og skriv «Tjenester» i den nye. Juster bredden. Dra og plasser denne tekstboksen ved siden av hjemmet med en veldig mindre forskjell mellom de to. Igjen, guidene vil hjelpe deg med riktig justering.

21 Kopier og lim inn denne tekstboksen for fire ganger mer og skriv – Hvorfor oss, Testimonials, Kontakt oss og Nyhetsbrev. Plasser disse tekstboksene én etter én med lik avstand ved siden av ‘tjenester’.

22 Med valgverktøyet valgt og skifttasten trykket, velg alle disse tekstboksene én etter én. Gå til tekstpanelet, endre fargen til hvit. Velg gruppen av disse boksene og plasser den over topprektangelet. (Vertikalt sentrert og justert med høyre sidekant). Dette er vår meny.

23 Igjen, med valgverktøyet valgt og shift-tasten trykket, velg disse tekstboksene, rektangelet og example.com-tekstboksen. Øverst til høyre ser du et alternativ som heter Pin. Klikk på den øverste midtboksen for å feste disse elementene. Dette betyr at når brukeren vil bla gjennom nettstedet ditt, vil denne overskriften forbli fast øverst. Det er veldig nyttig siden brukeren ikke trenger å rulle helt opp bare for å velge et annet alternativ.

24 Gå til lagpanelet og lås topptekstlaget. Dette kan gjøres ved å klikke inne i boksen til venstre for lagnavnet. Når du låser et lag eller et objekt, vil det ikke påvirke utseendet, men du vil ikke kunne velge disse elementene med mindre du låser opp. Vi har gjort dette for å fullstendig eliminere sjansene for å flytte varene ved et uhell.

25 Velg innholdslag og skjul sammen lagpanelet.

Etablere lysbildefremvisning

26 Gå til widgets-biblioteket på høyre side av programvinduet. Hvis det ikke er der, gå til Vindu-menyen > velg Widgets-bibliotek. Utvid «lysbildefremvisninger»-delen og velg «Blank». Klikk og dra dette objektet til lerretet. Et svart vindu med lysbildefremvisningsalternativer vil dukke opp.

27 Sørg for at alternativene er angitt som vist på bildet nedenfor. Under deler-seksjonen nederst, fjern merket for avmerkingsboksene som sier Prev, Next, Captions og Counter. Vi trenger ingen av disse.

28 Klikk hvor som helst på lerretet for å få denne popup-vinduet til å forsvinne. Klikk nå forsiktig inne i lysbildefremvisningen. Ved å klikke én gang vil du se at ‘Slideshow’ er skrevet i ‘type gjeldende utvalgsområde’. Den er plassert øverst til venstre under applikasjonsmenyen. Dette området lar deg se hva du har valgt. Det er en veldig nyttig funksjon når oppsettet blir komplisert. Klikk på nytt og du vil legge merke til at beskrivelsen sier ‘Heltebilde’.

29 Øk bredden på heltebildet manuelt ved å utvide det fra midten. Fest den til begge kantene av siden (for å få den til 100 % bredde) og til bunnen av overskriftsrektangelet som vist nedenfor.

30 Gå til transform panel og sett H=500.

31 Åpne lysbildefremvisningsalternativene igjen ved å klikke på den lille blå sirkelen med hvitt rektangel inni den (den er plassert øverst til høyre i lysbildefremvisningen).

32 Klikk på mappeikonet ved siden av alternativet «Legg til bilder…», bla gjennom bildene vi lastet ned for lysbildefremvisning. Velg alle fire og klikk åpne.

33 Gå til Fil > velg ‘Forhåndsvis side i nettleseren’ eller Ctrl+Shift+E og se hvordan lysbildefremvisningen din vil fungere når siden er aktiv. Jeg anbefaler deg å huske hurtigtastene jeg bruker i denne opplæringen. Å gjøre dette vil hjelpe deg med å fremskynde designprosessen.

Opprette ‘Tjenester’-delen

34 Nå som vi har satt opp overskriften og lysbildefremvisningen vår, er det på tide å lage seksjoner for hvert element vi har lagt til i menyen vår. La oss komme i gang med «tjenester». Lag en tekstboks og skriv tjenester i den (alle bokstaver små) og endre formateringen som følger.

35 Dobbeltklikk inne i denne tekstboksen og velg bare bokstaven ‘I’. Endre fonten til «Chunk» og la alt være det samme. Juster høyden på denne tekstboksen. Når du reduserer høyden, vil en stiplet linje vises på et bestemt punkt, og boksen blir ikke kortere. Ikke reduser størrelsen etter det. Dette er lavest mulig høyde med denne skriftstørrelsen.

36 Med tekstboksen valgt, gå til transformasjonspanelet og sett rotasjonsvinkelen til -90 grader (90 grader negativ).

37 Flytt tekstboksen til venstre side av lerretet som vist nedenfor.

38 Det kan være lurt å zoome ut litt for å se alt innholdet samtidig eller for å justere objektene riktig. For å gjøre dette, prøv å skrive inn forskjellige verdier (mindre enn 100 %) i zoomnivådelen øverst. Etter å ha skrevet inn verdien, trykk enter.

39 Gå til Fil > velg ‘Plasser’. Velg det første bildet som vi lastet ned for tjenesteseksjonen vår. Klikk åpen.

40 Markøren vil endre utseende til en plasspistol lastet med et bilde. Klikk på lerretet for å plassere det. Flytt og plasser den slik at den er på linje med toppen av ‘tjenester’-tekstboksen.

41 Kopier dette bildet og lim det inn to ganger. Velg disse innlimte bildene ett etter ett og juster dem med lik avstand med det første bildet.

42 Velg det andre bildet, høyreklikk på det og velg ‘erstatt bilde’ (det er det siste alternativet). Bla gjennom det andre bildet og klikk på åpne. Bytt også ut det tredje bildet.

43 Lag tekstbokser for informasjonen om tjenester og bruk formatering for overskrifter og avsnitt som skrevet nedenfor. Guidene vil hjelpe deg med å justere dem riktig.

• For overskrifter: Skrift: Raleway Fet, Størrelse=20, Farge: Svart, Venstrejustert og 100 % foran.
• For avsnitt: Font: Questrial, Størrelse=15, Farge: R=67 G=67 B=67, Venstrejustert og 120 % foran.

44 Plasser tre bilder til som vi gjorde i forrige trinn, og lag en beskrivelsestekst for dem på samme måte. Du bør ha følgende resultat.

Sluttresultat av ‘Tjenester’-delen

Opprette ‘Hvorfor oss’-delen

45 Neste er ‘Hvorfor oss’-delen. Denne er litt komplisert. Vær forsiktig med å velge objektene. Lag først et rektangel med 100 % bredde og H=996. Fyll den med en farge (R=47, G=48, B=55). Høyreklikk på dette rektangelet > Ordne > velg ‘send til bakside’ (ikke send bakover).

46 Utvid arbeidsområdet ditt ved å klikke og dra «bunnen av siden»-guiden slik at du har nok plass til å lage innhold som vil bli plassert på dette rektangelet vi nettopp har laget.

47 Rull ned til hvitt tomt område og lag et nytt rektangel med W=351 og H=351. Fyll den med hvit farge og ingen strek.

48 Gå til alternativet ‘hjørneradius’ (det er plassert ved siden av strek under applikasjonsmenyen). Klikk på alle hjørnene for å gjøre dem runde og legg inn 500 i boksen ved siden av.

49 Du vil ha en sirkel. Dra denne sirkelen inn på rektangelet og juster den som følger. Ved siden av hjørneradius er det et alternativ som heter ‘Opacity’. Med sirkelen valgt, sett 14 i denne boksen.

50 Lag en tekstboks og skriv inn – hvorfor oss (alle små). Endre skrifttypen til Rammetto One, størrelse=100, Farge R=241 G=244 B=247, ledende 100 % og gjør den midtstilt. Sett denne tekstboksen inne i sirkelen og juster den riktig.

51 Nå skal vi lage de stiplede linjene. Lag et rektangel av W=9 og H=9, uten fyll. Klikk på ordet ‘strøk’ ved siden av for å fylle. Velg farge R=241 G=244 B=247. Klikk på kjedeikonet for å bryte det og legg inn ‘1’ i bunnens slagvekt.

52 Kopier dette rektangelet med en sidestrek og lim det inn flere ganger. Ordne dem på én linje (zoom litt inn med zoomverktøyet hvis du synes det er vanskelig å se disse rektanglene). Når du har fått ønsket lengde på den stiplede linjen, velg alle disse rektanglene, høyreklikk og velg ‘Gruppe’. Kopier og lim inn denne gruppen for andre stiplede linjer.

53 For skrå stiplede linjer, prøv å sette forskjellige rotasjonsvinkler i transformasjonspanelet. Jeg har brukt 150 og 30 grader. Du må slette noen rektangler fra denne gruppen for å få kortere lengder. Juster disse linjene nær sirkelen som vist nedenfor.

54 Nå skal vi legge til litt mer tekst for tall, overskrifter og beskrivelser. Bruk følgende innstillinger for hver av dem og juster disse tekstboksene som vist nedenfor.

• For tall: Font=Rammetto One, Farge: R=196 G=214 B=193, midtstilt og 100 % foran, størrelse: 200 (for nummer ‘1’), 160 (for tallene ‘2’ og ‘3’) og 120 (for tallene ‘4’ og ‘5’).
• For overskrifter: Font=Raleway Fet, Størrelse=18, Farge:Hvit, Senterjustert og 100 % foran.
• For avsnitt: Font=Questrial, Størrelse=16, Farge: R=241 G=244 B=247, Senterjustert og 120 % foran.

Sluttresultat av ‘Hvorfor oss’-delen

Opprette «Vitnesbyrd»-delen

55 Igjen, skap litt plass til å jobbe ved å dra ned bunnen av sideguiden. Lag et rektangel med 100 % bredde og H=486.

56 Med rektangelet valgt, klikk på ordet «Fyll» og klikk «Legg til bilde» ved siden av bildealternativet. Bla etter et bilde av et mursteinsmønster som vi lastet ned. Under Tilpasningsalternativet velger du «Fliser» for å fylle hele rektangelet med denne teksturen.

57 Rull ned til tom plass og lag en tekstboks i størrelsen W=406, H=289 ved hjelp av transformasjonspanelet. Skriv inn – ‘hva andre har å si’ (alt i liten grad). Endre skrifttypen til Rammetto One, størrelse=70, gjør den venstrejustert, fargeverdiene R=37 G=37 B=37 og ledende=100 %.

58 Med denne tekstboksen valgt, klikk på ordet strek, bruk høyre strek med vekt ett og svart farge på det. Dra denne tekstboksen og legg den over rektangelet med murveggmønster.

59 Neste trinn er å legge til attester fra kunder. For dette bruker vi vektorbildene med runde ansikter vi lastet ned fra freepik.com. Igjen, kom ned til hvitt tomt rom slik at du kan tilpasse komposisjonen din riktig.

60 Gå til Widgets-biblioteket og dra ‘Blank’ fra komposisjonsdelen til lerretet. Klikk på plusstegnet for å legge til tre utløsere til. Velg forsiktig den første triggeren og sørg for valget ditt ved hjelp av gjeldende utvalgsområde som sier trigger. Og rett ved siden av er det et alternativ som heter «Aktiv». Klikk på denne for å utvide. Velg ‘Normal’ tilstand og velg ‘ingen fylling’ og ‘ingen strek’ for denne tilstanden. Gjenta dette for hver tilstand som er overrulling, mus ned og aktiv. Gå til transformasjonspanelet med den første utløseren valgt og sett inn W=10, H=10.

61 Gjenta forrige trinn for hver trigger vi har. Dette betyr at du ikke bruker fyll og strek for hver tilstand og transformerer utløserne til 10 x 10 størrelse. Flytt utløserne nærmere hverandre.

62 Nå. Vi tilpasser målene for hver av disse utløserne. Det store rektangelet du ser er målet. Velg første utløser og velg normal tilstand fra tilstandspanelet. Etter det, velg målet for denne utløseren og bruk ingen fylling og ingen strek for hver tilstand. Gå deretter til transformasjonspanelet og gjør målet til W=360, H=370.

63 Gjenta forrige trinn for hvert mål. Bare sørg for at du først velger utløseren, gjør den til normal tilstand, velger deretter det respektive målet med normal tilstand, og deretter bruker du ingen fylling og ingen strek. Du trenger ikke å endre størrelsen på hvert mål. Bare gjør det for én, og det vil bli brukt på alle.

64 Nå skal vi begynne å legge til innhold til denne komposisjonen. Gå til Fil > Plasser og åpne det første ansiktsbildet og plasser det utenfor komposisjonen. Dra dette bildet og legg det inn i komposisjonen nå. Du vil se at en blå sirkel vises øverst i høyre hjørne som indikerer at dette bildet nå er en del av komposisjonen.

65 Lag tre tekstbokser – en for personens navn, en for hans/hennes betegnelse og en for uttalelsen eller anmeldelsen. Bruk formateringen som skrevet nedenfor og plasser disse tekstboksene i komposisjonen. Bare sørg for at hver av dem har en blå sirkel i hjørnet.

• For personens navn: Font: Nobile Medium Italic, størrelse=18, Farge: R=37 G=37 B=37, midtstilt og 100 % foran.
• For betegnelse: Font: Nobile, størrelse=15, Farge: R=37 G=37 B=37, midtstilt og 100 % foran.
• For utsagn (med omvendt komma): Font: PT Sans Italic, størrelse=18, farge: R=69 G=64 B=68, midtstilt og 100 % foran.

66 Med ansiktsbildet valgt, bruk vektstrek 4 på hver side, farge: hvit, rund alle hjørnene og øk radiusen til den vikler seg rundt bildet. Jeg har bruk 100 som hjørneradier.

67 Gå til ‘Effekter’ (plassert ved siden av alternativet for rundere hjørner) og merk av for ‘skygge’. Sett verdiene som; Farge=Sort, Opasitet=37 %, Uskarphet=12, Vinkel=78 og Avstand=5.

68 Gjenta de foregående trinnene (fra 64 til 67) for å legge til innhold til hvert mål og lagre endringene (Ctrl+S). Sett denne komposisjonen over rektangelet med murveggmønster.

69 Velg nå hele komposisjonen (sørg for med gjeldende utvalgsområde) og utvid alternativene ved å klikke på den lille blå sirkelen. Still inn alternativene som vist nedenfor. Trykk Ctrl+Shift+E og se om det fungerer bra.

70 Du skal ha følgende resultat.

Sluttresultat av ‘Vitnesbyrd’-delen

Opprette «Kontakt oss»-delen

71 Neste seksjon er Kontakt oss. Vi legger til et bakgrunnsbilde, et skjema og noen tekstbokser i denne delen. Lag først et rektangel med 100 % bredde og H=692. Fyll det med et bilde som vi lastet ned for denne seksjonen og velg «skala for å fylle» under Tilpasning. Endre opasiteten til 72 %.

72 Lag et nytt rektangel med samme bredde og høyde og fyll det med en gradient. Sett gradientverdiene som; Opasitet=90 % til 46 %, Farge: Svart til R=69 G=64 B=68, Brennpunkt=66 %, Retning: Horisontal og Størrelse: automatisk. Plasser dette rektangelet over bildet og sørg for at det klikker med hver kant.

73 Gå til widgets-biblioteket. Under skjemaer velger du «enkel kontakt» og drar den på lerretet. Et vindu med skjemaalternativer vil dukke opp. Angi skjemanavn: Kontakt oss-skjema, e-post til: legg inn e-postadressen din der du ønsker å motta informasjon som er lagt inn av de besøkende, Etter sending: velg «bli på gjeldende side». Det siste alternativet er ‘Rediger sammen’. Sørg for at det er sjekket. På denne måten må du bare gjøre endringer i ett felt, og de vil bli brukt på alle. Klikk hvor som helst på lerretet for å få alternativboksen til å forsvinne.

74 Velg skjemaet. Klikk på etiketten ‘Navn’ og klikk på den igjen til du ser ‘Etikett’ skrevet i gjeldende valgområde. Trykk på slett. Gjenta dette for e-post- og meldingsetiketter og slett dem.

75 Velg skjemaet på nytt og velg det første skjemafeltet som sier ‘Skriv inn navn’ til du ser ‘Tekstinntasting’ i gjeldende valgområde. Påfør ingen fylling og bunnstrek (vekt en og farge hvit) for hver tilstand, det vil si fra Tom til Fokus. For feiltilstand, velg ingen fyll og bunnstrek med rød farge med vekt 1.

76 Etter det, med e-postfeltet valgt > velg den tomme tilstanden på nytt og tilpass tekstfonten og fargen for hver tilstand som skrevet nedenfor.

• For tom, ikke-tom og fokustilstand: Font: Questrial, størrelse=14, farge: hvit, venstrejustert, 100 % foran og uten kursiv.
• For rollover-tilstand: bare endre tekstfargen til R=196 G=196 B=196 og ingen kursiv.
• For feiltilstand: endre tekstfargen til rød og uten kursiv.

77 Klikk og velg Send-knappen. Velg normal tilstand, rund alle hjørnene med 40 radier og øk bredden som vist på skjermbildet nedenfor. Endre skrifttypen til Raleway Bold, størrelse=20, midtstilt, farge: R=241 G=244 B=247, ledende: juster teksten «send» i midten av knappen ved å øke denne verdien (jeg har brukt 130 %) .

78 For rulle- og mus ned-tilstander endrer du strekfargen og tekstfargen til grå (R=127 G=127 B=127). Til slutt, for statusen «Send pågår», endre strek og tekstfarge til himmelblå (R=41 G=171 B=226).

79 Når du velger «send pågår»-tilstand for denne innsendingsknappen, vil du se at det er en annen tekstboks som sier «sender inn skjema…». Velg denne boksen og velg statusen «Send pågår». Endre skrifttypen til Questrial, størrelse=14, farge: grå, midtstilt og uten kursiv. Velg statusen «send suksess» og endre tekstfargen til himmelblå (ingen kursiv). Velg tilstanden «send feil» og endre tekstfargen til rød (ingen kursiv). Kontaktskjemaet er klart.

80 Lag to tekstbokser. Skriv inn – kontakt oss og på den andre linjen skriver du «alle felter er obligatoriske». For kontakttekst, bruk fonten: Rammetto One, størrelse=60, farge: R=241 G=244 B=247, ledende=100 % og venstrejustert. For ‘alle felt er obligatoriske’-tekst, bruk fonten: Nobile kursiv, størrelse=26, farge: R=241 G=244 B=247, ledende=100 % og venstrejustert. For denne tekstboksen, bruk bunnstrek med vekt 1 og farge hvit.

81 Skriv inn et avsnitt i den andre tekstboksen vi opprettet. Bruk skrifttype: PT Sans Italic, størrelse=14, farge: R=241 G=244 B=247, ledende=120 %, venstrejustert og mellomrom før=15.

82 Sett disse tekstboksene og skjemaet på bildet vi plasserte. Juster dem som følger.

83 Lag en tekstboks til for noe kontaktinformasjon som kontoradresse, e-post og telefonnumre. Sett denne tekstboksen på bildet. Du bør ha følgende resultat.

Sluttresultat av ‘Kontakt oss’-delen

Oppretter bunntekst

84 Den siste delen er bunntekst. Det er tre guider nederst, nemlig nederst på siden, bunntekst og bunnen av nettleseren. Det du må gjøre nå er å sørge for at ‘bunnen av siden’-guiden klikker med bunnen av kontakt oss-delen og ‘bunntekst’-guiden sammenfaller med ‘bunnen av siden’-guiden. Etter det kan du dra ‘bunnen av nettleseren’ ned for å justere plassen du trenger for bunnteksten.

85 Lag to rektangler med 100 % bredde og H=168 for den første og H=37 for den andre. Endre fyllfargen på stort rektangel til hvitt og bruk R=47, G=48, B=55 for en kortere.

86 Velg det første rektangelet og prøv å plassere det i bunntekstområdet. Det vil ikke gå dit. I stedet vil guiden nederst på siden begynne å utvides nedover. For å gjøre dette rektangelet til et bunntekstelement, merk av for ‘Footer’-boksen øverst til høyre i programvinduet. Gjør det for andre rektangel også.

87 Plasser nå disse rektanglene i bunntekstområdet og sørg for at det store rektangelet er litt over bunntekstguiden. Bunnen av farget rektangel må klikke med bunnen av nettleserguiden. Ellers vil du se et lite hvitt gap etter bunnteksten som ikke ser pent ut.

88 Lag tekstbokser for bunntekst og skriv inn hva du vil. Bare merk av for «bunntekst» for tekstboksene du vil legge til. Jeg har lagt til litt tekst som inneholder ansvarsfraskrivelse og informasjon om opphavsrett.

89 ‘Laget med Adobe Muse CC’-merket kan legges til fra widgetbiblioteket under sosial seksjon. Du kan også legge til linker til Facebook-siden din, twitter, google+, LinkedIn, Pinterest, YouTube-kanal eller vimeo-lenke.

90 Opphavsrettssymbolet og mange andre symboler som du ser ved siden av Alle rettigheter forbeholdt tekst kan legges til fra ‘Glyfer’-panelet på høyre side av programvinduet. Hvis den ikke er der, gå til Vindu-menyen > velg Tegntegn.

Opprette ‘nyhetsbrev’-seksjonen

91 Til nå har vi designet seksjoner for alle menyelementer bortsett fra ett, og det er «Nyhetsbrev». La oss gjøre noe interessant med det. Husk korssymbolet vi lastet ned, det vil bli brukt her (det er greit hvis du ikke har lastet det ned, du kan fortsatt følge med). Først velger du Nyhetsbrev-tekstboksen og noterer bredden og høyden fra transformasjonspanelet. Min er 81 x 17.

92 Nå, åpne widgets-biblioteket og dra ‘Lightbox Display’ fra komposisjonsdelen. Slett de to første triggerne (plassert øverst) og slett alle bildetekstene (plassert nederst). Gjør størrelsen på tredje utløser til samme som nyhetsbrevtekstboksen som er 81 x 17. Endre fyllingen og streken til ingen for alle stater.

93 Dra nyhetsbrevets tekstboks og plasser den inne i denne utløseren på en slik måte at alle kantene på tekstboksen faller sammen med kantene på utløseren. Dra nå denne gruppen og legg den igjen i menyen der den ble plassert tidligere. Det vi har gjort er at vi har brukt en lenke til nyhetsbrevets tekstboks. Når brukeren klikker på det, vil nettstedet tone ut og målet vises.

94 Neste trinn er å tilpasse målet vårt. Velg det grå området og sørg for at det gjeldende utvalgsområdet sier ‘Target’. Du må klikke tre ganger for å velge den. Endre fyllingen og streken til ingen for alle tilstandene.

95 Legg til to tekstbokser og enkelt kontaktskjema (slett navn og meldingsfelt og behold bare e-postfeltet). Dra dem inn i denne komposisjonen og sørg for at alle har blå sirkel i hjørnene.

96 Tilpass skjemaet slik vi gjorde i kontakt oss-delen. Du bør ha følgende resultat. For «Hold kontakten»-tekstfeltet, bruk font: Hummer, størrelse=40, farge:hvit, midtstilt og 100 % foran. For beskrivelsestekst under den, bruk font: Ubuntu Light Italic, størrelse=14, farge: hvit, midtstilt og 120 % foran. Endre teksten på send-knappen til «Abonner».

97 Velg nå lukkeknappen, flytt den og plasser øverst til høyre på denne lysboksskjermen som vist nedenfor. Klikk inni den til du ser ‘Etikett’ skrevet i gjeldende utvalgsområde. Slett etiketten.

98 Endre fyll og strek for denne lukkeknappen til ingen for alle tilstandene og gjør dens W=40 og H=40. Gå til Fyll > legg til bilde og bla etter kryssbildet. Velg ‘skala for å passe’ under tilpasningsalternativet.

99 Klikk på Nyhetsbrev og du vil se en blå sirkel i hjørnet. Klikk på den og kontroller at alternativene er angitt som følger.

Sluttresultat av ‘Nyhetsbrev’-delen

Opprette hyperkoblinger

100 Den siste oppgaven som gjenstår er å bruke lenker til hver seksjon. For å gjøre dette, velg alternativet «koblingsanker» øverst i midten eller trykk på bokstaven «a» på tastaturet. Du vil se at markøren endrer utseende til en plasspistol lastet med et lenkeanker.

101 Når du klikker på lerretet for å plassere dette, vil en dialogboks dukke opp som lar deg gi nytt navn til et anker.

102 Lag lenkeankere for hver seksjon vi har designet, det vil si Home, Services, Why Us, Testimonials og Contact Us. Plasser ankrene på toppen av hver seksjon. Hjemmeanker er vist nedenfor som et eksempel. Plassering av disse ankrene er et viktig skritt og bør gjøres nøye. Når brukeren klikker på en bestemt lenke, vil nettstedet rulle til posisjonen der ankeret er plassert.

103 Nå skal vi bruke lenkene. For å gjøre dette, velg ‘Hjem’-tekstboksen. Gå til alternativet «Hyperkoblinger» (plassert øverst), klikk på den lille nedpilen for å utvide listen. Her kan du se alle ankrene som vi nettopp har plassert. Koble den til «Hjem»-anker. Gjenta dette trinnet for andre tekstbokser unntatt nyhetsbrev, da vi har brukt en lysboksvisning på det.

Endelig resultat etter å ha opprettet hyperkoblinger

Siste berøring – Endre sideegenskaper og legge til favorittikon

104 Inne i planmodus, høyreklikk på hjemmesiden og velg ‘Sideegenskaper. En dialogboks vil dukke opp. Velg «Alternativer»-fanen og under sidenavn, legg inn – «Velkommen til eksempel.com» og klikk OK. Dette er teksten som vises øverst i nettleservinduet.

105 Gå til Fil > Områdeegenskaper. Under Layout-fanen er det siste alternativet ‘Favicon’. Når du holder musepekeren over det, vises en popup som beskriver hva et favorittikon er og hva den optimale størrelsen bør være. Det er bra å legge til et favorittikon, da det hjelper med å få merkevaren din til å skille seg ut og også tjener formålet å hjelpe brukerne til å enkelt identifisere nettstedet ditt hvis de har bokmerket det.

Testing og eksport

106 Test nettstedet ditt ved å gå til Fil > Forhåndsvis nettsted i nettleseren eller Ctrl+Alt+E. Ikke velg «Forhåndsvisning av side i nettleser» denne gangen siden koblingene ikke fungerer i forhåndsvisning av siden. Det kan være lurt å prøve å plassere ankrene på forskjellige steder for å sikre at når brukeren klikker på en lenke, vil siden rulle til høyre seksjon og riktig posisjon.

107 Til slutt, gå til Fil > Eksporter som HTML (Ctrl+E). Under nettadressen legger du inn et navn som «example.com» og velger stedet. Klikk OK. Nettsiden er klar.

Endelig resultat på hver side

Forside

‘Tjenester’-seksjonen

‘Hvorfor oss’-delen

Seksjonen «Vitnesbyrd».

‘Kontakt oss’-delen

Bunntekstdel

‘Nyhetsbrev’-seksjonen

KONKLUSJON

Jeg er sikker på at du har fått alt jeg lovet deg etter å ha fulgt denne opplæringen. Dette er bare et eksempel. Lek litt med dette fantastiske verktøyet og design fantastiske og profesjonelle nettsider mens du utforsker uendelige kreative muligheter på veien. Takk skal du ha.