Tutorial- Web Design-1

ড্রিমওয়েভার দিয়ে ওয়েজপেজ তৈরী : ১

ওয়েবপেজ তৈরী জন্য ড্রিমওয়েভার (Adobe Dreamweaver) সবচেয়ে জনপ্রিয় সফটঅয়্যার। যারা কোড না লিখে ওয়েবসাইট তৈরী করতে চান তারা যেমন পছন্দ করেন, তেমনি যারা কোড ব্যবহার করেন তারাও ব্যবহার করেন। একই সঙ্গে ডিজাইন ভিউ এবং কোড ভিউ ব্যবহার করা যায়। যারা HTML ব্যবহার করেন কিংবা ColdFusion, ASP.Net যাই ব্যবহার করেন, সকলের কাছেই জনপ্রিয় সফটঅয়্যার। যে কাজ করার জন্য জাভাস্ক্রিপ্ট শেখা প্রয়োজন সেকাজ ড্রিমওয়েভার বিহেভিয়ার ব্যবহার করে করতে পারেন কোড না শিখেই। একইভাবে রোলওভার ইফেক্ট (যেমন একটি ইমেজের ওপর মাউস পয়েন্টার আনলে সেটা পরিবর্তিত হওয়া) ব্যবহার করতে পারেন খুব সহজেই।

কয়েকটি ধাপে ধারাবাহিকভাবে এই সফটঅয়্যারের ব্যবহার করে ওয়েবসাইট তৈরী শেখানোর চেষ্টা করা হচ্ছে।

প্রথমে কিছু সাধারন বিষয় জেনে নেয়া যাক।

ড্রিমওয়েভার শেখার জন্য কি HTML জরুরী :  এ প্রশ্নে সঠিক উত্তর দেয়া কঠিন। যদি এইচটিএমএল জানা থাকে তাহলে অবশ্যই কাজ করতে সুবিধে হবে। কাজ করার সময় কোন এক পর্যায়ে আপনাকে কিছু এইচটিএমএল শিখতে হবে। নতুন শিক্ষার্থীর জন্য ড্রিমওয়েভার ব্যবহার শুরু করে পর্যায়ক্রমে একটু একটু করে এইচটিএমএল শেখা সুবিধেজনক।

ওয়েব পেজে কি কি থাকে : কোন ওয়েব পেজে কি কি থাকে সেটা আপনি অবশ্যই আপনি জানেন। তাহলেও আরেকবার দেখে নেয়া যাক।

.          টাইটেল : প্রতিটি ওয়েবপেজের একটি টাইটেল থাকে যা উইন্ডো-টাইটেল হিসেবে ব্যবহৃত হয়। যেমন আপনি যদি মাইক্রোসফটের সাইট ওপেন করেন তাহলে আপনার উইন্ডোর নাম মাইক্রোসফট হিসেবে ওপেন হবে।

.          হেডার : আপনি টেক্সট হিসেবে যদি কিছু উপস্থাপন করে সেখানে শুরুতে লেখার শিরোনাম হিসেবে যা ব্যবহার করেন। সাধারনত মুল লেখা থেকে এই লেখা আকারে বড় হয়, সেইসাথে রং ভিন্ন হতে পারে বা অন্য বৈশিষ্ট থাকতে পারে। ওয়েবপেজে মুল হেডার, তার অধীনে আরেক হেডার এভাবে ভাগ করে Heading1, Heading2 ইত্যাদি নাম ব্যবহার করা হয়।

.          টেক্সট বক্স : একে বডি টেক্সট বলতে পারেন। যে কোন বর্ননামুলক টেক্সটকে এর আওতায় ধরে নিতে পারেন। একে বলা হয় body.

