Leer hoe 'n webwerf gebou is deur die bronkode te besigtig
Toe ek my loopbaan as webontwerper begin het, het ek soveel geleer deur die werk van ander webontwerpers wat ek bewonder het, te hersien. Ek is nie alleen hierin nie. Of jy nuut is vir die webbedryf of 'n gesoute veteraan, kyk na die HTML-bron van verskillende webbladsye, is iets wat jy in die loop van jou loopbaan baie keer sal doen.
Vir diegene wat nuut is vir webontwerp, is die lees van 'n webwerf se bronkode een van die maklikste maniere om te sien hoe sekere dinge gedoen word sodat jy van daardie werk kan leer en sekere kode of tegnieke in jou eie werk kan gebruik. Soos enige webontwerper vandag werk, veral diegene wat sedert die vroeë dae van die bedryf daaraan gewerk het, en dit is 'n veilige verbintenis waarmee hulle met jou vertel dat hulle HTML geleer het, bloot deur die bron van die webbladsye wat hulle gesien het, te sien en was geïntrigeerd. deur. Benewens die lees van webontwerpboeke of bywoning van professionele konferensies , is die lees van 'n webwerf se bronkode 'n goeie manier vir beginners om HTML te leer.
Meer as net HTML
Een ding om te onthou is dat die bron lêers kan baie ingewikkeld wees (en hoe meer kompleks die webwerf wat jy besigtig is, hoe meer kompleks is die kode se kode waarskynlik). Benewens die HTML-struktuur wat die bladsy maak wat jy besigtig, sal daar ook CSS (cascading style sheets) wees wat die visuele voorkoms van die webwerf dikteer. Daarbenewens sal baie webwerwe vandag skriplêers insluit wat saam met die HTML ingesluit word.
Daar is waarskynlik verskeie skriplêers ingesluit, in werklikheid, elkeen wat verskillende aspekte van die werf aandryf. Eerlik gesê, 'n webwerf se bronkode kan oorweldigend lyk, veral as jy nuut is om dit te doen. Moenie gefrustreerd raak as jy nie kan uitvind wat dadelik met daardie webwerf gebeur nie. Die lees van die HTML-bron is net die eerste stap in hierdie proses. Met 'n bietjie ervaring sal jy beter verstaan hoe al hierdie stukke bymekaar pas om die webwerf wat jy in jou blaaier sien, te skep. Soos jy meer bekend is met die kode, sal jy daardeur meer kan leer en dit lyk nie skrikwekkend vir jou nie.
So hoe sien jy die bronkode van 'n webwerf? Hier is die stap-vir-stap instruksies om dit te doen deur die Google Chrome-blaaier te gebruik.
Stap vir stap instruksies
- Maak die Google Chrome-webblaaier oop (as jy nie Google Chrome geïnstalleer het nie, is dit 'n gratis aflaai).
- Navigeer na die webblad wat u graag wil ondersoek .
- Klik met die rechtermuisknop op die bladsy en kyk na die menu wat verskyn. Vanuit daardie kieslys, klik op Bronbladsy sien .
- Die bronkode vir die bladsy sal nou verskyn as 'n nuwe oortjie in die blaaier.
- U kan ook die sleutelbordkortpaaie van CTRL + U op 'n rekenaar gebruik om 'n venster oop te maak met die bronkode van 'n werf wat vertoon word. Op 'n Mac, hierdie snelkoppeling is Command + Alt + U.
Ontwikkelaar Tools
Benewens die eenvoudige View-bladsy- bronvermoë wat Google Chrome bied, kan jy ook voordeel trek uit hul uitstekende Ontwikkelaarhulpmiddels om selfs dieper in 'n webwerf te grawe. Met hierdie instrumente kan u nie net die HTML sien nie, maar ook die CSS wat van toepassing is op elemente in die HTML-dokument.
Om Chrome se ontwikkelaar gereedskap te gebruik:
- Maak Google Chrome oop .
- Navigeer na die webblad wat u graag wil ondersoek .
- Klik op die ikoon met drie reëls in die regter bovenhoek van die blaaier.
- Beweeg in die kieslys oor Meer nutsprogramme en klik dan op Ontwikkelaar-gereedskap in die kieslys wat verskyn.
- Dit sal 'n venster oopmaak wat die HTML bronkode aan die linkerkant van die paneel en die verwante CSS aan die regterkant wys.
- As jy regs op ' n element in 'n webblad kliek en kies Inspect uit die kieslys wat verskyn, sal Chrome se ontwikkelaar gereedskap verskyn en die presiese element wat jy gekies het, sal in die HTML gemerk word met die ooreenstemmende CSS wat regs vertoon word. Dit is baie handig as jy meer wil weet oor hoe een spesifieke stuk van 'n webwerf gemaak is.
Is die bronkode wettig vertoon?
Oor die jare het ek baie nuwe webontwerpers gevra of dit aanvaarbaar is om 'n bronkode van 'n webwerf te sien en dit te gebruik vir hul opleiding en uiteindelik vir die werk wat hulle doen. Terwyl u 'n webwerf se kode groothandel kopieer en dit as u eie op 'n webwerf afskryf, is dit beslis nie aanvaarbaar nie, aangesien die kode as 'n springbord gebruik word om te leer, is eintlik hoeveel vordering in hierdie bedryf gemaak word.
Soos ek aan die begin van hierdie artikel genoem het, sal jy moeilik wees om vandag 'n werkende webprofessie te vind wat nie iets geleer het deur 'n bron se bron te sien nie! Ja, die bronkode van 'n webwerf is wettig. Die gebruik van daardie kode as 'n hulpbron om iets soortgenders te bou, is ook goed. Neem kode as-is en slaag dit af as jou werk is waar jy probleme ondervind.
Uiteindelik leer webwerwe van mekaar en verbeter dikwels die werk wat hulle sien en geïnspireer word. Moet dus nie huiwer om die bronkode van 'n webwerf te sien en dit as 'n leermiddel te gebruik nie.