Yksisivuisen pienyrityksen verkkosivuston rakentaminen Adobe Musella

Adobe Muse on tehokas työkalu, joka on tehnyt web-suunnittelusta yllättävän helpompaa ja mielenkiintoista. Ammattimaisten verkkosivustojen luominen on helpompaa ilman koodia ja mielenkiintoista suunnittelun täyden hallinnan kannalta toisin kuin muut vedä ja pudota -sovellukset.

Yksi tämän WYSIWYG-sovelluksen (What You See Is What You Get) vaikuttavimmista ominaisuuksista on, että se tarjoaa sopivan työnkulun auttamaan suunnittelijaa verkkosivuston vaiheittaisessa kehittämisessä.

Kun olet suorittanut tämän opetusohjelman, voit:

• Ymmärrät selkeästi kaikki Musen tekniset ja suunnittelunäkökohdat.
• Opi suunnittelemaan ammattimaisesti lyhyemmässä ajassa.
• Tutustu joihinkin ilmaisiin resursseihin, joista voit löytää upeita grafiikkaa verkkosivustollesi.
• Luo täysin toimiva yksisivuinen verkkosivusto hetkessä.

Tämän opetusohjelman vaatimukset

Sinun on ladattava tietyt kuvat, vektorit ja fontit tämän sivuston luomiseksi. Mutta voit silti seurata mukana ilman näitä resursseja. Järjestä sisältö oikein luomalla sivustollesi erillinen kansio.

• Mene osoitteeseen pexels.com ja lataa:

  • 4 kuvaa kooltaan 1160 x 480 diaesitystä varten. Tässä kuvakaappaus pexelsistä. Voit lisätä tämän koon tämän verkkosivuston mukautetun koon ruutuun.

  • 6 kuvaa kooltaan 271 x 208 ”palvelut”-osioon.

  • 1 kuva, jonka koko on 1160 x 692 Ota yhteyttä -osioon.

• Mene osoitteeseen freepik.com ja lataa:

  • Yksi ristikuvake (voit muokata tätä kuvaketta Illustratorissa tai ladata png-tiedoston Fepikistä).
  • 6 kasvokuvaa ”Lausuntoja” varten.

• Mene osoitteeseen subtlepatterns.com ja lataa ”tiiliseinä”-kuvio ”Testimonials”-osioon.

• Kun jatkat tätä opetusohjelmaa, kerron sinulle kuinka ladata tarvittavat fontit (se voidaan tehdä Musessa).

• Käytä lipsum.com- sivuston valetekstiä.

ALOITETAAN!

Työtilan valmistelu ja otsikon asettaminen

1 Luo uusi sivusto valitsemalla Tiedosto > Uusi sivusto (Ctrl+N) ja aseta arvot alla olevan kuvan mukaisesti. Älä unohda valita ”Sticky Footer” -valintaruutua. Napsauta OK ja saat PLAN-tilan. Kaksoisnapsauta A-Masteria, joka sijaitsee alareunassa harmaalla alueella. Luot kaiken tälle sivupohjalle.

2 Valitse tekstityökalu sovellusikkunan vasemmalla puolella olevasta työkalulaatikosta. Luo tekstiruutu napsauttamalla ja vetämällä kangasta tai sivua. Siirry tekstipaneeliin (Ctrl+T), etsi avattavasta Kirjasimet-valikosta Verkkofontit, valitse Lisää verkkofontteja ja lataa seuraavat kirjasimet:

• Rametto One
• Kimpale
• Kysely
• Raleway
• Jalo
• PT ilman
• Ubuntu
• Hummeri

Kun olet ladannut nämä fontit, poista tämä tekstiruutu.

3 Siirry Tasot-paneeliin, joka sijaitsee sovellusikkunan oikealla puolella. Jos sitä ei ole, valitse Ikkuna-valikko > Tasot. Näet siellä kerroksen nimeltä Layer 1 (sininen väri). Tämä on oletustaso, ja kaikki luomasi tai kankaalle sijoittamasi menee sinne. Kaksoisnapsauta tätä tasoa ja anna sille nimi ”Otsikko”.

4 Napsauta Tasot-paneelin sisällä oikeassa alakulmassa olevaa pientä taitetun reunan paperikuvaketta. Napsauttamalla tätä luodaan uusi taso punaisella värillä. Jälleen kaksoisnapsauta tätä tasoa ja nimeä se uudelleen sisällöksi.

5 Napsauta ja vedä tätä sisältökerrosta ja aseta se otsikkokerroksen alle. Olemme tehneet tämän, koska haluamme, että otsikkomme on kaiken huipulla.

6 Valitse otsikkotaso ja kutista tasot-paneeli.

7 Valitse työkalulaatikosta suorakulmiotyökalu tai paina näppäimistön m-näppäintä.

8 Piirrä pieni suorakulmio kankaalle ja varmista, että sen reunan väri on sininen, mikä osoittaa, että tämä objekti on otsikkokerroksen sisällä.

9 Siirry sovellusikkunan oikeassa yläkulmassa olevaan Muunna-paneeliin. Jätä leveys (W) ja laita 50 korkeus (H) -kentän sisäpuolelle ja paina Enter. (Älä välitä X- ja Y-arvoista.)

