Verkkosivut perinteisesti Tanja Välisalo 11.2.2009
WWW-sivujen vieminen omaan kotisivutilaan yliopiston mikroverkossa https://salasana.jyu.fi 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
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
Luo harjoituksen tiedostoille oma kansio esim. kotisivut Tallenna tiedosto nimellä index.html
Sovellusikkunan osat Työkalurivit { Avoinna olevat tiedostot Tehtäväikkuna Näkymän valinta
Tekstin lisääminen Valitse dokumentin näkymäksi Rakenne Kirjoita sivulle lyhyt virke.
XHTML-koodi Tarkastele dokumenttia Koodi- ja Jakaminen-näkymissä. Huomaat, että kirjoittamasi teksti näyttäytyy siellä muodossa: <p>kirjoittamani virke.</p>
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
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ä
Otsikko Lisää dokumenttiin index.html pääotsikko Valitse sille työkalurivin tyylivalikosta tyyli Heading1 Tarkastele jälleen koodin muutoksia
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
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
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. http://www.jyu.fi) ja paina OK Kokeile linkin toimintaa Esikatselu-näkymässä
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ä
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
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
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ä
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ä
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
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
Valitse kokeiltavaksi jokin valmiista malleista Tallenna tiedosto samaan kansioon, johon olet tallentanut html-sivut nimellä tyyli1.css
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
Koodin alku näyttää nyt kutakuinkin tältä: <html> <head> <link href
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 http://www.w3schools.com/tags/, jossa on myös hyvä tutoriaali html-koodaukseen
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/
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