5 Txoj Hauv Kev Kawm Web Design

Cov txheej txheem:

5 Txoj Hauv Kev Kawm Web Design
5 Txoj Hauv Kev Kawm Web Design

Video: 5 Txoj Hauv Kev Kawm Web Design

Video: 5 Txoj Hauv Kev Kawm Web Design
Video: Playful Kiss - Playful Kiss: Full Episode 1 (Official & HD with subtitles) 2024, Tej zaum
Anonim

Nrog kev txhim kho ntawm ntau txoj haujlwm, cov qauv, thiab cov lus cim, kev kawm tsim web yog qhov nyuaj dua li yav tas los. Hmoov zoo, muaj ntau lub cuab yeej muaj los pab koj pib. Nrhiav qee qhov peev txheej yooj yim, zoo li kev qhia online lossis phau ntawv hloov tshiab ntawm lub vev xaib tsim. Thaum koj npaj txhij pib, pib los ntawm kev paub cov hauv paus ntawm HTML thiab CSS. Tom qab ntawd koj tuaj yeem pib tshawb nrhiav ntau lub vev xaib tsim cov lus, zoo li JavaScript!

Cov kauj ruam

Txoj Kev 1 ntawm 4: Nrhiav Chaw Tsim Khoom Web

Kawm Web Tsim Kauj Ruam 1
Kawm Web Tsim Kauj Ruam 1

Kauj Ruam 1. Txheeb xyuas online rau cov vev xaib tsim qauv thiab qhia paub

Hauv Is Taws Nem muaj cov ncauj lus ntxaws ntxaws txog kev tsim web, thiab ntau ntawm nws yog pub dawb. Koj yuav pib los ntawm kev kawm qee qhov kev kawm online dawb ntawm Udemy lossis CodeCademy, lossis koom nrog cov zej zog coding zoo li freeCodeCamp. Koj tseem tuaj yeem pom lub vev xaib tsim video qhia hauv YouTube.

  • Yog tias koj paub tseeb tias koj tab tom nrhiav dab tsi, sim ua kev tshawb fawb siv cov ntsiab lus tshwj xeeb (piv txwv li, "xaiv chav kawm hauv CSS qhia").
  • Yog tias koj yog tus pib nrog tsis muaj kev paub tsim lub vev xaib, pib los ntawm kev kawm txog cov hauv paus ntawm coding hauv HTML thiab CSS.
Kawm Web Tsim Kauj Ruam 2
Kawm Web Tsim Kauj Ruam 2

Kauj Ruam 2. Saib mus rau chav kawm hauv tsev kawm qib siab lossis tsev kawm qib siab hauv cheeb tsam

Yog tias koj tab tom kawm hauv tsev kawm qib siab lossis tsev kawm qib siab, tshawb xyuas nrog koj lub tsev kawm ntawv lub khoos phis tawj tshawb fawb computer lossis tham nrog koj cov ntawv teev npe kom paub seb puas muaj cov chav tsim qauv web. Yog tias koj tsis nyob hauv tsev kawm ntawv, txheeb xyuas seb puas muaj cov tsev kawm qib siab lossis tsev kawm qib siab nyob ze koj muaj cov chav kawm txuas ntxiv hauv kev tsim web.

Qee lub tsev kawm qib siab muab chav kawm tsim web online uas qhib rau txhua tus neeg uas xav tso npe. Txheeb xyuas cov vev xaib zoo li Coursera.org txhawm rau nrhiav dawb lossis pheej yig web tsim chav qhia los ntawm cov kws qhia hauv tsev kawm qib siab

Kawm Web Tsim Kauj Ruam 3
Kawm Web Tsim Kauj Ruam 3

Kauj Ruam 3. Tau txais qee lub vev xaib tsim phau ntawv los ntawm lub khw muag ntawv lossis lub tsev qiv ntawv

Phau ntawv zoo ntawm lub vev xaib tsim tuaj yeem yog qhov muaj txiaj ntsig zoo raws li koj tau kawm thiab siv koj li khoom siv tes ua. Nrhiav cov ntawv tshiab ntawm cov vev xaib dav dav lossis tshwj xeeb coding hom thiab hom lus uas koj xav kawm.

