সাইটগুলি ডিজাইনিং করার সময়, আপনাকে প্রায়শই একটি মৌলিক প্রশ্ন সমাধান করতে হয়: পৃষ্ঠাটি যখন বিভিন্ন স্ক্রিন রেজোলিউশন সহ খোলা হয় তখন তার আচরণ কেমন হবে? এখানে দুটি বিকল্প রয়েছে - "রাবার" (প্রসারিত) সাইটের পৃষ্ঠা বা স্থির। প্রথম বিকল্পটি আলোচনা করা হবে। বিন্যাসের জন্য আপনার পছন্দ যাই হোক না কেন, প্রসারিত ডিজাইনের মূল তত্ত্বটি আপেক্ষিক স্কেলিবিলিটি।
এটা জরুরি
- - এইচটিএমএল জ্ঞান;
- - এইচটিএমএল-কোড সম্পাদনা করার জন্য প্রোগ্রাম।
নির্দেশনা
ধাপ 1
আপনার সাইটের টেমপ্লেটের জন্য প্রধান ফাইলটি নির্বাচন করুন যা মূল মার্কআপটিকে প্রতিফলিত করবে। এটি index.html বা index.php ফাইল হতে পারে। ম্যাক্রোমিডিয়া ড্রিমউইভারটি অন্যতম সেরা ভিজ্যুয়াল সাইট টেম্পলেট সম্পাদনা সফ্টওয়্যার। এই প্রোগ্রামের ভিত্তিতে প্রয়োজনীয় সম্পাদনা করা হবে।
টেমপ্লেট ফাইলটি খুলুন বা "ফাইল" - "নতুন", বিভাগ - "বেস পৃষ্ঠা" - "এইচটিএমএল" বা বিভাগ "গতিশীল পৃষ্ঠা" - "পিএইচপি" কমান্ড দ্বারা একটি নতুন তৈরি করুন। এখানে যখন আমরা সাইট কাঠামো দুটি ফাইলের মধ্যে একটিতে রেকর্ড করা হয় তখন সাধারণ কেসটি বিবেচনা করি।
ধাপ ২
টেবিলগুলিতে, ডিভ-ব্লক এবং সংযুক্ত (একই সময়ে টেবিল এবং ব্লক) - বিভিন্ন ধরণের লেআউট রয়েছে এটি কোনও গোপন রহস্য ছিল না। এইচটিএমএল ট্যাগটি টেবিল বিন্যাসের জন্য দায়বদ্ধ
প্রতিটি সম্পত্তির জন্য শতাংশ (100%) নির্দিষ্ট করুন। এটি কোনও জ্যামিতির সাথে পর্দায় স্বয়ংক্রিয়ভাবে টেবিলের ঘরগুলি প্রসারিত করার প্রভাব অর্জন করবে। এটি একটি 19 ইঞ্চি মনিটর বা স্মার্টফোন হতে পারে - তাদের প্রত্যেকে সামগ্রী সঠিকভাবে পুনরুত্পাদন করবে।
ধাপ 3
যদি আপনাকে টেবিল কোষগুলির মধ্যে ঠিক চিঠিপত্র নির্দিষ্ট করতে হয় তবে নীচের উদাহরণটি ব্যবহার করুন:
| … … সেল 1 এর বিষয়বস্তু। … | … … সেল 2 এর বিষয়বস্তু। … |
এখানে আপনি দেখতে পাবেন যে কোনও এককোষের টেবিলের জন্য সংজ্ঞায়িত প্রতিটি কিছুর 30% প্রস্থের সাথে নির্দিষ্ট করা হয়েছে। একটি সাধারণ গণনা দেখায় যে 100% -30% = 70% দ্বিতীয় কক্ষের জন্য রয়ে গেছে। মনে রাখবেন যে এক্ষেত্রে সারণীর একটি ঘরে অবশ্যই প্রস্থের বৈশিষ্ট্য সেট থাকতে হবে না। ব্রাউজারটি নিজেই সমস্ত গণনা তৈরি করবে এবং ঘরগুলির সাথে টেবিলটি সঠিকভাবে প্রসারিত করবে। টেবিলের অভ্যন্তর সামগ্রীগুলি বিভিন্ন স্ক্রীন জুড়ে সঠিকভাবে প্রসারিত এবং সঙ্কুচিত হবে।
পদক্ষেপ 4
ডিভ লেআউটের মতো পরিস্থিতিতে, ট্যাগ ব্লকগুলি ডিফল্টরূপে স্ক্রিনের পুরো প্রস্থে প্রসারিত হয় এবং উপরের থেকে নীচে বাম থেকে ডানে একের পর এক অনুসরণ করে। তাদের জ্যামিতিটি পরিমার্জন করতে, একটি সিসিএস শ্রেণি বা সনাক্তকারী (আইডি) তৈরি করুন, যার মধ্যে আপনি উল্লেখ করেছেন, উদাহরণস্বরূপ, গুণাবলী এবং / অথবা বাক্সের আকার এবং অবস্থানের (বক্স) বিভাগের জন্য। সাইটের মার্কআপ ফাইলে নির্দিষ্ট স্টাইলটি লিঙ্ক করতে এবং পছন্দসই ট্যাগটিতে ক্লাস (আইডি) বাঁধতে ভুলবেন না। সাধারণত এটি ভবিষ্যতের সমস্ত সাইটের জ্যামিতি সংজ্ঞায়িত করে স্ক্রিপ্টের একেবারে গোড়ার দিকে স্থাপন করা হয়:
… … সাইটের সামগ্রী। …
বা এই মত:
… … সাইটের সামগ্রী। …
সিএসএস বিধি জন্য কোড নিম্নলিখিত হবে:
… আমার ক্লাস {
প্রস্থ: 30%;
উচ্চতা: 50%;
}
#আমার পরিচিতি {
প্রস্থ: 30%;
উচ্চতা: 50%;
}
