Huomautus:

Adobe Museen ei enää lisätä uusia ominaisuuksia ja sen tuki päättyy 26. maaliskuuta 2020. Lisätietoja ja tukea on kohdassa Adobe Musen elinkaaren päättymissivu.

Hierarkkisten sivupohjien käsitteleminen

Musen avulla voit luoda sivupohjia, joita voit käyttää muissa sivupohjissa. Hierarkkiset sivupohjat toimivat samaan tapaan kuin sivupohjien käyttäminen sivulla Suunnittele-näkymässä. Musen aiemmissa versioissa voitiin luoda useita sivupohjia, mutta verkkosivulla voitiin käyttää vain yhtä sivupohjaa ja sivun elementtien joukkoa kerrallaan.

Jos aiemmin haluttiin tehdä sivusto, jossa on kaksi keskenään samankaltaista osaa, joilla kuitenkin on yksilöity ulkoasu, voitiin monistaa sivupohja, muuttaa sitä hieman ja käyttää sitä tietyillä sivuilla. Sen seurauksena molemmissa sivupohjissa oli usein osittain samoja elementtejä, joten kun sivustoa päivitettiin, molempien sivupohjien sisältöä oli muokattava, jotta elementit pysyivät synkronoituina.

Muse 4.0:lla ja sitä uudemmilla versioilla voi nyt luoda A-sivupohjan, joka sisältää jaetut elementit, jotka näytetään useissa sivupohjissa (kuten edellisissä osissa kuvattu taustan ja alatunnisteen lisääminen), ja luoda sen jälkeen lisää sivupohjia, jotka perivät kaikki A-sivupohjan elementit sekä sisältävät ensimmäisen osan yksilöiviä elementtejä. Jos luodaan kolmas sivupohja, siinä voidaan käyttää A-sivupohjan elementtejä sekä toisen osan yksilöiviä elementtejä.   

Hierarkkisten sivupohjien etuna on se, että niiden avulla voi rajoittaa elementin näkymisen yhteen esiintymään. Kun sivusto suunnitellaan uudelleen, kutakin elementtiä on muokattava vain kerran, ja kaikki sen esiintymät päivitetään sivustossa automaattisesti.

Voit hallita ja käyttää sivupohjia Suunnittele-näkymässä. Aivan kuten sivupohjaa voi käyttää sivulla napsauttamalla ja vetämällä sivupohjan miniatyyrin sivun miniatyyriin, voit luoda useita sivupohjia ja napsauttaa ja vetää sivupohjan toiseen sivupohjaan. Voit myös halutessasi napsauttaa sivupohjan miniatyyria hiiren kakkospainikkeella Suunnittele-näkymässä ja määrittää sivupohjan näkyviin tulevan pikavalikon Pohjat-asetuksella.

Huomaa, että kun viet osoittimen sivun tai sivupohjan nimen päälle, työkaluvihje näyttää kyseisessä sivussa tai sivupohjassa käytettyjen sivupohjien hierarkian.

Tähän mennessä olet luonut A-sivupohjan, jossa on selaimen täytön ruudukkotausta ja alatunnisteen sisältö. Seuraavassa osassa luot uuden sivupohjan, joka perii A-sivupohjan sisällön, ja lisäät sen jälkeen ylätunnisteen, jotta voit käyttää sitä sivuston sivuilla. Noudata seuraavia ohjeita:

  1. Kun katselet sivukarttaa Suunnittele-näkymässä, viemällä osoittimen A-sivupohjan miniatyyrin päälle näet plusmerkkipainikkeiden tulevan näkyviin sen kummallekin puolelle. Luo täysin uusi sivupohja napsauttamalla plusmerkkiä A-sivupohjan oikealla puolella. Uuden sivupohjan nimeksi tulee oletusarvoisesti B-sivupohja.
  2. Kaksoisnapsauta B-sivupohja-tekstikenttää miniatyyrin alapuolella ja muokkaa sitä. Kirjoita juuri luomallesi uudelle sivupohjalle kuvaavampi nimi: Main.
  3. Napsauta hiiren kakkospainikkeella Main-sivupohjan miniatyyria ja valitse avautuvasta pikavalikosta Pohjat > A-sivupohja.
Tässä opastusohjelmassa tutustut Adobe Muse -työtilaan ja siihen, miten voit luoda täysin toiminnallisen verkkosivuston kirjoittamatta riviäkään koodia. Opit myös luomaan sivustokartan ja käsittelemään sivupohjia. Lisäksi perehdyt Musen selaimen täyttöominaisuuksiin.
Valitse A-sivupohja valikosta, jotta sitä käytetään Main-sivupohjassa.

Huomaa, että sen jälkeen, kun A-sivupohjaa on käytetty Main-sivupohjassa, Main-sivupohjan miniatyyri päivittyy näyttämään saman ulkoasun. Main-sivupohjan alapuolella oleva sininen tunniste näyttää tekstin [A-sivupohja], koska käytit sitä Main-sivupohjassa vaiheessa 3.

On tärkeää huomata, että Main-sivupohja ei sisällä A-sivupohjan elementtejä, eikä A-sivupohjaa ainoastaan monistettu. Sen sijaan määritit Main-sivupohjan linkittymään A-sivupohjaan, mikä tarkoittaa, että kaikki A-sivupohjaan lisäämäsi sisältö näkyy automaattisesti myös Main-sivupohjassa.

