Tekstin muokkaaminen 2008-01-05 19:04

Kuvaus:

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

  1. Kopioi esimerkiksi Lorem ipsum -tekstiä sivullesi. Maalaa haluamasi teksti, ja valitse Muokkaa | Kopioi (Ctrl+C)
  2. Liitä teksti FrontPagessa aloittamallesi sivulle toiminnolla Muokkaa | Liitä määräten | Normaali kappale (Ctrl+V).

Tallentaminen

  1. Tallentaaksesi sivun, valitse Tiedosto | Tallenna, tai paina Vakio-työkalurivin Tallenna-painiketta (Ctrl+S).
  2. Jos haluat vaihtaa sivun otsikkoa, valitse Muuta. Annettuasi nimen, valitse OK. 
  3. Anna tiedostolle nimeksi vaikkapa oppitunti_1.htm. (Huom! älä poista .htm tai .html -tarkennetta tiedostonimestä.) 
  4. 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 

  1. Valitse maalaamalla teksti johon linkki lisätään. 
  2. Napsauta Muotoilu-työkalurivin Lisää hyperlinkki -painiketta (Ctrl+K).
  3. Kirjoita sivun URL-osoite, tai jos linkität omaan sivustoosi kuuluvaan tiedostoon, valitse haluamasi tiedosto.
  4. 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.
  5. 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.

  1. Valitse Lisää | Päivämäärä ja kellonaika
  2. 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. 

  1. Saat ne käyttöösi valitsemalla Muotoile | Teema
  2. 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

  1. Käytä väliotsikoita tekstin jäsentämiseen, ja merkitse ne oikeilla otsikkotyyleillä. 
  2. Kirjoita leipätekstikappaleita. Korosta joitakin olennaisia kohtia lihavoimalla, kursivoimalla ja alleviivaamalla.
  3. Listaa sopivaan kohtaan luettelomerkeillä varustetulla luettelolla perheenjäsenesi. 
  4. Listaa numeroidulla luettelolla vaikkapa kolme suosikkielokuvaasi. 
  5. 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. 
  6. Lisää jokin erikoismerkki, esimerkiksi kirjoittamalla hinta ja sen perään euromerkki (€).
  7. Lisää yhteystietosi käyttämällä osoitetyyliä.
  8. Lisää loppuun sivun viimeinen muokkauspäivämäärä. 
  9. Kokeile auttaako vaakaviiva tekstin jäsentämisessä.
  10. 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:

Sivuston rakennesuunnitelma

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

Luokka:
http://raulihaverinen.fi/verkko-opas/?id=77