Dreamwaver ေလ့က်င့္ခန္း(၁)

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="http://multiplygroups.multiply.com/images/logo.jpg" alt="BusinessSite Logo" width="211" height="67" /></div>
<div id="menu"><img src="http://multiplygroups.multiply.com/images/home.jpg" alt="a" width="95" height="32" /><img src="http://multiplygroups.multiply.com/images/about-us.jpg" alt="b" width="112" height="32" /><img src="http://multiplygroups.multiply.com/images/contact-us.jpg" alt="v" width="127" height="32" /><img src="http://multiplygroups.multiply.com/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 ေအာက္မွာ သိမ္းလိုက္ပါ။

Posted in: ဘေလာ့နည္းပညာ