HTML5 နဲ့ CSS3 သုံးပြီး Site တစ်ခုဆောက်မယ် (၃)

ThihaJanuary 13, 2011HTML & CSS

အားလုံးပဲ မင်္ဂလာပါခင်ဗျာ။ ခုမှ စဖတ်မယ့်သူတွေအတွက် အရင်အပိုင်းတွေကို ပြန်ညွှန်းလိုက်ပါတယ်။

အခန်း (၃)

အရင် အခန်း (၂) မှာတုန်းကတော့ HTML အတွက် Frame တွေချပြီးပါပြီ။ အဲဒီ frame ကို စမ်းသပ်ကြည့်တဲ့အခါမှာ အောက်မှာ ပြထားတဲ့ အတိုင်း တွေ့ရမှာ ဖြစ်ပါတယ်

ကျွန်တော်တို့ ဒီအဆင့်ကိုရောက်ပြီဆိုရင် CSS ဖက်ကို သွားလို့ရပါပြီ။ အဲဒီလို CSS ကိုသွားတဲ့နေရာမှာ နည်းလမ်း နှစ်မျိုးနဲ့ သွားလို့ရပါတယ်။ တစ်မျိုးကတော့ ပုံမှန်အတိုင်း style.css မှာ ရေးလိုက်တာပါ။ နောက်တစ်မျိုးကတော့ 960.gs စနစ်ကို သုံးတာပါ။ ခုမှ စလေ့လာမယ့်သူတွေ အတွက်တော့ ပုံမှန်အတိုင်း CSS ရေးတာအကောင်းဆုံးပါပဲ။ ဒါပေမယ့် ကျွမ်းကျင်တဲ့သူတွေကတော့ 960.gs ကို သုံးစေချင်ပါတယ်။ ဒီ Tutorial မှာတော့ 960.gs ကို သုံးသွားမှာ ဖြစ်ပါတယ်။

အရင်တစ်ခါ အခန်း (၂) တုန်းက 960.gs ကနေ Download ချပြီးပြီဖြစ်မယ်ထင်ပါတယ်။ မချရသေးလဲ ခု Download ချလိုက်ပါ။ ဒီနေရာမှာ ရနိုင်ပါတယ်။ ရလာတဲ့ဖိုင်ကို ဖြည်လိုက်မယ်ဆိုရင် အောက်မှာ ပြထားတဲ့အတိုင်း တွေ့ရမှာ ဖြစ်ပါတယ်။

ကျွန်တော် အပေါ်မှာ ပြထားတဲ့ ဖိုင်ဖြစ်တဲ့ 960.gs ဖိုင်ကို ကျွန်တော်တို့ project folder ထဲ ထည့်လိုက်မှာ ဖြစ်ပါတယ်။ တကယ်တော့ အရင်တစ်ခါ ပေးလိုက်တဲ့ ဖိုင်မှာကတည်းက 960.css က ပါပြီးသား ဖြစ်ပါတယ်။ အဲဒီအပြင် reset.css လည်းပါပြီးသားပါ။

ကျွန်တော် HTML Source မှာ ကြည့်မယ်ဆိုရင် သတ်မှတ်ပေးဖို့ လိုအပ်တဲ့ tab တွေ div တွေကို အရင်လေ့လာကြည့်ပါမယ်။

