Thursday, October 27, 2016

Dreamweaver_ part15_ Dreamweaver এ একটি প্রোজেক্ট নিয়ে আলোচনা




প্রোজেক্ট
আমরা এখন Dreamweaver দিয়ে Nova Computer নামে ছোট একটি সাইট তৈরী করব।
১. Dreamweaver খুলুন। Welcome স্ক্রীন আসবে Dreamweaver Site এ ক্লিক করুন।  সাইটির নাম দিন Nova Save করুন। সুতরাং Nova Computer নামে একটি সাইট তৈরী হবে।
Local Site Folder অংশে আপনার ফোল্ডারটি সিলেক্ট করে দিন।
২. HTML পেজটি নিন। Design Window অর্থাৎ ফাকা স্ক্রীন চলে আসবে। এবার আমরা পুরো ফাকা স্ক্রীনটিকে কয়েকটি ভাগে বিভক্ত করে নিব। সেজন্য শুরুতে Body নামে একটি Tag সিলেক্টরের মাধ্যেমে Style তৈরী করে নিব।

৩. CSS Style প্যানেলে New CSS Rule বাটনে ক্লিক করে New CSS Rule ডায়ালগ বক্সে Selector Type ঘরে Tag সিলেক্ট করে Selector Name ঘরে ড্রপ ডাউন থেকে body সিলেক্ট করে OK করুন।
৪. CSS Rule Definition ডায়ালগ বক্সে Background ঘরে  Background Color = হালকা ছাই কালার নিন। Box ঘরে Text Align = Center করে Apply দিয়ে OK করুন।
৫. body ট্যাগের মাধ্যেমে পুরো সাদা স্ক্রীনটি হালকা কালার যুক্ত হয়ে গেছে।
৬. এবার ID Selector এর মাধ্যেমে Wrapper নামে একটি Style তৈরী করার জন্য New CSS Rule বাটনে ক্লিক করুন। New CSS Rule ডায়ালগ বক্সে Selector Type ঘরে ID সিলেক্ট করে Selector Name ঘরে Wrapper দিয়ে OK করুন।
৭. CSS Rule Definition ডায়ালগ বক্সে Background ঘরে  Background Color = ডার্ক সবুজ দিন; Block ঘরে Text Align = left; Box ঘরে Margin এর Same for all চেক বক্স উঠিয়ে Margin  left=80 px ; Margin Top = 50px এবং Height = auto ; Width = 850 দিন। এখানে যে Width টি আমরা ব্যবহার করব ব্রাউজারে সেই মাপ প্রর্দশিত হবে।
৮. CSS Style প্যানেলে Wrapper নামে একটি ID সিলেক্টর তৈরী হবে।
৯. এবার স্ক্রীনটাকে Div Tag এর মাধ্যেমে কয়েকটি ভাগে ভাগ করব। শুরুতে কার্সর রেখে Common ট্যাব সিলেক্ট থাকা অবস্থায় Insert Div Tag বাটনে ক্লিক করুন। Insert Div Tag ডায়ালগ বক্স আসলে Insert অপশনে At Insertion point এবং স্ক্রীনে Wrapper নামে একটি Div Tag তৈরী হবে। ID অপশনে ড্রপ ডাউনে ক্লিক করে Wrapper সিলেক্ট করে দিন।
লক্ষ্য করুন তৈরী করে রাখা Wrapper নামক ID সিলেক্টরটি দেখা যাবে।
১০. আবার Common ট্যাব থেকে Insert Div Tag বাটনে ক্লিক করুন। Insert Div Tag ডায়ালগ বক্স আসলে Insert অপশনের ড্রপ ডাউন থেকে After Start of Tag এবং ডানের বক্সের ড্রপ ডাউন থেকে Wrapper সিলেক্ট করে দিয়ে New CSS Rule বাটনে ক্লিক করুন।
১১. Selector Type অংশের ড্রপ ডাউন থেকে Compound Selector সিলেক্ট করে Selector Name ঘরে #wrapper মুছে #header লিখে দিয়ে OK করুন।
১২. CSS Rule Definition ডায়ালগ বক্সে Box ঘরে Height = 400; Width = 850; Margin = 0 দিয়ে  Apply দিয়ে OK  আবার OK করুন। দেখুন 400/850 মাপের একটি হেডার যুক্ত হয়েছে।
১৩. আবারও Sidebar নামে একটি Style তৈরী করব Div Tag এর মাধ্যেমে Insert Div Tag বাটনে ক্লিক করুন। Insert Div Tag ডায়ালগ বক্স আসলে Insert অপশনে After Tag এবং ডানের ড্রপ ডাউন থেকে #header সিলেক্ট করুন। অর্থাৎ নতুন Div Tag টি #header এর পরে হবে। New CSS Rule বাটনে ক্লিক করুন।

