Adobe Muse är ett kraftfullt verktyg som har gjort webbdesign förvånansvärt enklare och intressant. Enklare när det gäller inget kodkrav för att skapa professionella webbplatser och intressant när det gäller full kontroll över designen till skillnad från andra dra och släpp-applikationer.

En av de mest imponerande funktionerna i denna WYSIWYG-applikation (What You See Is What You Get) är att den ger ett lämpligt arbetsflöde för att hjälpa designern i steg för steg utveckling av webbplatsen.

När du är klar med den här handledningen kommer du att:

Ha klar förståelse för alla tekniska och designmässiga aspekter av Muse.
Vet hur man designar professionellt på kortare tid.
Lär dig om några gratisresurser där du kan hitta fantastisk grafik för din webbplats.
Skapa en fullt fungerande webbplats på en sida på nolltid.

Krav för denna handledning

Du måste ladda ner vissa bilder, vektorer och typsnitt för att skapa den här webbplatsen. Men du kan fortfarande följa med utan dessa tillgångar. För att organisera innehållet på rätt sätt, skapa en separat mapp för din webbplats.

Gå till pexels.com och ladda ner:
- 4 bilder i storleken 1160 x 480 för bildspel. Här är en skärmdump från pexels. Du kan lägga denna storlek i rutan "anpassad storlek" på denna webbplats.
- 6 bilder i storleken 271 x 208 för avsnittet "tjänster".
- 1 bild i storleken 1160 x 692 för avsnittet "Kontakta oss".
Gå till freepik.com och ladda ner:
- En korsikon (du kan redigera den här ikonen i illustrator eller bara ladda ner png-filen från feepik).
- 6 ansiktsbilder för avsnittet "Vitnesmål".
Gå till subtlepatterns.com och ladda ner "brickwall"-mönstret för "Testimonials"-sektionen.
När du fortsätter med den här handledningen kommer jag att berätta hur du laddar ner de nödvändiga typsnitten (det kan göras i Muse).
Använd dummytexten från lipsum.com.

LÅT OSS BÖRJA!

Förbereder arbetsutrymme och sätter upp rubriken

1 Skapa en ny webbplats genom att gå till Arkiv > Ny webbplats (Ctrl+N) och ange värdena enligt nedan. Glöm inte att markera kryssrutan som säger "Sticky Footer". Klicka på OK så får du PLAN-läget. Dubbelklicka på A-Master längst ner i ett grått område. Du kommer att skapa allt på denna huvudsida.

2 Välj textverktyg från verktygslådan som finns till vänster i programfönstret. Klicka och dra på duken eller sidan för att skapa en textruta. Gå till textpanelen (Ctrl+T), under rullgardinsmenyn teckensnitt, leta efter webbteckensnitt och välj "Lägg till webbteckensnitt" och ladda ner följande typsnitt:

Rametto One
Chunk
Questrial
Raleway
Ädel
PT Utan
Ubuntu
Hummer

När du har laddat ner dessa typsnitt, ta bort den här textrutan.

3 Gå till panelen Lager på höger sida av programfönstret. Om det inte finns där, gå till Fönster-menyn > Lager. Du kommer att se ett lager som heter Layer 1 (blå färg). Detta är standardlagret och allt du skapar eller placerar på duken går in där. Dubbelklicka på det här lagret och namnge det som "Header".

4 Inuti lagerpanelen klickar du på den lilla vikta pappersikonen i det nedre högra hörnet. Genom att klicka på detta skapas ett nytt lager med röd färg. Återigen, dubbelklicka på det här lagret och byt namn på det till "Innehåll".

5 Klicka och dra detta innehållslager och placera det under rubriklagret. Vi har gjort det här för att vi vill att vår header ska vara på toppen av allt.

6 Välj rubriklager och komprimera lagerpanelen.

7 Välj rektangelverktyg från verktygslådan eller tryck på ‘m’ på tangentbordet.

8 Rita en liten rektangel på duken och se till att dess kantfärg är blå, vilket indikerar att det här objektet är inuti rubriklagret.

9 Gå till Transform-panelen längst upp till höger i programfönstret. Lämna bredd (W) och lägg 50 invändigt höjd (H) fält och tryck enter. (Oroa dig inte för X- och Y-värden.)