Nyeem cov ntawv xov xwm thiab blog kab lus hais txog lub vev xaib tsim qauv kuj tseem yog txoj hauv kev zoo los kawm cov txuj ci tshiab, tau txais kev tshoov siab, thiab ua raws cov xwm txheej tshiab

Kawm Web Tsim Kauj Ruam 4
Kawm Web Tsim Kauj Ruam 4

Kauj Ruam 4. Rub tawm lossis yuav qee lub vev xaib tsim software

Lub vev xaib tsim software zoo tuaj yeem pab koj tsim cov vev xaib kom muaj txiaj ntsig zoo thiab muaj txiaj ntsig zoo, thiab tseem yog qhov zoo rau kev pab koj kawm paub qhov nkag thiab tawm ntawm kev thov coding, sau ntawv, thiab lwm yam ntsiab lus tsim qauv. Koj yuav tau txais txiaj ntsig los ntawm kev siv cov cuab yeej xws li:

  • Cov phiaj xwm tsim duab, zoo li Adobe Photoshop, GIMP, lossis Sketch.
  • Cov cuab yeej tsim lub vev xaib, xws li WordPress, Chrome DevTools, lossis Adobe Dreamweaver.
  • FTP software rau xa koj cov ntaub ntawv tiav rau koj lub server.
Kawm Web Tsim Kauj Ruam 5
Kawm Web Tsim Kauj Ruam 5

Kauj Ruam 5. Nrhiav qee lub vev xaib tus qauv ua si nrog thaum koj pib

Tsis muaj dab tsi tsis raug nrog siv tus qauv raws li koj kawm cov hauv paus ntawm kev tsim web. Tshawb nrhiav lub vev xaib tus qauv koj nyiam, thiab ua tib zoo saib cov cai kom tau txais lub tswv yim ntawm tus tsim qauv muab nplooj ntawv ua ke li cas. Koj tseem tuaj yeem sim nrog kev hloov pauv cov cai thiab ntxiv koj tus kheej cov ntsiab lus rau tus qauv.

Tshawb nrhiav dawb lub vev xaib tus qauv kom pib, lossis sim nrog cov qauv uas tuaj nrog koj lub vev xaib tsim software

Txoj Kev 2 ntawm 4: Kawm HTML

Kawm Web Design Step 6
Kawm Web Design Step 6

Kauj Ruam 1. Paub koj tus kheej nrog cov cim HTML yooj yim

HTML yog hom lus yooj yooj yim uas tau siv los tsim cov ntsiab lus tseem ceeb ntawm lub vev xaib. Koj tuaj yeem tsim cov ntsiab lus sib txawv ntawm koj lub vev xaib los ntawm kev siv cov cim npe. Cov cim tshwm nyob rau hauv cov kab ke kaum ua ntej thiab tom qab txhua lub ntsiab lus, thiab muab cov lus qhia txog yuav ua li cas lub ntsiab lus yuav ua haujlwm ntawm nplooj ntawv. Txhawm rau kaw lub cim npe, tso rau / nyob rau hauv ntej ntawm daim ntawv kawg hauv lub kaum sab xis.

  • Piv txwv li, yog tias koj xav tau qee yam ntawm koj cov ntawv ua siab tawv, koj yuav nyob ib puag ncig lub ntsiab lus nrog daim ntawv, zoo li no: Cov ntawv no ua siab tawv.
  • Qee qhov cim npe muaj xws li (nqe lus), (thauj tog rau nkoj, uas txhais cov ntawv sib txuas), thiab (font, uas tuaj yeem pab txheeb xyuas ntau yam cwj pwm ntawm cov ntawv, zoo li qhov loj thiab xim).
  • Lwm cov cim piav qhia qhov sib txawv ntawm cov ntawv HTML nws tus kheej. Piv txwv li, tau siv los muaj cov ntaub ntawv hais txog nplooj ntawv uas yuav tsis pom rau tus saib, zoo li cov ntsiab lus lossis nplooj ntawv piav qhia uas yuav tshwm sim hauv cov txiaj ntsig tshawb fawb cav.
