260 likes | 432 Views
Web aplikācija tehnoloģijas. Tabulu salikšana. Moduļu tīkli.
E N D
Web aplikācija tehnoloģijas Tabulu salikšana
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.
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.
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.
Vienkolonnas tīkls • vienas kolonnas teksts visbiežāk sastopams akadēmiskā dizainā, pie fiksētā maketa un liela teksta publikācijās.
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
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
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
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
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
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.
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>
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>
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>
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>
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>
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>
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>
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.
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>
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
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>
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>
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>