\n T\u00e4m\u00e4n opetusohjelman vaatimukset
\n<\/h5>\n
\n Sinun on ladattava tietyt kuvat, vektorit ja fontit t\u00e4m\u00e4n sivuston luomiseksi. Mutta voit silti seurata mukana ilman n\u00e4it\u00e4 resursseja. J\u00e4rjest\u00e4 sis\u00e4lt\u00f6 oikein luomalla sivustollesi erillinen kansio.\n<\/p>\n
- \n
- \n
\n Mene osoitteeseen pexels.com<\/a> ja lataa:\n <\/p>\n
- \n
- \n
\n 4 kuvaa kooltaan 1160 x 480 diaesityst\u00e4 varten. T\u00e4ss\u00e4 kuvakaappaus pexelsist\u00e4. Voit lis\u00e4t\u00e4 t\u00e4m\u00e4n koon t\u00e4m\u00e4n verkkosivuston mukautetun koon ruutuun.\n <\/p>\n<\/li>\n
- \n
\n 6 kuvaa kooltaan 271 x 208 ”palvelut”-osioon.\n <\/p>\n<\/li>\n
- \n
\n 1 kuva, jonka koko on 1160 x 692 Ota yhteytt\u00e4 -osioon.\n <\/p>\n<\/li>\n<\/ul>\n<\/li>\n
- \n
\n Mene osoitteeseen freepik.com<\/a> ja lataa:\n <\/p>\n
- \n
- Yksi ristikuvake (voit muokata t\u00e4t\u00e4 kuvaketta Illustratorissa tai ladata png-tiedoston Fepikist\u00e4).\n <\/li>\n
- 6 kasvokuvaa ”Lausuntoja” varten.\n <\/li>\n<\/ul>\n<\/li>\n
- \n
\n Mene osoitteeseen subtlepatterns.com<\/a> ja lataa ”tiilisein\u00e4”-kuvio ”Testimonials”-osioon.\n <\/p>\n<\/li>\n
- \n
\n Kun jatkat t\u00e4t\u00e4 opetusohjelmaa, kerron sinulle kuinka ladata tarvittavat fontit (se voidaan tehd\u00e4 Musessa).\n <\/p>\n<\/li>\n
- \n
\n K\u00e4yt\u00e4 lipsum.com- sivuston valeteksti\u00e4<\/a>.\n <\/p>\n<\/li>\n<\/ul>\n
\n ALOITETAAN!\n<\/p>\n
\n Ty\u00f6tilan valmistelu ja otsikon asettaminen\n<\/p>\n
\n 1 Luo uusi sivusto valitsemalla Tiedosto > Uusi sivusto (Ctrl+N) ja aseta arvot alla olevan kuvan mukaisesti. \u00c4l\u00e4 unohda valita ”Sticky Footer” -valintaruutua. Napsauta OK ja saat PLAN-tilan. Kaksoisnapsauta A-Masteria, joka sijaitsee alareunassa harmaalla alueella. Luot kaiken t\u00e4lle sivupohjalle.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235b3f0862.webp\")
<\/a><\/p>\n\n 2 Valitse tekstity\u00f6kalu sovellusikkunan vasemmalla puolella olevasta ty\u00f6kalulaatikosta. Luo tekstiruutu napsauttamalla ja vet\u00e4m\u00e4ll\u00e4 kangasta tai sivua. Siirry tekstipaneeliin (Ctrl+T), etsi avattavasta Kirjasimet-valikosta Verkkofontit, valitse Lis\u00e4\u00e4 verkkofontteja ja lataa seuraavat kirjasimet:\n<\/p>\n
- \n
- Rametto One\n <\/li>\n
- Kimpale\n <\/li>\n
- Kysely\n <\/li>\n
- Raleway\n <\/li>\n
- Jalo\n <\/li>\n
- PT ilman\n <\/li>\n
- Ubuntu\n <\/li>\n
- Hummeri\n <\/li>\n<\/ul>\n
\n Kun olet ladannut n\u00e4m\u00e4 fontit, poista t\u00e4m\u00e4 tekstiruutu.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235b5afeaf.webp\")
<\/a><\/p>\n\n 3 Siirry Tasot-paneeliin, joka sijaitsee sovellusikkunan oikealla puolella. Jos sit\u00e4 ei ole, valitse Ikkuna-valikko > Tasot. N\u00e4et siell\u00e4 kerroksen nimelt\u00e4 Layer 1 (sininen v\u00e4ri). T\u00e4m\u00e4 on oletustaso, ja kaikki luomasi tai kankaalle sijoittamasi menee sinne. Kaksoisnapsauta t\u00e4t\u00e4 tasoa ja anna sille nimi ”Otsikko”.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235b8cad84.webp\")
<\/a><\/p>\n\n 4 Napsauta Tasot-paneelin sis\u00e4ll\u00e4 oikeassa alakulmassa olevaa pient\u00e4 taitetun reunan paperikuvaketta. Napsauttamalla t\u00e4t\u00e4 luodaan uusi taso punaisella v\u00e4rill\u00e4. J\u00e4lleen kaksoisnapsauta t\u00e4t\u00e4 tasoa ja nime\u00e4 se uudelleen sis\u00e4ll\u00f6ksi.\n<\/p>\n
\n 5 Napsauta ja ved\u00e4 t\u00e4t\u00e4 sis\u00e4lt\u00f6kerrosta ja aseta se otsikkokerroksen alle. Olemme tehneet t\u00e4m\u00e4n, koska haluamme, ett\u00e4 otsikkomme on kaiken huipulla.\n<\/p>\n
\n 6 Valitse otsikkotaso ja kutista tasot-paneeli.\n<\/p>\n
\n 7 Valitse ty\u00f6kalulaatikosta suorakulmioty\u00f6kalu tai paina n\u00e4pp\u00e4imist\u00f6n m-n\u00e4pp\u00e4int\u00e4.\n<\/p>\n
\n 8 Piirr\u00e4 pieni suorakulmio kankaalle ja varmista, ett\u00e4 sen reunan v\u00e4ri on sininen, mik\u00e4 osoittaa, ett\u00e4 t\u00e4m\u00e4 objekti on otsikkokerroksen sis\u00e4ll\u00e4.\n<\/p>\n
\n 9 Siirry sovellusikkunan oikeassa yl\u00e4kulmassa olevaan Muunna-paneeliin. J\u00e4t\u00e4 leveys (W) ja laita 50 korkeus (H) -kent\u00e4n sis\u00e4puolelle ja paina Enter. (\u00c4l\u00e4 v\u00e4lit\u00e4 X- ja Y-arvoista.)\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235bc3e592.webp\")
<\/a><\/p>\n\n 10 Sivun yl\u00e4reunassa n\u00e4et kaksi sinist\u00e4 rivi\u00e4 (n\u00e4kyy alla olevassa kuvakaappauksessa). N\u00e4it\u00e4 kutsutaan ”oppaiksi”. Kun viet hiiren osoittimen ensimm\u00e4isen oppaan p\u00e4\u00e4lle, siin\u00e4 lukee ”Sivun yl\u00e4reuna, s\u00e4\u00e4d\u00e4 t\u00e4ytt\u00f6\u00e4 sivun yl\u00e4puolella vet\u00e4m\u00e4ll\u00e4” ja toisessa ”Otsikko, s\u00e4\u00e4d\u00e4 sijaintia vet\u00e4m\u00e4ll\u00e4”. N\u00e4iden oppaiden laatiminen heti alussa on eritt\u00e4in t\u00e4rke\u00e4\u00e4.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235bf23e62.webp\")
<\/a><\/p>\n\n 11 Nyt, kun olemme luoneet suorakulmion H=50, napsauta, pid\u00e4 alhaalla ja ved\u00e4 'sivun yl\u00e4osan' -opasta, kunnes ruudussa, joka tulee n\u00e4kyviin, kun alat vet\u00e4\u00e4, lukee Y=50.\n<\/p>\n
\n 12 Ved\u00e4 vastaavasti yll\u00e4 olevaa otsikkoohjainta sivun yl\u00e4reunaan, kunnes siin\u00e4 lukee Y=0. Olemme tehneet t\u00e4m\u00e4n m\u00e4\u00e4ritt\u00e4\u00e4ksemme otsikkoalueemme. (Haluat ehk\u00e4 kokeilla n\u00e4iden ohjainten sijoittamista eri paikkoihin eri tulosten saamiseksi, mutta se on hyv\u00e4 t\u00e4ll\u00e4 hetkell\u00e4.)\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235c2cc503.webp\")
<\/a><\/p>\n\n 13 Valitse juuri luomamme suorakulmio ja ved\u00e4 se otsikkoalueelle niin, ett\u00e4 se sopii oikein.\n<\/p>\n
\n 14 Nyt meid\u00e4n on lis\u00e4tt\u00e4v\u00e4 suorakulmion leveytt\u00e4 ja teht\u00e4v\u00e4 se 100 %, jotta otsikko n\u00e4ytt\u00e4\u00e4 t\u00e4ydelliselt\u00e4 jokaisessa n\u00e4yt\u00f6n koossa. Laajenna suorakulmio molempiin reunoihin ja varmista, ett\u00e4 se napsahtaa reunojen kanssa. N\u00e4ytt\u00f6\u00f6n tulee oranssi opas, joka varmistaa, ett\u00e4 esine on napsautettu. Kun lis\u00e4\u00e4t suorakulmion leveytt\u00e4, ponnahdusikkunassa lukee W=100% tai W=1160, kun saavutat reunan.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235c5f0fa0.webp\")
<\/a><\/p>\n\n 15 Pid\u00e4 suorakulmio valittuna, napsauta sanaa T\u00e4yt\u00e4 sovellusvalikon alla ja aseta asetukset seuraavasti. Valitse ensimm\u00e4inen v\u00e4ri mustaksi ja toinen v\u00e4ri: R=37, G=37, B=37.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235c90d279.webp\")
<\/a><\/p>\n\n 16 Valitse Tiedosto > Tallenna sivusto. Tallenna sivustosi aina, kun teet muutoksia.\n<\/p>\n
\n 17 Luo tekstiruutu ja kirjoita – ”example.com” ja muuta sen muotoilua alla olevan kuvan mukaisesti.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235cc3e77d.webp\")
<\/a><\/p>\n\n 18 S\u00e4\u00e4d\u00e4 tekstilaatikon kokoa niin, ett\u00e4 koko teksti n\u00e4kyy yhdell\u00e4 rivill\u00e4. Valitse t\u00e4m\u00e4 tekstiruutu ja ved\u00e4 se mustan suorakulmion p\u00e4\u00e4lle. Kohdista se suorakulmion pystysuoraan keskustaan \u200b\u200b(sininen viiva kertoo, milloin se on keskell\u00e4) ja napsauta se vasempaan reunaan alla olevan kuvan mukaisesti.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235cebd543.webp\")
<\/a><\/p>\n\n 19 Luo tekstiruutu ja kirjoita – ”Koti”. Muuta sen muotoilua seuraavasti. S\u00e4\u00e4d\u00e4 tekstikent\u00e4n leveytt\u00e4 ja korkeutta vastaavasti. Voit tehd\u00e4 t\u00e4m\u00e4n my\u00f6s muunnospaneelista. Omani on W=52, H=17.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d124081.webp\")
<\/a><\/p>\n\n 20 Kopioi ja liit\u00e4 t\u00e4m\u00e4 tekstiruutu ja kirjoita ”Palvelut” uuteen. S\u00e4\u00e4d\u00e4 leveytt\u00e4. Ved\u00e4 ja sijoita t\u00e4m\u00e4 tekstiruutu kodin viereen niin, ett\u00e4 ero n\u00e4iden kahden v\u00e4lill\u00e4 on hyvin pienempi. J\u00e4lleen oppaat auttavat sinua oikeaan kohdistukseen.\n<\/p>\n
\n 21 Kopioi ja liit\u00e4 t\u00e4m\u00e4 tekstiruutu nelj\u00e4 kertaa enemm\u00e4n ja kirjoita – Miksi me, suosittelut, ota yhteytt\u00e4 ja uutiskirje. Sijoita n\u00e4m\u00e4 tekstilaatikot yksitellen tasav\u00e4lein 'palvelujen' viereen.\n<\/p>\n
\n 22 Kun valintaty\u00f6kalu on valittuna ja vaihton\u00e4pp\u00e4int\u00e4 painetaan, valitse kaikki n\u00e4m\u00e4 tekstiruudut yksitellen. Siirry tekstipaneeliin, vaihda v\u00e4ri valkoiseksi. Valitse n\u00e4iden ruutujen ryhm\u00e4 ja aseta se otsikon suorakulmion p\u00e4\u00e4lle. (Pystysuoraan keskitetty ja tasattu sivun oikean reunan kanssa). T\u00e4m\u00e4 on meid\u00e4n menu.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d30933a.webp\")
<\/a><\/p>\n\n 23 Kun valintaty\u00f6kalu on valittuna ja vaihton\u00e4pp\u00e4int\u00e4 painettuna, valitse n\u00e4m\u00e4 tekstiruudut, suorakulmio ja example.com-tekstiruutu. Oikeassa yl\u00e4kulmassa n\u00e4et vaihtoehdon nimelt\u00e4 Pin. Kiinnit\u00e4 n\u00e4m\u00e4 kohteet napsauttamalla sen keskimm\u00e4ist\u00e4 yl\u00e4ruutua. T\u00e4m\u00e4 tarkoittaa, ett\u00e4 kun k\u00e4ytt\u00e4j\u00e4 selaa sivustoasi, t\u00e4m\u00e4 otsikko pysyy kiinte\u00e4n\u00e4 yl\u00e4reunassa. Se on eritt\u00e4in hy\u00f6dyllinen, koska k\u00e4ytt\u00e4j\u00e4n ei tarvitse vieritt\u00e4\u00e4 kokonaan yl\u00f6s vain valitakseen toisen vaihtoehdon.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d5928ff.webp\")
<\/a><\/p>\n\n 24 Siirry Tasot-paneeliin ja lukitse otsikkotaso. T\u00e4m\u00e4 voidaan tehd\u00e4 napsauttamalla tason nimen vasemmalla puolella olevaa ruutua. Kun lukitset tason tai mink\u00e4 tahansa objektin, se ei vaikuta sen ulkon\u00e4k\u00f6\u00f6n, mutta et voi valita n\u00e4it\u00e4 kohteita, ellet avaa lukitusta. Olemme tehneet t\u00e4m\u00e4n poistaaksemme kokonaan mahdollisuuden siirt\u00e4\u00e4 esineit\u00e4 vahingossa.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d843d05.webp\")
<\/a><\/p>\n\n 25 Valitse sis\u00e4lt\u00f6taso ja kutista tasot-paneeli.\n<\/p>\n
\n Diaesityksen perustaminen
\n<\/h3>\n\n 26 Siirry widget-kirjastoon, joka sijaitsee sovellusikkunan oikealla puolella. Jos sit\u00e4 ei ole, siirry Ikkuna-valikkoon > valitse Widget-kirjasto. Laajenna ”diaesityksi\u00e4” -osio ja valitse ”Tyhj\u00e4”. Napsauta ja ved\u00e4 t\u00e4m\u00e4 objekti kankaalle. N\u00e4ytt\u00f6\u00f6n tulee musta ikkuna diaesitysvaihtoehdoilla.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235db65202.webp\")
<\/a><\/p>\n\n 27 Varmista, ett\u00e4 asetukset on asetettu alla olevan kuvan mukaisesti. Poista alareunan osa-osiossa olevat valintaruudut, joissa lukee Edellinen, Seuraava, Tekstitykset ja Laskuri. Emme tarvitse mit\u00e4\u00e4n n\u00e4ist\u00e4.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235deacba4.webp\")
<\/a><\/p>\n\n 28 Napsauta mit\u00e4 tahansa kankaalla, jotta t\u00e4m\u00e4 ponnahdusikkuna katoaa. Napsauta nyt varovasti diaesityksen sis\u00e4ll\u00e4. Napsauttamalla sit\u00e4 kerran, n\u00e4et, ett\u00e4 ”Diaesitys” on kirjoitettu ”nykyisen valintaalueen tyyppi”. Se sijaitsee vasemmassa yl\u00e4kulmassa sovellusvalikon alla. T\u00e4ll\u00e4 alueella voit n\u00e4hd\u00e4, mit\u00e4 olet valinnut. Se on eritt\u00e4in hy\u00f6dyllinen ominaisuus, kun asettelusta tulee monimutkainen. Napsauta uudelleen ja huomaat, ett\u00e4 kuvauksessa lukee ”Sankarikuva”.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e121ebd.webp\")
<\/a><\/p>\n\n 29 Suurenna sankarikuvan leveytt\u00e4 manuaalisesti laajentamalla sit\u00e4 keskelt\u00e4. Kiinnit\u00e4 se sek\u00e4 sivun reunoihin (jotta se on 100 % leve\u00e4) ett\u00e4 otsikon suorakulmion alaosaan alla olevan kuvan mukaisesti.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e337282.webp\")
<\/a><\/p>\n\n 30 Siirry muunnospaneeliin ja laita H=500.\n<\/p>\n
\n 31 Avaa diaesityksen asetukset uudelleen napsauttamalla pient\u00e4 sinist\u00e4 ympyr\u00e4\u00e4, jonka sis\u00e4ll\u00e4 on valkoinen suorakulmio (se sijaitsee diaesityksen oikeassa yl\u00e4kulmassa).\n<\/p>\n
\n 32 Napsauta Lis\u00e4\u00e4 kuvia\u2026 -vaihtoehdon vieress\u00e4 olevaa kansiokuvaketta ja etsi kuvia, jotka ladamme diaesityst\u00e4 varten. Valitse kaikki nelj\u00e4 ja napsauta Avaa.\n<\/p>\n
\n 33 Siirry kohtaan Tiedosto > valitse Esikatselusivu selaimessa tai Ctrl+Shift+E ja katso, kuinka diaesitys toimii, kun sivusto on k\u00e4yt\u00f6ss\u00e4. Suosittelen, ett\u00e4 opettelet ulkoa t\u00e4ss\u00e4 opetusohjelmassa k\u00e4ytt\u00e4m\u00e4ni pikan\u00e4pp\u00e4imet. T\u00e4m\u00e4 auttaa sinua nopeuttamaan suunnitteluprosessia.\n<\/p>\n
\n Luodaan Palvelut-osio
\n<\/h3>\n\n 34 Nyt kun olemme m\u00e4\u00e4ritt\u00e4neet otsikon ja diaesityksen, on aika luoda osiot jokaiselle valikkoon lis\u00e4tylle kohteelle. Aloitetaan ”palveluilla”. Luo tekstiruutu ja kirjoita siihen palvelut (kaikki kirjaimet pieni\u00e4) ja muuta sen muotoilua seuraavasti.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e4de8f0.webp\")
<\/a><\/p>\n\n 35 Kaksoisnapsauta t\u00e4m\u00e4n tekstiruudun sis\u00e4ll\u00e4 ja valitse vain kirjain ”I”. Vaihda sen fontiksi Chunk ja j\u00e4t\u00e4 kaikki ennalleen. S\u00e4\u00e4d\u00e4 t\u00e4m\u00e4n tekstiruudun korkeutta. Kun pienenn\u00e4t sen korkeutta, tiettyyn kohtaan ilmestyy katkoviiva, eik\u00e4 laatikko lyhenn\u00e4. \u00c4l\u00e4 pienenn\u00e4 kokoa sen j\u00e4lkeen. T\u00e4m\u00e4 on pienin mahdollinen korkeus t\u00e4ll\u00e4 kirjasinkoolla.\n<\/p>\n
\n 36 Kun tekstiruutu on valittuna, siirry muunnospaneeliin ja aseta kiertokulmaksi -90 astetta (90 astetta negatiivinen).\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e695d45.webp\")
<\/a><\/p>\n\n 37 Siirr\u00e4 tekstikentt\u00e4 kankaan vasemmalle puolelle alla olevan kuvan mukaisesti.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e88e04c.webp\")
<\/a><\/p>\n\n 38 Haluat ehk\u00e4 loitontaa hieman n\u00e4hd\u00e4ksesi kaiken sis\u00e4ll\u00f6n kerralla tai s\u00e4\u00e4t\u00e4\u00e4ksesi kohteita oikein. Voit tehd\u00e4 t\u00e4m\u00e4n kirjoittamalla eri arvoja (alle 100 %) yl\u00e4reunassa olevaan zoomaustaso-osioon. Kun olet kirjoittanut arvon, paina enter.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235eab2968.webp\")
<\/a><\/p>\n\n 39 Siirry kohtaan Tiedosto > valitse Paikka. Valitse ensimm\u00e4inen kuva, jonka latasimme palveluita varten. Napsauta auki.\n<\/p>\n
\n 40 Kohdistin muuttaa ulkon\u00e4k\u00f6ns\u00e4 kuvalla ladatuksi paikkapistooliksi. Aseta kangas napsauttamalla sit\u00e4. Siirr\u00e4 ja aseta se niin, ett\u00e4 se on linjassa Palvelut-tekstikent\u00e4n yl\u00e4osan kanssa.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235ed9df42.webp\")
<\/a><\/p>\n\n 41 Kopioi t\u00e4m\u00e4 kuva ja liit\u00e4 se kahdesti. Valitse n\u00e4m\u00e4 liitetyt kuvat yksitellen ja kohdista ne tasav\u00e4lein ensimm\u00e4isen kuvan kanssa.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f1531ed.webp\")
<\/a><\/p>\n\n 42 Valitse toinen kuva, napsauta sit\u00e4 hiiren oikealla painikkeella ja valitse ”korvaa kuva” (se on viimeinen vaihtoehto). Selaa toinen kuva ja napsauta Avaa. Vaihda my\u00f6s kolmas kuva.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f44fa27.webp\")
<\/a><\/p>\n\n 43 Luo tekstiruutuja palveluiden tiedoille ja k\u00e4yt\u00e4 otsikoiden ja kappaleiden muotoilua alla kirjoitetulla tavalla. Oppaat auttavat sinua kohdistamaan ne oikein.\n<\/p>\n
- \n
- \n Otsikot:<\/strong> Fontti: Raleway Lihavoitu, Koko=20, V\u00e4ri: Musta, Tasattu vasemmalle ja 100 % etureuna.\n <\/li>\n
- \n Kappaleet:<\/strong> Fontti: Questrial, Koko = 15, V\u00e4ri: R = 67 G = 67 B = 67, Tasattu vasemmalle ja 120 % etureuna.\n <\/li>\n<\/ul>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f67e871.webp\")
<\/a><\/p>\n\n 44 Sijoita kolme muuta kuvaa kuten teimme edellisiss\u00e4 vaiheissa ja luo niille vastaavalla tavalla kuvausteksti. Sinun pit\u00e4isi saada seuraava tulos.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f8b3f61.webp\")
<\/a><\/p>\n\n Palvelut-osion lopullinen tulos
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235fb6b3b2.webp\")
<\/a><\/p>\n\n ”Miksi me” -osion luominen
\n<\/h3>\n\n 45 Seuraava on ”Miksi me” -osio. T\u00e4m\u00e4 on hieman monimutkainen. Ole varovainen esineiden valinnassa. Luo ensin suorakulmio, jonka leveys on 100 % ja H = 996. T\u00e4yt\u00e4 se v\u00e4rill\u00e4 (R=47, G=48, B=55). Napsauta t\u00e4t\u00e4 suorakulmiota hiiren kakkospainikkeella > J\u00e4rjest\u00e4 > valitse ”l\u00e4het\u00e4 taaksep\u00e4in” (\u00e4l\u00e4 l\u00e4het\u00e4 taaksep\u00e4in).\n<\/p>\n
\n 46 Laajenna ty\u00f6skentelyaluettasi napsauttamalla ja vet\u00e4m\u00e4ll\u00e4 ”sivun alaosan” -opasta, jotta sinulla on tarpeeksi tilaa luoda sis\u00e4lt\u00f6\u00e4, joka sijoitetaan juuri luomaamme suorakulmioon.\n<\/p>\n
\n 47 Vierit\u00e4 alas valkoiseen tyhj\u00e4\u00e4n tilaan ja tee toinen suorakulmio W=351 ja H=351. T\u00e4yt\u00e4 se valkoisella v\u00e4rill\u00e4 ilman viivaa.\n<\/p>\n
\n 48 Siirry kohtaan ”kulman s\u00e4de” (se sijaitsee viivan vieress\u00e4 sovellusvalikon alla). Py\u00f6re\u00e4 ne napsauttamalla kaikkia kulmia ja laita 500 sen viereiseen ruutuun.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235fd21bf3.webp\")
<\/a><\/p>\n\n 49 Sinulla on ympyr\u00e4. Ved\u00e4 t\u00e4m\u00e4 ympyr\u00e4 suorakulmion p\u00e4\u00e4lle ja s\u00e4\u00e4d\u00e4 sit\u00e4 seuraavasti. Kulman s\u00e4teen vieress\u00e4 on vaihtoehto nimelt\u00e4 'Opacity'. Kun ympyr\u00e4 on valittu, laita 14 t\u00e4h\u00e4n ruutuun.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235ff30452.webp\")
<\/a><\/p>\n\n 50 Luo tekstiruutu ja kirjoita – miksi me (kaikki pieni\u00e4). Muuta sen fontiksi Rammetto One, koko = 100, Color R = 241 G = 244 B = 247, etureuna 100 % ja aseta se keskelle. Aseta t\u00e4m\u00e4 tekstiruutu ympyr\u00e4n sis\u00e4\u00e4n ja kohdista se oikein.\n<\/p>\n
\n 51 Nyt luomme katkoviivat. Tee suorakulmio W=9 ja H=9, ei t\u00e4ytt\u00f6\u00e4. Napsauta t\u00e4yt\u00f6n vieress\u00e4 olevaa sanaa ”viiva”. Valitse v\u00e4ri R=241 G=244 B=247. Napsauta ketjukuvaketta katkaistaksesi sen ja laita ”1” alaiskun painoon.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236015d3b8.webp\")
<\/a><\/p>\n\n 52 Kopioi t\u00e4m\u00e4 yksipuolinen suorakulmio ja liit\u00e4 se useita kertoja. J\u00e4rjest\u00e4 ne yhdeksi riviksi (zoomaa hieman zoomausty\u00f6kalulla, jos sinun on vaikea n\u00e4hd\u00e4 n\u00e4it\u00e4 suorakulmioita). Kun saat haluamasi katkoviivan pituuden, valitse kaikki n\u00e4m\u00e4 suorakulmiot, napsauta hiiren kakkospainikkeella ja valitse Ryhm\u00e4. Kopioi ja liit\u00e4 t\u00e4m\u00e4 ryhm\u00e4 muita katkoviivoja varten.\n<\/p>\n
\n 53 Jos haluat vinojen katkoviivojen, yrit\u00e4 asettaa muunnospaneeliin erilaisia \u200b\u200bkiertokulmia. Olen k\u00e4ytt\u00e4nyt 150 ja 30 astetta. Sinun on poistettava joitain suorakulmioita t\u00e4st\u00e4 ryhm\u00e4st\u00e4 saadaksesi lyhyempi\u00e4 pituuksia. S\u00e4\u00e4d\u00e4 n\u00e4m\u00e4 viivat l\u00e4hell\u00e4 ympyr\u00e4\u00e4 alla olevan kuvan mukaisesti.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823602da73a.webp\")
<\/a><\/p>\n\n 54 Nyt lis\u00e4\u00e4mme teksti\u00e4 numeroita, otsikoita ja kuvauksia varten. K\u00e4yt\u00e4 seuraavia asetuksia kullekin niist\u00e4 ja s\u00e4\u00e4d\u00e4 n\u00e4it\u00e4 tekstiruutuja alla kuvatulla tavalla.\n<\/p>\n
- \n
- \n Numeroille:<\/strong> kirjasin = Rammetto One, v\u00e4ri: 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').\n <\/li>\n
- \n Otsikot:<\/strong> Fontti = Lihavoitu, Koko = 18, V\u00e4ri: Valkoinen, Tasattu keskelle ja 100 % edess\u00e4.\n <\/li>\n
- \n Kappaleet:<\/strong> Fontti = Questrial, Koko = 16, V\u00e4ri: R = 241 G = 244 B = 247, Tasattu keskelle ja 120 % etureuna.\n <\/li>\n<\/ul>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823605a97a7.webp\")
<\/a><\/p>\n\n Miksi me -osion lopullinen tulos
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382360890068.webp\")
<\/a><\/p>\n\n Luodaan ”Lausunnot”-osio
\n<\/h3>\n\n 55 Luo j\u00e4lleen tilaa ty\u00f6skentelylle vet\u00e4m\u00e4ll\u00e4 sivun alareunaa. Tee suorakulmio, jonka leveys on 100 % ja H=486.\n<\/p>\n
\n 56 Kun suorakulmio on valittuna, napsauta sanaa ”T\u00e4yt\u00e4” ja napsauta ”Lis\u00e4\u00e4 kuva” kuvavaihtoehdon vieress\u00e4. Selaa lataamamme tiilisein\u00e4kuviokuvaa. Valitse Sovitus-kohdasta ”Laatat”, jos haluat t\u00e4ytt\u00e4\u00e4 koko suorakulmion t\u00e4ll\u00e4 tekstuurilla.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382360b46ae7.webp\")
<\/a><\/p>\n\n 57 Vierit\u00e4 alas tyhj\u00e4\u00e4n tilaan ja tee muunnospaneelin avulla tekstiruutu, jonka koko on W=406, H=289. Kirjoita – ”mit\u00e4 muilla on sanottavaa” (kaikki pieni). Muuta sen fontiksi Rammetto One, koko=70, tasaa vasemmalle, v\u00e4riarvot R=37 G=37 B=37 ja etureuna=100%.\n<\/p>\n
\n 58 Kun t\u00e4m\u00e4 tekstiruutu on valittuna, napsauta sanaa veto, k\u00e4yt\u00e4 oikeaa painoviivaa yksi ja mustaa v\u00e4ri\u00e4 siihen. Ved\u00e4 t\u00e4m\u00e4 tekstiruutu ja aseta se tiilisein\u00e4kuvioisen suorakulmion p\u00e4\u00e4lle.\n<\/p>\n
\n 59 Seuraava vaihe on asiakkaiden suosittelujen lis\u00e4\u00e4minen. K\u00e4yt\u00e4mme t\u00e4t\u00e4 varten py\u00f6reit\u00e4 vektorikuvia, jotka latasimme osoitteesta freepik.com. Siirry j\u00e4lleen valkoiseen tyhj\u00e4\u00e4n tilaan, jotta voit mukauttaa s\u00e4vellyksesi oikein.\n<\/p>\n
\n 60 Siirry Widgets-kirjastoon ja ved\u00e4 'Tyhj\u00e4' s\u00e4vellykset-osiosta kankaalle. Napsauta plusmerkki\u00e4 lis\u00e4t\u00e4ksesi kolme muuta triggeri\u00e4. Valitse varovasti ensimm\u00e4inen laukaisu ja varmista valintasi nykyisen valinta-alueen avulla, jossa lukee laukaisin. Ja aivan sen vieress\u00e4 on vaihtoehto nimelt\u00e4 ”Aktiivinen”. Napsauta t\u00e4t\u00e4 laajentaaksesi. Valitse ”Normaali”-tila ja valitse ”ei t\u00e4ytt\u00f6\u00e4” ja ”ei viivaa” t\u00e4lle tilalle. Toista t\u00e4m\u00e4 jokaiselle tilalle, joka on Rollover, Mouse Down ja Active. Siirry muunnospaneeliin ensimm\u00e4isen liipaisimen ollessa valittuna ja laita W=10, H=10.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382360de4579.webp\")
<\/a><\/p>\n\n 61 Toista edellinen vaihe jokaiselle meill\u00e4 olevalle liipaisimelle. T\u00e4m\u00e4 tarkoittaa, ett\u00e4 \u00e4l\u00e4 k\u00e4yt\u00e4 t\u00e4ytt\u00f6\u00e4 tai viivaa jokaisessa tilassa ja muuta liipaisimet 10 x 10 -kokoisiksi. Siirr\u00e4 liipaisimet l\u00e4hemm\u00e4s toisiaan.\n<\/p>\n
\n 62 Nyt. R\u00e4\u00e4t\u00e4l\u00f6imme tavoitteet jokaiselle n\u00e4ist\u00e4 triggereist\u00e4. N\u00e4kem\u00e4si suuri suorakulmio on kohde. Valitse ensimm\u00e4inen liipaisin ja valitse sen normaali tila tilapaneelista. Valitse t\u00e4m\u00e4n j\u00e4lkeen kohde t\u00e4lle laukaisulle ja \u00e4l\u00e4 k\u00e4yt\u00e4 t\u00e4ytt\u00f6\u00e4 tai viivaa jokaisessa tilassa. Siirry sitten muunnospaneeliin ja tee tavoitteeksi W=360, H=370.\n<\/p>\n
\n 63 Toista edellinen vaihe jokaiselle kohteelle. Varmista vain, ett\u00e4 valitset ensin liipaisimen, asetat sen normaalitilaan, valitset sitten vastaavan kohteen normaalitilassa ja k\u00e4yt\u00e4t sitten ilman t\u00e4ytt\u00f6\u00e4 tai vetoa. Sinun ei tarvitse muuttaa jokaisen kohteen kokoa. Tee se vain yhdelle ja sit\u00e4 sovelletaan kaikkiin.\n<\/p>\n
\n 64 Nyt alamme lis\u00e4t\u00e4 sis\u00e4lt\u00f6\u00e4 t\u00e4h\u00e4n s\u00e4vellykseen. Siirry kohtaan Tiedosto > Sijoita ja avaa ensimm\u00e4inen kasvokuva ja aseta se sommitelman ulkopuolelle. Ved\u00e4 t\u00e4m\u00e4 kuva ja laita se nyt koostumukseen. N\u00e4et, ett\u00e4 sen oikeaan yl\u00e4kulmaan ilmestyy sininen ympyr\u00e4, joka osoittaa, ett\u00e4 t\u00e4m\u00e4 kuva on nyt osa sommittelua.\n<\/p>\n
\n 65 Luo kolme tekstiruutua \u2013 yksi henkil\u00f6n nimelle, yksi h\u00e4nen nime\u00e4miselle ja yksi lausuntoa tai arvostelua varten. K\u00e4yt\u00e4 alla kirjoitettua muotoilua ja laita n\u00e4m\u00e4 tekstiruudut s\u00e4vellyksen sis\u00e4\u00e4n. Varmista vain, ett\u00e4 jokaisen kulmassa on sininen ympyr\u00e4.\n<\/p>\n
- \n
- \n Henkil\u00f6n nimelle:<\/strong> Fontti: Nobile Medium Italic, koko = 18, V\u00e4ri: R = 37 G = 37 B = 37, keskelle tasattuna ja 100 % etureuna.\n <\/li>\n
- \n Merkint\u00e4:<\/strong> Fontti: Nobile, koko = 15, v\u00e4ri: R = 37 G = 37 B = 37, keskelle tasattuna ja 100 % etureuna.\n <\/li>\n
- \n Lausunnot (k\u00e4\u00e4nteisill\u00e4 pilkuilla):<\/strong> Fontti: PT Sans Italic, koko = 18, v\u00e4ri: R = 69 G = 64 B = 68, keskelle tasattuna ja 100 % edess\u00e4.\n <\/li>\n<\/ul>\n
\n 66 Kun kasvokuva on valittuna, aseta painoviiva 4 kummallekin puolelle, v\u00e4ri: valkoinen, py\u00f6rist\u00e4 kaikki kulmat ja lis\u00e4\u00e4 s\u00e4dett\u00e4, kunnes se kiertyy kuvan ymp\u00e4rille. K\u00e4yt\u00e4n kulmas\u00e4teen\u00e4 100.\n<\/p>\n
\n 67 Mene kohtaan 'Effects' (sijaitsee py\u00f6re\u00e4mpien kulmien vieress\u00e4) ja valitse 'varjo' -valintaruutu. Laita arvot muodossa; V\u00e4ri = musta, peitt\u00e4vyys = 37%, ep\u00e4ter\u00e4vyys = 12, kulma = 78 ja et\u00e4isyys = 5.\n<\/p>\n
\n 68 Toista edelliset vaiheet (64 – 67) lis\u00e4t\u00e4ksesi sis\u00e4lt\u00f6\u00e4 jokaiseen kohteeseen ja tallenna muutokset (Ctrl+S). Aseta t\u00e4m\u00e4 koostumus tiilisein\u00e4kuvioisen suorakulmion p\u00e4\u00e4lle.\n<\/p>\n
\n 69 Valitse nyt koko s\u00e4vellys (varmista nykyisell\u00e4 valintaalueella) ja laajenna sen vaihtoehtoja napsauttamalla pient\u00e4 sinist\u00e4 ympyr\u00e4\u00e4. Aseta asetukset alla olevan kuvan mukaisesti. Paina Ctrl+Shift+E ja katso, toimiiko se hyvin.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361123532.webp\")
<\/a><\/p>\n\n 70 Sinun pit\u00e4isi saada seuraava tulos.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361448e2e.webp\")
<\/a><\/p>\n\n Lausunto-osion lopullinen tulos
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823618421c8.webp\")
<\/a><\/p>\n\n Ota yhteytt\u00e4 -osion luominen
\n<\/h3>\n\n 71 Seuraava osio on Ota yhteytt\u00e4. Lis\u00e4\u00e4mme t\u00e4h\u00e4n osioon taustakuvan, lomakkeen ja joitain tekstiruutuja. Tee ensin suorakulmio, jonka leveys on 100 % ja H = 692. T\u00e4yt\u00e4 se t\u00e4t\u00e4 osiota varten lataamallamme kuvalla ja valitse Sovitus-kohdasta t\u00e4ytt\u00f6asteikko. Muuta sen opasiteetti 72 %:iin.\n<\/p>\n
\n 72 Tee toinen samanleve\u00e4 ja -korkuinen suorakulmio ja t\u00e4yt\u00e4 se kaltevuudella. Aseta gradientin arvot; Peitt\u00e4vyys = 90 % – 46 %, v\u00e4ri: musta – R = 69 G = 64 B = 68, polttopiste = 66 %, suunta: vaaka ja koko: automaattinen. Aseta t\u00e4m\u00e4 suorakulmio kuvan p\u00e4\u00e4lle ja varmista, ett\u00e4 se napsahtaa jokaisen reunan kanssa.\n<\/p>\n
\n 73 Siirry widget-kirjastoon. Valitse lomakkeista ”yksinkertainen yhteystieto” ja ved\u00e4 se kankaalle. N\u00e4kyviin tulee ikkuna lomakevaihtoehdoilla. Laita lomakkeen nimi: Yhteydenottolomake, S\u00e4hk\u00f6postiosoite: laita s\u00e4hk\u00f6postiosoitteesi, johon haluat vastaanottaa vierailijoiden sy\u00f6tt\u00e4mi\u00e4 tietoja, L\u00e4hetyksen j\u00e4lkeen: valitse 'pysy nykyisell\u00e4 sivulla'. Viimeinen vaihtoehto on ”Muokkaa yhdess\u00e4”. Varmista, ett\u00e4 se on tarkistettu. T\u00e4ll\u00e4 tavalla sinun on teht\u00e4v\u00e4 muutoksia vain yhteen kentt\u00e4\u00e4n ja niit\u00e4 sovelletaan kaikkiin. Napsauta mit\u00e4 tahansa kankaalla, jolloin asetusruutu katoaa.\n<\/p>\n
\n 74 Valitse lomake. Napsauta otsikkoa ”Nimi” ja napsauta sit\u00e4 uudelleen, kunnes n\u00e4et ”Label” kirjoitettuna nykyiselle valintaalueelle. Paina Poista. Toista t\u00e4m\u00e4 s\u00e4hk\u00f6postien ja viestien tunnisteille ja poista ne.\n<\/p>\n
\n 75 Valitse lomake uudelleen ja valitse ensimm\u00e4inen lomakekentt\u00e4, jossa lukee ”Sy\u00f6t\u00e4 nimi”, kunnes n\u00e4et ”Tekstin sy\u00f6tt\u00f6” nykyisell\u00e4 valintaalueella. \u00c4l\u00e4 k\u00e4yt\u00e4 t\u00e4ytt\u00f6\u00e4 ja pohjaviivaa (paino yksi ja v\u00e4ri valkoinen) jokaisessa tilassa, eli tyhj\u00e4st\u00e4 tarkennukseen. Valitse virhetilaksi ei t\u00e4ytt\u00f6\u00e4 ja alaviiva punainen v\u00e4ri painolla 1.\n<\/p>\n
\n 76 T\u00e4m\u00e4n j\u00e4lkeen, kun s\u00e4hk\u00f6postikentt\u00e4 on valittuna, valitse sen tyhj\u00e4 tila uudelleen ja muokkaa kunkin tilan tekstin fonttia ja v\u00e4ri\u00e4 alla kirjoitetulla tavalla.\n<\/p>\n
- \n
- \n Tyhj\u00e4lle, ei-tyhj\u00e4lle ja tarkennetukselle tilalle:<\/strong> Fontti: Questrial, koko = 14, v\u00e4ri: valkoinen, tasattuna vasemmalle, 100 % etupuolella ja ilman kursiivia.\n <\/li>\n
- \n Kierr\u00e4tystila:<\/strong> muuta vain tekstin v\u00e4riksi R=196 G=196 B=196 ilman kursiivia.\n <\/li>\n
- \n Virhetila:<\/strong> muuta tekstin v\u00e4ri punaiseksi ilman kursiivia.\n <\/li>\n<\/ul>\n
\n 77 Napsauta ja valitse L\u00e4het\u00e4-painike. Valitse sen normaali tila, py\u00f6rist\u00e4 kaikki kulmat 40 s\u00e4teell\u00e4 ja lis\u00e4\u00e4 sen leveytt\u00e4 alla olevan kuvakaappauksen mukaisesti. Muuta sen kirjasin muotoon Raleway Bold, koko=20, keskelle tasattu, v\u00e4ri: R=241 G=244 B=247, alkuun: s\u00e4\u00e4d\u00e4 teksti\u00e4 'l\u00e4het\u00e4' painikkeen keskell\u00e4 suurentamalla t\u00e4t\u00e4 arvoa (olen k\u00e4ytt\u00e4nyt 130%) .\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361be815c.webp\")
<\/a><\/p>\n\n 78 Muuta viivan v\u00e4ri ja tekstin v\u00e4ri harmaaksi (R=127 G=127 B=127). Muuta lopuksi sen ”l\u00e4hetys k\u00e4ynniss\u00e4” -tilassa viivan ja tekstin v\u00e4ri taivaansiniseksi (R=41 G=171 B=226).\n<\/p>\n
\n 79 Kun valitset t\u00e4lle l\u00e4hetyspainikkeelle ”l\u00e4hetys k\u00e4ynniss\u00e4”, n\u00e4et toisen tekstiruudun, jossa lukee ”l\u00e4hetet\u00e4\u00e4n lomaketta…”. Valitse t\u00e4m\u00e4 ruutu ja valitse sen ”l\u00e4hetys k\u00e4ynniss\u00e4” -tila. Vaihda fontiksi Questrial, koko = 14, v\u00e4ri: harmaa, keskelle tasattuna, ei kursiivia. Valitse sen ”l\u00e4hetys onnistui” -tila ja muuta tekstin v\u00e4ri taivaansiniseksi (ei kursiivia). Valitse sen l\u00e4hetysvirhetila ja muuta tekstin v\u00e4ri punaiseksi (ei kursiivia). Yhteydenottolomake on valmis.\n<\/p>\n
\n 80 Tee kaksi tekstiruutua. Kirjoita – ota meihin yhteytt\u00e4 ja kirjoita toiselle riville ”kaikki kent\u00e4t ovat pakollisia”. Yhteydenottotekstiksi k\u00e4yt\u00e4 fonttia: Rammetto One, koko=60, v\u00e4ri: R=241 G=244 B=247, etureuna=100% ja tasattu vasemmalle. K\u00e4yt\u00e4 tekstiss\u00e4 ”kaikki kent\u00e4t ovat pakollisia” fonttia: Nobile kursivoitu, koko = 26, v\u00e4ri: R = 241 G = 244 B = 247, aloitus = 100 % ja vasemmalle tasattu. K\u00e4yt\u00e4 t\u00e4ss\u00e4 tekstikent\u00e4ss\u00e4 painon 1 pohjaviivaa ja v\u00e4ri\u00e4 valkoinen.\n<\/p>\n
\n 81 Kirjoita jokin kappale toiseen luomaani tekstiruutuun. K\u00e4yt\u00e4 fonttia: PT Sans Italic, koko = 14, v\u00e4ri: R = 241 G = 244 B = 247, alku = 120%, vasemmalle tasattu ja v\u00e4lily\u00f6nti ennen = 15.\n<\/p>\n
\n 82 Laita n\u00e4m\u00e4 tekstilaatikot ja lomake kuvan p\u00e4\u00e4lle, jonka asetimme. S\u00e4\u00e4d\u00e4 ne seuraavasti.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361dd708d.webp\")
<\/a><\/p>\n\n 83 Luo toinen tekstiruutu joillekin yhteystiedoille, kuten toimistoosoitteelle, s\u00e4hk\u00f6postille ja puhelinnumeroille. Laita t\u00e4m\u00e4 tekstiruutu kuvan p\u00e4\u00e4lle. Sinun pit\u00e4isi saada seuraava tulos.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361fd3a10.webp\")
<\/a><\/p>\n\n ”Ota yhteytt\u00e4” -osion lopullinen tulos
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236220ca76.webp\")
<\/a><\/p>\n\n Alatunnisteen luominen
\n<\/h3>\n\n 84 Viimeinen osa on alatunniste. Alareunassa on kolme opasta, nimitt\u00e4in – sivun alaosa, alatunniste ja selaimen alaosa. Sinun on nyt varmistettava, ett\u00e4 ”sivun alaosan” opas napsahtaa yhteytt\u00e4 Ota meihin -osion alareunaan ja ”alatunniste” osuu yhteen ”sivun alaosan” oppaan kanssa. T\u00e4m\u00e4n j\u00e4lkeen voit vet\u00e4\u00e4 ”selaimen alareunan” -opasta alas s\u00e4\u00e4t\u00e4\u00e4ksesi alatunnisteen tarvitsemaa tilaa.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236248fda2.webp\")
<\/a><\/p>\n\n 85 Luo kaksi suorakulmiota, joiden leveys on 100 % ja H=168 ensimm\u00e4iselle ja H=37 toiselle. Muuta suuren suorakulmion t\u00e4ytt\u00f6v\u00e4ri valkoiseksi ja k\u00e4yt\u00e4 R=47, G=48, B=55 lyhyemp\u00e4\u00e4n.\n<\/p>\n
\n 86 Valitse ensimm\u00e4inen suorakulmio ja yrit\u00e4 sijoittaa se alatunnisteen alueelle. Se ei mene sinne. Sen sijaan sivun alaosan opas alkaa laajentua alasp\u00e4in. Jos haluat tehd\u00e4 t\u00e4st\u00e4 suorakaiteesta alatunnisteen kohteen, valitse sovellusikkunan oikeassa yl\u00e4kulmassa oleva Alatunniste-valintaruutu. Tee se my\u00f6s toiselle suorakulmiolle.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823626e43d3.webp\")
<\/a><\/p>\n\n 87 Aseta nyt n\u00e4m\u00e4 suorakulmiot alatunnisteen alueelle ja varmista, ett\u00e4 suuri suorakulmio on hieman alatunnisteen ohjaimen yl\u00e4puolella. V\u00e4rillisen suorakulmion alaosan on osuttava selaimen oppaan alaosaan. Muuten alatunnisteen j\u00e4lkeen n\u00e4kyy pieni valkoinen aukko, joka ei n\u00e4yt\u00e4 hyv\u00e4lt\u00e4.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823629217b3.webp\")
<\/a><\/p>\n\n 88 Luo tekstiruutuja alatunnistetta varten ja kirjoita mit\u00e4 haluat. Valitse vain ”alatunniste” -valintaruutu lis\u00e4tt\u00e4vien tekstiruutujen kohdalla. Olen lis\u00e4nnyt teksti\u00e4, joka sis\u00e4lt\u00e4\u00e4 vastuuvapauslausekkeen ja tekij\u00e4noikeustietoja.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382362b623c3.webp\")
<\/a><\/p>\n\n 89 'Made with Adobe Muse CC' -merkki voidaan lis\u00e4t\u00e4 widget-kirjastosta some-osiossa. Voit my\u00f6s lis\u00e4t\u00e4 linkkej\u00e4 Facebook-sivullesi, Twitteriin, Google+:aan, LinkedIniin, Pinterestiin, YouTube-kanavallesi tai vimeo-linkkiisi.\n<\/p>\n
\n 90 Tekij\u00e4noikeussymboli ja monet muut symbolit, jotka n\u00e4et Kaikki oikeudet pid\u00e4tet\u00e4\u00e4n -tekstin vieress\u00e4, voidaan lis\u00e4t\u00e4 ”Glyfit”-paneelista, joka sijaitsee sovellusikkunan oikealla puolella. Jos sit\u00e4 ei ole, siirry Ikkuna-valikkoon > valitse Glyfit.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382362e4f736.webp\")
<\/a><\/p>\n\n Uutiskirje-osion luominen
\n<\/h3>\n\n 91 T\u00e4h\u00e4n menness\u00e4 olemme suunnitelleet osiot kaikille valikkokohdille paitsi yhdelle ja se on ”Uutiskirje”. Tehd\u00e4\u00e4n sille jotain mielenkiintoista. Muista lataamamme ristisymboli, sit\u00e4 k\u00e4ytet\u00e4\u00e4n t\u00e4\u00e4ll\u00e4 (ei ok, jos et ole ladannut sit\u00e4, voit silti seurata mukana). Valitse ensin Uutiskirje-tekstiruutu ja merkitse sen leveys ja korkeus muistiin muunnospaneelista. Omani on 81×17.\n<\/p>\n
\n 92 Avaa nyt widget-kirjasto ja ved\u00e4 Lightbox-n\u00e4ytt\u00f6 s\u00e4vellykset-osiosta. Poista kaksi ensimm\u00e4ist\u00e4 laukaisinta (ylh\u00e4\u00e4ll\u00e4) ja poista kaikki kuvatekstit (alhaalla). Tee kolmannen liipaisimen kooksi sama kuin Newsletter-tekstiruudun, jonka koko on 81 x 17. Muuta sen t\u00e4ytt\u00f6 ja viiva arvoksi ei mit\u00e4\u00e4n kaikissa tiloissa.\n<\/p>\n
\n 93 Ved\u00e4 uutiskirjeen tekstilaatikko ja laita se t\u00e4m\u00e4n liipaisimen sis\u00e4\u00e4n siten, ett\u00e4 tekstilaatikon kaikki reunat osuvat liipaisimen reunoihin. Ved\u00e4 nyt t\u00e4t\u00e4 ryhm\u00e4\u00e4 ja aseta se uudelleen valikkoon, johon se oli aiemmin. Olemme tehneet niin, ett\u00e4 olemme lis\u00e4nneet linkin uutiskirjeen tekstiruutuun. Kun k\u00e4ytt\u00e4j\u00e4 napsauttaa sit\u00e4, verkkosivusto h\u00e4vi\u00e4\u00e4 ja kohde tulee n\u00e4kyviin.\n<\/p>\n
\n 94 Seuraava askel on mukauttaa tavoitteemme. Valitse harmaa alue ja varmista, ett\u00e4 nykyisess\u00e4 valinta-alueella lukee Kohde. Sinun on napsautettava kolme kertaa valitaksesi sen. Muuta t\u00e4ytt\u00f6 ja viiva arvoksi ei mit\u00e4\u00e4n kaikissa sen tiloissa.\n<\/p>\n
\n 95 Lis\u00e4\u00e4 kaksi tekstiruutua ja yksinkertainen yhteydenottolomake (poista sen nimi- ja viestikent\u00e4t ja s\u00e4ilyt\u00e4 vain s\u00e4hk\u00f6postikentt\u00e4). Ved\u00e4 ne t\u00e4m\u00e4n koostumuksen sis\u00e4\u00e4n ja varmista, ett\u00e4 niiden kaikkien kulmissa on sininen ympyr\u00e4.\n<\/p>\n
\n 96 Mukauta lomake kuten teimme Ota yhteytt\u00e4 -osiossa. Sinun pit\u00e4isi saada seuraava tulos. K\u00e4yt\u00e4 Pysy yhteydess\u00e4 -tekstikent\u00e4ss\u00e4 fonttia: Lobster, koko = 40, v\u00e4ri: valkoinen, keskelle tasattuna ja 100 % etureunassa. K\u00e4yt\u00e4 sen alla olevaa kuvausteksti\u00e4 varten fonttia: Ubuntu Light Italic, koko = 14, v\u00e4ri: valkoinen, keskelle tasattu ja 120 % etureuna. Muuta l\u00e4hetyspainikkeen tekstiksi ”Tilaa”.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823631ea47b.webp\")
<\/a><\/p>\n\n 97 Valitse nyt sulkemispainike, siirr\u00e4 sit\u00e4 ja aseta se t\u00e4m\u00e4n lightbox-n\u00e4yt\u00f6n oikeaan yl\u00e4kulmaan alla olevan kuvan mukaisesti. Napsauta sen sis\u00e4ll\u00e4, kunnes n\u00e4et ”Label” kirjoitettuna nykyiselle valintaalueelle. Poista etiketti.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363507e52.webp\")
<\/a><\/p>\n\n 98 Muuta t\u00e4m\u00e4n sulkemispainikkeen t\u00e4ytt\u00f6 ja veto arvoon ei mit\u00e4\u00e4n kaikissa tiloissa ja tee sen W=40 ja H=40. Siirry kohtaan T\u00e4yt\u00e4 > lis\u00e4\u00e4 kuva ja etsi ristikuva selaamalla. Valitse sovitusvaihtoehdon alta ”sopiva mittakaava”.\n<\/p>\n
\n 99 Napsauta Uutiskirje ja n\u00e4et sinisen ympyr\u00e4n sen kulmassa. Napsauta sit\u00e4 ja varmista, ett\u00e4 asetukset on m\u00e4\u00e4ritetty seuraavasti.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236383b97c.webp\")
<\/a><\/p>\n\n ”Uutiskirje”-osion lopullinen tulos
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363ae64bc.webp\")
<\/a><\/p>\n\n Hyperlinkkien luominen
\n<\/h3>\n\n 100 Viimeinen teht\u00e4v\u00e4 on liitt\u00e4\u00e4 linkit kuhunkin osioon. Voit tehd\u00e4 t\u00e4m\u00e4n valitsemalla 'linkkiankkuri'-vaihtoehdon, joka sijaitsee yl\u00e4osassa keskell\u00e4 tai painamalla n\u00e4pp\u00e4imist\u00f6n kirjainta 'a'. N\u00e4et, ett\u00e4 kohdistin muuttaa ulkon\u00e4k\u00f6ns\u00e4 paikkaaseeksi, joka on ladattu linkkiankkurilla.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363d80277.webp\")
<\/a><\/p>\n\n 101 Kun napsautat kanvaa sijoittaaksesi t\u00e4m\u00e4n, esiin tulee valintaikkuna, jonka avulla voit nimet\u00e4 ankkurin uudelleen.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363feb1d6.webp\")
<\/a><\/p>\n\n 102 Luo linkkiankkureita jokaiseen suunnittelemiimme osioon, eli Kotiin, Palveluihin, Miksi me, Kokemuksiin ja Ota yhteytt\u00e4. Aseta ankkurit jokaisen osan yl\u00e4osaan. Kotiankkuri on esitetty alla esimerkkin\u00e4. N\u00e4iden ankkurien sijoittaminen on t\u00e4rke\u00e4 vaihe, ja se tulee tehd\u00e4 huolellisesti. Kun k\u00e4ytt\u00e4j\u00e4 napsauttaa tietty\u00e4 linkki\u00e4, verkkosivusto vieritt\u00e4\u00e4 kohtaan, johon ankkuri on asetettu.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823642ca0c4.webp\")
<\/a><\/p>\n\n 103 Nyt k\u00e4yt\u00e4mme linkkej\u00e4. Voit tehd\u00e4 t\u00e4m\u00e4n valitsemalla Koti-tekstiruudun. Siirry kohtaan ”Hyperlinkit” (ylh\u00e4\u00e4ll\u00e4), napsauta pient\u00e4 alanuolta laajentaaksesi luetteloa. T\u00e4\u00e4lt\u00e4 n\u00e4et kaikki juuri asettamamme ankkurit. Linkit\u00e4 se ”Koti”-ankkuriin. Toista t\u00e4m\u00e4 vaihe muille tekstilaatikoille paitsi Uutiskirjeelle, koska olemme k\u00e4ytt\u00e4neet siihen lightbox-n\u00e4ytt\u00f6\u00e4.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364694c80.webp\")
<\/a><\/p>\n\n Lopullinen tulos hyperlinkkien luomisen j\u00e4lkeen
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364a29ed4.webp\")
<\/a><\/p>\n\n Viimeiset silaukset \u2013 Sivun ominaisuuksien muuttaminen ja Faviconin lis\u00e4\u00e4minen
\n<\/h3>\n\n 104 Suunnittelutilassa napsauta kotisivua hiiren kakkospainikkeella ja valitse Sivun ominaisuudet. Valintaikkuna avautuu. Valitse ”Asetukset”-v\u00e4lilehti ja laita sivun nimeen – ”Tervetuloa esimerkki.com-sivustolle” ja napsauta OK. T\u00e4m\u00e4 on teksti, joka n\u00e4kyy selainikkunan yl\u00e4osassa.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364d02485.webp\")
<\/a><\/p>\n\n 105 Siirry kohtaan Tiedosto > Sivuston ominaisuudet. Asettelu-v\u00e4lilehden viimeinen vaihtoehto on ”Favicon”. Kun viet hiiren sen p\u00e4\u00e4lle, n\u00e4kyviin tulee ponnahdusikkuna, joka kertoo, mik\u00e4 favicon on ja mik\u00e4 sen optimaalisen koon tulisi olla. On hyv\u00e4 lis\u00e4t\u00e4 favicon, koska se auttaa erottumaan br\u00e4ndist\u00e4si ja auttaa my\u00f6s k\u00e4ytt\u00e4ji\u00e4 tunnistamaan sivustosi helposti, jos he ovat lis\u00e4nneet sen kirjanmerkkeihin.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364f684c8.webp\")
<\/a><\/p>\n\n Testaus ja vienti
\n<\/h3>\n\n 106 Testaa sivustoasi valitsemalla Tiedosto > Esikatsele sivustoa selaimessa tai Ctrl+Alt+E. \u00c4l\u00e4 valitse ”Esikatsele sivua selaimessa” t\u00e4ll\u00e4 kertaa, koska linkit eiv\u00e4t toimi sivun esikatselussa. Haluat ehk\u00e4 yritt\u00e4\u00e4 sijoittaa ankkurit eri paikkoihin varmistaaksesi, ett\u00e4 kun k\u00e4ytt\u00e4j\u00e4 napsauttaa linkki\u00e4, sivusto vieritt\u00e4\u00e4 oikeaan osioon ja oikeaan kohtaan.\n<\/p>\n
\n 107 Siirry lopuksi kohtaan Tiedosto > Vie HTML-muodossa (Ctrl+E). Kirjoita sivuston URL-osoitteen alle mik\u00e4 tahansa nimi, kuten ”example.com”, ja valitse sijainti. Napsauta OK. Sivusto on valmis.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236528be8c.webp\")
<\/a><\/p>\n\n Jokaisen sivun lopullinen tulos
\n<\/h3>\n\n Etusivu
\n<\/h5>\n<\/a><\/p>\n\n Palvelut-osio
\n<\/h5>\n<\/a><\/p>\n\n ”Miksi me” -osio
\n<\/h5>\n<\/a><\/p>\n\n ”Lausunnot” -osio
\n<\/h5>\n<\/a><\/p>\n\n 'Ota yhteytt\u00e4' -osio
\n<\/h5>\n<\/a><\/p>\n\n Alatunniste-osio
\n<\/h5>\n - \n Kierr\u00e4tystila:<\/strong> muuta vain tekstin v\u00e4riksi R=196 G=196 B=196 ilman kursiivia.\n <\/li>\n
- \n Merkint\u00e4:<\/strong> Fontti: Nobile, koko = 15, v\u00e4ri: R = 37 G = 37 B = 37, keskelle tasattuna ja 100 % etureuna.\n <\/li>\n
- \n Otsikot:<\/strong> Fontti = Lihavoitu, Koko = 18, V\u00e4ri: Valkoinen, Tasattu keskelle ja 100 % edess\u00e4.\n <\/li>\n
- \n Kappaleet:<\/strong> Fontti: Questrial, Koko = 15, V\u00e4ri: R = 67 G = 67 B = 67, Tasattu vasemmalle ja 120 % etureuna.\n <\/li>\n<\/ul>\n
- \n Otsikot:<\/strong> Fontti: Raleway Lihavoitu, Koko=20, V\u00e4ri: Musta, Tasattu vasemmalle ja 100 % etureuna.\n <\/li>\n
- \n
- \n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382365f01860.webp\")
<\/a><\/p>\n