Kawm Web Tsim Kauj Ruam 7
Kawm Web Tsim Kauj Ruam 7

Kauj Ruam 2. Kawm paub siv tus cwj pwm tag

Qee lub cim npe xav tau cov ntaub ntawv ntxiv txhawm rau txheeb xyuas seb lawv yuav tsum ua haujlwm li cas. Cov ntaub ntawv ntxiv no tshwm nyob rau hauv daim ntawv qhib, thiab nws hu ua "tus cwj pwm." Tus cwj pwm lub npe tshwm tam sim tom qab lub npe tag, sib cais los ntawm qhov chaw. Tus cwj pwm tus nqi tau txuas nrog tus cwj pwm lub npe los ntawm = kos npe thiab puag ncig los ntawm cov lus hais.

  • Piv txwv li, yog tias koj xav ua qee yam ntawm koj cov ntawv liab, koj tuaj yeem ua nws los ntawm kev siv lub cim npe thiab tus cwj pwm tsim nyog xim xim, zoo li no: Cov ntawv no yog xim liab.
  • Ntau qhov cuam tshuam uas ib txwm ua tiav nrog HTML cim tus yam ntxwv, xws li teeb tsa cov xim sib txawv, tam sim no feem ntau ua tiav nrog CSS coding hloov.
Kawm Web Tsim Kauj Ruam 8
Kawm Web Tsim Kauj Ruam 8

Kauj Ruam 3. Kev sim nrog cov ntsiab lus zes

HTML kuj tseem tso cai rau koj tso cov ntsiab lus hauv lwm cov ntsiab lus txhawm rau tsim cov txheej txheem nyuaj dua. Piv txwv li, yog tias koj xav tau txhais cov kab lus thiab tom qab ntawv italicize qee cov ntawv hauv kab lus, koj tuaj yeem ua nws zoo li no:

Kuv nyiam coding!

Kawm Web Tsim Kauj Ruam 9
Kawm Web Tsim Kauj Ruam 9

Kauj Ruam 4. Ua kom paub cov ntsiab lus khoob

Qee lub ntsiab lus hauv HTML tsis xav tau ob qho qhib thiab kaw cov cim npe. Piv txwv li, yog tias koj tab tom ntxig cov duab, koj tsuas xav tau ib qho "img" tag uas muaj lub npe tag thiab lwm yam khoom tsim nyog (xws li cov npe duab cov ntaub ntawv thiab lwm cov ntawv koj xav ntxiv rau lub hom phiaj kev nkag tau yooj yim). Piv txwv li:

Kawm Web Tsim Kauj Ruam 10
Kawm Web Tsim Kauj Ruam 10

Kauj Ruam 5. Tshawb cov txheej txheem yooj yim ntawm daim ntawv HTML

Txhawm rau kom koj lub vev xaib HTML-raws li ua haujlwm tau zoo, koj yuav tsum paub yuav ua li cas txhawm rau ua nplooj ntawv tag nrho. Qhov no suav nrog kev txheeb xyuas qhov twg koj cov cai html pib thiab xaus, nrog rau siv cov cim los txiav txim siab qhov twg ntawm cov cai yuav raug nthuav tawm piv rau qhov uas nyob ntawd los muab cov ntaub ntawv keeb kwm zais. Piv txwv li:

  • Siv daim ntawv los txheeb xyuas koj nplooj ntawv ua cov ntawv HTML.
  • Tom ntej no, suav nrog koj nplooj ntawv tag nrho hauv cov cim npe txhawm rau txheeb xyuas qhov twg koj cov cai pib thiab xaus.
  • Muab cov ntaub ntawv uas yuav tsis tshwm rau tus saib, xws li nplooj ntawv npe, lo lus tseem ceeb, thiab koj cov lus piav qhia nplooj ntawv, hauv cov ntawv cim npe.
  • Txhais lub cev ntawm koj nplooj ntawv (piv txwv li, cov ntawv thiab cov duab uas koj xav kom tus saib pom) nrog cov cim npe.