১৪. New CSS Rule ডায়ালগ বক্সে Selector Type ঘরে Compound এবং Selector Name ঘরে #Sidebar লিখে OK করুন। CSS Rule Definition ডায়ালগ বক্সে Background ঘরে যেমন হালকা নীল, Box ঘরে Height = 500px দিয়ে Apply করে OK করুন।
Sidebar নামে আরও একটি Div Tag তৈরী হবে। এবার Main Content নামে আরও একটি Div Tag তৈরী করব।
১৫. একইভাবে Insert Div Tag ডায়ালগ বক্সে Insert অপশনে After Tag এবং ডানের ড্রপ ডাউন থেকে #Sidebar সিলেক্ট করে New CSS Rule বাটনে ক্লিক করুন ; New CSS Rule ডায়ালগ বক্সে Selector Type ঘরে Compound এবং Name ঘরে # Maincontent লিখে OK করুন।
১৬. CSS Rule Definition ডায়ালগ বক্সে Background ঘরে Background Color = হালকা আকাশী এবং Box ঘরে Height = 500px দিয়ে Apply করে OK করুন।  #maincontent নামে আরও একটি Div Tag তৈরী হবে। 
১৭. #Footer নামে আরও একটি Div Tag তৈরী করার জন্য Insert Div Tag বাটনে ক্লিক  করে Insert  অংশে After Tag এবং ডানের অংশে ড্রপ ডাউন অংশে #maincontent সিলেক্ট করে New CSS Rule বাটনে ক্লিক করুন। অর্থাৎ #Footer Div Tag টি  #maincontent টির পরে হবে।
১৮. New CSS Rule  ডায়ালগ বক্সে Selector Name ঘরে #Footer লিখে OK করুন। CSS Rule Definition ডায়ালগ বক্সে Background  Color =  হালকা হলদে কালার দিন। Apply দিয়ে OK করুন।
১৯. File টি‡Index নামে Save করুন। Preview করে দেখুন। আমরা এখানে #header, #Sidebar, #maincontent, #Footer এই চারটি ভাগে ভাগ করলাম। এই চারটি অংশই রয়েছে #wrapper Tag এর মধ্যে। এখন আমরা Sidebar টিকে ছোট করব।
২০. CSS Style প্যানেলে #Sidebar Style টিকে সিলেক্ট করুন। নিচে #Sidebar এর Properties অংশে Add Property বাটনে ক্লিক করে Width দিয়ে দিন = 250.
২১. এবার CSS Style প্যানেলে থেকে  Style টিকে সিলেক্ট করে Add Property বাটনে ক্লিক করে Width দিয়ে দিন = 600 px. কেননা আমাদের Total wrapper এর Width= 850.
২২. আবার #Sidebar Style টি সিলেক্ট করে Add Property বাটনে ক্লিক করে Float= left এবং #maincontent Style টি সিলেক্ট করে Add Property বাটনে ক্লিক করে Float= Rihgt করে দিন।

লক্ষ্য করুন Div Tag দুটি পাশাপাশি অবস্থান করছে।
২৩. নিচের #Footer টির Float ক্লিয়ার করার জন্য CSS Style প্যানেলে #Footer টিকে সিলেক্ট করে Add Property বাটনে ক্লিক করে Clear সিলেক্ট করে Both দিয়ে দিন।
এবার আমরা বিভিন্ন Content যোগ করব।
16.       প্রথমে আমরা #header অংশে একটি Banner যোগ করব। প্রথমে #header এ কার্সর রেখে একটি Banner টেনে এনে header এর উপর ছেড়ে দিন। আমরা আমাদের সাইটে তৈরী করা Banner টেনে এনেছি। Alternative Name চাইলে যে কোন নাম দিন।
প্রথমে header অংশে কার্সর রেখে Common ট্যাব থেকে Table সিলেক্ট করুন। Table ডায়ালগ বক্সে Column=2 ; Row=1 দিয়ে OK করুন। লক্ষ করুন header অংশের উপরে একটি টেবিল সংযেজিত হয়েছে।
17.        এবার টেবিলের কার্সর ধরে প্রয়োজন মত বড় করে নিন। এবার টেবিলের বাম Column এ কার্সর রেখে my site ফোল্ডার হতে Image হতে Logo টি টেনে এনে header এর উপর ছেড়ে দিন।
*
২৬. লক্ষ্য করুন Logo টি টেবিলে সংযোজিত হবে। এবার ডান Column এ কার্সর রেখে লিখুন Nova Computer
২৭. Nova Computer লেখাটি সিলেক্ট করে Properties প্যানেলের HTML বাটন থেকে Format হতে heading 2 দিন।
২৮. Enter দিয়ে পরের লাইনে লিখুন Learn form Begining... Dont Late...Late...Late। পরের লেখাটুকু সিলেক্ট করে Properties প্যানেলের CSS বাটনে থেকে Color অংশ হতে সাদা কালার দিন।
২৯. CSS Rule definition ডায়ালগ বক্স আসলে Selector Name রেখেই OK করুন।
৩০. লক্ষ্য করুন Text টুকুন সাদা রং হয়ে গেছে।
৩১. এবার Main menu তৈরী করুন আগের মতন করে Home, About Us, Products, Tutorials, Contact Us নামে ৫টি Menu তৈরী করুন। আমরা পূর্বের অধ্যায়ে দেখেয়েছি কিভাবে মেনু তৈরি করতে হয়।
৩১. Sidebar এ টেক্সগুলো লিখি। Main Content এ কার্সর রেখে Main Content টি একটি টেবিল আনি। টেবিলের চারপাশে টেনে বড় করে দেই।
৩২. একঘরে টেক্সট গুলো লিখি অন্য ঘরে ছবিগুলো যুক্ত করি।
৩৩. মেনুগুলোর সাথে Home এর সাথে Home ; About Us এর সাথে About Us ; Products এর সাথে Products, Tutorials এর সাথে Tutorials এর Contact Us এর সাথে Contact Us পেজের Link তৈরী করে দিন।
আমদের সাইটে পেজ গুলো তৈরী করা আছে নিজেরাও পেজ তৈরি করে নিতে পারেন। শেষে footer অংশে লিখে File >Save করে Preview করুন। আপনার web site টি তৈরি হয়ে গেল।

