Hvordan designe en fantastisk landingsside for et porteføljenettsted med Adobe Muse
Listen over gjøre og ikke gjøre for et porteføljenettsted er uendelig. Men ut av disse listene har jeg funnet to ting til felles – å unngå å fylle en enkelt side med alt og holde landingssiden og navigasjonen så enkel, attraktiv og lett tilgjengelig som mulig.
Det er det du lærer med denne opplæringen. Bortsett fra dette vil du:
- Lær hvordan du optimaliserer grafikk for et Muse-nettsted ved hjelp av Adobe Illustrator (nødvendig for å få nettstedets innhold til å lastes raskere)
- Kunne vise innhold i perspektiv ved hjelp av Photoshop.
- Vet hvordan du designer en profesjonell landingsside med Adobe Muse.
KRAV TIL DENNE TUTORIALEN:
For å forstå og lage nøyaktig det som vises i denne opplæringen, må du laste ned visse eiendeler fra forskjellige gratis ressurser. Men du kan fortsatt følge med uten disse.
-
Gå til https://goo.gl/KVL9r1 og last ned dette bildet for overskriften. Dimensjonene må være 1400 x 750 piksler. Her er et skjermbilde fra siden. Legg denne størrelsen i bokser med tilpasset størrelse og last den ned.
-
Gå til http://goo.gl/ZeHxOF og http://goo.gl/BASRSP og last ned ikonpakke for sosiale medier og pil ned.
-
Logoer brukt i denne opplæringen kan lastes ned her (hyperlink – ‘assets.rar’-filen er vedlagt e-posten)
-
Gå til http://goo.gl/mzw1Xh og last ned denne iMac 27-tommers skjermvektor som vil bli brukt til å vise ‘nettsteddesign’-prosjektet.
-
Åpne kreativ sky-skrivebordsapplikasjon og last ned iPhone- og iPad mini-modeller som vist nedenfor. De legges automatisk til i Photoshop-biblioteket ditt.
![]()
TRINN #1: HVORDAN OPTIMERER DU GRAFIKK FOR NETT I ADOBE ILLUSTRATOR:
1. Åpne «eps»-filen for sosiale ikoner i illustrator. Velg facebook-ikonet (kvadratisk versjon) og trykk Ctrl+Shift+G for å fjerne grupperingen av disse ikonene.
2. Klikk utenfor lerretet og velg facebook-ikonet igjen. Gå deretter til transformasjonspanelet øverst og legg inn W=19.5, H=19.5 og trykk enter.
3. Trykk Ctrl+C og deretter Ctrl+N. I denne nye dokumentdialogboksen, sett ‘static_facebook_icon’ under Navn-feltet, W=20 og H=20. Sørg for at piksler er valgt fra rullegardinlisten for enheter. Klikk OK.
4. Trykk Ctrl+V for å lime inn facebook-ikonet og justere det riktig.
5. Gå til Fil > velg "lagre for web" (Alt+Shift+Ctrl+S). Velg PNG-24 fra rullegardinlisten øverst til høyre. Klikk lagre og lagre det på ønsket sted. Lagre også illustratørfilen (Ctrl+S)
6. Gjenta trinn 2 til 5 for twitter, google plus, LinkedIn og Behance-ikoner og lagre dem for nett.
MERK: Vi har valgt png-format fordi de har stor gjennomsiktighet, relativt lavere størrelse og er best for ikoner og vektorer.
7. På samme måte, optimaliser disse fem ikonene for overskriftsbilde. Denne gangen endrer du fargen til hvit. For å gjøre dette, velg ikonet, gå til rullegardinmenyen Fyll øverst til venstre under applikasjonsmenyen, velg hvit farge og lagre for nett. Nå har du 10 ikoner – 5 grå og 5 hvite.
8. Deretter optimaliserer du pil ned-ikonet (farge: hvit, dokument B= 30px, H=20px) og lagrer det for web som PNG-24.
9. Lag nå et nytt dokument med størrelsen 1400 x 750 piksler og navngi det som header_image. Klikk OK.
10. Gå til Fil > Plasser og søk etter bildet som vi lastet ned fra pexels.com. Klikk på lerretet for å plassere det og justere det inne i lerretet.
TIPS: Trykk ‘Z’ på tastaturet, hold nede alt-tasten og klikk på lerretet et par ganger for å zoome ut litt slik at alt er synlig på en gang.
11. Velg rektangelverktøy fra verktøyboksen på venstre side av programvinduet. Lag et rektangel og transformer det til W=1400, H=750px. Deretter drar du dette rektangelet til det plasserte bildet.
12. Med dette rektangelet valgt, gå til rullegardinmenyen fyll, velg fargeprøvebibliotek-menyen nederst i venstre hjørne. I denne listen, gå til ‘Gradienter’ og velg ‘Jordtoner’.
13. Velg earthtone 30 som angitt i skjermbildet nedenfor og lukk dette panelet.
14. Mens rektangelet fortsatt er valgt, gå til gradient-fanen på høyre side av programvinduet. Hvis den ikke er der, trykk Ctrl+F9. Klikk, hold og dra glidebryteren for midtre gradient helt til venstre.
15. Deretter, inne i ‘Opacity’-feltet (plassert øverst), legger du inn 87 % og trykker på enter.
16. Lagre dette bildet for nettet. Denne gangen velger du JPEG og kvalitet=86 %. Lagre også illustratørfilen.
TRINN #2: KLARGJØRING AV EIENDELER I PHOTOSHOP:
17. Åpne Adobe Photoshop CC. Gå til Fil > velg "Ny". Sett navnet som ‘ecommerce_design’, B=619px og H=310px.
18. Fra biblioteker-panelet (plassert på høyre side), velg ipad mini mockup som vi lastet ned og dra den til lerretet.
19. Hold nede shift-tasten og øk størrelsen ved å dra i hjørnene og justere den inne i lerretet som vist nedenfor.
MERK: Det kan være lurt å bruke zoomverktøyet. For å bytte mellom zoom- og markeringsverktøy, trykk ‘Z’ og ‘V’-tastene på tastaturet. Dessuten, hvis du ikke finner bibliotekpanelet (eller noe annet panel), bare gå til Vindu-menyen > velg Biblioteker.
20. Velg rektangelverktøy og lag et rektangel av hvilken som helst størrelse inne i lerretet (ikke bekymre deg for fyllfargen). En egenskapsboks vises. Inni denne, legg inn W=1024px og H=768px og sørg for at kjedeikonet ikke er valgt.
21. Klikk nå på kjedeikonet for å velge det. Sett inn W=290px og trykk enter. Skjul dette egenskapspanelet.
22. Under Lag-panelet på høyre side, velg ‘Rectabgle 1’, høyreklikk på det og velg ‘konverter til smart objekt’.
23. Gå deretter til redigeringsmenyen > velg ‘Free transform’. Igjen, åpne redigeringsmenyen > transformer > velg ‘forvreng’.
24. Hold det ene hjørnet av rektangelet og få det til å falle sammen med det ene hjørnet av ipad-skjermen. Gjør dette for alle fire hjørnene og trykk enter. Du får følgende resultat. Bruk zoomverktøyet om nødvendig.
25. Under Lag-panelet høyreklikker du bakgrunnslaget og sletter det. Gjør også "rektangel 1"-laget usynlig ved å klikke på det lille øyeikonet til venstre.
26. Gjenta trinn 18 til 22 for å lage enda et rektangel, konverter det til et smart objekt og få det til å falle sammen med hjørnene på ipad-skjermen og trykk enter.
27. Gjør "rektangel 1"-laget synlig og "ipad"-laget usynlig.
28. Høyreklikk på "rektangel 1"-laget og velg "rediger innhold". Den åpnes i en ny fane. Gå til Fil > Plasser innebygd, bla etter ‘screen1.webp’ som du finner i Logos-mappen du lastet ned. Klikk på plass og trykk enter. Trykk Ctrl+S. Denne endringen vil bli oppdatert på rektangel 1 i hovedfilen vår. Lukk denne fanen.
29. På samme måte gjør du dette for rektangel 2 med ‘screen2.webp’ og lagrer det. Flytt lagene opp eller ned i lagpanelet i henhold til dine preferanser. Slett ipad-laget.
30. Høyreklikk på et rektangellag og velg "blandingsalternativer". En lagstilboks vises. Velg det siste alternativet som er ‘drop shadow’ og legg inn verdiene som vist nedenfor.
31. I denne dialogboksen, rett ved siden av blandingsmodus, er det en fargeboks. Klikk på den og velg følgende fargeverdier.
32. Påfør samme skyggeeffekt på det andre laget også. Trykk Alt+Ctrl+Shift+S. Velg PNG-24 og klikk lagre. Du får følgende resultat.
MERK: Slik kan du plassere et nettsted eller et hvilket som helst bilde i perspektiv. Du trenger bare å vite nøyaktig oppløsning på enheten du skal plassere den på. Gjør det for iphone- og imac-modeller for å vise ‘logodesign’- og ‘websidedesign’-prosjekter som vist nedenfor.
TRINN #3: OPPSETT ARBEIDSPLASS I MUSE:
33. Åpne Adobe Muse CC. Du vil bli møtt med en velkomstskjerm. Under "Opprett ny" klikker du på nettsted og en ny sidedialogboks vises.
MERK: En annen måte å opprette et nytt nettsted på er ved å gå til Fil > Nytt nettsted eller Ctrl+N.
34. I denne dialogboksen er det en rullegardinmeny som sier ‘fluid width’. Åpne dette ved å klikke på det og velg ‘Fast bredde’ og endre verdiene for sidebredde og kolonner som vist nedenfor. ‘Gutter’-feltets verdi vil endres automatisk.
35. Utvid alternativet for avanserte innstillinger og sørg for at avkrysningsboksen "klebende bunntekst" er valgt. Sørg også for at nettstedet er "senterjustert" innenfor nettleserområdet. Klikk OK. Muse tar deg til PLAN-modus.
36. Trykk Ctrl+S og lagre siden på ønsket sted. Jeg anbefaler deg å opprette en egen mappe for nettstedet ditt og lagre den hver gang du gjør en endring.
MERK: Flytende bredde er for å lage responsiv layout. Vi har valgt fast bredde fordi vi skal lage en rulleeffekt som ikke fungerer med flytende nettsteder.
37. Dobbeltklikk ‘A-master’ nederst i et grått område. Velg ‘tekstverktøy’ fra verktøyboksen på venstre side av programvinduet.
38. Lag en tekstboks på lerretet. Trykk Ctrl+T for å åpne tekstpanelet og under rullegardinmenyen fonter, se etter nettfonter og velg «legg til nettfonter».
39. Et nytt vindu vises. Velg ‘edge web fonts’-fanen, søk etter og last ned følgende fonter én etter én:
- Monotone
- Telex
- Tall
- Raleway
- Side
- Problemer
Etter å ha lastet ned disse skriftene, slett tekstboksen.
40. Åpne ‘Lag’-panelet på høyre side eller gå til Vindu-menyen > velg ‘lag’. Klikk på det lille brettede papirikonet nederst til høyre. Klikk den to ganger for å lage to lag til.
41. Dobbeltklikk ‘lag 1’. Vinduet med lagalternativer vil dukke opp. Under navn legger du inn ‘home_header’ og klikker OK. Gjenta denne prosessen for de to andre lagene og navngi dem som henholdsvis ‘static_header’ og ‘content’.
42. Ordne lagene i en rekkefølge vist nedenfor ved å dra dem opp eller ned og lagre endringene.
MERK: Vi har lagt lagene i denne rekkefølgen fordi vi vil at overskriften vår skal være på toppen av alt annet. Lag er en effektiv måte å organisere og stable nettstedinnholdet på, spesielt når oppsettet blir komplekst.
43. Velg "static_header"-laget og skjul dette panelet.
TRINN #4: ETABLERING AV STATISK OVERSKRIFT:
44. Øverst på siden ser du to guider. Den første er ‘øverst på siden’-guide og den andre er ‘header-guide’. Klikk, hold og dra overskriftsguiden nedenfor og sett den til 80 piksler. Du kan gjøre dette ved hjelp av linjaler. Dette er vårt overskriftsområde.
45. Velg rektangelverktøy eller trykk ‘M’ på tastaturet. Lag et lite rektangel på lerretet og sørg for at kantfargen er ‘rød’ som indikerer at dette objektet er inne i ‘static_header’-laget.
46. Gå til ‘Endre størrelse’ (eller ‘Transformer’ i eldre versjoner av Muse) øverst til høyre, klikk på den og sett inn H=80.
47. Dra dette rektangelet og plasser det innenfor overskriftsområdet på en slik måte at det klikker med "toppen på siden" og "overskrifts"-hjelpelinjer.
48. Nå vil vi øke bredden på rektangelet og gjøre det 100 % for å gjøre det skalerbart for hver skjermstørrelse. Utvid rektangelet til begge kantene og sørg for at det klikker med sidekantene. Når du kommer til kanten, vil en oransje farget guide vises som indikerer at objektet er knipset og en melding vil si W=100 % eller W=1400.
49. Med rektangelet valgt, klikk på Fyll-rullegardinmenyen under programmenyen og velg hvit farge.
50. Klikk på ordet ‘strøk’ ved siden av fyll. Klikk på kjedeikonet for å bryte det og legg inn ‘1’ i det nederste slagvektfeltet.
51. Deretter klikker du på rullegardinmenyen for strekfarge, setter verdiene for R, G og B som 235 hver. Klikk deretter på papirikonet for den brettede kanten for å lage en ny fargeprøve. En boks for fargeprøvealternativer vises. Klikk OK og lagre endringene.
52. Gå til Fil > Plasser. Bla etter ‘static_logo.webp’ og klikk åpen. Markøren vil endre utseendet til en plasspistol lastet med et bilde. Klikk på lerretet for å plassere det.
53. Flytt deretter dette bildet til topptekstrektangelet og juster det til dets vertikale sentrum (en blå linje vil indikere når det er sentrert) og fest det til venstre kant som vist nedenfor.
54. Igjen, gå til Fil > sted og velg alle de statiske sosiale medieikonene som vi optimaliserte ved hjelp av Illustrator. Klikk Åpne. Du vil se at plasspistolen vil ha et nummer (5) som indikerer fem lastede bilder. Hvis du vil bytte til et annet ikon for å plassere det først, kan du bruke piltastene på tastaturet. Plasser dem én etter én.
55. Velg alle ikonene og gå til ‘Align’-panelet ved siden av Endre størrelse øverst til høyre. Under ‘Juster til’-rullegardinmenyen velger du ‘juster til nøkkelobjekt’.
56. Sett deretter 11 i feltet gitt under alternativet ‘Fordel mellomrom’. Klikk på alternativene ‘A’ og ‘B’ som vist på skjermbildet nedenfor.
57. Med disse ikonene valgt, høyreklikk og velg ‘gruppe’ eller Ctrl+G. Flytt denne gruppen til overskriftsrektangelet og fest den til høyre kant på linje med logoen som vist nedenfor.
58. Lag en tekstboks og skriv HJEM i den. Trykk Ctrl+T og velg Skrift: Telex, Størrelse: 13, farge: svart, midtstilt og 120 % foran. Juster bredden og høyden på denne tekstboksen i henhold til skriftstørrelsen.
59. Lag på samme måte ytterligere fire tekstbokser for ARBEID, TJENESTER, KONTAKT og OM. Velg alle, gå til align panel og gjenta det vi gjorde med sosiale medier-ikoner. Denne gangen endrer du fordelingsavstanden til 50. Grupper og flytt dem til topprektangelet som vist nedenfor.
60. Nå vil vi feste disse objektene til toppen av nettleseren som vil gjøre overskriften vår statisk. Betyr at den alltid vil vises øverst i nettleseren uavhengig av rulling. For å gjøre dette, velg overskriftsrektangel, gå til "Pin" øverst til høyre og klikk inne i den øverste midterste firkanten som vist nedenfor.
61. På samme måte fester du logoen øverst til venstre, menygruppen øverst i midten og gruppen med sosiale ikoner øverst til høyre. Vår statiske header er klar.
TRINN #5: ETABLERING AV bunntekst:
62. Du vil se tre guider nederst, nemlig – bunntekst, bunnen av siden og bunnen av nettleseren. Klikk, hold og dra "bunnen av nettleseren" og sett den til 770 piksler ved hjelp av linjaler. Dra deretter ‘bunntekst’-guiden og fest den til ‘bunnen av siden’-guiden. Dette er bunntekstområdet vårt.
63. Lag et rektangel inne i dette området med H=270 og W=546, få topp- og bunnsidene til å falle sammen med henholdsvis bunntekst og bunn av nettleserguidene.
64. Med dette rektangelet valgt klikker du på ordet ‘strøk’ og bruker bare den øverste streken med vekt ‘1’ (strekfargeverdier: R=235 G=235 B=235). Gå til "align"-panelet og under juster objekter, velg "juster horisontale sentre" (det er det andre alternativet).
65. Plasser static_logo.webp og legg til tekst inne i dette rektangelet som vist nedenfor. (Tekstfont: Arimo, Størrelse: 14, Farge: R=37 G=37 B=37, Senterjustert og 120 % foran).
66. Opphavsrettssymbolet du ser før 2016 kan legges til fra "Glyfer"-panelet på høyre side av programvinduet. Hvis den ikke er der, gå til Vindu > Tegntegn. Bunnteksten vår er klar.
TRINN #6: LAGE HJEMMESIDEOVERSKRIFT OG RULLEEFFEKT:
67. Lukk mastersiden og gå tilbake til planmodus.
68. Åpne ‘Hjem’-siden ved å dobbeltklikke på den. Åpne lagpanelet, velg "home_header"-laget og skjul panelet.
69. Gjør litt plass her ved å dra ned bunntekstlaget til 4000 piksler ved hjelp av linjaler.
70. Lag nå et rektangel med 100 % bredde. Full bredde, som vi gjorde tidligere, kan oppnås ved å utvide rektangelet fra venstre og høyre kant og feste det til begge sider av siden.
71. Utvid rektangelet oppover ved å dra den øverste kanten og fest det til toppen av sideguiden som vist nedenfor.
72. Gå til endre størrelse på panelet, legg inn H=750px.
73. Med rektangelet valgt, klikk på ordet "Fyll" (ikke fargerullegardinmenyen) og klikk "legg til bilde". Bla etter ‘header_image.webp’ som vi lastet ned fra Pexels og optimaliserte i Illustrator. Under ’tilpasning’-rullegardinmenyen, velg ‘skala for å fylle’ og plasser den øverst i venstre hjørne.
74. I denne "Fyll"-alternativboksen, ved siden av fyll, er det et alternativ kalt "Rull". Klikk på den og sett 0 i innledende og siste bevegelsesfelt. Dette betyr at bildet vil forbli stille og innholdet vil bevege seg og skape en fin og visuelt tiltalende rulleeffekt.
75. Lag en tekstboks og skriv ‘OM VÅRT TEAM’ i den. Skrift: Telex, Størrelse: 13, Venstrejustert, farge: hvit og ledende: 120 %. Flytt den og plasser den i øverste venstre hjørne av bildet som følger.
76. Plasser alle sosiale ikoner vi optimaliserte for toppbildet vårt. Juster dem med lik avstand som vi gjorde for statisk overskrift. Grupper og plasser dem i øverste høyre hjørne av bildet som følger.
77. Lag en tekstboks. Den skal ha W=944, H=92. Skriv ‘WE DESIGN THE WEB’ i den. Skrift: Monoton, Størrelse: 72, Senterjustert, 120 % foran. Endre fargen på ordet ‘WEB’ til R=41 G=171 B=226 og hvit for resten.
78. Lag tre små tekstbokser til for TJENESTER, KONTAKT og BLOGG. Skrift: Telex, Størrelse: 13, Farge Hvit, senterjustert og 120 % foran.
79. Plasser ‘header_logo.webp’-bildet. Juster logoen og disse fire tekstboksene som følger.
80. Gå til ‘Widgets’-biblioteket på høyre side. Utvid ‘Knapper’-delen. Velg ‘State-knapp’ og dra den inn på lerretet. Lukk widgetpanelet.
81. Velg forsiktig den lille sirkelen inne i denne knappen og trykk på slett.
82. Dobbeltklikk inne i Lorem Ipsum-tekstboksen, velg hele teksten, slett den og skriv inn ‘PORTFOLIO’.
83. Velg markeringsverktøyet (pilverktøyet) fra verktøyboksen. Gå til tekstpanelet (Ctrl+T) og endre formateringen av ‘portefølje’-tekst som følger.
84. Velg nå tilstandsknappen og endre størrelsen til W=177, H=43. Juster tekstboksen riktig inne i knappen.
85. Velg knappen. Gå til ‘hjørneradius’-alternativet (plassert ved siden av strøk). Klikk på alle de fire hjørnene for å gjøre dem flate.
86. Med knappen valgt, se øverst i venstre hjørne, under programmenyen. Du vil legge merke til at "tilstandsknapp" er skrevet med fete bokstaver. Dette er kjent som "nåværende utvalgsområde". Den lar deg vite hva du har valgt.
87. Rett ved siden av er ‘Normal’. Klikk på den og du vil ha fire tilstander.
88. For normal tilstand, endre fyllfarge til ‘ingen’ og strekfarge til hvit.
89. Velg ‘rollover’-tilstand, endre både fyll- og strekfarge til R=41 G=171 B=226.
90. For "mus ned" og "aktiv" tilstand, vil nødvendige endringer bli brukt automatisk.
91. Velg normal tilstand igjen, utvid ‘Transition’-panelet nederst. Velg avmerkingsboksen som sier ‘Fade’ og legg inn verdiene som vist nedenfor. Lagre endringene.
92. Plasser ‘down_arrow.webp’-bildet under knappen. Du bør ha følgende resultat.
93. Hjemmeheaderen vår er klar. Gå til Fil > Forhåndsvisningsside i nettleseren (Ctrl+Shift+E) og se om alt fungerer som det skal.
TRINN #7: LEGG TIL INNHOLD:
94. Gå tilbake til Muse, åpne lagpanelet, velg "innhold"-laget og skjul panelet.
95. Rull ned til mellomrom nedenfor og lag en tekstboks med W=464, H=60. Skriv inn ‘VÅRT NYLIGE VERK’ i den. Skrift: Raleway light, størrelse: 46, farge: svart, senterjustert og 120 % foran. Velg nå ordet "RECENT" og endre skrifttypen til "Raleway Bold".
96. Lag to tekstbokser til. En med W=376, H=165 og en annen med W=376, H=363.
97. Dobbeltklikk inne i den første og skriv ‘WEBSITE DESIGN’. Font: Raleway Extra Light, størrelse: 77, farge: svart, venstrejustert, 100 % foran.
98. Dobbeltklikk inne i den andre og lim inn litt dummy-tekst fra lipsum.com som følger.
- For hovedoverskrift – Font: Lato fet, størrelse: 30, farge: R=33 G=42 B=52, venstrejustert og 120 % foran.
- For hovedavsnitt – Skrift: Lato-lys, størrelse: 21, farge: R=57 G=57 B=57, venstrejustert og 120 % foran.
- For "Kundens anbefaling"-overskrift – samme som hovedoverskriften, men størrelsen er 21.
- For attesteringsavsnitt – samme som hovedavsnittet, men skriften er ‘Lato Light Italic’
99. Velg ‘portefølje’-statusknapp, kopier og lim den inn under tekstboksen vi opprettet i forrige trinn. Endre teksten fra portefølje til "VIS NETTSTED"
- For normal tilstand – Fyll: ingen, strek og tekstfarge: svart.
- For rollover-tilstand – Fyll- og strekfarge: R=41 G=171 B=226 og tekstfarge: hvit.
100. Plasser ‘imac with website mockup’-bilde. Ordne bildet, tekstboksene og knappene som følger.
101. Rull ned til mellomrom og lag et rektangel på W=1200, H=5. Påfør toppstreken med vekt ‘1’ og farge R=235 G=235 B=235. Plasser den som følger. Dette vil fungere som en separator.
102. Kopier tekstboksene og knappene vi opprettet i trinn 92 til 95, lim dem inn under skilletegnet. Endre teksten i den første boksen til ‘LOGODESIGN’ og knappteksten til ‘VIS LIVE’.
103. Plasser ‘iphone with logo mockup’ og ordne dem som følger.
104. Kopier og lim inn skilletegnet etter dette.
105. På samme måte kopierer og limer du inn tekstboksene og knappen under denne skillelinjen. Endre teksten i den første boksen til ‘E-HANDEL’.
106. Plasser ‘ecommerce_design.webp’ som vi opprettet og optimaliserte i trinn 15 til 30 med Photoshop. Ordne alt som følger.
107. Lag nå et rektangel på W=1004, H=363 uten fyll og toppstrek med vekt ‘1’ og farge: R,G,B=235 hver.
108. Lag to tekstbokser inne i dette rektangelet. I den første skriver du – ‘HVA VI TROR ER’ (Skrift: Raleway light, størrelse: 35, farge: R,G,B=37 hver, midtstilt og 100 % foran). Velg ordet ‘BELIEVE’ og endre skriftene til ‘Raleway bold’.
109. I den andre tekstboksen skriver du inn det berømte sitatet av Milton Glaser som vist nedenfor (Skrift: Lato Light Italic, størrelse:70, farge: R,G,B=37 hver, midtstilt og 120 % foran.
110. Kopier og lim inn hvilken som helst av tilstandsknappene ovenfor og endre teksten til "SE VÅRT ARBEID". Ordne alt som følger.
TRINN #8: TILKNYTNING:
111. Fra verktøykassen, velg ‘link anchor’ eller trykk ‘A’ på tastaturet. Markøren vil endre utseende til en plasspistol lastet med et anker. Plasser dette ankeret over tekstboksen "VÅRT NYLIGE ARBEID" som vist nedenfor.
112. En dialogboks med ankeralternativer vil dukke opp. Inne i navnefeltet legger du inn ‘recent_work’.
113. Velg ned_pil-bildeplassering under porteføljeknappen. Gå til ‘Hyperkoblinger’-rullegardinmenyen øverst og velg ‘recent_work’. Lagre endringene og forhåndsvis nettstedet (Ctrl+Shift+E).
TRINN #9: LEGG TIL ALTERNATIV TEKST, METADATA, NIVÅTAGGER OG FAVICON:
114. Alternativ tekst er en måte å få søkemotorer til å forstå betydningen av stoffet i et bilde og må gis til hvert enkelt bilde du legger til nettstedet ditt. For å gjøre dette, høyreklikk på et av de tre bildene vi har plassert og velg "rediger bildeegenskaper".
115. En dialogboks med bildeegenskaper vil dukke opp. Du vil se to felt her. Den ene er ‘verktøytips’ og den andre er ‘alt tekst’. Grunnleggende forskjeller mellom de to er som følger:
| VERKTØYTIPS | ALL TEKST |
|
|
MERK: Du bør søke på nettet etter metoder og viktige hensyn for å legge til alt-tekst og metadata, siden de er kardinalaspekter for bedre SEO.
116. For å legge til metadata, gå tilbake til planvisning, høyreklikk på hjemmesiden og velg ‘sideegenskaper’. Et nytt vindu vil dukke opp som inneholder tre faner, nemlig layout, metadata og alternativer. Bytt mellom disse fanene, utforsk alternativene og legg til relevante søkeord.
117. En annen viktig faktor å vurdere før du tar nettstedet på nett, er å endre noen tekstegenskaper for å legge til nivåkoder.
MERK: Normalt, når du legger til skriftlig innhold på en nettside, gjør du overskriftene fete og større enn avsnittene (eller annen tekst) for å illustrere forskjellen mellom dem. Vi som mennesker kan gjenkjenne denne forskjellen. Men problemet er at nettleseren ikke forstår hvilken del av teksten som er overskriften og hvilken som er avsnittet, med mindre du tilordner utpekte nivåkoder til hver av disse.
Sikkert vil den presentere siden din på nettet slik du designet den enten du har brukt taggene eller ikke (på grunn av CSS), men for å lage et SEO-vennlig nettsted, er det nødvendig å bruke disse beskrivende kodene.
118. For å gjøre dette, velg teksten, gå til tekstpanelet (Ctrl+T) og nederst vil du se en rullegardin som inneholder alle taggene. Velg dem deretter og lagre endringene.
119. Gå til Fil > Områdeegenskaper. Under innholdsfanen er det siste alternativet ‘Favicon’ (i eldre versjoner av Muse er det under fanen Layout). Når du holder markøren over ordet ‘Favicon’, vises et verktøytips som beskriver hva det er og hva som bør være dets passende dimensjoner. Det er fordelaktig å legge til et favorittikon da det sørger for å få merkevaren din til å skille seg ut og for å gjøre nettstedet ditt lett identifiserbart hvis brukerne har bokmerket det.
TRINN #10: EKSPORTERING AV NETTSTEDET:
120. Gå til slutt til Fil > Eksporter som HTML (Ctrl+E). Under URL-feltet for nettstedet legger du inn www.squaremaze.com og velger stedet du vil at nettstedet skal eksporteres til. Klikk OK. Landingssiden vår er nå klar. Du kan forhåndsvise den (‘index.html’-fil) i hvilken som helst nettleser du vil og teste utseendet og ytelsen.
ENDELIG RESULTAT:
KONKLUSJON
Å bruke andre programmer som Illustrator, Photoshop, Fireworks, Fuse og Animate for å lage kvalitetsressurser for et Muse-nettsted har alltid vist seg gunstig og har gitt eksepsjonelle resultater. Dette var bare én tilnærming til å designe med dette fantastiske verktøyet. Gå videre og utforsk mer. Takk skal du ha.