Showing posts with label Tutorial- Web Design. Show all posts
Showing posts with label Tutorial- Web Design. Show all posts

Sunday, April 20, 2014

Tutorial- Web Design-5


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

সিএসএস (Cascading Style Sheet) শব্দটি ব্যবহার না করলেও হয়ত এসম্পর্কে শুনেছেন এর মাধ্যমে ঠিক করা হয় টেক্সট কিংবা অন্য অবজেক্ট ঠিক কোথায়-কিভাবে থাকবে এর সুবিধে হচ্ছে যদি নতুন আরেকটি বা একাধিক পেজ তৈরী করেন এবং অন্য টেক্সট ব্যবহার তার ষ্টাইলও একইরকম হবে
সিএসএস কে একটি বক্স এর সাথে তুলনা করতে পারেন যেখানে যাই রাখা হোক না কেন তা বক্সের সাথে মানানসই হবে এর ৪টি অংশ, Margin, Border, Padding এবং Content
.          মার্জিন হচ্ছে স্ক্রীনের ওপর বা বামদিক থেকে কতটা দুরে থাকবে এর হিসেব করা হয় ঘড়ির কাটার মত প্রথমে ওপরদিক, এরপর যথাক্রমে ডান, নিচ এবং বামদিক
.          বর্ডার হচ্ছে সিএসএস এর চারিদিকে কোন লাইন থাকবে কিনা, থাকলে তার রং, পুরুত্ব ইত্যাদি কি হবে
.          প্যাডিং হচ্ছে বর্ডার থেকে মুল তথ্যের দুরত্ব
.          কন্টেন্ট হচ্ছে সিএসএস বক্সের মুল তথ্য

বক্সের অবস্থান অনুযায়ী নানা ধরনের বক্স
ওয়েবপেজে যখন কোন বক্স তৈরী করবেন তখন আপনাকে বলে দিতে হবে বক্সটি কোথায় থাকবে এর কয়েকটি ধরন রয়েছে, Static, Relative, Inherit, Absolute, Fixed
.          ষ্ট্যাটিক বক্স সবচেয়ে সরল ধরনের একে যেখানে রাখা হবে সেখানেই থাকবে, কোনধরনের অফসেট ব্যবহার করে একে সরানো যাবে না
.          রিলেটিভ অনেকটাই ষ্ট্যাটিক এর মত, পার্থক্য হচ্ছে বাম কিংবা ওপরের মার্জিন পরিবর্তন করলে এর অবস্থান পরিবর্তন হবে
.          ইনহেরিট বক্স প্যারেন্ট বক্সের অধিনস্ত বক্স প্যারেন্ট এর পরিবর্তনের সাথেসাথে এরও পরিবর্তন হয়
.          এ্যাবসলিউট বক্স নির্দিস্ট পিক্সেল অনুযায়ী অবস্থান করে, অন্য সবকিছুর সাথে পরিবর্তিত হয় না সাধারনভাবে বলা হয়, এই পদ্ধতি ব্যবহার করবেন না
.          ফিক্সড বক্স মুল ওয়েবপেজের নির্দিস্ট যায়গায় থাকে

এছাড়া ফ্লোটিং বক্স নামের পদ্ধতিতে কোন বক্সের অবস্থান যে কোন সময় পরিবর্তন করার ব্যবস্থা রাখা যেতে পারে অন্যান্য অবজেক্টের সাথে মিল রেখে এর অবস্থানের পরিবর্তন হয়

মনে হতে সিএসএস এবং লেআউট ব্যবহার বেশ জটিল ড্রিমওয়েভারে খুব সহজেই একাজ করা যায় আগামী টিউটোরিয়ালে এর ব্যবহার উল্লেখ করা হবে

By Uzzal Malake

Tutorial- Web Design-4


ড্রিমওয়েভার দিয়ে ওয়েজপেজ তৈরী :
লিংক ব্যবহার : ওয়েব পেজে লিংক টেক্সট বা ইমেজ বিভিন্নভাবে থাকতে পারে যেভাবেই থাকুক না কেন, লিংকের নিজস্ব কিছু ধরন রয়েছে সবচেয়ে সাধারন লিংক হচ্ছে এইচটিটিপি, এর মাধ্যমে ওয়েব পেজ, ইমেজ, ভিডিও ইত্যাদি ব্যবহার করা যায় এর বাইরেও আরো কয়েক ধরনের লিংক রয়েছে