Previous Post                                                                                           Next Post

  বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।

Book Name: Mastering Microsoft  Word
Writer: Bappi Ashraf
Published By: Gyankosh Prokashani
Amount of Pages: 464
First Publish: October-2004
Last Edition: We've February-2015 edition. Future edition may be existed!
Book Price: BDT 350 (30% Discount)
 The writer of this book has told that he has written this book with the concept of "teach yourself". On the other hand, Web Design is a thing which is interesting to learn. He has also told that the book is full of fan and enjoyment so that a person can learn Web Design by himself by playing with the example projects of this book.  Book's CD Link below... 

 cd

RELATED POST LINKS BELOW ********************************************



Dreamweaver_ part14_Main মেনু তৈরি করা, Main menu তে Image ও Hover সেট করা



Main মেনু
আমরা এখন মেইন মেনু নামে একটি বার তৈরি করব । যার মধ্যে তিনটি বাটন থাকবে । আমরা আমাদের সাইটটিকে Div Tag এর মাধ্যমে বিভক্ত করে নিয়েছি। কিভাবে  Div Tag এর মাধ্যমে পেজ বিভক্ত করতে হয় তা আপনারা দেখেছেন । উপরে রয়েছে #header তারপর #maincontent ডানে #sidebar নিচে #footer । আমরা #header  এর মধ্যে আর একটি মেনু তৈরি করব । চলুন শুরু করি।
১. CSS Styles প্যানেল থেকে #header এ ক্লিক করে সিলেক্ট করুন।

২. কার্সর দিয়ে header এর Image এর উপর ক্লিক করে কি বোর্ড দিয়ে রাইট Arrow চেপে Enter দিন। Image এর নিচে header  এর মধ্যে ফাঁকা জায়গা তৈরি হবে।

৩. এখানে কার্সর থাকা অবস্থায় একটি Div Tag তৈরি করব Mainmenu নামে। Common tab থেকে Insert Div Tag  এ ক্লিক করুন।

Insert অপশনে At insertion point রাখুন, ID ঘরে নাম দিন Mai menu .OK করুন। লক্ষ্য করুন Main menu নামে একটি Div Tag   তৈরি হয়েছে।

৪. Code view তে যান। লক্ষ্য করুন header Tag এর মধ্যে Main menu Div Tag   টি অবস্থান করছে।

৫. পেজে ফিরে আসুন । যে মেনু গুলো দিতে চান Enter দিয়ে সেই নামগুলো লিখুন। আমরা দিলাম Home About us, Products । লেখা তিনটিকে সিলেক্ট করে Properties প্যানেল থেকে Unordered list করে দিন।

এখন আমরা একটি style তৈরি করব Unordered list এর উপর ।
৬. CSS Styles প্যানেল থেকে New CSS Rule বাটনে ক্লিক করুন। New CSS Rule ডায়ালগ বক্স আসলে Selector Name ঘরে liমুছে দিয়ে OK করুন। কিছু Properties সেট করার জন্য CSS Rule definition ডায়ালগ বক্স আসবে।