10 Längst upp på sidan ser du två rader med blå färg (visas i skärmbilden nedan). Dessa kallas "guider". När du håller muspekaren över den första guiden står det "Överst på sidan, dra för att justera utfyllnad ovanför sidan" och den andra säger "Rubrik, dra för att justera position". Det är mycket viktigt att sätta upp dessa guider i början.

11 Nu, när vi har skapat en rektangel med H=50, klicka, håll och dra guiden ‘överst på sidan’ tills rutan som visas nedan när du börjar dra kommer att säga Y=50.

12 På samma sätt, dra rubrikguiden ovan till guiden överst på sidan tills det står Y=0. Vi har gjort detta för att ställa in vårt rubrikområde. (Du kanske vill experimentera med att placera dessa guider på olika positioner för olika resultat, men det är bra för nu.)

13 Välj rektangeln som vi just skapade, dra den till rubrikområdet så att den passar ordentligt.

14 Nu måste vi öka rektangelns bredd och göra den till 100 % så att rubriken ser perfekt ut på alla skärmstorlekar. Expandera rektangeln till båda kanterna och se till att den snäpper med kanterna. En orange guide kommer att visas som säkerställer att objektet har knäppts. När du ökar rektangelns bredd kommer popup-fönstret att säga W=100 % eller W=1160 när du når kanten.

15 Behåll rektangeln markerad, klicka på ordet Fyll under applikationsmenyn och ställ in alternativen enligt följande. Välj den första färgen som Svart och den andra färgen: R=37, G=37, B=37.

16 Gå till Arkiv > Spara webbplats. Spara din webbplats varje gång du gör en ändring.

17 Skapa en textruta och skriv in – ‘example.com’ och ändra dess formatering enligt nedan.

18 Justera storleken på textrutan så att hela texten visas på en rad. Markera den här textrutan och dra den över den svarta rektangeln. Rikta in den mot rektangelns vertikala mitt (en blå linje talar om när den är centrerad) och fäst den mot den vänstra kanten som visas nedan.

19 Skapa en textruta och skriv in – ‘Hem’. Ändra dess formatering enligt följande. Justera textrutans bredd och höjd därefter. Du kan också göra detta från transformpanelen. Min är W=52, H=17.

20 Kopiera och klistra in den här textrutan och skriv ‘Tjänster’ i den nya. Justera bredden. Dra och placera den här textrutan bredvid hemmet med mycket mindre skillnad mellan de två. Återigen kommer guiderna att hjälpa dig i korrekt justering.

21 Kopiera och klistra in den här textrutan för fyra gånger mer och skriv – Varför oss, Rekommendationer, Kontakta oss och Nyhetsbrev. Placera dessa textrutor en efter en med lika mellanrum bredvid "tjänster".

22 Med markeringsverktyget valt och skifttangenten nedtryckt, markera alla dessa textrutor en efter en. Gå till textpanelen, ändra färgen till vit. Välj gruppen av dessa rutor och placera den över rubrikrektangeln. (Vertikalt centrerad och justerad med höger sidkant). Detta är vår meny.

23 Återigen, med markeringsverktyget valt och skifttangenten nedtryckt, markera dessa textrutor, rektangeln och textrutan example.com. Längst upp till höger ser du ett alternativ som heter Pin. Klicka på den övre mittrutan för att fästa dessa objekt. Detta innebär att när användaren rullar igenom din webbplats kommer denna rubrik att förbli fixerad överst. Det är mycket användbart eftersom användaren inte behöver rulla hela vägen upp bara för att välja ett annat alternativ.

24 Gå till panelen Lager och lås rubriklagret. Detta kan göras genom att klicka i rutan till vänster om lagernamnet. När du låser ett lager eller något objekt kommer det inte att påverka dess utseende men du kommer inte att kunna välja dessa objekt om du inte låser upp. Vi har gjort detta för att helt eliminera chanserna att av misstag flytta föremålen.

25 Välj innehållslager och komprimera lagerpanelen.

Upprätta bildspel

26 Gå till widgetbiblioteket på höger sida av programfönstret. Om det inte finns där, gå till Fönster-menyn > välj Widgets-bibliotek. Expandera avsnittet "bildspel" och välj "Tom". Klicka och dra objektet till duken. Ett svart fönster med alternativ för bildspel dyker upp.