10 Sivun yläreunassa näet kaksi sinistä riviä (näkyy alla olevassa kuvakaappauksessa). Näitä kutsutaan ”oppaiksi”. Kun viet hiiren osoittimen ensimmäisen oppaan päälle, siinä lukee ”Sivun yläreuna, säädä täyttöä sivun yläpuolella vetämällä” ja toisessa ”Otsikko, säädä sijaintia vetämällä”. Näiden oppaiden laatiminen heti alussa on erittäin tärkeää.

11 Nyt, kun olemme luoneet suorakulmion H=50, napsauta, pidä alhaalla ja vedä ’sivun yläosan’ -opasta, kunnes ruudussa, joka tulee näkyviin, kun alat vetää, lukee Y=50.

12 Vedä vastaavasti yllä olevaa otsikkoohjainta sivun yläreunaan, kunnes siinä lukee Y=0. Olemme tehneet tämän määrittääksemme otsikkoalueemme. (Haluat ehkä kokeilla näiden ohjainten sijoittamista eri paikkoihin eri tulosten saamiseksi, mutta se on hyvä tällä hetkellä.)

13 Valitse juuri luomamme suorakulmio ja vedä se otsikkoalueelle niin, että se sopii oikein.

14 Nyt meidän on lisättävä suorakulmion leveyttä ja tehtävä se 100 %, jotta otsikko näyttää täydelliseltä jokaisessa näytön koossa. Laajenna suorakulmio molempiin reunoihin ja varmista, että se napsahtaa reunojen kanssa. Näyttöön tulee oranssi opas, joka varmistaa, että esine on napsautettu. Kun lisäät suorakulmion leveyttä, ponnahdusikkunassa lukee W=100% tai W=1160, kun saavutat reunan.

15 Pidä suorakulmio valittuna, napsauta sanaa Täytä sovellusvalikon alla ja aseta asetukset seuraavasti. Valitse ensimmäinen väri mustaksi ja toinen väri: R=37, G=37, B=37.

16 Valitse Tiedosto > Tallenna sivusto. Tallenna sivustosi aina, kun teet muutoksia.

17 Luo tekstiruutu ja kirjoita – ”example.com” ja muuta sen muotoilua alla olevan kuvan mukaisesti.

18 Säädä tekstilaatikon kokoa niin, että koko teksti näkyy yhdellä rivillä. Valitse tämä tekstiruutu ja vedä se mustan suorakulmion päälle. Kohdista se suorakulmion pystysuoraan keskustaan ​​(sininen viiva kertoo, milloin se on keskellä) ja napsauta se vasempaan reunaan alla olevan kuvan mukaisesti.

19 Luo tekstiruutu ja kirjoita – ”Koti”. Muuta sen muotoilua seuraavasti. Säädä tekstikentän leveyttä ja korkeutta vastaavasti. Voit tehdä tämän myös muunnospaneelista. Omani on W=52, H=17.

20 Kopioi ja liitä tämä tekstiruutu ja kirjoita ”Palvelut” uuteen. Säädä leveyttä. Vedä ja sijoita tämä tekstiruutu kodin viereen niin, että ero näiden kahden välillä on hyvin pienempi. Jälleen oppaat auttavat sinua oikeaan kohdistukseen.

21 Kopioi ja liitä tämä tekstiruutu neljä kertaa enemmän ja kirjoita – Miksi me, suosittelut, ota yhteyttä ja uutiskirje. Sijoita nämä tekstilaatikot yksitellen tasavälein ’palvelujen’ viereen.

22 Kun valintatyökalu on valittuna ja vaihtonäppäintä painetaan, valitse kaikki nämä tekstiruudut yksitellen. Siirry tekstipaneeliin, vaihda väri valkoiseksi. Valitse näiden ruutujen ryhmä ja aseta se otsikon suorakulmion päälle. (Pystysuoraan keskitetty ja tasattu sivun oikean reunan kanssa). Tämä on meidän menu.

23 Kun valintatyökalu on valittuna ja vaihtonäppäintä painettuna, valitse nämä tekstiruudut, suorakulmio ja example.com-tekstiruutu. Oikeassa yläkulmassa näet vaihtoehdon nimeltä Pin. Kiinnitä nämä kohteet napsauttamalla sen keskimmäistä yläruutua. Tämä tarkoittaa, että kun käyttäjä selaa sivustoasi, tämä otsikko pysyy kiinteänä yläreunassa. Se on erittäin hyödyllinen, koska käyttäjän ei tarvitse vierittää kokonaan ylös vain valitakseen toisen vaihtoehdon.

24 Siirry Tasot-paneeliin ja lukitse otsikkotaso. Tämä voidaan tehdä napsauttamalla tason nimen vasemmalla puolella olevaa ruutua. Kun lukitset tason tai minkä tahansa objektin, se ei vaikuta sen ulkonäköön, mutta et voi valita näitä kohteita, ellet avaa lukitusta. Olemme tehneet tämän poistaaksemme kokonaan mahdollisuuden siirtää esineitä vahingossa.

25 Valitse sisältötaso ja kutista tasot-paneeli.

Diaesityksen perustaminen