.          হাইপার লিংক : যেখানে ক্লিক করে সেই পেজের অন্য কোথাও, অন্য পেজ কিংবা অন্য সাইট ওপেন করা যায় তাকে বলে link. সাধারন নিয়মে এর রং নিল রাখা হয় অথবা ইটালিক বা আন্ডারলাইন ব্যবহার করা হয়। এর ওপর মাউস পয়েন্টার আনলে আঙুলসহ হাতের ছবি দেখা যায় যা থেকে ব্যবহারকারী বোঝেন সেখানে ক্লিক করলে কিছু ঘটবে। অবশ্যই ইচ্ছে করলে আপনি অন্যভাবে একে দেখাতে পারেন। সাধারনভাবে এক রঙের, মাউস আনলে আরেক রঙের, ক্লিক করলে আরেক রঙের দেখাতে পারেন। 

.          ইমেজ লিংক : লিংক হিসেবে টেক্সট এর বদলে ছবি বা ভিডিও ব্যবহার করা হতে পারে। সাধারনত বিজ্ঞাপন ব্যবহার করা হয় এভাবে।

.          সার্চবক্স : সাধারনত Search লেখা একটি বাটন এবং পাশে টাইপ করার যায়গা। এখানে টাইপ করে সার্চ বাটনে ক্লিক করলে যা টাইপ করবেন তারসাথে সম্পর্কিত তথ্য খুজে পাওয়া যাবে।

.          ফুটার : ওয়েবপেজের একেবারে লেখা। সাধারনত কোম্পানীর নাম, ঠিকানা, যোগাযোগের বা অন্যান্য লিংক ইত্যাদি, কপিরাইট তথ্য এসব লেখা থাকে এখানে।

আপনি যে সফটঅয়্যারেই ওয়েবপেজ তৈরী করুন না কেন, আপনাকে এই অংশগুলি তৈরী করতে হবে।

এর বাইরেও কিছু বিষয় ব্যবহার করা প্রয়োজন হয়। যেমন Cascading Style Sheet বা CSS। একে পৃথক ফাইল হিসেবে ব্যবহার করা হয়। এরমধ্যে কোড লিখে বলে দেয়া হয় আপনার পেজগুলিতে কোন টেক্সট এর ফন্ট কেমন হবে, ইমেজ কিভাবে দেখা যাবে ইত্যাদি। আপনার সাইটে যদি হাজার হাজার পৃষ্ঠাও থাকে, তাদের প্রতিটি এই তথ্য ব্যবহার করে একইভাবে দেখাবে।

একই পদ্ধতিতে আপনি কোডকেও আলাদা ফাইলে রাখতে পারেন এবং সেখান থেকে ব্যবহার করতে পারেন।

অন্য সফটঅয়্যার ব্যবহার : আপনাকে সবকিছু ডিমওয়েভারে সাজাতে হবে এমন কথা নেই। যদি ওয়ার্ড প্রসেসর (যেমন মাইক্রোসফট ওয়ার্ড) কিংবা পেজমেকিং সফটঅয়্যার (যেমন এডবি ইন-ডিজাইন) ব্যবহার করেন তাহলে সেখানে সুন্দরভাবে সবকিছু সাজিয়ে কাজ কতে পারেন। তারপর তাকে ওয়েবপেজ হিসেবে এক্সপোর্ট করে ড্রিমওয়েভার ব্যবহার করে বাকি কাজ করতে পারেন। ড্রিমওয়েভারের সর্বশেস ভার্শনে (সিএস৫) ওয়ার্ডপ্রেস কিংবা জুমলা থিম তৈরী বা এডিট করা যায়।

আপনি কাজ করবেন আপনার কম্পিউটারে। কিন্তু কাজ শেষে তাকে রাখতে হবে সার্ভারে। ড্রিমওয়েভারের ভেতর থেকেই সার্ভারে আপলোড করতে পারেন। আর কাজ করার সময় ব্রাউজারে কেমন দেখা সেটা জানার ব্যবস্থা তো আছেই।

প্রথম ওয়েবপেজ তৈরী

ওয়েব পেজ সেট-আপ