27 Se till att alternativen är inställda enligt bilden nedan. Under delar längst ner, avmarkera kryssrutorna som säger Föregående, Nästa, Bildtexter och Räknare. Vi behöver inga av dessa.

28 Klicka var som helst på arbetsytan för att få det här popup-fönstret att försvinna. Klicka nu försiktigt inuti bildspelet. Genom att klicka på den en gång ser du att ‘Bildspel’ har skrivits i ‘typ av aktuellt urvalsområde’. Den finns i det övre vänstra hörnet under applikationsmenyn. Detta område låter dig se vad du har valt. Det är en mycket användbar funktion när layouten blir komplicerad. Klicka igen och du kommer att märka att beskrivningen säger "Hjältebild".

29 Öka bredden på hjältebilden manuellt genom att expandera den från mitten. Fäst den mot båda kanterna på sidan (för att få den till 100 % bredd) och längst ner på sidhuvudrektangeln som visas nedan.

30 Gå till transformpanelen och sätt H=500.

31 Öppna bildspelsalternativen igen genom att klicka på den lilla blå cirkeln med vit rektangel inuti (den finns i det övre högra hörnet av bildspelet).

32 Klicka på mappikonen bredvid alternativet "Lägg till bilder…", bläddra efter bilderna som vi laddade ner för bildspel. Välj alla fyra och klicka på öppna.

33 Gå till Arkiv > välj "Förhandsgranska sida i webbläsare" eller Ctrl+Skift+E och se hur ditt bildspel kommer att fungera när sidan är live. Jag rekommenderar dig att memorera de kortkommandon som jag använder i den här handledningen. Att göra detta hjälper dig att påskynda din designprocess.

Skapar avsnittet "Tjänster".

34 Nu när vi har ställt in vår rubrik och bildspel är det dags att skapa sektioner för varje objekt som vi lagt till i vår meny. Låt oss komma igång med "tjänster". Skapa en textruta och skriv tjänster i den (alla bokstäver små) och ändra dess formatering enligt följande.

35 Dubbelklicka i den här textrutan och välj bara bokstaven ‘I’. Ändra dess teckensnitt till "Chunk" och lämna allt detsamma. Justera höjden på denna textruta. När du minskar dess höjd visas en streckad linje vid en viss punkt och rutan blir inte kortare. Minska inte storleken efter det. Detta är den lägsta möjliga höjden med denna teckenstorlek.

36 Med textrutan markerad, gå till transformeringspanelen och ställ in rotationsvinkeln till -90 grader (90 grader negativ).

37 Flytta textrutan till vänster sida av duken som visas nedan.

38 Du kanske vill zooma ut lite för att se allt innehåll på en gång eller för att justera objekten ordentligt. För att göra detta, försök att skriva olika värden (mindre än 100%) i zoomnivåsektionen högst upp. När du har skrivit in värdet trycker du på enter.

39 Gå till Arkiv > välj ‘Placera’. Välj den första bilden som vi laddade ner för vår tjänstsektion. Klicka på öppna.

40 Markören kommer att ändra sitt utseende till en platspistol laddad med en bild. Klicka på duken för att placera den. Flytta och placera den så att den ligger i linje med toppen av textrutan "tjänster".

41 Kopiera den här bilden och klistra in den två gånger. Välj dessa inklistrade bilder en efter en och rikta in dem på samma avstånd som den första bilden.

42 Välj den andra bilden, högerklicka på den och välj ‘ersätt bild’ (det är det sista alternativet). Bläddra efter den andra bilden och klicka på öppna. Byt ut den tredje bilden också.

43 Skapa textrutor för information om tjänster och använd formatering för rubriker och stycken enligt nedan. Guiderna hjälper dig att rikta in dem korrekt.

För rubriker: Teckensnitt: Raleway Fet, Storlek=20, Färg: Svart, Vänsterjusterad och 100 % ledande.
För stycken: Teckensnitt: Questrial, Storlek=15, Färg: R=67 G=67 B=67, Vänsterjusterad och 120 % ledande.

44 Placera ytterligare tre bilder som vi gjorde i tidigare steg och skapa på samma sätt beskrivningstext för dem. Du bör ha följande resultat.

Slutresultat av avsnittet "Tjänster".