Kuten aiemmin mainittiin, hierarkkisten sivupohjien hyvä puoli on se, että alatunniste, valikko ja tausta ovat edelleen ainoastaan A-sivupohjalla. Jos asiakas vaatii myöhemmin erilaista ruudukkotaustaa, voit päivittää A-sivupohjan, ja Main-sivupohja päivittyy automaattisesti.

Myöhemmin tässä opastusohjelmassa luot kaksi eri sivupohjaa eri ulkoasuja varten kahteen eri sivuston osaan. Toistaiseksi voit kuitenkin päivittää kaikki Suunnittele-näkymän sivut käyttämään uutta Main-sivupohjaa sen sijaan, että niissä käytettäisiin A-sivupohjaa.

  1. Napsauta Main-sivupohjaa ja vedä se vasemmassa yläkulmassa olevaan food-sivun miniatyyriin. Huomaa, että kun vedät ja pudotat Main-sivupohjan miniatyyrin food-sivun miniatyyriin, food-sivun miniatyyrin alapuolella oleva sininen teksti päivittyy tekstistä [A-sivupohja] tekstiksi [Main].

Tämä on yleisin tapa käyttää sivupohjia sivuilla Suunnittele-näkymässä, mutta voit myös kokeilla niiden käyttämistä pikavalikon kautta:

  1. Napsauta events-sivun miniatyyria hiiren kakkospainikkeella ja valitse näkyviin tulevasta pikavalikosta Pohjat > Main.
Tässä opastusohjelmassa tutustut Adobe Muse -työtilaan ja siihen, miten voit luoda täysin toiminnallisen verkkosivuston kirjoittamatta riviäkään koodia. Opit myös luomaan sivustokartan ja käsittelemään sivupohjia. Lisäksi perehdyt Musen selaimen täyttöominaisuuksiin.
Määritä events-sivun sivupohjaksi Main pikavalikon avulla.

  1. Määritä Main kolmen muun sivun (home, about ja visit) sivupohjaksi haluamallasi tavalla (kuvattu vaiheissa 4 ja 5).

Kun olet tehnyt tämän muutoksen, kunkin sivun miniatyyrin alapuolella olevan sinisen tekstitunnisteen pitäisi näyttää teksti [Main]. Kun viet osoittimen minkä tahansa sinisen tunnisteen päälle, näkyviin tulee työkaluvihje, joka näyttää käytettyjen sivupohjien hierarkian.

Tässä opastusohjelmassa tutustut Adobe Muse -työtilaan ja siihen, miten voit luoda täysin toiminnallisen verkkosivuston kirjoittamatta riviäkään koodia. Opit myös luomaan sivustokartan ja käsittelemään sivupohjia. Lisäksi perehdyt Musen selaimen täyttöominaisuuksiin.
Hierarkian kuvaava kätevä työkaluvihje tulee näkyviin, kun viet osoittimen tunnisteen päälle.

Tässä esimerkissä hierarkia on vain yhden tason syvyinen. Toisin sanoen Main-sivupohja perii A-sivupohjan sisällön. Huomaa, että voit halutessasi luoda sivupohjien ketjun. Voit esimerkiksi luoda sivupohjan, jonka nimi on Ylätunniste ja jossa on vain ylätunnisteen sisältö, ja luoda sitten toisen sivupohjan, jonka nimi on Alatunniste ja joka perii Ylätunniste-sivupohjan sisällön, ja vielä yhden sivupohjan, jonka nimi on Pääsivu ja joka perii kaiken Alatunniste-sivupohjasta (joka sisältää myös ylätunnisteen). Sivuston asettelun ja elementtien muutoksia koskevien tietojen mukaan voit määrittää perimisen tasot niin, että tasoja on useita. Asettelun jakaminen osiin tällä tavoin on kuin symbolien luontia, koska voit erotella asettelun tietyt osat, ja tarvittaessa etsiä osan ja muokata sitä myöhemmin.

Jatka seuraavaan opastusohjelmaan, Ensimmäisen verkkosivustosi luominen Musella -opastusohjelman osaan 2, jossa opit käyttämään widgetejä (sivuston valmiita vuorovaikutteisia ominaisuuksia, jotka voit vetää sivulle). Widgetien avulla voit lisätä lisätoimintoja sivuille nopeasti kirjoittamatta riviäkään koodia. Näet, miten widgetien näyttötapaa sivustossa mukautetaan muokkaamalla widgetien toimintaa ja ulkoasua.

Ylätunnisteen sisällön lisääminen Main-sivupohjaan

Nyt, kun olet viimeistellyt alatunnisteen lisäämällä valikkowidgetin Main-sivupohjaan, lisäät ylimmän tason navigoinnin. Lisää sisältöä ylätunnistealueelle seuraavasti.

  1. Kaksoisnapsauta Suunnittele-näkymässä Main-sivupohjan miniatyyria, jotta sivu avautuu, ja aloita sen muokkaaminen Muoto-näkymässä (jos sitä ei ole vielä avattu).
  2. Piirrä suorakulmiotyökalulla suorakulmio, joka alkaa näkyvän selainalueen vasemmasta yläkulmasta ja jatkuu koko leveydellä oikeaan yläkulmaan saakka. Vedä valintatyökalulla suorakulmion yläreunassa, vasemmassa ja oikeassa reunassa olevia kahvoja, kunnes näet punaisen reunuksen hetken aikaa, mikä tarkoittaa, että suorakulmion leveydeksi on määritetty 100 %, samaan tapaan kuin alatunnisteen luomisessa.