telnet:// টেলনেট লিংক ব্যবহার করে ব্যবহারকারী অন্য কম্পিউটার (হোষ্ট) কন্ট্রোল করতে পারেন যেমন কোন কম্পিউটারের সমস্যা দুর করার জন্য সেই কম্পিউটারকে লোকাল কম্পিউটারের মত ব্যবহার করা
mailto: মেইল-টু লিংকে ক্লিক করে নির্দিষ্ট ইমেইল এড্রেসে ইমেইল পাঠানো যায় নির্দিষ্ট যায়গায় ইমেইল পাঠানোর জন্য এই ব্যবস্থা রাখা হয় সেখানে ক্লিক করলেই প্রাপক হিসেবে সেই নির্দিষ্ট এড্রেস ব্যবহৃত হয়
news:// নিউজ লিংক নির্দিস্ট নিউজ গ্রপের সাথে সংযোগের জন্য ব্যবহৃত হয়
http://সবচেয়ে বেশি ব্যবহৃত লিংক ইন্টারনেটের যে কোন পেজে যাওয়ার জন্য ব্যবহার করা হয়
ftp://ফাইল ট্রান্সফার প্রোটোকল ব্যবহার করা হয় বড় আকারের ফাইল আপলোড বা ডাউনলোডের জন্য সাধারনত এফটিপি সার্ভার ব্যবহার করে এটা করা হয় ব্যবহারকারীর ইউজারনেম এবং পাশওয়ার্ড প্রয়োজন হয়
কোন লিংক ব্যবহারের সময় লিংকপাথ বলে দেয়া প্রয়োজন হয় ধরনের পাথ ব্যবহার করা হয়, abdolute, document relative এবং site root relative
এবসলিউট পাথ হচ্ছে নির্দিস্ট যায়গা যেমন অমুক ওয়েব সাইটের অমুক ফোল্ডারে অমুক ডকুমেন্ট (http://mysite/index.htm)অন্য সাইটের কিছু ব্যবহারের জন্য এটা সবচেয়ে ভাল পদ্ধতি
ডকুমেন্ট রিলেটিভ পাথ হচ্ছে এক ডকুমেন্টের সাপেক্ষে আরেক ডকুমেন্টের অবস্থান বর্তমান যে ডকুমেন্ট ব্যবহার করছেন সেই একই ফোল্ডারে আরেক ডকুমেন্ট ব্যবহারের জন্য সেই ডকুমেন্টের নাম উল্লেখ করাই যথেষ্ট এরসাথে স্লাস (/..) ব্যবহার করে সাবফোল্ডারের নাম উল্লেখ করতে হয় একই ফোল্ডার বা কাছাকাছি ফোল্ডারের জন্য এই ধরনের পাথ বেশি কার্যকর
সাইট রুট রিলেটিভ পাথ হচ্ছে সাইটের রুম ফোল্ডারের থেকে ডকুমেন্ট পর্যন্ত পাথ বড় ধরনের ওয়েবসাইটে এই পদ্ধতি বেশি প্রয়োজন হয়
রিলেটিভ পাথের লিংক তৈরী করা
ড্রিমওয়েভার নিজে থেকে ডকুমেন্ট রিলেটিভ পাথ ব্যবহার করে প্রথম টিউটোরিয়ালে শুরুতেই এই পদ্ধতি উল্লেখ করা হয়েছে পরবর্তীতে এটা পরিবর্তন করলে আগের লিংকগুলি পরিবর্তিত হবে না, কাজেই কাজটি শুরুতেই করে নেবেন
তারপরও, যদি কোন কারনে পরিবর্তণ করা হয় তাহলে যা করবেন;
.          Site মেনু থেকে Manage Site ক্লিক করুন
.          যে সাইটের পরিবর্তন করতে চান সেখানে ক্লিক করুন এবং Edit ক্লিক করুন
.          Advanced Setting ক্লিক করুন
.          Local Info ক্লিক করুন
.          Document অথবা Site Root ক্লিক করুন
.          Change the Remote server’s Web URL ক্লিক করুন এবং পরিবর্তণ করুন
.          Save ক্লিক করুন

লিংক যোগ করা
.          টেক্সট লিংক যোগ করার জন্য টেক্সটটুকু সিলেক্ট করুন, অথবা নতুন টেক্সট লিখে নিন
.          Insert মেনু থেকে Hyperlink সিলেক্ট করুন যে টেক্সট সিলেক্ট হয়েছে সেটা উইন্ডোতে দেখা যাবে প্রয়োজনে সেখানে অন্যকিছু লিখে দিন
.          Link অংশে লিংক টাইপ করে দিন ব্রাউজ করে নির্দিস্ট পেজকে লিংক হিসেবে ব্যবহার করতে পারেন
.          Target অংশে নতুন লিংক কিভাবে ওপেন হবে বলে দিন একই ডকুমেন্টের বদলে, নতুন উইন্ডোতে, নতুন ট্যাবে, সবচেয়ে ওপরের উইন্ডোতে ইত্যাদি ধরন সিলেক্ট করতে পারেন
.          Title অংশে টাইটেল টাইপ করে দিন লিংকের ওপর মাউস পয়েন্টার আনলে এই লেখা দেখা যাবে
.          Access Key অংশে লিংকের জন্য শর্টকাট কি বলে দিতে পারেন
.          Tab Index অংশে ট্যাব এর জন্য সংখ্যা বলে দিতে পারেন ট্যাব ব্যবহার করলে কখন সেখানে পয়েন্টার যাবে ঠিক করার জন্য
.          সবকিছু ঠিক করার পর OK বাটনে ক্লিক করুন

ইমেইল লিংক তৈরী
.          যে টেক্সটে লিংক হিসেবে ব্যবহার করতে চান সেটুকু সিলেক্ট করুন
.          Insert মেনু থেকে email Link সিলেক্ট করুন
.          ইমেইল এড্রেস টাইপ করে দিন

লিংক পরিবর্তন করা
কোন লিংক তৈরীর পর তাকে পরিবর্তণ করা হলে প্রোপাটিজ প্যানেল ব্যবহার করুন;
.          প্রোপার্টিজ প্যানেল ওপেন করা না থাকলে Window – Properties সিলেক্ট করে ওপেন করুন
.          প্রয়োজনীয় পরিবর্তন করে নিন

কোন ইমেজকে লিংক হিসেবে ব্যবহার করার জন্য ইমেজ সিলেক্ট করে লিংক তৈরীর কমান্ড দিন ইমেজের যে অংশে ক্লিক করলে কাজ করবে সে অংশকে বলে হটস্পট আপনি পুরো ইমেজের বদলে নির্দিষ্ট অংকে হটস্পট হিসেবে ব্যবহার করতে পারেন হটস্পট তৈরীর জন্য,
.          ইমেজ সিলেক্ট করুন
.          প্রোপার্টিজ প্যানেলে Map অংশ থেকে টুল ব্যবহার করে নির্দিস্ট হটস্পট তৈরী করুন আয়তাকার, বৃত্তাকার কিংবা যে কোন ধরনের সেপের হটস্পট তৈরীর ব্যবস্থা রয়েছে


By Uzzal Malake

Tutorial- Web Design-3

 
ড্রিমওয়েভার দিয়ে ওয়েজপেজ তৈরী :
ইমেজ ব্যবহার
ওয়েব পেজে মুল বিষয় ৩টি, টেক্সট, ইমেজ এবং লিংক ড্রিমওয়েভারে ইমেজকে দুভাবে পরিচিতি দেয়া হয়, ষ্ট্যাটিক এবং ডায়নামিক ষ্ট্যাটিক ইমেজ হচ্ছে কোন ইমেজ যা নির্দিস্ট যায়গায় রেখে দেয়া হয় এর কোন পরিবর্তণ করা হয় না অন্যদিকে ডায়নামিক ইমেজ হচ্ছে যাকে সরানো হতে পারে, একাধিক ইমেজ ব্যবহার করে স্লাইড শো হতে পারে

ড্রিমওয়েভারে ষ্ট্যাটিক ইমেজ ব্যবহার ড্রাগ এন্ড ড্রপের মত সহজ একাধিক পদ্ধতিতে একাজ করা যায় ধরে নেয়া হয়েছে যে ইমেজ ব্যবহার করবেন তাকে আগেই তৈরী করে নেয়া হয়েছে
.          যে ওয়েব পেজে ইমেজ ব্যবহার করতে চান সেটা ওপেন করুন
.          যেখানে ইমেজ রাখতে চান সেখানে ক্লিক করে কার্সর রাখুন
.          নিচের যে কোন একটি পদ্ধতি ব্যবহার করুন

এসেট প্যানেল : এসেট প্যানেল ওপেন করুন, ইমেজটি সিলেক্ট করুন এবং ড্রাগ করে ওয়েবপেজে আনুন
অথবা,
ফোল্ডার : যে ফোল্ডারে ইমেজটি রয়েছে সেটি ওপেন করুন ইমেজকে ড্রাগ করে সরাসরি ওয়েবপেজে আনুন
অথবা,
ইনসার্ট প্যানেল : ইনসার্ট প্যানেলে Common ট্যাব ক্লিক করুন, Image বাটনে ক্লিক করুন, ইমেজ সিলেক্ট করুন এবং OK বাটনে ক্লিক করুন
অথবা,
ইনসার্ট মেনু : মেনু থেকে Insert - Image কমান্ড দিন এবং ইমেজ সিলেক্ট করুন
.          ইমেজটি যদি সাইট ফোল্ডারে না থাকে তাহলে প্রশ্ন করা হবে তাকে সেখানে কপি করবেন কি-না সেখানে Yes বলুন
.          Alternate Text Input Field ক্লিক করে ইমেজের সংক্ষিপ্ত বর্ননা টাইপ করুন (সার্চ ইঞ্জিন একে সহজে খুজে পাবে)
.          ফোল্ডার আইকনে ক্লিক করে আরো বর্ননা লিখতে পারেন
.          OK বাটনে ক্লিক করুন

ইমেজ পরিবর্তন করা
ওয়েভ পেজে ইমেজ ব্যবহার করার পর ড্রিমওয়েভারের ভেতর থেকে তাকে বড়-ছোট করা যায় যদিও এই কাজ আগে করে তারপর ইমপোর্ট করাই ভাল
বড়ছোট করার কাজ দুধরনের হতে পারে, সাময়িক এবং স্থায়ী সাময়িক পরিবর্তন মুল ইমেজের পরিবর্তন করে না, স্থায়ী পরিবর্তন মুল ছবিকে পরিবর্তন করে তবে ডিস্কের ফাইলের পরিবর্তন করে না ফলে বিভিন্ন ব্রাউজারে, ব্যবহারকারীর কাছে বিভিন্নরকম দেখাতে রে
.          ওয়েব পেজে ইমেজটি সিলেক্ট করুন
.          Windows মেনুতে Properties ক্লিক করুন প্রোপার্টিজ প্যানেল দেখা যাবে
.          যে কোন একটি পদ্ধতিতে ইমেজ পরিবর্তণ করুন,
সিলেকশন হ্যান্ডেল ব্যবহজার করে পরিবর্তন করুন
সিফট-ড্রাগ ব্যবহার করে অনুপাত ঠিক রেখে পরিবর্তন করুন
প্রোপার্টিজ প্যানেলে ইমেজের দৈর্ঘ্য এবং প্রস্থ টাইপ করে দিন
.          ইমেজকে আগের অবস্থায় আনার জন্য Reset Size বাটণে ক্লিক করুন

ইমেজের ব্রাইটনেস-কন্ট্রাষ্ট কমবেশি করা
.          প্রোপার্টিজ প্যানেলে Brightness and Contrast বাটনে ক্লিক করুন
অথবা
.          ইমেজ সিলেক্ট করে মেনু থেকে কমান্ড দিন
.          ব্রাইটনেস/কন্ট্রাষ্ট ডায়ালক বক্সে পরিবর্তন করুন

·        ড্রিমওয়েভারে ব্যবহারের জন্য জন্য ইমেজ তৈরীতে ফটোশপ ব্যবহার করতে পারেন অথবা তুলনামুলক সহজ ফায়ারওয়ার্কস ব্যবহার করতে পারেন
·        ইমেজ তৈরীর সময় ৭২ ডিপিআই রেজ্যুলুশন ব্যবহার করুন সাধারনভাবে ওয়েবে JPG, GIF, PNG ফরম্যাটের RGB ইমেজ ব্যবহার করা হয়

By Uzzal Malake