Skapa avsnittet "Varför oss".

45 Nästa är avsnittet "Varför oss". Den här är lite komplicerad. Var noga med att välja objekt. Skapa först en rektangel med 100 % bredd och H=996. Fyll den med en färg (R=47, G=48, B=55). Högerklicka på den här rektangeln > Ordna > välj "skicka bakåt" (inte skicka bakåt).

46 Utöka ditt arbetsområde genom att klicka och dra guiden ‘botten på sidan’ så att du har tillräckligt med utrymme för att skapa innehåll som kommer att placeras på den här rektangeln vi just skapade.

47 Scrolla ner till vitt tomt utrymme och gör ytterligare en rektangel av W=351 och H=351. Fyll den med vit färg och inget streck.

48 Gå till alternativet ‘hörnradie’ (det finns bredvid streck under applikationsmenyn). Klicka på alla hörn för att göra dem runda och lägg 500 i rutan bredvid.

49 Du kommer att ha en cirkel. Dra denna cirkel till rektangeln och justera den enligt följande. Bredvid hörnradien finns ett alternativ som heter ‘Opacitet’. Med cirkeln vald, lägg 14 i denna ruta.

50 Skapa en textruta och skriv in – varför vi (alla små). Ändra dess teckensnitt till Rammetto One, storlek=100, färg R=241 G=244 B=247, ledande 100 % och gör det mittjusterat. Placera den här textrutan inuti cirkeln och justera den ordentligt.

51 Nu ska vi skapa de streckade linjerna. Gör en rektangel av W=9 och H=9, ingen fyllning. Klicka på ordet ‘stroke’ bredvid fyll. Välj färg R=241 G=244 B=247. Klicka på kedjeikonen för att bryta den och sätta "1" i nedre slagvikt.

52 Kopiera denna rektangel med ena sidan och klistra in den flera gånger. Ordna dem på en rad (zooma in lite med zoomverktyget om du har svårt att se dessa rektanglar). När du har fått önskad längd på din streckade linje, välj alla dessa rektanglar, högerklicka och välj "Grupp". Kopiera och klistra in den här gruppen för andra streckade linjer.

53 För lutande streckade linjer, prova att sätta olika rotationsvinklar i transformationspanelen. Jag har använt 150 och 30 grader. Du måste ta bort några rektanglar från denna grupp för att få kortare längder. Justera dessa linjer nära cirkeln som visas nedan.

54 Nu ska vi lägga till lite mer text för siffror, rubriker och beskrivningar. Använd följande inställningar för var och en av dem och justera dessa textrutor som visas nedan.

För siffror: Font=Rammetto One, Färg: R=196 G=214 B=193, mittjusterad och 100 % ledande, storlek: 200 (för nummer ‘1’), 160 (för nummer ‘2’ och ‘3’) och 120 (för nummer ‘4’ och ‘5’).
För rubriker: Font=Raleway Fet, Storlek=18, Färg:Vit, Centerjusterad och 100 % ledande.
För stycken: Font=Questrial, Storlek=16, Färg: R=241 G=244 B=247, Centerjusterad och 120 % ledande.

Slutresultat av avsnittet "Varför oss".

Skapa avsnittet "Vitnesmål".

55 Återigen, skapa lite utrymme att arbeta genom att dra ner längst ned på sidguiden. Gör en rektangel med 100 % bredd och H=486.

56 Med rektangeln vald, klicka på ordet "Fyll" och klicka på "Lägg till bild" bredvid bildalternativet. Bläddra efter tegelväggsmönsterbild som vi laddade ner. Under alternativet Anpassning väljer du "Kakel" för att fylla hela rektangeln med denna textur.

57 Scrolla ner till tomt utrymme och gör en textruta med storleken W=406, H=289 med hjälp av transformpanelen. Skriv in – "vad andra har att säga" (alla små). Ändra dess teckensnitt till Rammetto One, storlek=70, gör det vänsterjusterat, färgvärdena R=37 G=37 B=37 och ledande=100%.

58 Med denna textruta markerad, klicka på ordet streck, använd höger streck med vikt ett och svart färg på det. Dra den här textrutan och lägg den över rektangeln med tegelväggsmönster.