header -> main-header (id ဖြစ်တဲ့အတွက် #main-header)
h1 -> logo (#logo)
nav -> main-nav (#main-nav)
section -> featured (#featured)
div -> descrp (#descrp)
section -> more-photos (#more-photos)
div -> photo (class ဖြစ်တဲ့အတွက် .photo)
section -> more-blurb (#more-blurb)
div -> blurb (#blurb)
div -> blog (#blog)
footer -> main-footer (#main-footer)
section -> footersub (.footersub)
section -> copyright-info (#copyright-info)

အပေါ်မှာပြခဲ့တာတွေ အားလုံးကို CSS မှာ assign လုပ်ပေးရမှာ ဖြစ်ပါတယ်။ ဒါပေမယ့် ကျွန်တော်တို့ 960.gs ကိုသုံးမှာ ဖြစ်တဲ့အတွက် 960.css မှာ ပါပြီးသား CSS properties တွေကိုပဲ လှမ်းခေါ်သုံးပါ့မယ်။ 960.gs အကြောင်းကို ကျွန်တော် ထပ်ရေးမှာ ဖြစ်တဲ့အတွက် ဒီနေရာမှ အသေးစိတ် ရှင်းမနေတော့ပါဘူး။ တစ်ခါတည်း တန်းသုံးသွားမှာ ဖြစ်ပါတယ်။ တကယ်တန်း 960.gs ကို လေ့လာမယ်ဆိုရင် photoshop မှာကတည်းက စပြီး လေ့လာဖို့လိုပါတယ်။ အဲဒါမှ နားလည်တဲ့အခါ ရှင်းရှင်းလင်းလင်း နားလည်နိုင်မှာ ဖြစ်ပါတယ်။

ပုံတွေကိုလည်း တစ်ခါတည်း ဖြတ်ထားပြီးသား ပေးထားပါတယ်။ အဲဒီလို 960.gs အပေါ်မှာ အခြေခံပြီ ဒီဇိုင်းဆွဲတာကိုလည်း လေ့လာဖို့ လိုပါသေးတယ်။ ဒီ Tutorial မှာတော့ Site Building ကို အဓိကထားတဲ့အတွက် အဲဒီ အပိုင်းတွေ မထည့်တော့ပါဘူး။ အဲဒီလို ဖြတ်ပြီး လေ့လာလိုက်တဲ့အတွက် စိတ်တော့ မပျက်သွားပါနဲ့။ လေ့လာကြည့်ပါ၊ အရမ်းကို လွယ်သွားတာ တွေ့ရပါလိမ့်မယ်။ အသုံးချဖို့အတွက် 960.gs ကို လေ့လာမယ်ဆိုရင် ဘာမှ လေ့လာစရာ မလိုပါဘူး။ CSS မှာ ဘာမှ ရေးစရာ မလိုပါဘူး။ HTML မှာပဲ ရေးပေးရမှာပါ။ စလိုက်ရအောင်ဗျာ ..

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Friends</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/960.css" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
    <header id="main-header" class="container_12 clearfix">
        <h1 id="logo" class="grid_2 suffix_4"><a href="#">သူငယ်ချင်းများ</a></h1>
        <nav id="main-nav" class="grid_5">
            <h1>Main page navigation</h1>
                <ul>
                    <li><a href="#" class="current">Home</a></li>
                    <li><a href="#" >Products</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
        </nav>
    </header>
    <section id="featured" class="container_12 clearfix">
        <div id="descrp" class="grid_6 suffix_6">
            <h1>သမီးမှာ သူငယ်ချင်းတွေ အများကြီးရှိပါတယ်။ သူတို့တွေကတော့ လူရွှင်တော်၊ တောသားလေး၊ ထမင်းစားတော့မယ့် ပစ်ဂလက်လေးနဲ့ ချမ်းနေရှာတဲ့ ဝက်ဝံလေးတို့ ဖြစ်ပါတယ်။</h1>
            <p class="button"><a href="#">View our photos</a></p>
            <p class="button"><a href="#">View other stuff</a></p>
        </div>
    </section>
    <section id="more-photos" class="container_12 clearfix">
        <h1>My Photos</h1>
        <div class="photo grid_4">
            <figure>
                <img src="img/myphoto1.jpg" width="300" height="150" alt="My photo 1" />
                <figcaption>
                    <h3>စိမ်းလန်းစိုပြေမှာ ဖေဖေကို စောင့်နေတုန်း ရိုက်ထားတာပါ</h3>
                    <p>သမီးအကြိုက်ဆုံး ဂါဝန်လေးပါ။ သမီးရဲ့ ဖွားဖွားဝယ်ပေးထားတာပါ။ သမီးကတော့ စိမ်းလန်းစိုပြေက မျက်ခင်းတွေပေါ်မှာ ပြေးဆော့ရတာ ကြိုက်ပါတယ်။</p>
                </figcaption>
            </figure>
        </div>
        <div class="photo grid_4">
            <figure>
                <img src="img/myphoto2.jpg" width="300" height="150" alt="My photo 1" />
                <figcaption>
                    <h3>စိမ်းလန်းစိုပြေမှာပါပဲ၊ မေ့မေ့ကို ပုန်းနေတာပါ</h3>
                    <p>ပျော်စရာ အရမ်းကောင်းပါတယ်။ မေမေနဲ့ အတူ တူတူပုန်းတန်းကစားရင်း ဖေဖေက ဓာတ်ပုံရိုက်မယ်ဆိုလို့ အိုက်တင်ပေး လိုက်တာပါ။</p>
                </figcaption>
            </figure>
        </div>
        <div class="photo grid_4">
            <figure>
                <img src="img/myphoto3.jpg" width="300" height="150" alt="My photo 1" />
                <figcaption>
                    <h3>မီးမီးရဲ့ အရုပ်ကလေးတွေကို မုန့်ကျွေးထားတာပါ</h3>
                    <p>ပုရှ်လေးက ဟန်နီ၊ ပစ်ဂလက်လေးက ဗိုက်မဆာလို့ ဘာမှမစားဘူး၊ ဝက်ဝံလေးကတော့ သကြားလုံး၊ အရုပ်မလေးကတော့ သူ့ကို ထီးမဆောင်းပေးလို့ စိတ်ကောက်နေတယ်။</p>
                </figcaption>
            </figure>
        </div>
    </section><!--#more-products-->
    <section id="more-blurb" class="container_12 clearfix">
        <div id="blurb" class="grid_7">
            <h1>သမီးနာမည်က သီရိရွှန်းလဲ့ဦးပါ</h1>
            <p>သမီးနာမည်က သီရိရွှန်းလဲ့ဦးပါ။ သမီးအသက် ငါးနှစ်ရှိပါပြီ။ သူငယ်တန်း တက်နေပါတယ်။ သမီးက အင်္ဂလိပ်စာ ဝါသနာပါပါတယ်။ ကွန်ပျူတာ ကိုင်ရတာလဲ ဝါသနာ ပါပါတယ်။ ဂိမ်းတွေ ဆော့ပါတယ်။
            သမီးကို ဖေဖေက ကွန်ပျူတာ အရမ်း တတ်စေချင်ပါတယ်။ မေမေက အင်္ဂလိပ်စာ အရမ်းတတ်စေချင်ပါတယ်။ သမီးကတော့ ဆရာမလုပ်ရတာ ဝါသနာ ပါပါတယ်။ အိမ်လေးတစ်လုံးလည်း အခုလိုချင်နေပါတယ်။</p>
        </div>
        <div id="blog" class="grid_5">
            <h1>Latest from my blog</h1>
            <article>
                <h1><a href="#">သမီးရဲ့ အိမ်လေး</a></h1>
                <p>သမီးအိမ်လေး တစ်လုံးလိုချင်ပါတယ်။ အဲဒီအိမ်လေးက သေးသေးလေးပါ။ အဲဒီအိမ်လေးမှာ သမီးသူငယ်ချင်းတွေနဲ့ အတူတူဆော့ပါမယ်။ အိမ်လေးကို ပန်းရောင်လေး၊ အဝါရောင်လေး ချယ်ပါမယ်။
                အထဲမှာ Pooh ရဲ့ ပုံလေးတွေ ချိတ်ပါမယ်။ Piglet ပုံလေးတွေ ချိတ်ပါမယ်။ Tiger နဲ့ ဖိုးရွှေယုန်ကိုလည်း ခေါ်ထားပါမယ်။ တစ်ခါတစ်လေ ဖိုးရွှေယုန်က ဆိုးပါတယ်။ Easter Egg Hunt ကို မလုပ်လို့ သူ့
                သူငယ်ချင်းတွေ အကုန်ထွက်သွားကြပါတယ်။ နောက်ပိုင်းမှာ စိတ်ကောင်းဝင်ပြီး ပွဲကို ပြန်လုပ်ပါတယ်။ သူငယ်ချင်းတွေ အားလုံးနဲ့ ပြန်ခေါ်သွားပါတယ် .... </p>
            </article>
            <article>
                <h1><a href="#">သမီးရဲ့ သူငယ်ချင်းများ</a></h1>
                <p>သမီးမှာ သူငယ်ချင်းတွေ အများကြီးရှိပါတယ်။ ကျောင်းမှာလည်း ရှိသလို အိမ်မှာလည်း ရှိပါတယ်။ ကျောင်းက သူငယ်ချင်းတွေက စာသင်ချိန်ဆိုတော့ ဆော့လို့ မရပါဘူး။ အိမ်မှာတော့ သမီးသူငယ်ချင်းတွေ
                ဖြစ်တဲ့ တောသားလေး ဖိုးရွှေယုန်ရယ်၊ လူရွှင်တော် ဝက်ဝံလေးရယ်၊ Pooh ရယ်၊ Piglet ရယ် ဆော့ကြပါတယ်။ သမီးရဲ့ အိမ်လေးရှေ့မှာ ဒါန်းလေး တစ်ခုပါ ထားမှာပါ။ မေမေက ထမင်းကျွေးရင် ဒါန်းလေးပေါ်မှာ
                စားပါမယ် ....</p>
            </article>
        </div>
    </section>
    <footer id="main-footer" class="container_12 clearfix">
        <section class="footersub grid_3">
            <h1>Mailing List</h1>
            <input type="email" />
        </section>
        <section class="footersub grid_3">
            <h1>Address</h1>
            <p> 12345, Pyay Rd. Yangon.</p>

        </section>
        <section class="footersub grid_3">
            <h1>Contact</h1>
            <p>Phone: 95 1 666666</p>
            <p>meemee@myfriends.com</p>
        </section>
        <section class="footersub grid_3">
            <h1>Connect with me</h1>
            <p class="icon"><a href="#"><img src="img/twitter.png" width="32" height="32" alt="Twitter" /></a></p>
            <p class="icon"><a href="#"><img src="img/facebook.png" width="32" height="32" alt="Facebook" /></a></p>
            <p class="icon"><a href="#"><img src="img/flickr.png" width="32" height="32" alt="Flickr" /></a></p>
            <p class="icon"><a href="#"><img src="img/rss.png" width="32" height="32" alt="RSS" /></a></p>
        </section>
        <section id="copyright-info" class="container_12">
            <small>©2010 My Friends. All rights reserved.</small>
        </section>
    </footer>
</body>
</html>

ဒီအတိုင်း Run ကြည့်မယ်ဆိုရင်

အဲဒီလို ဖြစ်သွားပြီဆိုရင် ဒီလောက်ကလေး ရေးလိုက်တာ ဒီလိုဖြစ်သွားလားဆိုပြီး အံ့သြသွားပါလိမ့်မယ်။ HTML နဲ့ CSS ကို အတန်အသင့် ရေးဖူးသူတို့ သတိထားမိပါလိမ့်မယ်။ တကယ့်ကို ဘာမှ လုပ်စရာမလိုလိုက်ပဲ နေရာချထားပြီးသား ဖြစ်နေတာ တွေ့ရပါလိမ့်မယ်။ အဲဒီနေရာမှာ သုံးသွားတာတွေကို တစ်ချက် ပြန်လေ့လာကြည့်ရအောင်

အဓိက အပိုင်းတွေဖြစ်တဲ့ main-header, featured, more-photos, more-blurb နဲ့ main-footer တို့မှာ class ဆိုပြီး ထပ်ပေါင်းထည့်တာ တွေ့ရပါလိမ့်မယ်။ အဲဒီတော့ 960.gs ထဲက properties တွေအားလုံး အကြိမ်ကြိမ် ပြန်သုံးဖို့ လိုတဲ့အတွက် class တွေ အနေနဲ့ သုံးလို့ရတယ် ဆိုတာကို သတိပြုပါတယ်။ id နဲ့ သုံးထားရင် class ဆိုပြီး ပေါင်းထည့်ပေးဖို့ လိုသလို class ရှိပြီးသားဆိုရင်တော့ ပေါင်းထည့်ပေးဖို့ လိုပါမယ်။

container_12 clearfix – အဲဒီ စကားလုံးကို Main Section တွေတိုင်းမှာ တွေ့ပါလိမ့်မယ်။ container_12 ဆိုတာကတော့ 960.gs မှာပါတဲ့ 12 Grids System ကိုသုံးမယ်လို့ ဆိုလိုတာပါ။ clearfix ဆိုတာကတော့ ရှင်းလင်းပေးတာလို့ အလွယ် မှတ်ထားလိုက်ပါ။ အပေါ်မှာ ဆောက်ခဲ့တဲ့ float: left; float: right စတာအားလုံးကို ရှင်းလင်းပေးပါတယ်။
grid_6 suffix_6 – grid_6 ဆိုတာကတော့ grid 6 ခုစာ နေရာယူမယ်လို့ ဆိုလိုပါတယ်။ suffix_6 ဆိုတာကတော့ grid နေရာလွတ် ခြောက်ခုယူမယ်ဆိုတဲ့ အဓိပါယ်ရပါတယ်။ ကျန်တဲ့ grid_4, grid_3 တို့ကလည်း အတူတူပါပဲ။

အခန်း (၃) ကို ဒီနေရာမှာတင် တစ်ဖြတ်နားလိုက်ပါမယ်။ အခန်း (၄) ရောက်တဲ့အခါ အချောကိုင်တဲ့ အပိုင်းတွေ ဆက်သွားမှာ ဖြစ်ပါတယ်။ ခုပြီးတဲ့အဆင့်အထိ Source Code ကိုလည်း တစ်ခါတည်း တင်ပေးလိုက်ပါတယ်။

အခန်း (၄) ဆက်လက်ဖတ်ရှုပါရန်

Facebook comments:

One Response

sai says:

February 26, 2012 at 9:04 PM

အခုလို ေလ့လာခြင္႔ရတဲ့ အတြက္အမ်ားၾကီး ေက်းဇူးတင္ပါတယ္။ အခန္း( ၄ ) ကိုလည္း ေစာင့္ေျမာ္ေနမယ္ဗ်ာ။

Reply

About the Author

Thiha

စာမရေးရ မနေနိုင်သူ၊ ဒီဇိုင်းဆွဲခြင်း၊ ပရိုဂရမ်ရေးခြင်း၊ အင်တာနက်တွင် သင်ယူခြင်းတို့ အမြဲမပြတ် ပြုလုပ်နေသူ၊ နည်းပညာနှင့် ပတ်သက်လျှင် အကုန် စိတ်ဝင်စားသူ၊ ကလေး တစ်ယောက် အဖေ၊ နည်းပညာသမားအပေါ် နားလည်မှု အပြည့်ပေးနိုင်သော ဇနီးတစ်ယောက်၏ ခင်ပွန်း၊ Myanmar Links မှာ နည်းပညာ အကြောင်း သောင်းပြောင်းထွေလာ သင်တဲ့ဆရာ ... လောလောဆယ် လေ့လာနေတာက iOS