«

»

আর অন্যের টেমপ্লেট নয় নিজের বানানো টেমপ্লেট দিয়ে তৈরি করুন আপনার ওয়েবসাইট

প্রযুক্তির কিচিরমিচিরের সকল বন্ধুরা সবাই কেমন আছেন? আশাকরি ভাল আছেন। আমি ও ভাল আছি প্রযুক্তির কিচিরমিচিরের ভালবাসায়।
আজকে আমি আপনাদের শিখবো কিভাবে ফটোশপ দিয়ে ওয়েবসাইটের টেমপ্লেট তৈরি করা যায়। আমরা অনেক সময় ওয়েবসাইট থেকে বিভিন্ন ধরনের টেমপ্লেট ডাউনলোড করি। তখন আমাদের মনে ইচ্ছে জাগে, ইস!!!! আমি যদি টেমপ্লেট বানাতে পারতাম। যারা আফসোস করেন টেমপ্লেট বানানো নিয়ে তাদের মনের বাসনাকে পূর্ণ করার জন্য আমার আজকের টুইটস। যারা কমপক্ষে html জানেন অথবা আমার টুইটস আসুন ওয়েবসাইট তৈরি করি HTML,CSS,JAVA এর সাহায্যে A to Z নিয়মিত পরছেন তারা অতি সহজে নিজের তৈরিকৃত টেমপ্লেট এডিট করতে পারবেন। যদি আমার টুইটস গুলো পরে না থাকেন তাহলে পড়ে নিবেন।
ফটোশপ দিয়ে টেমপ্লেট বানানোর সবচেয়ে বড় সুবিধা হল নিজের মনের মত করে ডিজাইন করা। যদি আপনি ফটোশপএ পাকা হন তাহলে আপনার সময় কম লাগবে যদি কাচা হন তাহলে মনের মত ডিজাইন করতে একটু সময় বেশি লাগবে। চলুন আর দেরি না করে শুরু করি টেমপ্লেট বানানো। আমি ব্যাবহার করি Adobe photoshop 7.0 । কেউ যদি Adobe photoshop cs ব্যাবহার করেন, তাতেও সমস্যা নেই , কাজের নিয়ম একই। প্রথমে ফটোশপ ওপেন করে মনের মত ডিজাইন করে নেই। যেমন আমি করেছি নিচের মতঃ (ছবি গুলো বড় করে দেখতে ছবির উপর ক্লিক করুন)
ডিজাইন করার পর এটাকে আমরা নিয়ে যাব image ready তে । image ready তে নিয়ে যাবার জন্য ctrl+shift+m চাপুন অথবা নিচের ছবির মত ইমেজ রেডিতে কিল্ক করুনঃ


এই ইমেজরেডিতে আসলে নিচের মত পেজ ওপেন হবেঃ


এই ধাপেই হল আসল কাজ। এখানে আপনাকে আপনার পেজটিকে slice tool দিয়ে স্লাইস করতে হবে।
যে যে জায়গায় আপনি আপনার প্রয়োজনীয় টেক্স বা ফ্লাস ফাইল যোগ করবেন, সে সে জায়গায় আপনি স্লাইস টুল দিয়ে কেটে নিবেন। প্রয়োজনে একটু বেশি এলাকা জুরে স্লাইস করবেন যাতে পরে কোন সমস্যায় না পরতে হয়। স্লাইস করার জন্য স্লাইস টুল টি সিলেক্ট করে যতটুকু জায়গা দরকার ততটুকু জায়গা ড্রাগ করুন। নিচের স্কিন সর্ট গুলো দেখুনঃ

যতবার ড্রাগ করতে হয় অর্থাৎ পেজের যে যে জায়গায় টেক্স বা লেখা বসাবেন সে সে জায়গায় ড্রাগ করে নিবেন। প্রতিবার স্লাইস টুল দিয়ে ড্রাগ করার পর ইমেজরেডির মেনু বার থেকে slice এ গিয়ে সেখান থেকে save slice selection এ কিল্ক করুন।


এবার স্লাইস করা শেষ হলে ডেস্কটপে অথবা কোন এক জায়গায় একটা ফোল্ডার তৈরি করুন। ফোল্ডার তৈরি করার পর ফাইল থেকে চলে যান save optimize as এ । কিল্ক করুন তারপর তৈরিকৃত ফোল্ডার এ সেভ করুন।
ব্যাস কাজ শেষ। তৈরি হয়ে গেল আপনার পসন্দের ও নিজের তৈরি করা টেমপ্লেট। এখন আপনি আপনার কাঙ্খিত ফোল্ডার এ যান তাহলে সেখানে আপনার তৈরি কৃত টেমপ্লেট দেখতে পাবেন।এখানে দেখুন দুইটি একটি ইমেজ নামে ফোল্ডার ও একটি html file রয়েসয়ে। এবার টেমপ্লেট এডিট করার পালা। আমি যেহেতু dremweaver এর কাজ সিখাচ্ছি সেহেতু আমি dremweaver এর মাধ্যমে এডিট করা করতে বলব । এখানে html file টি dremweaver দিয়ে ওপেন করুন . dreamweaver এর split অপশন এ কিল্ক করুন।
split এ কীল্ক করলে নীচের মত দেখা জাবেঃ
চিত্রে লক্ষ্য করলে দেখতে পাবেন লাগ দাগে(চিত্রে ) আপনার পুরো সাইট দেখা যায়। যেখানে লেখা বা অন্যকিছু যোগ করতে হবে সেখানে কিল্ক করুন। কিল্ক করলে কোড অংশে এক লাইন লেখা কালার হয়েসে । এখন কালার কৃত অংশ টুকু কপি করে কালারক্রিত লাইনের উপরের তে পেস্ট করুণ । পেস্ট করলে এরকম হবে

