Dreamweaver | පළමු පෙළගැස්ම

Dreamweaver යනු වෙබ් අඩවි නිර්මාණය සදහා යොදා ගනු ලබන ඉතාමත් ජනප්‍රිය මෘදුකාංගයකි. වෙබ් අඩවි හෝ වෙබ් පිටු නිර්මාණායේදී හා පවත්වා ගෙන යාමේදී පැන නගින ගැටළු අවම කර ගැනීම සඳහා හඳුන්වා දෙනු ලැබූ ColdFusion, FrontPage, SharePoint Designer වැනි මෘදුකාංග අතර Dreamweaver ප්‍රධාන තැනක් ගනී. ඒ සඳහා Dreamweaver සතු භාවිතා කරන්නාට පහසු වන ලෙස සැකසුනු අතුරු මුහුණතක් පැවතීම, විවිධ වූ භාෂා(different scripting languages) කිහිපයක් සමගම කටයුතු කළ හැකි වීම, විවිධ වූ මෘදුකාංග සමග භාවිතය සඳහා අනුකූලතාවයක් දැක්වීම යන කරුණු හේතුපාදක වී ඇත. අද සිට මෙම ලිපි පෙළ යටතේ, ඔබගේම වෙබ් අඩවියක් නිර්මාණය කරගැනිම හා පවත්වාගෙන යාම පිණිස මෙම මෘදුකාංගය භාවිතයට ගනු ලබන ආකාරය පිළිබඳව ඔබට විග්‍රහ කර දීමට අපි බලාපොරොත්තූ වෙමු.

ඔබට HTML(Hyper Text Markup Language) පිළිබඳව සුළු හෝ දැනුමක් ඇත්නම් සරල වෙබ් අඩවියක් නිර්මාණය කර ගැනීමේ හැකියාව ඔබ වෙත පවතී. HTML භාවිතය පිළිබඳව වූ ලිපි පෙළක්ද මේ හා සමගාමීව පළවේ.

Dreamweaver භාවිතයෙන් ඔබට පහසුවෙන් වෙබ් පිටුවක් සඳහා tables, forms හා CSS stylesනිර්මාණය කළ හැකිය. එමෙන්ම ඔබට ඔබගේම templates ද නිර්මාණය කර ගත හැකි අතර ඒවා ඔබගේ වෙබ් අඩවියට ඇතුළු කර ගැනීම ඉතා පහසුවෙන්(එක් වරක් මවුසය click කිරීමෙන් පමණක්) සිදු කර ගත හැකිය.

Dreamweaver ශුද්ධ HTML සමග හැර XHTML, PHP, ASP, JavaScript CSS වැනි වෙනත් පරිගණක භාෂා සමගද භාවිතා කළ හැකිය. තවද Dreamweaver සමග නිර්මාණය වන වෙබ් පිටු සාමාන්‍යයෙන් පැහැදිලි, කියවීමට පහසු කේත(codes) සහිත වේ.