26 Siirry widget-kirjastoon, joka sijaitsee sovellusikkunan oikealla puolella. Jos sitä ei ole, siirry Ikkuna-valikkoon > valitse Widget-kirjasto. Laajenna ”diaesityksiä” -osio ja valitse ”Tyhjä”. Napsauta ja vedä tämä objekti kankaalle. Näyttöön tulee musta ikkuna diaesitysvaihtoehdoilla.

27 Varmista, että asetukset on asetettu alla olevan kuvan mukaisesti. Poista alareunan osa-osiossa olevat valintaruudut, joissa lukee Edellinen, Seuraava, Tekstitykset ja Laskuri. Emme tarvitse mitään näistä.

28 Napsauta mitä tahansa kankaalla, jotta tämä ponnahdusikkuna katoaa. Napsauta nyt varovasti diaesityksen sisällä. Napsauttamalla sitä kerran, näet, että ”Diaesitys” on kirjoitettu ”nykyisen valintaalueen tyyppi”. Se sijaitsee vasemmassa yläkulmassa sovellusvalikon alla. Tällä alueella voit nähdä, mitä olet valinnut. Se on erittäin hyödyllinen ominaisuus, kun asettelusta tulee monimutkainen. Napsauta uudelleen ja huomaat, että kuvauksessa lukee ”Sankarikuva”.

29 Suurenna sankarikuvan leveyttä manuaalisesti laajentamalla sitä keskeltä. Kiinnitä se sekä sivun reunoihin (jotta se on 100 % leveä) että otsikon suorakulmion alaosaan alla olevan kuvan mukaisesti.

30 Siirry muunnospaneeliin ja laita H=500.

31 Avaa diaesityksen asetukset uudelleen napsauttamalla pientä sinistä ympyrää, jonka sisällä on valkoinen suorakulmio (se sijaitsee diaesityksen oikeassa yläkulmassa).

32 Napsauta Lisää kuvia… -vaihtoehdon vieressä olevaa kansiokuvaketta ja etsi kuvia, jotka ladamme diaesitystä varten. Valitse kaikki neljä ja napsauta Avaa.

33 Siirry kohtaan Tiedosto > valitse Esikatselusivu selaimessa tai Ctrl+Shift+E ja katso, kuinka diaesitys toimii, kun sivusto on käytössä. Suosittelen, että opettelet ulkoa tässä opetusohjelmassa käyttämäni pikanäppäimet. Tämä auttaa sinua nopeuttamaan suunnitteluprosessia.

Luodaan Palvelut-osio

34 Nyt kun olemme määrittäneet otsikon ja diaesityksen, on aika luoda osiot jokaiselle valikkoon lisätylle kohteelle. Aloitetaan ”palveluilla”. Luo tekstiruutu ja kirjoita siihen palvelut (kaikki kirjaimet pieniä) ja muuta sen muotoilua seuraavasti.

35 Kaksoisnapsauta tämän tekstiruudun sisällä ja valitse vain kirjain ”I”. Vaihda sen fontiksi Chunk ja jätä kaikki ennalleen. Säädä tämän tekstiruudun korkeutta. Kun pienennät sen korkeutta, tiettyyn kohtaan ilmestyy katkoviiva, eikä laatikko lyhennä. Älä pienennä kokoa sen jälkeen. Tämä on pienin mahdollinen korkeus tällä kirjasinkoolla.

36 Kun tekstiruutu on valittuna, siirry muunnospaneeliin ja aseta kiertokulmaksi -90 astetta (90 astetta negatiivinen).

37 Siirrä tekstikenttä kankaan vasemmalle puolelle alla olevan kuvan mukaisesti.

38 Haluat ehkä loitontaa hieman nähdäksesi kaiken sisällön kerralla tai säätääksesi kohteita oikein. Voit tehdä tämän kirjoittamalla eri arvoja (alle 100 %) yläreunassa olevaan zoomaustaso-osioon. Kun olet kirjoittanut arvon, paina enter.

39 Siirry kohtaan Tiedosto > valitse Paikka. Valitse ensimmäinen kuva, jonka latasimme palveluita varten. Napsauta auki.

40 Kohdistin muuttaa ulkonäkönsä kuvalla ladatuksi paikkapistooliksi. Aseta kangas napsauttamalla sitä. Siirrä ja aseta se niin, että se on linjassa Palvelut-tekstikentän yläosan kanssa.

41 Kopioi tämä kuva ja liitä se kahdesti. Valitse nämä liitetyt kuvat yksitellen ja kohdista ne tasavälein ensimmäisen kuvan kanssa.

42 Valitse toinen kuva, napsauta sitä hiiren oikealla painikkeella ja valitse ”korvaa kuva” (se on viimeinen vaihtoehto). Selaa toinen kuva ja napsauta Avaa. Vaihda myös kolmas kuva.

43 Luo tekstiruutuja palveluiden tiedoille ja käytä otsikoiden ja kappaleiden muotoilua alla kirjoitetulla tavalla. Oppaat auttavat sinua kohdistamaan ne oikein.

• Otsikot: Fontti: Raleway Lihavoitu, Koko=20, Väri: Musta, Tasattu vasemmalle ja 100 % etureuna.
• Kappaleet: Fontti: Questrial, Koko = 15, Väri: R = 67 G = 67 B = 67, Tasattu vasemmalle ja 120 % etureuna.

