Cynlluniau Di-dāp Agor Blaenau Dylunio Newydd
Mae yna lawer o resymau i beidio â defnyddio tablau ar gyfer y cynllun . Un o'r rhesymau mwyaf cyffredin y mae pobl yn eu rhoi i'w parhau i eu defnyddio yw ei bod hi'n anodd gwneud cynllun gyda CSS. Er bod sgriptio CSS yn golygu cromlin ddysgu, pan fyddwch chi'n deall sut i wneud cynllun CSS, efallai y byddwch chi'n synnu pa mor hawdd y gall fod. Ac unwaith y byddwch chi'n dysgu, byddwch wedi mynd i'r afael â'r ail reswm mwyaf cyffredin gan bobl sy'n ei roi i beidio â defnyddio CSS- "Mae'n gyflymach i ysgrifennu tablau." Mae'n gyflymach oherwydd eich bod chi'n gwybod tablau, ond ar ôl i chi ddysgu CSS, efallai eich bod chi mor gyflym gyda hynny.
Cymorth Porwr i Safleoedd CSS
Mae gosod CSS yn cael ei gefnogi'n dda ym mhob porwr modern . Oni bai eich bod yn adeiladu safle ar gyfer Netscape 4 neu Internet Explorer 4, ni ddylai eich darllenwyr gael unrhyw drafferth yn edrych ar eich tudalennau gwe sydd wedi'u gosod ar CSS.
Ailgychwyn Sut rydych chi'n Adeiladu Tudalen
Pan fyddwch yn adeiladu safle gan ddefnyddio tablau, mae'n rhaid i chi feddwl mewn fformat tabl . Mewn geiriau eraill, rydych chi'n meddwl o ran celloedd a rhesi a cholofnau. Bydd eich tudalennau Gwe yn adlewyrchu'r dull hwn. Pan fyddwch yn symud i ddyluniad gosod CSS, byddwch yn dechrau meddwl am eich tudalennau o ran y cynnwys, oherwydd gellir gosod y cynnwys yn unrhyw le yr hoffech chi yn y cynllun-hyd yn oed yn haen ar ben cynnwys arall.
Mae gan wahanol wefannau strwythurau gwahanol. I adeiladu tudalen effeithiol, gwerthuso strwythur unrhyw dudalen benodol cyn i chi aseinio cynnwys iddo. Gallai tudalen enghreifftiol gynnwys pum adran wahanol:
- Pennawd . Cartref i'r hysbyseb faner, enw'r safle, dolenni mordwyo, teitl erthygl ac yn ogystal ag ychydig o bethau eraill.
- Y golofn dde . Dyma ochr dde'r dudalen gyda'r blwch chwilio, hysbysebion, blychau fideo, ac ardaloedd siopa.
- Cynnwys . Testun erthygl, post blog neu siopa siopa-y cig-a-datws y dudalen.
- Hysbysebion Inline Mae'r hysbysebion yn unol â'r cynnwys.
- Troedyn . Y llywio gwaelod, gwybodaeth yr awdur, gwybodaeth hawlfraint, hysbysebion baner is, a chysylltiadau cysylltiedig.
Yn hytrach na gosod y pum elfen honno mewn tabl, defnyddiwch elfennau adranio HTML5 i ddiffinio gwahanol rannau'r cynnwys, ac yna defnyddiwch leoliad CSS i osod yr elfennau cynnwys ar y dudalen.
Adnabod Adrannau'ch Cynnwys
Ar ôl i chi ddiffinio gwahanol feysydd cynnwys eich safle, mae angen ichi eu hysgrifennu i'ch HTML. Er y gallwch, yn gyffredinol, osod eich adrannau mewn unrhyw drefn, mae'n syniad da gosod rhannau pwysicaf eich tudalen yn gyntaf. Bydd yr ymagwedd hon yn helpu gydag optimeiddio chwiliad, hefyd.
I ddangos lleoliad, edrychwch ar dudalen gyda thair colofn ond dim pennawd neu droednod. Gallwch ddefnyddio lleoliad i greu unrhyw fath o gynllun rydych chi'n ei hoffi.
Ar gyfer cynllun tri-golofn, diffiniwch dair adran: y golofn chwith, y golofn dde, a'r cynnwys.
Caiff yr adrannau hyn eu gosod ar unwaith gan ddefnyddio elfen ARTICLE ar gyfer y cynnwys a dau elfen ADRAN ar gyfer y ddwy golofn. Bydd gan bopeth briodoldeb hefyd yn ei nodi. Pan fyddwch chi'n defnyddio'r briodwedd id, rhaid ichi roi enw unigryw ar gyfer pob id.
Lleoliad y Cynnwys
Gan ddefnyddio CSS, diffiniwch y sefyllfa ar gyfer eich elfennau ID'd. Cadw gwybodaeth eich sefyllfa mewn alwad arddull fel hyn:
#entent {
}
Bydd y cynnwys o fewn yr elfennau hyn yn cymryd cymaint o le ag y bo modd, sef 100 y cant o led y lleoliad presennol neu'r dudalen. Er mwyn effeithio ar leoliad adran heb ei orfodi i led sefydlog, newid y padiau neu'r eiddo ymylol.
Ar gyfer y cynllun hwn, gosodwch y ddwy golofn i led sefydlog ac yna gosodwch eu sefyllfa yn llwyr, fel na fyddent yn cael eu heffeithio gan ble maent i'w canfod yn yr HTML.
# golofn chwith {
sefyllfa: absoliwt;
chwith: 0;
lled: 150px;
ymyl-chwith: 10px;
ymyl-top: 20px;
lliw: # 000000;
padio: 3px;
}
# colofn dde {
sefyllfa: absoliwt;
chwith: 80%;
top: 20px;
lled: 140px;
padio-chwith: 10px;
z-mynegai: 3;
lliw: # 000000;
padio: 3px;
}
Yna ar gyfer yr ardal gynnwys, gosodwch yr ymylon ar y dde a'r chwith fel na fyddai'r cynnwys yn gorgyffwrdd â'r ddau golofn y tu allan.
#entent {
top: 0px;
ymyl: 0px 25% 0 165px;
padio: 3px;
lliw: # 000000;
}
Mae diffinio'ch tudalen gan ddefnyddio CSS yn hytrach na thabl HTML yn gofyn am sgiliau mwy technegol, ond mae'r tâl yn dilyn o ddyluniadau mwy hyblyg ac ymatebol ac yn fwy rhwydd wrth wneud addasiadau strwythurol i'ch tudalen yn ddiweddarach.