Web Dizaina Pamati

1. Web-lapu dizaina salikšanas pamati Web DizainaPamati

2. Web-lapu dizaina salikšanas uzdevumi • Par web-lapas dizaina salikšanu sauksim tāda HTML-koda izveidošanu, kurš ļaus izvietot web-lapas elementus (attēlus, tekstu, līnijas) vajadzīgās dokumenta vietās un attēlot tos pārlūkprogrammas logā balstoties uz izstrādāto maketu

3. Web-lapu dizaina salikšanas uzdevumi • Vispirms dizaineris gatavo web-lapu maketus grafiskā redaktorā (piemēram, Adobe Illustrator, Adobe Photoshop), apstiprina tos pie pasūtītāja un nodod salikšanas dizainerim HTML-koda formēšanai.

4. Web-lapu dizaina salikšanas uzdevumi • salikšanas dizaineris saņem darbu attēlu salikuma veidā, kur katrs no tiem atbilst atsevišķas lapaspuses maketam ar savu dizainu.

5. Web-lapu dizaina salikšanas uzdevumi

6. Web-lapu dizaina salikšanas uzdevumi • Tagad nepieciešams izanalizēt attēlu un nolemt, kā tad viņu pārvērst interneta lapā. Ērtībai notiek loģiska bildes sadalīšana uz atsevišķiem blokiem, ar kuriem notiek tālākais darbs. Tā, pēc zīm. 1 var izcelt divus lielus blokus — lapas «cepuri» un galvenais saturs.

7. Web-lapu dizaina salikšanas uzdevumi • Darba gaitā pie šabloniem un pēc tā beigām notiek pārbaude, kurai ir jāatbild uz tādiem jautājumiem: • vai korekti attēlojamas lapas populārākajās pārlūkprogrammās? • vai notiek datu veseluma saglabāšana pārlūkprogrammā pie šrifta izmēra izmaiņām gan uz lielāko, gan uz mazāko pusi? • vai var turpināt darbu ar web-lapu, ja atslēgt attēlu demonstrēšanu? • cik būtiski iespaido web-lapas izskatu monitora izšķirtspēja?

8. Web-lapu dizaina salikšanas uzdevumi • Salikšanas dizainera darba kopsummai jābūt šablonu salikumam no atkārtojošiem attēliem, bet kuri izveidoti HTML-dokumentu veidā. Kā arī stila fails, kurā ir pierakstīti ne tikai atribūti, kas ir nepieciešami web-lapu salikšanai, bet arī galvenā teksta, virsrakstu, apakštitulu un citu tekstu elementu parametri. Tas ļauj pēc vienotiem šabloniem noformēt jebkuru skaitu web-lapu, kuru noformējums izskats būs vienāds.

9. Web-lapu dizaina salikšanas īpatnības • Dokumenta platums • Web-lapas objekti ir taisnstūri • Aktīva attēlu izmantošana • Attēlu sagriešana fragmentos • Fona attēla pielietojums • ...

10. Dokumenta platums • Pašā sākumā web-lapas izstrādātājam lietotāja pārlūkprogrammas loga platums nav zināms, tā kā viņš var mainīties visplašākajās robežās. Platums ir atkarīgs no monitora izšķirtspējas, viņa diagonāles garuma, loga izmēra un vēl dažiem mainīgajiem datiem.

11. Fiksēts makets • strikti uzstādām kopīgo maketa platumu noteiktajam lielumam

12. «Gumijas» makets • Šī maketa izskats dibinās uz tā, ka par vienu no mērvienībām paliek procenti. Pārlūkprogrammas loga kopīgais darba platums — 100%, un maketa kolonnu summai nav tas jāpārsniedz, tādēļ ērtībai parasti pielieto pierakstu procentos

13. Web-lapas objekti ir taisnstūri • Visiem web-lapas objektiem ir taisnstūra forma