fig_30_building
Piirrä suorakulmio, joka kattaa koko selainikkunan yläosan.

 

Kun olet vetänyt kahvoja, suorakulmion pitäisi olla kooltaan noin 1160 pikseliä leveä ja 253 pikseliä korkea. Vaakasuuntainen X-arvo on -100, mikä tarkoittaa, että suorakulmion vasen yläkulma sijaitsee 100 pikselin etäisyydellä sivun vasemmasta yläkulmasta. Y-arvo on 0 (mikä tarkoittaa, että suorakulmion vasen yläkulma vastaa pystysuunnassa sivun vasenta yläkulmaa). Jos haluat määrittää nämä arvot tarkasti, voit tarkistaa kentät Muunnos-paneelista tai Hallinta-paneelista, kun suorakulmio on valittuna.

  1. Määritä viivan leveydeksi 0 ja määritä täyttöväriksi Täyttö-valikossa Ei mitään. Napsauta Kuva-osan oikealla puolella olevaa kansiota ja valitse selaamalla tiedosto, jonka nimi on tile-header.png. Määritä Sovitus-valikon arvoksi Vaakasuuntaiset ruudut.
fig_31_building
Määritä taustakuvaan vaakasuuntaiset ruudut Sovitus-valikossa.

 

Vaikka ylätunniste koostuu yksittäisestä suorakulmiosta, vaakasuuntainen taustakuvien ruudukko, joka täyttää sen, luo vaikutelman harmaasta suorakulmiosta mustan suorakulmion yläpuolella.

  1. Avaa Tuo-valintaikkuna valitsemalla Tiedosto > Sijoita tai käyttämällä pikanäppäintä komento+D (Mac) tai Ctrl+D (Windows).
  2. Valitse selaamalla esimerkkitiedostojen kansiossa oleva tiedosto bg-ribbon.png. Valitse se ja sulje Tuo-valintaikkuna valitsemalla Avaa.
  3. Napsauta kerran ylätunnisteen suorakulmion keskellä, lähellä sivun yläosaa. Tämä sijoittaa bg-ribbon.png-tiedoston yhden esiintymän sen alkuperäisessä koossa.
  4. Tasaa oranssi nauhakuva valintatyökalulla, jotta se on keskitetty pystysuunnassa lähelle ylätunnisteen yläreunaa ja on koko sivun levyinen.
fig_32_building
Oranssi nauhakuva keskitettynä ylätunnisteeseen.

 

Oranssi nauhakuva muodostaa taustan ylimmän tason valikolle, jonka lisäät seuraavassa osassa.

Sivupohjan monistaminen

Main-sivupohjan ylätunnisteen sisältö on valmis. Vaikka voisit käyttää Main-sivupohjaa kaikissa sivuston sivuissa, tässä sivustossa on kaksi osaa. Main-sivupohjaa käytetään home- ja visit-sivulla. Toista hieman erilaista sivupohjaa käytetään food-, events- ja about-sivuilla.

Monista Main-sivupohja seuraavasti:

  1. Napsauta Main-sivupohjan miniatyyria hiiren kakkospainikkeella Suunnittele-näkymässä.
  2. Valitse avautuvasta pikavalikosta Monista sivu.
fig_38_building
Monista olemassa oleva Main-sivupohja käyttämällä valikkoa.

 

Main-sivupohjan oikealle puolelle tulee näkyviin uusi sivupohja, jonka nimi on oletusarvoisesti Main copy. Koska monistat Main-sivupohjan, myös uusi sivupohja perustuu A-sivupohjaan.

  1. Kaksoisnapsauta juuri luomasi sivupohjan alapuolella olevaa nimikenttää ja nimeä sivu uudelleen nimellä Foreground.

Seuraavassa osassa opit määrittämään sivupohjan elementtien järjestyksen niin, että sen sijaan, että kohteet näkyvät aina sivun elementtien alla, ne voivat näkyä myös niiden päällä. Tässä vaiheessa kannattaa tallentaa työ.

  1. Valitse Tiedosto > Tallenna sivusto.

Yksi monistetun sivupohjan eduista on se, että voit määrittää osan sisällöstä näkymään sivun muun sisällön päällä samaan tapaan kuin jos valitsisit Järjestä > Tuo eteen. Tätä eteen tuomisen toimintoa käytetään food- ja events-sivuilla.

Mahdollisuus määrittää sivupohjan elementtien pinoamisjärjestys on uusi ominaisuus Muse 4.0:ssa. Aiemmin ylä- tai alatunnisteen elementit oli lisättävä jokaiselle sivulle sivupohjan sijaan, jos haluttiin näyttää yhteisiä sivuston elementtejä muun sisällön päällä sivuasettelussa.

Sivupohjan elementtien määrittäminen näkymään etualalla

Musen Muoto-näkymän käyttöliittymässä voit valita sivun elementin ja valita Objekti > Tuo eteen, Tuo eteenpäin, Vie taakse tai Vie taaksepäin, jotta yksi kohde näytetään sivulla toisen kohteen päällä tai alla. (Voit myös napsauttaa elementtiä tai ryhmää hiiren kakkospainikkeella ja määrittää pinoamisjärjestyksen valitsemalla Järjestä > Tuo eteen, Tuo eteenpäin, Vie taakse tai Vie taaksepäin.)

