Ja vēlaties izstrādāt un izveidot tīmekļa lapas, šis process būs daudz vieglāks, ja plānojat uz priekšu. Plānošanas posmā dizainers un klients var sadarboties, lai atrastu savām vajadzībām atbilstošu formātu un izkārtojumu. Plānošanas process ietekmē vietnes stilu vai stilu, jūs varētu teikt, ka tas ir vissvarīgākais tīmekļa dizaina aspekts, it īpaši, ja tas ir paredzēts uzņēmējdarbībai.
Solis
1. daļa no 4: Pamata struktūras izveide
1. solis. Nosakiet vietnes funkciju
Ja veidojat personisku vietni, jūs droši vien jau zināt atbildi. Tomēr, ja veidojat vietni citai organizācijai, uzņēmumam vai personai, jums jānoskaidro, ko viņi vēlas, un vietnes funkcionalitāte. Viss šeit norādītais stāsies spēkā, kad tiks pabeigta tīmekļa lapa.
- Vai vietnei ir nepieciešama veikala mājas lapa? Vai ir jāizsaka lietotāju komentāri? Vai lietotājam vēlāk būs jāizveido konts? Vai vietnes raksts ir orientēts? Vai arī orientēts uz attēlu? Visi šie un citi jautājumi palīdzēs jums izveidot vietni.
- Šo plānošanas procesu var zīmēt, it īpaši, ja tas ir paredzēts lielam uzņēmumam un daudzi cilvēki ir iesaistīti šī projekta izveidē.
2. solis. Izveidojiet vietnes kartes diagrammu (vietnes karti)
Vietnes karšu diagramma ir līdzīga plūsmas diagrammai, kas parāda, kā lietotāji pārvietojas no vienas lapas uz nākamo. Šajā posmā jums nav nepieciešama tīmekļa lapa, pietiek ar vispārēju jēdzienu plūsmu. Jūs varat izmantot datorprogrammu, lai izveidotu diagrammas vai uzzīmētu savu uz papīra. Izmantojiet šo diagrammu, lai parādītu hierarhijas izkārtojuma un tīmekļa lapu savienojamības jēdzienus.
Solis 3. Izmēģiniet kartes sastādīšanas metodi
Viena populāra grupas tīmekļa izstrādes metode ir izmantot vairākas kartes, lai noskaidrotu ikviena cerības. Paņemiet vairākas piezīmju kartītes un pierakstiet tīmekļa lapas pamata saturu katrā atsevišķi. Sakārtojiet šīs kartes kopā ar savu komandu, lai atrastu labāko koncepciju. Šī metode ir piemērota lietošanai, sadarbojoties ar citiem, veidojot tīmekļa lapas.
4. solis. Izmantojiet papīru un ziņojumu dēli vai tāfeli
Šī ir oriģināla plānošanas metode ar nelielu budžetu, jūs varat ātri izdzēst vai mainīt saturu un mainīt plūsmu. Uzzīmējiet savu tīmekļa dizainu uz papīra, pēc tam savienojiet papīru ar pavedienu vai uzzīmējiet līnijas uz tāfeles. Šī metode ir ļoti piemērota prāta vētras sesijām.
5. solis. Izveidojiet satura inventāru
Patiesībā to parasti ir piemērotāk izmantot, pārveidojot tīmekļus, nevis jaunos tīmekļa dizainos. Ievietojiet katru gatavo saturu vai tīmekļa lapu izklājlapā. Pierakstiet katra satura vai lapas mērķi, izmantojot šo sarakstu, lai noteiktu, ko noņemt un ko paturēt. Jūs varat vienkāršot tīmekļa struktūru un vienkāršot pārveidošanas procesu vēlāk.
2. daļa no 4: HTML pamata kontūras izveide
1. solis. Izveidojiet karkasa rāmi, lai izveidotu tīmekļa lapu hierarhiju
Pamata HTML veidne ir jūsu izveidotās vietnes plāns, izmantojot tikai visvienkāršākos tagus un parauga (blokus/veidnes) saturu. Šī sistēma atbild uz jautājumu “Kas ir redzams tīmeklī un kur?” Veidojot šo kontūru, nav nepieciešama formatēšana un stils.
- Pirms stila iestatījuma izvēles varat redzēt satura struktūru un plūsmas diagrammu ar pamata kontūru.
- Pamata HTML veidnes nav statiskas, piemēram, PDF vai attēli, varat ātri pārvilkt satura paraugu, lai izveidotu jaunas struktūras.
- Pamata ietvars ir interaktīvs, un tas dod labumu gan tīmekļa izstrādātājiem, gan klientiem. Tā kā šī pamata sistēma ir uzrakstīta ar vienkāršu HTML kodu, jūs joprojām varat tajā pārvietoties un zināt, kā darbojas tīmekļa lapu pārslēgšana. To nevar izdarīt ar PDF.
2. solis. Izmēģiniet pelēkās kastes metodi
Bloķējiet vai izceliet savu tīmekļa lapas saturu pelēkā kastē, vissvarīgākais saturs atrodas augšpusē. Kārtojiet saturu vienā kolonnā. Piemēram, ja lapa ir “Par uzņēmumu”, tad augšā ir detalizēta informācija par uzņēmumu, kam seko darbinieku saraksts, tad kontaktinformācija utt.
Tas neietver galvenes un kājenes. Pelēkā kaste ir vizuāls satura attēlojums, kas tiks parādīts tīmeklī
3. Izmēģiniet pamata kontūru veidotāja programmu
Ir dažādas programmas, kuras varat izmantot pamata tīmekļa ietvara izveides procesā. Tīmekļa programmēšanas koda (valodas) apjoms, kas jums jāapgūst, katrai programmai ir atšķirīgs. Dažas no populārākajām programmām ir šādas:
- Pattern Lab. Šī vietne ir veltīta “atomu projektēšanai”, katrs saturs tiek uzskatīts par “molekulu”, kas veido lielāku tīmekļa lapu.
- Lēcienu diagrammas. Šī tīmekļa lapa nodrošina tīmekļa plānošanas un ierāmēšanas pakalpojumus. Šīs vietnes ir apmaksātas un tām ir nepieciešams abonements, taču jūs varat ātri izveidot tīmekļa ietvarus, nepārvaldot daudz tīmekļa programmēšanas koda.
- Wirefy. Wirefy ir vēl viena vietne, kas piedāvā “atomu dizainu”. Tīmekļa izstrādātāji šo rīku var iegūt bez maksas.
4. solis. Izmantojiet vienkāršu HTML marķējumu
Laba pamata veidne viegli tiks pārveidota par sākotnējo vietni. Veidnes veidošanas procesā pārāk nedomājiet par tīmekļa veidošanu. Izmantojiet marķējumu, ko var viegli saprast un mainīt.
Vienkāršs pamata ietvars ir daudz labāks. Marķējuma izveides mērķis ir izveidot struktūru. Vizuālo izskatu vēlāk var pielāgot, izmantojot CSS un papildu marķējumu
5. solis. Izveidojiet katras tīmekļa lapas pamata kontūru
Jums var rasties kārdinājums katru tīmekļa lapu pielīdzināt vienai pamata kontūrai. Faktiski tas padarīs jūsu vietni tikai vienkāršu un garlaicīgu. Katrai lapai izveidojiet atšķirīgu kontūru, jūs sapratīsit, ka katrai lapai ir nepieciešams savs dizains.
3. daļa no 4: Satura izveide
1. solis. Sagatavojiet saturu pirms tīmekļa lapas izveides
Jums būs daudz vieglāk priekšskatīt savu tīmekļa skatu, ja jums jau ir faktiskais saturs, nevis paraugi vai vietturi. Jums nav jābūt pārāk daudz satura, taču jūsu makets izskatīsies daudz labāk, ja izmantosit oriģinālā attēla kopiju.
Jums nav jābūt visam raksta materiālam, bet vismaz tam jābūt ar faktisku virsrakstu
2. solis. Atcerieties, ka lielisks saturs nav tikai teksts
Internets ir daudz sarežģītāks nekā vienkārša teksta tīmekļa lapa. Lai izveidotu lielisku vietni, lai piesaistītu un uzaicinātu apmeklētājus, jums ir nepieciešams dažāds saturs. Piemēram:
- Bilde.
- Balss.
- Video.
- Tīmekļa pārraide vai tīmekļa straume (Twitter)
- Facebook integrācija
- RSS
- Web plūsma
Solis 3. Lūdziet palīdzību profesionālam fotogrāfam
Ja vēlaties savā vietnē iekļaut fotoattēlus, pirmais iespaids, ko iegūsit no savas vietnes, būs daudz labāks, ja tas būs piepildīts ar profesionālu fotogrāfiju. Viena laba fotogrāfija ir vairāk nekā divdesmit zemas kvalitātes fotoattēlu vērta.
Meklējiet svaigu fotogrāfijas mākslas absolventu kā lētāku risinājumu nekā profesionāls fotogrāfs, kurš šajā biznesā darbojas jau ilgu laiku
4. solis. Rakstiet kvalitatīvus rakstus
Tīmekļa lapas rakstiskais saturs noteiks jūsu tīmekļa trafika apjomu. Lai gan šajā dizaina procesā jums nav pārāk jāuztraucas par satura izveidi, nav par ļaunu sākt par to domāt, jo jums būs arī regulāri nepieciešams saturs, tiklīdz jūsu vietne būs izveidota.
Papildus raksta saturam ir arī rakstisks materiāls, kas jums ir jābūt tīmekļa lapas apkopošanas procesā. Piemēram, kontaktinformācija, uzņēmuma nosaukums vai jebkas cits, kas vietnē tiks izmantots vairākas reizes
4. daļa no 4: jēdzienu pārvēršana vietnēs
Solis 1. Sakārtojiet pamatelementus
Šis elementu izvietojums attiecas uz katru jūsu vietnes lapu, piemēram, galvenes, zemsvītras piezīmes un navigācijas izvēlnes. Iestatiet to ļoti vienkāršā stilā, lai jūs varētu pārbaudīt, kā izskatās visas lapas. Tas ir īpaši noderīgi, pārejot pie tīmekļa izkārtojuma procesa.
Neuztraucieties par detaļām, mēģiniet priekšskatīt (priekšskatīt) galvenes izskatu
2. solis. Izveidojiet vienkāršu izkārtojumu
Sāciet, mainot pulksteņa pozīciju no pamatkontu kolonnas uz faktisko atrašanās vietu lapā. Piemēram, iespējams, vēlēsities pārvietot navigācijas izvēlnes paraugu lapas kreisajā pusē un virsrakstu sarakstu pa labi.
Pirms pāriet uz nākamo darbību, turpiniet eksperimentēt ar tīmekļa izkārtojumiem vairākām lapām. Ļaujiet citiem to apskatīt, lai redzētu, vai jūsu izveidotais izkārtojums šķiet dzīvs
Solis 3. Izveidojiet maketu
Izmantojiet tādu programmu kā Photoshop, lai izveidotu savas vietnes maketus vai lapu paraugus. Izmantojiet izkārtojumu, ko esat sastādījis kā ceļvedi. Izmantojot attēlu apstrādes programmu, varat veikt maketus ātrāk un iegūt vēlamos rezultātus. Šo attēlu rezultātus vēlāk var izmantot kā atsauci tīmekļa programmēšanas koda rakstīšanas procesā.
Ievietojiet maketā faktisko saturu, lai tas izskatās labi
4. solis. Aizstājiet parauga koncepciju ar sākotnējo saturu
Pievienojiet saturu un elementus tīmekļa lapām. Pagaidām nemīlējiet tīmekļa stila iestatījumus, vienkārši sakratiet visu pareizajā vietā. Tas palīdzēs pārskatīt vēlāk veiktās tīmekļa stila izmaiņas.
5. solis. Izveidojiet tīmekļa stila ceļvedi
Ir ļoti svarīgi saglabāt stilu sajaukumu, īpaši lielām vietnēm. Ja vietne ir paredzēta uzņēmējdarbības nolūkiem un tai jau ir savs zīmols vai stils, tas ir jāintegrē vietnes dizainā. Lietas, kas jāņem vērā, veidojot tīmekļa lapas stila rokasgrāmatu:
- Navigācija
- Galvas piezīme
- Paragrāfs
- Italic raksturs
- Drosmīgs raksturs
- Saites (aktīva, neaktīva, virziet kursoru)
- Attēlu izmantošana
- Ikona
- Poga
- sarakstu
6. solis. Izmantojiet tīmekļa stilu
Kad esat atradis pareizo stilu un dizainu, īstenojiet to. CSS ir viens no vienkāršākajiem veidiem, kā ieviest stilus tīmekļa lapā vai visā vietnē. Skatiet tālāk sniegtos norādījumus, lai labāk izprastu CSS lietošanas informāciju.
