Ylä- ja alatunnisteiden luominen Adobe Musessa

Adobe Musessa voit määrittää verkkosivuston ylä- ja alatunnistealueet ja lisätä niihin valikkoja, logoja, tekijänoikeusilmoituksia ja muuta sisältöä.

Huomautus:

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

Adobe Musessa voi luoda helposti verkkosivun ylä- ja alatunnisteen. Verkkosivuston ulkoasu on järkevä pitää yhtenäisenä ja käyttää eri sivuilla samoja ylä- ja alatunnisteita. Ylä- ja alatunnisteet voi luoda Adobe Musessa määrittämällä ne sivupohjassa. Sivupohjan muokkaaminen muuttaa verkkosivuston kaikkia sivuja.

Kun luot verkkosivuston käyttämällä HTML- ja CSS-koodia, yksittäiset sivut ovat usein eri korkuisia, koska kullakin sivulla näytetään erilaista sisältöä. Musen ominaisuuksien avulla sivuston sivuilla voidaan näyttää eripituista sisältöä tarpeen mukaan. Voit määrittää alueet niin, että ylätunniste on aina paikoillaan yläreunassa ja alatunnisteen sisältö näkyy aina suoraan sivun sisällön alapuolella kunkin sivun korkeudesta riippumatta.

Sivun ylä- ja alatunnisteen lisääminen

Ennen sivun ylä- ja alatunnisteen alueiden määrittämistä varmista, että Ylä- ja alatunniste -apuviivat ovat käytössä. Jos ne eivät ole, valitse Näytä > Näytä ylä- ja alatunniste.

Voit myös käyttää Hallinta-paneelin Näytä-valikkoa ja ottaa Ylä- ja alatunniste -apuviivat käyttöön.

Varmista, että Ylä- ja alatunniste -apuviivat ovat käytössä.
Varmista, että Ylä- ja alatunniste -apuviivat ovat käytössä.

Voit halutessasi myös napsauttaa hiiren kakkospainikkeella työtilan vasemmalla puolella juuri selainikkunan alueen ulkopuolella. Valitse avautuvasta pikavalikosta Näytä ylä- ja alatunniste -asetus.

Apuviivojen ja viivainten käyttäminen

Viivaimen on oltava käytössä, jotta ylä- ja alatunnisteen apuviivoja voi siirtää. Viivaimen avulla voit määrittää apuviivat tarkkaan pikselisijaintiin. Tavalliset apuviivat (joissa näytetään sivuston luonnin yhteydessä määrittämäsi sarakkeiden määrä) näytetään myös oletusarvoisesti.

Viisi sinistä vaakasuuntaista apuviivaa ovat sivun levyisiä. Nämä viisi apuviivaa määrittävät ylhäältä alkaen sivun yläosan, ylätunnisteen alareunan, alatunnisteen yläreunan, verkkosivun alaosan ja selainikkunan alaosan. Kun määrität alueet vetämällä apuviivoja, työkaluvihje näyttää kunkin apuviivan ja sen nykyisen sijainnin. Sivua kannattaa ehkä lähentää, jotta voit sijoittaa apuviivat tarkemmin.

Kolme keskimmäistä apuviivaa määrittävät sisällön, joka näytetään ylä- ja alatunnistealueilla. Jäljelle jäävä keskimmäinen alue on alue, jolle lisäät sivun yksilöivän sisällön. Tämä keskialue laajenee sopimaan kullekin sivulle sijoitettujen elementtien korkeuteen.

Voit myös valita sivun suorakulmiot ja elementit. Valittujen elementtien kehikkojen käyttäminen auttaa apuviivojen tasaamisessa, kun määrität ylä- ja alatunnistealueita.

Huomautus:

Selainikkunan alaosa määrittää näyttöalueen alaosan, kun vierailija katselee sivustoa selaimessa. Suunnittelun mukaan voit määrittää taustavärin tai taustakuvan itse selaimelle ja määrittää apuviivan sivun alareunalle selaimen apuviivan alareunan yläpuolelle, jotta taustaväri tai -kuva näkyy sivun sisällön alapuolella.

Ylä- ja alatunniste-elementtien määrittäminen

Määritä ylä- ja alatunnisteet seuraavasti:

  1. Vedä sekä Sivun alareuna -apuviiva että Selaimen alareuna -apuviiva samaan kohtaan sivun alaosassa heti alatunnisteen suorakulmion alapuolelle, kuten alla olevassa kuvassa.
Määritä ylä- ja alatunnisteen elementit Adobe Musessa
Määritä ylä- ja alatunnisteen elementit Adobe Musessa

  1. Valitse suorakulmio alatunnisteessa, joka sisältää ruudukkotaustakuvan. Vedä Alatunniste-apuviivaa, kunnes se on tasattu alatunnisteen suorakulmion yläreunan kanssa.
  2. Jätä Sivun yläosa -apuviiva ylimmäs (kohtaan Y: 0 px). Vedä ylätunnisteen apuviivaa alaspäin haluamaasi kohtaan.

Ylätunnisteen sisältö näytetään sivun yläreunan ja Ylätunniste-apuviivan välillä olevalla alueella.

Aseta ylätunnisteen alue vetämällä ylätunnisteen apuviivaa
Aseta ylätunnisteen alue vetämällä ylätunnisteen apuviivaa