59 Nästa steg är att lägga till rekommendationer från kunder. För detta kommer vi att använda vektorbilderna med runda ansikten som vi laddade ner från freepik.com. Återigen, kom ner till vitt tomt utrymme så att du kan anpassa din komposition ordentligt.

60 Gå till Widgets-biblioteket och dra ‘Blank’ från kompositionsdelen till arbetsytan. Klicka på plustecknet för att lägga till ytterligare tre utlösare. Välj försiktigt den första triggern och säkerställ ditt val med hjälp av aktuellt urvalsområde som säger trigger. Och precis bredvid finns det ett alternativ som heter "Aktiv". Klicka på detta för att expandera. Välj "Normalt" tillstånd och välj "ingen fyllning" och "ingen linje" för detta tillstånd. Upprepa detta för varje tillstånd som är Rollover, Mouse Down och Active. Gå till transformpanelen med den första triggern vald och sätt W=10, H=10.

61 Upprepa föregående steg för varje trigger vi har. Detta innebär att du inte använder någon fyllning och ingen linje för varje tillstånd och omvandlar utlösarna till storleken 10 x 10. Flytta avtryckarna närmare varandra.

62 Nu. Vi kommer att anpassa målen för var och en av dessa utlösare. Den stora rektangeln du ser är målet. Välj första utlösaren och välj dess normala tillstånd från tillståndspanelen. Därefter väljer du målet för denna utlösare och tillämpar ingen fyllning och ingen linje för varje tillstånd. Gå sedan till transformpanelen och gör målet W=360, H=370.

63 Upprepa föregående steg för varje mål. Se bara till att du först väljer utlösaren, gör det till normalt tillstånd, väljer sedan respektive mål med normalt tillstånd och applicerar sedan ingen fyllning och inget slag. Du behöver inte ändra storleken på varje mål. Gör det bara för en och det kommer att tillämpas på alla.

64 Nu börjar vi lägga till innehåll till den här kompositionen. Gå till Arkiv > Placera och öppna den första ansiktsbilden och placera den utanför kompositionen. Dra den här bilden och placera den i kompositionen nu. Du kommer att se att en blå cirkel visas i det övre högra hörnet som indikerar att den här bilden nu är en del av kompositionen.

65 Skapa tre textrutor – en för personens namn, en för hans/hennes beteckning och en för uttalandet eller recensionen. Använd formateringen enligt nedan och placera dessa textrutor i kompositionen. Se bara till att var och en av dem har en blå cirkel i hörnet.

För personens namn: Teckensnitt: Nobile Medium Kursiv, storlek=18, Färg: R=37 G=37 B=37, mittjusterad och 100 % inledande.
För beteckning: Teckensnitt: Nobile, storlek=15, Färg: R=37 G=37 B=37, mittjusterad och 100 % ledande.
För uttalanden (med inverterade kommatecken): Teckensnitt: PT Sans Italic, storlek=18, färg: R=69 G=64 B=68, mittjusterat och 100 % inledande.

66 Med ansiktsbilden vald, applicera viktdrag 4 på varje sida, färg: vit, runda alla hörn och öka radien tills den sveper runt bilden. Jag använder 100 som hörnradier.

67 Gå till ‘Effekter’ (finns bredvid alternativet för rundare hörn) och markera kryssrutan ‘skugga’. Sätt värdena som; Färg=svart, opacitet=37%, oskärpa=12, vinkel=78 och avstånd=5.

68 Upprepa de föregående stegen (från 64 till 67) för att lägga till innehåll till varje mål och spara ändringarna (Ctrl+S). Lägg denna komposition över rektangeln med tegelväggsmönster.

69 Välj nu hela kompositionen (se till med aktuellt urvalsområde) och utöka dess alternativ genom att klicka på den lilla blå cirkeln. Ställ in alternativen enligt nedan. Tryck på Ctrl+Skift+E och se om det fungerar bra.

70 Du bör få följande resultat.

Slutresultat av avsnittet "Vitnesmål".

Skapa avsnittet "Kontakta oss".

71 Nästa avsnitt är Kontakta oss. Vi lägger till en bakgrundsbild, ett formulär och några textrutor i det här avsnittet. Gör först en rektangel med 100 % bredd och H=692. Fyll den med en bild som vi laddade ner för det här avsnittet och välj "skala att fylla" under Anpassning. Ändra dess opacitet till 72 %.