14. Aktīva attēlu izmantošana • Attēli ir pielietojami ne tikai teksta ilustrācijai, bet var būt izmantojami web-lapās daudzām atšķirīgām lomām, piemēram, tiek izmantoti pievilcīga dizaina radīšanai, kalpo par izmēra veidotāju starp tabulas šūnām, rada gradientu aizliešanu, fonu attēliem u.t.t.

15. Attēlu sagriešana fragmentos • Viens attēls var aizņemt pārāk lielu uzdotu laukumu. Sagriežot viņu uz taisnstūriem, saņemsim lielisku konstruktoru, kurā vienus attēla fragmentus varēs aizstāt ar tekstu, citi ar animāciju, bet trešos modificēt darba gaitā.

16. Fona attēla pielietojums • Fonu attēls ir ērts ar to, ka viņš var aizpildīt visu atvēlēto platumu vai augstumu zem bloka.

17. Moduļu tīkli • Moduļu tikls ir neredzamu vadošu līniju salikumu, pie kurām novietojas web-lapas elementi. Tas atvieglo datu izvietošanu dokumentā, nodrošina vizuālu sakaru starp atsevišķiem blokiem un saglabā dizaina pēctecību pārejā no vienas lapaspuses uz citu.

18. Moduļu tīkli • Web-lapu faktiski var aplūkot kā taisstēra bloku salikumu, kuri izvietojās noteiktā kārtībā. Pie tam, kā likums, dati novietojas kolonnās, tādēļ pie web-lapas dizaina salikšanas izmanto terminu vien-, divu-, trīs kolonnu makets u.t.t.

19. Moduļu tīkli

20. Moduļu tīkli

21. Moduļu tīkli • Izveidojot moduļa tīklu, teksta un attēlu vietā parasti pielieto shematiskas nozīmītes. Piemēram, teksts ir apzīmējams ar dažām horizontālām līnijām, bet attēli attēlojas ar aptumšotiem blokiem vai pārsvītrotajiem taisnstūriem.

22. Vienkolonnas tīkls • vienas kolonnas teksts visbiežāk sastopams akadēmiskā dizainā, pie fiksētā maketa un liela teksta publikācijās.

23. Divkolonnu tīkls • viens no izplatītākajiem izmantošanas variantiem web-lapās. Pie tāda moduļu tīkla tiek izmantotas divas kolonnas — viena ir atvēlēta galvenajam tekstam, bet otrā tiek izmantota navigācijai un citai derīgai informācijai

24. Trīskolonnu tīkls • šie tīkli bieži pielietojami galvenajās web-lapu lapās, kur vienlaikus lietotājam vajag parādīt lielu daudzumu iespēju, kuras viņš atklās šajā web-lapā. Tāpat trīskolonnu tīkls tiek izmantots uz iekšējām lapām, ja divās kolonnās atšķirīgas informācijas izvietošanai jau nepietiek vietas

25. Tabulu salikšana • Tabulu priekšrocības • Viegla kolonnu izveidošana • „gumijas” maketa realizācijas iespēja • Attēlu „līmēšana” tabulā • Fona attēlu izmantošana tabulu šūnās • Vairāk universāls kods dažādu pārlūkprogrammu versijām

26. Tabulu salikšana • Tabulu trūkumi • Ilga ielāde • Masīvs kods • Slikta indeksācija ar meklētājiem • Nav satura un noformējuma sadalījuma • Standartu neatbilstība

27. Tabulu salikšana • Tabulu izmantošana dizaina salikšanai • tabulas labi piestāv dažos apstākļos, kuri ir aprakstīti tālāk. • Kolonnu augstumam jābūt vienādam • Maketam ir jāaizņem viss pārlūkprogrammas augstums, neatkarīgi no informācijas apjoma • Nav laika sarežģītai dizaina salikšanai

28. Makets no divām kolonnām • Divikolonnu moduļu tīkls pietiekami bieži tiek izmantots web-lapās, pie tam parasti vienā kolonnā tiek ievietots pamatmateriāls (piem., raksta teksts), bet otrajā — web-lapas saites uz nodalījumiem un cita informācija. Tāda maketa radīšanai tabulas pietiekami ērtas — katra šūna kļūst par atsevišķu kolonnu, kas ļauj viegli regulēt dokumenta attēlošanas atšķirīgus parametrus.

