Yog tias koj xav tsim thiab tsim cov nplooj ntawv web, cov txheej txheem no yuav yooj yim dua yog tias koj npaj ua ntej. Hauv theem kev npaj, tus tsim qauv thiab cov neeg siv khoom tuaj yeem ua haujlwm ua ke txhawm rau nrhiav hom thiab txheej txheem uas haum rau lawv cov kev xav tau. Cov phiaj xwm txheej txheem cuam tshuam rau tus yam ntxwv lossis tus yam ntxwv ntawm lub xaib, koj tuaj yeem hais qhov no yog qhov tseem ceeb tshaj plaws hauv kev tsim web, tshwj xeeb tshaj yog tias nws yog rau kev lag luam.
Kauj ruam
Ntu 1 ntawm 4: Tsim Tus Qauv Yooj Yim
Kauj Ruam 1. Txheeb xyuas lub luag haujlwm ntawm lub vev xaib
Yog tias koj tab tom tsim tus kheej lub vev xaib, tej zaum koj twb paub cov lus teb lawm. Txawm li cas los xij, yog tias koj tab tom tsim lub xaib rau lwm lub koom haum, tuam txhab, lossis tus neeg, koj yuav tsum nrhiav seb lawv xav tau dab tsi thiab kev ua haujlwm ntawm lub xaib. Txhua yam koj hais ntawm no yuav siv tau thaum lub vev xaib tiav.
- Puas yog lub vev xaib xav tau Storefront? Yuav tsum siv cov lus pom? Puas yog tus neeg siv yuav tsum tsim tus as khauj tom qab? Puas yog lub vev xaib tshooj lus? Los yog duab qhia? Tag nrho cov no thiab lwm cov lus nug yuav pab koj hauv kev tsim thiab tsim lub xaib.
- Txoj kev npaj no tuaj yeem kos rau hauv daim duab, tshwj xeeb tshaj yog tias nws yog rau lub tuam txhab loj thiab ntau tus neeg koom nrog tsim txoj haujlwm no.
Kauj Ruam 2. Tsim daim duab qhia chaw (site map)
Daim duab qhia chaw ntawm lub vev xaib zoo ib yam li daim ntawv ntws, qhia tias cov neeg siv txav los ntawm ib nplooj ntawv mus rau lwm qhov li cas. Koj tsis xav tau lub vev xaib ntawm theem no, tsuas yog nthuav dav ntawm cov ntsiab lus. Koj tuaj yeem siv lub khoos phis tawj siv los tsim cov duab kos lossis kos koj tus kheej ntawm daim ntawv. Siv daim duab no los ua kom pom cov ntsiab lus ntawm kev npaj hierarchical thiab nplooj ntawv web txuas.
Kauj Ruam 3. Sim daim qauv daim npav
Ib txoj hauv kev nrov ntawm pab pawg txhim kho lub vev xaib yog siv ntau daim npav txhawm rau nrhiav txhua tus neeg qhov kev cia siab. Siv tus lej ntawm daim npav nco thiab sau cov ntsiab lus yooj yim ntawm nplooj ntawv web ntawm txhua tus zuj zus. Teem cov npav no ua ke nrog koj pab neeg kom pom lub tswv yim zoo tshaj plaws. Txoj hauv kev no haum rau siv thaum koj koom tes nrog lwm tus ntawm kev tsim cov nplooj ntawv web.
Kauj Ruam 4. Siv daim ntawv thiab daim ntawv xov xwm, lossis ntawv dawb
Nov yog thawj txoj hauv kev npaj rau pob nyiaj siv me me, koj tuaj yeem tshem tawm sai lossis hloov cov ntsiab lus thiab hloov pauv. Kos koj lub vev xaib tsim ntawm daim ntawv, tom qab ntawv txuas cov ntawv nrog xov, lossis kos kab rau ntawm lub rooj tsavxwm. Txoj kev no yog qhov tsim nyog siv rau hauv kev tawm tswv yim sib tham.
Kauj Ruam 5. Tsim cov ntsiab lus khaws cia
Qhov tseeb nws zoo li tsim nyog siv hauv kev tsim kho cov vev xaib dua li hauv lub vev xaib tshiab. Ntxig txhua qhov ua tiav ntawm cov ntsiab lus lossis nplooj ntawv web rau hauv daim ntawv nthuav qhia. Sau ib lub hom phiaj ntawm txhua daim ntsiab lus lossis nplooj ntawv, siv cov npe no los txiav txim seb yuav tshem tawm dab tsi thiab khaws dab tsi. Koj tuaj yeem ua kom yooj yim cov qauv ntawm lub vev xaib thiab ua kom yooj yim dua cov txheej txheem rov tsim dua tom qab.
Ntu 2 ntawm 4: Tsim Tus Qauv HTML Yooj Yim
Kauj Ruam 1. Tsim cov kab hlau los tsim lub vev xaib hierarchy
Cov qauv HTML yooj yim yog daim phiaj ntawm lub xaib koj yuav tsim, siv tsuas yog cov cim npe yooj yim tshaj plaws thiab cov qauv (thaiv/qauv) cov ntsiab lus. Lub moj khaum no teb cov lus nug, "Dab tsi yog pom hauv lub vev xaib thiab nyob qhov twg?" Kev tsim qauv thiab ua kom zoo nkauj tsis tas yuav tsim hauv cov qauv no.
- Koj tuaj yeem pom cov qauv thiab cov ntawv qhia ntawm cov ntsiab lus nrog cov qauv yooj yim ua ntej koj xaiv qhov chaw teeb tsa.
- Cov qauv HTML yooj yim tsis zoo li PDFs lossis duab, koj tuaj yeem nrawm nrawm los ntawm cov ntsiab lus piv txwv los tsim cov qauv tshiab.
- Lub hauv paus txheej txheem yog sib tham sib uas tau txais txiaj ntsig zoo rau ob tus tsim web thiab cov neeg siv khoom. Txij li cov txheej txheem yooj yim no tau sau nrog cov lej HTML yooj yim, koj tseem tuaj yeem taw qhia nws thiab paub tias lub vev xaib hloov pauv ua haujlwm li cas. Qhov no tsis tuaj yeem ua tiav nrog PDF.
Kauj Ruam 2. Sim Grey Box txoj hauv kev
Thaiv lossis nthuav koj lub vev xaib cov ntsiab lus hauv Grey Box, cov ntsiab lus tseem ceeb tshaj plaws nyob rau saum. Txheeb cov ntsiab lus hauv ib kem. Piv txwv li, yog tias nplooj ntawv yog "Txog Lub Tuam Txhab" tom qab ntawd cov ntaub ntawv ntxaws ntxaws txog lub tuam txhab nyob rau saum toj, tom qab ntawd muaj cov npe ntawm cov neeg ua haujlwm, tom qab ntawv tiv toj, thiab lwm yam.
Qhov no tsis suav nrog headers thiab footers. Grey Box yog qhov sawv cev pom ntawm cov ntsiab lus uas yuav tshwm sim hauv lub vev xaib
Kauj Ruam 3. Sim ua cov txheej txheem tsim qauv yooj yim
Muaj ntau txoj haujlwm uas koj tuaj yeem siv hauv cov txheej txheem ntawm kev tsim lub vev xaib yooj yim. Tus nqi ntawm lub vev xaib txoj cai (hom lus) koj yuav tsum tau sib txawv rau txhua qhov haujlwm. Qee qhov haujlwm uas nrov heev suav nrog:
- Txawv Lab. Lub vev xaib no tau mob siab rau "tsim qauv atomic", txhua cov ntsiab lus tau suav tias yog "molecule" uas ua rau lub vev xaib loj dua.
- Jumpcharts. Nplooj ntawv web no muab cov phiaj xwm hauv web thiab cov kev pabcuam tsim. Cov vev xaib no tau them nyiaj thiab xav tau kev tso npe, tab sis koj tuaj yeem tsim lub vev xaib ua haujlwm sai sai yam tsis tas yuav tsum paub ntau lub vev xaib txoj cai.
- Wirefy. Wirefy yog lwm qhov chaw uas muaj "tsim qauv atomic". Cov tsim tawm lub vev xaib tuaj yeem tau txais cov cuab yeej dawb.
Kauj Ruam 4. Siv cov cim HTML yooj yim
Tus qauv yooj yim zoo yuav hloov pauv mus rau qhov chaw qub. Tsis txhob xav ntau txog kev tsim lub vev xaib thaum lub sijhawm tsim cov qauv no. Siv cov cim uas tuaj yeem nkag siab yooj yim thiab hloov pauv.
Cov txheej txheem yooj yim yooj yim yog qhov zoo dua. Lub hom phiaj ntawm kev tsim cov cim npe yog los tsim cov qauv. Lub ntsej muag pom tau tuaj yeem hloov kho tom qab nrog CSS thiab cim npe siab
Kauj Ruam 5. Tsim cov qauv qhia yooj yim rau txhua nplooj ntawv web
Tej zaum koj yuav raug ntxias kom sib npaug txhua nplooj ntawv web nrog ib qho qauv qhia. Qhov tseeb, qhov no tsuas yog ua rau koj lub xaib yooj yim thiab tsis txaus ntseeg. Tsim cov kab ke sib txawv rau txhua nplooj ntawv, koj yuav nkag siab tias txhua nplooj ntawv xav tau nws tus kheej tsim.
Ntu 3 ntawm 4: Tsim Cov Ntsiab Lus
Kauj Ruam 1. Npaj cov ntsiab lus ua ntej tsim lub vev xaib
Koj yuav pom nws yooj yim dua los saib ua ntej koj lub vev xaib yog tias koj twb muaj cov ntsiab lus tiag tiag tsis txhob siv cov qauv lossis cov chaw tso khoom. Koj tsis tas yuav muaj cov ntsiab lus ntau dhau, tab sis koj cov mockup yuav zoo dua yog tias koj siv daim qauv ntawm daim duab qub.
Koj tsis tas yuav muaj tag nrho cov khoom siv hauv kab lus, tab sis tsawg kawg nws yuav tsum muaj lub ntsiab lus tseeb
Kauj Ruam 2. Nco ntsoov tias cov ntsiab lus zoo tsis yog cov ntawv xwb
Internet yog qhov nyuaj dua li nplooj ntawv web yooj yim ntawm cov ntawv. Koj xav tau ntau yam ntsiab lus sib txawv txhawm rau tsim lub vev xaib zoo kom nyiam thiab caw cov neeg tuaj saib. Piv txwv li:
- Duab.
- Lub suab.
- Yeeb yaj duab.
- Web kis lossis webstream (Twitter)
- Facebook Kev Sib Koom
- RSS
- Web pub
Kauj Ruam 3. Nug tus kws yees duab tshaj lij kom pab
Yog tias koj xav suav nrog cov duab ntawm koj lub xaib, thawj qhov kev tshoov siab koj yuav tau txais los ntawm koj lub vev xaib yuav zoo dua yog tias nws tau ntim nrog kev yees duab zoo. Ib daim duab zoo muaj nqis ntau dua nees nkaum daim duab zoo.
Saib rau qhov kawm tiav tshiab ntawm kev kos duab zoo li kev daws teeb meem pheej yig dua li kws yees duab tshaj lij uas tau ua lag luam ntev
Kauj Ruam 4. Sau cov ntawv zoo
Cov ntsiab lus sau ntawm nplooj ntawv web yuav txiav txim siab tus nqi ntawm koj lub vev xaib. Thaum koj tsis tas yuav txhawj ntau txog kev tsim cov ntsiab lus hauv cov txheej txheem tsim no, nws tsis mob siab rau pib xav txog nws vim tias koj tseem yuav xav tau cov ntsiab lus tsis tu ncua thaum koj lub xaib tau nce thiab khiav.
Ntxiv nrog rau cov ntsiab lus hauv kab lus, muaj cov ntaub ntawv sau uas koj kuj yuav tsum muaj nyob hauv tus txheej txheem ntawm kev sau cov nplooj ntawv web. Piv txwv li cov ntaub ntawv tiv toj, lub tuam txhab npe, lossis lwm yam uas yuav siv ntau zaus hauv lub xaib
Ntu 4 ntawm 4: Hloov Lub Tswv Yim Rau Hauv Cov Vev Xaib
Kauj Ruam 1. Npaj cov ntsiab lus tseem ceeb
Qhov kev npaj ntawm cov ntsiab lus no siv rau txhua nplooj ntawv ntawm koj lub xaib, xws li lub taub hau, cov ntawv hauv qab, thiab cov ntawv qhia zaub mov. Teeb nws hauv cov qauv yooj yim heev yog li koj tuaj yeem tshawb xyuas seb txhua nplooj ntawv zoo li cas. Qhov no muaj txiaj ntsig tshwj xeeb thaum koj nce mus rau txheej txheem txheej txheem web.
Tsis txhob txhawj ntau txog cov ntsiab lus, sim saib ua ntej (saib ua ntej) yuav ua li cas lub header zoo li
Kauj Ruam 2. Tsim kom yooj yim txheej txheem
Pib los ntawm kev hloov chaw ntawm lub moos los ntawm kab lus qhia hauv paus mus rau qhov chaw nyob tiag tiag ntawm nplooj ntawv. Piv txwv li, koj yuav xav txav cov qauv qhia zaub mov mus rau sab laug ntawm nplooj ntawv thiab cov npe ntawm kab ntawv mus rau sab xis.
Khaws sim nrog lub vev xaib teeb tsa rau ntau nplooj ntawv, ua ntej koj txav mus rau qib tom ntej. Tso cai rau lwm tus los saib nws kom pom tias cov txheej txheem uas koj tsim tau zoo li muaj txoj sia nyob
Kauj Ruam 3. Tsim mockup
Siv ib txoj haujlwm zoo li Photoshop los tsim mockups lossis piv txwv nplooj ntawv ntawm koj lub vev xaib. Siv cov txheej txheem uas koj tau suav sau ua phau ntawv qhia. Koj tuaj yeem ua mockups sai dua thiab tau txais cov txiaj ntsig uas koj xav tau nrog qhov program ua cov duab. Cov txiaj ntsig ntawm cov duab no tuaj yeem siv tom qab siv ua tus txheej txheem ntawm kev sau lub vev xaib txoj cai.
Muab cov ntsiab lus tseeb tso rau hauv lub mockup kom nws saib zoo
Kauj Ruam 4. Hloov cov qauv piv txwv nrog cov ntsiab lus qub
Ntxiv cov ntsiab lus thiab cov ntsiab lus rau nplooj ntawv web. Tsis txhob hws lub web style teeb tsa rau tam sim no, tsuas yog teeb tsa txhua yam rau qhov chaw raug. Qhov no yuav pab koj tshuaj xyuas lub vev xaib hloov pauv uas koj ua tom qab.
Kauj Ruam 5. Tsim lub vev xaib qhia
Nws yog ib qho tseem ceeb heev uas yuav tsum muaj kev sib xyaw ua ke, tshwj xeeb tshaj yog rau cov chaw loj. Yog tias lub xaib tau npaj rau lub hom phiaj kev lag luam thiab twb muaj nws tus kheej lub npe lossis hom, qhov no yuav tsum tau muab tso ua ke rau hauv qhov chaw tsim. Yam yuav tau txiav txim siab thaum tsim lub vev xaib style qhia:
- Kev taw qhia
- Lub taub hau ceeb toom
- Nqe lus
- Italic cim
- Tus cwj pwm siab tawv
- Kev sib txuas (nquag, tsis ua haujlwm, hover)
- Kev siv duab
- Icon
- Pob qhov rooj
- npe
Kauj Ruam 6. Thov lub web style
Thaum koj pom tus qauv zoo thiab tsim qauv, siv nws. CSS yog ib txoj hauv kev yooj yim tshaj plaws los siv cov qauv ntawm nplooj ntawv web lossis thoob plaws lub xaib. Saib cov lus qhia hauv qab no kom nkag siab zoo dua cov ntsiab lus ntawm kev siv CSS.
