Verkkosivut perinteisesti. Tanja Välisalo

Transkriptio

1 Verkkosivut perinteisesti Tanja Välisalo

2 WWW-sivujen vieminen omaan kotisivutilaan yliopiston mikroverkossa Klikkaa painiketta Activate WWW Klikkaa painiketta Activate UNIX Verkkosivutila näkyy resurssienhallinnassa W:-levyasemana, kun seuraavan kerran kirjaudut yliopiston mikroverkkoon W:-asema toimii samoin kuin muut levyasemat

3 Microsoft FrontPage 2003 Perustoiminnot helppoja muihin Microsoftin ohjelmistoihin tottuneelle (esim. fontin muokkaus, taulukon ja kuvien lisääminen) Käynnistä Ohjelmat Microsoft Office Microsoft Office FrontPage2003 Ensimmäisena aukeaa tyhjä HTMLdokumentti

4 Luo harjoituksen tiedostoille oma kansio esim. kotisivut Tallenna tiedosto nimellä index.html

5 Sovellusikkunan osat Työkalurivit { Avoinna olevat tiedostot Tehtäväikkuna Näkymän valinta

6 Tekstin lisääminen Valitse dokumentin näkymäksi Rakenne Kirjoita sivulle lyhyt virke.

7 XHTML-koodi Tarkastele dokumenttia Koodi- ja Jakaminen-näkymissä. Huomaat, että kirjoittamasi teksti näyttäytyy siellä muodossa: <p>kirjoittamani virke.</p>

8 XHTML-koodin runko Dokumentissa oli valmiina koodia, joka muodostaa dokumentin rungon Kaikilta WWW-sivuilta löytyvät elementit html, jonka sisällä ovat head sisältää metatietoja body sisältää WWW-sivun varsinaisen sisällön

9 Head-elementin sisältö HTML-dokumentin head-elementin sisällä on aina dokumentin otsikko, ja sinne voidaan sijoittaa myös erilaisia metatietoja ja linkki tyylitiedostoon Title-elementti sisältää dokumentin otsikon, joka näkyy selaimen yläpalkissa Title-elementin sisältönä olevan tekstin voit korvata jollain sivua kuvaavalla tekstillä

10 Otsikko Lisää dokumenttiin index.html pääotsikko Valitse sille työkalurivin tyylivalikosta tyyli Heading1 Tarkastele jälleen koodin muutoksia

11 Uusi sivu Tehdään toinen sivu samaan tapaan Anna uudelle sivulle nimeksi esim. mina.html Kirjoita sivulle lyhyesti tekstisisältöä Huomaa, että molemmat avoinna olevat dokumentit näkyvät omina välilehtinään ohjelmassa

12 Hyperlinkki Hyperlinkkejä on kolmenlaisia Ulkoinen linkki vie pois omalta sivustolta Sisäinen linkki joka vie omalta sivulta toisella omalle sivulle Yhden sivun sisäinen kirjanmerkki- tai ankkurilinkki joka vie esim. sivun alalaidasta takaisin sivun alkuun

13 Ulkoinen linkki Tehdään sivulle index.html ulkoinen linkki yliopiston sivuille Kirjoita dokumenttiin teksti, josta linkki muodostetaan, esim. Opiskelen Jyväskylän yliopistossa. Maalaa teksti, josta haluat muodostaa linkin Valitse Lisää Hyperlinkki (tai paina Ctrl+K) Lisää linkin osoite (esim. ja paina OK Kokeile linkin toimintaa Esikatselu-näkymässä

14 Sisäinen linkki Tehdään vielä sisäinen linkki Kirjoita sivulle teksti, josta linkki muodostetaan, esim. Lisätietoa minusta löytyy täältä Maalaa teksti, josta haluat muodostaa linkin Valitse Lisää Hyperlinkki (tai paina Ctrl+K) Valitse Kohde-ikkunasta tiedosto mina.html ja paina OK Kokeile linkin toimintaa Esikatselu-näkymässä

15 Kuvan lisääminen 1/2 Luo kuville oma kansio kuvat kurssin harjoituksia varten luomasi kansion sisään Mene osoitteeseen users.jyu.fi/~tatjana/htkp200 ja tallenna sieltä tiedosto lehti.jpg äsken luomaasi kansioon

16 Kuvan lisääminen 2/2 Vie kursori siihen kohtaan tiedostossa, johon haluat lisätä kuvan Jos lisäät kuvan tyhjälle riville, niin varmista, että tyylinä on Normaali Valitse Lisää (Insert) Kuva (Picture) Tiedostosta (From File) Tarkastele html-koodia, huomaat että se poikkeaa tähänastisesta

17 Kuvan attribuutit 1/2 Kuvaelementin img yhteydessä tulisi aina käyttää attribuutteja src ja alt src (source) kertoo kuvan sijainnin suhteessa HTML-tiedostoon alt kertoo kuvan sisällön tekstinä niille, jotka käyttävät selainta ilman kuvia tai ruudunlukulaitteen välityksellä

18 Kuvan attribuutit 2/2 Klikkaa hiiren oikeaa painiketta kuvan päällä ja valitse Kuvan ominaisuudet (Picture Properties) ja sieltä välilehti Yleiset (General) Anna kuvan vaihtoehtoiseksi tekstiksi vaikkapa Syksyn lehtiä

19 Verkkosivun tyylit Perinteisiä WWW-sivuja rakennettaessa tyylit pitää joko luoda kokonaan itse.csstyylitiedostoon tai käyttää valmista tyyliä Joka tapauksessa tyylitiedostoon pitää luoda linkki jokaiselta html-sivulta FrontPagessa on myös jonkin verran yksinkertaisia valmiita malleja tyylitiedostoille

20 Tyylitiedosto FrontPagen valmispohjaa käyttäen Luodaan sivustoa varten tyylitiedosto Valitse Tiedosto (File) Uusi (New) ja oikean reunan tehtäväpalkista Lisää sivumalleja Valitse avautuvasta ikkunasta Tyylisivut

21 Valitse kokeiltavaksi jokin valmiista malleista Tallenna tiedosto samaan kansioon, johon olet tallentanut html-sivut nimellä tyyli1.css

22 Tyylitiedoston linkittäminen verkkosivulle Jotta tyyli näyttäytyisi tietyllä web-sivulla, pitää siitä luoda linkki tyylitiedostoon Lisää html-sivun head-elementin sisälle linkki tyylitiedostoon seuraavasti: <link href="tyyli1.css" rel="stylesheet" type="text/css" /> Kopioi sama koodi myös toiselle html-sivulle

23 Koodin alku näyttää nyt kutakuinkin tältä: <html> <head> <link href

24 Tyylin muokkaus Tyylejä pääset muokkaamaan aktivoimalla ensin tyylitiedoston tyyli1.css Klikkaa valikosta Muotoile Tyyli Tyylit on nimetty html-elementtien mukaan: h1 = pääotsikko h2 = alaotsikko p = tekstikappale a = hyperlinkki Lisää html-elementtejä löydät esim. osoitteesta jossa on myös hyvä tutoriaali html-koodaukseen

25 Sivujen vieminen verkkoon Siirrä tai kopioi laatimasi tiedostot index.html, mina.html ja tyyli1.css W:- asemalle Tarkastele sivujasi WWW-selaimessa osoitteessa: users.jyu.fi/~tunnus/

26 Valmis tyylitiedosto verkosta Kun käytät valmiita verkon tyylitiedostoja, niin html-tiedostojen luominen kannattaa aloittaa vasta tyylitiedoston lataamisen jälkeen, sillä mukana tulee jo valmis pohja index.html-tiedostolle Ulkoasu sisältää usein myös kuvia, joten ulkoasut ovat useimmiten zip-tiedostoja, joiden sisällä on index-tiedosto, varsinaiset ulkoasumääritykset sisältävä css-tiedosto ja kuvia