Kun sivustoja suunniteltiin Musen aiemmilla versioilla, sivupohjan elementit näytettiin oletusarvoisesti aina kaikkien sivulla olevien elementtien takana, kun sivu muodostettiin. Taustan kerrokset olivat joskus ongelmallisia (sivuston mukaan), koska ainoana hätäratkaisuna oli kopioida ja liittää yleensä sivupohjaan sijoitettavat elementit kaikille sivuston sivuille, joilla niiden haluttiin näkyvän päällimmäisinä.

Musessa on uusi ominaisuus, jolla voi hallita sivupohjien elementtien järjestystä. Sen sijaan, että kaikki sivupohjalla oleva näytettäisiin aina sivun elementtien takana, voit nyt valita sivupohjien elementtejä ja määrittää ne näkymään etualan elementteinä. Sivupohjissa olevat kohteet, jotka on määritetty etualan elementeiksi, näytetään kaikkien sivun elementtien päällä.

Uusi asetus on saatavilla valitsemalla Objekti > Siirrä > Etualan sivupohjalle. Voit lisäksi napsauttaa mitä tahansa elementtiä Muoto-näkymässä hiiren kakkospainikkeella sivupohjaa muokatessasi ja valita avautuvasta pikavalikosta Siirrä > Etualan sivupohjalle.

Tässä esimerkkiprojektissa suunnittelu vaatii, että home- ja visit-sivujen sisällössä käytetään oletusarvoista pinoamisjärjestystä (sivun elementit näytetään Main-sivupohjassa ylätunnisteen päällä), mutta food-, events- ja about-sivuilla tätä ei tarvitse tehdä.

Päivität Foreground-sivupohjan food- ja visit-sivuja varten niin, että ylätunnisteen sisältö näkyy etualalla sivun sisällön päällä, kun sivuja vieritetään. Noudata seuraavia ohjeita:

  1. Kaksoisnapsauta Suunnittele-näkymässä Foreground-sivupohjan miniatyyria, jotta sivu avautuu, ja aloita sen muokkaaminen Muoto-näkymässä (jos sitä ei ole vielä avattu).
  2. Valitse koko ylätunnisteen sisältö napsauttamalla ja vetämällä sitä valintatyökalulla, mukaan lukien ruudukkotaustan sisältävä suorakulmio, sijoitettu oranssi nauhakuva, valikkowidget ja keskellä oleva animoitu GIF-logo.
  3. Kun ylätunnisteen kaikki sisältö on valittu, napsauta hiiren kakkospainikkeella ja valitse Siirrä > Etualan sivupohjalle. Huomaa, että valittujen objektien tavallisen sinisen reunuksen sijaan valituilla etualalla näytettävillä kohteilla on punainen reunus.
fig_39_building
Siirrä ylätunnisteen sisältö etualalle pikavalikon avulla.

Näin varmistat, että ylätunniste näkyy sivujen elementtien päällä sivuilla, joissa käytetään Foreground-sivupohjaa.

  1. Kun koko ylätunniste on edelleen valittuna, kiinnität sen sivun yläreunaan, joten vaikka sivua vieritetään, ylätunniste ei liiku vierityksen mukana. Opit lisää objektien kiinnittämisestä osassa 7, mutta kiinnitä tässä vaiheessa ylätunniste paikalleen napsauttamalla keskellä ylhäällä olevaa kiinnityskohtaa Hallinta-paneelissa.
fig_40_building
Kiinnitä valittu ylätunniste valitsemalla ylhäällä keskellä oleva kohta.

  1. Ota Foreground-sivupohja käyttöön napsauttamalla sitä ja vetämällä se food-sivulle. Ota Foreground-sivupohja käyttöön events- ja about-sivuilla toistamalla tämä vaihe kaksi kertaa.

Kun olet tehnyt tämän muutoksen, sinisessä tunnisteessa on sana [Foreground], mikä tarkoittaa, että food-, events- ja about-sivuilla käytetään nyt Foreground-sivupohjaa. Jos viet osoittimen sinisen [Foreground]-tunnisteen päälle, työkaluvihje osoittaa, että Foreground-sivupohja perustuu A-sivupohjaan.

Kun suunnittelet omia sivustoprojektejasi, voit määrittää sivupohjassa olevia elementtejä näkymään päällimmäisinä kokeilemalla uutta Siirrä etualalle -ominaisuutta. Teet food- ja events-sivut valmiiksi myöhemmin tässä opastusohjelmasarjassa ja näet, miten etualan asetus varmistaa, että ylätunniste näytetään sivun muun sisällön päällä.

Opastusohjelman seuraavassa osassa, Ensimmäisen verkkosivustosi luominen Musella, osa 4, opit käyttämään upotettua HTML-koodia muista sivustoista kopioidun koodin näyttämiseen. Opit myös lisäämään Valolaatikko-koostamiswidgetin home-sivun jatkamista varten.

Useiden sivupohjien käyttäminen ja animaation lisääminen