වෙබ් බ්‍රවුසර(web browsers) අතර පවතින නොගැළපීම් නිසා සිදුවන දුෂ්කරතා මග හරවා ගැනීමට ඉදිරිපත් කෙරෙන විසඳුමක් ලෙසද Dreamweaver හැඳින්විය හැකිය. එය ඔබගේ වෙබ් පිටු සියලුම ප්‍රචලිත වෙබ් බ්‍රවුසර(Internet Explorer, Firefox and Opera) හිදී නිවැරදිව හා ඊටම අනන්‍යව ඉදිරිපත් කිරීම තහවුරු කරයි. දැන් අපි Dreamweaver භාවිතය පිළිබඳ ඉගනීම ආරම්භ කරමු. Dreamweaver හි දැනට සංස්කරණ (versions) කිහිපයක් එළිදැක්වී ඇති අතර මෙහිදී ඔබට උගෙනීමට ලැබෙනුයේ Adobe Dreamweaver CS4 භාවිතා කරනු ලබන අයුරු පිළිබඳවයි. (එක් සංස්කරණයක් සමග කටයුතු කිරීම උගත් පසු අනෙකුත් සංස්කරණ සමග කටයුතු කිරීම අපහසු නොවේ.) Dreamweaver CS4 මෘදුකාංගය ඔබේ පරිගණකයට ස්ථාපනය (install) කර ගැනීමෙන් පසුව ඒ වෙත පිවිසීම සඳහා පහත පියවර අනුගමනය කරන්න. Click Start   All Programs  Adobe Dreamweaver CS4 ඉන්පසු ඔබට ලැබෙන පිවිසුම් තිරය(welcome screen) පහත දැක්වේ. මෙහි ඔබට නව Dreamweaver document එකක් නිර්මාණය කර ගැනීමට(Create new) හෝ මෑතකදී පිවිසුන document එකක් වෙත පිවිසීමට(Open a Recent Item) හෝ හැකියාව පවතී. ඊට අමතරව කවුළුවේ පහතින් දැක්වෙන Getting started, New Features, Resources සහ  Dreamweaver Exchange යන link මගින් ඔබට Dreamweaver CS4 පිළිබඳව වැඩිදුර ප්‍රයෝජනවත් වන කරුණු රැසක් හෙළි කරනු ඇත. Dreamweaver හි ඔබ වැඩ කරන කලාපය හැඳින්වෙන්නේ workspace නමිනි. එහි ඔබට Design view හා Code view යනුවෙන් ආකාර(modes) 2 ක් යටතේ වෙබ් පිටුවක් නිර්මාණය කරගත හැකිය. Design view යටතේ ඔබට වෙබ් පිටුවක් වෙබ් බ්‍රවුසරයේ පෙන්වන අයුරින්ම පෙන්වන අතර එහිදී ඔබට කේත(codes) භාවිතා නොකර එයට ඇතුළත් කළ යුතු අංග හා කළ යුතු වෙනස්කම් සිදු කළ හැකි වේ. Code view යටතේ ඔබට HTML, Cascading Style Sheets (CSS), JavaScript සහ තවත් භාෂා යටතේ කේත (codes) ලිවීම මගින් වෙබ් පිටුව නිර්මාණය කරගත හැකි වේ. දැන් පිවිසුම් තිරයේ දක්නට ලැබෙන විශේෂ අංග කිහිපයක් පි‍ළිබඳ විස්තරාත්මක සාකච්ඡාවක යෙදෙමු. පිවිසුම් තිරයෙහි ඉහතින්ම ඔබට Application bar දක්නට ලැබෙයි. එය ඔබට මින් ඉදිරියට Dreamweaver හි වැඩ කරනු ලබන සෑම අවස්ථාවකම දක්නට ලැබෙනු ඇත. වම් පසින් අරඹා එම bar එකෙහි දක්නට ලැබෙන සියලු උපාංග පිළිබඳ හැඳින්වීමක් පහත දැක්වේ.
  • The Dreamweaver logo: Dreamweaver document එක හකුළුවා තැබීම (minimize),නැවත දිග හැරීම (maximize) හා පියවීම (close) යන කරුණු සඳහා යොදා ගනී.
  • File menu: Dreamweaver document එකක් නිර්මාණය කිරීම(create), විවෘත කිරීම(open),සුරැකීම(save), පියවීම (close) සහ document එකක් import කිරීම වැනි ප්‍රාථමික කාර්යයන්(basic operations) ඉටු කර ගැනීම සඳහා සැකසී ඇත.
  • Edit menu: පවතින document එකක සැකැස්ම වෙනස් කිරීම (modify) සඳහා යොදා ගැනේ.
  • View menu: zoom level, ruler guides වැනි view settings වෙනස් කිරීමට යොදා ගනී.
  • Insert menu: පින්තූර (images), වගු (tables) වෙබ් පිටුවක් සඳහා ඇතුළත් කිරීමට යොදාගනී.
  • Modify menu: පවතින document එකක අඩංගු දෑ වෙනස් කිරීම සඳහා යොදා ගැනේ.
  • Format menu: වෙබ් පිටුවක පවතින අකුරු (text) හා අනෙකුත් උපාංග (objects) ක්‍රමානුකූලව සැකසීම සඳහා යොදා ගැනේ.
  • Site menu: නව අඩවි (Dreamweaver sites) නිර්මාණය හා පවතින ඒවායේ වෙනස්කම්සිදුකිරීම සඳහා භාවිතා කෙරේ.
  • Window menu: එකක් විවෘත කිරීම (open), workspace එකක් නිර්මාණය කිරීම (create),workspace එකක් හැසිරවීම කිරීම වැනි workspace සම්බන්ධ කටයුතුසිදුකිරීම සඳහා යොදා   ගැනේ.
  • Help menu: Dreamweaver භාවිතා කිරීම සඳහා උදව් ගැනීම පිණිස භාවිතා කළ හැකිය.
  • The Layout drop-down list: workspace හි වැඩ කිරීම පිණිස Code view හා Design view
යන ආකාර 2 න් එකක් මෙමගින් තෝරා ගත හැකිය.
  • Extend Dreamweaver drop-down list: Dreamweaver Exchange සඳහා පිවිසීමේ හැකියාව
ලබාදේ.
  • The Site button: නව අඩවි (Dreamweaver sites) ඇරඹීමේ හා පවතින ඒවායේ වෙනස්කම්
සිදුකිරීමේ හැකියාව ලබාදේ.
  • Workspace switcher: විවිධ වූ workspace layout options අතර සම්බන්ධතාවය පවත්වා ගැනීමට උපකාරී වේ.
