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 টি তৈরি হয়ে গেল।
Book Name: Mastering Microsoft Word
RELATED POST LINKS BELOW ********************************************
বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।
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...