Tässä osassa opit lisää sivupohjien käyttämisestä ja siitä, miten voit näyttää yhteistä sivuston sisältöä useissa sivupohjissa yhtenäisyyden lisäämiseksi samalla, kun luot sivuston eri osia. Opit myös keinoja, joilla voit siirtää elementtejä sivupohjista, koska joissakin sivustoissa voi olla tarpeen tehdä useita sivupohjia ja laittaa kuhunkin vain tiettyjä grafiikoita (esimerkiksi sivustossa, jossa on neljä värikoodattua aluetta). Lisäksi opit siirtämään yleensä sivupohjassa olevia elementtejä yksittäisille sivuille ja luomaan suunnittelun tehosteita, esimerkiksi lisäämään kohteita päällekkäin eri tasoille.

Sivupohjan sisällön muokkaaminen

Sivupohjiin sijoitetut objektit näytetään eri tasoilla yksittäiselle sivulle sijoitetun sisällön alla. Esimerkiksi objektit, jotka sijoitat aloitussivun ylä- tai alatunnisteeseen, näytetään eri tasoilla sivupohjan ylä- ja alatunnisteeseen sijoitettujen taustojen päällä. Tästä syystä saattaa ilmetä tilanteita, joissa sinun on siirrettävä elementtejä sivupohjasta ja sijoitettava ne yksittäisille sivuille, jotta ne näkyvät sivun muiden elementtien päällä.

Sivupohjiin lisättävää sisältöä on muokattava myöhemmin avaamalla sivupohja. Jos avaat sivun, joka liittyy sivupohjaan, ja yrität muokata ylätunnistetta, alatunnistetta tai muuta sivupohjan sisältöä, se näyttää olevan lukittu. Voit käyttää kahta eri keinoa, kun sinun on muutettava sivupohjan sisältöä:

  1. Kaksoisnapsauta sivupohjan miniatyyriä Suunnittele-näkymässä ja muokkaa sitten sivupohjan sisältöä Muoto-näkymässä.

  2. Avaa sivupohja Muoto-näkymään kaksoisnapsauttamalla sitä Suunnittele-näkymässä. Valitse elementit, joita haluat muokata (mutta niiden on oltava muiden elementtien päällä, joten ne on sijoitettava sivuston sivulle) ja valitse Muokkaa > Leikkaa tai käytä pikanäppäimiä komento-X (Mac) tai Ctrl-X (Windows).

  3. Palaa Suunnittele-näkymään ja kaksoisnapsauta sivua, joka tulee sisältämään (aiemmin sivupohjassa olleen) sisällön. Valitse Muokkaa > Liitä sijaintiin. Tämä varmistaa, että sivupohjasta leikkaamasi elementit sijoitetaan identtiseen sijaintiin normaalilla sivulla. Voit halutessasi avata useita sivuja ja jakaa sivupohjassa ollutta sisältöä useille sivuston sivuille valitsemalla Muokkaa > Liitä sijaintiin.

Voit myös tarvittaessa monistaa olemassa olevia sivupohjia. Voit määrittää sivustosi niin, että useimmat sivut käyttävät yhtä sivupohjaa, mutta erityissivu käyttää monistettua samankaltaista sivupohjan versiota (ja monistetusta sivupohjasta kopioidut elementit on kopioitu sivuston erityissivulle). Lisätietoja sivupohjien monistamisesta on seuraavassa osassa.

Kun objekti on yksittäisillä sivuilla eikä sivupohjassa, voit muokata objektia sivukohtaisesti tarpeen mukaan ja varmistaa, että objekti näkyy päällimmäisenä.

Tässä esimerkkiprojektissa sivustossa näytetään tällä hetkellä Kevin's Koffee Kart -logo (punainen polkupyörä ja mainosnauha) suoraan sivun navigoinnin yläpuolella ylätunnisteessa. Ylä- ja alatunnisteen sisältö näytetään automaattisesti jokaisella sivulla, koska aloitussivu (ja kaikki muut luomasi sivut) linkitetään oletusarvoisesti A-sivupohjaan, jolla tämä sisältö on. Monissa tapauksissa voi olla hyvä koota verkkosivustoja, joissa kaikissa käytetään samaa sivupohjaa luomaan sivustolle yhtenäinen tyyli.

Tässä sivustossa on kuitenkin yksilöivä animoitu logo, joka näkyy vain aloitussivulla. Jos tutustut käytössä olevaan Kevin's Koffee Kart -esimerkkisivustoon, huomaat, että aloitussivulla oleva punainen polkupyörälogo muuttuu animaatioksi yhden kerran sivuston latautuessa ensi kertaa, jotta pyörä näyttää ajavan sivulle vasemmasta reunasta. Kun napsautat eri sivuja, huomaat, että animaatio näkyy vain aloitussivulla ja että muut sivuston sivujen logot ovat staattisia.

Seuraavassa osassa opit luomaan monistetun sivupohjan ja määrittämän sivut käyttämään tiettyä sivupohjaa Suunnittele-näkymässä.

