• Dizaino ir programavimo pamokos

     
    Thread Rating:
    • 0 Votes - 0 Average
    • 1
    • 2
    • 3
    • 4
    • 5
    HTML/CSS #2

    Senior Member


    ****
    300

    0
    Post: #1
    RE: HTML/CSS #2
    [center]Taigi šioje pamokoje pasidarysime savo svetainės struktūrą ir priskirsime stilius, kad būtų maloniau dirbti kitose pamokose.[/center]

    [geshi=html4strict]<!DOCTYPE HTML>
    <html>
    <head>
    <title>Mano svetainė</title>
    <link rel='stylesheet' href='stilius.css' type='text/css' media='screen'/>
    </head>

    <body>
    <table width='100%' height='100%'>
    <td width='25%' class='kaire'>

    Kairė

    </td>

    <td width='50%'>

    Centras

    </td>

    <td width='25%' class='desine'>

    Dešinė

    </td>
    </table>
    </body>
    </html>[/geshi]

    <table> - Tai lentelės tagas.

    <table width='100%'> - Tai lentelės ilgis šiuo atveju jis yra nustatytas 100 proc. tai ištems per visą ekraną mūsų lentelę, ir mūsų vartotojai neturės problemų dėl rezoliucijos.

    <table height='100%'> - Tai lentelės aukštis šiuo lentelė plėsis į apačią pagal informacijos kiekį.

    <td> - Mūsų lentelės blokas kuriame rašoma informacija.

    <td width='25%'> - Duodame iš <table> tago 25 procentus ilgio.

    <td class='desine'> - Priskiriame stilių .desine kurį naudosime stilius.css faile.

    <td valign='top'> - Mūsų tekstas visą laiką stovės <td> tago viršuje ir jis bus viršuje o ne vyduryje. Tai atrodys išties geriau.

    [center]stilius.css failas[/center]
    [geshi=css]
    body {
    font-family: Tahoma;
    font-size: 12px;
    background-color: #2d2d2d;
    color: #fff;
    }

    td {
    color: #2d2d2d;
    background-color: #fff;
    padding: 5px;
    }

    td.kaire {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    }

    td.desine {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    }[/geshi]

    body { } - Kaip minėjau mūsų tagas tik stiliaus faile kitaip atvaizduojamas norint pridėti šiam tagui stilių šiuo atveju tai visas mūsų svetainės blokas kuriame nustatomi <body></body> tage šie stiliai prisikirs tam kas yra šiame tage.

    font-family: Tahoma; - Nustatome tekstą, šiuo atveju tai Tahoma.

    font-size: 12px; - Nustatome teksto dydį, šiuo atveju 12 pikselių.

    background-color: #2d2d2d; - Nustatome mūsų viso tago spalvą na nemoku paaiškinti, bet tai nudažomas visas tagas #2d2d2d šia spalva.

    color: #fff; - Nustatome mūsų teksto spalvą šiuo atveju ji bus balta.

    padding: 5px; - Nustatome kiek atstumti tekstą nuo mūsų bloko kraštų, dabar jį atstums po 5 pikselius nuo kiekvieno krašto.

    border-top-left-radius: 5px; - Nustatome kad kampas būtu apvalus viršaus kairiojo kampo.

    border-bottom-left-radius: 5px; - Nustatome kad kampas būtu apvalus apačios kairiojo kampo.

    border-top-right-radius: 5px; - Nustatome kad kampas būtu apvalus viršaus dešiniojo kampo.

    border-bottom-right-radius: 5px; - Nustatome kad kampas būtu apvalus apačios dešiniojo kampo.

    [center]Tiek šioje pamokoje, turėjot viską suprasti, beabejo viską meginkite patys, viską bandykitės keiskit stilių spalvas ir viską suprasite.[/center]

    [notice=nt_impo][center]Pamoką kurė MariukasR !!![/center][/notice]

    Tinklapio programuotojas!
    2012-09-20 11:41
    Find Quote

    Junior Member


    **
    8

    0
    Post: #2
     
    Gera pamoka, pravers naujokams Smile Saunuolis
    2012-09-20 14:37
    Find Quote

    Senior Member


    ****
    265

    0
    Post: #3
     
    neblogai
    2012-09-20 15:47
    Find Quote

    Senior Member


    ****
    300

    0
    Post: #4
     
    Pravers visiems kurie nori išmokti Smile Kursime savo HTML/CSS svetainę ir mokysimės pagrindų, po to kažką rimtesnio kursime su savo svetaine, gal kokią TVS Smile

    Tinklapio programuotojas!
    2012-09-20 17:37
    Find Quote

    Member


    ***
    61

    0
    Post: #5
     
    man atrodo, kad geriau su <div> dizainus koduoti, bet tebūnie

    [center][Image: erosm.gif][/center]
    2012-09-20 18:12
    Find Quote

    Senior Member


    ****
    300

    0
    Post: #6
     
    Su divais aplamai geriua viską koduoti, bet patikėk geriau mokinti su table kodint, kažkaip papraščiau ir niekam nebus sudėtinga Smile

    Tinklapio programuotojas!
    2012-09-20 19:02
    Find Quote

    Junior Member


    **
    12

    0
    Post: #7
     
    MariukasR, su table nepadarysi visko kaip su div Smile Paciam taip yra buve, visada su divais darau ir jokiu problemu.
    2012-09-20 20:37
    Find Quote


    Possibly Related Threads...
    Thread: Author Replies Views: Last Post
      Reik kad kas sukoduotu HTML dizaina uz... Taskas 0 2355 2013-07-14 12:47
    Last Post: Taskas
      HTML, xHTML Nesuskaitomas 0 2198 2013-06-13 05:34
    Last Post: Nesuskaitomas
      [HTML/CSS] Stiliaus integracija Fanzius 3 3630 2013-05-01 21:05
    Last Post: 7n
      [HTML] Subjektai Fanzius 6 4132 2013-05-01 15:49
    Last Post: Fanzius
      HTML/CSS #1 MariukasR 4 3052 2013-03-22 16:15
    Last Post: Factor


    About DESCO

    Mes esame ne komercinis projektas, norime, jog Lietuvos jaunimas vis sparčiau brautųsi į technologijų amžių. Negalima sėdėti vietoje, reikia kažką veikt, todėl mūsų projektas tam puikiai tinka. Galima pas mus išmokt kažko naujo, taip pat nepamirškite, kad ir jūs galite mokyti kitus! Žinių dalinimasis geriną lietuvių mentalitetą, todėl nesmerk kito, o pamokyk!