44 Sijoita kolme muuta kuvaa kuten teimme edellisissä vaiheissa ja luo niille vastaavalla tavalla kuvausteksti. Sinun pitäisi saada seuraava tulos.

Palvelut-osion lopullinen tulos

”Miksi me” -osion luominen

45 Seuraava on ”Miksi me” -osio. Tämä on hieman monimutkainen. Ole varovainen esineiden valinnassa. Luo ensin suorakulmio, jonka leveys on 100 % ja H = 996. Täytä se värillä (R=47, G=48, B=55). Napsauta tätä suorakulmiota hiiren kakkospainikkeella > Järjestä > valitse ”lähetä taaksepäin” (älä lähetä taaksepäin).

46 Laajenna työskentelyaluettasi napsauttamalla ja vetämällä ”sivun alaosan” -opasta, jotta sinulla on tarpeeksi tilaa luoda sisältöä, joka sijoitetaan juuri luomaamme suorakulmioon.

47 Vieritä alas valkoiseen tyhjään tilaan ja tee toinen suorakulmio W=351 ja H=351. Täytä se valkoisella värillä ilman viivaa.

48 Siirry kohtaan ”kulman säde” (se sijaitsee viivan vieressä sovellusvalikon alla). Pyöreä ne napsauttamalla kaikkia kulmia ja laita 500 sen viereiseen ruutuun.

49 Sinulla on ympyrä. Vedä tämä ympyrä suorakulmion päälle ja säädä sitä seuraavasti. Kulman säteen vieressä on vaihtoehto nimeltä ’Opacity’. Kun ympyrä on valittu, laita 14 tähän ruutuun.

50 Luo tekstiruutu ja kirjoita – miksi me (kaikki pieniä). Muuta sen fontiksi Rammetto One, koko = 100, Color R = 241 G = 244 B = 247, etureuna 100 % ja aseta se keskelle. Aseta tämä tekstiruutu ympyrän sisään ja kohdista se oikein.

51 Nyt luomme katkoviivat. Tee suorakulmio W=9 ja H=9, ei täyttöä. Napsauta täytön vieressä olevaa sanaa ”viiva”. Valitse väri R=241 G=244 B=247. Napsauta ketjukuvaketta katkaistaksesi sen ja laita ”1” alaiskun painoon.

52 Kopioi tämä yksipuolinen suorakulmio ja liitä se useita kertoja. Järjestä ne yhdeksi riviksi (zoomaa hieman zoomaustyökalulla, jos sinun on vaikea nähdä näitä suorakulmioita). Kun saat haluamasi katkoviivan pituuden, valitse kaikki nämä suorakulmiot, napsauta hiiren kakkospainikkeella ja valitse Ryhmä. Kopioi ja liitä tämä ryhmä muita katkoviivoja varten.

53 Jos haluat vinojen katkoviivojen, yritä asettaa muunnospaneeliin erilaisia ​​kiertokulmia. Olen käyttänyt 150 ja 30 astetta. Sinun on poistettava joitain suorakulmioita tästä ryhmästä saadaksesi lyhyempiä pituuksia. Säädä nämä viivat lähellä ympyrää alla olevan kuvan mukaisesti.

54 Nyt lisäämme tekstiä numeroita, otsikoita ja kuvauksia varten. Käytä seuraavia asetuksia kullekin niistä ja säädä näitä tekstiruutuja alla kuvatulla tavalla.

• Numeroille: kirjasin = Rammetto One, väri: R = 196 G = 214 B = 193, keskelle tasattuna ja 100 % etureunassa, koko: 200 (numerolle ’1’), 160 (numeroille ’2’ ja ’3’) ja 120 (numerot ’4’ ja ’5’).
• Otsikot: Fontti = Lihavoitu, Koko = 18, Väri: Valkoinen, Tasattu keskelle ja 100 % edessä.
• Kappaleet: Fontti = Questrial, Koko = 16, Väri: R = 241 G = 244 B = 247, Tasattu keskelle ja 120 % etureuna.

Miksi me -osion lopullinen tulos

Luodaan ”Lausunnot”-osio

55 Luo jälleen tilaa työskentelylle vetämällä sivun alareunaa. Tee suorakulmio, jonka leveys on 100 % ja H=486.

56 Kun suorakulmio on valittuna, napsauta sanaa ”Täytä” ja napsauta ”Lisää kuva” kuvavaihtoehdon vieressä. Selaa lataamamme tiiliseinäkuviokuvaa. Valitse Sovitus-kohdasta ”Laatat”, jos haluat täyttää koko suorakulmion tällä tekstuurilla.

57 Vieritä alas tyhjään tilaan ja tee muunnospaneelin avulla tekstiruutu, jonka koko on W=406, H=289. Kirjoita – ”mitä muilla on sanottavaa” (kaikki pieni). Muuta sen fontiksi Rammetto One, koko=70, tasaa vasemmalle, väriarvot R=37 G=37 B=37 ja etureuna=100%.

58 Kun tämä tekstiruutu on valittuna, napsauta sanaa veto, käytä oikeaa painoviivaa yksi ja mustaa väriä siihen. Vedä tämä tekstiruutu ja aseta se tiiliseinäkuvioisen suorakulmion päälle.

