Adobe Muse on võimas tööriist, mis on muutnud veebikujunduse üllatavalt lihtsamaks ja huvitavaks. Erinevalt teistest pukseerimisrakendustest on professionaalsete veebisaitide loomine lihtsam koodi puudumise tõttu ja kujunduse üle täielik kontroll on huvitav.

Selle WYSIWYG-rakenduse (What You See Is What You Get) üks muljetavaldavamaid funktsioone on see, et see pakub sobivat töövoogu disaineri abistamiseks veebisaidi samm-sammult arendamisel.

Pärast selle õpetuse lõpetamist teete järgmist.

Teil on selge arusaam kõigist Muse’i tehnilistest ja disainiaspektidest.
Tea, kuidas professionaalselt kujundada vähema ajaga.
Teave tasuta ressursside kohta, kust leiate oma veebisaidi jaoks vapustavat graafikat.
Looge kiiresti täielikult toimiv üheleheline veebisait.

Selle õpetuse nõuded

Selle saidi loomiseks peate alla laadima teatud pildid, vektorid ja fondid. Kuid saate siiski jälgida ilma nende varadeta. Sisu õigeks korraldamiseks looge oma saidile eraldi kaust.

Minge saidile pexels.com ja laadige alla:
- 4 pilti suurusega 1160 x 480 slaidiseansi jaoks. Siin on ekraanipilt pexelitest. Selle suuruse saate sisestada sellel veebisaidil kohandatud suuruse kasti.
- 6 pilti suurusega 271 x 208 teenuste jaotises.
- 1 pilt suurusega 1160 x 692 jaotises „Võtke meiega ühendust".
Minge saidile freepik.com ja laadige alla:
- Üks ristiikoon (saate seda ikooni illustraatoris redigeerida või lihtsalt laadida png-faili Fepikist).
- 6 näokujutist jaotise „Iseloomustused” jaoks.
Minge saidile subtlepatterns.com ja laadige alla jaotise Tunnistuste jaoks telliskivimüüri muster.
Selle õpetusega jätkates räägin teile, kuidas vajalikke fonte alla laadida (seda saab teha Muse’is).
Kasutage näivteksti saidilt lipsum.com.

ALUSTAME!

Tööruumi ettevalmistamine ja päise seadistamine

1 Looge uus sait, valides Fail > Uus sait (Ctrl+N) ja sisestage väärtused, nagu allpool näidatud. Ärge unustage märkida märkeruutu "Kleepjalus". Klõpsake nuppu OK ja teil on PLAN-režiim. Topeltklõpsake A-Master, mis asub allosas hallil alal. Loote kõik sellel põhilehel.

2 Valige rakenduse akna vasakus servas asuvast tööriistakastist tekstitööriist. Tekstikasti loomiseks klõpsake ja lohistage lõuendil või lehel. Minge tekstipaneelile (Ctrl+T), otsige fontide rippmenüüst üles Web Fonts ja valige "Lisa veebifonte" ning laadige alla järgmised fondid:

Rametto Üks
Tükk
Küsitav
Raleway
Üllas
PT Ilma
Ubuntu
Homaar

Pärast nende fontide allalaadimist kustutage see tekstikast.

3 Minge rakenduse akna paremas servas asuvale paneelile Kihid. Kui seda seal pole, avage menüü Aken > Kihid. Näete seal kihti nimega Layer 1 (sinine värv). See on vaikekiht ja kõik, mille loote või lõuendile asetate, läheb sinna. Topeltklõpsake seda kihti ja nimetage see "Päiseks".

4 Klõpsake kihtide paneeli sees paremas alanurgas asuvat väikese volditud servaga paberiikooni. Sellel klõpsates luuakse uus punase värviga kiht. Jällegi topeltklõpsake sellel kihil ja nimetage see ümber "Sisu".

5 Klõpsake ja lohistage seda sisukihti ning asetage see päisekihi alla. Oleme seda teinud, sest tahame, et meie päis oleks kõige tipus.

6 Valige päisekiht ja ahendage kihtide paneel.

7 Valige tööriistakastist ristküliku tööriist või vajutage klaviatuuril klahvi "m".

8 Joonistage lõuendile väike ristkülik ja veenduge, et selle äärise värv on sinine, mis näitab, et see objekt on päisekihi sees.

9 Minge rakenduse akna paremas ülanurgas asuvale teisenduspaneelile. Jätke laius (W) ja sisestage 50 kõrguse (H) välja ja vajutage sisestusklahvi. (Ärge muretsege X- ja Y-väärtuste pärast.)

