1 / 26

Tabulu salikšana

Web aplikācija tehnoloģijas. Tabulu salikšana. Moduļu tīkli.

ava-harmon
Download Presentation

Tabulu salikšana

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web aplikācija tehnoloģijas Tabulu salikšana

  2. 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.

  3. 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.

  4. Moduļu tīkli

  5. Moduļu tīkli

  6. 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.

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

  8. 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

  9. 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

  10. 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

  11. 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

  12. 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

  13. 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.

  14. 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>

  15. 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>

  16. 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>

  17. 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>

  18. 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>

  19. 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>

  20. 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>

  21. 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.

  22. 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>

  23. 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

  24. 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>

  25. 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>

  26. 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>

More Related