Txoj Kev 3 ntawm 4: Paub Txog CSS

Kawm Web Tsim Kauj Ruam 11
Kawm Web Tsim Kauj Ruam 11

Kauj Ruam 1. Siv CSS los siv tus yam ntxwv rau koj cov ntaub ntawv HTML

CSS yog hom lus styleheet uas tso cai rau koj siv cov qauv sib txawv thiab tsim cov ntsiab lus rau koj lub vev xaib. Piv txwv li, yog tias koj xav xaiv xaiv siv cov ntawv tshwj xeeb lossis xim xim rau qee cov ntsiab lus ntawm koj nplooj ntawv, koj tuaj yeem tsim cov ntawv CSS los ua li ntawd. Tom qab ntawd, koj tuaj yeem ntxig CSS cov ntawv rau hauv koj daim ntawv HTML txhua qhov chaw koj nyiam.

  • Piv txwv li, yog tias koj xav tau CSS cov ntaub ntawv kom tig tag nrho cov kab lus hauv koj li ntaub ntawv HTML ntsuab, koj tuaj yeem tsim cov ntawv.css uas muaj kab:

    • p {
    • xim: ntsuab;
    • }
  • Koj yuav khaws cov ntaub ntawv nrog lub npe zoo li style.css.
  • Txhawm rau siv daim ntawv pov thawj rau koj daim ntawv HTML, koj yuav ntxig nws ua qhov txuas txuas tsis pub dhau hauv cov cim npe. Piv txwv li:
Kawm Web Tsim Kauj Ruam 12
Kawm Web Tsim Kauj Ruam 12

Kauj Ruam 2. Ua kom paub cov ntsiab lus ntawm CSS txoj cai teeb tsa

Ib tus neeg ntawm CSS txoj cai yog hu ua "txoj cai teeb tsa." Txoj cai teeb tsa muaj cov ntsiab lus sib txawv uas piav qhia yam koj xav kom koj cov cai ua. Cov no suav nrog:

  • Tus xaiv, uas piav qhia lub ntsiab lus HTML koj xav kom style. Piv txwv li, yog tias koj xav kom koj txoj cai teeb tsa cuam tshuam rau kab lus, koj yuav pib koj txoj cai nrog tsab ntawv "p".
  • Kev tshaj tawm, uas piav qhia cov yam khoom koj xav kom nyiam (xws li xim xim). Cov lus tshaj tawm muaj nyob hauv cov kab ntawv nkhaus {}.
  • Cov cuab yeej, uas qhia meej tias cov cuab yeej twg ntawm HTML keeb kwm koj xav kom style. Piv txwv li, hauv lub cim npe, koj tuaj yeem hais qhia tias koj xav kom xim cov xim ntawm cov ntawv.
  • Cov cuab yeej muaj txiaj ntsig tshwj xeeb li cas koj xav hloov lub cuab yeej (piv txwv li, yog tias cov cuab yeej yog xim xim, tom qab ntawv tus nqi yuav yog "ntsuab").
  • Koj tuaj yeem hloov kho ntau yam sib txawv hauv ib qho kev tshaj tawm.
Kawm Web Tsim Kauj Ruam 13
Kawm Web Tsim Kauj Ruam 13

Kauj Ruam 3. Siv CSS rau koj cov ntawv txhawm rau ua kom koj cov ntawv sau zoo nkauj

CSS muaj txiaj ntsig zoo rau kev thov ntau yam cuam tshuam rau koj cov ntawv yam tsis tas yuav ua tus lej ib tus zuj zus txhua qhov khoom hauv HTML. Sim nrog kev hloov pauv cov khoom sib txawv hauv CSS, suav nrog:

  • Xim xim
  • Font loj
  • Tsev neeg Font (piv txwv li, ntau hom fonts koj xav siv hauv koj cov ntawv)
  • Ntawv tuab si lug
  • Kab qhov siab
  • Tsab ntawv nrug