29. Kolonnu platuma uzdošana • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><body><table width="100%" cellspacing="0" cellpadding="5"><tr> <td width="200" valign="top">Pirmā kolonna</td><tdvalign="top">Labā kolonna</td></tr></table></body></html>

30. stila izmantošana • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><styletype="text/css">#maket {width: 100%; /* Visas tabulas platums procentos */}#maket TD {vertical-align: top; /* Vertikālais izlīdzinājums šūnās */}TD#leftcol {width: 200px; /* Kreisās kolonnas platums pikseļos */}</style></head><body><table cellspacing="0" cellpadding="0" id="maket"><tr> <tdid="leftcol">Kreisā kolonna</td><td>Labā kolonna</td></tr></table></body></html>

31. Lauki iekš kolonnām • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><styletype="text/css">#leftcol {padding-right: 10px; /* Laukums pa labi no teksta */vertical-align: top; /* Izlīdzināšana no augšējās šūnu malas */}</style></head><body><table width="100%" cellspacing="0" cellpadding="0"><tr> <td width="200" id="leftcol">Kreisā kolonna</td><td>Labā kolonna</td></tr></table></body></html>

32. Lauki šūnās • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><styletype="text/css">#maket TD {padding: 5px; /* Lauki apkārt šūnu satura */}</style></head><body><table width="100%" cellspacing="0" id="maket"><tr> <td width="200" valign="top" id="leftcol">Kreisā kolonna</td><tdvalign="top">Labā kolonna</td></tr></table></body></html>

33. Kolonnu fona krāsa • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><styletype="text/css">#maket {width: 100%; /* Visas tabulas platums */}TD {vertical-align: top; /* Vertikāla izlīdzināšana šūnās */padding: 5px; /* Lauki apkārs šūnām */}TD#leftcol {width: 200px; /* Kreisās kolonnas platums */background: #ccc; /* Kreisās kolonnas fona krāsa */}TD#rightcol {background: #fc3; /* Labās kolonnas fona krāsa */}</style></head><body><table cellspacing="0" id="maket"><tr> <tdid="leftcol">Kreisā kolonna</td><tdid="rightcol">Labā kolonna</td></tr></table></body></html>

34. Kolonnu sadalītājs • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><styletype="text/css">#maket {width: 100%; /* Visas tabulas platums */}TD {vertical-align: top; /* Vertikāla šūnu izlīdzināšana */padding: 5px; /* Lauki apkārt šūnām */}TD#leftcol {width: 200px; /* Kreisās kolonnas platums */background: #ccc; /* Kreisās kolonnas fona krāsa */border: 1px solid #000; /* Robežlīnijas parametri */}TD#rightcol {background: #fc3; /* Labās kolonnas fona krāsa */border: 1px solid #000; /* Robežlīnijas parametri */}#spacer {width: 10px /* Attālums starp kolonnām */}</style></head><body><table cellspacing="0" id="maket"><tr> <tdid="leftcol">Kreisā kolonna</td><tdid="spacer"></td><tdid="rightcol">Labā kolonna</td></tr></table></body></html>

35. Līnija starp kolonnām • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><styletype="text/css">#maket {width: 100%; /* Visas tabulas platums */}TD {vertical-align: top; /* Vertikāla šūnu izlīdzināšana */padding: 5px; /* Lauki apkart šūnām */}TD#leftcol {width: 100px; /* Kreisās kolonnas platums */background: #ccc; /* Kreisās kolonnas fona krāsa */border-right: 1px dashed #000; /* Līnijas parametri */}TD#rightcol {background: #fc3; /* Labās kolonnas fona krāsa */}</style></head><body><table cellspacing="0" id="maket"><tr> <tdid="leftcol">Kreisā kolonna</td><tdid="rightcol">Labā kolonna</td></tr></table></body></html>