මීළඟට පිවිසුම් තිරයෙහි දක්නට ලැබෙන තවත් වැදගත් අංගයක් පිළිබඳව සාකාච්ඡාවේ යෙදමු. පිවිසුම් තිරයෙහි දකුණුපස තීරයක් ලෙස ඔබට දක්නට ලැබෙනුයේ Panel Groups වේ.
රූපයේ ඔබට දක්නට ලැබෙන පරිදි Panel Groups යනු එකිනෙකට සම්බන්ධකම් දක්වන panels සමූහයක එකතුවකි. ඊට අඩංගු වන panels පහත දැක්වේ. v  The INSERT panel: Images, tables, හා links වැනි objects document එකකට ඇතුළත් කිරීම සඳහා buttons මෙහි පවතී. v  The CSS STYLES panel: මෙහි Cascading Style Sheets (CSS) වල නම් සහ ඒ පිළිබඳ තොරතුරු දැක්වේ. CSS යනු වෙබ් පිටුවක පවතින අකුරු (text), ශීර්ෂපාඨ (headings), පින්තූර (images) වැනි අයිතම (items) වල පෙනුම (appearance) වෙනස් කිරීමට ඔබට ඉඩ සලසන සැකසුම් තාක්ෂණයකි (formatting technique). මෙම පැනලයෙහි මුදුනෙහි toggle button එකක් අඩංගු වන අතර එය ඔබට All mode  හා Current mode යන ආකාර 2 අතර මාරු වීම සඳහා අවකාශ ලබාදේ. All mode හිදී panes 2 ක් දක්නට ලැබෙන අතර එහි මුදුනෙහිම, පවතින document එකෙහි දැක්වෙන rules ලයිස්තුව මෙන්ම එම document එකට අමුණා ඇති style sheets වල අඩංගු rules ද පෙන්වන  All rules pane එකද, පහතින්ම, All rule pane හිදී තෝරන ලද rule එකට අදාළ CSS හි ගුණ(properties) සංස්කරණය(edit) කිරීමට ඉඩ සලසන Properties pane එකද දැකිය හැකි වේ. Current mode හිදී panes 3 ක් දක්නට ලැබෙන අතර ඒවා පහත ආකාර වේ.
තේරූ pane එක සඳහා සාරාංශය (The summary for selection pane): document එකෙහි පවතින තේරීමට අදාළ CSS හි ගුණ (properties) මෙහිදී පෙන්වයි. Rules pane: තෝරන ලද ගුණයන්ගේ (properties) පිහිටීම් (locations) පෙන්වයි. Properties pane: යොදන ලද තේරීමට අදාළ CSS හි ගුණ (properties) සංස්කරණය (edit) කිරීමට ඉඩ සලසයි. v  The AP ELEMENTS panel: Document එකෙහි ඇති AP elements (absolutely positioned elements – ස්ථාවර අංග) හැසිරවීම මෙමගින් සිදු කරයි. Dreamweaver හි ස්ථාවර අංගයක් (AP element) යනු සාමාන්‍යයෙන් HTML අවයවයක (HTML page element) ස්ථාවර පිහිටීමක් සහිත
tag එකකි. මෙම පැනලය AP elements අතිච්ඡාදනය වීම (overlapping) වළක්වන අතර එය  AP elements දිස් වන ආකාරය වෙනස් කිරීමටද, AP elements ගොනු කිරීමටද, ඒවා එකක් හෝ කිහිපයක් තේරීමටද ඉඩ සලසයි.මෙහිදී AP elements හි නම් ලයිස්තුවක් ආකාරයෙන් නිර්මාණය වූ පිළිවෙලට පෙන්වයි.
v  The FILES panel:‍ මෙම පැනලය ඔබේ Dreamweaver sites සඳහා ගොනු(files) සකසන අතරම ඒවා හැසිරවීම සඳහා අවශ්‍ය විශේෂාංග ද සපයයි. ඔබට නව files හා ෆෝල්ඩර (folder) නිර්මාණය කිරීමටද, පවතින files විවෘත කිරීමටද(open), පිටපත් කිරීමටද(copy), විනාශ කිරීමටද(delete), නැවත නම් කිරීමටද(rename), පිහිටන ස්ථානය වෙනස් කිරීමටද(move) හැකියාව පවතී. එමෙන්ම ස්ථානීය(local) හා දුරස්ථ(remote) යන අඩවි වර්ග 2ම හැසිරවීමේ හැකියාව මෙම පැනලය සතුය. ඔබට‍ මෙහිදී files දැකීමටද, ඒවා එක් අඩවියක(site) සිට තවත් අඩවියකට මාරු කිරීමටද හැකියාව පවතී. v  The ASSETS panel: Images, media files වැනි වත්කම් (assets) හැසිරවීම සඳහා උදව් ලබා ගැනීමට යොදා ගැනේ. එමෙන්ම ඔබට‍ මෙම පැනලයෙන් document window එකට assets යෙදීමටද, ඒවා වෙබ් පිටුවේ භාවිතා කිරීමටද හැකිය. මෙම Panel Groups හකුළුවා තැබීමට(collapse) මෙන්ම ප්‍රසාරණය කිරීමට(expand)ද, සීමා කිරීමට(dock)මෙන්ම එය වැළැක්වීමට(undock) ද හැකියාව පවතී. Panel Groups තේරූ විට පැනලයක් tab එකක් ලෙස පෙන්නුම් කරයි. වෙබ් පිටුවක් සැකසීම පිළිබඳ මීළඟ හමුවේදී සාකච්ඡා කරමු. සැකසුම :- අසේල විජේරත්න දෞපදී කිරිඇල්ල {flike}

You may also like

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