Kawm Web Tsim Kauj Ruam 14
Kawm Web Tsim Kauj Ruam 14

Kauj Ruam 4. Sim nrog cov thawv thiab lwm yam cuab yeej teeb tsa CSS

CSS kuj tseem muaj txiaj ntsig rau ntxiv cov ntsiab lus pom zoo rau koj nplooj ntawv, xws li cov ntawv ntawv thiab cov lus. Ib qho ntxiv, koj tuaj yeem siv nws los hloov qhov txheej txheem tag nrho ntawm koj nplooj ntawv thiab txheeb xyuas qhov sib txawv ntawm cov ntsiab lus tau muab tso rau ib leeg.

Piv txwv li, koj tuaj yeem txhais tus yam ntxwv zoo li qhov dav thiab xim keeb kwm yav dhau ntawm ib ntu, ntxiv ciam teb, lossis teeb tsa cov npoo uas yuav tsim qhov chaw nruab nrab ntawm ntau yam ntsiab lus ntawm koj nplooj ntawv

Txoj Kev 4 ntawm 4: Ua Haujlwm Nrog Lwm Yam Lus Tsim

Kawm Web Tsim Kauj Ruam 15
Kawm Web Tsim Kauj Ruam 15

Kauj Ruam 1. Kawm JavaScript yog tias koj xav ntxiv cov ntsiab lus sib tham rau koj nplooj ntawv

JavaScript yog hom lus zoo los kawm yog tias koj txaus siab ntxiv cov yam ntxwv zoo ntxiv rau koj lub vev xaib, xws li cov duab thiab cov popup. Ua ib chav kawm lossis saib rau kev qhia online txog yuav ua li cas tus lej hauv JavaScript thiab suav nrog cov ntsiab lus nkag rau hauv koj lub vev xaib | siv HTML.

Ua ntej koj tuaj yeem yooj yim nrog JavaScript, koj yuav tsum paub txog cov hauv paus ntawm kev tsim cov nplooj ntawv hauv HTML thiab CSS

Kawm Web Tsim Kauj Ruam 16
Kawm Web Tsim Kauj Ruam 16

Kauj Ruam 2. Paub koj tus kheej nrog jQuery ua kom JavaScript coding yooj yim dua

jQuery yog lub tsev qiv ntawv JavaScript uas tuaj yeem ua kom yooj yim Java programming los ntawm kev tso cai rau koj nkag mus rau ntau yam ntawm cov lej JavaScript ua ntej. jQuery yog cov cuab yeej zoo yog tias koj twb paub zoo txog cov hauv paus ntawm JavaScript coding.

Koj tuaj yeem nkag mus rau jQuery lub tsev qiv ntawv thiab ntau ntau lwm cov peev txheej muaj txiaj ntsig los ntawm jQuery.org, lub vev xaib ntawm jQuery Foundation

Kawm Web Tsim Kauj Ruam 17
Kawm Web Tsim Kauj Ruam 17

Kauj Ruam 3. Kawm cov lus ntawm cov neeg rau zaub mov yog tias koj txaus siab rau kev txhim kho tom qab kawg

Thaum HTML, CSS, thiab JavaScript zoo tagnrho rau cov tsim qauv web uas tsom mus rau qhov uas tus neeg siv pom thiab ua ntawm lub vev xaib, cov lus ntawm server-pab tau muaj txiaj ntsig yog tias koj xav paub ntau ntxiv txog tom qab-ua haujlwm. Yog tias koj xav kawm txog kev txhim kho tom qab kawg, tsom mus rau kev kawm cov lus zoo li Python, PHP, thiab Ruby on Rails.

Cov lus no muaj txiaj ntsig zoo rau kev tswj hwm thiab ua cov ntaub ntawv uas tus neeg siv tsis pom. Piv txwv li, PHP tuaj yeem siv los tsim cov cuab yeej tsim tus password kom ruaj ntseg ntawm cov vev xaib uas xav tau kev nkag mus

Cov Ntaub Ntawv Pab

Image
Image

HTML Cheat Sheet

Image
Image

CSS dag Sheet

Pom zoo: