Verkkojulkaisuharjoitus1 TAVOITE Harjoituksen tarkoituksena on opiskella käyttämään verkkojulkaisueditoria (Microsoft Expression Web) ja käynnistämään verkkosivu internetissä. VERKKOSIVUEDITORIN KÄYTTÖOHJEITA (Engl.): http://www.microsoft.com/expression/ Käynnistä verkkosivueditori ja siirry Code tilaan (työtilan vasen alakulma). Jos ohjelma käynnistyy hakutilaan (näkyy kansioita ja tiedostoja) valitse File -> New: Page -> HTML -> OK
Tai paina valkoista painiketta File valinnan alapuolella (kuvan nuolen osoittamassa paikassa). Code tilassa näkymä on seuraavanlainen: Tallenna tiedosto Z-asemaan (jos se on käytettävissä) ja siellä public_html kansioon. Tee sinne alikansio harjoitus1 ja kirjoita tiedostonimeksi esim. index (se aukeaa automaattisesti osoitteesta users.metropolia.fi/~tunnuksesi/harjoitus1 ). Kuvassa on määritelty myös sivulle otsikko Change title painikkeella. Tallennuksen jälkeinen tilanne Code näkymässä: <head> osan title tagien väliin on tallentunut syöttämäsi otsikko <title>. Otsikko näkyy selaimen yläpalkissa, kun sivu avataan osoitteestaan tai tiedostona selaimessa.
Kirjoita sivullesi sisältöä. Sisältö pitää kirjoittaa <body> tagin jälkeen ennen </body> tagia. Tai voit siirtyä Design välilehdelle: tekstinkäsittelyohjelmassa. ja kirjoittaa sisältöä sinne kuten Tee sivulle otsikko: Paragraph tarkoittaa, että olet tekemässä kappaletta. Code välilehdelle syntyy automaattisestii <p> ja </p> - tagit, joiden väliin teksti sijoittuu. Vaihda kappale otsikko1 tyyppiseksi: Ja siirry pois otsikkoriviltä painamalla enter. Tallenna sivusi. Tallennuspainike on ylhäällä vasemmalla (tähti poistuu tiedostonimen perästä): Tee sivun yläreunaan, otsikon alle taulukko. Leveys 100%, solujen määrä viisi. Valitse työkalu näytön yläreunasta (hiiren vasen näppäin). Valitse ylärivi liikuttamalla kursoria ruutujen yli ja paina vasenta hiiren näppäintä. Syntyy taulukko, johon voimme tehdä esim. linkit toisille sivuillemme (kaikki sivut ovat erillisiä tiedostoja).
Näkymän pitäisi olla nyt suunnilleen tällainen: <td> Tagi määrittelee standardin solun HTML - taulukossa. Taulukon viisi saraketta näkyvät hämärästi työtilassa. Tähden saat taas pois tiedostonimen perästä tekemällä uuden tallennuksen. Tee uusi sivu (.html tiedosto) samaan kansioon kuin ensimmäinen sivu ja anna nimeksi tuotteet: Painettuasi uusi painiketta tee tallennus:
Otsikoi sivu kuten etusivu ja tee uudelle sivulle myös samanlainen taulukko: Tee linkit sivujen välille seuraavasti: Kirjoita yllä olevat tekstit toisen sivun taulukon kenttiin ja määrittele sana Etusivu alueeksi (hiiren vasen näppäin pohjassa). Paina linkkipainiketta näytön oikeasta yläreunasta: Jos painike ei ole käytettävissä (harmaana), paina tallennuspainiketta. Avaa kansio, missä tiedostot ovat ja valitse etusivu (index.html) ja paina OK.
Siirry yläreunan välilehdelle index.html ja tee siellä samat operaatiot (linkki tuotteet sivulle): Tallenna tiedostot ja avaa sivustosi selaimessa. Kokeile linkkien toimintaa.
Palaa verkkosivustoeditoriin. Lisää sivustolle tiedostot: Huoltopalvelut.html Tarjoukset.html Yhteystiedot.html Linkitä sivut keskenään käyttäen vastaavaa taulukkoa kullakin sivulla. Etusivu lisäysten jälkeen: Taulukko helposti uusille sivuille: Code- välilehti alareunasta etusivulla (index.html), ota kopioi tälle sivulle tekemästäsi taulukosta jä liitä se muiden sivujen otsikoiden alle (Code välilehdellä):
Esimerkiksi Huoltopalvelut sivulle on nyt lisättävä linkki Etusivulle (index.html) ja poistettava linkki Huoltopalvelut sivulle. Linkki pois aluevalinnalla ja deletellä. Kirjoita teksti uudelleen. Sivujen yhtenäistäminen ulkoasu.css tiedoston avulla, yhteinen tyyli kaikille sivuille. Valitse File -> New -> Page -> CSS
Tallenna tiedosto (sama kansio kuin sivuilla): Käynnistä tyylien lisääminen ja valitse Selector valikosta h1 (otsikko1 tagi): Paina työtilassa Enter { - merkin jälkeen (aloitusmerkki): Aukeavasta valikosta voidaan vaihtaa otsikko1:n väriä kaikilla sivuilla.
Tallenna tiedosto ulkoasu.css ja ota se käyttöön kaikilla sivuilla (Attach Stylesheet). Löytyy oikeasta alareunasta työtilassa. Toiminnat käynnistämisen jälkeen: <head> - osaan ilmestyvä uusi rivi, voidaan myös kopioida kaikkien sivujen <head> osaan Code - välilehdellä: <title>huoltopalvelut</title> <link href="ulkoasu.css" rel="stylesheet" type="text/css" /> </head> LOPPUTULOS :
Muuta taustan väri sivustolla käyttäen ulkoasu.css tiedostoa. Lisää ulkoasu.css tiedostoon rivit: #page_content { background:rgb(208,208,255); } (värin voit tietysti määritellä itse, haku: HTML värit) Kirjoita body tagin sisään (.html verkkosivuille) id= Nyt voit valita käyttöön page-content määrityksen. Jatkossa ei enää tarvitse sivuston rakenteeseen liittyviä muutoksia tehdä kuin yhteen paikkaan: ulkoasu.css tiedostoon. OSOITTEESI: users.metropolia.fi/~tunnuksesi/harjoitus1 PALAUTUS: Verkko-osoitteena MOODLEN palautuslinkin avulla.