Tietotekniikan perusteet

Web - Kotisivun suunnittelu

Kotisivujen tekeminen onnistuu monilla tavallisilla työvälineillä. Varsinaisia HTML-sivueditoreja on mm.  Notepad++ , joilla pystyy tekemään yksinkertaisia nettisivuja.

Tässä harjoituksessa tutustumme ensin HTML-sivunmäärittelykieleen. Joskaan sen osaaminen ei ole välttämätöntä sivujen laatijalle, helpottaa HTML-koodin ymmärtäminen suunnittelua ja ylläpitoa.

Tee erillinen HTML-harjoitus.

Kun perustekniikka on hallussa, on suunnittelun ensimmäinen vaihe ideointi. Selaile kiinnostavien aihealueiden Internet-sivuja, ja mieti, millaisen itse toteuttaisit. Voit käyttää apuna hakukoneita. Mieti, miksi jotkut sivut toimivat paljon paremmin kuin toiset. Ideoita voi "varastaa" ja kuvia poimia tekijänoikeuksia kunnioittaen muilta sivuilta.

Keksi sivulle jokin kiinnostava teema: se voi liittyä työhön, harrastuksiin tai perhe-elämään. Mitä haluat kertoa? Jos et keksi hyvää sisältöä, harkitse hyvien linkkien kokoamista. Ota myös huomioon, että vastaisuudessa saatat tallettaa harjoitustöitä ja projektitöitäsi kotisivuille, jolloin tarvitset niitä varten linkkisivun.  Suunnittele:

• sisältöteksti
• kuvat, tausta
• linkit
• osoitetiedot (sähköposti)
• rakenne, jos sivuja on monta

Kuvan tai taustakuvan lisääminen edellyttää, että olet ensin tallentanut kuvan levyllesi samaan hakemistoon, johon sijoitat HTML-sivusi. Sallitut kuvatyypit ovat GIF ja JPG. Jos haluat sijoittaa kuvan jollekin tietylle kohdalle sivua, käytä taulukkoa (table) pohjana. Huomaa myös, että sivusi saattaa näyttää erilaiselta erikokoisissa ikkunoissa ja eri selaimilla.

Sijoita sivullesi ainakin yksi valokuva (tai muu kuva), jonka voit

• ottaa digikameralla,
• skannata paperikuvasta,
• poimia CD:ltä tai
• poimia internetistä.

Kokeile kuvan kaunistamista joko Office kuvaeditorilla tai Paint -ohjelmalla, joka sisältyy Windows:iin, jollakin netistä löytyvällä ilmaisella työkalulla (IrfanView, Paint.Net, Picasa) tai maksullisella Photoshop-ohjelmalla.

Toteuta sivusi. Pääsivun nimenä on oltava index.html. Talleta ne kiintolevylle ja varakopio levykkeelle. Muista, että kaikkien tiedostojen on oltava samassa paikassa, samassa hakemistossa, jokainen kuva ja tausta omana tiedostonaan.

Sivuilla on oltava ainakin sähköpostiosoite tai muu yhteystieto, yksi muu linkki (muotoa http://www...), toteutuspäivämäärä, kuva ja tekstiä. Testaa niiden toiminta selaimen avulla.

Asenna sivut palvelimelle:

• Käynnistä Secure File Transfer FTP-ohjelma (WinSCP),
  yhdistä (connect) Host name: shell.metropolia.fi -serverille ja
  anna käyttäjätunnus (user ID) ja salasana (password).
  Vaihda hakemistoksi (target directory) public_html, ja lähetä tiedostot.
• Jotta suuri yleisö saisi oikeuden katsella sivuja, muuta niiden käyttäjäoikeudet suoraan FTP-ohjelmasta:
  näpäytä hiirellä tiedoston nimeä, ensin vasemmalla ja sitten oikealla näppäimellä ja valitse pikavalikosta Properties. Katso, että kaikilla käyttäjäryhmillä on Read-oikeudet, ja itselläsi (user) myös Write, ja valitse OK lähettääksesi oikeudet.
  
• testaa toiminta: avaa sivusi selaimella osoitteessa http://users.metropolia.fi/~käyttäjä04.

Päivittänyt: Jaana Holvikivi Muutettu 13.11.2011