72 Gör ytterligare en rektangel med samma bredd och höjd och fyll den med en gradient. Sätt gradientvärdena som; Opacitet=90% till 46%, Färg: Svart till R=69 G=64 B=68, Focal Point=66%, Riktning: Horisontell och Storlek: automatisk. Sätt den här rektangeln över bilden och se till att den snäpper fast med varje kant.

73 Gå till widgetbiblioteket. Under formulär, välj "enkel kontakt" och dra den på duken. Ett fönster med formuläralternativ dyker upp. Ange formulärets namn: Kontakta oss-formuläret, e-posta till: lägg din e-postadress där du vill ta emot information som besökarna har angett, Efter sändning: välj ‘håll dig på aktuell sida’. Det sista alternativet är ‘Redigera tillsammans’. Se till att det är markerat. På så sätt måste du bara göra ändringar i ett fält och de kommer att tillämpas på alla. Klicka var som helst på duken för att få alternativrutan att försvinna.

74 Välj formuläret. Klicka på etiketten "Namn" och klicka på den igen tills du ser "Etikett" skrivet i det aktuella urvalsområdet. Tryck på radera. Upprepa detta för e-post- och meddelandeetiketter och ta bort dem.

75 Välj formuläret igen och välj det första formulärfältet som säger ‘Ange namn’ tills du ser ‘Textinmatning’ i det aktuella urvalsområdet. Applicera ingen fyllning och bottensträcka (vikt en och färg vit) för varje tillstånd, det vill säga från Tom till Fokus. För feltillståndet, välj ingen fyllning och nedre streck med röd färg med vikt 1.

76 Efter det, med e-postfältet markerat > välj dess tomma tillstånd igen och anpassa texttypsnittet och färgen för varje tillstånd enligt nedan.

För tom, icke-tom och fokustillstånd: Teckensnitt: Questrial, storlek=14, färg: vit, vänsterjusterad, 100 % ledande och ingen kursiv stil.
För rollover-tillstånd: ändra bara textfärgen till R=196 G=196 B=196 och ingen kursiv stil.
För feltillstånd: ändra textfärgen till röd och utan kursiv stil.

77 Klicka och välj Skicka-knappen. Välj dess normala tillstånd, runda alla hörn med 40 radier och öka dess bredd som visas i skärmdumpen nedan. Ändra dess teckensnitt till Raleway Bold, storlek=20, mittjusterad, färg: R=241 G=244 B=247, ledande: justera texten "skicka" i mitten av knappen genom att öka detta värde (jag har använt 130%) .

78 Ändra streckfärgen och textfärgen till grått (R=127 G=127 B=127) för dess roll-over- och mus ned-tillstånd. Ändra slutligen streck och textfärg till himmelsblå (R=41 G=171 B=226) för att det ska skickas pågår.

79 När du väljer "skicka pågår" för den här inlämningsknappen, ser du att det finns en annan textruta som säger "skicka in formulär…". Markera den här rutan och välj dess status "Sändning pågår". Ändra teckensnittet till Questrial, storlek=14, färg: grå, mittjusterad och ingen kursiv. Välj dess "skicka framgång"-tillstånd och ändra textfärgen till himmelsblå (ingen kursiv stil). Välj dess "skicka fel"-läge och ändra textfärgen till röd (ingen kursiv stil). Kontaktformuläret är klart.

80 Gör två textrutor. Skriv in – kontakta oss och på den andra raden skriver du "alla fält är obligatoriska". För kontakttext, använd typsnittet: Rammetto One, storlek=60, färg: R=241 G=244 B=247, ledande=100% och vänsterjusterad. För "alla fält är obligatoriska" text, använd teckensnittet: Nobile kursiv, storlek=26, färg: R=241 G=244 B=247, ledande=100 % och vänsterjusterad. För denna textruta, använd nedre streck med vikt 1 och färg vit.

81 Skriv ett stycke i den andra textrutan som vi skapade. Använd teckensnitt: PT Sans Italic, storlek=14, färg: R=241 G=244 B=247, ledande=120 %, vänsterjusterad och blanksteg före=15.

82 Lägg dessa textrutor och formuläret på bilden som vi placerade. Justera dem enligt följande.