59 Seuraava vaihe on asiakkaiden suosittelujen lisääminen. Käytämme tätä varten pyöreitä vektorikuvia, jotka latasimme osoitteesta freepik.com. Siirry jälleen valkoiseen tyhjään tilaan, jotta voit mukauttaa sävellyksesi oikein.

60 Siirry Widgets-kirjastoon ja vedä ’Tyhjä’ sävellykset-osiosta kankaalle. Napsauta plusmerkkiä lisätäksesi kolme muuta triggeriä. Valitse varovasti ensimmäinen laukaisu ja varmista valintasi nykyisen valinta-alueen avulla, jossa lukee laukaisin. Ja aivan sen vieressä on vaihtoehto nimeltä ”Aktiivinen”. Napsauta tätä laajentaaksesi. Valitse ”Normaali”-tila ja valitse ”ei täyttöä” ja ”ei viivaa” tälle tilalle. Toista tämä jokaiselle tilalle, joka on Rollover, Mouse Down ja Active. Siirry muunnospaneeliin ensimmäisen liipaisimen ollessa valittuna ja laita W=10, H=10.

61 Toista edellinen vaihe jokaiselle meillä olevalle liipaisimelle. Tämä tarkoittaa, että älä käytä täyttöä tai viivaa jokaisessa tilassa ja muuta liipaisimet 10 x 10 -kokoisiksi. Siirrä liipaisimet lähemmäs toisiaan.

62 Nyt. Räätälöimme tavoitteet jokaiselle näistä triggereistä. Näkemäsi suuri suorakulmio on kohde. Valitse ensimmäinen liipaisin ja valitse sen normaali tila tilapaneelista. Valitse tämän jälkeen kohde tälle laukaisulle ja älä käytä täyttöä tai viivaa jokaisessa tilassa. Siirry sitten muunnospaneeliin ja tee tavoitteeksi W=360, H=370.

63 Toista edellinen vaihe jokaiselle kohteelle. Varmista vain, että valitset ensin liipaisimen, asetat sen normaalitilaan, valitset sitten vastaavan kohteen normaalitilassa ja käytät sitten ilman täyttöä tai vetoa. Sinun ei tarvitse muuttaa jokaisen kohteen kokoa. Tee se vain yhdelle ja sitä sovelletaan kaikkiin.

64 Nyt alamme lisätä sisältöä tähän sävellykseen. Siirry kohtaan Tiedosto > Sijoita ja avaa ensimmäinen kasvokuva ja aseta se sommitelman ulkopuolelle. Vedä tämä kuva ja laita se nyt koostumukseen. Näet, että sen oikeaan yläkulmaan ilmestyy sininen ympyrä, joka osoittaa, että tämä kuva on nyt osa sommittelua.

65 Luo kolme tekstiruutua – yksi henkilön nimelle, yksi hänen nimeämiselle ja yksi lausuntoa tai arvostelua varten. Käytä alla kirjoitettua muotoilua ja laita nämä tekstiruudut sävellyksen sisään. Varmista vain, että jokaisen kulmassa on sininen ympyrä.

• Henkilön nimelle: Fontti: Nobile Medium Italic, koko = 18, Väri: R = 37 G = 37 B = 37, keskelle tasattuna ja 100 % etureuna.
• Merkintä: Fontti: Nobile, koko = 15, väri: R = 37 G = 37 B = 37, keskelle tasattuna ja 100 % etureuna.
• Lausunnot (käänteisillä pilkuilla): Fontti: PT Sans Italic, koko = 18, väri: R = 69 G = 64 B = 68, keskelle tasattuna ja 100 % edessä.

66 Kun kasvokuva on valittuna, aseta painoviiva 4 kummallekin puolelle, väri: valkoinen, pyöristä kaikki kulmat ja lisää sädettä, kunnes se kiertyy kuvan ympärille. Käytän kulmasäteenä 100.

67 Mene kohtaan ’Effects’ (sijaitsee pyöreämpien kulmien vieressä) ja valitse ’varjo’ -valintaruutu. Laita arvot muodossa; Väri = musta, peittävyys = 37%, epäterävyys = 12, kulma = 78 ja etäisyys = 5.

68 Toista edelliset vaiheet (64 – 67) lisätäksesi sisältöä jokaiseen kohteeseen ja tallenna muutokset (Ctrl+S). Aseta tämä koostumus tiiliseinäkuvioisen suorakulmion päälle.

69 Valitse nyt koko sävellys (varmista nykyisellä valintaalueella) ja laajenna sen vaihtoehtoja napsauttamalla pientä sinistä ympyrää. Aseta asetukset alla olevan kuvan mukaisesti. Paina Ctrl+Shift+E ja katso, toimiiko se hyvin.

70 Sinun pitäisi saada seuraava tulos.

Lausunto-osion lopullinen tulos

Ota yhteyttä -osion luominen

71 Seuraava osio on Ota yhteyttä. Lisäämme tähän osioon taustakuvan, lomakkeen ja joitain tekstiruutuja. Tee ensin suorakulmio, jonka leveys on 100 % ja H = 692. Täytä se tätä osiota varten lataamallamme kuvalla ja valitse Sovitus-kohdasta täyttöasteikko. Muuta sen opasiteetti 72 %:iin.