Voit milloin tahansa suunnitteluprosessin aikana palata takaisin A-sivupohjalle, jos sinun on säädettävä apuviivat uudelleen sopimaan ylä- ja alatunnisteen sisältöön.

Napsauttamalla Suunnittele-linkkiä tai katiesCafe-välilehteä voit palata Suunnittele-näkymään.

Huomaa, että kaikissa sivuston sivujen miniatyyreissa näytetään nyt suunnitteluelementit, jotka lisäsit linkitetylle A-sivupohjalle.

Huomioi, että kaikilla sivuilla määritetyt ylä- ja alatunnisteet on linkitetty A-sivupohjaan
A-sivupohja näytetään kaikkien linkitettyjen sivujen miniatyyreissa Suunnittele-näkymässä.

Sivuston suunnittelun aikana sivupohjaan tekemäsi muutokset päivittyvät automaattisesti linkitettyihin sivuihin. Sivupohjat helpottavat sivuston päivitystä tai ylläpitoa, koska voit muuttaa sivun ulkoasua päivittämällä yhden sivupohjan.

Kuvan asettaminen ylätunnisteen sisällöksi

Koska sivuston logo näkyy jokaisella sivulla, sivupohjan ylätunniste on sille erinomainen paikka.

  1. Valitse Tiedosto > Sijoita. Voit sijoittaa kuvan myös näppäinkomennolla Ctrl+D (Windows) tai komento+D (Mac).

  2. Tuo-valintaikkuna avautuu. Etsi Kevins_Koffee_Kart-kansiosta tiedosto nimeltä Logo.png. Napsauta Valitse-painiketta.

  3. Vedä logo valintatyökalulla aiemmin määrittämäsi ylätunnistealueen yläosaan.

Sijoita ylätunnisteeseen seuraavaksi toinen kuva, joka toimii seuraavassa osiossa lisättävän valikkopalkin widgetin taustana.

  1. Valitse Tiedosto > Sijoita tai käytä käyttöjärjestelmääsi vastaavaa näppäinkomentoa: Ctrl+D (Windows) tai komento+D (Mac).

  2. Avaa Kevins_Koffee_Kart-kansio ja valitse tiedosto nimeltä top-nav.png.

  3. Napsauta kerran sivun yläosan aluetta, jonka olet määrittänyt ylätunnisteeksi. Sijoita kuva ylätunnisteen merkinnän yläpuolelle, jolloin se näkyy jokaisella sivulla samassa kohdassa sivun pääsisällön yläpuolella.

  4. Vedä juuri sijoittamaasi ruskeaa nauhagrafiikkaa valintatyökalulla niin, että sen yläosa tulee melkein kiinni logon punaisen polkupyörän renkaisiin. Tämä synnyttää vaikutelman siitä, että pyörä kulkee ruskeaa nauhaa pitkin.

  5. Valitse uudelleen Tiedosto > Sijoita. Etsi ja valitse sitten tiedosto nimeltä thedrip.png. Sijoita alkuperäisen kokoinen kuva paikalleen ruskean nauhan oikean pään alareunaan napsauttamalla tätä kohtaa kerran.

  6. Siirrä valumajäljen kuvaa valintatyökalulla niin, että se tulee samaan linjaan ruskean nauhan kanssa. Nyt näyttää siltä kuin nauhan oikeasta reunasta valuisi kahvia.

    Ylätunnisteen sisältö logon ja navigointipalkin taustan lisäämisen jälkeen.
    Ylätunnisteen sisältö logon ja navigointipalkin taustan lisäämisen jälkeen.

    Voit katsoa sivuston julkaistusta versiosta logon ja navigointipalkin oikeat paikat.

    Seuraavassa osiossa opit lisäämään widgetejä ja tutustut hieman widgetsäilöjen käyttöön.

Alareunassa pysyvien alatunnisteiden käyttäminen

Käyttämällä Alareunassa pysyvä alatunniste -valintaa voit kiinnittää alatunniste-elementin verkkosivulle. Alareunassa pysyvä alatunniste, joka on suunniteltu erityisesti suuria työpöytänäyttöjä käyttäville vierailijoille. Kun otat käyttöön Alareunassa pysyvä alatunniste -valinnan, alatunniste jää haluttuun paikkaan, vaikka selainikkuna olisi merkittävästi suurempi kuin verkkosivun suunnittelu.

Alareunassa pysyvä alatunniste -valinnan voit valita Uusi sivusto -valintaikkunassa (Tiedosto > Uusi sivusto), kun olet luomassa Museen sivustoa. Pääset valitsemaan Alareunassa pysyvä alatunniste -valinnan myös kohdasta Sivun asetukset (Sivu > Sivun asetukset) sekä Sivuston asetukset -valintaikkunoista (Tiedosto > Sivuston asetukset)

Alareunassa pysyvä alatunniste -valinta on oletuksena käytössä. Yleisesti ottaen Alareunassa pysyvät alatunnisteet -toimintoa kannattaa käyttää, kun suunnittelet sivustoja. Jos kuitenkin huomaat, että sivut näyttävät paljon haluttua pidemmiltä (koska sivustossa on vain vähän sisältöä ja sivut ovat melko lyhyitä), voit aina poistaa tämän toiminnon käytöstä poistamalla sen valinnan Sivuston asetukset -valintaikkunassa.

Jos haluat ottaa sen pois käytöstä koko sivustolla, voit poistaa valinnan Sivuston asetukset -valintaikkunassa.

Adobe-logo

Kirjaudu sisään tiliisi