83 Skapa ytterligare en textruta för viss kontaktinformation som kontorsadress, e-post och telefonnummer. Sätt den här textrutan på bilden. Du bör ha följande resultat.

Slutresultat av avsnittet "Kontakta oss".

Skapar sidfot

84 Det sista avsnittet är sidfot. Det finns tre guider längst ner, nämligen – längst ner på sidan, sidfot och botten av webbläsaren. Vad du måste göra nu är att se till att guiden "botten på sidan" snäpper ihop med botten av kontakta oss-sektionen och att "sidfoten"-guiden sammanfaller med guiden "botten på sidan". Efter det kan du dra guiden längst ner i webbläsaren för att justera det utrymme du behöver för sidfoten.

85 Skapa två rektanglar med 100 % bredd och H=168 för den första och H=37 för den andra. Ändra fyllningsfärgen för stor rektangel till vit och använd R=47, G=48, B=55 för en kortare.

86 Välj den första rektangeln och försök placera den i sidfotsområdet. Det kommer inte att gå dit. Istället kommer guiden längst ner på sidan att börja expandera nedåt. För att göra denna rektangel till ett sidfotsobjekt, markera kryssrutan ‘Sidfot’ som finns längst upp till höger i programfönstret. Gör det för andra rektangeln också.

87 Placera nu dessa rektanglar i sidfotsområdet och se till att den stora rektangeln är något ovanför sidfotsguiden. Botten på färgad rektangel måste snäppa ihop med botten av webbläsarguiden. Annars ser du en liten vit lucka efter sidfoten som inte ser snygg ut.

88 Skapa textrutor för sidfot och skriv in vad du vill. Markera bara kryssrutan "sidfot" för textrutorna du ska lägga till. Jag har lagt till lite text som innehåller ansvarsfriskrivning och information om upphovsrätt.

89 Märket "Made with Adobe Muse CC" kan läggas till från widgetbiblioteket under social sektion. Du kan också lägga till länkar till din facebooksida, twitter, google+, LinkedIn, Pinterest, YouTube-kanal eller vimeo-länk.

90 Upphovsrättssymbolen och många andra symboler som du ser bredvid All rights reserved text kan läggas till från panelen "Glyfer" på höger sida av programfönstret. Om det inte finns, gå till Fönster-menyn > välj Tecken.

Skapar avsnittet "Nyhetsbrev".

91 Hittills har vi designat sektioner för alla menyalternativ utom en och det är "Nyhetsbrev". Låt oss göra något intressant med det. Kom ihåg korssymbolen vi laddade ner, den kommer att användas här (det är okej om du inte har laddat ner det, du kan fortfarande följa med). Välj först textrutan Nyhetsbrev och anteckna dess bredd och höjd från transformationspanelen. Min är 81×17.

92 Öppna nu widgetbiblioteket och dra ‘Lightbox Display’ från kompositionssektionen. Ta bort första två utlösare (finns längst upp) och ta bort alla bildtexter (finns längst ner). Gör storleken på den tredje utlösaren samma som nyhetsbrevstextrutan som är 81 x 17. Ändra dess fyllning och streck till ingen för alla stater.

93 Dra nyhetsbrevets textruta och placera den inuti denna utlösare på ett sådant sätt att alla kanter på textrutan sammanfaller med utlösarens kanter. Dra nu denna grupp och placera den igen i menyn där den placerades tidigare. Vad vi har gjort är att vi har använt en länk till nyhetsbrevets textruta. När användaren klickar på det kommer webbplatsen att tona ut och målet visas.

94 Nästa steg är att anpassa vårt mål. Välj det grå området och se till att det aktuella urvalsområdet säger "Target". Du måste klicka tre gånger för att välja den. Ändra fyllningen och strecket till ingen för alla dess tillstånd.

95 Lägg till två textrutor och ett enkelt kontaktformulär (ta bort namn- och meddelandefälten och behåll endast e-postfältet). Dra dem inuti den här kompositionen och se till att alla har en blå cirkel i hörnen.

96 Anpassa formuläret som vi gjorde under kontakta oss. Du bör ha följande resultat. För textfältet ‘Håll kontakten’, använd teckensnitt: Hummer, storlek=40, färg:vit, mittjusterad och 100 % inledande. För beskrivningstext under den, använd teckensnitt: Ubuntu Light Italic, storlek=14, färg: vit, mittjusterad och 120% ledande. Ändra texten på knappen Skicka till "Prenumerera".