ড্রিমওয়েভাবে ওয়েবসাইট তৈরীর জন্য আপনি শুরুতেই একটি ফোল্ডার ঠিক করে নেবেন। ছোট সাইটের ক্ষেত্রে মুল ওয়েব ফাইল থেকে শুরু করে সিএসএস, ইমেজ ইত্যাদি সবকিছু একই ফোল্ডারে রাখতে পারেন, কিন্তু এদের জন্য পৃথক সাবফোল্ডার তৈরী করা সুবিধেজনক। একবার ড্রিমওয়েভারকে সেই ফোল্ডারের নাম বলে দিলে পরবর্তীতে ড্রিমওয়েভার নিজেই সেখানকার ফাইলগুলি আপডেট করে নেবে।

.          ড্রিম ওয়েভার চালু করুন। একটি স্ক্রিনে বিভিন্ন ধরনের অপশন দেখা যাবে সিলেক্ট করার জন্য। স্ক্রীনের ডানদিকে নিচের দিকে ফাইল ট্যাবে ফাইলগুলি কোথায় ব্যবহৃত হবে দেখা যাবে। সাধারনভাবে Desktop এবং তারপাশে Manage Sites লেখা থাকার কথা।

.          Manage Sites লিংকে ক্লিক করুন।

.          নতুন সাইট তৈরীর জন্য Manage Sites ডায়ালগ বক্সে New বাটনে ক্লিক করুন।

.          সাইটের জন্য একটি নাম এবং যে ফোল্ডারে ফাইলগুলি থাকবে সেটি সিলেক্ট দিন। এই সাইটনেম শুধুমাত্র কাজ করার সময় ব্যবহৃত হবে, চুড়ান্ত ওয়েবসাইটের কোথাও এটা দেখা যবে না।

.          Servers ট্যাব থেকে সার্ভারের নাম, কানেকশনের ধরন ইত্যাদি বলে দেয়া যেতে পারে। যেমন কাজশেষে সার্ভারে আপলোড করার জন্য FTP. আপাতত এখানে কিছু পরিবর্তন করা প্রয়োজন নেই। এডভান্সড অপশন থেকে বেশকিছু পরিবর্তন করা যায় যেগুলি এখনই ব্যবহার করা প্রয়োজন নেই।

.          OK করলে ফাইলস ফোল্ডারে নতুন সেট করা ফোল্ডারের নাম পাওয়া যাবে।

ড্রিমওয়েভারে ফাইল-ফোল্ডার ইত্যাদি ব্যবহারের জন্য কিছু নিয়ম মানতে হয়। যেমন

.          ক্যাপিটাল লেটার দিয়ে শুরু করবেন না। নামের মাঝখানে ক্যাপিটাল থাকতে পারে, শুরুতে থাকবে না। শুরুতে কোন বিশেষ চিহ্ন ব্যবহার করা যাবে না।

.          নামের মধ্যে ফাকা যায়গা রাখা যাবে না। প্রয়োজনে আন্ডারস্কোর ব্যবহার করুন।

.          কোন ফাইলকে এক ফোল্ডার থেকে আরেক ফোল্ডারে নিতে হলে ড্রিমওয়েভারের ভেতর থেকে করুন। সাথেসাথে সেসম্পর্কিত তথ্য আপডেট করে নেবে ড্রিমওয়েভার।

এই কাজগুলি করার পর নতুন সাইট তৈরী করুন। মেনু থেকে কমান্ড দিন File - New এবং আপাতত Blank Template, HTML Template, এরপর পছন্দমত লেআউট সিলেক্ট করুন। তৈরী একটি ওয়েবসাইট পাওয়া যাবে। এখানে টেক্সট পরিবর্তন থেকে শুরু করে রং, ডিজাইন কিংবা যে কোন পরিবর্তন, ছবি, ভিডিও যোগ করা ইত্যাদি করা যাবে।

সেটা আগামী টিউটোরিয়াল।

By Uzzal Malake