9:51 AM
Step 1
1. Dreamweaver open කරගන්න.
3. Site tab එක click කරන්න.(දකුනු පසින් තියනව "Site Name / Local Site Folder") පහත රුපයෙ පරිදි.
4. "Site Name" එකට ඔයාලගෙ site එකෙ name එක type කරන්න.
5. "Local Site Folder" එකෙ type කරන එකට අන්තිමට ඇති folder icon එක click කරන්න.
6. එතනින් ඔයාලගෙ computer එකෙ hard එකෙ new folder එකක් හදල එකට ඔයලගෙ site එකෙ name එකෙ දීල ඒක select කර OK කරන්න.
7. නැවත වම් පැත්තෙ ඇති "Advanced Settings" click කර එකෙ ඇති "Local Info tab" එක click කරන්න.
8. "Default Images Folder" එකෙ folder icon එක click කර new folder එකක් "image" හදන්න කියල.ඒක click කර select කරන්න.
9. දැන් "save" එක මත click කරන්න.
Step 2
1. File > New ගිහින් html එකක් page create කරගන්න.
2. page එක openවුනාට පසුව නැවත File > Save එකට ගිහින් එකෙ File Name එකට "index.html" type කර
save එක click කරන්න.
* index.html කියන්නෙ ඔනම website එකක home page එක වේ.
* .html අනිවර්යෙන් දියයුත්තුමයි.
Step 3
DESIGN AND LAYOUT
1. Title: එකට ඔයාලගෙ site එකෙ නම දෙන්න. (පහත රුපයෙ පරිදි)
2. Window > properties එකට ගිහින් click කරන්න.
3. (එවිට properties කියල new form එකක් පහලින් දිස් වේ)
4.එහි පහලින් ඇති (Left margin, Right margin, Top margin, Bottom margin) කියන හතරම 0 pixels දීල Apply කර ගන්න.(පහත රුපයෙ පරිදි)
5. File > save click කර save කර ගන්න. (ctr + s)
* දැන් Code View එකට ගොස් බැලු ව්ට එහි <style type="text/css"> යටතෙ body කියන tag එකට css dreamweaver ව්සින්හදාගෙන ඇති.
Step 3
දන් අපි div tag use කරන හැටි ඉගෙන ගමු.
#wrapper
1. Window > Insert click කර Insert panel aka අරගන්න.
2. එහි layout යතතෙ ඇති මුල්ම icon aka (insert div tag) click කරන්න.එවිට form එකක් දේවි.
* නැත්නම් insert > Layout object > Div Tag click කරගන්න.(පහත රුපයෙ පරිදි)
3. එහි insert : At Insertion point click කරන්න.(මුලින්ම තියන එක දෙන්න) / Class: එක හිස්ව තියන්න / ID: එකට "wrapper" type කර පහලින් ඇති New CSS Style button aka click කර ගන්න.එවිට තව form එකක් පෙනෙවි.(පහත රුපයෙ පරිදි)
4. Selector type:Advanced (IDs,pseudo-class selector) දෙන්න.
5. Define In: එක (New Style Sheet) දීල "OK" කරන්න.(පහත රුපයෙ පරිදි)
6. එව්ට පහත රුපයෙ දිස්වෙන අකාරයට new folder එකක් open කර css කියල නම දීල ඒක double click කර file name "main_layout.css" type කර save කරන්න.(එවිට CSS Rule Definition box aka පෙනෙවි)පහත රුපයෙ දිස්වෙන පරදි
7. එහි box tag aka click කර Width:980 pixels Height:auto දෙන්න.
8. 8.eta යටින් අති margin වල "same for all" කියන එකෙ (හරි සලකුනක් දැනටම වැටිල අති.) click කරන්න (click කරාම හරි සලකුන නැති වෙන්න ඔනෙ)
- දැන් එහි Right: එකයි Left: එකයි auto දෙන්න.(පහත රුපයෙ පරිදි)
- "OK" දෙන්න. නැවත අහුවම එකත් "OK" දෙන්න.
* දැන් ඔයාලට පෙනෙවි Design එකට ගියාම අපි දීපු div tag aka ඇවිත්බව.එහි ඇති "Content for id "wrapper" Goes Here" කියන text ඔක්කොම select කර delete කර ගන්න.
එවිට Design එකෙ මුකුත් නතුව ඇති.බය වෙන්න එපා!.Code View එකට ගියාම ඒක පෙනෙවි <body> tag aka අතුලත.
* අපි හදන site එකෙ "wrapper" aka අතුලතට තමයි අපේ site ඒක banner එකයි navigation bar,side bar,content,footer aka add කර ගන්න.
මතක් කරල page aka save කර ගන්න.( ctr+s )
දැන් අපි banner එකක් දාල බලමු.
#banner
1. කලින් ව්දිහට div tag එකක් open කර ගන්න.
2. insert: එකට "After start of tag" කියන එක select කර ගන්න.( අවිට එක ඉස්සරහ කියල වැටෙවි.එක click කරල
කියන එක select කරගන්න.
3. Class: එකට මුකුත් නොදී ID: එකට banner" කියල type කරන්න.දැන් කලින් වගෙ යටින් ඇති New CSS Style button aka click කරගන්න.(පහත රුපයෙ පරිදි)
4. Selector type:Advanced (IDs,pseudo-class selector) දෙන්න.
5. Define In: aka (main_layout.css) දීලා"OK" කරන්න.
6. CSS Rule Definition box එකට යන්න.එහි Width : 980 pixels (අපි wrapper ඒකට දීපු width එකේ size එක තමයි අපේ මුලු site එකේම width එක)
Height: 120 pixels දෙන්න.(ඔයාලට කැමති Height එකක් දෙන්න පුලුවන්.ඒක තීරනය වෙන්නෙ ඔයල හදන banner එකේ height අක අනුව.)
7. කලින් කරා වගෙ margin වල same for all එක අයින් කරල Right Right: එකයි Left: එකයි auto දෙන්න. (පහත රුපයෙ පරිදි)
8. CSS Rule Definition එකෙ වම් පැත්තෙ Background aka click කරගන්න.
9. ඒකෙ දකුනුපස ඇති Background color: එකට කැමති පටක් දීල "OK" කරන්න.
10. කලින් wrapper එකෙ වගෙම මෙකෙත් "Content for id "banner" Goes Here" කියල div aka අතුලෙ text වෙලා ඇති.ඒක delete කරගන්න.දාපු color ඒකට a text aka පෙන්නෙ නැත්නම් Code View එකෙ
page එක save කර ගන්න.( ctr+s )
* keyboard එකෙ F12 press කරලා browser එකකින් බලන්න.
* තව දෙයක් banner එක Photoshop කෙන් මේ දාපු width එකයි eight එකයි සමාන banner එකක් හදා ගන්න වෙනව.ඒත් අපි දැනට banner එකට color එකක් දීල බලමු.
* Photoshop එකෙන් banner එකක් හදනවනම් එක ".jpg " වලට save කරල දාන්න පුලුවන්.එක දාන්නෙ background color: කියන අකට යටින් තියන Background image: කියන එකෙ "browse" button aka click කරල හදපු banner aka දෙනව.
* තව එකක් කියන්න ඕනෙ.අපෙ site එකට එන ඔක්කොම පින්තුර (photos) අපි දාන්න ඔනෙ කලින් හදපු "image" folder එකට.
දැන් අපි navigation bar එකක් දාල බලමු.
#nav_bar
1. කලින් ව්දිහට div tag එකක් open කර ගන්න.
2.insert: එකට "After start of tag" කියන එක select කර ගන්න.( අවිට එක ඉස්සරහ කියල වැටෙවි.එක click කරල
කියන එක select කරගන්න.
කියන එක select කරගන්න.
3. Class: එකට මුකුත් නොදී ID: එකට "nav_bar" කියල type කරන්න.දැන් කලින් වගෙ යටින් ඇති New CSS Style button aka click කරගන්න.(පහත රුපයෙ පරිදි)
4. Selector type:Advanced (IDs,pseudo-class selector) දෙන්න.
5. Define In: aka (main_layout.css) දීලා"OK" කරන්න.
6. CSS Rule Definition box එකට යන්න.එහි Width : 980 pixels Height: 35 pixels දෙන්න.
7. කලින් කරා වගෙ margin වල same for all එක අයින් කරල Right: එකයි Left: එකයි auto දෙන්න. තව අලුත් දෙයක් කරනව.top: කියන එක "15 pixels" දෙන්න.(පහත රුපයෙ පරිදි)
8. CSS Rule Definition එකෙ වම් පැත්තෙ Background aka click කරගන්න.
9. ඒකෙ දකුනුපස ඇති Background color: එකට කැමති පටක් දීල "OK" කරන්න.
10. කලින් wrapper එකෙ වගෙම මෙකෙත් "Content for id "nav_bar" Goes Here" කියල div aka අතුලෙ text වෙලා ඇති.ඒක delete කරගන්න.
page එක save කර ගන්න.( ctr+s )
* keyboard එකෙ F12 press කරලා browser එකකින් බලන්න.
දැන් අපි Side bar එකක් දාල බලමු.
#Side_bar
1. කලින් ව්දිහට div tag එකක් open කර ගන්න.
2.insert: එකට "After start of tag" කියන එක select කර ගන්න.( අවිට එක ඉස්සරහ කියල වැටෙවි.එක click කරල
කියන එක select කරගන්න.
කියන එක select කරගන්න.
3. Class: එකට මුකුත් නොදී ID: එකට "side_bar" කියල type කරන්න.දැන් කලින් වගෙ යටින් ඇති New CSS Style button aka click කරගන්න.(පහත රුපයෙ පරිදි)
4. Selector type:Advanced (IDs,pseudo-class selector) දෙන්න.
5. Define In: aka (main_layout.css) දීලා"OK" කරන්න.
6. CSS Rule Definition box එකට යන්න.එහි Width : 225 pixels Height: 350 pixels දෙන්න.
7. Float: එකට "Left" දෙන්න.
8. කලින් කරා වගෙ margin වල same for all එක අයින් කරල top: කියන එක "15 pixels" දෙන්න.(පහත රුපයෙ පරිදි)
9. CSS Rule Definition එකෙ වම් පැත්තෙ Background aka click කරගන්න.
10. ඒකෙ දකුනුපස ඇති Background color: එකට කැමති පටක් දීල "OK" කරන්න.
11. කලින් wrapper එකෙ වගෙම මෙකෙත් "Content for id "side_bar" Goes Here" කියල div aka අතුලෙ text වෙලා ඇති.ඒක delete කරගන්න.
page එක save කර ගන්න.( ctr+s )
* keyboard එකෙ F12 press කරලා browser එකකින් බලන්න.
දැන් අපි Content එකක් දාල බලමු.
#Content
1. කලින් ව්දිහට div tag එකක් open කර ගන්න.
2. insert: එකට "After start of tag" කියන එක select කර ගන්න.( අවිට එක ඉස්සරහ කියල වැටෙවි.එක click කරල
කියන එක select කරගන්න.
3. Class: එකට මුකුත් නොදී ID: එකට "contentr" කියල type කරන්න.දැන් කලින් වගෙ යටින් ඇති New CSS Style button aka click කරගන්න.(පහත රුපයෙ පරිදි)
4. Selector type:Advanced (IDs,pseudo-class selector) දෙන්න.
5. Define In: aka (main_layout.css) දීලා"OK" කරන්න.
6. CSS Rule Definition box එකට යන්න.එහි Width : 740 pixels Height: 500 pixels දෙන්න.
7. Float: එකට "Right" දෙන්න.
8. කලින් කරා වගෙ margin වල same for all එක අයින් කරල top: කියන එක "15 pixels" දෙන්න.(පහත රුපයෙ පරිදි)
9. CSS Rule Definition එකෙ වම් පැත්තෙ Background aka click කරගන්න.
10. ඒකෙ දකුනුපස ඇති Background color: එකට කැමති පටක් දීල "OK" කරන්න.
11. කලින් wrapper එකෙ වගෙම මෙකෙත් "Content for id "content" Goes Here" කියල div aka අතුලෙ text වෙලා ඇති.ඒක delete කරගන්න.
page එක save කර ගන්න.( ctr+s )
* keyboard එකෙ F12 press කරලා browser එකකින් බලන්න.
දැන් අපි Footerඑකක් දාල බලමු.
#footer
1. කලින් ව්දිහට div tag එකක් open කර ගන්න.
2. insert: එකට "After start of tag" කියන එක select කර ගන්න.( අවිට එක ඉස්සරහ කියල වැටෙවි.එක click කරල
කියන එක select කරගන්න.
3. Class: එකට මුකුත් නොදී ID: එකට "footer" කියල type කරන්න.දැන් කලින් වගෙ යටින් ඇති New CSS Style button aka click කරගන්න.(පහත රුපයෙ පරිදි)
4. Selector type:Advanced (IDs,pseudo-class selector) දෙන්න.
5. Define In: aka (main_layout.css) දීලා"OK" කරන්න.
6. CSS Rule Definition box එකට යන්න.එහි Width : 980 pixels Height: 100 pixels දෙන්න.
7. Clear: එකට "Both" දෙන්න.
8. කලින් කරා වගෙ margin වල same for all එක අයින් කරල Right: එකයි Left: එකයි auto දෙන්න.(පහත රුපයෙ පරිදි)
9. CSS Rule Definition එකෙ වම් පැත්තෙ Background aka click කරගන්න.
10. ඒකෙ දකුනුපස ඇති Background color: එකට කැමති පටක් දීල "OK" කරන්න.
9. CSS Rule Definition එකෙ වම් පැත්තෙ Background aka click කරගන්න.
10. ඒකෙ දකුනුපස ඇති Background color: එකට කැමති පටක් දීල "OK" කරන්න.
11. කලින් wrapper එකෙ වගෙම මෙකෙත් "Content for id "footer" Goes Here" කියල div aka අතුලෙ text වෙලා ඇති.ඒක delete කරගන්න.
page එක save කර ගන්න.( ctr+s )
* keyboard එකෙ F12 press කරලා browser එකකින් බලන්න.
0 comments:
Post a Comment