Työskentely 2008-01-01 02:35

Kuvaus:	Tällä sivulla eri työvaiheisiin ja ohjelmiin liittyviä käytännön ohjeita. A. Työvaiheet Verkkosivujen toteutus voisi karkeasti noudatella seuraavanlaista runkoa. Erilaisia suunnitteluvaiheita en ole työvaiheisiin merkinnyt. Kirjoita sisältö Merkkaa rakenne XHTML:llä Validoi XHTML Muotoile ulkoasu(t) CSS:llä Validoi CSS Testaa mahdollisimman monella selaimella, eri käyttöjärjestelmissä Julkaise sivut B. Työskentely koodausvaiheessa Koodausvaihe tiivistetysti: Avaa XHTML-tiedosto sekä tekstieditoriin että selaimeen. Kirjoita sivua tekstieditorissa, ja tallenna. Siirry selaimeen, ja päivitä näkymä. Toista vaiheita 2-3. Käynnistä Crimson Editor ja Firefox Ensi alkuun käytämme kahta ohjelmaa. Itse koodin kirjoittaminen tapahtuu Crimson Editorissa Käynnistä \| Kaikki ohjelmat \| Crimson Editor, ja kirjoitetun sivun esikatselu tehdään Firefox-selaimessa Käynnistä \| Kaikki ohjelmat \| Mozilla Firefox \| Mozilla Firefox. Koodin kirjoittaminen Crimson Editorissa Crimson Editorin avautuessa saat eteesi tyhjän sivun. Lisää tyhjiä sivuja saat valitsemalla ylävalikosta File \| New, tai painamalla vakiotyökalurivin New-painiketta: Voit aloittaa työskentelyn kopioimalla Firefoxin-selainikkunasta allaolevan koodin sivun pohjaksi. Maalaa koodi hiirellä. Valitse Muokkaa \| Kopioi (Edit \| Copy). Siirry Crimson Editoriin, ja valitse siellä Edit \| Paste. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi"> <head> <title>Sivun otsikko</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> </head> <body> Sivun sisältö. </body> </html> Kopioituasi sivupohjan, tee heti ensimmäinen tallennus valitsemalla File \| Save. ... tai paina vastaavaa Vakiotyökalurivin Save-painiketta: Koska teemme ensimmäistä tallennusta, ohjelma kysyy tallennuspaikkaa, tiedostonimeä, sekä tallennusmuotoa. Valitse tallennuspaikka kohdan Kohde alasvetovalikosta. Kirjoita tämän jälkeen tiedostolle nimi. älä käytä skandeja tai välilyöntejä tiedostonimessä, ne aiheuttavat ongelmia kun sivuja selataan Internetissä. Huom! Crimson Editorissa tiedostomuodon valitseminen tapahtuu kirjoittamalla tiedostonimen perään oikea loppupääte!!! Loppupääte voi olla yhtä hyvin .htm kuin .html - voit käyttää kumpaa tahansa, mutta muista jatkossa kumpaa olet käyttänyt. Tiedostonimi ja tallennusmuoto annetaan siis kirjoittamalla Tiedostonimi-kohtaan esimerkiksi esimerkki.html. Koska koodia kirjoitettaessa osa riveistä muodostuu niin pitkiksi etteivät ne mahdu leveyssuunnassa ohjelmaikkunan yhdelle näytölle, on hyvä ottaa käyttöön automaattinen rivitys (Word Wrap). Valitse ylävalikosta View \| Word Wrap, tai paina vastaavaa vakiotyökalurivin painiketta. Huomioi että rivitys on otettava käyttöön joka tiedostoon erikseen, ja myös jokaisella käyttökerralla erikseen. Asetusta ei siis saa tallennettua. Kun saat lisää koodia kirjoitettua, on hyvä tehdä usein välitallennuksia. Helpoiten teet sen painamalla Vakiotyökalurivin Save-painiketta. Esikatselu Firefox-selaimessa Sivua on hyvä jo kirjoittamisen aikana esikatsella selaimessa. Crimson Editorissa kirjoittamasi tiedosto on avattava myös Firefoxissa. Mikäli olet asettanut Firefoxin oletusselaimeksi, onnistuu sivun avaaminen helpoiten valitsemalla Crimson Editorin ylävalikosta Tools \| View in Browser. Jos Firefox oli jo auki, huomaa että esikatselu avautuu selaimessa uudelle välilehdelle. Mikäli Firefox taas ei ole oletusselain, siirry ensin Firefoxiin. Valitse Firefoxin ylävalikosta Tiedosto \| Avaa tiedosto (File \| Open File). Etsi kirjoittamasi tiedosto, valitse se ja klikkaa lopuksi Avaa. Voit nyt tarkastella miltä kirjoittamasi XHTML-koodi näyttää valmiina. Kun haluat jatkaa sivun muokkaamista, siirry takaisin Crimson Editoriin. Firefoxissa voit vain katsella valmista sivua, et muokata sitä! Kun olet kirjoittanut lisää koodia Crimson Editorissa, voit jälleen esikatsella sivua selaimessa. Muista ensin tallentaa tiedosto. Siirry tämän jälkeen selaimeen, ja klikkaa Päivitä-painiketta saadaksesi sivusta uuden version näkyviin. Ohjelmien sulkeminen Ohjelman sulkeminen tapahtuu oikean yläkulman punaisesta rastista kuten muissakin ohjelmissa. Crimson Editorissa saat yksittäisen sivun suljettua tämän alla olevasta pienemmästä rastista. Firefoxissa jokaisella välilehdellä on oma sulkemispainikkeensa. C. Koodin virheettömyyden tarkistaminen (validointi) Asennettuasi Web Developer -lisäosan Firefoxiin, saat selaimeen seuraavan lisätyökalurivin. Avaa aivan ensimmäisenä Firefoxiin sivu jonka virheettömyyden haluat tarkistaa. Valikosta Tools löydät validointityökalut. Toimintoja Validate HTML ja Validate CSS voit käyttää jo julkaistun (verkossa sijaitsevan) sivun koodin validoimiseksi. Valikon alareunasta löytyvät Validate Local HTML ja Validate Local CSS puolestaan validoivat paikalliselle kiintolevylle tallennetun tiedoston.
Luokka:	web
Avainsanat:	Crimson Editor, Firefox, validointi