css_part41
Professional Project Final (Special Project)
নিশ্চয় ইতোমধ্যেই HTML ও CSS সম্বন্ধে যথেষ্ট জ্ঞান আমাদের হয়েছে। আমরা Program069 নম্বরে যে Professional Projectটি অর্ধ সমাপ্ত
রেখেছিলাম সেটি এখন শেষ করবো। এই ধরনের project এর সাথে java Script, php, mysql ইত্যাদি ব্যবহার করে আরও professional লুক দেব। আসুন দ্রত প্রথমে CSS ফাইল এবং পরে HTML
ফাইলটি তৈরী করবো। লক্ষ্য করে থাকবেন CSS ফাইলে #wrapper অংশে width=Auto এবং left ও top মার্জিন যোগ করা
হয়েছে। এতে Logo তে padding যোগ করা হয়েছে। Logo টি 20px বামে বাঁকা জায়গা রেখে প্রদর্শিত হচ্ছে। subtext নামে একটি class নিয়ে তাকে ফন্টের সাইজ ও
কালার পরিবর্তন করা হয়েছে। HTML ফাইলে span যোগ করে logo টেক্সটকে দুই লাইনে ভাগ
করে এবং নিচের Text এর সাইজ ছোট ও ভিন্ন কালার দেখানো হয়েছে, menu তে list যোগকরা হয়েছে এবং ul ও li তে কালার, বর্ডার ইত্যাদি যোগ করা হয়েছে। ul.menuitem.li
তে link, visited, hover ইত্যাদি যোগ করা হয়েছে।
content অংশে padding, bsckground-color যোগ করা হয়েছে। Content
অংশে একটি class যোগ করে font এর কালার ও সাইজ
পরিবর্তন করা হয়েছে। footer এ padding,
background-color, text-align সংযোগ করা হয়েছে। content
এর মধ্যে বিভিন্ন link, content ও Image যোগ করা হয়েছে। ইত্যাদি পরিবর্তন লক্ষ্য করুন।
Program_
Style138 (My Style_final.css)
নিচের মত কোডিংসহ একটি ফাইল তৈরী করে My Style_final.css নাম দিয়ে সেভ করুন।
/*
CSS Document */
body{background:#CCCCCC;}
#wrapper{background:#FFFFFF;
width:850px;
height:auto;
margin-left:80px;
margin-top:50px;}
#head{background-image:url('top_bg.jpg');
width:850px;
height:400px;
margin:0px;}
#logo{width:300px;
height:80px;
padding:20px;
font-size:24px;
float:left;}
.subtext{font-family:Arial,
Helvetica, sans-serif;
font-size:14px;
color:#ffffff;}
#menu{width:450px;
height:30px;
float:right;
font-size:18px;
margin-top:100px; }
ul.menuitem
{
list-style:none; /* removes bullets */
margin:0;
padding:0;
width:auto;}
ul.menuitem
li {
padding:0;
margin:0;
display:inline;}
ul.menuitem
li a:link, ul.menuitem li a:visited {
float:left;
font-weight:bold;
text-decoration:none;
color:white;
background-color:green;
padding:5px;
border-right:2px
solid white; }
ul.menuitem
li a:hover {
background-color:red; }
#image{width:850px;
height:300px;}
#content{width:830px;
height:400px;
background:PowderBlue;
padding-top:00px;
padding-bottom:25px;
text-align:justify;
padding-left:10px;
padding-right:10px;}
#content_left{width:243px;
height:auto;
padding-left:10px;
padding-right:10px;
float:left;
text-align:justify;}
#content_mid{background-color:PowderBlue;
width:250px;
height:auto;
float:left;
text-align:justify;
padding-left:10px;
padding-right:10px;}
#content_right{width:263px;
height:auto;
padding-left:10px;
padding-right:10px;
float:right;
text-align:justify;}
.title{font-size:22px;color:#0099FF;}
img.sample
{ float:left; width:75px; height:100px; margin:5px; }
#footer{width:850px;
height:auto;
color:#ffffff;
background:#ff0000;
padding-top:10px;
padding-bottom:10px;
text-align:center;
-moz-border-radius-bottomleft:15px;
/*from here for bottom*/
-moz-border-radius-bottomright:15px;
-webkit-border-bottom-left-radius:15px;
-webkit-border-bottom-right-radius:15px;}
Program_CSS138_part1
(My Index_final.html)
নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী
করুন।
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html";/>
<title>web
example</title>
<link
href="My Style_final.css" rel="stylesheet"
type="text/css" />
<style
type="text/css">
</style></head>
<body>
<div
id="wrapper">
<div
id="head">
<div
id="logo"> <img src = "Logo.jpg"
height="75" width="75" align="left"/>
Nova
Computer <br/> <span class="subtext">Learn from
Beginning..... Don't late....late.. late.</span></div>
<div
id="menu"><ul class="menuitem">
<li><a href="My
Index_final.html">Home</a></li>
<li><a
href="aboutus.html">About Us</a></li>
<li><a
href="#">Products</a></li>
<li><a
href="#">Tutorials </a></li>
<li><a
href="#">Contact Us</a></li>
</ul>
</div>
<div
id="image"><img src="images/banner.jpg"
height="300"
width="850" align="left" /></div>
</div>
<div
id="content">
<div
id="content_left"> <span class="title"> Web/Blog </span>
<br />
Look!
here is some link. Click to get related website <br />
<a
href="http://novacomputerbd.com"> Nova Computer </a> <br
/>
<a
href="http://bappiashraf.blogspot.com"> Bappi's Blog </a> <br
/>
<a
href="http://google.com">Google</a></p>
</div>
<div
id="content_mid"><span class="title">About Nova
Computer</span> <br />
Look! Our product written by Bappi Ashraf. He
has written various book about computer. And go on..Look! Our product written
by Bappi Ashraf. He has written various book about computer. And go on.. Look!
Our product written by Bappi Ashraf. He has written various book about
computer. And go on.. Look! Our product
written by Bappi Ashraf. He has written various book about computer. And go
on..
Bappi Ashraf is an actor and computer books
author. He has written verious kind of computer books.
</div>
<div
id="content_right"><span class="title">
Image
Gallery </span><br /> Look! here is some Image.<br />
<img
class="sample" src="Photoshop.jpg">
<img
class="sample" src="Illustrator.jpg">
<img
class="sample" src="Premiere.jpg">
<img
class="sample" src="Flash.jpg">
<img
class="sample" src="Word.jpg">
<img
class="sample" src="Excel.jpg">
<img
class="sample" src="Office.jpg">
<img
class="sample" class="sample"
src="Windows.jpg">
<img
class="sample"src="Photoshop.jpg"/>
</div>
</div>
<div
id="footer">all right reserved by <a
href="http://bappiashraf.blogspot.com">Bappi Ashraf</a>
</div>
</div>
</body>
</html>
Image_CSS138_part1(Index=Home)
ব্রাউজার দিয়ে খুললে নিচের মত ফলাফল পাওয়া যাবে।
******************************************************************************
বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।
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)
What Will You Get Basically
The
writer of this book has told that he has written this book with the
concept of "teach yourself". On the other hand, Word 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 word by himself by playing with
the example projects of this book.
পরিবেশক/প্রাপ্তিস্থান
ঢাকা - বাংলাবাজার - * সিসটেক পাবলিকেশনস্, * আজিজিয়া লাইব্রেরী, * সাহিত্য কোষ, *কাজী ট্রেডার্স
ঢাকা - নিউমার্কেট - * বুক ভিউ, * ঢাকা বুক কর্পোরেশন, *বাংলাদেশ লাইব্রেরী
ঢাকা - ষ্টেডিয়াম মার্কেট - * অনুপম জ্ঞানভান্ডার,
ঢাকা - নীলক্ষেতঃ * ডলফিন, *
ফরিদা কর্পোরেশন,* রানা বুক সেন্টার, * সাকিব বুক সেন্টার,* মডার্ন বুক
সেন্টার, *ফাহাদ বুকস্, *মুক্তা এন্টারপ্রাইজ, *ফারহান বুকস্, *হক
লাইব্রেরী, পপুলার বুকস্,
ঢাকাঃ ফার্মগেট, *
তোফাজ্জল বুক হাউস, * ছাওয়াল বুকস্, * সেলিম বুকস্, * এম, জামান
এন্টারপ্রাইজ, * আদর্শ কলেজ লাইব্রেরী, * বুক ম্যান, * ষ্টুডেন্ট
লাইব্রেরী, * খান বুক সেন্টার
খুলনাঃ * সোহাগ বুক সেন্টার, * নূর লাইব্রেরী, * সালেহিয়া লাইব্রেরী * আজিজিয়া লাইব্রেরী
রাজশাহীঃ * বুক ওয়ার্ল্ড, * বুক মার্ট * আলীগড় লাইব্রেরী * সংলাপ, * রহমান বুক, * সূচীপত্র, * আব্দুলস্নাহ্ এন্ড ব্রাদার্স
চট্টগ্রামঃ *
বুক ম্যান, নিউমার্কেট, * বুক এম্পোরিয়াম, আগ্রাবাদ, , * বুক লাইব্রেরী,
আন্দরকিলা, * সিদ্দিকিয়া লাইব্রেরী, আন্দরকিলা,* বুক সেন্টার, আন্দরকিলা, *
ন্যাশনাল বুক, আন্দরকিলা,* প্রাইম বুক, আন্দরকিলা, *ফ্রেন্ডস বুক,
আন্দরকিলা, * প্রতিভা লাইব্রেরী, আন্দরকিলা, *আর আলম বুকস,
আন্দরকিলা,*গুলিস্থান লাইবেরী, বিপনী বিতান নিউমার্কেট, *অমর বই ঘর, নূপুর
মার্কেট, ষ্টেশন রোড, *নিউ বুক ল্যান্ড, চকবাজার *কারেন্ট বুক স্টোর, জলসা
মার্কেট
কুষ্টিয়াঃ * বইমেলা, এন, এস, রোড
চুয়াডাঙ্গাঃ * পুথিঘর লাইব্রেরী, বড় বাজার
যশোরঃ * জনতা লাইব্রেরী, দড়াটানা
কুমিল্লাঃ * শাহীন লাইব্রেরী
বরিশাল* বুকভিলা
সিলেটঃ * বন্ধু লাইব্রেরী, * নিউ নেশন লাইব্রেরী, * অক্সফোর্ড লাইব্রেরী, * পপি লাইব্রেরী
বগুড়াঃ *
কোরান হাদীস মঞ্জিল (উত্তর বঙ্গের একমাত্র পরিবেশক)
রংপুরঃ * বিপণী বিচিত্রা, * সাহিত্য ভান্ডার, * টাউন ষ্টোর লাইব্রেরী
জ্ঞানকোষ প্রকাশনী
৩৮/২-ক, বাংলাবাজার (২য় তলা), ঢাকা।
ফোনঃ ৭১১৮৪৪৩, ৮১১২৪৪১, ৮৬২৩২৫১.
কলকাতায় পরিবেশক/প্রাপ্তিস্থান
রিতা ইন্টারন্যাশনাল
৩৬, পি.এন. ব্যানার্জি রোড, কলকাতা
ফোনঃ ২৫১৩৮৩৫৯, ৯৮৩০৪৩৯৬৭৯, +৯১৯৮৩০৪৩৯৬৭৯
বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।
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...
RELATED POST LINKS BELOW ********************************************
Next_