10 Lehe ülaosas näete kahte sinist rida (näidatud alloleval ekraanipildil). Neid nimetatakse "juhenditeks". Kui hõljutate kursorit esimese juhendi kohal, kuvatakse see „Lehe ülaosas, lohistage lehe kohal oleva polsterduse reguleerimiseks” ja teine „Päis, lohista asukoha reguleerimiseks”. Nende juhendite seadistamine alguses on väga oluline.

11 Nüüd, kui oleme loonud ristküliku H=50, klõpsake, hoidke all ja lohistage lehe ülaosa juhendit, kuni lohistamise alustamisel allpool kuvatavas kastis on kirjas Y=50.

12 Samamoodi lohistage ülaltoodud päisejuhik lehe ülaossa, kuni see ütleb Y=0. Tegime seda oma päiseala seadistamiseks. (Võib-olla soovite katsetada nende juhendite paigutamist erinevatele kohtadele erinevate tulemuste saamiseks, kuid see on praegu hea.)

13 Valige äsja loodud ristkülik, lohistage see päisealale, et see sobiks korralikult.

14 Nüüd peame suurendama ristküliku laiust ja muutma selle 100%, et päis näeks täiuslik välja igas ekraani suuruses. Laiendage ristkülikut mõlema servani ja veenduge, et see klõpsab servadega. Ilmub oranž juhend, mis tagab, et objekt on klõpsatud. Ristküliku laiuse suurendamisel kuvatakse hüpikaknas W=100% või W=1160, kui jõuate servani.

15 Hoidke ristkülik valitud, klõpsake rakenduse menüü all sõna Täida ja määrake valikud järgmiselt. Valige esimene värv must ja teine värv: R=37, G=37, B=37.

16 Valige Fail > Salvesta sait. Salvestage oma sait iga kord, kui teete muudatusi.

17 Looge tekstikast ja tippige "example.com" ja muutke selle vormingut, nagu allpool näidatud.

18 Reguleerige tekstikasti suurust nii, et kogu tekst kuvatakse ühel real. Valige see tekstikast ja lohistage see üle musta ristküliku. Joondage see ristküliku vertikaalse keskpunktiga (sinine joon näitab, millal see on keskel) ja kinnitage see vasaku äärise külge, nagu allpool näidatud.

19 Looge tekstikast ja tippige "Kodu". Muutke selle vormingut järgmiselt. Reguleerige vastavalt tekstikasti laiust ja kõrgust. Seda saate teha ka teisenduspaneelilt. Minu oma on W=52, H=17.

20 Kopeerige ja kleepige see tekstikast ning tippige uude välja "Teenused". Reguleerige laiust. Lohistage ja asetage see tekstikast kodu kõrvale, nii et nende kahe erinevus on väga väike. Jällegi aitavad juhendid teid õigesti joondada.

21 Kopeerige ja kleepige see tekstikast veel neli korda ja tippige – Miks me, iseloomustused, võtke meiega ühendust ja uudiskiri. Asetage need tekstikastid ükshaaval võrdsete vahedega "teenuste" kõrvale.

22 Kui valikutööriist on valitud ja tõstuklahvi vajutatud, valige kõik need tekstikastid ükshaaval. Minge tekstipaneelile, muutke värv valgeks. Valige nende kastide rühm ja asetage see päise ristküliku kohale. (Vertikaalselt keskel ja joondatud parempoolse lehe äärisega). See on meie menüü.

23 Kui valikutööriist on valitud ja tõstuklahvi vajutatud, valige need tekstikastid, ristkülik ja tekstikast example.com. Paremas ülanurgas näete valikut Kinnita. Nende üksuste kinnitamiseks klõpsake selle ülemist keskmist kasti. See tähendab, et kui kasutaja teie saiti läbi kerib, jääb see päis fikseerituks ülaosas. See on väga kasulik, kuna kasutaja ei pea lihtsalt teise valiku valimiseks lõpuni üles kerima.

24 Minge paneelile Kihid ja lukustage päisekiht. Seda saab teha, klõpsates kihi nimest vasakul asuvat kasti. Kui lukustate kihi või objekti, ei mõjuta see selle välimust, kuid te ei saa neid üksusi valida, kui te lukust lahti ei tee. Tegime seda selleks, et täielikult välistada võimalus esemeid kogemata liigutada.

25 Valige sisukiht ja ahendage kihtide paneel.

Slaidiseansi loomine

26 Minge rakenduse akna paremas servas asuvasse vidinateeki. Kui seda seal pole, avage menüü Aken ja valige Vidinateek. Laiendage jaotist "slaidiseansid" ja valige "Tühi". Klõpsake ja lohistage see objekt lõuendile. Ilmub must aken slaidiseansi valikutega.

