Dreamweaver භාවිතය

Dreamweaver යනු වෙබ් පිටු නිර්මාණය කිරීමට යොදා ගත හැකි මෘදුකාංගයකි. HTML හා CSS වැනි භාෂා පිළිබඳ එතරම් දැනුමක් නැති අයෙකුට වුවද මෙය පහසුවෙන් භාවිතා කළ හැකිය.

පහත පැහැදිළි කිරීම් Dreamweaver CS4 සංස්කරණය පදනම් කරගනිමින් ඉදිරිපත් කර ඇති නමුත් අනෙකුත් සංස්කරණ සමඟද මෙම පියවරයන් ම සුළු වෙනස්කම් පමණක් සහිතව අනුගමනය කළ හැකිය. Dreamweaver install කර ගත් විට Start –> All Programs –> Adobe Dreamweaver CS4 යන Start Menu options මඟින් Dreamweaver වෙත පිවිසිය හැකිය. මෙහි සපයා ඇති tools යොදා ගෙන වෙබ් පිටු නිර්මාණය කළත් එය සිදුවන්නේ වෙබ් නිර්මාණය කරන භාෂාවල නීති අනුවය. එනම් HTML, CSS, PHP ආදී වේ. Dreamweaver මගින් වෙබ් නිර්මාණය පහසු වන්නේ එය HTML සහ CSS පදනම් කරගනිමින් සිදු කළ විට ය. ඒ සඳහා වෙල්කම් තිරයේ Create New යටතේ ඇති HTML මත ක්ලික් කරන්න.

එවිට Dreamweaver ඇප්ලිකේෂන් වින්ඩෝව විවෘත වේ. මෙහි ප්‍රධාන කොටස් මෙසේ ය.

  • Application bar
http://www.compsoc.lk/templates/allrounder-j1.6/images/icons/quote.png) 4px 8px no-repeat rgb(254, 254, 254);”>

Application window එකේ ඉහළින්ම ඇත්තේ Application bar එකයි. මෙහි  File, Edit, View යනාදී මෙනු දැක ගත හැකිය.

  • Workspace switcher
http://www.compsoc.lk/templates/allrounder-j1.6/images/icons/quote.png) 4px 8px no-repeat rgb(254, 254, 254);”>

Application window එකෙහි අඩංගු කොටස් මෙහි පෙන්වයි. මේ තුළින් සම්මත ලෙස තේරී ඇති DESIGNER යන option එක භාවිතා කිරීම වෙබ් නිර්මාණයේ දී වඩා පහසු වේ. වෙනත් option එකක් වුවද අවශ්‍ය පරිදි තෝරා ගත හැකිය.

  • Property inspector
http://www.compsoc.lk/templates/allrounder-j1.6/images/icons/quote.png) 4px 8px no-repeat rgb(254, 254, 254);”>

Document window එක තුළ select කර ඇති object එකට අදාළ සැකසුම් කළ හැකිය. මෙය දැක ගත නොහැකි නම් Window මෙනු එක තුළින් Properties යන්න select කර එය ලබා ගත හැකිය.

  • Document toolbar
http://www.compsoc.lk/templates/allrounder-j1.6/images/icons/quote.png) 4px 8px no-repeat rgb(254, 254, 254);”>

වෙබ් පිටුව සකසන අවස්ථාවේ දී එම window එක තිබිය යුතු ආකාරය මෙමඟින් සකස් කරයි. වම් පස මුළින්ම ඇති Code නම් button එකෙන් වෙබ් පිටුව නිර්මාණය කරන codes පෙන්වයි. එනම් HTML සහ CSS codes ය. දෙවනුව ඇත්තේ Split button එකයි. එමඟින් code window එක හා document window එක යන දෙකම එක විට පෙන්වයි. තෙවනුව ඇත්තේ Design button එකයි. එහි දී design window එක පමණක් පෙන්වයි. මෙය දැනට දැක ගත නොහැකි නම් View මෙනු එක තුළින් Tool bars තෝරා, ඉන් Document යන්න click කර එය ලබා ගත හැකිය.

  • Document Window
http://www.compsoc.lk/templates/allrounder-j1.6/images/icons/quote.png) 4px 8px no-repeat rgb(254, 254, 254);”>

ප්‍රධාන වශයෙන් Dreamweaver තුළ වෙබ් පිටුව ගොඩ නඟන්නේ මෙම document window එක තුළය

  • Code Window
http://www.compsoc.lk/templates/allrounder-j1.6/images/icons/quote.png) 4px 8px no-repeat rgb(254, 254, 254);”>

HTML codes සහ CSS codes මේ තුළ පෙන්වයි.

  • Panel
http://www.compsoc.lk/templates/allrounder-j1.6/images/icons/quote.png) 4px 8px no-repeat rgb(254, 254, 254);”>

