Dreamwaver CS4 နဲ႔ အေျခခံ Website ျပဳလုပ္နည္း (သင္ခန္းစာ - ၁)

Webdevelper နဲ႔ သက္ဆိုင္တဲ့ HTML/ CSS အေျခခံေလ့လာႏိုင္တဲ့ ပို႔စ္ေတြကို က်ေနာ့္ဆိုက္မွာစုထားရင္းနဲ႔ လိုအပ္သူမ်ားရယူႏိုင္ေအာင္တင္ေပးလုိက္တယ္။ ဒီပို႔စ္ေတြကို ေရးသားတဲ့မူရင္းပိုင္ရွင္က KoTinLwinTun ပဲျဖစ္ ပါတယ္။ လိုအပ္ရင္ ေလ့လာၾကရေအာင္ေလ…

နညးနည္းေတာ့ေျပာလိုက္မယ္ က်ေနာ့္အျမင္က ဒီ Draweaver နဲ႔ ၀က္ဘဆိုက္တစ္ခုမျပဳလုပ္ခင္ HTML/CSS code ေတြကိုအရင္နည္းနည္းေလာက္ေလ့လာထားရင္ ဒီေဆာ့၀ဲကိုအသံုုးျပဳရတာပိုျပီးလြယ္ကူမႈေတြရွိမယ္။ ဒါ ေၾကာင့္ ေရွ႕ပို႔စ္ေတြမွာတင္ထားျပီးျဖစ္တဲ့ “html/css for self study” ဆိုတဲ့ပို႔စ္မွာပါတဲ့ အေၾကာင္းအရာေတြ ကိုေလ့လာေစခ်င္တယ္။ ဒါေတာ့ က်ေနာ္အျမင္ေလးေပါ့ဗ်ာ…

ေနာက္ျပီး သူေပးထားတဲ့ ေဒါင္းလုဒ္ေဆာ့၀ဲလင့္ေတြက အလုပ္မလုပ္ေတာ့သည့္အတြက္ က်ေနာ္ full version ေရာ Portable ပါလင့္အသစ္နဲ႔တင္ေပးလိုက္တယ္။ ေဒါင္းလို႔အဆင္မေျပတာရွိရင္ စီဗုန္းမွာေအာ္ခဲ့ပါ။ က်ေနာ္ အသစ္ထပ္တင္ေပးပါ့မယ္။

သခၤန္းစာ (၁) ဒီမွာသြားေရာက္ဖတ္ရႈရန္

အရင္ဆံုး Adobe Dreawaver cs 4 Portable and Full Version ေဒါင္းထားလိုက္ပါ
ADBEDRWVCS4 LS1.part1.rar
ADBEDRWVCS4 LS1.part2.rar
ADBEDRWVCS4 LS1.part3.rar
ADBEDRWVCS4 LS1.part4.rar
ADBEDRWVCS4 LS1.part5.rar

Adobe Dreawaver cs 4 Portable
DreamweaverPortable.rar

ကဲ...စျပီးေလ့လာၾကမယ္...