Sivupohjien monistaminen ja poistaminen

  1. Avaa Suunnittele-näkymä napsauttamalla Suunnittele-linkkiä. Etsi A-sivupohjan miniatyyri, joka sijaitsee Suunnittele-näkymän alareunassa.

  2. Siirrä hiiren osoitin A-sivupohjan miniatyyrin päälle ja huomaa, että kun siirrät osoitinta miniatyyrin päällä, näet samat plusmerkkien painikkeet (+) kuin lisätessäsi uusia sivuja sivukarttaan. Napsauta plusmerkkiä (+) A-sivupohjan miniatyyrin oikealla puolella. Voit käyttää tätä tekniikkaa aina, kun haluat luoda täysin uuden sivupohjan kokonaan alusta. Huomaa, että miniatyyri on tyhjä, mikä tarkoittaa, että se ei sisällä A-sivupohjaan lisäämäsi sisältöä. Uusi sivupohja saa oletusarvoisesti nimekseen B-sivupohja, mutta voit halutessasi nimetä sen uudelleen napsauttamalla miniatyyrin alapuolella olevaa kenttää.

    Tässä tapauksessa monistat olemassa olevan A-sivupohjan sen sijaan, että loisit täysin uuden tyhjän sivupohjan.

  3. Poista B-sivupohja napsauttamalla X-kuvaketta sen oikeassa yläkulmassa. (Jos poistat vahingossa sivupohjan tällä tavoin, voit palauttaa sen valitsemalla Muokkaa > Kumoa poistaminen).

  4. Napsauta A-sivupohjan miniatyyria hiiren kakkospainikkeella ja valitse avautuvasta pikavalikosta Monista sivu. Näkyviin tulee uusi miniatyyri, joka näyttää monistetun sivupohjan nimeltä A-sivupohja.

    fig_59_getting
    Monista A-sivupohja Suunnittele-näkymässä.

  5. Napsauta A-sivupohjan kopion miniatyyrin alapuolella olevaa kenttää ja nimeä monistettu sivupohja uudelleen nimellä MasterFlash. Tämän sivun avulla lisäät rich media -sisältöä, joka näkyy animaationa vain aloitussivulla, kun taas kaikki muut sivut viittaavat edelleen A-sivupohjaan, joka näyttää logon staattisen version ylätunnisteessa.

  6. Napsauta aloitussivun miniatyyria hiiren kakkospainikkeella. Valitse avautuvasta valikosta Pohjat > MasterFlash. Tämä toiminto liittää MasterFlash-sivupohjan aloitussivuun.

    Huomautus:

    Voit käyttää sivupohjaa myös vetämällä MasterFlash-miniatyyrin HOME-sivun miniatyyrin päälle.

Kun MasterFlash-sivupohja on käytössä, sen nimi näkyy sulkeissa aloitussivun miniatyyrin alapuolella aloitussivun miniatyyrin alapuolella Suunnittele-näkymässä.

Jos valitset Esikatsele, et näe aloitussivussa mitään eroa. Koska MasterFlash on A-sivupohjan monistettu kopio, aloitussivu näyttää samalta kuin ennenkin ja staattinen logo näytetään. Seuraavassa osassa muokkaat kuitenkin MasterFlash-sisältöä lisäämällä animaation, joka näkyy vain aloitussivulla.

Monistettujen ja lähes samanlaisten (mutta toisistaan hiukan poikkeavien) sivupohjien käyttäminen on kätevä tapa erottaa verkkosivuston tietty osa ja tehdä aloitussivusta yksilöivä tämän projektin kuvauksen mukaisesti.

Tässä opastusohjelmassa opit käyttämään sivupohjia. Seuraavassa tarkastellaan kolmen sivuston asettelua. Niihin perehtymällä opit, miten voit luoda mielenkiintoisia tehosteita ja sivuston yhtenäisen ilmeen käyttämällä yhteisiä sivupohjan elementtejä.

Mikä sivupohja on? Sivupohjan avulla voit käyttää usealla sivuston sivulla yhteisiä elementtejä, kuten ylä- ja alatunnisteita, logoja ja navigointipainikkeita. Voit käyttää sivustossasi yhtä sivupohjaa tai määrittää useita sivupohjia, jolloin voit nopeasti ja yhtenäisesti käyttää yksilöllisiä tyylejä sivuston eri osissa.

Kun luot uuden sivuston, Muse luo oletusarvoisesti tyhjän aloitussivun ja tyhjän sivupohjan. Nämä sivut ovat lähtökohta mille tahansa sivustolle. Voit suunnitella sivukartan käyttämällä tyhjiä sivuja ja käyttää niissä myöhemmin sivupohjia, tai voit luoda sivuston aloittamalla sivupohjasta, käyttämällä sitä yhdellä sivulla (aloitussivulla) ja luomalla sitten uusia sivuja tämän muotoilun pohjalta.

Sivuston asetteluiden tarkastelua

Erinomainen tapa oppia uusia lähestymistapoja sivuston suunnitteluun on tarkastella erilaisia sivupohjien asetteluita. Tässä artikkelissa tutustutaan kolmeen Musessa luotuun sivuasetteluun ja tutkitaan, miten ne alunperin koostettiin.

Jos haluat seurata mukana ja avata kunkin esimerkkisivuston kohteet, lataa esimerkkitiedostot, pura ZIP-tiedosto ja avaa kukin esimerkkisivusto Musessa kaksoisnapsauttamalla .muse-tiedostoa.

