Sa pagbuo ng napakaraming mga wika sa pagprogram, istilo, at markup, ang pag-aaral ng disenyo ng web ay nagiging mas kumplikado kaysa dati. Sa kasamaang palad, maraming mga tool na magagamit upang matulungan kang makapagsimula. Maghanap ng ilang pangunahing mapagkukunan, tulad ng mga online tutorial o isang napapanahong libro sa disenyo ng web. Kapag handa ka nang magsimula, magsimula sa pamamagitan ng pag-master ng mga pangunahing kaalaman sa HTML at CSS. Pagkatapos ay maaari mo nang simulang galugarin ang mas advanced na mga wika sa disenyo ng web, tulad ng JavaScript!
Mga hakbang
Paraan 1 ng 4: Paghahanap ng Mga Mapagkukunang Disenyo sa Web
Hakbang 1. Suriin online para sa mga kurso sa disenyo ng web at mga tutorial
Ang Internet ay puno ng detalyadong impormasyon tungkol sa disenyo ng web, at marami sa mga ito ay malayang magagamit. Maaari kang magsimula sa pamamagitan ng pagkuha ng ilang mga libreng online na kurso sa Udemy o CodeCademy, o pagsali sa isang komunidad ng coding tulad ng freeCodeCamp. Maaari ka ring makahanap ng mga tutorial sa video sa disenyo ng web sa YouTube.
- Kung alam mo mismo kung ano ang iyong hinahanap, subukang gumawa ng isang paghahanap gamit ang mga tukoy na termino (hal., "Mga tagapili ng klase sa tutorial sa CSS").
- Kung ikaw ay isang nagsisimula na walang karanasan sa disenyo ng web, magsimula sa pamamagitan ng pag-alam tungkol sa mga pangunahing kaalaman sa pag-coding sa HTML at CSS.
Hakbang 2. Tumingin sa pagkuha ng isang klase sa isang lokal na kolehiyo o unibersidad
Kung pumapasok ka sa isang kolehiyo o unibersidad, suriin sa kagawaran ng computer science ng iyong paaralan o kumunsulta sa iyong katalogo sa kurso upang malaman kung may magagamit na mga kurso sa disenyo ng web. Kung wala ka sa paaralan, suriin upang makita kung may mga kolehiyo o unibersidad na malapit sa iyo na nag-aalok ng patuloy na mga klase sa edukasyon sa disenyo ng web.
Ang ilang mga unibersidad ay nag-aalok ng mga klase sa online na disenyo ng web na bukas sa sinumang nais na magpatala. Suriin ang mga website tulad ng Coursera.org upang makahanap ng libre o abot-kayang mga klase sa disenyo ng web na itinuro ng mga nagtuturo sa unibersidad
Hakbang 3. Kumuha ng ilang mga libro sa disenyo ng web mula sa bookstore o library
Ang isang mahusay na libro sa disenyo ng web ay maaaring maging isang napakahalagang sanggunian habang natututunan mo at inilalapat ang iyong bapor. Maghanap ng mga napapanahong aklat sa pangkalahatang disenyo ng web o mga tukoy na format ng pag-coding at wika na nais mong malaman.
Ang pagbabasa ng mga magasin at mga artikulo sa blog tungkol sa disenyo ng web ay isang mabuting paraan din upang malaman ang mga bagong diskarte, makakuha ng inspirasyon, at makisabay sa mga pinakabagong kalakaran
Hakbang 4. Mag-download o bumili ng ilang software ng disenyo ng web
Ang mahusay na software ng disenyo ng web ay makakatulong sa iyo na bumuo ng mga website nang mas mahusay at mabisa, at mahusay din para sa pagtulong sa iyo na malaman ang mga suliranin ng paglalapat ng coding, scripting, at iba pang mga pangunahing elemento ng disenyo. Maaari kang makinabang mula sa paggamit ng mga tool tulad ng:
- Mga programa sa disenyo ng grapiko, tulad ng Adobe Photoshop, GIMP, o Sketch.
- Mga tool sa pagbuo ng website, tulad ng WordPress, Chrome DevTools, o Adobe Dreamweaver.
- FTP software para sa paglilipat ng iyong natapos na mga file sa iyong server.
Hakbang 5. Maghanap ng ilang mga template ng website upang makapaglaro sa pagsisimula mo
Walang mali sa paggamit ng mga template habang natututunan mo ang mga pangunahing kaalaman sa disenyo ng web. Gumawa ba ng paghahanap para sa mga template ng webpage na gusto mo, at tingnan nang mabuti ang code upang makakuha ng isang ideya kung paano pinagsama ng taga-disenyo ang pahina. Maaari ka ring mag-eksperimento sa pagbabago ng code at pagdaragdag ng iyong sariling mga elemento sa template.
Gumawa ba ng paghahanap para sa mga libreng template ng website upang makapagsimula, o mag-eksperimento sa mga template na kasama ng iyong software sa disenyo ng web
Paraan 2 ng 4: Pagkontrol sa HTML
Hakbang 1. Pamilyar ang iyong sarili sa mga pangunahing tag ng HTML
Ang HTML ay isang simpleng wikang markup na ginagamit upang mai-format ang mga pangunahing elemento ng isang website. Maaari mong mai-format ang iba't ibang mga elemento ng iyong website sa pamamagitan ng paggamit ng mga tag. Lumilitaw ang mga tag sa angled bracket bago at pagkatapos ng bawat elemento, at nagbibigay ng mga tagubilin tungkol sa kung paano gagana ang elementong iyon sa pahina. Upang isara ang tag, maglagay ng / sa harap ng pangwakas na tag sa loob ng mga anggulong bracket.
- Halimbawa, kung nais mong maging ilan sa iyong teksto matapang, palibutan mo ang elemento ng tag, tulad nito: Ang teksto na ito ay naka-bold.
- Ang ilang mga karaniwang tag ay may kasamang (talata), (angkla, na tumutukoy sa naka-link na teksto), at (font, na maaaring makatulong na tukuyin ang iba't ibang mga katangian ng teksto, tulad ng laki at kulay).
- Tinutukoy ng ibang mga tag ang magkakaibang mga bahagi ng dokumento ng HTML mismo. Halimbawa, ginagamit upang maglaman ng impormasyon tungkol sa pahina na hindi makikita ng manonood, tulad ng mga keyword o isang paglalarawan ng pahina na lilitaw sa mga resulta ng search engine.
Hakbang 2. Alamin na gumamit ng mga katangian ng tag
Ang ilang mga tag ay nangangailangan ng karagdagang impormasyon upang tukuyin kung paano dapat gumana ang mga ito. Lumilitaw ang karagdagang impormasyon na ito sa loob ng tag ng pagbubukas, at tinawag itong isang "katangian." Lumilitaw kaagad ang pangalan ng katangian pagkatapos ng pangalan ng tag, na pinaghiwalay ng isang puwang. Ang halaga ng katangian ay naka-attach sa pangalan ng katangian ng isang = sign at napapaligiran ng mga marka ng panipi.
- Halimbawa, kung nais mong gawing pula ang ilan sa iyong teksto, magagawa mo ito sa pamamagitan ng paggamit ng tag at isang naaangkop na katangian ng kulay ng font, tulad nito: Ang teksto na ito ay pula.
- Marami sa mga epekto na dati nang nakamit nang mga katangian ng tag ng HTML, tulad ng pagtatakda ng iba't ibang mga kulay ng font, ay karaniwang ginagawa ngayon sa CSS coding.
Hakbang 3. Eksperimento sa mga pinugad na elemento
Pinapayagan ka rin ng HTML na maglagay ng mga elemento sa loob ng iba pang mga elemento upang makalikha ng mas kumplikadong pag-format. Halimbawa, kung nais mong tukuyin ang isang talata at pagkatapos ay italiko ang ilan sa teksto sa loob ng talata, magagawa mo ito tulad nito:
Gusto ko ng coding!
Hakbang 4. Pamilyar sa mga walang laman na elemento
Ang ilang mga elemento sa HTML ay hindi nangangailangan ng parehong pagbubukas at pagsasara ng mga tag. Halimbawa, kung nagsisingit ka ng isang imahe, kakailanganin mo lamang ang isang solong tag na "img" na naglalaman ng pangalan ng tag at anumang iba pang kinakailangang mga katangian (tulad ng pangalan ng file ng imahe at anumang alternatibong teksto na nais mong idagdag para sa mga layuning mai-access). Halimbawa:
Hakbang 5. Galugarin ang pangunahing layout ng isang dokumentong HTML
Upang gumana nang maayos ang iyong website na nakabatay sa HTML, kakailanganin mong malaman kung paano i-format ang buong pahina. Nagsasangkot ito ng pagtukoy kung saan nagsisimula at nagtatapos ang iyong html code, pati na rin ang paggamit ng mga tag upang matukoy kung aling mga bahagi ng code ang ipapakita kumpara sa kung saan naroon upang magbigay ng nakatagong impormasyon sa background. Halimbawa:
- Gamitin ang tag upang tukuyin ang iyong pahina bilang isang HTML na dokumento.
- Susunod, maglaman ng iyong buong pahina sa loob ng mga tag upang tukuyin kung saan nagsisimula at nagtatapos ang iyong code.
- Ilagay ang anumang impormasyon na hindi ipapakita sa manonood, tulad ng pamagat ng pahina, mga keyword, at paglalarawan ng iyong pahina, sa loob ng mga tag.
- Tukuyin ang katawan ng iyong pahina (ibig sabihin, anumang teksto at mga imahe na nais mong makita ng manonood) kasama ng mga tag.
Paraan 3 ng 4: Pamilyar sa CSS
Hakbang 1. Gumamit ng CSS upang maglapat ng mga estilo sa iyong mga dokumento sa HTML
Ang CSS ay isang wika ng styleheet na nagbibigay-daan sa iyo upang maglapat ng iba't ibang mga elemento ng istilo at disenyo sa iyong webpage. Halimbawa, kung nais mong piliing ilapat ang isang tukoy na font o kulay ng teksto sa ilan sa mga elemento ng teksto sa iyong pahina, maaari kang lumikha ng isang CSS file upang magawa iyon. Pagkatapos, maaari mong ipasok ang CSS file sa iyong HTML na dokumento saan mo man gusto.
-
Halimbawa, kung nais mo ng isang CSS file na gawing berde ang lahat ng mga elemento ng talata sa iyong dokumento sa HTML, maaari kang lumikha ng isang.css file na naglalaman ng mga linya:
- p {
- kulay: berde;
- }
- Pagkatapos ay mai-save mo ang file na may isang pangalan tulad ng style.css.
- Upang mailapat ang styleheet sa iyong dokumento sa HTML, ilalagay mo ito bilang isang walang laman na elemento ng link sa loob ng mga tag. Halimbawa:
Hakbang 2. Pamilyar sa mga elemento ng isang hanay ng panuntunan sa CSS
Ang isang indibidwal na piraso ng CSS code ay tinatawag na isang "set ng panuntunan." Naglalaman ang hanay ng panuntunan ng iba't ibang mga elemento na tumutukoy sa kung ano ang nais mong gawin ng iyong code. Kabilang dito ang:
- Ang tagapili, na tumutukoy sa elemento ng HTML na nais mong i-istilo. Halimbawa, kung nais mong itakda ang iyong panuntunan upang makaapekto sa mga elemento ng talata, sisimulan mo ang iyong ruleset sa titik na "p".
- Ang deklarasyon, na tumutukoy sa mga katangian na nais mong i-istilo (tulad ng kulay ng font). Nakapaloob ang deklarasyon sa loob ng mga kulot na bracket {}.
- Ang pag-aari, na tumutukoy kung aling pag-aari ng elemento ng HTML ang nais mong i-istilo. Halimbawa, sa loob ng thetag, maaari mong tukuyin na nais mong i-istilo ang kulay ng teksto.
- Partikular na tumutukoy ang halaga ng pag-aari kung paano mo nais na baguhin ang pag-aari (hal., Kung ang pag-aari ay kulay ng font, kung gayon ang halaga ng pag-aari ay "berde").
- Maaari mong baguhin ang maraming iba't ibang mga pag-aari sa loob ng iisang deklarasyon.
Hakbang 3. Ilapat ang CSS sa iyong teksto upang gawing maganda ang iyong pagta-type
Kapaki-pakinabang ang CSS para sa paglalapat ng iba't ibang mga epekto sa iyong teksto nang hindi kinakailangang isa-isang mai-code ang bawat pag-aari sa HTML. Eksperimento sa pagbabago ng iba't ibang mga katangian ng pag-type sa CSS, kasama ang:
- Kulay ng font
- Laki ng font
- Pamilya ng font (hal., Ang saklaw ng mga font na nais mong gamitin sa iyong teksto)
- Pagkahanay ng teksto
- Taas ng linya
- Espasyo ng titik
Hakbang 4. Eksperimento sa mga kahon at iba pang mga tool sa layout ng CSS
Kapaki-pakinabang din ang CSS para sa pagdaragdag ng mga kaakit-akit na elemento ng visual sa iyong pahina, tulad ng mga kahon ng teksto at mga talahanayan. Bilang karagdagan, maaari mo itong magamit upang baguhin ang pangkalahatang layout ng iyong pahina at tukuyin kung saan nakaposisyon ang magkakaibang mga elemento na magkakaugnay sa bawat isa.
Halimbawa, maaari mong tukuyin ang mga katangian tulad ng lapad at kulay ng background ng isang elemento, magdagdag ng isang hangganan, o magtakda ng mga margin na lilikha ng puwang sa pagitan ng iba't ibang mga elemento sa iyong pahina
Paraan 4 ng 4: Paggawa gamit ang Ibang Mga Wika ng Disenyo
Hakbang 1. Alamin ang JavaScript kung nais mong magdagdag ng mga interactive na elemento sa iyong mga pahina
Ang JavaScript ay isang mahusay na wika upang malaman kung interesado kang magdagdag ng mga mas advanced na tampok sa iyong mga website, tulad ng mga animasyon at popup. Kumuha ng kurso o maghanap ng mga online na tutorial tungkol sa kung paano mag-code sa JavaScript at isama ang mga naka-code na elemento sa iyong mga web page | gamit ang HTML.
Bago ka maging komportable sa JavaScript, kakailanganin mong maging pamilyar sa mga pangunahing kaalaman sa pagbuo ng mga pahina sa HTML at CSS
Hakbang 2. Pamilyar ang iyong sarili sa jQuery upang gawing mas madali ang pag-coding ng JavaScript
Ang jQuery ay isang library ng JavaScript na maaaring gawing simple ang pagprograma ng Java sa pamamagitan ng pagpapahintulot sa iyo na ma-access ang iba't ibang mga paunang naka-code na elemento ng JavaScript. Ang jQuery ay isang mahusay na tool kung pamilyar ka na sa mga pangunahing kaalaman sa pag-coding ng JavaScript.
Maaari mong ma-access ang jQuery library at maraming iba pang mahahalagang mapagkukunan sa pamamagitan ng jQuery.org, ang website ng jQuery Foundation
Hakbang 3. Pag-aralan ang mga wika ng panig ng server kung interesado ka sa pag-unlad na back-end
Habang ang HTML, CSS, at JavaScript ay perpekto para sa mga web designer na nakatuon sa nakikita at ginagawa ng gumagamit sa website, kapaki-pakinabang ang mga wika sa server kung mas interesado ka sa likuran. Kung nais mong malaman ang tungkol sa back-end development, ituon ang pansin sa pag-aaral ng mga wika tulad ng Python, PHP, at Ruby on Rails.
Ang mga wikang ito ay kapaki-pakinabang para sa pamamahala at pagproseso ng data na hindi nakikita ng gumagamit. Halimbawa, maaaring magamit ang PHP upang makabuo ng mga ligtas na tool sa paglikha ng password sa mga website na nangangailangan ng pag-login
Mga File ng Tulong
HTML Cheat Sheet
Sheet ng Cheat ng CSS