27 Veenduge, et suvandid on seadistatud nii, nagu on näidatud alloleval pildil. Tühjendage allosas osade jaotises märkeruudud Eelmine, Järgmine, Tiitrid ja Loendur. Me ei vaja ühtegi neist.

28 Selle hüpikakna kadumiseks klõpsake lõuendil ükskõik kus. Nüüd klõpsake ettevaatlikult slaidiseansi sees. Kui klõpsate sellel üks kord, näete, et "Slaidiseanss" on kirjutatud jaotisesse "Praeguse valiku tüüp". See asub vasakus ülanurgas rakenduste menüü all. See ala võimaldab teil näha, mida olete valinud. See on väga kasulik funktsioon, kui paigutus muutub keeruliseks. Klõpsake uuesti ja märkate, et kirjelduses on "Kangelase pilt".

29 Suurendage kangelase kujutise laiust käsitsi, laiendades seda keskelt. Kinnitage see nii lehe servade külge (et see oleks 100% laiune) kui ka päise ristküliku alaosa külge, nagu allpool näidatud.

30 Minge teisenduspaneelile ja pange H=500.

31 Avage slaidiseansi valikud uuesti, klõpsates väikesel sinisel ringil, mille sees on valge ristkülik (see asub slaidiseansi paremas ülanurgas).

32 Klõpsake valiku „Lisa pilte…” kõrval kaustaikooni, sirvige pilte, mille me slaidiseansi jaoks alla laadisime. Valige kõik neli ja klõpsake nuppu Ava.

33 Minge menüüsse Fail > valige „Lehe eelvaade brauseris” või Ctrl+Shift+E ja vaadake, kuidas teie slaidiseanss töötab, kui sait on aktiivne. Soovitan teil selles õpetuses kasutatavad klaviatuuri otseteed meelde jätta. See aitab teil disainiprotsessi kiirendada.

Sektsiooni "Teenused" loomine

34 Nüüd, kui oleme oma päise ja slaidiseansi seadistanud, on aeg luua jaotised iga üksuse jaoks, mille oma menüüsse lisasime. Alustame teenustega. Looge tekstikast ja tippige sinna teenused (kõik väikesed tähed) ja muutke selle vormingut järgmiselt.

35 Topeltklõpsake sellel tekstikastil ja valige ainult täht "I". Muutke selle font ‘Chunk’iks ja jätke kõik samaks. Reguleerige selle tekstikasti kõrgust. Kui vähendate selle kõrgust, ilmub teatud punktis katkendjoon ja kast ei muutu lühemaks. Ärge vähendage suurust pärast seda. See on selle fondi suuruse juures väikseim võimalik kõrgus.

36 Kui tekstikast on valitud, minge teisenduspaneelile ja määrake pöördenurgaks -90 kraadi (90 kraadi negatiivne).

37 Liigutage tekstikast lõuendi vasakule küljele, nagu allpool näidatud.

38 Võimalik, et soovite kogu sisu korraga nägemiseks või objektide õigeks reguleerimiseks veidi välja suumida. Selleks proovige tippida ülaservas olevasse suumitaseme jaotisesse erinevad väärtused (alla 100%). Pärast väärtuse sisestamist vajutage sisestusklahvi.

39 Avage Fail > valige „Koht”. Valige esimene pilt, mille oma teenuste jaotise jaoks alla laadisime. Klõpsake nuppu Ava.

40 Kursor muudab oma välimust kujutisega laetud kohapüstoliks. Selle paigutamiseks klõpsake lõuendil. Liigutage ja asetage see nii, et see ühtiks tekstikasti „teenused” ülaosaga.

41 Kopeerige see pilt ja kleepige see kaks korda. Valige need kleebitud pildid ükshaaval ja joondage need esimese pildiga võrdsele kaugusele.

42 Valige teine pilt, paremklõpsake seda ja valige "asenda pilt" (see on viimane valik). Sirvige teist pilti ja klõpsake nuppu Ava. Asendage ka kolmas pilt.

43 Looge teenuste teabe jaoks tekstikastid ja rakendage pealkirjade ja lõikude vormingut, nagu allpool kirjutatud. Juhendid aitavad teil neid õigesti joondada.

Pealkirjade jaoks: Font: Raleway rasvane, suurus = 20, värv: must, vasakule joondatud ja 100% ees.
Lõigete jaoks: Font: Questrial, Suurus = 15, Värv: R = 67 G = 67 B = 67, vasakule joondatud ja 120% ees.

44 Asetage veel kolm pilti, nagu tegime eelmistes sammudes, ja looge neile sarnaselt kirjeldustekst. Teil peaks olema järgmine tulemus.

Jaotise „Teenused” lõpptulemus

Jaotise „Miks meie” loomine