72 Tee toinen samanleveä ja -korkuinen suorakulmio ja täytä se kaltevuudella. Aseta gradientin arvot; Peittävyys = 90 % – 46 %, väri: musta – R = 69 G = 64 B = 68, polttopiste = 66 %, suunta: vaaka ja koko: automaattinen. Aseta tämä suorakulmio kuvan päälle ja varmista, että se napsahtaa jokaisen reunan kanssa.

73 Siirry widget-kirjastoon. Valitse lomakkeista ”yksinkertainen yhteystieto” ja vedä se kankaalle. Näkyviin tulee ikkuna lomakevaihtoehdoilla. Laita lomakkeen nimi: Yhteydenottolomake, Sähköpostiosoite: laita sähköpostiosoitteesi, johon haluat vastaanottaa vierailijoiden syöttämiä tietoja, Lähetyksen jälkeen: valitse ’pysy nykyisellä sivulla’. Viimeinen vaihtoehto on ”Muokkaa yhdessä”. Varmista, että se on tarkistettu. Tällä tavalla sinun on tehtävä muutoksia vain yhteen kenttään ja niitä sovelletaan kaikkiin. Napsauta mitä tahansa kankaalla, jolloin asetusruutu katoaa.

74 Valitse lomake. Napsauta otsikkoa ”Nimi” ja napsauta sitä uudelleen, kunnes näet ”Label” kirjoitettuna nykyiselle valintaalueelle. Paina Poista. Toista tämä sähköpostien ja viestien tunnisteille ja poista ne.

75 Valitse lomake uudelleen ja valitse ensimmäinen lomakekenttä, jossa lukee ”Syötä nimi”, kunnes näet ”Tekstin syöttö” nykyisellä valintaalueella. Älä käytä täyttöä ja pohjaviivaa (paino yksi ja väri valkoinen) jokaisessa tilassa, eli tyhjästä tarkennukseen. Valitse virhetilaksi ei täyttöä ja alaviiva punainen väri painolla 1.

76 Tämän jälkeen, kun sähköpostikenttä on valittuna, valitse sen tyhjä tila uudelleen ja muokkaa kunkin tilan tekstin fonttia ja väriä alla kirjoitetulla tavalla.

• Tyhjälle, ei-tyhjälle ja tarkennetukselle tilalle: Fontti: Questrial, koko = 14, väri: valkoinen, tasattuna vasemmalle, 100 % etupuolella ja ilman kursiivia.
• Kierrätystila: muuta vain tekstin väriksi R=196 G=196 B=196 ilman kursiivia.
• Virhetila: muuta tekstin väri punaiseksi ilman kursiivia.

77 Napsauta ja valitse Lähetä-painike. Valitse sen normaali tila, pyöristä kaikki kulmat 40 säteellä ja lisää sen leveyttä alla olevan kuvakaappauksen mukaisesti. Muuta sen kirjasin muotoon Raleway Bold, koko=20, keskelle tasattu, väri: R=241 G=244 B=247, alkuun: säädä tekstiä ’lähetä’ painikkeen keskellä suurentamalla tätä arvoa (olen käyttänyt 130%) .

78 Muuta viivan väri ja tekstin väri harmaaksi (R=127 G=127 B=127). Muuta lopuksi sen ”lähetys käynnissä” -tilassa viivan ja tekstin väri taivaansiniseksi (R=41 G=171 B=226).

79 Kun valitset tälle lähetyspainikkeelle ”lähetys käynnissä”, näet toisen tekstiruudun, jossa lukee ”lähetetään lomaketta…”. Valitse tämä ruutu ja valitse sen ”lähetys käynnissä” -tila. Vaihda fontiksi Questrial, koko = 14, väri: harmaa, keskelle tasattuna, ei kursiivia. Valitse sen ”lähetys onnistui” -tila ja muuta tekstin väri taivaansiniseksi (ei kursiivia). Valitse sen lähetysvirhetila ja muuta tekstin väri punaiseksi (ei kursiivia). Yhteydenottolomake on valmis.

80 Tee kaksi tekstiruutua. Kirjoita – ota meihin yhteyttä ja kirjoita toiselle riville ”kaikki kentät ovat pakollisia”. Yhteydenottotekstiksi käytä fonttia: Rammetto One, koko=60, väri: R=241 G=244 B=247, etureuna=100% ja tasattu vasemmalle. Käytä tekstissä ”kaikki kentät ovat pakollisia” fonttia: Nobile kursivoitu, koko = 26, väri: R = 241 G = 244 B = 247, aloitus = 100 % ja vasemmalle tasattu. Käytä tässä tekstikentässä painon 1 pohjaviivaa ja väriä valkoinen.

81 Kirjoita jokin kappale toiseen luomaani tekstiruutuun. Käytä fonttia: PT Sans Italic, koko = 14, väri: R = 241 G = 244 B = 247, alku = 120%, vasemmalle tasattu ja välilyönti ennen = 15.

82 Laita nämä tekstilaatikot ja lomake kuvan päälle, jonka asetimme. Säädä ne seuraavasti.

83 Luo toinen tekstiruutu joillekin yhteystiedoille, kuten toimistoosoitteelle, sähköpostille ja puhelinnumeroille. Laita tämä tekstiruutu kuvan päälle. Sinun pitäisi saada seuraava tulos.

