Tutorial- Web Design-2

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

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

সাইট প্লানিং

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

ফটোশপ ব্যবহার না করলে, শেখার জন্য কাগজে মোটামুটি একটা আউটলাইন করে সেটা দেখে কাজ করতে পারেন।

কোড ভিউ, স্প্লিট ভিউ এবং ডিজাইন ভিউ

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

তৈরী ওয়েবপেজ সার্ভারে রাখার পর কোন পরিবর্তন করা প্রয়োজন হলে সেখানে সরাসরি কোড লিখে পরিবর্তন করতে হয় (অথবা পরিবর্তণ করে নতুনভাবে আপলোড করতে হয়)। সেকারনে কোড সম্পর্কে জানা জরুরী।

সাইটের নাম

ইন্টারনেটে কোন ওয়েবসাইট ওপেন করলে টাইটেল বারে সেই সাইটের নাম দেখা যায়। আর ডিমওয়েভারে নতু সাইট তৈরী করলে সেখানে লেখা থাকে untitled document । আপনি শুরুতেই সাইটের নাম টাইপ করে দেবেন। কাজটি একাধিক যায়গা থেকে করা যায়। Title লেখার পাশে untitled document এর বদলে আপনার সাইটের নাম টাইপ করে দিন।

এইচটিএমএল ট্যাগ

ওয়েবপেজ তৈরী হয় এইচটিএমএল কোড ব্যবহার করে। নির্দিস্ট একটি কমান্ড একযায়গায় শুরু হয়, আরেক যায়গায় শেষ হয়। এই অংশটুকুকে বলে ট্যাগ। যেমন হেডার (টাইটেল) লেখার জন্য ব্যবহার করবেন হেডার ট্যাগ। ট্যাগ লিখতে হয় দুপাশে বাকানো ব্রাকেট চিহ্ন দিয়ে, শেষ করার সময় এরসাথে একটি স্লাশ (/) ব্যবহার করতে হয়। যেমন আপনি হেডার ট্যাগ শুরু করবেন <h1> লিখে এবং শেষ করবেন </h1> লিখে। এরমাঝখানে যা লেখা থাকবে সেটা হেডার। ডিজাইন ভিউতে উদাহরনের Instructions হেডার  লেখাটি সিলেক্ট করুন এবং কোড ভিউতে দেখে নিন।

যদি আপনি হেডার হিসেবে Bangladesh লেখা পেতে চান তাহলে ডিজাইন ভিউতে যেমন সিলেক্ট করে পরিবর্তন করতে পারেন তেমনি কোডভিউতে সিলেক্ট করেও করতে পারেন।

হেডার ট্যাগ পরিবর্তন করুন, নতুন ট্যাগ লিখুন

কিভাবে ট্যাগ পরিবর্তন করবেন এবং নতুন ট্যাগ লিখবেন সেটা দেখে নিন।

.          ডিজাইন ভিউতে Instructions লেখাটি সিলেক্ট করে তার পরিবর্তে Bangladesh টাইপ করুন।

.          নতুন ট্যাগ যোগ করার জন্য এর পরের লাইনে টাইপ করুন <h

লক্ষ করবেন টাইপ করার সাথেসাথে আপনাকে সহায়তা করার জন্য কিছু লেখা এসে হাজির হচ্ছে। আপনি পুরো টাইপ না করে সেখান থেকে <h2> সিলেক্ট করে নিতে পারেন।

.          <h2> Images of Bangladesh লিখে </ টাইপ করলে নিজে থেকেই ট্যাগ শেষ হবে।

.          আপনি সার্থকভাবে নতুন একটি হেডার ট্যাগ ট্যাগ লিখেছেন। ডিজাইন ভিউতে দেখা যাবে হেডার ২, হেডার ১ থেকে কিছুটা চোট আকারের। ইচ্ছে করলে এভাবে হেডার ৩ কিংবা ৪ যোগ করতে পারেন।

হেডার ১ থেকে হেডার ২ ছোট, হেডার ৩ তারথেকে ছোট এই নিয়মে কাজ করে। আপনার ওয়েবসাইটে বিভিন্ন যায়গায় যদি এগুলি ব্যবহার করা হয় তাহলে একবার হেডারের মান ঠিক করাই যথেষ্ট।

প্যারাগ্রাফ ট্যাগ ব্যবহার

হেডার ট্যাগ লিখতে ব্যবহার করা হয় <h>, প্যারাগ্রাফ ট্যাগ লিখতে ব্যবহার করা হয় <p>। এই ট্যাগের মধ্যে যতটুকু লেখা থাকবে সেটুকু একটি প্যারাগ্রাফের মত কাজ করবে।

আপনার লেখায় যদি একাধিক প্যারাগ্রাফ থাকে (যেমন উদাহরনের ডকুমেন্টে রয়েছে) তাহলে প্রতিটি প্যারাগ্রাফের শুরু এবং শেষে ট্যাগ ব্যবহার করতে হবে।

লিংক ট্যাগ

লিংকের জন্য ট্যাগ তৈরী সেতুলনায় কিছুটা জটিল মনে হতে পারে। ডিজাইন ভিউতে Link One, Link Two এর যে কোনটি সিলেক্ট করে কোড ভিউতে এজন্য কোড দেখে নিন। আপাতত ডিজাইন ভিউতে লিংকের নাম সিলেক্ট করে নিজের প্রয়োজনীয় শব্দ টাইপ করে নিন।

এখানে উল্লেখ করা ট্যাগগুলির শুরু এব শেষ রয়েছে। কিছু ট্যাগের শুরু থাকলেও শেষে ট্যাগ প্রয়োজন হয় না। যেমন ইমেজ ব্যবহার করা।

হেডার, বডি টেক্সট ইত্যাদি নিজের প্রয়োজন মত পরিবর্তন করে আগামী টিউটোরিয়ালের জন্য সেভ করে রাখুন।

By Uzzal Malake