Etusivun rakenne

HTML-muotoilut

Sivupohjissa voi käyttää HTML-muotoiluja normaalisti.

Otsikonti aloitetaan sisältösivulla h2-tasolta ja etusivulla h3-tasolta.

<h2>Otsikko 1</h2>
<h3>Otsikko 2</h3>
<h4>Otsikko 3</h4>

Tekstikappaleet sijoitetaan p-tagin sisälle.

<p>Tekstikappale lorem ipsum....</p>
<p>Toinen tekstikappale lorem ipsum...</p>

Tekstiä voi korostaa lihavoimalla ja kursivoimalla:

<p>Tässä <strong>lihavoitua</strong> tekstiä</p>
<p>Tässä <em>kursivoitua</em> tekstiä</p>

Ulkoiset linkit tehdään a-tagilla

<p><a href="https://finna.fi">Linkki Finnaan</a></p>

Ulkoisen linkin avaaminen uuteen ikkuunaan/välilehteen

<p><a href="https://finna.fi" target="_blank" rel="noopener noreferrer">Linkki Finnaan <span aria-label="avautuu uuteen ikkunaan"><i class="fa fa-external-link-square" aria-hidden="true"></i></span></a></p>
  • target="_blank" → linkki avautuu uuteen ikkunaan/välilehteen
  • rel="noopener noreferrer" → linkki avauttuu omaan selain prosessiin turvallisena
  • <span aria-label="avautuu uuteen ikkunaan"><i class="fa fa-external-link-square" aria-hidden="true"></i></span> → kerrotaan käyttäjälle että linkki avautuu uuteen ikkunaan/välilehteen

Näkymän sisäiset linkit kannattaa tehdä omalla tagillan. Alla esimerkki linkistä ohjesivulle:

<p>Linkki <a href="<?=$this->url('content-page', ['page' => 'help'])?>">ohjesivulle</a></p>

Korostettu tekstilaatikko, minkä sisällä UL-lista:

<div class="infobox">
    <h2>Otsikko</h2>
    <ul>
      <li>Ensimmäinen asia</li>
      <li>Toinen asia</li>
    </ul>
  </div>

UL-listan elementtien eteen lisätään "pallo" käyttämällä "list-bullets" -luokkaa:

<ul class="list-bullets">
  <li>Elementti 1</li>
  <li>Elementti 2</li>
</ul>

Palstoitus

Sivun sisällön asettelu palstoihin tehdään käyttämällä "col" -luokkia.

Kolme palstaa, jotka esitetään leveällä ruudulla rinnakkain ja kapealla allekkain: 

<div class="row">
  <div class="col-sm-4">Ensimmäinen elementti</div>
  <div class="col-sm-4">Toinen elementti</div>
  <div class="col-sm-4">Kolmas elementti</div>
</div>

Samalla rivilla voi olla maksimissaan 12 palstaa. Palstojen lukumäärä ja niiden leveydet voi määritellä vapaasti kunhan leveyksien yhteenlaskettu summa on 12. 

Esimerkiksi tässä ensimmäinen palsta täyttää puolet sivusta ja kaksi seuraavaa molemmat neljänneksen:

<div class="row">
  <div class="col-sm-6">Palstan leveys 1/2</div>
  <div class="col-sm-3">Palstan leveys 1/4</div>
  <div class="col-sm-3">Palstan leveys 1/4</div>
</div>

Palstat sijoitetaan row-luokan sisälle. row-luokkia voi sijoittaa sivulle useita, milloin ne erottelevat sisältönsä eri riveille:

<div class="row">
  <div class="col-sm-4">Rivi 1, ensimmäinen elementti</div>
  <div class="col-sm-4">Rivi 1, toinen elementti</div>
  <div class="col-sm-4">Rivi 1, kolmas elementti</div>
</div>
<div class="row">
  <div class="col-sm-4">Rivi 2, ensimmäinen elementti</div>
  <div class="col-sm-4">Rivi 2, toinen elementti</div>
  <div class="col-sm-4">Rivi 2, kolmas elementti</div>
</div>

Lisätietoa palstoituksesta löytyy Bootstrap 3 ohjeesta (Finnassa käyttössä Bootstrap 3-kirjasto).

RSS-syötteet

RSS-syöte karuselliin:

https://musasto.wordpress.com/feed/

RSS-syöte uutislistaukseen:

https://blogs.helsinki.fi/librarynews/feed/

RSS-syöte hakutuloksesta:

https://finna.fi/Search/Results?filter%5B%5D=free_online_boolean%3A%221%22&lookfor=helsinki&type=AllFields&view=rss

 ... joka löytyy hakutulossivun lopusta, kohdasta RSS-syöte:

https://finna.fi/Search/Results?lookfor=helsinki&type=AllFields&filter%5B%5D=free_online_boolean%3A1

Julkisen suosikkilistan RSS-syöte löytyy myös sivun lopusta:

https://www.finna.fi/List/702774

RSS-elementin lisäys sivupohjaan:

<?= $this->feed('carousel'); ?>
  • No labels