৭. Box ঘরে Width 100% ডানে Px ঘরের নিন্মতীরে ক্লিক করে % সিলেক্ট করে দেন। যতটুকু লেখা ততটুকু Width থাকবে। Float করে দিন left, Padding=0 Margin=0.
৭. List ঘরে list style –type ঘরে None এবং list style ঘরে None করে দেই । Positioning ঘরে Width 100% করে দেন। Apply করে OK করুন। লক্ষ্য করুন Unordered list গুলো চলে গিয়ে একদম বাম পাশে অবস্থান করছে।

এবার মেনু গুলোকে পাশাপাশি আনার জন্য আরও একটি style তৈরী করব।
৯. মেনু গুলো সিলেক্ট করে CSS Styles প্যানেল থেকে New CSS Rule বাটনে ক্লিক করে New CSS Rule ডায়ালগ বক্স আসলে Selector Name ঘরে ul এর ডানে li লিখে দিন। অর্থাৎ এবার আমরা list  এর উপর Style তৈরি করব। OK করুন।

১০. CSS Rule defination ডায়ালগ বক্সেType ঘরে Font Family নামক দেই Arial ,Helvetica , Sens- Serif ; Block ঘরে Display এর ড্রপ ডাউন থেকে Block ; Box ঘরে Padding Some of all টি চিহ্ন উঠিয়ে দিয়ে top =10 Left=30 ; MarginSome of all টি চিহ্ন উঠিয়ে দিয়ে Left=30,Float=Left করে Apply দিয়ে OK করুন।

দেখুন মেনু গুলো পাশাপাশি অবস্থান করছে ।

এবার আমরা শুধু Box টির উপর একটি Style করবো্
১১. বক্সটিকে সিলেক্ট করে CSS Styles প্যানেল থেকে New CSS Rule বাটনে ক্লিক করুন।

১২. New CSS Rule ডায়ালগ বক্স আসলে Selector Nameঘরের ul মুছে দিতে হবে। অর্থাৎ #header# mainmenu লেখা থাকবে। অর্থাৎ বক্সের উপর প্রভাব পরবে। OK করুন।

১৩. CSS Rule definition ডায়ালগ বক্সে কিছু Properties সেট করুন। Positioning  Width 350 px , heihgt =30px ; Position=absolute ; Placement Top= Top= 30 ; Left=235 Apply করে OK করুন।

দেখতে পাবেন বক্সটি Image এর উপর উঠে পড়বে। এখান থেকে আমরা ড্রাগ করে জায়গা মত বসাতে পারব।

বক্সটিকে চাইলেই এবার আপনি ড্রাগ করে মুভ করতে পারবেন।

১৪. বক্সটির Manu গুলো সিলেক্ট করে আপনার সহশ্লিষ্ট link তৈরী করে নিন।  কিভাবে link তৈরি করতে হয় তা আপনারা আগেই দেখেছেন।
Main menu  তে Image সেট করা
Main menu তে বৈচিত্র আনার জন্য আমরা মেনু লিস্ট Style টি তে গিয়ে বিভিন্ন ভাবে Properties সেট করতে পারি।
১৫. ডান দিকে CSS Styles প্যানেলে #header# mainmenu ul li লেখা style টি র উপর ডাবল ক্লিক করুন ।

১৬. CSS Rule defination ডায়ালগ বক্স আসলে Backgroud বক্সে Backgroud Image Browse বাটনে ক্লিক করুন।
১৭. সংশ্লিষ্ট Image টিকে সিলেক্ট করে OK করুন। Background Image টি দিয়ে OK করুন।

মেনু বাটনে Hover সেট করা
Hover হচ্ছে আমরা যখন মাউস পয়েন্টার মেনু বাটনগুলোর উপর নেই তখন মেনু বাটনগুলোর কালার চেন্জ হবে। মনেকরি লেখা হবে সাদা এবং Bold হবে।
১৮. Main menu র যেকোন বাটনের টেক্সট সিলেক্ট করে CSS Styles প্যানেলের New CSS Rule বাটনে ক্লিক করুন।
১৯. New CSS Rule ডায়ালগ বক্সে Selector ঘরে লক্ষ্য করুন #header# mainmenu ul li a লেখা এসেছে । পাশে লিখুন : hover, hover লেখার পূর্বে অবশ্যই কোলন (:) দিতে হবে। স্পেস না দিয়ে লিখবেন।

২০. CSS Rule definition ডায়ালগ বক্স আসলে Type ঘরে Color =সাদা এবং Font – Weigh= bold করে OK করুন।


২১. File>Save করে Preview করুন।
২২. Main menu তিনটির যে কোন একটি উপর মাউস নিন। দেখুন লেখা মোটা ও সাদা হচ্ছে।