Iga inimene, kes on kunagi soovinud oma projekti jaoks veebisaiti luua, on seisnud silmitsi selle kirjutamise probleemiga. Mitte igaüks ei taha maksta ja mitte iga eelarve ei saa seda endale lubada, selle eest, et professionaalsed veebimeistrid saidi loovad, nii et enamik oma teed alustavaid saidi loojaid hakkab õppima paigutusmeetodeid. Sest kvaliteetsest sisust ja saidi majutamiseks ostetud serveriruumi olemasolust selle eksisteerimiseks ei piisa. Kõigepe alt peate looma lehe "skeleti".
Mis on tabelipaigutus html-is?
Sellele küsimusele vastamiseks on vaja määratleda paigutuse mõiste.
Paigutus on html-lehe struktuuri loomise protsess, asetades sellele peamised elemendid.
Tabelipaigutus on vastav alt nähtamatu kontuuriga tabeli kasutamine lehe struktuurina. See tähendab, et saidi leht on teatud arvu veergude ja ridadega tabel, kus igas lahtris asub teatud element.
html paigutused-tabelipaigutusega loodud dokumente kasutatakse valdaval enamusel saitidel ja neid on kasutatud üle 10 aasta. Selle põhjuseks on struktuuri moodustamise ja täitmise lihtsus, aga ka sellise märgistuse mitmekülgsus, mida kuvatakse erinevates brauserites samamoodi.
Veebisaidi loomise esimene etapp
Tabelipaigutus algab märgistuse loomisega: lehe html-kood kirjutatakse tabeliga, mis koosneb teatud arvust veergudest ja ridadest.
HTML-vormingus tabeli loomiseks kasutatakse spetsiaalset silti
selle avamine. See kasutab silte
stringi loomiseks,
tabeli päise loomiseks ja
veeru loomiseks. Veerud ja pealkirjad luuakse reasildi sees ning igasse rida saab luua suvalise arvu veerge.
Esimene tabel
Esimene veerg
Teine veerg
Tabeli loomise võimalus võimaldab teostada HTML-tabeli lehekülje paigutust, seega peate välja selgitama, millised atribuudid on loomise siltidel ja kuidas neid kasutada.
Tabeli siltide peamised atribuudid
Märgend
See silt, mis on tabeli avamise sümbol, piirab selle struktuuri, määrab selle asukoha lehel ja kõigi lahtrite üldise välimuse tänu atribuutidele:
Joondamise atribuuti kasutatakse tabeli asukoha joondamiseks, see võib võtta väärtusi "vasak", "keskel" ja "paremale". See on vasakule, keskele ja paremale joondamine.serv vastav alt.
Atribuut background võimaldab määrata tabelile sellele viidates taustapildi.
Bgcolor määrab tabeli taustavärvi, väärtuseks võib olla mis tahes värvi nimi või kood.
Ääris määrab tabeli ääriste paksuse ja määratakse pikslites.
Bordercolor määrab äärise värvi.
Cellpadding võimaldab teil määrata teksti ja lahtri ääriste vahet.
Atribuut Frame käsib brauseril kuvada tabeli äärised, võttes väärtused tühised, piirid, ülal, all, hsides, vsides, rhs, lhs. Mis vastav alt tähendab, et äärist ei kuvata, raami ümber laua kuvatakse, nähtavaks tehakse ainult ülemine ääris või ainult alumine, ei peideta ainult horisontaalseid või ainult vertikaalseid, kuvatakse ainult parem- või ainult vasak rida.
Reeglite atribuut sisaldab teavet selle kohta, milliseid lahtripiire kuvada. Väärtus none peidab kõik piirid, kõik näitab, et need on kuvatud, veerud määravad ridade asukoha veergude vahel ja read täpsustavad ridade vahel.
Märgend
See silt loob tabelirea ja vastutab selle välimuse eest. Sellel on väike komplekt atribuute: joondus teksti joondamiseks reas, bgcolor määrab lahtri taustavärvi, bordercolor määrab rea ümber oleva äärise värvi.
Sildid
ja
Neil kahel sildil on ligikaudu samad funktsioonid: nad loovad järjest lahtri ja määravad selle kuvamise tingimused atribuutide abil:
Abbr võimaldab teil lühid alt kommenteeridalahter.
Align vastutab sisu joondamise eest kolme horisontaalse asendi suhtes.
Tausta kasutatakse lahtri tausta täitmiseks konkreetse pildiga.
Bgvärvi kasutatakse lahtri taustavärvi määramiseks.
Ja piirivärv määrab lahtri ääriste värvi.
Kõrgust kasutatakse lahtri kõrguse määramiseks.
Reavahede vältimiseks pole mähistamist vaja.
Kaal määrab lahtri laiuse.
HTML-saidi paigutuse näide
Kui olete html-i tabelitega töötamise teooriat uurinud, võite alustada oma lehe märgistuse loomist. Selleks peaksite otsustama, millised funktsionaalsed plokid teie saidil asuvad. See võib olla päis, jalus, sisuplokk, külgplokid. Html-tabelipaigutuse korral peate looma ainult tabeli.
Tegelikult saate selles etapis luua täiesti valmis paigutuse, määrates iga elemendi välimuse ülalkirjeldatud siltide omaduste kaudu. Ja siis tuleb tabeli kood kopeerida ainult saidi igale uuele lehele, et sellel oleks üks stiil. Kuid see on üsna ebamugav, kuna lehe stiil salvestatakse ainult selle faili, mis tähendab, et kui teil on vaja midagi muuta, peate igast dokumendist vajaliku stiiliatribuudi leidmiseks ja selle väärtust muutma. Kuid on võimalus seda protsessi optimeerida, kasutades CSS-i tabelipaigutusmeetodit. Seetõttu ei ole html-tabeli loomise ajal vaja dokumendis stiiliatribuute kasutada. Ainus atribuut, mida tuleb rakendada, onsee on ID, mis võimaldab teil pääseda juurde ainult üksiku elemendi stiilile. See on üldine atribuut, mis kehtib mis tahes sildi kohta. See aktsepteerib väärtusi, mis koosnevad ladina tähtedest ja sümbolitest.
Tabeli loomisel peate määrama sildi ID
, näiteks väärtusega “dokument”. Seejärel lahtri jaoks (märgend
või
), mis on reserveeritud päise jaoks, võib id atribuut võtta väärtuse "header". Vasakpoolse menüü lahtrit võib nimetada "left_side" ja parempoolset "right_side". Oletame, et sisuplokki nimetatakse "sisuks" ja saidi jalust "jaluseks".
Nii kuvatakse lehte brauseris.
Teine paigutusetapp
Leheobjektide välimuse juhtimiseks peab loodud dokument olema ühendatud CSS-stiilifailiga. Selleks tuleb luua CSS-dokument, anda sellele nimi, näiteks mystyle.css. Ja nüüd peate lehe põhidokumendi sildi sisse kirjutama järgmise:
Pärast seda saate failis mystyle.css elementide kuvamise tingimuste seadmisega muuta lehe välimust vastav alt oma soovile. Näiteks atribuut color määrab teksti värvi ja atribuut background määrab, kuidas elemendi taust välja näeb. Seal on umbes 20 põhiomadust, mille abil saate muuta elementide asukohta, suurust, värvi ja valikut. Seetõttu pole selline paigutus kuigi keeruline ja seda saab teha isegi algaja ning kui loominguline ja huvitav see välja tuleb, on teie enda otsustada.
CSS-paigutus
Nagu teate, valib enamik veebihalduritest HTML-i tabeli- ja plokipaigutuse vahel viimase. Selle põhjuseks on eelkõige asjaolu, et tabelipaigutuse kood osutub väga tülikaks ja see aeglustab saidi laadimist. Koodi maht on seletatav tabelimärgendite keeruka struktuuri olemasoluga (3 taset:
siis
ja alles pärast
.) See asjaolu tühistab isegi sellised ilmsed tabelipaigutuse eelised nagu elementide selge hierarhia, fikseeritud asukoht, brauseritevaheline ühilduvus ja paigutuse lihtsus. Kuid sellele probleemile on lahendus CSS (Cascading Style Sheets) keeles.
Tabelipaigutust CSS-i kaudu saab rakendada, kui näiteks dokument sisaldab ainult üksikuid märgendisse lisatud elemente, mis ei ole tabel. Koodi optimeerimiseks saate luua arvutustabeli dokumente otse stiili atribuutide kaudu. Selleks kasutatakse kuva atribuuti, mis ütleb brauserile, kuidas seda või teist elementi dokumendis tajuda. Näiteks kui väärtuseks on tabel, siis kuvatakse elementi tabelina ja kui tabel-rida või tabel-lahter, siis vastav alt tabeli rida ja lahter. Seega pole HTML-komplektis vaja tabelimärgendeid kasutada.
Reagatiivne tabelipaigutus
Reagatiivne paigutus hõlmab saidi kuva muutmist erinevatel ekraanidel, olenev alt kuvari eraldusvõimest ja suurusest. See on arendajale üsna keeruline ülesanne, kuna nõuab hoolikat arvutusi ja paljudel platvormidel testimist. Siiski iga populaarnekaasaegset ressurssi ei saa ette kujutada ilma erinevate seadmete kohandamiseta. Ja selle probleemi lahendamiseks kasutatakse CSS-i.
Esiteks, selleks, et saidi stiil oleks kõigis brauserites sama, peate lähtestama kõik brauseri kuvastandardid, kasutades CSS-i lähtestamist, et vabaneda mittestandardsetest taandest, valikutest ja muust.
Teiseks peate ekraani eraldusvõime kohta teabe saamiseks ja kohandamise rakendamiseks vastu võtma meediumipäringuid ressursiga ühendavatest seadmetest. Selleks kasutatakse peamiselt min-width, max-width ja kuva omadusi. Esimesed kaks määravad ploki laienduse piirid ja kuva omadus, mille väärtuseks on määratud ükski, võimaldab peita suuri ja mittefunktsionaalseid plokke madala eraldusvõimega kuvadel.
Näited
Ükskõik, millist meetodit arendaja märgistuse loomiseks kasutab, saavad nad selle CSS-iga kujundada nii ainulaadselt ja esteetiliselt, kui oskavad ette kujutada. Allpool on näited HTML-tabeli paigutusest.
Veel üks näide.
Ja saate selle väljastada nii.
Tegelikult pole vahet, et tabelipaigutus ei näe enam välja kaasaegne ja asjakohane – seda saab hõlpsasti kompenseerida disaini loovuse ja kirjaoskusega.
