রেসপনসিভ ওয়েবসাইট ডিজাইন – (পার্ট-০১) – Creative IT Blog
Home / ওয়েব ডিজাইন / রেসপনসিভ ওয়েবসাইট ডিজাইন – (পার্ট-০১)

রেসপনসিভ ওয়েবসাইট ডিজাইন – (পার্ট-০১)

ভূমিকা ঃ  যারা ওয়েবডিজাইন  এ কাজ করে থাকেন তাদের জন্য সব থেকে যেটা বেশি গুরুত্বপূর্ণ বিষয় থাকে  সেটা হল ১টা ওয়েবসাইটকে পরিপূর্ণ responsive করে তোলা । বিশেষ করে যারা frelancing করেন বা করতে চান তাদের জন্য এটা সব থেকে বেশি গুরুত্বপূর্ণ একটা বিষয় । কারণ যারা frelancing করে থাকেন তারা নিশ্চয়ই বলতে পারবেন যে marketplace এ যে সমস্ত বায়ার থাকেন  তাদের এক নাম্বারে requirement থাকে ওয়েবসাইট responsive হতে হবে । অর্থাৎ তার  ওয়েবসাইট যেন scroll কড়া ছারাই  সব device এ সুন্দর ভাবে দেখা যায়।  যারা responsive ওয়েবসাইট করতে চান তাদের জন্যই রয়েছে কিছু টিপস ।
১। responsive ওয়েবসাইট ডিজাইন করার জন্য আপনার প্রথম প্রয়োজন হবে responsive এর যে কোন একটা  framework ডাউনলোড কড়া । সে ক্ষেত্রে আপনি bootstrap ডাউনলোড করে responsive  ওয়েবসাইট ডিজাইন করতে পারেন । responsive ওয়েবসাইট ডিজাইন এর জন্য bootstrap অনেক বেশি  popular ।
bootstrap download link : http://getbootstrap.com/
২ । bootstrap ডাউনলোড করার পর এটার css, fonts & js ফাইলগুলোকে আপনার html file এ রাখতে হবে এবং এটা link করে দিতে হবে । আপনার html file কিভাবে সাজাবেন তার জন্য নিচে একটি demo দেওয়া হল ।
bootstrap/
├── css/
│   ├── bootstrap.min.css
├── js/
│   └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2

৩। bootstrap থেকে css & js file ঠিক ভাবে রাখার পর css folder এ অবশ্যই আমরা আলাদা একটা css file নিব (style.css, main.css ) । bootstrap এর  class গুলকে ব্যাবহার করে যেখানে আমরা আমাদের মত করে stylesheet করব ।
৪। bootstrap এর js file কে কাজ করানোর জন্য এবং jquery এর কোন plugins ব্যাবহার করতে চাইলে সে জন্য jquery এর main file কে অবশ্যই link রাখতে হবে। এ ক্ষেত্রে লক্ষণীয় যে আমরা সবসময় update file নিয়ে কাজ করার চেষ্টা করব। নিচে jquery এর download লিঙ্ক দেওয়া হল ।
jquery download link : http://jquery.com/
যে ভাবে link করবেন –

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>bootstrap-1</title>
<link rel=”stylesheet” href=”css/bootstrap.min.css”>
<link rel=”stylesheet” href=”css/style.css”>
</head>
<body>

<script src=”js/jquery-3.1.0.min.js”></script>
<script src=”js/bootstrap.min.js”></script>
</body>
</html>

About abs uzzal

Check Also

webdesignstrategy

ওয়েব ডিজাইনের আকর্ষণীয় ৫টি ট্রেন্ড ও তা প্রোটোটাইপ করার সফল উপায় (২য় পর্ব)

সবাই কে শুভ সকাল। আশা করছি ভাল আছেন। কয়েকদিন ধরেই আসলে ভাবছি কি নিয়ে লেখা …