97 Välj nu stängningsknappen, flytta den och placera den i det övre högra hörnet av denna ljusbordsskärm som visas nedan. Klicka inuti den tills du ser "Etikett" skriven i det aktuella urvalsområdet. Ta bort etiketten.

98 Ändra fyllning och slag för denna stängningsknapp till ingen för alla tillstånd och gör dess W=40 och H=40. Gå till Fyll > lägg till bild och bläddra efter korsbilden. Välj "skala för att passa" under passningsalternativ.

99 Klicka på Nyhetsbrev så ser du en blå cirkel i hörnet. Klicka på den och se till att alternativen är inställda enligt följande.

Slutresultat av avsnittet "Nyhetsbrev".

Skapa hyperlänkar

100 Den sista uppgiften som återstår är att lägga till länkar till varje avsnitt. För att göra detta, välj alternativet "länkankare" som finns längst upp i mitten eller tryck på bokstaven "a" på ditt tangentbord. Du kommer att se att markören ändrar sitt utseende till en platspistol laddad med ett länkankare.

101 När du klickar på arbetsytan för att placera denna, dyker en dialogruta upp som låter dig byta namn på ett ankare.

102 Skapa länkankare för varje sektion vi har designat, det vill säga Hem, Tjänster, Varför oss, Rekommendationer och Kontakta oss. Placera ankarna överst på varje sektion. Hemankare visas nedan som ett exempel. Att placera dessa ankare är ett viktigt steg och bör göras försiktigt. När användaren klickar på en viss länk rullar webbplatsen till den position där ankaret har placerats.

103 Nu ska vi tillämpa länkarna. För att göra detta, välj "Hem" textrutan. Gå till alternativet "Hyperlänkar" (högst upp), klicka på den lilla nedåtpilen för att utöka listan. Här kan du se alla ankare som vi just placerat. Länka den till "Hem"-ankare. Upprepa det här steget för andra textrutor utom Nyhetsbrev eftersom vi har använt en ljuslåda på det.

Slutresultat efter att ha skapat hyperlänkar

Sista handen – Ändra sidegenskaper och lägga till favicon

104 Inuti planläge, högerklicka på startsidan och välj ‘Sidegenskaper. En dialogruta kommer att dyka upp. Välj fliken "Alternativ" och under sidnamn, skriv – "Välkommen till exempel.com" och klicka på OK. Det här är texten som visas högst upp i webbläsarfönstret.

105 Gå till Arkiv > Webbplatsegenskaper. Under fliken Layout är det sista alternativet "Favicon". När du håller muspekaren över den visas en popup som beskriver vad en favicon är och vad den optimala storleken bör vara. Det är bra att lägga till en favoritikon eftersom det hjälper till att få ditt varumärke att sticka ut och tjänar även syftet att hjälpa användarna att enkelt identifiera din webbplats om de har bokmärkt den.

Testa och exportera

106 Testa din webbplats genom att gå till Arkiv > Förhandsgranska webbplats i webbläsaren eller Ctrl+Alt+E. Välj inte "Förhandsgranska sida i webbläsare" den här gången eftersom länkarna inte fungerar i förhandsgranskning av sidan. Du kanske vill prova att placera ankarna på olika ställen för att säkerställa att när användaren klickar på en länk, rullar sajten till höger avsnitt och rätt position.

107 Äntligen, gå till Arkiv > Exportera som HTML (Ctrl+E). Ange ett namn som "example.com" under webbplatsens URL och välj platsen. Klicka på OK. Hemsidan är klar.

Slutresultat på varje sida

Framsida

Avsnittet ‘Tjänster’

Avsnittet "Varför oss".

Avsnittet "Vitnesmål".

‘Kontakta oss’

Sidfot avsnitt

Avsnittet "Nyhetsbrev".

SLUTSATS

Jag är säker på att du har fått allt jag lovat att du kommer att göra efter att ha följt denna handledning. Detta är bara ett exempel. Lek lite med detta fantastiska verktyg och design fantastiska och professionella webbplatser samtidigt som du utforskar oändliga kreativa möjligheter på vägen. Tack.