আপনি যদি ওয়েব পেজ ডিজাইন এবং তৈরি করতে চান, আপনি যদি আগে থেকে পরিকল্পনা করেন তবে এই প্রক্রিয়াটি অনেক সহজ হবে। পরিকল্পনার পর্যায়ে, ডিজাইনার এবং ক্লায়েন্ট তাদের প্রয়োজন অনুসারে একটি বিন্যাস এবং বিন্যাস খুঁজে পেতে একসাথে কাজ করতে পারেন। পরিকল্পনা প্রক্রিয়া সাইটের স্টাইল বা স্টাইলকে প্রভাবিত করে, আপনি বলতে পারেন এটি ওয়েব ডিজাইনের সবচেয়ে গুরুত্বপূর্ণ দিক, বিশেষ করে যদি এটি ব্যবসায়িক উদ্দেশ্যে হয়।
ধাপ
4 এর 1 ম অংশ: মৌলিক কাঠামো তৈরি করা
ধাপ 1. ওয়েবসাইটের কাজ নির্ধারণ করুন।
আপনি যদি একটি ব্যক্তিগত সাইট তৈরি করেন, আপনি সম্ভবত ইতিমধ্যে উত্তরটি জানেন। যাইহোক, যদি আপনি অন্য কোন প্রতিষ্ঠান, কোম্পানি বা ব্যক্তির জন্য একটি সাইট তৈরি করেন, তাহলে আপনাকে জানতে হবে তারা কি চায় এবং সাইটের কার্যকারিতা। ওয়েব পেজ সমাপ্ত হলে আপনি এখানে উল্লেখ করা সবকিছুই কার্যকর হবে।
- ওয়েবসাইট স্টোরফ্রন্ট প্রয়োজন? ব্যবহারকারীর মন্তব্য করা উচিত? ব্যবহারকারীর কি পরে একটি অ্যাকাউন্ট তৈরি করতে হবে? ওয়েবসাইট নিবন্ধ ভিত্তিক? নাকি চিত্রমুখী? এই সমস্ত এবং অন্যান্য প্রশ্ন আপনাকে সাইটের নকশা এবং নকশা করতে সাহায্য করবে।
- এই পরিকল্পনা প্রক্রিয়াটি একটি অঙ্কনে আঁকা যেতে পারে, বিশেষ করে যদি এটি একটি বড় কোম্পানির জন্য হয় এবং এই প্রকল্পটি তৈরিতে অনেক লোক জড়িত থাকে।
পদক্ষেপ 2. একটি সাইট ম্যাপ ডায়াগ্রাম (সাইট ম্যাপ) তৈরি করুন।
একটি সাইটম্যাপ ডায়াগ্রাম একটি ফ্লো চার্টের অনুরূপ, দেখায় কিভাবে ব্যবহারকারীরা এক পৃষ্ঠা থেকে অন্য পৃষ্ঠায় চলে যায়। এই পর্যায়ে আপনার একটি ওয়েব পেজের প্রয়োজন নেই, শুধু ধারণার একটি সাধারণ প্রবাহ। আপনি একটি কম্পিউটার প্রোগ্রাম ব্যবহার করে ডায়াগ্রাম তৈরি করতে পারেন অথবা কাগজে নিজের স্কেচ তৈরি করতে পারেন। শ্রেণিবিন্যাস ব্যবস্থা এবং ওয়েব পেজ সংযোগের ধারণাগুলি প্রদর্শন করতে এই চিত্রটি ব্যবহার করুন।
ধাপ 3. কার্ড খসড়া পদ্ধতি ব্যবহার করে দেখুন।
গ্রুপ ওয়েব ডেভেলপমেন্টের একটি জনপ্রিয় পদ্ধতি হল প্রত্যেকের প্রত্যাশা খুঁজে বের করার জন্য বেশ কয়েকটি কার্ড ব্যবহার করা। বেশ কয়েকটি নোট কার্ড নিন এবং একটি ওয়েব পৃষ্ঠার মৌলিক বিষয়বস্তু প্রতিটিতে পৃথকভাবে লিখুন। সেরা ধারণাটি খুঁজে পেতে আপনার টিমের সাথে এই কার্ডগুলি একসাথে সাজান। যখন আপনি ওয়েব পেজ তৈরিতে অন্যদের সাথে সহযোগিতা করছেন তখন এই পদ্ধতিটি ব্যবহারের জন্য উপযুক্ত।
ধাপ 4. কাগজ এবং একটি বুলেটিন বোর্ড, অথবা একটি হোয়াইটবোর্ড ব্যবহার করুন।
এটি একটি ছোট বাজেটের মূল পরিকল্পনা পদ্ধতি, আপনি দ্রুত বিষয়বস্তু মুছে ফেলতে বা স্থানান্তর করতে পারেন এবং প্রবাহ পরিবর্তন করতে পারেন। কাগজে আপনার ওয়েব ডিজাইন আঁকুন, তারপর কাগজগুলিকে থ্রেড দিয়ে সংযুক্ত করুন, বা বোর্ডে লাইন আঁকুন। এই পদ্ধতিটি বুদ্ধিবৃত্তিক অধিবেশনে ব্যবহারের জন্য খুবই উপযুক্ত।
ধাপ 5. একটি বিষয়বস্তু তালিকা তৈরি করুন।
প্রকৃতপক্ষে এটি নতুন ওয়েব ডিজাইনের চেয়ে ওয়েব ডিজাইনে পুনesনির্মাণে ব্যবহার করা আরও উপযুক্ত। প্রতিটি সমাপ্ত কন্টেন্ট বা ওয়েব পেজ একটি স্প্রেডশীটে োকান। কী সরিয়ে ফেলতে হবে এবং কী রাখতে হবে তা নির্ধারণ করতে এই তালিকাটি ব্যবহার করে বিষয়বস্তু বা পৃষ্ঠার প্রতিটি অংশের একটি নোট তৈরি করুন। আপনি ওয়েবের কাঠামোকে সহজ করে তুলতে পারেন এবং পরে পুনরায় ডিজাইন করার প্রক্রিয়াটি সহজ করতে পারেন।
4 এর অংশ 2: একটি প্রাথমিক HTML আউটলাইন তৈরি করা
ধাপ 1. ওয়েব পেজ অনুক্রম স্থাপন করতে একটি ওয়্যারফ্রেম তৈরি করুন।
মৌলিক এইচটিএমএল টেমপ্লেট হল আপনি যে সাইটটি তৈরি করবেন তার ব্লুপ্রিন্ট, শুধুমাত্র সবচেয়ে মৌলিক ট্যাগ এবং নমুনা (ব্লক/টেমপ্লেট) সামগ্রী ব্যবহার করে। এই কাঠামোটি প্রশ্নের উত্তর দেয়, "ওয়েবে কি এবং কোথায় দৃশ্যমান?" এই রূপরেখা তৈরিতে বিন্যাস এবং স্টাইলিংয়ের প্রয়োজন নেই।
- আপনি একটি স্টাইল সেটিং বেছে নেওয়ার আগে একটি মৌলিক রূপরেখা সহ বিষয়বস্তুর গঠন এবং প্রবাহ চার্ট দেখতে পারেন।
- বেসিক এইচটিএমএল টেমপ্লেটগুলি পিডিএফ বা চিত্রের মতো স্থির নয়, আপনি নতুন কাঠামো তৈরি করতে নমুনার সামগ্রীর মাধ্যমে দ্রুত সোয়াইপ করতে পারেন।
- বেস ফ্রেমওয়ার্ক ইন্টারেক্টিভ যা ওয়েব ডেভেলপার এবং ক্লায়েন্ট উভয়কেই উপকৃত করে। যেহেতু এই মৌলিক কাঠামোটি সহজ HTML কোড দিয়ে লেখা হয়েছে, আপনি এখনও এটি নেভিগেট করতে পারেন এবং ওয়েব পেজ সুইচিং কিভাবে কাজ করে তা জানতে পারেন। এটি পিডিএফ দিয়ে করা যাবে না।
ধাপ 2. গ্রে বক্স পদ্ধতি ব্যবহার করে দেখুন।
গ্রে বক্সে আপনার ওয়েবপৃষ্ঠা সামগ্রী ব্লক বা হাইলাইট করুন, সবচেয়ে গুরুত্বপূর্ণ বিষয়বস্তু শীর্ষে রয়েছে। বিষয়বস্তু এক কলামে সাজান। উদাহরণস্বরূপ, যদি পৃষ্ঠাটি "কোম্পানি সম্পর্কে" হয় তবে কোম্পানি সম্পর্কে বিস্তারিত তথ্য শীর্ষে রয়েছে, তারপরে কর্মীদের একটি তালিকা, তারপর যোগাযোগের তথ্য ইত্যাদি।
এতে হেডার এবং পাদলেখ অন্তর্ভুক্ত নয়। ধূসর বাক্স হল বিষয়বস্তুর একটি চাক্ষুষ উপস্থাপনা যা ওয়েবে প্রদর্শিত হবে।
ধাপ 3. একটি মৌলিক রূপরেখা নির্মাতা প্রোগ্রাম চেষ্টা করুন।
বিভিন্ন প্রোগ্রাম রয়েছে যা আপনি একটি প্রাথমিক ওয়েব ফ্রেমওয়ার্ক তৈরির প্রক্রিয়ায় ব্যবহার করতে পারেন। ওয়েব প্রোগ্রামিং কোড (ভাষা) যে পরিমাণ আপনাকে আয়ত্ত করতে হবে তা প্রতিটি প্রোগ্রামের জন্য আলাদা। বেশ জনপ্রিয় কিছু প্রোগ্রামের মধ্যে রয়েছে:
- প্যাটার্ন ল্যাব। এই সাইটটি "পারমাণবিক নকশা" এর জন্য নিবেদিত, প্রতিটি বিষয়বস্তু একটি "অণু" হিসাবে বিবেচিত হয় যা একটি বৃহত্তর ওয়েব পৃষ্ঠা তৈরি করে।
- জাম্পচার্ট। এই ওয়েব পেজ ওয়েব ভিত্তিক পরিকল্পনা এবং ফ্রেমিং সেবা প্রদান করে। এই সাইটগুলি প্রদান করা হয় এবং একটি সাবস্ক্রিপশন প্রয়োজন, কিন্তু আপনি অনেক ওয়েব প্রোগ্রামিং কোড আয়ত্ত না করেই দ্রুত ওয়েব ফ্রেমওয়ার্ক তৈরি করতে পারেন।
- ওয়্যারফাই। ওয়্যারফি আরেকটি সাইট যা "পারমাণবিক নকশা" প্রদান করে। ওয়েব ডেভেলপাররা বিনামূল্যে টুলটি পেতে পারেন।
ধাপ 4. সহজ HTML মার্কআপ ব্যবহার করুন।
একটি ভাল বেসিক টেমপ্লেট সহজেই মূল সাইটে রূপান্তরিত হবে। এই টেমপ্লেট তৈরির প্রক্রিয়া চলাকালীন ওয়েব স্টাইলিং সম্পর্কে খুব বেশি চিন্তা করবেন না। মার্কআপ ব্যবহার করুন যা সহজেই বোঝা যায় এবং পরিবর্তন করা যায়।
একটি সাধারণ মৌলিক কাঠামো অনেক ভালো। একটি মার্কআপ তৈরির উদ্দেশ্য হল একটি কাঠামো তৈরি করা। CSS এবং উন্নত মার্কআপের সাহায্যে ভিজ্যুয়াল অ্যাপিয়ারেন্স পরে সমন্বয় করা যায়।
ধাপ 5. প্রতিটি ওয়েব পেজের জন্য একটি মৌলিক রূপরেখা তৈরি করুন।
আপনি প্রতিটি ওয়েব পেজকে একটি মৌলিক রূপরেখার সাথে সমান করতে প্রলুব্ধ হতে পারেন। আসলে, এটি কেবল আপনার সাইটকে সরল এবং বিরক্তিকর করে তুলবে। প্রতিটি পৃষ্ঠার জন্য একটি ভিন্ন রূপরেখা তৈরি করুন, আপনি বুঝতে পারবেন যে প্রতিটি পৃষ্ঠার নিজস্ব নকশা প্রয়োজন।
4 এর মধ্যে 3: সামগ্রী তৈরি করা
ধাপ 1. একটি ওয়েব পেজ তৈরি করার আগে বিষয়বস্তু প্রস্তুত করুন।
নমুনা বা স্থানধারক ব্যবহারের পরিবর্তে যদি আপনার কাছে ইতিমধ্যেই প্রকৃত সামগ্রী থাকে তাহলে আপনার ওয়েবভিউর পূর্বরূপ দেখতে আপনি অনেক সহজ পাবেন আপনার খুব বেশি সামগ্রী থাকার দরকার নেই, তবে আপনি যদি মূল চিত্রটির একটি অনুলিপি ব্যবহার করেন তবে আপনার মকআপটি আরও ভাল দেখাবে।
আপনার নিবন্ধের সমস্ত উপাদান থাকতে হবে না, তবে কমপক্ষে এটির একটি প্রকৃত শিরোনাম থাকা উচিত।
ধাপ 2. মনে রাখবেন যে দুর্দান্ত বিষয়বস্তু কেবল পাঠ্য নয়।
ইন্টারনেট একটি সাধারণ পাঠ্য পাতার চেয়ে অনেক জটিল। দর্শকদের আকৃষ্ট এবং আমন্ত্রণ জানাতে একটি দুর্দান্ত ওয়েবসাইট তৈরি করার জন্য আপনার বিভিন্ন ধরণের সামগ্রীর প্রয়োজন। উদাহরণ স্বরূপ:
- ছবি।
- ভয়েস।
- ভিডিও।
- ওয়েব ট্রান্সমিশন বা ওয়েব স্ট্রিম (টুইটার)
- ফেসবুক ইন্টিগ্রেশন
- আরএসএস
- ওয়েব ফিড
ধাপ help. একজন পেশাদার ফটোগ্রাফারকে সাহায্যের জন্য জিজ্ঞাসা করুন।
আপনি যদি আপনার সাইটে ফটোগুলি অন্তর্ভুক্ত করতে চান, তাহলে আপনার ওয়েবসাইট থেকে আপনি যে প্রথম ছাপ পাবেন তা পেশাদার ফটোগ্রাফিতে ভরা থাকলে অনেক ভালো হবে। একটি ভালো ছবির মূল্য বিশটি নিম্নমানের ছবির চেয়ে বেশি।
ফটোগ্রাফির শিল্পের একজন নতুন স্নাতকের সন্ধান করুন একজন পেশাদার ফটোগ্রাফারের চেয়ে সস্তা সমাধান হিসেবে, যিনি দীর্ঘদিন ধরে ব্যবসা করছেন।
ধাপ 4. মানসম্মত নিবন্ধ লিখুন।
ওয়েব পেজে লিখিত বিষয়বস্তু আপনার ওয়েব ট্র্যাফিকের পরিমাণ নির্ধারণ করবে। যদিও আপনাকে এই নকশা প্রক্রিয়ায় বিষয়বস্তু তৈরির বিষয়ে খুব বেশি চিন্তা করতে হবে না, এটি সম্পর্কে চিন্তা করা শুরু করার জন্য এটি আঘাত করে না কারণ আপনার সাইটটি চালু এবং চালু হওয়ার পরে আপনার নিয়মিত সামগ্রীর প্রয়োজন হবে।
নিবন্ধের বিষয়বস্তু ছাড়াও, এমন একটি লিখিত উপাদান রয়েছে যা আপনার একটি ওয়েব পৃষ্ঠা সংকলনের প্রক্রিয়ায় থাকা দরকার। উদাহরণস্বরূপ যোগাযোগের তথ্য, কোম্পানির নাম, বা অন্য কিছু যা সাইটে একাধিকবার ব্যবহার করা হবে।
4 এর অংশ 4: ওয়েবসাইটগুলিতে ধারণাগুলি চালু করা
ধাপ 1. মৌলিক উপাদানগুলি সাজান।
উপাদানগুলির এই ব্যবস্থা আপনার সাইটের প্রতিটি পৃষ্ঠায় যেমন শিরোনাম, পাদটীকা এবং নেভিগেশন মেনুতে প্রযোজ্য। এটি একটি খুব সহজ শৈলীতে সেট করুন যাতে আপনি সমস্ত পৃষ্ঠাগুলি দেখতে কেমন তা পরীক্ষা করতে পারেন। ওয়েব লেআউট প্রক্রিয়ায় অগ্রগতির সময় এটি বিশেষভাবে উপকারী।
বিস্তারিত সম্পর্কে খুব বেশি চিন্তা করবেন না, শিরোনামটি কেমন দেখায় তার প্রিভিউ (প্রিভিউ) করার চেষ্টা করুন।
পদক্ষেপ 2. একটি সহজ বিন্যাস তৈরি করুন।
ঘড়ির অবস্থানটি বেস আউটলাইন কলাম থেকে পৃষ্ঠার প্রকৃত অবস্থানে স্থানান্তর করে শুরু করুন। উদাহরণস্বরূপ, আপনি পৃষ্ঠার বাম দিকে নমুনা নেভিগেশন মেনু এবং ডানদিকে শিরোনামের তালিকা সরাতে চাইতে পারেন।
আপনি পরবর্তী ধাপে যাওয়ার আগে একাধিক পৃষ্ঠার জন্য ওয়েব লেআউট নিয়ে পরীক্ষা চালিয়ে যান। আপনার তৈরি লেআউটটি জীবন্ত মনে হয় কিনা তা দেখার জন্য অন্যদের এটি দেখার অনুমতি দিন।
পদক্ষেপ 3. একটি মকআপ তৈরি করুন।
আপনার ওয়েবসাইটের মকআপ বা নমুনা পৃষ্ঠা তৈরি করতে ফটোশপের মতো একটি প্রোগ্রাম ব্যবহার করুন। আপনি গাইড হিসাবে সংকলিত লেআউট ব্যবহার করুন। আপনি মকআপগুলি আরও দ্রুত করতে পারেন এবং একটি চিত্র প্রক্রিয়াকরণ প্রোগ্রামের মাধ্যমে আপনার পছন্দসই ফলাফল পেতে পারেন। এই চিত্রগুলির ফলাফলগুলি পরে ওয়েব প্রোগ্রামিং কোড লেখার প্রক্রিয়ায় একটি রেফারেন্স হিসাবে ব্যবহার করা যেতে পারে।
আসল বিষয়বস্তুকে মকআপে রাখুন যাতে এটি দেখতে সুন্দর হয়।
ধাপ 4. মূল বিষয়বস্তুর সাথে নমুনা ধারণাটি প্রতিস্থাপন করুন।
ওয়েব পেজে কন্টেন্ট এবং উপাদান যুক্ত করুন। আপাতত ওয়েব স্টাইল সেটিংস ঘামাবেন না, সবকিছু সঠিক স্থানে স্ট্যাক করুন। এটি আপনাকে পরে করা ওয়েব স্টাইলের পরিবর্তন পর্যালোচনা করতে সাহায্য করবে।
পদক্ষেপ 5. একটি ওয়েব স্টাইল গাইড তৈরি করুন।
শৈলীর মিশ্রণ বজায় রাখা খুব গুরুত্বপূর্ণ, বিশেষত বড় সাইটগুলির জন্য। যদি সাইটটি ব্যবসায়িক উদ্দেশ্যে করা হয় এবং ইতিমধ্যেই তার নিজস্ব ব্র্যান্ড বা স্টাইল থাকে, এটি সাইটের নকশায় সংহত করা উচিত। ওয়েব পেজ স্টাইল গাইড তৈরির সময় যে বিষয়গুলো বিবেচনা করতে হবে:
- নেভিগেশন
- হেড নোট
- অনুচ্ছেদ
- তির্যক চরিত্র
- সাহসী চরিত্র
- লিঙ্ক (সক্রিয়, নিষ্ক্রিয়, হভার)
- চিত্র ব্যবহার
- আইকন
- নক
- তালিকা
ধাপ 6. ওয়েব স্টাইল প্রয়োগ করুন।
একবার আপনি সঠিক শৈলী এবং নকশা খুঁজে পান, এটি বাস্তবায়ন করুন। ওয়েব পেজে বা সাইট জুড়ে শৈলী বাস্তবায়নের অন্যতম সহজ উপায় হল CSS। CSS ব্যবহারের বিশদটি আরও ভালভাবে বুঝতে নিম্নলিখিত নির্দেশাবলী দেখুন।
