Vaadake, kuidas veebisait ehitati lähtekoodi vaatamise kaudu
Kui ma alustasin oma veebi disaineri karjääri alustamist, õppisin ma nii palju, vaadates teiste veebidisainerite tööd, keda ma imetlen. Ma ei ole selles üksi. Olenemata sellest, kas olete uus veebitööstus või kogenud veteran, on erinevate veebisaitide HTML-allika vaatamine midagi, mida tõenäoliselt teete oma karjääri jooksul palju kordi.
Neile, kes on veebidisaini uued, on saidi lähtekoodi vaatamine üks lihtsamaid viise, kuidas mõnda asju teha, et saaksite sellest töölt õppida ja hakata kasutama teatavat koodi või võtteid oma töös. Kuna täna töötavad veebidisainerid, eriti need, kes on olnud sellest alates tööstusharu esimestel päevadel, on kindel kiht, et nad ütlevad teile, et nad õppisid HTML-i lihtsalt vaadates nende veebilehtede allikat, mida nad nägid ja olid huvitatud kõrval. Lisaks veebipõhise raamatu lugemisele või professionaalsete konverentside külastamisele on saidi lähtekoodi vaatamine suurepärane võimalus algajatele HTML-i õppimiseks.
Rohkem kui lihtsalt HTML
Üks asi, mida meeles pidada, on see, et lähtefailid võivad olla väga keerukad (seda keerukam on veebisait, mida vaatate, seda keerukam on see, et saidi kood oleks tõenäoliselt). Lisaks HTML-i struktuurile, mis moodustab lehe, mida vaatate, on ka CSS (kaskaaditavate stiilide lehed), mis määravad selle saidi välimuse. Lisaks sisaldab tänapäeval paljud veebisaidid koos HTML-iga lisatud skriptifaile.
Võimalik, et see sisaldab ka mitu skriptifaili, tegelikult kõik need saidid asuvad eri aspektides. Ausalt öeldes, saidi lähtekood võib tunduda ülitundlik, eriti kui te olete seda teinud. Ärge unustage, kui sa ei saa mõista, mis sellel saidil toimub kohe. HTML-i allika vaatamine on selle protsessi esimene samm. Pisut kogemust hakkate paremini mõista, kuidas kõik need tükid sobivad teie veebisaidi loomiseks, mida näete oma brauseris. Nagu koodi paremini tundma õppida, saate sellest rohkem teada saada ja see ei paista teile hirmuäratavat.
Kuidas saate veebisaidi lähtekoodi vaadata? Järgmised sammud on Google Chrome'i brauserit kasutavad juhised.
Samm-sammult juhised
- Avage Google Chrome'i veebibrauser (kui teil pole Google Chrome'i installitud, on see tasuta allalaadimine).
- Liikuge veebilehele, mida soovite uurida .
- Paremklõpsake lehel ja vaadake kuvatavat menüüd. Sellest menüüst klõpsake käsku Kuva lehe allikas .
- Selle lehe lähtekood kuvatakse nüüd brauseris uue vahekaardiga.
- Teise võimalusena võite ka PC-le CTRL + U kiirklahvide abil kuvada saidi lähtekoodi akna avamiseks. Macis on see otsetee Command + Alt + U.
Arendaja tööriistad
Lisaks Google Chrome'i hõlpsa vaatamise lehe allika võimele saate kasutada ka oma suurepäraseid arendusvahendeid, et veelgi sügavamalt saidil üles kaevama. Need tööriistad võimaldavad teil mitte ainult näha HTML-i, vaid ka HTML-dokumendis olevate elementide vaatamiseks rakendatavat CSS-i.
Chrome'i arendaja tööriistade kasutamiseks:
- Avage Google Chrome .
- Liikuge veebilehele, mida soovite uurida .
- Klõpsake brauseriakna paremas ülanurgas kolme sirge ikooni .
- Menüüs kerige üle Tööriistad ja seejärel ilmuvas menüüs käsku Arendaja tööriistad .
- See avab akna, mis näitab paneeli vasakul asuvat HTML-i lähtekoodi ja paremal olevat seotud CSS-i.
- Teise võimalusena, kui paremklõpsate veebisaidil oleval elemendil ja ilmub ilmuvast menüüst käsku Kontrolli , ilmuvad Chrome'i arendaja tööriistad ja teie valitud täpne element HTML-is esile tõstetud, näidatakse paremal vastavat CSS-i. See on ülitundlik, kui soovite rohkem teada saada, kuidas üks konkreetne saidi osa on loodud.
Kas lähtekoodi vaatamine on õigustatud?
Aastate jooksul on mul olnud palju uusi veebidisainerite küsimusi selle kohta, kas on vastuvõetav vaadata saidi lähtekoodi ja kasutada seda oma hariduse ja lõpptulemusena selle töö eest, mida nad teevad. Kuigi saidi koodi hulgi kopeerimine ja saidil oleva saidi väljalülitamine on kindlasti mitte vastuvõetav, on selle koodi kasutamine selle all, et õppida, on tegelikult see, kui palju edusamme selles tööstusharus tehakse.
Nagu ma selle artikli alguses mainisin, oleksite vaeva näinud, et leida täna veebiprofessionaalprogramme, kes pole saidi allika vaatamise teel midagi õppinud! Jah, saidi lähtekoodi vaatamine on seaduslik. Kasutades seda koodi kui ressurssi, et luua midagi sarnast, on ka hea. Kasutades koodi on-nagu ja jättes selle välja nagu teie töö on, kus te hakkate probleeme.
Lõpuks õpivad veebiprofessionaalid üksteiselt ja parandavad sageli tööd, mida nad näevad ja on inspireeritud, nii et ärge kartke saidi lähtekoodi vaadata ja kasutada seda õppevahendina.