4.3 Kehittäjän työkalut
Googlen Chrome- että Firefox-selaimessa on olemassa hyödyllinen työkalu sivuston kehittäjälle. Työkalu tarkastelee sivun html-koodia ja elementtiin liittyvää CSS-koodia. Työkalussa voi myös asettaa uusia tai muokata olemassa olevia CSS-määrittelyjä. Muutokset eivät tallennu mihinkään, vaan kun sivu ladataan uudelleen painamalla F5-painiketta tai selaimen Refresh-painiketta sivu latautuu uudelleen palvelimelta tai selaimen välimuistista ja asetetut muutokset menetetään.
Voit siis avata verkkosivulta kehittäjän työkalut klikkaamalla selaimessa jonkin sivulla olevan elementin päällä hiiren kakkospainiketta . Valitse avautuvasta valikosta Tarkista(Inspect) Chrome-selaimessa. Jos käytät Firefoxia voit avata kehittäjän työkalut valinnasta Inspect Element.
Google Chromen hallintapaneeli
Tarkastellaan hieman tarkemmin Googlen kehittäjätyökalua, jonka käyttöliittymä koostuu kuvien mukaisista paneeleista.
Hallintapaneelissa muotoilemisessa tarvittavat osat ovat seuraavat:
- Sivun lähdekoodi eli html-koodaus
- CSS-muotoilut, jos näkyvissä Styles-välilehti.
- Konsolipaneelia en ole tarvinnut muotoilutarkoituksessa, joten sen voi sulkea.
- Sivunäkymän hallintapaneeli, jossa yllä vasemmalla valittavissa näyttölaitteen asetus ja sen oikealla puolella näkymän resoluutio pikseleinä. Eriväriset viivat alempana ovat sivulla käytössä olevia mediamäärittelyjä.
CSS-muotoilujen paneeli
Kun viet hiiren CSS-hallintapaneelin päälle, jonkin määrityksen päälle voit nähdä kuinka jokaisen määritteen eteen ilmestyy täppä. Jos klikkaat täpän pois, kyseinen määäritys poistuu käytöstä sivun esikatselussa selaimen vasemmalla puolella.
Voit myös lisätä uuden määritteen klikkaamalla jonkin määriterivin lopussa puolipisteen jälkeen. Määritteen arvon muuttaminen tapahtuu klikkaamalla arvon päällä, jolloin arvo muuttuu harmaataustaiseksi. Nyt voit asettaa määritykselle uuden arvon.
Harjoitus
Tehdään pieni harjoitus aiheesta. Klikkaa allaolevan elementin päällä hiiren oikealla painikkeella ja avaa kehittäjän työkalu edellisen ohjeen mukaisesti.
- Muuta ”ON HAUSKAA” tekstin väri vihreäksi asettamalla tekstin color-määrityksen arvoksi Green
- Muuta taustan vihreän laatikon taustaväri (background-color) keltaiseksi asettamalla arvon määritteelksi yellow
- Poista tekstin ”SIVUJEN RAKENTELU” alleviivaus (text-decoration) asettamalla arvoksi none.
- Muuta edellisen tekstin asetus SUURAAKKOSISTA muotoon ”Sivujen Rakentelu” asettamalla CSS-määrittelylle text-transform arvo Capitalize.