45 Järgmine on jaotis "Miks meie". See on veidi keeruline. Olge objektide valimisel ettevaatlik. Esiteks looge ristkülik, mille laius on 100% ja H = 996. Täitke see värviga (R=47, G=48, B=55). Paremklõpsake seda ristkülikut > Korralda > valige „Saada taha” (mitte tagasisaatmine).

46 Laiendage oma tööala, klõpsates ja lohistades juhendit "lehe allosa", nii et teil oleks piisavalt ruumi sisu loomiseks, mis asetatakse sellele äsja loodud ristkülikule.

47 Kerige alla valge tühja ruumini ja tehke teine ristkülik W=351 ja H=351. Täitke see valge värviga ja ilma jooneta.

48 Minge valikule "nurga raadius" (see asub rakenduse menüü all oleva joone kõrval). Klõpsake kõiki nurki, et muuta need ümaraks, ja pange 500 selle kõrval olevasse kasti.

49 Teil on ring. Lohistage see ring ristkülikule ja reguleerige seda järgmiselt. Nurgaraadiuse kõrval on suvand nimega ‘Opacity’. Kui ring on valitud, pange sellesse kasti 14.

50 Looge tekstikast ja sisestage – miks meie (kõik väikesed). Muutke selle font Rammetto One’iks, suurus = 100, Color R = 241 G = 244 B = 247, 100% ees ja joondage see keskele. Asetage see tekstikast ringi sisse ja joondage see korralikult.

51 Nüüd loome katkendjooned. Tehke ristkülik W=9 ja H=9, täitmata. Klõpsake täitmise kõrval oleval sõnal "tõmme". Valige värv R=241 G=244 B=247. Klõpsake keti ikoonil, et see katkestada ja lisada alumise löögi kaalule „1″.

52 Kopeerige see ühepoolse joonega ristkülik ja kleepige see mitu korda. Järjestage need ühele reale (kui teil on neid ristkülikuid raske näha, suumige suumitööriistaga veidi sisse). Kui olete saanud soovitud pikkuse katkendjoone, valige kõik need ristkülikud, paremklõpsake ja valige ‘Grupe’. Kopeerige ja kleepige see rühm teiste katkendjoonte jaoks.

53 Kaldjoonte jaoks proovige panna teisenduspaneelile erinevad pöördenurgad. Olen kasutanud 150 ja 30 kraadi. Lühemate pikkuste saamiseks peate sellest rühmast kustutama mõned ristkülikud. Reguleerige neid jooni ringi lähedal, nagu allpool näidatud.

54 Nüüd lisame veel teksti numbrite, pealkirjade ja kirjelduste jaoks. Kasutage igaühe jaoks järgmisi sätteid ja kohandage neid tekstikaste, nagu allpool näidatud.

Numbrite jaoks: Font = Rammetto One, värv: R = 196 G = 214 B = 193, keskel joondatud ja 100% ees, suurus: 200 (numbri "1" jaoks), 160 (numbrite "2" ja "3" jaoks) ja 120 (numbrite "4" ja "5" jaoks).
Pealkirjade jaoks: Font = Raleway paksus, suurus = 18, värv: valge, keskel joondatud ja 100% ees.
Lõigete jaoks: Font = Questrial, Suurus = 16, Värv: R = 241 G = 244 B = 247, Joondatud keskele ja 120% ees.

Jaotise „Miks meie” lõpptulemus

"Iseloomustuste" jaotise loomine

55 Jällegi looge töötamiseks ruumi, lohistades lehe juhendi allosa alla. Tehke ristkülik, mille laius on 100% ja H = 486.

56 Kui ristkülik on valitud, klõpsake sõna "Täida" ja klõpsake pildi valiku kõrval nuppu "Lisa pilt". Sirvige allalaaditud telliskiviseina mustri pilti. Kogu ristküliku täitmiseks selle tekstuuriga valige Sobitamise suvandi all suvand "Plaadid".

57 Kerige alla tühja kohani ja looge teisenduspaneeli abil tekstikast suurusega W=406, H=289. Sisestage – ‘mida teised peavad ütlema’ (kõik väike). Muutke selle font väärtuseks Rammetto One, suurus = 70, joondage see vasakule, värviväärtused R = 37 G = 37 B = 37 ja ees = 100%.

58 Kui see tekstikast on valitud, klõpsake sõna tõmmet, rakendage sellele parempoolne raskusjoon üks ja musta värvi. Lohistage see tekstikast ja asetage see telliskiviseina mustriga ristküliku kohale.

59 Järgmine samm on klientide iseloomustuste lisamine. Selleks kasutame ümmarguse näo vektorpilte, mille laadisime alla saidilt freepik.com. Jällegi taanduge valgele tühjale alale, et saaksite oma kompositsiooni õigesti kohandada.