36. Makets no trijām kolonnām • Triju kolonnu izmantošana uz web-lapas lapām ir atkarīga no informācijas daudzuma, kuru nepieciešams parādīt apmeklētājam. Parasti viena kolonna, kas ir pati platākā, tiek atdota pamatmateriāla tekstam, piemēram , rakstiem, bet pārējās kolonnas tiek pielietotas saitēm, reklāmai, sludinājumiem u.t.t.

37. Kolonnas platums punktos • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><styletype="text/css">TD {vertical-align: top; /* Izlīdzināšana no šūnu augšējās malas */}</style></head><body><table width="750" cellpadding="5" cellspacing="0"><tr><td width="150">Kolonna 1</td><td width="400">Kolonna 2</td><td width="200"> Kolonna 3</td></tr></table> • </body> • </html>

38. Kolonnas platums procentos • Pie «gumijas» maketa tabulas platums ir uzstādāms procentos atkarībā no pārlūkprogrammas loga platuma un, tādējādi, tieši atkarīgs no tā. Šeit ir iespējami divi varianti: • visu šūnu platums ir uzdots procentos; • procentu un punktu savienojums, kad vienu šūnu platums ir uzstādāms procentos, bet citu — punktos

39. Kolonnas platums procentos • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><styletype="text/css">TD {vertical-align: top; /* Izlīdzināšana no šūnu augšējās malas */}#col1 {width: 20%; /* Pirmās kolonnas platums */background: #fc0; /* Pirmās kolonnas fona krāsa */}#col2 {width: 40%; /* Otrās kolonnas platums */background: #f0f0f0; /* Otrās kolonnas fona krāsa */}#col3 {width: 40%; /* Trešās kolonnas platums */background: #fc0; /* Trešās kolonnas fona krāsa */}</style></head><body><table width="90%" cellpadding="5" cellspacing="0" align="center"><tr><td id="col1">Kolonna 1</td><td id="col2">Kolonna 2</td><td id="col3">Kolonna 3</td></tr></table></body></html>

40. Kolonnu platums procentos un punktos • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><styletype="text/css">TABLE {width: 100%; /* Tabulas platums */}TD {vertical-align: top; /* Izlīdzināšana no šūnu augšējās malas */}#col1 {width: 150px; /* Pirmās kolonnas platums */background: #fc0; /* Pirmās kolonnas fona krāsa */}#col2 {background: #afccdb; /* Otrās kolonnas fona krāsa */}#col3 {width: 200px; /* Trešās kolonnas platums */background: #fc0; /* Trešās kolonnas fona krāsa */}</style></head><body><table cellpadding="5" cellspacing="0"><tr><td id="col1">Kolonna 1</td><td id="col2">Kolonna 2</td><td id="col3">Kolonna 3</td></tr></table></body></html>

41. Ieliktas tabulas • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><styletype="text/css">TABLE {width: 100%; /* Tabulas platums */}TD {vertical-align: top; /* Izlīdzināšana no šūnu augšējās malas */}#col1 {width: 150px; /* kolonnas platums */background: #fc0; /* Pirmās kolonnas fona krāsa */}#col2 {width: 60%;background: #afccdb; /* Otrās kolonnas fona krāsa */}#col3 {width: 40%; /* Trešās kolonnas platums */background: #fc0; /* Trešās kolonnas fona krāsa */}#col1, #col2, #col3 {padding: 5px; /* Lauki apkārt tekstam */}</style></head><body><table cellpadding="0" cellspacing="0"><tr><td id="col1">Kolonna 1</td><td> <table cellpadding="0" cellspacing="0">  <tr>   <td id="col2">Kolonna 2</td>   <td id="col3">Kolonna 3</td>  </tr> </table></td></tr></table></body></html>

42. Tēmas patstāvīgai apgūšanai • Web-lapas fons • fona attēla pievienošana • attēla atkārtojamība • Attēla pievienošana tekstam • attēli tekstā • attēli visa maketa platumā • Elementu taisnošana • centrēšana pēc vertikāles • iztaisnojums pēc horizontāles • formu elementu iztaisnojums • attēlu griešana un salīmēšana • Tabulu pielietojums