Kun tutustut esimerkkisivustoihin, kiinnitä huomiota siihen, mitä ominaisuuksia niissä on käytetty helpottamaan sivustojen navigointia ja ohjaamaan kävijöitä sivuston sisällä:

  • määritä sivujen mitat sivuston ominaisuuksissa
  • määritä ylä- ja alatunnisteen alueet sivupohjassa apuviivojen avulla
  • sijoita kohteita sivun asettelun ulkopuolelle kiinnittämällä ne selainikkunaan
  • aseta taustakuvatäytöt vierimään tai pysymään paikallaan, jolloin syntyy mielenkiintoisia tehosteita
  • venytä suorakulmiot näkymään 100 prosentin leveydellä, jolloin ne peittävät selaimen koko leveyden
  • lisää haitari- ja diaesityswidgetejä näyttämään interaktiivista sivusisältöä
  • muokkaa ja muotoile valikkowidgetit sivun navigointia varten
  • luo ankkurilinkkejä, joista voi siirtyä sivuston eri osioihin pysty- tai vaakasuunnassa
  • lisää ominaisuuksia sivuille liittämällä koodia ulkopuolisista sivustoista (upotettua HTML-koodia).

Kun vierailet esimerkkisivustoissa, kokeile vierittää selainikkunaa ja muuttaa sen kokoa, jotta näet, miten julkaistu esimerkki toimii. Avaa sitten kukin .muse-tiedostoista Musessa, jotta näet, miten sivupohjien avulla voidaan luoda yhtenäinen sivuston ilme ja yhdenmukainen selailukokemus.

Esimerkki 1: Happy Valley Adventure

fig01.master.b720

Ensimmäisessä esimerkissä alatunnisteen grafiikat on kiinnitetty selainikkunan alalaitaan. Lisäksi alatunnisteen taustan leveydeksi on asetettu 100 %, jolloin se peittää sivun alaosan vaakasuunnassa. Pidempi sivusisältö vierii alatunnisteen takana, jolloin syntyy liukuvärimäinen taivastehoste. Kun napsautat vasemmalla olevia ankkurilinkkejä, sivu siirtyy pystysuunnassa vastaavaan osioon. Läpikuultavat graafiset elementit ja harkittu pinoamisjärjestys auttavat luomaan vaikutelmaa kuumailmapallolla lentämisestä.

Kun katsot sivuston .muse-tiedostoa, huomaa seuraavat seikat:

Sivupohjassa pidemmän sivusisällön taustan muodostavat liukuväreillä täytetyt suorakulmiot.

  • Etusivulla on alatunnistegrafiikka, jonka vaakasuunnassa vierekkäin aseteltu taustakuva on asetettu kattamaan 100 % leveydestä, ja joka on kiinnitetty selainikkunan alaosaan. Toinen alatunnistegrafiikka (vuorenhuippu) on keskitetty ja kiinnitetty selainikkunan alareunaan. Se on saatu näkymään toisen vierekkäin asetellun alatunnistegrafiikan päällä valitsemalla Järjestä > Tuo eteen. Tämä lähestymistapa soveltuu kaikenkokoisille näytöille.
  • Vasemmalla olevat navigointilinkit siirtyvät ankkuritunnisteisiin, jotka on lisätty pitkään pystysuuntaiseen sivuun. Kun kävijät napsauttavat linkkejä, sivu vierii näyttämään vastaavan sisällön. Muoto näyttää tasapainoiselta ja yhtenäiseltä, kun sivuston uudet osiot tulevat näkyviin.
  • Yhteydenotto-osioissa on upotettu HTML-koodi, jolla näytetään yhteydenottolomakkeen elementtejä. Niillä voidaan viestiä kävijöiden kanssa sekä sopia tulevista seikkailuista.

Esimerkki 2: Kevin's Koffee Kart

fig02.master.b720
Tämä monitasoinen sivusto käyttää valikkowidgetiä sekä upotettuja HTML-ominaisuuksia.

Kevin's Koffee Kart -sivuston aloitussivulla on Flash-animaatio ylätunnisteessa sekä kiinnitettyjä pilvigrafiikoita. Kun liikut sivustolla vierityspalkkien avulla, huomaat, että taustakuva pysyy paikoillaan, mutta sivun sisältö vierii sen yläpuolella. Upotetulla HTML-koodilla toteutetun Twitter-syötteen alapuolella toistuu automaattisesti diaesitys, jossa kuvat vaihtuvat.

Ylätunnisteen valikkopalkki on luotu Vaakasuuntainen-valikkowidgetillä, jolla luodut pysyvät navigointipainikkeet päivittyvät automaattisesti, kun sivustoon lisätään uusia sivuja. Tässä esimerkissä valikkowidget on määritetty näyttämään sekä ylimmän tason että alatason sivut.

Käytä valikkoa ja katso, miten sivut latautuvat, kun napsautat painikkeita. Ylä- ja alatunnisteet ovat samat kaikilla sivuilla, mutta sivun korkeudet vaihtelevat sisällön mukaan. Ruskea alatunniste koostuu kahdesta suorakulmiosta, jotka on asetettu 100 % leveyteen. Ne kattavat koko selainikkunan ja luovat sivuille yhtenäisen ilmeen.