60 Minge vidinateeki ja lohistage kompositsioonide jaotisest lõuendile "Tühi". Veel kolme päästiku lisamiseks klõpsake plussmärki. Valige ettevaatlikult esimene päästik ja tagage oma valik praeguse valikuala abil, millel on kirjas päästik. Ja kohe selle kõrval on valik nimega ‘Aktiivne’. Laiendamiseks klõpsake sellel. Valige olek "Tavaline" ja selle oleku jaoks "pole täitmine" ja "ei ole joont". Korrake seda iga oleku puhul, mis on kursoriga, hiirega alla ja aktiivne. Minge teisenduspaneelile, kus esimene päästik on valitud, ja määrake W=10, H=10.

61 Korrake eelmist sammu iga meil oleva päästiku puhul. See tähendab, et iga oleku jaoks ei rakendata täitmist ega tõmmet ning muuda päästikud suuruseks 10 x 10. Liigutage päästikud üksteisele lähemale.

62 nüüd. Kohandame sihtmärgid iga päästiku jaoks. Suur ristkülik, mida näete, on sihtmärk. Valige esimene päästik ja valige olekute paneelilt selle normaalne olek. Pärast seda valige selle päästiku sihtmärk ja rakendage iga oleku jaoks täitmist ega tõmmet. Seejärel minge teisenduspaneelile ja määrake sihtmärgiks W = 360, H = 370.

63 Korrake eelmist sammu iga sihtmärgi puhul. Lihtsalt veenduge, et valite esmalt päästiku, viite selle normaalolekusse, seejärel valige tavaolekuga vastav sihtmärk ja seejärel ei rakendata täitmist ega tõmmet. Te ei pea iga sihtmärgi suurust muutma. Tehke seda vaid ühe jaoks ja see rakendub kõigile.

64 Nüüd hakkame sellele kompositsioonile sisu lisama. Valige Fail > Aseta ja avage esimene näopilt ning asetage see kompositsioonist väljapoole. Lohistage see pilt ja asetage see nüüd kompositsiooni sisse. Näete, et selle paremasse ülanurka ilmub sinine ring, mis näitab, et see pilt on nüüd kompositsiooni osa.

65 Koostage kolm tekstikasti – üks inimese nime, üks tema määramise ja üks väite või ülevaate jaoks. Rakenda vorming, nagu allpool kirjutatud, ja asetage need tekstikastid kompositsiooni sisse. Lihtsalt veenduge, et igaühe nurgas oleks sinine ring.

Isiku nime jaoks: Font: Nobile Medium Italic, suurus = 18, värv: R = 37 G = 37 B = 37, keskel joondatud ja 100% ees.
Tähistus: Font: Nobile, suurus = 15, värv: R = 37 G = 37 B = 37, keskel joondatud ja 100% ees.
Avalduste jaoks (pöördkomadega): Font: PT Sans Italic, suurus = 18, värv: R = 69 G = 64 B = 68, keskel joondatud ja 100% ees.

66 Kui näokujutis on valitud, rakendage mõlemale küljele raskust 4, värv: valge, ümardage kõik nurgad ja suurendage raadiust, kuni see ümbritseb kujutist. Nurgaraadiusteks olen kasutanud 100.

67 Minge jaotisse "Efektid" (asub ümaramate nurkade valiku kõrval) ja märkige ruut "vari". Pange väärtused nagu; Värv = must, läbipaistmatus = 37%, hägusus = 12, nurk = 78 ja kaugus = 5.

68 Korrake eelmisi samme (64 kuni 67) igale sihtmärgile sisu lisamiseks ja salvestage muudatused (Ctrl+S). Asetage see kompositsioon telliskiviseina mustriga ristküliku kohale.

69 Nüüd valige kogu kompositsioon (veenduge praeguse valikualaga) ja laiendage selle valikuid, klõpsates väikesel sinisel ringil. Määrake valikud, nagu allpool näidatud. Vajutage Ctrl + Shift + E ja vaadake, kas see töötab hästi.

70 Teil peaks olema järgmine tulemus.

"Iseloomustuste" jaotise lõpptulemus

Jaotise „Võtke meiega ühendust” loomine

71 Järgmine jaotis on Võtke meiega ühendust. Lisame sellesse jaotisse taustapildi, vormi ja mõned tekstikastid. Esiteks tehke ristkülik, mille laius on 100% ja H = 692. Täitke see pildiga, mille selle jaotise jaoks alla laadisime, ja valige jaotises Sobitamine valik "Täitmise skaala". Muutke selle läbipaistmatus 72% -ni.

