Frame
Frame ကေတာ့ HTML Page ႏွစ္ခု ထက္မက တာ ေတြကို စာမ်က္ႏွာ တစ္ခုထဲမွာ ေဖာ္ျပခ်င္တဲ့ အခါေပါ့။ ဘယ္လိုမ်ဳိးလဲဆိုေတာ့ ...
အဲဒီမွာဆိုရင္ Frame ၃ ခုနဲ႕ Page တစ္ခုကို ဖြဲ႕စည္း တည္ေဆာက္ထားတာပါ။ အခုေနာက္ပိုင္းမွာ Frame ကို အသံုးနည္းသြားပါၿပီ။ AJAX ဆိုတဲ့ နည္းပညာကို ေျပာင္း သုံးၾကပါတယ္။ အရင္တုန္းကေတာ့ Frame ကိုအသံုးမ်ား ခဲ့ပါတယ္။
ဘာလို႕အသံုးျပဳရသလဲဆိုရင္ေတာ့ အေပၚက ပံုမွာၾကည့္လိုက္ပါ။ ဘယ္ဘက္က menu ျဖစ္ၿပီး ညာဘက္ ကေတာ့ menu ကိုႏိွပ္လိုက္ရင္ ေပၚလာမယ့္ page ေပါ့။ အေပၚဆံုးကေတာ့ Name ကိုေရးထားတာပါ။ အဲ.. အခု frame အေၾကာင္း စလိုက္ေအာင္။
Frame1.html
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
This is frame 1
</body>
</html>
Frame2.html
<html>
<head>
<title>Untitled Document</title>
</head>
This is frame 2
</html>
index.html
<html >
<head>
<title>Untitled Document</title>
</head>
<frameset cols=”80,*” frameborder=”no” border=”0" framespacing=”0">
<frame src=”frame1.html” name=”leftFrame” scrolling=”No” noresize=”noresize” id=”leftFrame”>
<frame src=”frame2.html” name=”main Fra-me” id=”mainFrame”/>
</frameset>
<noframes><body>
</body>
</noframes></html>
frame တစ္ခုကို တည္ေဆာက္ၿပီရင္ေတာ့ အနည္း ဆံုး file ၃ ခုလိုပါတယ္။ index.html ကေတာ့ Frame1 နဲ႕ Frame2 ကိုခ်ိတ္ဆက္ေဖာ္ျပေပးမွာျဖစ္ၿပီး frame1 နဲ႕ frame2 ကေတာ့ အဓိကေပါ့။
index.htmlကို ၾကည့္လိုက္ပါ။ ထူးျခားတာ တစ္ခုပါ,ပါတယ္။ အဲဒါကေတာ့ <body> မပါျခင္းပဲ။ fra-me ရဲ႕ Main Page ဟာ Body ထည့္စရာမလိုပါဘူး။ frame-set ပဲထည့္ရမွာပါ။ HTML မွာ frame သံုးရတာ လက္လ်င္ လွပါတယ္။ အေကာင္းဆံုးကေတာ့ IDE ေတြထဲက Dream weaver ကိုအသံုးျပဳလိုက္ရင္ေတာ့ လြယ္လင့္တကူ frame ကို ေရးသားႏိုင္မွာပါ။ အခုေတာ့ သိေအာင္ ကိုယ္တိုင္ပဲ ေရးၾကည့္ရတာေပါ့။
<frameset> နဲ႕ စၿပီး </frameset> နဲ႕ ေရးရပါ မယ္။cols ဆိုတာကေတာ့ column အေရအတြက္ေပါ့။ အခု column ၂ ခုပဲပါတဲ့အတြက္ cols=”80,*” လို႕ေရး လိုက္ပါတယ္။ အဲဒီအဓိပၸာယ္က ေရွ႕က column အက်ယ္ ကို 80 px ယူမယ္။ ေနာက္ကေတာ့ က်န္တာ အကုန္ယူ ဆိုတဲ့ အဓိပၸာယ္ပါ။ ကြၽန္ေတာ္တို႕ percentage နဲ႕လည္း အသံုးျပဳလို႕ရပါတယ္။
cols=”50%,*” လို႕ေျပာင္းေရးလိုက္ရင္ေတာ့ ေရွ႕ က 50% ျဖစ္ၿပီး ေနာက္က frame ကလည္း က်န္တဲ့ 50% ေပါ့။
frameborder=”no” ဆိုတာကေတာ့ frame မွာ boder မပါဘူးဆိုတဲ့ အဓိပၸာယ္ပါ။ border=”0" fram-espacing=”0" အဲဒါကေတာ့ border အထူက 0 ျဖစ္ၿပီး frame တစ္ခုနဲ႕ တစ္ခုၾကားက spacing က 0 လို႕ေျပာတာ ပါ။ အခု column ၂ ခုမဟုတ္လား။ ဒီေတာ့ ကြၽန္ေတာ္တို႕ ေတြ <frame> ႏွစ္ခု ထည့္ရမယ္။ ဒါေၾကာင့္ <frame src=”frame1.html” name=”leftFrame” scrolling=”No” noresize=”noresize” /> <frame src=”frame2.html” name=”mainFrame” id=”mainFrame” />.
အဲလိုမ်ဳိးေရးလိုက္တာ။ အဲမွာ src ဆိုတာကေတာ့ frame ရဲ႕ Link ေပါ့။ ကြၽန္ေတာ္တို႕ေတြ file ၃ ခုလံုးကို တစ္ေနရာတည္းမွာ ထည့္ထားတယ္။ ဒါေၾကာင့္ တိုက္႐ိုက္ လွမ္းေခၚလိုက္ရံုပဲ။ Name ကေတာ့ နာမည္ပါ။ မထည့္ လည္းရပါတယ္..
scrolling ဆိုတာကေတာ့ ေဘးနားက scrollbar ေပၚ မေပၚေပါ့။ ေပၚေစခ်င္ရင္ Yes ေပါ့။ noresize ကေတာ့ frame ကို resize လုပ္လို႕မရေအာင္ လုပ္ထားတာပါ။ ဒါဆို frame ကို resize လုပ္ခ်င္ရင္ေတာ့ အဲဒါကို မထည့္နဲ႕ေပါ့။ အခု column ၃ ခု နဲ႕လုပ္ၾကည့္ရေအာင္။
index.html
<html>
<head>
<title>Untitled Document</title>
</head>
<frameset cols=”20%,30%,*”>
<frame src=”frame1.html” />
<frame src=”frame2.html” />
<frame src=”frame1.html” />
</frameset>
<noframes>Your Browser Don’t Support Frame</noframes></html>
ေမးစရာ တစ္ခုေပၚလာၿပီ။ ဘာလဲဆိုရင္ေတာ့ <noframes> ။ အဲဒါက ဘာလဲဆိုရင္ေတာ့ ဟိုးအရင္က browser ေတြက frame ေတြကို support မလုပ္ပါဘူး။ ဒါေၾကာင့္ frame ေတြကို support မလုပ္တဲ့ browser ေတြ ျဖစ္ေနရင္ Message ေလးေဖာ္ျပေပးပါမယ္။ အခုေနာက္ ပိုင္း browser ေတြက support လုပ္ပါတယ္။ ကဲ.. အခု code ေလးကို နည္းနည္းေလး ေျပာင္းၾကည့္လိုက္ ရေအာင္။
<html>
<head>
<title>Untitled Document</title>
</head>
<frameset rows=”20%,30%,*”>
<frame src=”frame1.html” />
<frame src=”frame2.html” />
<frame src=”frame1.html” />
</frameset>
<noframes><body>
</body>
</noframes></html>
ဘာေျပာင္းသြားသလဲဆိုေတာ့ frameser ပါ။ cols ကေန rows ျဖစ္သြားပါတယ္။ cols နဲ႕ rows ေလးပဲ ကြာတာပါ။ က်န္တာ အတူတူပါပဲ။ frame အထဲမွာလည္း ထပ္ၿပီး ထပ္မံခြဲထုတ္လို႕ရပါေသးတယ္။ အခု အေပၚဆံုး က rows ကို column ထပ္ၿပီးခြဲပါမယ္။
<html>
<head>
<title>Untitled Document</title>
</head>
<frameset rows=”20%,30%,*”>
<frameset cols=”*,50%” framespacing=”0" frameborder=”NO” border=”0">
<frame src=”frame1.html” />
<frame src=”frame2.html” name=”rightFrame” scrolling=”NO” noresize>
</frameset>
<frame src=”frame2.html” />
<frame src=”frame1.html” />
</frameset>
<noframes><body>
</body>
</noframes></html>
အဲဒီမွာ <frameset> ေအာက္မွာ <frameset> ထပ္ထည့္ထားတာကို ေတြ႕ရမွာပါ။
<frameset rows=”20%,30%,*”>
<frameset cols=”*,50%” framespacing=”0" frameborder=”NO” border=”0">
<frame src=”frame1.html” />
<frame src=”frame2.html” name=”rightFrame” scrolling=”NO” noresize>
</frameset>
ကြၽန္ေတာ္တို႕ အေပၚဆံုးက rows ကို ထပ္ၿပီး cols ခြဲတာပါ။ ဒါေၾကာင့္ အေပၚဆံုး rows မွာ columns ႏွစ္ခု ျဖစ္သြားပါၿပီ။ ဒါေၾကာင့္ <frame> ႏွစ္ခု ေရးရတာပါ။ တကယ္လို႕ ဒုတိယ rows မွာပဲ colums ထပ္ထည့္ခ်င္ရင္ ေတာ့ code က ဒီလိုေလးျဖစ္သြားမွာပါ။
<html>
<head>
<title>Untitled Document</title>
</head>
<frameset rows=”20%,30%,*”>
<frame src=”frame1.html” />
<frameset cols=”*,50%” framespacing=”0" frameborder=”NO” border=”0">
<frame src=”frame2.html” />
<frame src=”frame2.html” name=”right Frame” scrolling=”NO” noresize>
</frameset>
<frame src=”frame1.html” />
</frameset>
<noframes><body>
</body>
</noframes></html>
ရွင္းရွင္းေလးပါ။ ဒုတိယ rows မွာ ျဖစ္ေစခ်င္လို႕ ဒုတိယ rows မွာ frameset တစ္ခုထပ္ထည့္ရတာပါ။ အဲလိုမ်ဳိးပဲ columns ေတြထဲမွာ rows ေတြ ခြဲလို႕ရပါတယ္။ အတူတူပါပဲ။ အေပၚက rows ေနရာမွာ cols ေျပာင္းၿပီး ေတာ့ cols ေနရာမွာ rows ေျပာင္းလိုက္ရင္ သိမွာပါ။ ကြၽန္ေတာ္ မေရးျပေတာ့ဘူး။ ကိုယ္တိုင္ပဲ ေရးျပီး စမ္း ၾကည့္လိုက္ေပါ့။
အခု ဒီစာအုပ္ရဲ႕ ေနာက္ဆံုးအခန္းက ေနာက္ဆံုး အေၾကာင္းပါပဲ။ ဘာလဲဆိုရင္ေတာ့ Link And Frame ပါ။ Frame တစ္ခုက Link က ႏိွပ္လိုက္ရင္ ေနာက္ frame တစ္ခုက ေျပာင္းသြားဖို႕ပါ။ ကြၽန္ေတာ္ အကုန္လံုးကို အေျခခံေလာက္ပဲ ေျပာႏိုင္မွာပါ။ Web ပိုင္းမွာ ေလ့လာ စရာေတြ အမ်ားႀကီးပါ။ HTML ဆိုတာ လံုး၀စ,ကာစ အေျခခံအဆင့္ေလးပါ။
Source : Knowledge Bridge
No comments:
Post a Comment
ေဆာ႔၀ဲေတြ update လုပ္ခိုင္းလွ်င္မလုပ္ပါနွင္႔။