Design window එක තුළ කරන වෙනස්කම් වලට අදාළ සැකසුම් කිරීමට හා ඒවා වෙනස් කිරීමට දකුණු පසින් ඇති panel භාවිතා කළ හැකිය. මේ තුළ Insert panel, CSS Styles panel, Files panel වැනි විවිධ panels අඩංගු වේ. Panel දැනට නොපෙන්වයි නම් Window මෙනු එක තුළින් ඒවා ලබා ගත හැකිය.

  • Panel group
http://www.compsoc.lk/templates/allrounder-j1.6/images/icons/quote.png) 4px 8px no-repeat rgb(254, 254, 254);”>

Panel කීපයක් තිරය මත පෙන්වන විට ඉඩකඩ සීමා කර ගැනීමට එකම ස්ථානයක panel කීපයක් පෙන්වයි. එක් එක් panel වෙත පිවිසිය හැක්කේ panel group හි ඇති අදාළ panel එකෙහි නම click කිරීමෙනි.

  • Tag selector
http://www.compsoc.lk/templates/allrounder-j1.6/images/icons/quote.png) 4px 8px no-repeat rgb(254, 254, 254);”>

දැනට සකස් කරන වෙබ් පිටුවට අදාළ HTML tag එක මේ තුළින් පෙන්වයි. මෙහි අදාළ tag එක මත් click කළ විට ඊට අදාළ code කොටස පෙන්වයි.

අකුරු භාවිතය

  • අකුරු වල alignment සැකසීම
http://www.compsoc.lk/templates/allrounder-j1.6/images/icons/quote.png) 4px 8px no-repeat rgb(254, 254, 254);”>
අකුරු වල alignment සැකසීමට අවශ්‍ය අකුරු කොටස select කර Format මෙනු එක තුලින් Align යන්න select කරන්න. එහි Left, Center, Right, Justify අතුරින් අවශ්‍ය alignment එක select කරගන්න.

  • අකුරු bold, italic, underline කිරීම
http://www.compsoc.lk/templates/allrounder-j1.6/images/icons/quote.png); background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: 4px 8px; background-repeat: no-repeat;”>

අකුරු කොටස select කර ප්‍රොපර්ටි ඉන්ස්පෙක්ටර් එක තුළ ඇති Bold හා Italic බට්න් භාවිතයෙන්, තද කළු හා italic අකුරු සකසා ගත හැකිය.අකුරු යටින් ඉරි ඇඳීමට Format මෙනු එක මඟින් Style යන්න ලබා ගන්න. එහි ඇති Bold හා Italic මඟින් එම සැකසුම් කිරීමටද Underline මඟින් අකුරු යටින් ඉරි ඇඳීමටද හැකිය. Strikethrough මඟින් select කර ඇති අකුරු මැදින් රේඛාවක් අඳියි.

  • අකුරු වර්ගය වෙනස් කිරීම
http://www.compsoc.lk/templates/allrounder-j1.6/images/icons/quote.png); background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: 4px 8px; background-repeat: no-repeat;”>

Format මෙනු එක තුළින් Font යන්න තෝරා අවශ්‍ය අකුරු වර්ගයක් ඇති list එකක් තෝරා ගත හැකිය.

  • පේළි වලට bullet හා අංක එක් කිරීම
http://www.compsoc.lk/templates/allrounder-j1.6/images/icons/quote.png); background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: 4px 8px; background-repeat: no-repeat;”>

වෙබ් පිටුවක පේළි වලට bullet එක් කිරීමට Property inspector එක තුළ ඇති Unordered List button එක මතද අංක යෙදීමට Ordered List මතද click කරන්න.

වෙබ් පිටුවට images එකතු කිරීම

පළමුව වෙබ් පිටුව save කරන folder එක තුළ  Image නමින් අලුත් folder එකක් සකස් කර ගත යුතුය. මේ සඳහා  Files පැනල් එක right click කර ලැබෙන මෙනුවෙන් New Folder යන්න click කරන්න. එම folder එක Image යනුවෙන් නම් කරන්න. Image එකක් ලබා ගැනීම සඳහා Insert මෙනු එක තුළින් Image යන්න ලබා ගන්න. එවිට විවෘත වන Select Image Source dialog box එකෙහි ඇති Look in මඟින් image එක ඇති drive එක තෝරා, image එක තෝරා, OK button එක click කරන්න.

images2

එවිට විවෘත වන Dreamweaver dialog box එකෙන් image එක වෙබ් පිටු save කරන folder එක වෙත පිටපත් කළ යුතුද යන්න විමසයි. ඒ සඳහා Yes button එක click කිරීමෙන් එකඟ විය හැකිය.

මීළඟට Copy File As dialog box එක විවෘත වේ. මෙම file save කිරීම සඳහා ඒ තුළින් Image නම් අළුතින් සකස් කළ folder එක තෝරා දිය හැකිය. අවසානයට Save button එක click කරන්න.

ඉන්පසු විවෘත වන Image Tag Accessibility නම් dialog box එක කිසිඳු වෙනසක් නොකර OK කළ විට අදාළ image එක design window එක මතට ලැබේ.

{flike}

You may also like

Creating a web site 02
Creating a web site 01
Using remote folders