Yleensä verkkosivua muokattaessa käytämme tiettyä muokkaustyökalua, kuten Adobe Dreamweaver, CoffeeCup, Bluefish tai jotain muuta kehitystyökalua. Entä jos olemme vain aivoriihiä tai haluamme kokeilla jotain live-sivulla? Voisimme tehdä kopion valitusta työkalumme sivusta ja leikkiä sen kanssa. Tai voimme tehdä sen web-selaimessa. Tämä opetusohjelma näyttää sinulle, kuinka muokata verkkosivua selaimessa.
Kehittäjän työkaluiksi kutsuttu Firefox kutsuu ominaisuutta Tarkasta elementti, kun taas Chrome kutsuu sitä Tarkasta. Joka tapauksessa selaimessa on tapa kurkistaa suunnittelusi kirkkauden taakse ja katsoa koodia, joka sitä ohjaa. Tämä ominaisuus on melko tunnettu ja sitä käytetään paljon. Mikä ei ole aivan niin tunnettu, on kyky tehdä muutoksia koodiin lennossa.
Kaikkia tekemiäsi muutoksia ei tallenneta, eivätkä ne vaikuta live-tilaan. Jos et halua ladata sivua kehittäjätyökaluisi, tämä on siisti tapa kokeilla.
Muokkaa mitä tahansa selaimesi verkkosivua
Dreamweaverissa ja sen kaltaisissa työkaluissa on sisäänrakennettu selainemulaattori, joka simuloi mallin näyttämistä eri selaimissa. Niinkin hyvät kuin ne ovat, ne eivät aina ole tarkkoja. Usein havaitset käynnistettäessäsi sivua, että se, mikä näytti fantastiselta kehittäjätyökalustasi, näyttää hiukan erilaiselta itsenäisessä selaimessa.
Yleensä käynnistäisit sivuston sisäisellä verkkopalvelimella ja testaat selaimessa ennen kuin käynnistät suoraa juuri tästä syystä. Jos sivu on jo elossa tai haluat vain kokeilla jotain, sitä ei tarvitse kopioida ja ladata kehitystyökaluisi, voit käyttää vain selaimen kehittäjätyökalua.
Käytän Firefoxia, joten näytän sinulle, kuinka sitä käytetään. Chrome on kuitenkin suurin piirtein sama.
- Avaa verkkosivu, jolla haluat kokeilla selaimessa.
- Napsauta hiiren kakkospainikkeella mitä tahansa sivua ja valitse Tarkasta.
Sinun pitäisi nähdä sivusi jakautuvaksi kahteen, ja alaosaan tulee uusi ruutu, jossa on jotain koodia. Tämä koodi on valitsemasi sivun käyttövoima. Eri sivuelementteihin pääsee alemman välilehden yläosassa olevista välilehdistä. Esimerkiksi näemme Firefoxissa Inspector, Console, Debugger, Style Editor ja niin edelleen.
Jos ajat kohdistinta alaruudun rivien yli, näet verkkosivun eri osien korostuksen. Korostetun koodirivin kohdalla on koodi, joka vaikuttaa siihen sivun osaan.
- Jos haluat pelata sivun ulkoasulla, kokeile Style Editoria.
- Jos haluat pelata sivun toiminnalla, kokeile konsolia tai esteettömyyttä.
- Jos haluat poistaa vikoja tai ratkaista ongelman, käytä konsolia tai virheenkorjainta
Suorituskyky on hyödyllinen paikan päällä sijaitsevalle SEO: lle, mutta muistia, verkkoa ja tallennustilaa ei käytetä niin paljon.
Muista, että voit sekoittaa kehittäjätyökaluja niin paljon kuin haluat, ja se ei vaikuta sivustoon. Mahdolliset muutokset tehdään vain siihen, miten sivu näytetään yksittäisessä selaimessa, et vaikuta itse verkkosivustoon. Kun suljet työkalun, kaikki muutokset menetetään.
Sivulle muutosten tekeminen
Nyt tiedät, että voit muuttaa mitä tahansa haluamasi vaikuttamatta verkkosivustoon, pitää hauskaa. Etsi sivulta elementti, jota haluat muokata. Voit muuttaa fontin, fontin värin, taustakuvan tai mitä haluat. Tässä esimerkissä aion muuttaa bannerin otsikon fontin väriä.
- Napsauta hiiren kakkospainikkeella tarkkaa elementtiä, jonka haluat muuttaa, ja valitse Tarkasta.
- Korosta rivi joko otsikolla tai H1, niin teksti korostuu yläruudussa.
- Siirry vasemmalle kahteen ruutuun ja etsi fontin väri.
- Vaihda arvo johonkin toiseen tai valitse väripiste käyttämään valitsinta.
Muutoksesi ilmestyy dynaamisesti, kun muutos on valmis. Voit muuttaa väriä, kokoa, fonttia, taustaa ja kaikkea fonttia. Työtä ei voi tallentaa, mutta muutokset säilyvät kyseisessä istunnossa.
Voit muuttaa kaiken sivulta, mikä on ihanteellista, jos sinulla on idea ja haluat tarkistaa sen nopeasti ennen kaikkien kehityssovellusten käynnistämistä. Ainoa mitä sinun täytyy tehdä, on muistaa mitä muutoksia olet tehnyt ja missä et voi tallentaa niitä tähän. Sinun on otettava kuvakaappaus tai tallennettava muutokset ja toistettava ne kehittäjätyökaluissa, jotta se pysyy kiinni.
Verkkosivun muokkaaminen selaimessa on siisti tapa kokeilla tai pelata sivuilla. Se on myös hyvä tapa oppia vähän web-kehityksestä joutumatta ostamaan kalliita kehittäjän työkaluja. Nyt tiedät miten, mene ja pidä leikkiä!