<TD <IMG SRC="images/zahid-web_03.gif" WIDTH="485" HEIGHT="74" ALT="">>


এখানে TD এর পরে IMG কেটে দেই এবং লাইনের শেষে দুইটি ( > ) একটি কেটে দিন। তারপর প্রথমের কালারক্রিত লাইনটি কেটে দিন। এবার <TD WIDTH="485" HEIGHT="74">এখানে লিখতে হবে </TD>.এভাবে আপনি এখন আপনার টেমপ্লেট এডিট করতে পারবেন । ফটোশপ দিয়ে তৈরি করা আমার একটা ওয়েবসাইট দেখতে পারেন এখানে

কোন সমস্যা হলে জানাবেন। সবাই ভাল থাকবেন । তাড়াতাড়ি বিছানায় যাবেন।


এ সম্পর্কিত আরো কিছু টুইট:

ফটোশপে তৈরি করুন অ্যাকুয়াটিক বাটন(২)
আসুন শিখি পিএইচপিঃপর্ব-১৬
শিখুন pHp । ( পর্ব : ছয় )
নিয়ে নিন ফ্রী পেয়নিয়ার মাস্টারকার্ড(Payoneer Mastercard) সাথে $25 বোনাস
এবার যেকোন মোবাইল দিয়ে করুন ফেসবুক সিঙ্গেল নাম ১০০% কাজ করবে। [ইস্কিনসট সহ দেখুন]
বাংলাদেশর বেস্ট ওয়েবসাইট ডিজাইন সার্ভিস কোম্পানি
আপনি কি একজন ওয়ার্ল্ড ক্লাস ওয়েবসাইট ডিজাইন ডেভেলপার হতে চান?

মন্তব্য দিনঃ

comments

About the author

zahid hassan

ভাল লাগে বৃষ্টিতে ভিজতে, আর সাথে যদি পাশের বাড়ির মেয়েটি থাকে তাহলে তো অনন্দএর সীমা থাকে না । আর এগুলোর চেয়ে বেশি ভাল লাগে কম্পিউটারের সাথে গল্প করতে ।

Permanent link to this article: http://techtweets.com.bd/web-developing/zahid-hassan/4908

17 comments

Skip to comment form

  1. ঐ ছেলেটি
    jakir

    যাহিদ ভাই, অনেক কাজের এক কাজ করলেন। অনেক ধন্যবাদ।
    পারলে একটা সিম্পল সাইট কিভাবে তৈরি করতে হবে এভাবে তাও শিখাবেন।

    1. zahid hassan

      আপনাকেও ধন্যযোগ জাকির ভাই। আর সিম্পল সাইট তৈরি করা শিখানো চেষ্টা করবো।

  2. MNUWORLD

    জাহিদ ভাই….চরম হইছে……এটা নিয়ে একটা টিউটিরিয়াল শুরু করে দেন।অনেক অনেক ধন্যবাদ।

    1. zahid hassan

      আপনাকেও চরম ধন্যযোগ।

  3. Rubel Orion

    মারাত্নক ! :)

    1. zahid hassan

      😀 😀 😀

  4. Ikram

    ভালো হইতাছে

    1. zahid hassan

      thanks

  5. হাসান

    এক শব্দে চমৎকার!

    1. zahid hassan

      হাসান ভাই আপনাকেও চমৎকার ধন্যযোগ ।

  6. bright space

    যে জিনিষ শেয়ার করলেন তাতে করে তাড়াতাড়ি বিছানায় যাওয়া সম্বব না…।
    ধন্যবাদ

    1. zahid hassan

      কেন তারাতারি বিছানায় যাওয়ার ঔষধ দিতে হইব নাকি? থাঙ্কু।

  7. Azizul Islam

    ভাই, ধন্যবাদ। খুব ভালো লাগলো। কিন্তু ভাই, template ইন্টারনেটে কিভাবে আপলোড করবো?

    1. টুইটার অনির্বাচিত

      এটা ঠিক না। আপনি যে সাইটে আপলোড করবেন, সেখানের নিয়ম অনুসারে আপলেআড সিস্টেম

    2. zahid hassan

      আপনার যদি ডোমেইন এবং হসটিং করা থাকে তাহলে “ফাইল জিলা” নামক সফট দিয়ে আপনি আপলোড করতে পারেন।

  8. Azizul Islam

    প্রশ্ন করলে উত্তর পাওয়া যায় না।

    1. টুইটার অনির্বাচিত

      আর কষ্ট করে এভাবে মন্তব্য করবেন না। ধন্যবাদ

মন্তব্য করুন