”Ota yhteyttä” -osion lopullinen tulos

Alatunnisteen luominen

84 Viimeinen osa on alatunniste. Alareunassa on kolme opasta, nimittäin – sivun alaosa, alatunniste ja selaimen alaosa. Sinun on nyt varmistettava, että ”sivun alaosan” opas napsahtaa yhteyttä Ota meihin -osion alareunaan ja ”alatunniste” osuu yhteen ”sivun alaosan” oppaan kanssa. Tämän jälkeen voit vetää ”selaimen alareunan” -opasta alas säätääksesi alatunnisteen tarvitsemaa tilaa.

85 Luo kaksi suorakulmiota, joiden leveys on 100 % ja H=168 ensimmäiselle ja H=37 toiselle. Muuta suuren suorakulmion täyttöväri valkoiseksi ja käytä R=47, G=48, B=55 lyhyempään.

86 Valitse ensimmäinen suorakulmio ja yritä sijoittaa se alatunnisteen alueelle. Se ei mene sinne. Sen sijaan sivun alaosan opas alkaa laajentua alaspäin. Jos haluat tehdä tästä suorakaiteesta alatunnisteen kohteen, valitse sovellusikkunan oikeassa yläkulmassa oleva Alatunniste-valintaruutu. Tee se myös toiselle suorakulmiolle.

87 Aseta nyt nämä suorakulmiot alatunnisteen alueelle ja varmista, että suuri suorakulmio on hieman alatunnisteen ohjaimen yläpuolella. Värillisen suorakulmion alaosan on osuttava selaimen oppaan alaosaan. Muuten alatunnisteen jälkeen näkyy pieni valkoinen aukko, joka ei näytä hyvältä.

88 Luo tekstiruutuja alatunnistetta varten ja kirjoita mitä haluat. Valitse vain ”alatunniste” -valintaruutu lisättävien tekstiruutujen kohdalla. Olen lisännyt tekstiä, joka sisältää vastuuvapauslausekkeen ja tekijänoikeustietoja.

89 ’Made with Adobe Muse CC’ -merkki voidaan lisätä widget-kirjastosta some-osiossa. Voit myös lisätä linkkejä Facebook-sivullesi, Twitteriin, Google+:aan, LinkedIniin, Pinterestiin, YouTube-kanavallesi tai vimeo-linkkiisi.

90 Tekijänoikeussymboli ja monet muut symbolit, jotka näet Kaikki oikeudet pidätetään -tekstin vieressä, voidaan lisätä ”Glyfit”-paneelista, joka sijaitsee sovellusikkunan oikealla puolella. Jos sitä ei ole, siirry Ikkuna-valikkoon > valitse Glyfit.

Uutiskirje-osion luominen

91 Tähän mennessä olemme suunnitelleet osiot kaikille valikkokohdille paitsi yhdelle ja se on ”Uutiskirje”. Tehdään sille jotain mielenkiintoista. Muista lataamamme ristisymboli, sitä käytetään täällä (ei ok, jos et ole ladannut sitä, voit silti seurata mukana). Valitse ensin Uutiskirje-tekstiruutu ja merkitse sen leveys ja korkeus muistiin muunnospaneelista. Omani on 81×17.

92 Avaa nyt widget-kirjasto ja vedä Lightbox-näyttö sävellykset-osiosta. Poista kaksi ensimmäistä laukaisinta (ylhäällä) ja poista kaikki kuvatekstit (alhaalla). Tee kolmannen liipaisimen kooksi sama kuin Newsletter-tekstiruudun, jonka koko on 81 x 17. Muuta sen täyttö ja viiva arvoksi ei mitään kaikissa tiloissa.

93 Vedä uutiskirjeen tekstilaatikko ja laita se tämän liipaisimen sisään siten, että tekstilaatikon kaikki reunat osuvat liipaisimen reunoihin. Vedä nyt tätä ryhmää ja aseta se uudelleen valikkoon, johon se oli aiemmin. Olemme tehneet niin, että olemme lisänneet linkin uutiskirjeen tekstiruutuun. Kun käyttäjä napsauttaa sitä, verkkosivusto häviää ja kohde tulee näkyviin.

94 Seuraava askel on mukauttaa tavoitteemme. Valitse harmaa alue ja varmista, että nykyisessä valinta-alueella lukee Kohde. Sinun on napsautettava kolme kertaa valitaksesi sen. Muuta täyttö ja viiva arvoksi ei mitään kaikissa sen tiloissa.

95 Lisää kaksi tekstiruutua ja yksinkertainen yhteydenottolomake (poista sen nimi- ja viestikentät ja säilytä vain sähköpostikenttä). Vedä ne tämän koostumuksen sisään ja varmista, että niiden kaikkien kulmissa on sininen ympyrä.

96 Mukauta lomake kuten teimme Ota yhteyttä -osiossa. Sinun pitäisi saada seuraava tulos. Käytä Pysy yhteydessä -tekstikentässä fonttia: Lobster, koko = 40, väri: valkoinen, keskelle tasattuna ja 100 % etureunassa. Käytä sen alla olevaa kuvaustekstiä varten fonttia: Ubuntu Light Italic, koko = 14, väri: valkoinen, keskelle tasattu ja 120 % etureuna. Muuta lähetyspainikkeen tekstiksi ”Tilaa”.