Kevin's Koffee Kart -sivustossa noudatettiin seuraavia muotoilukäytäntöjä:

  • Sivustossa on kaksi samanlaista sivupohjaa. Sivupohjaa, jossa ei ole Flash-sisältöä, käytetään useimmissa sivuston sivuissa, ja Flash-videon sisältävää sivupohjaa vain aloitussivussa. Molemmissa sivupohjissa on leveydeltään 100 %:n alatunnisteet, joissa on läpinäkyvät reunukset, ja ne käyttävät samaa valikkowidgetiä, jotta sivusto näyttää yhtenäiseltä. Ensimmäisen sivupohjan luonnin jälkeen elementit kopioidaan ja liitetään paikalleen toiseen sivupohjaan. Näin varmistetaan, että kaikki elementit kohdistuvat oikein.
  • Sivut on järjestetty Suunnittele-näkymässä ylätason ja alatason osioiksi, mikä näkyy valikkowidgetin avautuvissa luetteloissa.
  • Taustakuvan kartta, jota käytetään selainikkunan täyttöön, on asetettu näkymään alkuperäisessä koossaan. Se on keskitetty ja asetettu siten, ettei se liiku sisällön alla sivua vieritettäessä.
  • Sivun taustatäyttö on yhtenäinen valkoinen, jossa on hieman läpinäkyvyyttä, jotta taustan karttakuva kuultaa sen läpi.
  • Etusivulla on kaksi läpikuultavaa pilven kuvaa, jotka on kiinnitetty selainikkunaan. Vierittämällä sivua pystysuunnassa näet, että kiinnitetyt elementit eivät liiku. Ne myös pysyvät paikallaan, jos muutat selainikkunan kokoa.
  • Etusivulla käytetään upotettua HTML-koodia Twitter-syötteen sisällön näyttämiseen reaaliaikaisesti.
  • Koffee-sivulla on haitariwidget, joka laajentaa ja pienentää paneelit napsautettaessa ja näyttää näin enemmän sisältöä sivun pienellä alueella.
  • Origins-sivulla on Miniatyyri-diaesityswidget, jolla näytetään interaktiivinen valokuvagalleria. Preparation-sivu käyttää ankkuritunnisteisiin pohjautuvaa navigointia, jolla siirrytään sivun eri osioihin. Kart Map -sivulla on upotettu HTML -koodi, joka näyttää reaaliaikaisen Google Latitude -kartan tiliin yhdistetyn matkapuhelimen sijainnin perusteella.

Esimerkki 3: More than Square

fig03.master.b720
Vahvat päällekkäiset, kiinnitetyt grafiikat kehystävät vieritettävää sivusisältöä.

Viimeistä esimerkkiä tarkastellessasi kiinnitä huomiota siihen, miten rakennusgrafiikat on kiinnitetty oikeaan yläkulmaan ja vasempaan alakulmaan kehystämään sivusisältöä. Oikeassa yläkulmassa oleva rakennus on tuotu eteen sivusisällön päälle, kun taas vasemmassa alakulmassa oleva rakennus näkyy sisällön alla.

Sivun sisältö on keskitetty, läpikuultava, ja se on erotettu arkkitehtuurielementeistä pyöreiden kulmien avulla. Sivun sisältö vierii pystysuunnassa ja sen korkeus vaihtelee, kun napsautat eri sivuja. Sivun vasemmassa laidassa ovat kiinteästi näkyvät yhteisöpalvelujen (Twitter, Facebook ja YouTube) linkit, jotka edistävät ristiinlinkitystä ja luovat yhtenäisen epäsymmetrisen ilmeen koko sivustolle.

Etusivun valokuvagallerian yläreunassa on Edellinen- ja Seuraava-painikkeet, mutta se on myös asetettu toistamaan dioja hitaasti, jos kävijä ei napsauta painikkeita. How to Get Here -sivulla on interaktiivinen kartta, joka on luotu kopioimalla upotettu HTML-koodi Google Maps -palvelusta.

Kun tarkastelet tämän esimerkin .muse-tiedostoa, huomaa seuraavat seikat:

Tässä esimerkissä lähes kaikki yhteiset sivuelementit ovat sivupohjassa. Tämä helpottaa sivuston päivittämistä ja yksittäisten sivujen sisällön muokkaamista.

Sivupohjassa on alatunnisteen kuvana vierimätön taustagrafiikka, joka on kiinnitetty selaimen vasempaan alanurkkaan. Sivupohja sisältää myös kulmiltaan pyöristetyn, hieman läpinäkyvän säiliön, jossa sivuston navigointipainikkeet sijaitsevat.

Kaikilla sivuston sivuilla on oikeassa yläkulmassa kiinnitetty grafiikka, joka on asetettu näkymään sivusisällön päällä. Tämä luo perspektiivivaikutelman rakennusten kuvien avulla.

Muse on intuitiivinen suunnittelutyökalu, jolla voit toteuttaa ajatuksesi verkossa. Voit luoda kiehtovia asetteluja sijoittelemalla elementtejä luovasti sivupohjiin ja näyttämällä yksilöllistä sisältöä kullakin sivulla. Vain mielikuvitus on rajana sille, miten innovatiivisia sivustoja voit asiakkaillesi luoda.

Saat lisää vinkkejä Musen käyttämiseen tutustumalla Musen Ohje ja opastusohjelmat -sivuun tai Musen Tapahtumat-sivuun, jolla on käynnissä olevia tai tallennettuja verkkoseminaareja.

Lisensoitu Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License -lisenssin mukaan.  Creative Commons -lisenssien ehdot eivät koske Twitter™- ja Facebook-viestejä.

Lakisääteiset ilmoitukset   |   Online-tietosuojakäytäntö