Általában egy weboldal szerkesztésekor egy speciális szerkesztő eszközt, például Adobe Dreamweaver, CoffeeCup, Bluefish vagy más fejlesztési eszközöket használunk. De mi lenne, ha csak brainstormingra kerülnénk, vagy kipróbálni akarunk valamit egy élő oldalon? Készíthetünk egy másolatot az oldalról a választott eszközünkbe, és ezzel játszhatunk. Vagy meg tudjuk csinálni a böngészőnkben. Ez az oktatóanyag bemutatja, hogyan kell szerkeszteni egy weboldalt a böngészőben.
Fejlesztőeszközként hivatkozva a Firefox az Ellenőrző elem elemre hívja a funkciót, míg a Chrome az Ellenőrző elemre hívja. Akárhogy is, ez a mód arra, hogy a böngésző megnézze a formatervezés fénye mögött, és vessen egy pillantást a vezérlő kódra. Ez a szolgáltatás nagyon jól ismert és sokat használnak. Ami nem igazán ismert, az a képesség, hogy menet közben megváltoztathatja ezt a kódot.
A végrehajtott módosításokat nem menti el, és az élő közvetítésre nincs hatással. Ha nem akarja betölteni az oldalt a fejlesztői eszközbe, ez egy ügyes módszer a kísérletezésre.
Szerkessze a böngésző bármely weboldalát
A Dreamweaver és az ehhez hasonló eszközök beépített böngészőemulátorral rendelkeznek, amely szimulálja, hogy miként fog kinézni a formatervezés különböző böngészőkben. Bármennyire is, nem mindig pontosak, és egy webhely indításakor gyakran észlelik, hogy mi a fantasztikusnak tűnt a fejlesztő eszközében, kissé másképp néz ki egy önálló böngészőben.
Általában elindítaná a webhelyet egy belső webkiszolgálón, és tesztel egy böngészőben, mielőtt éppen ezen okból indítaná el az internetet. Ha egy oldal már él, vagy csak kipróbálni szeretne valamit, akkor nem kell másolnia és betöltenie a fejlesztőeszközbe, csak használhatja a böngésző Fejlesztő eszközét.
Firefoxot használom, így megmutatom, hogyan kell használni. A Chrome azonban nagyjából ugyanaz.
- Nyisson meg egy weboldalt, amelyben kísérletezni szeretne a böngészőjében.
- Kattintson a jobb gombbal az oldal bármelyik oldalára, és válassza az Ellenőrzés lehetőséget.
Látnia kell, hogy oldala ketté van osztva, az alján megjelenik egy új ablaktábla, benne valamilyen kóddal. Ez a kód a kiválasztott oldal hajtóereje. Az alsó lap tetején lévő lapokon keresztül különböző oldalelemek érhetők el. Például az Inspector, Console, Debugger, Stílusszerkesztő és így tovább láthatók a Firefoxban.
Ha a kurzort az alsó ablaktáblán szereplő vonalakon haladja meg, akkor a weboldal különböző részei jelennek meg. A kiemelés során használt kódsor az a kód, amely befolyásolja az oldal ezen részét.
- Ha az oldal kinézetével szeretne játszani, próbálja ki a Stílusszerkesztőt.
- Ha körül szeretne játszani az oldal működésével, próbálja ki a Konzol vagy a Kisegítő lehetőségek lehetőséget.
- Ha hibákat akar elhárítani vagy problémát megoldani, használja a Console vagy a Debugger alkalmazást
A teljesítmény hasznos a helyszíni SEO-nál, de a memóriát, a hálózatot és a tárolást nem használják túl sokáig.
Ne feledje, hogy amennyit csak akar, akkor zavarhatja a fejlesztői eszközöket, és ez nem befolyásolja a webhelyet. Bármilyen változtatást csak az oldal megjelenítésében hajt végre, az ön böngészőjét nem befolyásolja. Az eszköz bezárása után minden változás elveszik.
Az oldal módosítása
Most már tudja, hogy bármit megváltoztathat, amire tetszik, anélkül, hogy befolyásolná a weboldalt. Keressen egy elemet az oldalon, amelyet szerkeszteni szeretne. Megváltoztathatja a betűtípust, a betűszínét, a háttérképet, vagy bármit, amire tetszik. Ebben a példában megváltoztatom a szalagcím betűszínét.
- Kattintson a jobb gombbal a megváltoztatni kívánt elemre, és válassza az Ellenőrzés lehetőséget.
- Jelölje ki a sort a „cím” vagy a „H1” elemmel, hogy a szöveg kiemelésre kerüljön a felső panelen.
- Keresse meg a bal oldali két ablakot és keresse meg a betűtípust.
- Változtassa meg az értéket valami másra, vagy válassza a színpontot a választógomb használatához.
A változás dinamikusan megjelenik, amint befejezi a változtatást. Meg lehet változtatni a színt, a méretet, a betűtípust, a hátteret és mindent, ami a betűkészlettel kapcsolatban megváltozik. Nem mentheti a munkát, de a változások az adott munkamenetre megmaradnak.
Az oldalon mindent megváltoztathat, amely ideális, ha van ötlete és gyorsan szeretné ellenőrizni, mielőtt elindítaná a fejlesztő alkalmazásokat. Csak annyit kell tennie, hogy emlékezzen arra, milyen változtatásokat hajtott végre, és hol, mivel nem tudja megmenteni őket itt. El kell készítenie egy képernyőképet, vagy rögzítenie kell a változtatásokat, és meg kell replikálnia azokat a fejlesztői eszközökben, hogy azok megtapadjanak.
A weboldal szerkesztése a böngészőben az ügyes módszer az oldalak kísérletezésére vagy körüljárására. Ez egy jó módszer egy kicsit többet megismerni a webfejlesztésről anélkül, hogy drága fejlesztői eszközöket kellene vásárolniuk. Most már tudja, hogy menj és játssz!