72 Tehke teine sama laiuse ja kõrgusega ristkülik ja täitke see gradiendiga. Pange gradiendi väärtused kui; Läbipaistmatus = 90% kuni 46%, värv: must kuni R = 69 G = 64 B = 68, fookuspunkt = 66%, suund: horisontaalne ja suurus: automaatne. Asetage see ristkülik pildi peale ja veenduge, et see klõpsaks iga servaga.

73 Minge vidinate teeki. Valige vormide all "lihtne kontakt" ja lohistage see lõuendile. Ilmub vormivalikutega aken. Sisesta vormi nimi: Kontaktivorm, E-posti aadress: sisesta oma e-posti aadress, kuhu soovid külastajate sisestatud teavet saada, Pärast saatmist: vali ‘püsi praegusel lehel’. Viimane valik on "Redigeeri koos". Veenduge, et see oleks kontrollitud. Nii peate tegema muudatusi ainult ühes väljas ja need rakenduvad kõigile. Suvandite kasti kadumiseks klõpsake lõuendil mis tahes kohas.

74 Valige vorm. Klõpsake sildil "Nimi" ja klõpsake seda uuesti, kuni näete praeguses valikupiirkonnas teksti "Silt". Vajutage Kustuta. Korrake seda e-kirjade ja sõnumite siltide puhul ning kustutage need.

75 Valige vorm uuesti ja valige esimene vormiväli, mis ütleb "Sisesta nimi", kuni näete praegusel valikualal teksti "Teksti sisestus". Ärge rakendage täitmist ja alumist joont (kaal üks ja värv valge) iga oleku jaoks, st tühjalt fookuseni. Vea oleku jaoks valige täitmata jätmine ja alumine kriips punane värviga kaaluga 1.

76 Pärast seda, kui meiliväli on valitud, valige uuesti tühi olek ja kohandage iga oleku jaoks teksti fonti ja värvi, nagu allpool on kirjutatud.

Tühja, mittetühja ja fookuse oleku jaoks: Font: Questrial, suurus = 14, värv: valge, vasakule joondatud, 100% ees ja ilma kaldkirjata.
Ülemineku oleku jaoks: muutke lihtsalt teksti värviks R=196 G=196 B=196 ja ilma kaldkirjata.
Vea oleku jaoks: muutke teksti värv punaseks ja ilma kaldkirjata.

77 Klõpsake ja valige nuppu Esita. Valige selle normaalne olek, ümardage kõik nurgad 40 raadiusega ja suurendage selle laiust, nagu on näidatud alloleval ekraanipildil. Muutke selle font kirjaks Raleway Bold, suurus = 20, joondatud keskele, värv: R = 241 G = 244 B = 247, ees: kohandage nupu keskel olevat teksti "submit", suurendades seda väärtust (olen kasutanud 130%) .

78 Ülemineku ja hiire allapoole liikumise oleku jaoks muutke joone ja teksti värv halliks (R=127 G=127 B=127). Lõpuks muutke oleku ‘esitamine pooleli’ jaoks joone ja teksti värv taevasiniseks (R=41 G=171 B=226).

79 Kui valite selle esitamisnupu jaoks oleku „Esita pooleli”, näete, et on veel üks tekstikast, mis ütleb „vormi esitamine…”. Märkige see ruut ja valige selle olek „esitamine on pooleli”. Muutke fondi tüübiks Questrial, suurus = 14, värv: hall, keskele joondatud ja ilma kaldkirjata. Valige selle olek „edasi saatmine” ja muutke teksti värviks taevasinine (ilma kaldkirjata). Valige selle olek „Esita viga” ja muutke teksti värv punaseks (ilma kaldkirjata). Kontaktvorm on valmis.

80 Tehke kaks tekstikasti. Sisestage – võtke meiega ühendust ja tippige teisele reale "kõik väljad on kohustuslikud". Meiega kontaktteksti jaoks kasutage fonti: Rammetto One, suurus = 60, värv: R = 241 G = 244 B = 247, ees = 100% ja vasakule joondatud. Teksti „Kõik väljad on kohustuslikud” jaoks kasutage fonti: Nobile kursiiv, suurus=26, värv: R=241 G=244 B=247, ees=100% ja vasakule joondatud. Selle tekstikasti jaoks rakendage raskuse 1 alumist joont ja värvige valget.

81 Tippige meie loodud teise tekstikasti mõni lõik. Kasutage fonti: PT Sans Italic, suurus = 14, värv: R = 241 G = 244 B = 247, ees = 120%, vasakule joondatud ja tühik enne = 15.

82 Pange need tekstikastid ja vorm pildile, mille me paigutasime. Reguleerige neid järgmiselt.

