Aluksi tutustumme FrontPage 2000:n perustoimintoihin. Näihin palaamme läpi
kurssin.
Käyttöliittymä
- Valikko-, Vakio-, ja Muotoilu-työkalurivi.
- Normaali-, HTML-, Esikatselu-työtilat
Uusi sivu
Uuden sivun voit aloittaa valitsemalla Tiedosto | Uusi | Sivu... | Normaali sivu (Ctrl+N).
Tekstin lisääminen sivulle
- Kopioi esimerkiksi Lorem ipsum
-tekstiä sivullesi. Maalaa
haluamasi teksti, ja valitse Muokkaa |
Kopioi (Ctrl+C).
- Liitä teksti FrontPagessa aloittamallesi sivulle toiminnolla Muokkaa
| Liitä määräten | Normaali kappale (Ctrl+V).
Tallentaminen
- Tallentaaksesi sivun, valitse Tiedosto | Tallenna, tai paina
Vakio-työkalurivin Tallenna-painiketta (Ctrl+S).
- Jos haluat vaihtaa sivun otsikkoa, valitse Muuta. Annettuasi nimen,
valitse OK.
- Anna tiedostolle nimeksi vaikkapa oppitunti_1.htm. (Huom! älä
poista .htm tai .html -tarkennetta tiedostonimestä.)
- Valitse
Tallenna.
Jatkossa tekstiä on hyvä tallentaa usein!
Kappaleiden muotoileminen
Paina Enter-näppäintä kerran kappalevaihtojen kohdalla.
Rivinvaihto ilman kappaleen vaihtumista lisätään
näppäinyhdistelmällä Vaihto+Enter.
Muotoilu-työkalurivi
- tekstin tyyli
- lihavointi (Ctrl+B), kursivointi (Ctrl+I), alleviivaus (Ctrl+U).
- tekstin tasaus (vasen, keskitetty, oikea)
- numerointi, luettelomerkit
- suurenna/pienennä sisennystä
Huom! Muotoilu-työkaluriviltä löytyvät myös fontti, fonttikoko, tekstin taustaväri, fontin väri
-toiminnot. älä käytä
näitä toimintoja, sillä selaimet näyttävät ne eri tavoin. Muotoilut voit helpoiten poistaa
valitsemaltasi alueelta Muotoile | Poista muotoilut (Ctrl+Vaihto+Z).
Fontin ulkoasumuotoilut tehdään CSS-tyylejä käyttämällä. Tästä lisää jaksossa CSS-tyylit.
Tyyli-valikko
Voit muuttaa tekstin tyyliä Muotoilu-työkalurivin Tyyli-valikosta esimerkiksi seuraavilla tyyleillä.
- Luettelomerkeillä varustettu luettelu (lisää luettelomerkit
rivien/kappaleiden eteen)
- Muotoiltu (valmiiksi muotoiltu teksti)
- Normaali (leipäteksti)
- Numeroitu luettelo (tekee kappaleista järjestysnumeroilla alkavan listan)
- Osoite (osoitetietojen merkitsemiseksi)
- Otsikko 1-6 (otsikkotasojen merkitsemiseen) (Ctrl+Alt+[1-6])
Muita toimintoja
- Erikoismerkki: Lisää | Symboli.
- Vaakaviiva: Lisää | Vaakaviiva. Voit poistaa vaakaviivat
valitsemalla sen, ja painamalla Delete-näppäintä.
- Esikatselu: paina Vakio-työkalurivin Esikatsele selaimessa -painiketta.
Voit esikatsella myös Esikatselu-työtilassa.
Hyperlinkki
- Valitse maalaamalla teksti johon linkki lisätään.
- Napsauta Muotoilu-työkalurivin Lisää hyperlinkki -painiketta (Ctrl+K).
- Kirjoita sivun URL-osoite, tai jos linkität omaan sivustoosi
kuuluvaan tiedostoon, valitse haluamasi tiedosto.
- Jos haluat esimerkiksi sivustosi ulkopuolelle vievän linkin avautuvan
uuteen selainikkunaan, ja sivusi jäävän uuden ikkunan alle auki, valitse
Kohdekehys-kohtaan valinta Uusi ikkuna.
- Paina OK.
Huomioi kohdassa 1, että sivulle linkittävän tekstin on hyvä olla
havainnollinen. Lisää siis linkki tekstikohtaan, jossa esim. mainitset
sivuston nimen, tai jotain olennaista sivun sisällöstä:
- VääRIN: FrontPage-kurssilla opiskelemme kotisivun tekemistä. Kurssin verkkosivut löydät täältä.
- OIKEIN: FrontPage-kurssilla opiskelemme kotisivun
tekemistä.
Päivämäärä
Sivulla voi mainita myös sen viimeisen muokkauspäivämäärän, että
selaaja tietää sivun ajankohtaisuuden.
- Valitse Lisää | Päivämäärä ja kellonaika.
- Ohjelma antaa oletuksena viimeisen muokkauspäivän ilman kellonaikaa. Tee
haluamasi muutokset, ja hyväksy painamalla OK.
Valmiit teemat
Voit käyttää tässä harjoituksessa FrontPagen tarjoamia valmiita teemoja
sivun ulkoasun muotoiluun.
-
Saat ne käyttöösi valitsemalla Muotoile | Teema.
- Valitse haluamasi
teema, ja hyväksy muutokset.
Voit käyttää harjoituksessa valmiita teemoja. Sivujen ulkoasua voi kuitenkin teemoja tehokkaammin hallita CSS-tyyleillä. Tästä lisää jaksossa CSS-tyylit.
Harjoitus 1
Tee esittelysivu itsestäsi tai keksityin tiedoin. Tallenna sivu nimellä index.htm.
- Käytä väliotsikoita tekstin jäsentämiseen, ja merkitse ne oikeilla
otsikkotyyleillä.
- Kirjoita leipätekstikappaleita. Korosta joitakin olennaisia kohtia
lihavoimalla, kursivoimalla ja alleviivaamalla.
- Listaa sopivaan kohtaan luettelomerkeillä varustetulla luettelolla
perheenjäsenesi.
- Listaa numeroidulla luettelolla vaikkapa kolme suosikkielokuvaasi.
- Lisää johonkin kohtaan tekstiä omaksi kappaleekseen lyhyt lainaus
jostakin sinua koskettavasta uutisesta. Sisennä ja kursivoi kappale. Muista
myös kertoa mistä olet tekstikappaleen lainannut, ja lisää hyperlinkki
alkuperäiseen uutiseen.
- Lisää jokin erikoismerkki, esimerkiksi kirjoittamalla hinta ja sen
perään euromerkki (€).
- Lisää yhteystietosi käyttämällä osoitetyyliä.
- Lisää loppuun sivun viimeinen muokkauspäivämäärä.
- Kokeile auttaako vaakaviiva tekstin jäsentämisessä.
- Muotoile vielä sivun ulkoasu haluamallasi teemalla.
Muista tallentaa ja esikatsella usein!
Kotitehtävä
Tee ensi kerraksi sivuston rakennesuunnitelma, jossa pääsivu jakautuu
vähintään kolmeen alaosioon, ja ainakin osa alaosioista saa vielä
alapuolelleen sivuja, siten että hierarkia on vähintään kolmikerroksinen.
Voit suunnitella edellä tehdyn harjoituksen pohjalta, tai vapaasti oman
kotisivusuunnitelmasi mukaan. Esimerkki:

Voit myös etsiä valmiiksi kuvia joita liittää sivuillesi, ja kirjoittaa
esimerkiksi Muistiossa sivuston eri sivuille tulevaa tekstiä.