Oppbygging av innhold på responsive nettsider.

Transkript

1 Oppbygging av innhold på responsive nettsider. HTML og CSS er koder som forteller nettleseren hvordan strukturen og utseende på en nettside skal vises på skjermen din. Selv om du ikke ser kildekoden når du redigerer innhold vil de alltid være disse som forteller hvordan resultatet skal bli til slutt. Når du arbeider med nettsider, kan det være greit med en grunnleggende innføring slik at du unngår å bryte den responsive strukturen når du redigerer siden, og slik at du selv kan strukturere innholdet på en god måte. For å se kildekoden åpner du editoren for siden du skal redigere (klikk på innhol og editer), og klikker på source øverst til venstre i menyen

2 Grunnleggende struktur For å strukturere innhold omgir man teksten med tagger. En tag begynner og slutter slik <> </> Her er noen eksempler: <h1>dette er en overskrift</h1> <h2> Dette er en overskrift </h2> <h3> Dette er en overskrift </h3> <h4> Dette er en overskrift </h4> <h5> Dette er en overskrift </h5> <h6> Dette er en overskrift </h6> <p>dette er et avsnitt.</p> <p> Dette er et annet avsnitt.</p> <a href=" er en link</a> Dette er et bilde, og bilder står alene < />: <img src=" alt="logo" /> Dette er et linjeskift, og linjeskift star alene < />:: Linje <br /> Ny linje <p><b>fet tekst i et avsnitt</b></p> <p><i>kursiv tekst i et avsnitt</i></p> Om du limer kodene du ser over inn i kildekoden på siden din vil det se slik ut:

3

4 Om du går tilbake til tekstmodus vil du se hvilken effekt taggene gir.

5 Om du redigerer tekst kan du holde deg innenfor første og siste tegn for å unngå å bryte taggen. For å endre bildet klikker du på bildet og åpner bildeegenskaper.

6 Velg «browse server» for å åpne bildearkivet.

7 Klikk på mappen du skal hente bildet i fra, og klikk på bildet for å ta det med deg tilbake til siden. Her kan du også laste opp et nytt bilde til en eksiterende mappe, eller opprette en ny kategori/mappe og laste opp et bilde til denne.

8 Dele inn sider i responsive bokser (div) Om du ønsker å dele inn siden i flere felt, samtidig som du bevarer den responsive strukturen, skal du benytte bokser <div</div> <div>dette er tekst i en en boks</div> Du kan dele opp i to halve sider, en halv og to fjeredeler, tre tredjedeler osv. <div class="one-half">første halve</div> <div class="one-half last">siste halve</div> Boksene skal ligge innenfor en annen boks som holder dem sammen. Denne boksen får klassen «clearfix». Vi skal også fortelle hvilken boks som er den siste boksen, slik at de flyter på linje. Denne får klassen «last». Da blir det slik: <div class="clearfix"> <div class="one-half">første halve</div> <div class="one-half last">siste halve</div> </div> Her er noen eksempler på bokser med bilde og tekst som du kan kopiere inn på nettsiden som en mal: ½ SIDE <div class="clearfix"> <div class="one-half"><img alt="" src=" /><p>tekst</p></div> <div class="one-half last"><img alt="" src=" /><p>tekst</p></div> </div> 1/3 SIDE <div class="clearfix"> <div class="one-third"><img alt="" src=" /><p>tekst</p></div> <div class="one-third"><img alt="" src=" /><p>tekst</p></div> <div class="one-third last"><img alt="" src=" /><p>tekst</p></div> </div>

9 1/4 SIDE <div class="clearfix"> <div class="one-fourth"><img alt="" src=" /><p>tekst</p></div> <div class="one-fourth"><img alt="" src=" /><p>tekst</p></div> <div class="one-fourth"><img alt="" src=" /><p>tekst</p></div> <div class="one-fourth last"><img alt="" src=" /><p>tekst</p></div> </div> 1/5 SIDE <div class="clearfix"> <div class="one-fifth"><img alt="" src=" /><p>tekst</p></div> <div class="one-fifth"><img alt="" src=" /><p>tekst</p></div> <div class="one-fifth"><img alt="" src=" /><p>tekst</p></div> <div class="one-fifth"><img alt="" src=" /><p>tekst</p></div> <div class="one-fifth last"><img alt="" src=" /><p>tekst</p></div> </div>

10 Om du limer koden inn i kildekoden vil det se slik ut når du går tilbake til tekstmodus: Du kan velge den strukturen som passer best for din side, og fjerner/legger til tekst der det passer.