You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 7 Next »

Ohjeet nettisivujen valmistukseen

1. Valitse ohjelma, jolla valmistat sivun. Voit tehdä koodia muiden muassa Adoben Dreamweaverillä, Textwranglerillä tai käyttöjärjestelmäsi notepadia. Tämä sivusto on tehty käyttäen Dreamweaveria.

2. Avaa valitsemasi ohjelma ja luo uusi dokumentti. Valitse DocType-ponnahdusvalikosta haluamasi tyyli ja luo tiedosto.

3. Valmiin pohjan ensimmäiseltä riviltä näet dokumentin tyypin. Esimerkiksi käyttäessäsi HTML5:tä, koodissa lukee <!DOCTYPE HTML>

4. <title> </title> merkkien väliin laitetaan sivun otsikko, jonka halutaan näkyvän selaimessa välilehtien kohdalla.

5. <body> </body> merkkien väliin kirjoitetaan sivun varsinainen sisältö.

  • <h1> </h1> merkkien väliin laitetaan sivun pääotsikko, <h2> jne. väliotsikot
  • linkkejä voit lisätä esimerkiksi tällä komennolla <a href=¨nettisivu.fi¨>paina tästä</a>
  • voit katkasta rivin <br> -komennolla
  • <p> on välilyönti
  • <b> </b> -komennolla voit tummentaa, <i> </i> -komennolla voit kursvioida ja <u> </u> -komennolla voit alleviivata

6. CSS-tyylimääreitä voit muokata lisäämällä <head> -tagin alle style sheetin

  • sen alle voit määritellä esimerkiksi taustan värin ja fonttiperheen

7. Kuvan voit lisätä Dreamwaverin avulla painamalla ylälaidasta insert, valitsemalla image ja seuraamalla ohjeita.

  • koodi näyttää tältä: <img src="images/kuva.jpg" width="465" height="106">
  • kuvan tulee löytyä head directorystä ja niille voi tehdä oman kansion
    8. Faviconin, eli välilehden nurkassa näkyvän kuvan, voit lisätä käyttämällä koodia <link rel="shortcut icon" href="kuvan nimi">
  • faviconin tulee olla 16 x 16 pikseliä ja se tulee lisätä head directoryyn muiden sivujen joukkoon

9. Muista validoida sivu, eli tarkistaa sen mahdollisten virheiden varalta täällä.

Tekemämme sivu löytyy täältä.

  • No labels
You must log in to comment.