83 Looge veel üks tekstikast mõne kontaktteabe jaoks, nagu kontoriaadress, e-posti aadress ja telefoninumbrid. Pange see tekstikast pildile. Teil peaks olema järgmine tulemus.

Jaotise „Võtke meiega ühendust” lõpptulemus

Jaluse loomine

84 Viimane osa on jalus. Allosas on kolm juhendit, nimelt – lehe allosas, jaluses ja brauseri allosas. Nüüd peate veenduma, et lehe alumine juhend ühtiks jaotise Võtke meiega ühendust alaosaga ja jaluse juhend ühtiks lehe alaosa juhendiga. Pärast seda saate jaluse jaoks vajaliku ruumi reguleerimiseks lohistada juhendi „brauseri alumine osa” alla.

85 Loo kaks ristkülikut, mille laius on 100% ja esimese jaoks H=168 ja teise jaoks H=37. Muutke suure ristküliku täitevärv valgeks ja kasutage lühema jaoks R=47, G=48, B=55.

86 Valige esimene ristkülik ja proovige asetada see jaluse alale. Sinna see ei lähe. Selle asemel hakkab lehe allosa juhend allapoole laienema. Selle ristküliku jaluse üksuse muutmiseks märkige ruut "Jalus", mis asub rakenduse akna paremas ülanurgas. Tehke seda ka teise ristküliku jaoks.

87 Nüüd asetage need ristkülikud jaluse alale ja veenduge, et suur ristkülik oleks jaluse juhikust veidi kõrgemal. Värvilise ristküliku alumine osa peab klõpsama brauseri juhiku alaosaga. Vastasel juhul näete jaluse järel väikest valget tühimikku, mis ei näe kena välja.

88 Looge jaluse jaoks tekstikastid ja sisestage kõik, mida soovite. Lihtsalt märkige lisatavate tekstikastide märkeruut „jalus”. Lisasin teksti, mis sisaldab lahtiütlemist ja autoriõiguste teavet.

89 Märgi „Valmistatud Adobe Muse CC-ga” saab lisada suhtlusvõrgustiku jaotise vidinateegist. Samuti saate lisada linke oma Facebooki lehele, twitterisse, google+, LinkedIni, Pinteresti, YouTube’i kanalisse või vimeo lingile.

90 Autoriõiguse sümboli ja palju muid sümboleid, mida näete jaotise Kõik õigused reserveeritud teksti kõrval, saab lisada rakenduse akna paremas servas asuvalt paneelilt Glyphs. Kui seda seal pole, minge menüüsse Aken > valige Glyphs.

"Uudiskirja" jaotise loomine

91 Seni oleme loonud rubriigid kõikidele menüüpunktidele peale ühe ja see on "Uudiskiri". Teeme sellega midagi huvitavat. Pidage meeles meie allalaaditud risti sümbolit, seda kasutatakse siin (kui te pole seda alla laadinud, saate seda siiski jälgida). Esiteks valige uudiskirja tekstikast ja märkige teisenduspaneelilt üles selle laius ja kõrgus. Minu oma on 81×17.

92 Nüüd avage vidinateek ja lohistage kompositsioonide jaotisest "Valguskasti kuva". Kustutage kaks esimest päästikut (asuvad ülaosas) ja kustutage kõik subtiitrid (asuvad allosas). Muutke kolmanda päästiku suuruseks samasugune kui uudiskirja tekstikasti suurus, mille suurus on 81 x 17. Muutke selle täitmine ja tõmme kõigi olekute jaoks nulliks.

93 Lohistage uudiskirja tekstikast ja asetage see selle päästiku sisse nii, et tekstikasti kõik servad langeksid kokku päästiku servadega. Nüüd lohistage see grupp ja asetage see uuesti menüüsse, kuhu see varem paigutati. Oleme teinud lingi uudiskirja tekstikasti. Kui kasutaja sellel klõpsab, kustub veebisait ja kuvatakse sihtmärk.

94 Järgmine samm on meie eesmärgi kohandamine. Valige hall ala ja veenduge, et praegusel valikualal oleks kirjas "Siht". Selle valimiseks peate kolm korda klõpsama. Muutke kõigi olekute täitmine ja tõmme nulliks.

95 Lisage kaks tekstikasti ja lihtne kontaktivorm (kustutage selle nime- ja sõnumiväljad ning säilitage ainult meiliväli). Lohistage need selle kompositsiooni sisse ja veenduge, et nende kõigi nurkades oleks sinine ring.

