• Dizaino ir programavimo pamokos

  •  
    Thread Rating:
    • 0 Votes - 0 Average
    • 1
    • 2
    • 3
    • 4
    • 5
    html/css dizaino pamoka

    Senior Member


    ****
    291

    0
    Post: #1
    RE: html/css dizaino pamoka
    Sveiki, nuobodulys daro savo, tad nusprendžiau pakurt html/css pamoką, perspėju jog pats nelabai moku koduot, bet kiek moku tiek, ryt padarysiu img kaip dizainas turėtu atrodyt kurį aš čia sukodavau.

    1 žingsnis:

    Susikuriam failą pavadinimu index.html ir style.css

    2 žingsnis - index failo redagavimas, styles įterpimas

    Pradžioje kodas turi atrodyt taip:
    [geshi=xml]
    <html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Jūsų vardas, pavardė (autorius)" />
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <title>Jūsų tinklalapio pavadinimas</title>
    <body>
    </body>
    </html>[/geshi]

    Apibendrinimas:
    Kaip matote, kas turi pradžia, turi turėt ir pabaigą, šiuo atvėju "<>" ir "</>" .
    [geshi=xml]<link rel="stylesheet" type="text/css" href="styles.css"/>[/geshi] Tai yra styles įterpimas.
    <body></body> - tai visas turinys, į jį reiks rašyt class'us.

    3 žingsnis - styles.css redagavimas

    Dabar atsidarome styles.css ir įrašome viršuje:
    [geshi=css]
    body {
    }[/geshi] Tai yra visas pagrindas, tiksliau fonas, jis gali būt kaip paveikslėlis, bet gali būt ir kaip paprasčiausia spalva, mano atvėju bus paveikslėlis kažkoks.
    [geshi=css]
    body {
    background: url(images/bg.png); //paveikslėlio nuoruda
    background-repeat: no-repeat; //paveikslėlio kartojimas, no-repeat reiškia kad nesikartos, gali būt repeat-x tada kartosis tik į kairę ir dešinę, bet gali būt ir repeat-y tada kartosis į apačią ir į viršų
    margin: 0 auto; //fonas bus per vidurį, prie pat viršaus
    [/geshi]
    O jei norite jog fonas būtų ne paveikslėlis, o paprasta spalva tada vietoje [geshi=css]background: url(images/bg.png);[/geshi]
    rašykite:
    [geshi=css]background: #jūsų spalvos kodas;[/geshi]

    4 žingsnis - headeris

    Pradžioje reikia susikurt headerio class'ą, maniškis atrodytu taip:
    [geshi=css]
    .headeris {
    background-image: url(images/headeris.png); //paveikslėlio nuoruda
    background-repeat: no-repeat; //paveikslėlis nesikartos
    margin: 0 auto; //paveikslėlis bus pačiame viršuje, centre
    width: 900px; //width reiškia ilgį, nurodykite jį pixeliais, galūnė px
    height: 150px; //height tai plotis, jį taip pat geriausiai nurodyt pixeliais
    }[/geshi]
    Po to atsidarome index.html ir įrašome tarp <body></body> :
    [geshi=xml]<div class='headeris'></div>[/geshi]
    Pilnas kodas atrodys taip:

    [geshi=xml]
    <html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Jūsų vardas, pavardė (autorius)" />
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <title>Jūsų tinklalapio pavadinimas</title>
    <body>
    <div class='headeris'></div>
    </body>
    </html>[/geshi]

    5 žingsnis - navigacija

    Pradžioje ant styles.css susikuriam dar vieną class'ą.

    [geshi=css]
    .navigacija {
    background-image: url(images/navigacija.png); //paveikslėlio nuoruda
    background-repeat: no-repeat; //paveikslėlis nesikartos
    margin: 0 auto; //paveikslėlis bus, centre
    width: 900px; //width reiškia ilgį, nurodykite jį pixeliais, galūnė px
    height: 60px; //height tai plotis, jį taip pat geriausiai nurodyt pixeliais
    line-height: 60px; //tekstas bus nuo viršaus paslinkęs į apačią
    text-align: center; //tekstas bus sucentruotas
    }[/geshi]
    Jį reikia įrašyt po headerio divų:

    [geshi=xml]
    <html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Jūsų vardas, pavardė (autorius)" />
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <title>Jūsų tinklalapio pavadinimas</title>
    <body>
    <div class='headeris'></div>
    <div class='navigacija'></div> \\čia tas divas, tiesiai po headerio.
    </body>
    </html>[/geshi]

    Kadangi aš naudosiu navigacijos tekstui kitą class'ą, todėl po [geshi=xml]<div class='navigacija'>[/geshi] nerašysiu </div>

    Dabar kuriame navigacijos teksto class'ą
    [geshi=css]
    .tekstas {
    font-family: Arial; //fonto pavadinimas
    font-size: 12px; //fonto dydis
    color: #4f4e4f; //teksto spalva
    }[/geshi]

    taip pat sukuriame tokį patį class, tik prirašome prie jo :hover, tada užvedus ant teksto nepasikeis spalva į veoletine, nors jei norite jog spalva pasikeistu tai ant šito class vietoje vieno spalvos kodo įrašykite savo norimą.
    [geshi=css]
    .tekstas:hover {
    font-family: Arial; //fonto pavadinimas
    font-size: 12px; //fonto dydis
    color: #4f4e4f; //teksto spalva
    padding-left: 5px; //nuorodos pasislinks viena nuo kitos šiek tiek
    }[/geshi]

    Dabar įrašome šitą class'ą į index.html
    [geshi=xml]
    <html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Jūsų vardas, pavardė (autorius)" />
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <title>Jūsų tinklalapio pavadinimas</title>
    <body>
    <div class='headeris'></div>
    <div class='navigacija'>
    <a class='tekstas' href='index.html'>Pagrindinis</a>
    <a class='tekstas' href='index.html'>Forumas</a>
    <a class='tekstas' href='index.html'>Reklama</a>
    <a class='tekstas' href='index.html'>Komanda</a>
    <a class='tekstas' href='index.html'>informacija</a>
    </div> //reikia užbaigti navigacijos class
    </body>
    </html>[/geshi]

    6 žingsnis - Naujienos kūrimas

    Pirmiausia susikuriame naujienos class'ą

    [geshi=css]
    .naujiena {
    font-family: Arial; //fonto pavadinimas
    font-size: 12px; //fonto dydis
    color: #fff; //teksto spalva
    background-color: #000; //naujienos panelės spalva
    width: 900px; //naujienos ilgis
    height: 300px; //naujienos plotis
    text-align: center; //naujienos tekstas bus centruotas
    }[/geshi]

    Tada grįžtame prie index.html

    [geshi=xml]
    <html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Jūsų vardas, pavardė (autorius)" />
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <title>Jūsų tinklalapio pavadinimas</title>
    <body>
    <div class='headeris'></div>
    <div class='navigacija'>
    <a class='tekstas' href='index.html'>Pagrindinis</a>
    <a class='tekstas' href='index.html'>Forumas</a>
    <a class='tekstas' href='index.html'>Reklama</a>
    <a class='tekstas' href='index.html'>Komanda</a>
    <a class='tekstas' href='index.html'>informacija</a>
    </div>
    <div class='naujiena'> Jūsų naujienos tekstas bla bla bla....
    </div> //naujienos class'o užbaigimas
    </body>
    </html>[/geshi]

    [notice=nt_impo]Pamoką kūrė: DomantasN. Jei norite sulaukti daugiau pamokų, beplagijuokite be mano leidimo![/notice]
    2012-08-23 01:58
    Find Quote

    Senior Member


    ****
    291

    0
    Post: #2
     
    [Image: pavizdys.png] va šitaip man turėjo išeit, jei kyla klausimų klauskite, stengsiuosi padėt Smile
    2012-08-23 02:04
    Find Quote

    Junior Member


    **
    8

    0
    Post: #3
     
    Šaunuolis kad stengiesi Smile Manau pravers pradedantiesiams
    2012-08-23 02:37
    Find Quote

    Senior Member


    ****
    291

    0
    Post: #4
     
    Quote:eDk parašė:

    Šaunuolis kad stengiesi Smile Manau pravers pradedantiesiams
    Na stengtis teko, norėjau viską išdėstyt kuo suprantamiau, kuo rišliau, tikiuosi ir aš jog tai padės naujokam Smile
    2012-08-23 02:54
    Find Quote

    Member


    ***
    62

    0
    Post: #5
     
    Šaunu kad padarei pamoką, žadėjau video pamoką daryt. Smile
    2012-08-23 08:18
    Find Quote

    Junior Member


    **
    32

    0
    Post: #6
     
    WHY HTML??????Reikia PHP Big Grin
    2012-08-23 08:30
    Find Quote

    Junior Member


    **
    32

    0
    Post: #7
     
    Bent jau man vistiek neaišku nesupratau nieko Big Grin
    2012-08-23 10:12
    Find Quote

    Senior Member


    ****
    300

    0
    Post: #8
     
    Quote:Kickeri parašė:

    WHY HTML??????Reikia PHP Big Grin

    PHP-Fusion dizainų kodavimas ne prie ko html/css... Programminge pamokinsiu kaip template sistemą pasidaryt ir viskas manau išmoksit tada patys jau ir koduotis dizainus Smile

    Tinklapio programuotojas!
    2012-08-23 11:04
    Find Quote

    Member


    ***
    77

    0
    Post: #9
     
    Šaunuolis, kad kuri Smile aš dabar jau viską pamiršęs, bet kai mokiaus tai nagrinėjau kitus html dizainus Big Grin

    Teeeip :*
    [Image: 60699908.jpg]
    2012-08-23 11:05
    Find Quote

    Senior Member


    ****
    265

    0
    Post: #10
     
    Šaunuolis Smile
    2012-08-27 16:58
    Find Quote

    Senior Member


    ****
    291

    0
    Post: #11
     
    Ačiū Smile
    2012-08-31 15:34
    Find Quote

    Senior Member


    ****
    291

    0
    Post: #12
     
    Quote:Factor parašė:

    Nežinau kodėl, bet nematau <head> tagų, kaip žadi patalpinti kokį kodą(tarkim analytics), jei reikia <head> tagų.

    Taigi visi prisidėkit, kas naudojat šią pamoką po <html> tago pridėkit <head> ir po <title> </head>
    Tai tokia čia ir tėra pamoka, labiau funkcijos, nemanau jog kažką aš naujo išmokinau, aišku, padariau klaidą kad neįdėjau head tagų, paprasčiausiai ir aš nelabai juos naudoju tai... Smile Bet ačiū už pastebėjimą.
    2012-08-31 21:21
    Find Quote

    Junior Member


    **
    8

    0
    Post: #13
     
    Saunuolis
    2012-09-10 15:45
    Find Quote

    Senior Member


    ****
    300

    0
    Post: #14
     
    Quote:Tai tokia čia ir tėra pamoka, labiau funkcijos, nemanau jog kažką aš naujo išmokinau, aišku, padariau klaidą kad neįdėjau head tagų, paprasčiausiai ir aš nelabai juos naudoju tai... Smile Bet ačiū už pastebėjimą.

    Jei nenaudoji head tagu, tai kaip tu gali sukoduoti dizainą HTML jei net stilių neįterpi o jie terpiasi į head bloką su link tagu. Na jei tu terpi belekaip kitos naršyklės gali net neužtikti tavo style Wink

    Tinklapio programuotojas!
    2012-09-10 17:26
    Find Quote

    Junior Member


    **
    7

    0
    Post: #15
     
    Pats nemoka koduot html dizainų nekodina html o pamokas rašo, nu kadras Big GrinD
    2012-09-11 09:44
    Find Quote

    Junior Member


    **
    8

    0
    Post: #16
     
    Quote:zLukas parašė:

    Pats nemoka koduot html dizainų nekodina html o pamokas rašo, nu kadras Big GrinD
    :DDD
    2012-09-11 10:05
    Find Quote

    Senior Member


    ****
    291

    0
    Post: #17
     
    Quote:zLukas parašė:

    Pats nemoka koduot html dizainų nekodina html o pamokas rašo, nu kadras Big GrinD
    Moku aš HTML kažkiek, buvau aptingęs ir buvau metęs kodavimą, dabar vėl pradėsiu mokintis.
    2013-03-19 22:44
    Find Quote

    Junior Member


    **
    46

    0
    Post: #18
     
    naujokams pravers o seip galetum video pamoka padaryti kaip viskas daroma su style.css nusipiesi dizaina ir koduoji.. html aisku.Big Grin
    2013-03-22 13:27
    Find Quote


    Possibly Related Threads...
    Thread: Author Replies Views: Last Post
      Reik kad kas sukoduotu HTML dizaina uz... Taskas 0 2086 2013-07-14 12:47
    Last Post: Taskas
      HTML, xHTML Nesuskaitomas 0 1937 2013-06-13 05:34
    Last Post: Nesuskaitomas
      [HTML/CSS] Stiliaus integracija Fanzius 3 3264 2013-05-01 21:05
    Last Post: 7n
      [HTML] Subjektai Fanzius 6 3631 2013-05-01 15:49
    Last Post: Fanzius
      HTML/CSS #1 MariukasR 4 2694 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!