97 Valitse nyt sulkemispainike, siirrä sitä ja aseta se tämän lightbox-näytön oikeaan yläkulmaan alla olevan kuvan mukaisesti. Napsauta sen sisällä, kunnes näet ”Label” kirjoitettuna nykyiselle valintaalueelle. Poista etiketti.

98 Muuta tämän sulkemispainikkeen täyttö ja veto arvoon ei mitään kaikissa tiloissa ja tee sen W=40 ja H=40. Siirry kohtaan Täytä > lisää kuva ja etsi ristikuva selaamalla. Valitse sovitusvaihtoehdon alta ”sopiva mittakaava”.

99 Napsauta Uutiskirje ja näet sinisen ympyrän sen kulmassa. Napsauta sitä ja varmista, että asetukset on määritetty seuraavasti.

”Uutiskirje”-osion lopullinen tulos

Hyperlinkkien luominen

100 Viimeinen tehtävä on liittää linkit kuhunkin osioon. Voit tehdä tämän valitsemalla ’linkkiankkuri’-vaihtoehdon, joka sijaitsee yläosassa keskellä tai painamalla näppäimistön kirjainta ’a’. Näet, että kohdistin muuttaa ulkonäkönsä paikkaaseeksi, joka on ladattu linkkiankkurilla.

101 Kun napsautat kanvaa sijoittaaksesi tämän, esiin tulee valintaikkuna, jonka avulla voit nimetä ankkurin uudelleen.

102 Luo linkkiankkureita jokaiseen suunnittelemiimme osioon, eli Kotiin, Palveluihin, Miksi me, Kokemuksiin ja Ota yhteyttä. Aseta ankkurit jokaisen osan yläosaan. Kotiankkuri on esitetty alla esimerkkinä. Näiden ankkurien sijoittaminen on tärkeä vaihe, ja se tulee tehdä huolellisesti. Kun käyttäjä napsauttaa tiettyä linkkiä, verkkosivusto vierittää kohtaan, johon ankkuri on asetettu.

103 Nyt käytämme linkkejä. Voit tehdä tämän valitsemalla Koti-tekstiruudun. Siirry kohtaan ”Hyperlinkit” (ylhäällä), napsauta pientä alanuolta laajentaaksesi luetteloa. Täältä näet kaikki juuri asettamamme ankkurit. Linkitä se ”Koti”-ankkuriin. Toista tämä vaihe muille tekstilaatikoille paitsi Uutiskirjeelle, koska olemme käyttäneet siihen lightbox-näyttöä.

Lopullinen tulos hyperlinkkien luomisen jälkeen

Viimeiset silaukset – Sivun ominaisuuksien muuttaminen ja Faviconin lisääminen

104 Suunnittelutilassa napsauta kotisivua hiiren kakkospainikkeella ja valitse Sivun ominaisuudet. Valintaikkuna avautuu. Valitse ”Asetukset”-välilehti ja laita sivun nimeen – ”Tervetuloa esimerkki.com-sivustolle” ja napsauta OK. Tämä on teksti, joka näkyy selainikkunan yläosassa.

105 Siirry kohtaan Tiedosto > Sivuston ominaisuudet. Asettelu-välilehden viimeinen vaihtoehto on ”Favicon”. Kun viet hiiren sen päälle, näkyviin tulee ponnahdusikkuna, joka kertoo, mikä favicon on ja mikä sen optimaalisen koon tulisi olla. On hyvä lisätä favicon, koska se auttaa erottumaan brändistäsi ja auttaa myös käyttäjiä tunnistamaan sivustosi helposti, jos he ovat lisänneet sen kirjanmerkkeihin.

Testaus ja vienti

106 Testaa sivustoasi valitsemalla Tiedosto > Esikatsele sivustoa selaimessa tai Ctrl+Alt+E. Älä valitse ”Esikatsele sivua selaimessa” tällä kertaa, koska linkit eivät toimi sivun esikatselussa. Haluat ehkä yrittää sijoittaa ankkurit eri paikkoihin varmistaaksesi, että kun käyttäjä napsauttaa linkkiä, sivusto vierittää oikeaan osioon ja oikeaan kohtaan.

107 Siirry lopuksi kohtaan Tiedosto > Vie HTML-muodossa (Ctrl+E). Kirjoita sivuston URL-osoitteen alle mikä tahansa nimi, kuten ”example.com”, ja valitse sijainti. Napsauta OK. Sivusto on valmis.

Jokaisen sivun lopullinen tulos

Etusivu

Palvelut-osio

”Miksi me” -osio

”Lausunnot” -osio

’Ota yhteyttä’ -osio

Alatunniste-osio

”Uutiskirje”-osio

PÄÄTELMÄ

Olen varma, että olet saanut kaiken, minkä lupasin sinulle tämän opetusohjelman jälkeen. Tämä on vain esimerkki. Leiki vähän tällä mahtavalla työkalulla ja suunnittele upeita ja ammattimaisia ​​verkkosivustoja samalla kun tutkit loputtomia luovia mahdollisuuksia. Kiitos.