96 Kohandage vorm, nagu tegime jaotises Võtke meiega ühendust. Teil peaks olema järgmine tulemus. Kasutage tekstiväljal „Pea ühendust” fonti: Lobster, suurus = 40, värv: valge, keskele joondatud ja 100% ees. Selle all oleva kirjeldusteksti jaoks kasutage fonti: Ubuntu Light Italic, suurus = 14, värv: valge, keskele joondatud ja 120% ees. Muutke saatmisnupu tekstiks "Telli".

97 Nüüd valige sulgemisnupp, liigutage seda ja asetage selle valguskasti kuva paremasse ülanurka, nagu allpool näidatud. Klõpsake selle sees, kuni näete praegusele valikualale kirjutatud ‘Silt’. Kustuta silt.

98 Muutke selle sulgemisnupu täitmine ja tõmme kõigi olekute jaoks nulliks ja määrake selle W=40 ja H=40. Valige Täida > lisa pilt ja sirvige ristpilti. Valige sobitusvaliku alt "sobiv skaala".

99 Klõpsake nuppu Uudiskiri ja näete selle nurgas sinist ringi. Klõpsake seda ja veenduge, et suvandid on määratud järgmiselt.

"Uudiskirja" jaotise lõpptulemus

Hüperlinkide loomine

100 Viimane ülesanne on lisada igale jaotisele linke. Selleks valige üleval keskmisel alal suvand "Lingiankur" või vajutage klaviatuuril tähte "a". Näete, et kursor muudab oma välimust lingiankruga laetud kohtrelvaks.

101 Kui klõpsate selle paigutamiseks lõuendil, avaneb dialoogiboks, mis võimaldab ankru ümber nimetada.

102 Looge lingi ankrud iga meie kavandatud jaotise jaoks, st kodu, teenused, miks me, iseloomustused ja meiega ühendust võtmine. Asetage ankrud iga sektsiooni ülaossa. Koduankur on näidatud allpool näitena. Nende ankrute paigutamine on oluline samm ja seda tuleks teha hoolikalt. Kui kasutaja klõpsab konkreetsel lingil, kerib veebisait ankurduskohta.

103 Nüüd rakendame linke. Selleks valige tekstikast "Kodu". Avage valik „Hüperlingid” (asub ülaosas), klõpsake loendi laiendamiseks väikest allanoolt. Siin näete kõiki ankruid, mille me just asetasime. Linkige see "Kodu" ankruga. Korrake seda sammu teiste tekstiväljade jaoks, välja arvatud uudiskiri, kuna oleme rakendanud sellele valguskasti kuva.

Lõpptulemus pärast hüperlinkide loomist

Viimane lihv – lehe omaduste muutmine ja Faviconi lisamine

104 Plaanirežiimis paremklõpsake avalehel ja valige "Lehe atribuudid". Ilmub dialoogiboks. Valige vahekaart "Valikud" ja lehe nime alla kirjutage "Tere tulemast saidile example.com" ja klõpsake nuppu OK. See on tekst, mis kuvatakse brauseriakna ülaosas.

105 Avage Fail > Saidi atribuudid. Vahekaardil Paigutus on viimane valik Favicon. Kui hõljutate kursorit selle kohal, kuvatakse hüpikaken, mis kirjeldab, mis on favicon ja milline peaks olema optimaalne suurus. Faviconi lisamine on hea, kuna see aitab teie brändi esile tõsta ja aitab kasutajatel teie saiti hõlpsalt tuvastada, kui nad on selle järjehoidjasse lisanud.

Testimine ja eksportimine

106 Testige oma saiti, avades brauseris Fail > Saidi eelvaade või klahvikombinatsioon Ctrl+Alt+E. Ärge valige seekord "Lehe eelvaade brauseris", kuna lingid lehe eelvaates ei tööta. Võite proovida paigutada ankrud erinevatesse kohtadesse, tagamaks, et kui kasutaja lingil klõpsab, kerib sait õigesse jaotisse ja õigesse kohta.

107 Lõpuks avage Fail > Ekspordi HTML-ina (Ctrl+E). Sisestage saidi URL-i alla mis tahes nimi (nt „example.com”) ja valige asukoht. Klõpsake nuppu OK. Veebileht on valmis.

Iga lehe lõpptulemus

Esilehekülg

"Teenuste" jaotis

"Miks meie" jaotis

"Iseloomustuste" jaotis

Jaotis „Võtke meiega ühendust”.

Jaluse jaotis

"Uudiskirja" jaotis

KOKKUVÕTE

Olen kindel, et olete saanud kõik, mida lubasin teile pärast selle õpetuse järgimist. See on vaid näide. Mängige selle vinge tööriistaga veidi ringi ja kujundage vapustavaid ja professionaalseid veebisaite, uurides samal ajal lõputuid loomingulisi võimalusi. Aitäh.