1 / 35

Slāņu salikšana

Web aplikāciju tehnoloģijas. Slāņu salikšana. Bāzes jēdzieni. Slānis — tas ir web-lapas elements, kas ir izveidots ar taga <DIV> vai <SPAN> palīdzību, kuram tiek pielietots stila noformējums.

steven-hartman
Download Presentation

Slāņu 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āciju tehnoloģijas Slāņu salikšana

  2. Bāzes jēdzieni • Slānis — tas ir web-lapas elements, kas ir izveidots ar taga <DIV> vai <SPAN> palīdzību, kuram tiek pielietots stila noformējums. • Tādējādi, dizaina salikšana ar slāņu palīdzību iekļaujas taga <DIV> un stilu konstruktīvās izmantošanas.

  3. Satura un noformējuma sadalīšana • HTML kodam ir jāsatur tikai apzīmējuma un loģiskās formatēšanas tagus, bet jebkurš noformējums tiek iznests stilos ārpus koda robežām. Tāda pieeja ļauj neatkarīgi pārvaldīt lapas elementu izskatu un tās saturu. Pateicoties tam ar web-lapu var strādāt vairāki cilvēki, pie tam katrs izpilda savas funkcijas neatkarīgi no citiem. Dizainers, salikšanas dizainers un programmētājs strādā pār saviem uzdevumiem neatkarīgi viens no otra, samazinot web-lapas izstrādāšanas laiku.

  4. Taga DIV aktīva izmantošana • Slāņu izmantošanā būtiska nozīme tiek piešķirta universālam tagam <DIV>, kurš izpilda funkciju daudzumu. • Pateicoties šim tagam HTML-kods tiek sadalīts skaidros pārskatāmos blokos, tāpēc tāda dizaina salikšana saucas arī par bloku dizaina salikšanu. pie tam kods sanāk kompaktāks, nekā pie tabulu dizaina salikšana, un arī meklējumu sistēmas to indeksē labāk.

  5. Tabulas tiek pielietotas tikai tabulu datu priekšstatam • Pie dizaina salikšanas ar slāņu palīdzību, protams, arī tiek izmantotas tabulas, bet tikai tajos gadījumos, kad tās ir vajadzīgas, piemēram, skaitļu un citu tabulu datu pārskatāmam attēlojumam. Variants, kad no tabulām vispār atsakās, ir nelietderīgs un, vēl jo vairāk, kaitīgs.

  6. Dizaina salikšanas ar slāņiem īpatnības • Diemžēl, tabulu dizaina salikšana uzlika pastipru nospiedumu uz web-lapu salikšanas manieri.

  7. Lapa, kas ir izveidota ar tabulu palīdzību • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><body><table width="100%" height="100%" cellpadding="5" cellspacing="0"><tr> <td height="60" colspan="2" bgcolor="#666699"><h1>Lapas</h1></td></tr><tr> <td width="25%" bgcolor="#990033" valign="top">Kreisā kolona</td><td bgcolor="#999966" valign="top">Labā kolona</td></tr><tr> <td height="30" colspan="2" bgcolor="#cccccc">Lapas “pagrabs”</td></tr></table></body></html>

  8. Slāņu augstums ir ierobežots ar kontenta augstumu • Tabulā kaimiņšūnas ir saistītas, tādēļ tiem ir viens augstums, neatkarīgi no informācijas apjoma. Tas ir labi redzams, ja nokrāsot šūnu fonu ar dažādu krāsu. slāņi gan kaut kādā veidā ir neatkarīgi viens no otra, tādēļ slāņa augstums tiek noteikts ar viņa saturu. pie tam dokumenta izskats atšķirsies no viņa tabulu brāļa

  9. Bloka elementi • Par bloka saucas elements, kurš ir attēlojams web-lapā taisnstūra veidā. Tāds elements aizņem visu pieejamo platumu, elementa augstums tiek noteikts ar viņa saturu, un viņš vienmēr iesākas no jaunas rindas. Pie bloka elementiem attiecas <DIV>, <H1> un <P> konteineri.

  10. Bloka elementu platums • Pēc noklusēšanas bloka platums ir aprēķināms automātiski un aizņem visu pieejamo virsmu. • Dažas pārlūkprogrammas pietiekami brīvi traktē platuma jēdzienu, kaut gan arī CSS specifikācijā skaidri norādīts, ka platums tiek aprēķināts no sekojošo parametru summas: paša bloka (width) platuma, atkāpju (margin), lauku (padding) un arī robežu (border).

  11. Bloka elementu platums • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type"content="text/html; charset=windows-1251"><styletype="text/css">DIV {width: 300px; /* Ширинаслоя */margin: 7px; /* Значениеотступов */padding: 10px; /* Полявокругтекста */border: 4px solidblack; /* Параметрыграницы */background: #fc0; /* Цветфона */}</style></head><body><div>Loremipsumdolor sit amet...</div></body></html>

  12. Bloka elementu platums • Dotā piemēra rezultātā saņemsim slāņi ar platumam 342 punkti. Uz zīm. parādīts, no kā rodas slāņa platums.

  13. slāņa platums procentos • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type"content="text/html; charset=windows-1251"><styletype="text/css">#layer1 {width: 100%; /* Ширинапервогослоя */padding: 10px; /* Полявокругтекста */background: #fc0; /* Цветфона */}#layer2 {width: 100%; /* Ширинавторогослоя */background: #cc0; /* Цветфона */}#layer2 P {padding: 10px; /* Полявокругпараграфа */}#layer3 {background: #3ca; /* Цветфонатретьегослоя */padding: 10px; /* Полявокругтекста */}</style></head><body><div id="layer1">Loremipsumdolor sit amet...</div><div id="layer2"><p>Loremipsumdolor sit amet...</p></div><div id="layer3">Loremipsumdolor sit amet...</div></body></html>

  14. slāņa platums procentos

  15. Fona krāsa • Elementa fona krāsu vienkāršāk par visu uzstādīt caur universālu background parametru. pie tam ar fonu tiek aizkrāsots apgabals, kurš tiek noteikts ar width, height un padding atribūtu nozīmi

  16. Robežas • Starpības dēļ pārlūkprogrammu pieejā formējot bloka elementus ir novērojama arī dažādība pie robežu attēlojuma

  17. punktēts rāmītis • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type"content="text/html; charset=windows-1251"><styletype="text/css">#layer1 {width: 300px; /* Ширинаслоя */padding: 10px; /* Полявокругтекста */background: #fc0; /* Цветфона */border: 5px dashedblack;/* Параметрыграницы */}</style></head><body><div id="layer1">Loremipsumdolor sit amet...</div></body></html>

  18. Fiksēts dizains. Pamati • Termins «fiksētais dizains» tiek izmantots lapas maketa apzīmējumam, kurš top uz uzdotās slāņu bāzes platuma. Platuma izvēle ir atkarīga no lietotāju monitora izšķirtspējas. • Pie fiksētā dizaina bloks ar materiālu izvietojas parasti pie kreisās malas vai pa ekrāna centru. Pēdējais variants vēlamākais, jo tad apkārt nav tik ir manāmi plati lauki pie lielām monitora izšķirtspējām

  19. Fiksēts dizains. Pamati • 1 — saita virsraksts; 2 — kreisa kārta, parasti satur navigācijas elementus; 3 — laba kārta, satur informatīvu lapas piepildījumu; 4 — «pagrabs», web-lapas pati apakša, kurā parasti izvieto kontaktu informāciju un atšķirīgas pogas.

  20. Fiksētais dizains. Float parametrs • Aplūkosim, kā tiek novietot blakus pa horizontāli divi un vairāki slāņi . pēc noklusēšanas, taga <DIV> izmantošana slāņa izveidošanai, automātiski izveido arī rindas pārnesumu pēc viņa, tādēļ daži slāņi kas iet pēc kārtas, sakārtojas vertikāli. Mūs gan interesē kā izdarīt to pašu, bet horizontāli, lai varētu radīt divas kolonnas. Dotā uzdevuma risināšanai ir divas pieejas: pirmā ir float parametra izmantošana, otrā — elementu pozicionēšana.

  21. Float parametra izmantošana • Lai novietotu divus slāņus blakus viens otram horizontāli, izmantosim stila float parametru ar left nozīmi. Šis elements nosaka, ka slāņi nepieciešams izlīdzināt pa kreisu malu un aptecināt to pa labo malu. Tādējādi, blakus esošais otrais slāņis būs pielikts pie pirmā pa labi. • Teorētiski, float parametru pietiek uzdot tikai vienam no diviem slāniem. Tomēr pārlūkprogramma Internet Explorer šajā gadījumā starp slāņiem pieliek nelielu atstarpi, kas ne vienmēr ieteicams, bet Firefox saliek slāņus vien uz otra. Lai viss izskatītos tieši tā, kā gribas, float vajag norādīt visiem slāņiem

  22. Float parametra izmantošana • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><styletype="text/css"> #leftcol { /* Леваяколонка*/ width: 200px; /* Ширинаслоя */ float: left; /* Состыковка с соседнимслоем */ color: white; /* Цветтекста*/ padding: 10px; /* Полявокругтекста */ background: #008000 /* Цветфоналевойколонки */ }#rightcol { /* Праваяколонка*/ width: 550px; /* Ширинаслоя */ float: left; /* Состыковка с соседнимслоем */ padding: 10px; /* Полявокругсодержимого */ background: #e0e0e0; /* Цветфонаправойколонки */ } </style></head> <body>  <divid="leftcol">...</div> <divid="rightcol">...</div> </body></html>

  23. Float parametra izmantošana

  24. Margin parametra pielietojums, divikolonnu maketu radīšanai • Atkal izmantosim float parametru, lai novietotu kolonnas blakus, bet pieliksim viņu tikai pirmajam slāņim. Pie tam otrā slāņa stilā vajag uzstādīt margin-left parametru, kura vērtība ir vienāda ar kreisās kolonnas platumam. Bet šeit ir viena viltība — labās kolonnas platumu uzdot nedrīkst, jo tas novedīs pie bloku pārnesuma pārlūkprogrammā Internet Explorer samazinot brauzera logu. Un tieši no tā mēs cenšamies izvairīties. Tādēļ kopīgu maketa platumu uzstādīsim ar vēl viena slāņa palīdzību, nosauksim viņu container, bet pārējos slāņus apmetīsies iekšpus tā. Šajā gadījumā labās kolonnas platumu var neuzdot, jo viņa aizņems visu pieejamu virsmu.

  25. divkolonnu makets • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><styletype="text/css"> #container {width: 750px; /* Общаяширинаколонок */ }#leftcol { /* Леваяколонка*/ width: 200px; /* Ширинаслоя */ float: left; /* Состыковка с соседнимслоем */ color: white; /* Цветтекста*/ background: #008000 /* Цветфоналевойколонки */ }#rightcol { /* Праваяколонка*/ background: #e0e0e0; /* Цветфонаправойколонки */ margin-left: 200px; /* Отступслева */ } p {padding: 10px; /* Полявокругтекста */ margin: 0em /* Убираемотступы */ }</style></head> <body> <divid="container"> <divid="leftcol"><p>...</p></div> <divid="rightcol"><p>...</p></div> </div></body></html>

  26. parametra clear izmantošana • Ja apakšā pēc kolonnām paredzams izvietot vēl vienu slāņi, tad viņam vajag izmantot stila clear parametru. Svarīgākais ir tas, ka pārlūkprogrammas novieto šo apakšguļošo kārtu dažādi, tādēļ vajag atcelt apteces darbību, ko clear tieši arī dara

  27. Parametra clear izmantošana • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><body> <divid="container"> <divid="leftcol">...</div> <divid="rightcol">...</div> </div><divstyle="clear: left">...</div></body></html>

  28. Gumijas dizains. Divikolonnu makets • Par «gumijas dizainu» sauksim tādu web-lapas struktūru, kura automātiski pielāgojas lietotāja pārlūkprogrammas loga noteiktam platumam. Tādam maketam ir dažas priekšrocībām: • tiek izmantots viss pieejams pārlūkprogrammas platums; • lietotājiem ar «maziem» monitoriem nerodas horizontālas pārtīšanas svītra; • «lielu» monitoru lietotāji var papriecāties, kā efektīvi tiek izmantots viss ekrāna laukums, un tātad nauda tika iztērēta monitoram ne velti; • interneta lapas ērti tiek drukātas uz jebkura formāta papīra.

  29. Gumijas dizains. Divikolonnu makets • Starp trūkumiem var atzīmēt dažādu pārlūkprogrammu piekasīšanos pie «gumijas» maketa un kļūdu rašanās liela varbūtība. Sakarā ar šo aug interneta lapu salikšanas sarežģītība.

  30. kolonnu izvietojuma varianti

  31. kods divu kolonnu izveidošanai • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><style type="text/css">BODY {font-family:Verdana, Arial, sans-serif;}#top { background: #e3e8cc; border: solid 1px black;  padding: 15px 0px 15px 10px;  margin-bottom: 15px; font-size: 24px; font-weight:bold; color: black; • }#menu { width: 100px;  background: #e3e8cc; border: solid 1px black;  float: left;  padding: 3px; • }#menu A {font-size: 90%; }#content { background: #e3e8cc; border: solid 1px black;  margin-left: 115px;  margin-bottom: 15px }#bottom { background: #e3e8cc; border: solid 1px black; font-size: 90%;  padding: 3px; }H1 {text-align:center; font-size: 210%; font-family: "TimesNewRoman", Times, serif; font-weight:normal; color: black;  padding: 0px;  margin: 0px; }#content P { font-size: 90%; text-align: justify;  padding: 10px;  margin: 0px }</style></head><body><divid="top">Tīmekļa virsraksts</div><divid="menu"><a href="link1.html">Link 1</a><br><a href="link2.html“> Link 2</a><br><a href="link3.html"> Link 3</a><br><a href="link4.html"> Link 4</a><br></div><divid="content"><h1>Loremipsumdolor sit amet</h1><p>Loremipsumdolor sit amet, consectetueradipiscingelit, seddiemnonummynibheuismodtinciduntutlacreetdoloremagnaaliguameratvolutpat. Utwisisenimadminimveniam, quisnostrudexercitutionullamcorpersuscipitlobortisnislutaliquipexeacommodoconsequat. Duis te feugifacilisi. Duisautemdolorinhendreritinvulputatevelitessemolestieconsequat, vel illumdoloreeufeugiatnullafacilisisatveroerosetaccumsanetiustoodiodignissimquiblanditpraesentluptatumzzrildelenitaugueduisdolore te feugatnullafacilisi.</p><p>Loremipsumdolor sit amet, consectetueradipiscingelit, seddiemnonummynibheuismodtinciduntutlacreetdoloremagnaaliguameratvolutpat. Utwisisenimadminimveniam, quisnostrudexercitutionullamcorpersuscipitlobortisnislutaliquipexeacommodoconsequat.Duis te feugifacilisi. Duisautemdolorinhendreritinvulputatevelitessemolestieconsequat, vel illumdoloreeufeugiatnullafacilisisatveroerosetaccumsanetiustoodiodignissimquiblanditpraesentluptatumzzrildelenitaugueduisdolore te feugatnullafacilisi.</p></div><divid="bottom">Loremipsumdolor sit amet, consectetueradipiscingelit</div></body></html>

  32. kods divu kolonnu izveidošanai

  33. Pozicionēšanas pielietojums • Formējot divikolonnu maketu kreisā vai labā kolonna tiek uzstādīta uzdotajā vietā caur absolūtu pozicionēšanu, bet kaimiņkolonna atbrīvo viņai vietu uz atkāpju pielietojuma rēķina. Labākai saprašanai aplūkosim piemēru, kad kreisajai kolonnai ir uzdots platums 200 punktu, bet tās stāvoklis tiek noteikts no pārlūkprogrammas loga kreisā augšēja stūra.

  34. Pozicionēšanas pielietojums • <style type="text/css">#leftcol { position: absolute;  width: 200px;  left: 0px;  top: 20px;  background: #fc0;}#rightcol { margin-left: 210px;  background: #ccc; • }</style>

  35. divkolonu makets <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><style type="text/css">BODY { padding: 0px; margin: 0px; #leftcol { position: absolute; width: 200px;  left: 0px;  background: #800000; padding: 5px;}#leftcol A {color: white; }#rightcol { position: relative;  margin-left: 200px;  background: #e0e0e0; padding: 10px; }H1 { margin: 0px; }</style></head><body><divid="leftcol"> <a href="link1.html">Link 1</a><br> <a href="link2.html">Link 2</a><br> <a href="link3.html">Link 3</a><br> <a href="link4.html">Link 4</a><br></div><divid="rightcol"><h1>Loremipsumdolor sit amet</h1><p>Loremipsumdolor sit amet, consectetueradipiscingelit, seddiemnonummynibheuismodtinciduntutlacreetdoloremagnaaliguameratvolutpat. Utwisisenimadminimveniam, quisnostrudexercitutionullamcorpersuscipitlobortisnislutaliquipexeacommodoconsequat. Duis te feugifacilisi. Duisautemdolorinhendreritinvulputatevelitessemolestieconsequat, vel illumdoloreeufeugiatnullafacilisisatveroerosetaccumsanetiustoodiodignissimquiblanditpraesentluptatumzzrildelenitaugueduisdolore te feugatnullafacilisi.</p></div></body></html>

More Related