HTML ကို Edit လုပ္ေပးတဲ့ IDE ထဲမွာ လက္ရွိ လူသူအမ်ားဆံုးကေတာ့ Dreamwaver
Software ပဲ ျဖစ္ပါတယ္။ Dreamwaver Software ကို HTML မေရးတက္တဲ့သူေတြကအစ
အသံုးျပဳလို႔ရပါတယ္။
ဒီသင္ခန္းစာမွာ Beginner မ်ားအတြက္ Dreamwaver ကို သံုးၿပီး ကိုယ္ပိုင္ Webpage ေလးတစ္ခု ဖန္တီးျပမွာ ျဖစ္ပါတယ္။ `

ကၽြန္ေတာ္တို႔
ပထမဦးဆံုး Website တစ္ခု မဖန္တီးခင္ Mycomputer ထဲက D: မွာ Project
အမည္နဲ႔ Folder တစ္ခုကို ၾကိဳတင္ျပဳလုပ္ထားလိုက္ပါ။ ထို႔ Project Folder
ထဲတြင္ BusinessSite အမည္ျဖင့္ Folder အသစ္တစ္ခုထပ္ျပဳလုပ္ထားလိုက္ပါ။

၁။ Dreamwaver Software ကို ဖြင့္လိုက္ပါ။

ထို႔ေနာက္ ပံုမွာျပထားတဲ့အတိုင္း “Create New” ေအာက္မွာရွိတဲ့ “Dreamweaver Site” ကို Click ႏွိပ္လိုက္ပါ။

Site Definition Box က်လာပါက “BusinessSite” ဆိုၿပီး အမည္ေပးၿပီး Next ကို ႏွိပ္လိုက္ပါ။ ဒီေနရာမွ မိမိၾကိဳက္ႏွစ္သက္တဲ့အမည္ေပးလို႔လည္းရပါတယ္။



ပံုတြင္ျပထားသည့္အတိုင္း ေရြးခ်ယ္ၿပီး Next ကို ႏွိပ္လိုက္ပါ။

ကၽြန္ေတာ္တို႔
အခုနက ၾကိဳတင္တည္ေဆာက္ခဲ့တဲ့ Project Folder ထဲမွ BusinessSite ကို
လမ္းေၾကာင္းေရြးခ်ယ္ေပးၿပီး Next ကို ႏွိပ္လိုက္ပါ။ Folder
မေဆာက္ရေသးတဲ့သူေတြကေတာ့ ပံုမွာျပထားတဲ့အတိုင္း လမ္းေၾကာင္းေနရာမွာ
ကၽြန္ေတာ္ျပထားတဲ့အတိုင္းေရးလိုက္ပါ။ ဒါဆို D: ေအာက္မွာ Project Folder ကို
သူ႔ဘာသာသူတည္ေဆာက္ေပးပါလိမ့္မယ္။

None ကို ေရြးၿပီး Next ႏွိပ္လိုက္ပါ။

ထို႔ေနာက္
Done ကို ႏွိပ္လိုက္ပါက ပံုတြင္ျပထားသည့္အတိုင္း ျမင္ေတြရရမွာျဖစ္ပါတယ္။
ထို႔ေနာက္ ကၽြန္ေတာ္တို႔ ဓာတ္ပံုေတြသိမ္းဖို႔အတြက္ ညာဘက္ေထာင့္မွာရွိတဲ့ Site - BusinessSite ကို ႏွိပ္ၿပီး Right ClickNew Folder ကို ေရြးကာ images ဟုအမည္ေပးၿပီး Folder တစ္ခုကို BusinessSite Folder ေအာက္မွာ ေဆာက္လိုက္ပါတယ္။

အထက္ပါအဆင္မ်ားၿပီးဆံုးပါက
ကၽြန္ေတာ္တို႔ Template တစ္ခုကို Create ျပဳလုပ္ဖို႔ File Menu ေအာက္က New
ကို ႏွိပ္လိုက္ပါ။ ထို႔ေနာက္ ပံုတြင္ျပထားသည့္အတိုင္း ‘Blank Template’

> Template Type: ‘HTML Template’ > Layout: ‘none’ ကို
အဆင့္ဆင့္ေရြးလိုက္ပါ။

ထို႔ေနာက္
template ကို သိမ္းရန္အတြက္ File ေအာက္မွ Save As ကို ႏွိပ္လိုက္ပါ။
ထို႔ေနာက္ template လို အမည္ေပးၿပီး Save မွတ္လိုက္ပါ။ ဒါဆိုလွ်င္ template
ကို မိမိရဲ႕ BusinessSite ရဲ႕ေအာက္မွာ Template Folder တစ္ခုကို
တည္ေဆာက္ၿပီး template.dwt ဆိုၿပီး Save မွတ္ေပးတာကို ေတြ႕ရမွာျဖစ္ပါတယ္။

ကၽြန္ေတာ္တို႔ရဲ႕ Template မွာ ဒီဇိုင္ျပဳလုပ္ရန္အတြက္ Layout သတ္မွန္ရန္အတြက္ Insert > Layout Objects > Div Tag ကိုေရြးခ်ယ္ကာ header ဟုအမည္ေပးၿပီး New CSS Rule ကို ႏွိပ္လိုက္ပါ။

New CSS Rule Box က်လာပါက #header လို႔အမည္ေပးပါ။ New Style Sheet File ကို ေရြးေပးၿပီး Ok ကို ႏွိပ္လိုက္ပါ။

styles လို႔အမည္ေပးၿပီး Save မွတ္လိုက္ပါ။

CSS
Rule Box က်လာပါက ပံုမွာျပထားတဲ့အတိုင္း အဆင့္ဆင့္ျပဳုလုပ္လိုက္ပါ။
ဒီေနရာမွာေတာ့ ကၽြန္ေတာ္တို႔ Tutorials ျဖစ္တဲ့အတြက္
ကၽြန္ေတာ္လုပ္ျပထားတဲ့အတိုင္းပဲလိုက္လုပ္ပါ။ ပံုေတြကိုေတာ့
ဒီေနရာမွာ
Download ျပဳုလုပ္ၿပီး ပံုေတြကို Copy ကူးကာ မိမိျပဳုလပ္ထားတဲ့
D:>Project>images ထဲမွာ Paste လုပ္ထားလိုက္ပါ။ ၿပီးရင္ေတာ့့
ေအာက္မွာျပထားတဲ့အတိုင္း လုပ္လိုက္ပါ။


Background
ပံုထည့္ရန္အတြက္ Browser ကို ႏွိပ္ကာ D:>Project>images ထဲက
ကၽြန္ေတာ္တို႔ သိမ္းထားတဲ့ header-bg ဆိုတဲ့ပံုကိုေရြးလိုက္ပါ။





ထို႔ေနာက္ Ok ကို ႏွိပ္လိုက္ပါက Insert Div tag Box က်လာပါက OK ကို ႏွိပ္လိုက္ပါ။ ၿပီးလွ်င္ Design ကို Click ႏွိပ္ၿပီးၾကည့္လိုက္ပါ။

ထို႔ေနာက္
ကၽြန္ေတာ္တို႔ Layer ေနာက္တစ္ခုလုပ္ရန္အတြက္ Window > CSS Styles ကို
Click ႏွိပ္လိုက္ပါ။ ‘New CSS Rule’ icon ကို ႏွိပ္လိုက္ပါ။

ၿပီးလွ်င္ ေအာက္မွာျပထားတဲ့အတိုင္း ျဖည့္လိုက္ပါ။

- Selector type: Tag
- Selector Name: body
- Rule Definition: styles.css


OK ကို Click ႏွိပ္လိုက္ပါ။

ၿပီးလွ်င္ေတာ့ ေအာက္ကပံုအတိုင္းေလူ လုပ္လိုက္ပါ။ 0 ပဲေပးလိုက္ပါ။ ဒါမွ ဘယ္ညာႏွစ္ဖက္လံုး အျပည့္ျဖစ္သြားမွာျဖစ္ပါတယ္။

ကၽြန္ေတာ္တို႔
‘Content for id “header” Goes Here’ ဆိုတဲ့ေနရာမွာ Logo
ထည့္မွာျဖစ္တဲ့အတြက္ အဲ့ဒီစာသားေတြကို Delete လုပ္လိုက္ပါ။ ထို႔ေနာက္
Insert > Image  ကို ႏွိပ္ၿပီး Logo ပံုေလးကို ေရြးလိုက္ပါ။ ထို႔ေနာက္
alternate textၚတြင္ မိမိၾကိဳက္ႏွစ္သက္တဲ့အမည္ေပးလိုက္ပါ။ ကၽြန္ေတာ္ကေတာ့
BusinessSite Logo လို႔အမည္ေပးလိုက္ပါတယ္။ ၿပီးလွ်င္ OK ႏွိပ္လိုက္ပါ။

ဒါဆို ကၽြန္ေတာ္တို႔ရဲ႕ Header မွာ ယခုလိုျမင္ရမွာျဖစ္ပါတယ္။

ကၽြန္ေတာ္တို႔
့Logo ထည့္ထားတဲ့ header ကို Select လုပ္လိုက္ပါ။ ေအာက္ဆံုးမွာ
ဒီလိုေလးေတြရမွာျဖစ္ပါတယ္။ မေတြ႔တဲ့သူေတြကေတာ့ Select မွတ္တာမွားေနလို႔ပါ။
မေတြ႔ရင္လည္း Code ကို သြားၿပီး ေအာက္မွာေပးထားတဲ့ Code ကိုရွာလိုက္ပါ။

Select
မွတ္ၿပီးလွ်င္ Code ကို သြားပါ။ Header Code ကို Select
မွတ္ေပးထားတာေတြ႔ရပါမယ္။ အေပၚက မေတြ႔တဲ့သူေတြကေတာ့ ဒီ Code ကို ရွာလိုက္ပါ။

ကၽြန္ေတာ္တို႔ အေပၚပံုမွာ ျပထားတဲ့အတိုင္း Code ရဲ႕ေနာက္ဆံုးမွာ cursor ေလး ခ်ၿပီး Insert > Layout Objects > Div Tag ကိုေရြးကိုေရြးခ်ယ္ကာ menu ဟုအမည္ေပးၿပီး New CSS Rule ကို ႏွိပ္လိုက္ပါ။

ၿပီးလွ်င္ေတာ့ ဟိုအေပၚအဆင့္မွာ ျပဳလုပ္ခဲ့တဲ့အဆင့္အတိုင္း ေအာက္မွာေပးထားတာေတြကို မွန္ေအာင္ျဖည့္လိုက္ပါ။

• Selector Type: ID
• Selector Name: #menu
• Rule Definition: styles.css

ၿပီးလွ်င္ေတာ့ OK ကို ႏွိပ္လိုက္ပါ။

‘CSS Rule Definition for #menu’ Box က်လာရင္ ေအာက္ကအတိုင္း ျဖည့္လိုက္ပါ။

• Background> Background- image:  images/menu-bg.jpg
• Box > Width: 100%
• Box > Height: 32px
• Click OK

ထို႔ေနာက္ Insert Div Tag Box က်လာပါက OK ကို ႏွိပ္လိုက္ပါ။

ၿပီးလွ်င္ေတာ့
ကၽြန္ေတာ္တို႔ Design ကိုေရြးၿပီး ၾကည့္လိုက္ပါ။ အခုလုပ္သြားတဲ့အဆင့္က
အေပၚက အဆင့္ေတြအတိုင္းျဖစ္တဲ့အတြက္ ပံုနဲ႔တကြမရွင္းျပေတာ့ဘူးေနာ္။
မလုပ္တက္ရင္ အေပၚအဆင့္ေတြကို ေသေသျခာျခာျပန္ၾကည့္ပါ။

ထို႔ေနာက္ Menu ျပဳုလုပ္ရန္အတြက္ Content for id "menu" Goes Here

ကို ဖ်က္လိုက္ၿပီး Insert > Image  ကို ႏွိပ္ၿပီး Home ပံုကိုေရြးၿပီး
မိမိၾကိဳက္ႏွစ္သက္တဲ့အည္ကိုေပးၿပီး OK ႏွိပ္လိုက္ပါ။ ထို႔ေနာက္ Home
ပံုေလးေဘးမွာ cursor ခ်ၿပီးအခုနကအတိုင္း Insert > Image  ကို ႏွိပ္ၿပီး
ပံုးေတြေရြးၿပီးအမည္ေတြေပးလိုက္ပါ။ အဲ့ဒီမွာ Menu အတြက္ about-us ၊
contact-us၊ services ေတြရွိပါတယ္။ တစ္ခုစီေရြးၿပီး လုပ္လိုက္ပါ။
ၿပီးရင္ေတာ့ ေအာက္ကပံုအတိုင္းျမင္ေတြ႔ရမွာ ျဖစ္ပါတယ္။

ကၽြန္ေတာ္တို႔ Code ကို သြားလိုက္ပါ။

ထို႔ေနာက္ <body> မွာေရးထားတဲ့ ေအာက္မွာ ျပထားတဲ့ Code ကိုရွာၿပီး </div> ရဲ႕ေနာက္မွာ cursor ခ်လိုက္ပါ။

<div id="header"><img src="../images/logo.jpg" alt="BusinessSite Logo" width="211" height="67" /></div>
<div
id="menu"><img src="../images/home.jpg" alt="a" width="95"
height="32" /><img src="../images/about-us.jpg" alt="b"
width="112" height="32" /><img src="../images/contact-us.jpg"
alt="v" width="127" height="32" /><img
src="../images/services.jpg" alt="rr" width="114" height="32"
/></div>

ထို႔ေနာက္ အရင္အဆင့္ေတြအတိုင္း Insert > Layout Objects > Div Tag ကိုေရြးကိုေရြးခ်ယ္ကာ middle ဟုအမည္ေပးၿပီး New CSS Rule ကို ႏွိပ္လိုက္ပါ။

ၿပီးလွ်င္ေတာ့ ဟိုအေပၚအဆင့္မွာ ျပဳလုပ္ခဲ့တဲ့အဆင့္အတိုင္း ေအာက္မွာေပးထားတာေတြကို မွန္ေအာင္ျဖည့္လိုက္ပါ။

• Selector Type: ID
• Selector Name: #middle
• Rule Definition: styles.css

ၿပီးလွ်င္ေတာ့ OK ကို ႏွိပ္လိုက္ပါ။

‘CSS Rule Definition for #middle’ Box က်လာရင္ ေအာက္ကအတိုင္း ျဖည့္လိုက္ပါ။

• Box > Width: 100%
• Click OK

ထို႔ေနာက္ Insert Div Tag Box က်လာပါက OK ကို ႏွိပ္လိုက္ပါ။

ထို႔ေနာက္ Content for id "middle" Goes Here ကို Select မွာကာ Delete လုပ္ၿပီး Insert > Layout Objects > Div Tag ကိုေရြးကာ submenu ဟုအမည္ေပးၿပီး New CSS Rule ကို ႏွိပ္လိုက္ပါ။

ေအာက္မွာေပးထားတာေတြကို မွန္ေအာင္ျဖည့္လိုက္ပါ။

• Selector Type: ID
• Selector Name: #submenu
• Rule Definition: styles.css

ၿပီးလွ်င္ေတာ့ OK ကို ႏွိပ္လိုက္ပါ။

‘CSS Rule Definition for #submenu’ Box က်လာရင္ ေအာက္ကအတိုင္း ျဖည့္လိုက္ပါ။

• Box > Width: 25%
• Box > Float: left
• Click OK

ထို႔ေနာက္ Insert Div Tag Box က်လာပါက OK ကို ႏွိပ္လိုက္ပါ။

ထို႔ေနာက္ မိမိရဲ႕ submenu div တြင္ Content for id "submenu" Goes Here ကိုေတြရပါမယ္။ ကၽြန္ေတာ္တို႔ Code ကို သြားၿပီး

<div id="middle">
  <div id="submenu">Content for  id "submenu" Goes Here</div>
</div>

ကိုရွာၿပီး </div> ရဲ႕ေနာက္မွာ cursor ခ်ၿပီးရင္ေတာ့ အရင္ကအတိုင္းပါပဲ။ Insert > Layout Objects > Div Tag ကိုေရြးကာID တြင္ content ဟုအမည္ေပးၿပီး New CSS Rule ကို ႏွိပ္လိုက္ပါ။

ေအာက္မွာေပးထားတာေတြကို မွန္ေအာင္ျဖည့္လိုက္ပါ။

• Selector Type: ID
• Selector Name: #content
• Rule Definition: styles.css

ၿပီးလွ်င္ေတာ့ OK ကို ႏွိပ္လိုက္ပါ။

‘CSS Rule Definition for #submenu’ Box က်လာရင္ ေအာက္ကအတိုင္း ျဖည့္လိုက္ပါ။

• Box > Width: 75%
• Box > Float: left
• Click OK

ထို႔ေနာက္ Insert Div Tag Box က်လာပါက OK ကို ႏွိပ္လိုက္ပါ။ ဒီလိုမ်ိဳး ျမင္ေတြ႔ရမွာျဖစ္ပါတယ္။

ထို႔ေနာက္
ကၽြန္ေတာ္တို႔ CSS မွာ Body ကို ျပင္ရန္အတြက္ Window > CSS Styles ကို
ႏွိပ္လိုက္ပါ။ ထို႔ေနာက္ Body ကိုေရြးၿပီး Right Click ႏွိပ္ၿပီး Edit ကို
ေရြးလိုက္ပါ။

ပံုမွာ ျပထားတဲ့အတိုင္းျပင္ၿပီး Click ႏွိပ္လိုက္ပါ။

ၤFont ေျပာင္းသြားတာကို ေတြ႔ရပါမယ္။

ကၽြန္ေတာ္တို႔
footer အတြက္ Div တစ္ခုထပ္လုပ္ပါမယ္။ သိတဲ့အတိုင္းပဲ Code ကို သြား

</div>ရဲ႕ေနာက္ဆံုးမွာ cursor ခ်ၿပီးရင္ေတာ့ အရင္ကအတိုင္းပါပဲ။ Insert > Layout Objects > Div Tag ကိုေရြးကာID တြင္ footer ဟုအမည္ေပးၿပီး New CSS Rule ကို ႏွိပ္လိုက္ပါ။

ေအာက္မွာေပးထားတာေတြကို မွန္ေအာင္ျဖည့္လိုက္ပါ။

• Selector Type: ID
• Selector Name: #footer
• Rule Definition: styles.css

ၿပီးလွ်င္ေတာ့ OK ကို ႏွိပ္လိုက္ပါ။

‘CSS Rule Definition for #footer’ Box က်လာရင္ ေအာက္ကအတိုင္း ျဖည့္လိုက္ပါ။

• Box > Width: 100%
• Box > Height: 33 px
• Box > Clear: both
• Block > Text align: Right
• Background> Background-image: footer-bg.jpg
• Type > Color: #FFF
• Click OK

ထို႔ေနာက္ Insert Div Tag Box က်လာပါက OK ကို ႏွိပ္လိုက္ပါ။ ၿပီးရင္
Design Tag ကို ႏွိပ္ၿပီးၾကည့္လိုက္ပါ။ ထို႔ ေနာက္ ‘Content for id
“footer” Goes Here’ ဆိုတဲ့ စာသားကို Select မွတ္ကာ
မိမိၾကိဳက္တဲ့အမည္ေပးလိုက္။ ကၽြန္ေတာ္ကေတာ့ ‘© 2009 Company Name. All
Rights Reserved.’ လို႔ေပးလိုက္ပါတယ္။ ဒီလိုမ်ိဳး ျမင္ေတြ႔ရမွာျဖစ္ပါတယ္။

အခုဆိုရင္ေတာ့ basic layout template လုပ္လို႔ၿပီးပါၿပီခင္ဗ်ာ။ File > Save All ကိုႏွိပ္ၿပီး Save မွတ္လိုက္ပါ။

ဟူးးးးးးးးးးး
ဖတ္တဲ့သူေတြေတာ့နားလည္မလည္မသိဘူး။ ေရးတဲ့ကၽြန္ေတာ္ေတာ့ လက္ေတြ
ေတာ္ေတာ္ေညာင္သြားၿပီ။ ဒါေၾကာင့္ ဒီမွာ ခဏနားမယ္။ ၿပီးလွ်င္ ဒုတိယပိုင္း
သင္ခန္းစာ (၂) ကိုေရးၿပီး Dreamwaver CS4 နဲ႔ အေျခခံ Website
ျပဳလုပ္နည္းကို ဆက္လက္ရွင္းျပပါမယ္။ Software မရွိေသးတဲ့သူေတြကေတာ့
Dreamweaver CS4 Portable ကို ဒီေနရာကေန Download လုပ္လိုက္ပါ။

Webpage အတြက္ ပံုေတြကို ဒီေနရာကေနရယူၿပီး rar ဖိုင္ေျဖၿပီး m51aimage ထဲက ပံုေတြကို Copy ကူးၿပီး images ေအာက္မွာ သိမ္းလိုက္ပါ။

Ref:http://www.blogger.com/