Web-sivujen muokkaaminen Safarissa Inspect Elementin avulla

Safarin Inspect Element -työkalun avulla voit muokata minkä tahansa verkkosivun käyttöliittymäkoodia. Jos haluat testata, miltä sivu näyttäisi eri tekstin tai kuvien kanssa, voit tehdä sen muuttamalla sen koodia Inspect Elementillä.

Tämä on yksinkertainen opas, joka on tarkoitettu aloittelijoille, ja se selittää, kuinka voit aloittaa Inspect Elementin kokeilemisen Safarissa verkkosivuston tekstin ja kuvien muokkaamiseksi minimaalisella koodaustiedolla.

Mikä on tarkastuselementti?

Inspect Element on kehittäjätyökalu. Se on saatavilla Safarissa, mutta myös muissa selaimissa, kuten Chromessa, Firefoxissa ja Edgessä. Inspect Elementin avulla voit kurkistaa verkkosivuston verhon taakse ja paljastaa sen käyttöliittymäkoodin, kuten HTML: n ja CSS: n. Se ei kuitenkaan anna sinulle taustan näkyvyyttä, kuten sen tietokannat.

Et vain näe tätä koodia, vaan voit myös muokata sitä. Tämä tarkoittaa, että voit muuttaa verkkosivuston ulkonäköä. Voit korvata kuvan, muotoilla tekstiä uudelleen, käyttää toista kirjasinta, vaihtaa sen värimaailmaa ja paljon muuta. Nämä muutokset ovat kuitenkin paikallisia. Ne eivät näy kenellekään muulle paitsi sinulle; ne katoavat, kun päivität sivun tai siirryt pois sivulta.

Miksi sinun pitäisi käyttää tarkastuselementtiä?

Inspect Element on loistava työkalu, jos olet aloitteleva verkkokehittäjä. Voit kirjaimellisesti nähdä koodin, joka ohjaa suosikkisivustoasi, ja voit muokata sitä haluamallasi tavalla todellisessa ympäristössä. On olemassa monia hauskoja oivalluksia, joita voit saada käyttämällä Inspect Elementiä.

Esimerkiksi yritysten omistajat voivat tarkastella avainsanoja, jotka sisältyvät kilpailijan verkkosivustoon, tai suunnittelijat voivat tarkastella avainsanoja käytä Inspect Elementiä kirjasimen tunnistamiseen joita he pitävät houkuttelevina, tai testata nopeasti eri värimaailmaa verkkosivustollaan.

Toistaiseksi keskitymme verkkosivun perusasioiden muokkaamiseen Inspect Elementin avulla.

Inspect Elementin käyttäminen Safarissa

Voit avata Inspect Elementin Safarissa kehittäjävalikosta:

1. Avaa Safari.
2. Klikkaus Safari ylävalikkopalkissa.
3. Valitse avattavasta valikosta Asetukset.
4. Valitse Pitkälle kehittynyt vaihtoehto.
5. Valitse ruutu, jossa lukee Näytä Kehitä-valikko valikkorivillä.

Kun olet valinnut tämän vaihtoehdon, voit oikealla painikkeella verkkosivulla ja valitse Tarkastele elementtiä. Vaihtoehtoisesti voit valita Kehittää valikkopalkissa ja sitten Näytä Web Inspector.

Web-elementtien löytäminen Inspect Elementissä

Aloita elementin muokkaaminen oikealla painikkeella mitä haluat muokata ja napsauta Tarkastele elementtiä. Tämä avaa kehittäjäikkunan, jossa asianomainen osa on korostettuna. Saatat huomata, että tietty elementti, jonka haluat elementoida (esimerkiksi kuva tai teksti) on piilotettu; paikantaaksesi sen, käytä nuolet vasemmalla laajentaaksesi sisäkkäisiä osioita.

Voit rajata valintasi napsauttamalla kohdekuvake Tarkista elementti -työkaluriviltä. Nyt kun selaat koodia, se korostaa kyseisen osion verkkosivustolla. Tai voit käyttää kohdistinta määrittääksesi osion sivustosta. Tämä on kätevää, kun haluat hioa jotakin tiettyä verkkosivun ruuhkaisella alueella.

Web-sivuston tekstin muokkaaminen tarkastuselementillä

Jos haluat tehdä tekstin muokattavaksi löydettyään sen sivuston lähdekoodista, tuplaklikkaus se. Voit kirjoittaa uutta tekstiä suoraan koodiin tai poistaa olemassa olevan tekstin. Kun tietyn tekstijonon muokkaus on valmis, paina Tulla sisään, ja verkkosivun teksti muuttuu.

Se on todella yksinkertaista! Tämä ei toimi vain silloin, kun teksti on itse asiassa osa kuvaa, kuten logo.

Web-sivuston kuvien muokkaaminen Inspect Elementin avulla

Vaikka kuvat näkyvät sinulle visuaalisesti käyttöliittymässä, verkkosivuston koodissa ne näkyvät linkkeinä. Sinä pystyt oikealla painikkeella ja kuva ja valitse Tarkastele elementtiä siirtyäksesi kuvan kohtaan koodissa. Verkkosivuston kuvissa on yleensä JPG-, GIF- tai PNG-tiedostotunniste, joskaan ei yksinomaan.

Tuplaklikkaus nämä kuvasarjat ja voit muokata niitä tai halutessasi tallentaa ne järjestelmääsi. Jos haluat korvata kuvan, vaihda se pois korvaavan kuvan URL-osoitteesta. Tai voit poistaa kuvan näkymästä poistamalla koodin kokonaan.

Tutustu verkkosivustoihin Safarin avulla

Safarin Inspect Element -työkalun avulla voit helposti löytää ja muuttaa tekstiä ja kuvia vastaavan koodin, mikä on yhtä helppoa kuin tekstin tai URL-merkkijonon vaihtaminen. Kun olet lopettanut verkkosivuston muokkauksen Inspect Elementin avulla, päivitä sivu ja kaikki palautuu normaaliksi.

Selaimen käyttäjäagentin ja temppusivustojen vaihtaminen

Lue Seuraava

Kirjailijasta