লেআউট পাঠ 3 যোগাযোগ. অভিযোজিত বিন্যাস: পাঠ বা সরাসরি যুদ্ধে? এবং অবশেষে... ভিডিও পাঠ ডাউনলোড করুন

উইন্ডোজ পাঠ

শুভ দিন, প্রিয় পাঠক। ওয়েবসাইট লেআউট একটি আকর্ষণীয় ব্যবসা একবার আপনি এটি বুঝতে শুরু. একমাত্র সমস্যা হল সত্যিই ভাল শেখার উপকরণ খুঁজে পাওয়া। প্রথমে, কোডটি প্রতীকগুলির একটি অযৌক্তিক সেটের মতো মনে হতে পারে, কিন্তু একবার আপনি গোপন জ্ঞান আয়ত্ত করলে, এটি একটি মোটামুটি সহজ এবং বোধগম্য অ্যালগরিদমে পরিণত হয় এবং আয় এবং নৈতিক সন্তুষ্টিও তৈরি করতে শুরু করে।

আজ আমরা এইচটিএমএল ব্লক লেআউট এবং সিএসএস কী তা নিয়ে কথা বলব। জাদুকরী প্রোগ্রামিং ভাষা কম ভীতিকর হয়ে উঠবে। আমি আশা করি যে নিবন্ধের শেষে আপনি কোডের কিছু উপাদান দেখতে শিখেছেন এবং আপনার এই সমস্ত কিছুর সাথে জড়িত হওয়া উচিত কিনা তা নিজের জন্য একটি দৃঢ় সিদ্ধান্ত নিতে সক্ষম হবেন।

কেন আপনি লেআউট ডিজাইনারদের চেয়ে ভাগ্যবান যারা অনেক আগে কাজ শুরু করেছেন?

লেআউট দুই ধরনের আছে: ব্লক এবং টেবিল। ভোরবেলা, লেআউট টেবিল আকারে নির্মিত হয়েছিল। প্রথমে, শুধুমাত্র একটি, বড় একটি, তৈরি করা হয়েছিল।

মাথা, প্রধান অংশ, এটিতে নির্মিত হয়েছিল। একটি যেটিতে একটি লোগো, কিছু প্রাথমিক তথ্য যেমন টেলিফোন নম্বর এবং আরও অনেক কিছু রয়েছে৷

প্রধান বিষয়বস্তু অংশ। নিবন্ধের পাঠ্য, একটি সূচনামূলক শুভেচ্ছা, বা অন্য কিছু।

পাদচরণ নীচে অবস্থিত. এটি আজও ব্যবহৃত হয়। একটি নিয়ম হিসাবে, পরিচিতিগুলির ছোট লিঙ্ক, শূন্যপদ এবং "আমাদের সম্পর্কে" তথ্য এখানে সন্নিবেশ করা হয়েছে৷ তারা সংস্থানটির অস্তিত্বের তারিখগুলি বা কেবল "কপিরাইট" জাদু শব্দটি সংযুক্ত করতে পারে, যার সাহায্যে বিকাশকারীরা তাদের কপিরাইট নির্দেশ বা রক্ষা করার আশা করেন৷ দরজার উপরে ঝুলন্ত ঘোড়ার নাল হিসাবে এর ব্যবহার শুধুমাত্র ভূতদের ভয় দেখাতে পারে, যদিও তারা, একটি নিয়ম হিসাবে, ফুটারের দিকে তাকায় না।

একটু পরে, নতুন মান হাজির। ট্যাবুলার লেআউট ব্লক লেআউট দ্বারা প্রতিস্থাপিত হয়েছে। "div" ট্যাগ হল ব্লক লেআউট। আপনি যেকোনো সাইটের কোড দেখতে পারেন। রাইট-ক্লিক করুন এবং এলিমেন্ট কোড দেখুন নির্বাচন করুন। আমার স্ক্রিনশটটি একবার দেখুন। মূল পৃষ্ঠা, ফুটার, বাম এবং ডান কলামের একটি ব্লক রয়েছে। তারা সবাই স্বাক্ষরিত।

আধুনিক ওয়েবসাইটগুলি ব্লক থেকে তৈরি করা হয়; আমি আপনাকে একটি পরিকল্পিত উদাহরণ দেখাব যাতে আপনি বুঝতে পারেন। এখানে পার্থক্য বরং পৃষ্ঠা কোডে। দেখবেন, কোন প্রধান চিহ্ন নেই। এক বা অন্য অংশে স্থাপন করা ব্লক। কখনও কখনও তারা একে অপরকে ওভারল্যাপ করতে পারে বা বেশ কয়েকটি উপাদান একত্রিত করতে পারে, তবে একটি অতিরিক্ত উপাদান (বড় টেবিল) অদৃশ্য হয়ে গেছে।

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

ধাপে ধাপে নির্দেশাবলী: ওয়েবসাইট কিভাবে তৈরি করা হয়

আসুন একটি ধাপে ধাপে দেখি কিভাবে একটি পোর্টাল একটি ইলেকট্রনিক সম্পদে পরিণত হয়। এটা নিয়ে জটিল কিছু নেই। হ্যাঁ, আপনাকে অধ্যয়নের জন্য কিছু প্রচেষ্টা করতে হবে, তবে এটি কেবল নৈতিক সন্তুষ্টিই নয়, একটি স্থিতিশীল আয়ও আনবে। লেআউট এমন একটি ব্যবসা যেটিতে অনেক লোক জড়িত হয় না।

80%-এরও বেশি মানুষ কেবল বোধগম্য প্রতীকগুলির একটি সেট দেখেন, স্কুলের গণিতের পাঠ্যক্রমটি মনে রাখবেন: লগারিদম, ডিফারেনশিয়াল - তারা পাগল হয়ে যায়, ভয় পেয়ে যায় এবং এই বিষয়টি ভুলে যায়: "আমি আরও ভালভাবে গিয়ে চাইনিজ শিখতে চাই, এটি হবে সহজ."

আপনি ইতিমধ্যে কিছু অ্যালগরিদম দেখেছেন এবং নিশ্চিত হয়েছেন যে অক্ষর সেটে পুনরাবৃত্তিমূলক উপাদান রয়েছে। এটি দুর্দান্ত এবং আপনি দেখতে পাচ্ছেন, এটি এত ভীতিজনক নয়।

এখন দেখা যাক কিভাবে ওয়েবসাইট তৈরি হয়। প্রথমত, ডিজাইনাররা ফটোশপে কাজ করে। তারা এই ছবির মত কিছু পায়. যদিও এটি শুধুমাত্র একটি ফটোগ্রাফ, তবে এর পার্থক্য রয়েছে।

এটি একটি বিশেষ ফটোশপ বিন্যাসে উত্পাদিত হয়, যেমন নোটপ্যাড txt বা Word ডক। psd থেকে, এই ফর্ম্যাটটিকে বলা হয়, ব্লকগুলি কাটা হয়। বাম দিকের মেনুতে এটির জন্য একটি বিশেষ বোতাম রয়েছে।

নথি কাটার পর। এটি "ওয়েবের জন্য রপ্তানি করা" হতে পারে এবং ফলস্বরূপ, কম্পিউটারে একটি চিত্র ফোল্ডার উপস্থিত হয়, যা লেআউট ডিজাইনার পুরো সাইট জুড়ে ছবি বিতরণ করতে ব্যবহার করে৷

আমি এই বিকল্পটি এক মিনিটের মধ্যে তৈরি করেছি, এটি সঠিক নয়। আমি শুধু আপনাকে একটি আনুমানিক ফলাফল দেখাতে চেয়েছিলাম। আপনি আমার পিএসডি লেআউটের একটি ইলেকট্রনিক সংস্করণ ডাউনলোড করতে পারেন ( ডাউনলোড) এবং আপনার নিজের, সঠিক সংস্করণ তৈরি করার চেষ্টা করুন, দেখুন কোন ছবিগুলি বসানোর জন্য দরকারী এবং আপনি কীভাবে সেগুলি কেটে ফেলবেন। একই সময়ে, আপনি ফটোশপে নিজে টেমপ্লেটের উপর কাজ করার চেষ্টা করবেন।

শুরুর লেআউট ডিজাইনার এবং ডিজাইনারদের জন্য, এটি শুধুমাত্র আকর্ষণীয়ই নয়, দরকারীও হবে। রঙ পরিবর্তন করুন, উপাদানগুলিকে পুনর্বিন্যাস করুন, টেমপ্লেটটি সংশোধন করুন এবং দেখুন কী ভাল দেখায় এবং কোন পরিবর্তনগুলি আপনি পছন্দ করেন না৷

আপনার প্রথম সাইট. লেআউট মাত্র পাঁচ মিনিট সময় লাগবে

আপনি নোটপ্যাড++ এ লেআউটে কাজ করতে পারেন। আজ আমি Adobe Dreamweaver প্রোগ্রামে স্পর্শ করব না, কারণ... এটি একটি পৃথক নিবন্ধের বিষয়, তবে আমি লক্ষ্য করি যে এটি লেআউট ডিজাইনারদের জন্য বিশেষভাবে তৈরি করা হয়েছিল।

একটি ওয়েবসাইটে কাজ সাধারণত একটি style.css ফাইল তৈরির সাথে শুরু হয় না, তবে আমি মনে করি এটি আপনার জন্য আরও আকর্ষণীয় হবে। এটি হল মূল নথি যা বর্ণনা করে যে আপনার পোর্টালটি কেমন হবে। ইহা সহজ. এমনকি আপনাকে ইংরেজি শিখতে হবে না।

ব্যাকগ্রাউন্ড হল ব্যাকগ্রাউন্ড কালার।

ফটোশপে কালার প্যালেটে ডাবল ক্লিক করে, আপনি অন্যান্য রঙগুলি খুঁজে পেতে পারেন।

একটি টেক্সট উপাদান সহ একটি এইচটিএমএল ডকুমেন্ট দেখতে এরকম হবে। ইতিমধ্যে পরিচিত মেনু, বডি এবং পাত্র... h2 ট্যাগটিও আপনার পরিচিত হওয়া উচিত। এই শিরোনাম. তাদের মধ্যে আপনার কথা লিখুন।

এই দুটি নথি একটি ফোল্ডারে ডাউনলোড করুন এবং Notepad++ দিয়ে খুলুন, তারপরে রঙ এবং পাঠ্য সম্পাদনা করুন, তারপর যেকোনো ব্রাউজার থেকে index.html চালান ( ডাউনলোড).

ফলাফল এরকম কিছু হবে।

অভিনন্দন। এটি ইন্টারনেটে আপনার প্রথম পাতা! আপনি এটি করেছেন, আপনি সফল হয়েছেন। স্বাভাবিকভাবেই, রঙের পরিবর্তে, আপনি ছবি নথিতে ফটোশপ থেকে কাটা একটি ছবি সন্নিবেশ করতে পারেন। এটি করার জন্য, আপনাকে কেবল পথটি নির্দিষ্ট করতে হবে। আপনি দেখতে পাচ্ছেন, এখানে খুব জটিল কিছু নেই।

এবং অবশেষে... ভিডিও পাঠ ডাউনলোড করুন

যেমনটি আমি আপনাকে আগেই বলেছি, লেআউটের সবচেয়ে কঠিন জিনিসটি হল ভাল প্রশিক্ষণের উপকরণ খুঁজে পাওয়া। আমি নিজে বই দিয়ে শুরু করেছি এবং মাত্র দুই সপ্তাহ পরে আমি আমার প্রথম সূচী ফাইল তৈরি করতে সক্ষম হয়েছি। শুধু তাই আপনি বুঝতে পারেন, একটি স্টাইল শীট (CSS) ছাড়া এটি এই মত দেখাবে.

সম্মত হন, এটি মোটেই চিত্তাকর্ষক নয়। অতএব, আমি সুপারিশ করছি যে আপনি ভিডিও কোর্সের মাধ্যমে মৌলিক বিষয়গুলি শিখুন। নীচে আমি লিঙ্কগুলি দিয়েছি, সেগুলিতে ক্লিক করে আপনি বিনামূল্যে এইচটিএমএল এবং সিএসএস পাঠ ডাউনলোড করতে পারেন। তারা আপনাকে দ্রুত ভাল ফলাফল অর্জন করতে দেয়। উপরন্তু, পড়ার জন্য আকর্ষণীয় ভিডিও দেখার চেয়ে অনেক বেশি ইচ্ছাশক্তি প্রয়োজন।

  • এইচটিএমএল - নতুনদের জন্য পাঠ.
  • Css - নতুনদের জন্য পাঠ.
  • ওয়েবসাইট লেআউটে বিনামূল্যে মিনি-কোর্স.

    • আমি আপনার প্রচেষ্টার সাফল্য কামনা করি। আমি নিশ্চিত যে খুব শীঘ্রই আপনি কেবল অধ্যয়নই নয়, অনলাইনে কাজও শুরু করবেন এবং অবিশ্বাস্য প্রকল্পগুলিও বাস্তবায়ন করবেন!

    আপনি যদি এই নিবন্ধটি পছন্দ করেন, নিউজলেটারে সাবস্ক্রাইব করুন এবং আপনার নিজের দক্ষতা উন্নত করতে আরও দরকারী উপকরণ পান!

    এটি বেশ স্থিতিশীল, তাই অবাক হওয়ার কিছু নেই যে এই নৈপুণ্যে দক্ষতা অর্জন করতে ইচ্ছুক লোকের সংখ্যা বাড়ছে। তাছাড়া, আমার মতে, এটি হল সবচেয়ে সহজ "আইটি-তে প্রবেশের পথ"। যদিও এটি বোঝা গুরুত্বপূর্ণ যে ভাল ফলাফলের জন্য আপনাকে অবশ্যই একজন পেশাদার হতে হবে - জ্ঞান থাকার পাশাপাশি, আপনাকে অবশ্যই আপনার দক্ষতাকে ক্রমাগত পদ্ধতিগত এবং আধুনিকীকরণ করতে হবে, সর্বদা "তরঙ্গে" থাকতে হবে এবং শুধুমাত্র প্রাসঙ্গিক আধুনিক পদ্ধতিগুলি ব্যবহার করতে হবে।

    অন্য যেকোনো পেশার মতো, ওয়েবসাইট ডিজাইন করা শেখা শুরু হয় প্রাথমিক ধারণা এবং তত্ত্ব দিয়ে। আমরা আজ তাদের সম্পর্কে কথা বলব। বিশেষ করে, আমি বিবেচনা করব অতি উপযোগী পরিষেবা Interneting is hard, যা আমি 100% সকল নতুনদের জন্য সুপারিশ করছি।

    আমি জানি না আধুনিক বিশ্ববিদ্যালয়গুলিতে অনুরূপ দিকনির্দেশ আছে কিনা, তবে আমি মনে করি যে এই ক্ষেত্রে বিশেষাধিকার বিশেষ অনলাইন কোর্স বা লেআউটের স্বাধীন অধ্যয়ন। প্রথম পদ্ধতিটি আরও ব্যাপক এবং গুরুতর পদ্ধতির প্রস্তাব দেয়, তবে দ্বিতীয়টি সম্পূর্ণ বিনামূল্যে। থিম্যাটিক ব্লগ এবং ভিডিও চ্যানেলগুলির বিকাশের কথা বিবেচনা করে, এখন তথ্য সন্ধানে কোনও সমস্যা নেই।

    ব্যক্তিগতভাবে, আমি এইচটিএমএল/সিএসএস-এর সাধারণ (এবং কাগজের) বই দিয়ে আমার কাজ শুরু করেছিলাম, তারপর কয়েক বছরের প্রশিক্ষণ ছিল এবং সময়ের সাথে সাথে আমি কিছু কোর্সের সাহায্যে জ্ঞানকে একত্রিত/ব্যবস্থাপিত করার সিদ্ধান্ত নিয়েছি। বেছে নেওয়ার জন্য সত্যিই অনেক কিছু আছে, যদিও সব বিকল্পই সার্থক হয় না। আমি নেটোলজি কোম্পানিতে লেআউটের অনলাইন প্রশিক্ষণ নিয়েছি। তারা বর্তমানে পরবর্তী গ্রুপের জন্য নিয়োগ করছে।

    কোর্সগুলির সুবিধা হল যে তারা ধাপে ধাপে এবং কার্যকর জ্ঞান অর্জন করতে পারে:

    • নেতৃস্থানীয় বিশেষজ্ঞ এবং অনুশীলন লেআউট ডিজাইনার দ্বারা সংকলিত তথ্যপূর্ণ বক্তৃতা;
    • স্পষ্ট এবং ভাল-সচিত্র উদাহরণ;
    • উপাদান একত্রীকরণ ব্যবহারিক কাজ.

    বিশেষ করে, নেটোলজিতে প্রশ্ন জিজ্ঞাসা করার সুযোগ সহ ওয়েবিনারের বিন্যাসে সবকিছু ঘটে। হোমওয়ার্ক, একটি থিসিস এবং প্রশিক্ষণ সমাপ্তির একটি শংসাপত্র রয়েছে। সংক্ষেপে, সবকিছু গুরুতর। এই ধরনের অতিরিক্ত বৈশিষ্ট্যগুলি অনলাইন কোর্সগুলিকে আরও "লাভজনক" করে তোলে এবং খরচগুলি কেবল নিজের মধ্যে একটি বিনিয়োগ।

    সন্দেহ থাকলে, নির্দিষ্ট সাইটে বিনামূল্যের উপকরণগুলি দেখুন - একটি নিয়ম হিসাবে, আপনি একইভাবে পর্যালোচনার জন্য কয়েকটি ক্লাস বা শিক্ষামূলক নিবন্ধ পেতে পারেন। ঠিক আছে, অবশ্যই, কয়েক ডজন অন্যান্য শিক্ষামূলক ওয়েব সংস্থান রয়েছে যা অ্যাক্সেসের জন্য আপনাকে অর্থপ্রদান করতে হবে না।

    ইন্টারনেট করা কঠিন - লেআউট শেখার পরিষেবা

    সবশেষে, চলুন ইন্টারনেটিং ইজ হার্ড প্রজেক্টে যাওয়া যাক - ব্যাপারটা আসলে খুবই চমৎকার! এইচটিএমএল এবং সিএসএস আয়ত্ত করার জন্য এটি একটি সম্পূর্ণ বিস্তৃত কোর্স যারা নতুনদের জন্য যারা কখনই ওয়েব পৃষ্ঠাগুলির গঠন এবং তাদের বিকাশ সম্পর্কে বিস্তারিতভাবে বোঝার চেষ্টা করেননি। আপনি যদি লেআউট শেখা শুরু করতে জানেন না, 100% এখানে আসুন।

    শুরু করার জন্য আপনার যা দরকার তা হল ইংরেজি ভাষার অনুপ্রেরণা এবং জ্ঞান। সাংগঠনিক সমস্যাগুলির সাথে কোনও সমস্যা হবে না - বিকাশকারীরা "পাঠ্যক্রম" এর মতো কিছু সংকলন করেছে, যার মধ্যে রয়েছে:

    • উপাদানের ধীরে ধীরে গভীরকরণ সহ 14 অধ্যায়;
    • 284 স্পষ্ট কোড উদাহরণ;
    • চার্ট এবং গ্রাফ;
    • প্রায় 43 হাজার শব্দ;
    • আধুনিক প্রযুক্তি (হ্যাঁ, ফ্লেক্সবক্সও আছে)।
    পরিষেবার বৈশিষ্ট্য এবং টিপস

    ইন্টারনেটিং-এ এইচটিএমএল লেআউট শেখার প্রক্রিয়াটি কঠিন অন্যান্য অনুরূপ প্রকল্পগুলির তুলনায় অনেক সুবিধা রয়েছে:

    1. সুন্দর চিত্রগুলি একটি বিষয়ের কঠিন দিকগুলিকে চিত্রিত করে, যা বোঝা কঠিন কাঠামোগুলিকে পরিষ্কার এবং সহজ করে তোলে। আপনার মাথায় অনেকগুলি অপরিচিত ধারণা জমা করার পরিবর্তে, কোর্সের লেখকদের মতো সেগুলিকে সবচেয়ে মৌলিক উপায়ে কল্পনা করাই যথেষ্ট।

    2. সমস্ত আধুনিক লেআউট কৌশল শেখার প্রক্রিয়ায় ব্যবহৃত হয়: ওয়েব টাইপোগ্রাফি, শব্দার্থিক HTML, প্রতিক্রিয়াশীল নকশা এবং চিত্র তৈরি করা, পাশাপাশি ফ্লেক্সবক্স। তারা একজন শিক্ষানবিসকে একজন অভিজ্ঞ বিশেষজ্ঞ হতে এবং একজন পেশাদারকে তাদের জ্ঞানকে সতেজ করতে সাহায্য করবে;

    3. দৃষ্টান্তমূলক উদাহরণগুলি নির্দিষ্ট পরিস্থিতির মাধ্যমে শেখানো উপাদানের মূল ধারণাগুলি প্রদর্শন করে। এর মানে হল যে ব্যবহারকারীকে পাঠ্যের অন্তহীন "ক্যানভাস" পড়তে হবে না। এই পদ্ধতিটি সর্বদা একঘেয়েমির দিকে পরিচালিত করে, যা শেষ পর্যন্ত অধ্যয়ন পরিত্যাগের দিকে নিয়ে যায়।

    প্রতি 2-3টি অনুচ্ছেদ অনুসরণ করে কোডটি লিখে এবং এটি কীভাবে কাজ করে তা উপস্থাপন করে। এভাবেই ভবিষ্যত বিশেষজ্ঞ টেক্সট এডিটর এবং ব্রাউজারে ফলাফল পরীক্ষা করার জন্য তার প্রথম অনুশীলন পায়;

    4. ওয়েবসাইট লেআউট শেখার এই বিকল্পটি সম্পূর্ণ বিনামূল্যে। এইচটিএমএল শিখতে শুরু করার সময়, অনেকে এখনও দ্বিধায় ভুগছেন যে তারা সত্যিই এটি করতে চান কিনা। এবং যদি অর্থপ্রদানের কোর্সগুলি আপনাকে হারানো অর্থের জন্য অনুশোচনা করতে পারে, তাহলে ইন্টারনেটিং ইজ হার্ড আপনাকে বিনিময়ে একটি ডলার না চেয়ে সর্বোচ্চ জ্ঞান দেবে।

    লেআউটের ধাপে ধাপে শেখার জন্য বিভাগ

    আমি উপরে বলেছি, "পাঠ্যক্রম" 14টি বিষয়ভিত্তিক ব্লক নিয়ে গঠিত। আসুন সেগুলিকে দ্রুত দেখে নেওয়া যাক:

  • ভূমিকা. একটি পরিচায়ক অংশ যা ব্যাখ্যা করে HTML, CSS এবং . এটি ফ্রেমওয়ার্ক এবং ভাষার মধ্যে পার্থক্যগুলিও ব্যাখ্যা করে এবং ATOM পাঠ্য সম্পাদকের সাথে কীভাবে কাজ করতে হয় তাও দেখায়।
  • বেসিক ওয়েব পেজ। দ্বিতীয় অধ্যায় একটি মৌলিক ওয়েব পৃষ্ঠার গঠন চিত্রিত করে। HTML গঠন - সাইটের "কঙ্কাল" - এখানে প্রদর্শিত হয়েছে। ভিজিটর শিখবে কেন ট্যাগগুলি প্রয়োজন, সেগুলি কী এবং সেগুলির প্রতিটি কী উদ্দেশ্যে করা হয়েছে৷
  • লিঙ্ক এবং ছবি. ডিজাইনের মূল বিষয়গুলি জেনে, তৃতীয় বিভাগটি ব্যবহারকারীকে ছবি সাজানোর এবং ওয়েব পেজগুলিকে একে অপরের সাথে সংযুক্ত করার সাথে পরিচয় করিয়ে দেবে।
  • হ্যালো, CSS. পরবর্তী তথাকথিত শৈলী শীট আসে। এই ধারণাটি ডিজাইনের সাথে সম্পর্কিত সবকিছু অন্তর্ভুক্ত করে: ফন্ট, রঙ, অবস্থান, আকার এবং পাঠ্যের আকার।
  • বক্স মডেল। পাঠ্যক্রমের পঞ্চম অধ্যায় ডিজাইনের থিমটি চালিয়ে যাচ্ছে, বিষয়বস্তুর "ব্লক" মডেল সম্পর্কে কথা বলছে। ভবিষ্যত লেআউট ডিজাইনাররা মার্জিন, সীমানা, অভ্যন্তরীণ মার্জিন এবং বিষয়বস্তুর সাথে পরিচিত হন।
  • CSS নির্বাচক। বাক্সগুলি নির্বাচকদের দ্বারা অনুসরণ করা হয় - CSS এর ভিত্তি৷ সম্পাদকে কোড উদাহরণ ব্যবহার করে, কোর্স নির্মাতারা শৈলীর সঠিক ব্যবহার শেখান।
  • ভাসছে। ব্লকের আকার এবং তাদের চারপাশের এলাকাগুলি পরিচালনা করার বিষয়ে আমরা যা শিখেছি তার উপর সপ্তম অংশটি বিস্তৃত হয়েছে। এটি একটি ওয়েব পৃষ্ঠায় প্রবাহের ধারণার প্রতি নিবেদিত (ফ্লোট) এবং সাইটের গ্রিডের সাথে কাজ করার সূক্ষ্মতা বর্ণনা করে।
  • ফ্লেক্সবক্স। পাঠ্যক্রমের বিষুব রেখায় পৌঁছানোর পর, আপনাকে ফ্লেক্সবক্সের সাথে পরিচিত হওয়ার জন্য আমন্ত্রণ জানানো হচ্ছে। এটি একটি আধুনিক লেআউট টুল যা আপনাকে ব্লকের প্রান্তিককরণ, দিকনির্দেশ, ক্রম এবং আকারের উপর সম্পূর্ণ নিয়ন্ত্রণ দেয়। সম্প্রতি, উপায় দ্বারা, আমি একটি এমনকি ঠান্ডা জিনিস সম্পর্কে কথা বললাম.
  • উন্নত অবস্থান। এর পরে আরও জটিল উপাদান আসে - উন্নত অবস্থান এবং এর প্রধান প্রকারগুলি: আপেক্ষিক, পরম এবং স্থির। যদিও, আমার মনে আছে, কোর্সগুলিতে আমরা ফ্লোটের সাথে এবং স্পষ্টতই ফ্লেক্সবক্সের আগে এই বৈশিষ্ট্যটি একসাথে অধ্যয়ন করেছি।
  • প্রতিক্রিয়াশীল ডিজাইন। দশম বিভাগে একটি ওয়েবসাইটে প্রতিক্রিয়াশীল ডিজাইনের মৌলিক বিষয় এবং ভূমিকা ব্যাখ্যা করা হয়েছে। এখন আপনি তাকে ছাড়া বাঁচতে পারবেন না।
  • প্রতিক্রিয়াশীল ছবি. পাঠটি অভিযোজিত চিত্র, তাদের স্কেলিং, নির্দেশনা এবং বিশেষ ফাংশন ব্যবহার করে বিকল্প বিন্যাস তৈরিতে উত্সর্গীকৃত।
  • শব্দার্থিক HTML। দ্বাদশ অধ্যায়টি এইচটিএমএল এর মৌলিক ধারণাগুলিতে ফিরে আসে, এটি একটি শব্দার্থিক দৃষ্টিকোণ থেকে প্রকাশ করে। এখানে পাঠককে "বিভাগীয়" উপাদান, নতুন ট্যাগ এবং তাদের অ্যাপ্লিকেশনের সাথে পরিচয় করিয়ে দেওয়া হয়েছে।
  • ফর্ম শেষ অনুচ্ছেদে, দর্শককে ফর্ম এবং এর উপাদানগুলির নির্মাণ অধ্যয়ন করার সুযোগ দেওয়া হয়: ড্রপ-ডাউন তালিকা, মেনু, পাঠ্য ক্ষেত্র, তাদের নকশা এবং তথ্য প্রেরণ, উদাহরণস্বরূপ, মাধ্যমে।
  • ওয়েব টাইপোগ্রাফি। শেষ টিউটোরিয়ালটি ওয়েবসাইটগুলিতে আধুনিক ওয়েব টাইপোগ্রাফি সম্পর্কে আলোচনা করে - পাঠ্য, শিরোনাম, ফন্ট ইত্যাদির উপস্থিতি। আমার অন্য ব্লগে ওয়েব টাইপোগ্রাফি সম্পর্কে একটি বিভাগ রয়েছে যেখানে আপনি এই বিষয়ে অনেক দরকারী নোট পাবেন।
    • লেআউট শেখানোর জন্য পাঠের কাঠামো

    ইন্টারনেটিং ইজ হার্ড সার্ভিসের কার্যকারিতা এবং সুবিধার প্রশংসা করার জন্য, আমি এর একটি উপধারার বাস্তবায়ন বিবেচনা করার প্রস্তাব করছি। বেসিক ওয়েব পেজ তৈরির দ্বিতীয় পাঠ নেওয়া যাক।

    আমি ব্যক্তিগতভাবে যা পছন্দ করি:

    • সমস্ত উপাদান উপশিরোনাম দ্বারা সংগঠিত হয়. পাঠ্যটি অ্যাক্সেসযোগ্য ভাষায় উপস্থাপিত হয় এবং জটিল পরিভাষা সম্পর্কে গভীর জ্ঞানের প্রয়োজন হয় না। সবকিছুই সংক্ষিপ্ত এবং বিন্দুতে - সেরা ঐতিহ্যে।
    • গুরুত্বপূর্ণ এবং জটিল পয়েন্টগুলি ডায়াগ্রাম দিয়ে সুন্দরভাবে চিত্রিত করা হয়েছে।
    • বোঝার সুবিধা এবং ব্যবহারিক দক্ষতার জন্য, কোড লেখার উদাহরণ দেওয়া হয়েছে।
    • সবকিছু যতটা সম্ভব সুবিধাজনক: উপরের ডানদিকে মেনুতে ফিরে যাওয়ার জন্য একটি বোতাম রয়েছে, আপনি তাত্ক্ষণিকভাবে পাঠের পছন্দসই সাবটাইটেলে স্যুইচ করতে পারেন (ডানদিকে নেভিগেশন) এবং বক্তৃতার পরে আপনি পরবর্তী অধ্যায়টি খুলতে পারেন। চমৎকার ব্যবহারযোগ্যতা.

    উপসংহার

    আমি এটা কিভাবে পছন্দ করব? ইন্টারনেটিং ইজ হার্ড বর্তমানে স্ক্র্যাচ থেকে লেআউট শেখানোর জন্য সেরা সাইটগুলির মধ্যে একটি। কোর্সের লেখকরা নিশ্চিত করেছেন যে নতুন যারা এইচটিএমএল এবং সিএসএস নিয়ে কখনও ডিল করেননি তারা একটি সহজ এবং অ্যাক্সেসযোগ্য উপায়ে ওয়েব পেজ তৈরির মূল বিষয়গুলি বুঝতে পারে। তথ্যটি খুব সুগঠিত - ধীরে ধীরে 14টি বিভাগে আপনি একজন নবীন ব্যবহারকারী থেকে একজন অভিজ্ঞ লেআউট ডিজাইনার হওয়ার পথ অতিক্রম করবেন। অবশ্যই, জ্ঞানের অনুশীলন এবং প্রয়োগ ছাড়া এটি অসম্ভব, তবে তাত্ত্বিক ভিত্তি হিসাবে, এটি আমার কাছে পাওয়া তথ্যের সবচেয়ে সম্পূর্ণ সংগ্রহ। আপনি যদি শিক্ষকদের সাথে অধ্যয়ন করতে চান তবে নেটোলজি থেকে বিকল্পটি দেখুন, এটি বেশ ভাল, যদিও এটি অর্থপ্রদান করা হয়।

    আপনি যদি ওয়েবসাইট লেআউট অধ্যয়ন করার জন্য অন্য কোন আকর্ষণীয় পরিষেবা জানেন, মন্তব্যে লিঙ্ক পাঠান.

    অভিযোজিত ওয়েবসাইট লেআউট ওয়েব পৃষ্ঠাগুলিকে ট্যাবলেট এবং স্মার্টফোনের স্ক্রিনে স্বয়ংক্রিয়ভাবে সামঞ্জস্য করতে দেয়। মোবাইল ইন্টারনেট ট্র্যাফিক প্রতি বছর বাড়ছে, এবং কার্যকরভাবে এই ট্র্যাফিক প্রক্রিয়া করার জন্য, আপনাকে ব্যবহারকারী-বান্ধব ইন্টারফেস সহ ব্যবহারকারীদের প্রতিক্রিয়াশীল ওয়েবসাইটগুলি অফার করতে হবে।

    সার্চ ইঞ্জিন মোবাইল ডিভাইসে দেখা হলে একটি সাইটের প্রতিক্রিয়াশীলতা মূল্যায়ন করার জন্য অনেকগুলি মানদণ্ড ব্যবহার করে৷ মোবাইল সার্চের ফলাফলে মোবাইল-ফ্রেন্ডলি বিশেষ চিহ্ন দিয়ে মোবাইল ডিভাইসের জন্য অভিযোজিত সাইট চিহ্নিত করে স্মার্টফোন এবং ট্যাবলেটের মালিকদের জন্য ইন্টারনেট ব্যবহার সহজ করার চেষ্টা করছে গুগল। ইয়ানডেক্সের একটি অ্যালগরিদমও রয়েছে যা মোবাইল অনুসন্ধানে ব্যবহারকারীদের জন্য একটি মোবাইল/প্রতিক্রিয়াশীল সংস্করণ সহ সাইটগুলিকে অগ্রাধিকার দেয়৷

    আপনি পরিষেবাগুলিতে মোবাইল ডিভাইসে পৃষ্ঠাটির প্রদর্শন পরীক্ষা করতে পারেন এবং।

    ভাত। 1. মোবাইল ডিভাইসে সাইটের বন্ধুত্ব সম্পর্কে একটি নোট সহ Yandex এবং Google থেকে মোবাইল অনুসন্ধান ফলাফল। অভিযোজিত বিন্যাস কি?

    অভিযোজিত বিন্যাস অনুভূমিক স্ক্রল বার এবং মাপযোগ্য অঞ্চলগুলির অনুপস্থিতিকে অনুমান করে যখন কোনও ডিভাইসে দেখা হয়, পাঠযোগ্য পাঠ্য এবং ক্লিকযোগ্য উপাদানগুলির জন্য বড় এলাকা। মিডিয়া ক্যোয়ারী ব্যবহার করে, আপনি একটি পৃষ্ঠায় ব্লকের লেআউট এবং বসানো নিয়ন্ত্রণ করতে পারেন, টেমপ্লেটটি পুনর্বিন্যাস করতে পারেন যাতে এটি বিভিন্ন ডিভাইসের স্ক্রীন আকারের সাথে খাপ খায়।

    একটি প্রতিক্রিয়াশীল ওয়েবসাইট তৈরির প্রাথমিক কৌশল নিবন্ধে দেওয়া হয়েছে। প্রতিক্রিয়াশীল ডিজাইনের জন্য, প্রধান সাইট কন্টেইনারের প্রস্থ %-এ সেট করা হয় এবং এটি ব্রাউজার উইন্ডোর প্রস্থের 100% বা তার কম হতে পারে। গ্রিড কলামের প্রস্থও %-এ নির্দিষ্ট করা আছে। প্রতিক্রিয়াশীল ডিজাইনে, প্রধান ধারক এবং গ্রিড কলামের প্রস্থ px মান ব্যবহার করে স্থির করা হয়।

    এই পাঠে আলোচিত অভিযোজিত তরল বিন্যাস কৌশলটি একটি দুই-কলামের টেমপ্লেটে পুরোপুরি কাজ করবে, সাইটটিকে অভিযোজিত এবং মোবাইল ডিভাইসে দেখার জন্য সুবিধাজনক করে তুলবে। টেমপ্লেটটি পৃষ্ঠাগুলির মূল বিষয়বস্তুর একটি ভিন্ন বিন্যাস অনুমান করে; এই পাঠে মূল পৃষ্ঠার বিন্যাস নিয়ে আলোচনা করা হবে।

    হোম পেজ লেআউট

    একটি পৃষ্ঠা তিনটি প্রধান ব্লক নিয়ে গঠিত: একটি শিরোনাম (শিরোনাম), প্রধান বিষয়বস্তু এবং সাইডবারের জন্য একটি মোড়ক ধারক এবং একটি ফুটার (পাদলেখ)। ডিজাইন টার্নিং পয়েন্ট হিসাবে 768px এবং 480px নেওয়া যাক।

    প্রথম পয়েন্টে, আমরা উপরের মেনুটি লুকিয়ে রাখব এবং পোস্ট সহ কন্টেইনারের নীচে সাইডবারটি সরিয়ে দেব। দ্বিতীয় পয়েন্টে, আমরা হেডার উপাদানগুলির অবস্থান পরিবর্তন করব, পোস্টগুলিতে সোশ্যাল নেটওয়ার্ক বোতামগুলির অবস্থান বাতিল করব এবং পৃষ্ঠার ফুটার কলামগুলির মোড়ক বাতিল করব৷


    ভাত। 2. অভিযোজিত বিন্যাসের উদাহরণ 1. মেটা ট্যাগ এবং বিভাগ

    1) বিভাগে প্রয়োজনীয় ফাইল যোগ করুন - ব্যবহৃত ফন্টগুলির একটি লিঙ্ক, jQuery লাইব্রেরি, সেইসাথে প্রিফিক্সফ্রি প্লাগইন (যাতে বৈশিষ্ট্যগুলির জন্য ব্রাউজার উপসর্গগুলি লিখতে না হয়):

    অভিযোজিত ওয়েবসাইট লেআউট

    2. পৃষ্ঠা শিরোনাম

    আমরা পেজ হেডারে নিম্নলিখিত ধারক উপাদানগুলি রাখব:
    লোগো

    আপনি নিবন্ধটি পছন্দ করেছেন? বন্ধুদের সাথে ভাগাভাগি করা:
    আপনি আগ্রহী হতে পারে
    গভীর স্রাব থেকে ট্যাবলেটটি কীভাবে আনবেন
    সামাজিক মাধ্যম
    শুভ দিন, প্রিয় পাঠক। ওয়েবসাইট লেআউট একটি আকর্ষণীয় ব্যবসা একবার আপনি এটি বুঝতে শুরু. একমাত্র সমস্যা হল এর জন্য সত্যিই ভাল উপকরণ খুঁজে পাওয়া...
    অনলাইনে অর্ডার করা পণ্য কীভাবে প্রত্যাখ্যান করবেন
    ইন্টারনেটে কাজ করা
    শুভ দিন, প্রিয় পাঠক। ওয়েবসাইট লেআউট একটি আকর্ষণীয় ব্যবসা একবার আপনি এটি বুঝতে শুরু. একমাত্র সমস্যা হল এর জন্য সত্যিই ভাল উপকরণ খুঁজে পাওয়া...
    স্থানীয় নেটওয়ার্কে খেলার সময় সম্ভাব্য অসুবিধা
    উইন্ডোজ পাঠ
    শুভ দিন, প্রিয় পাঠক। ওয়েবসাইট লেআউট একটি আকর্ষণীয় ব্যবসা একবার আপনি এটি বুঝতে শুরু. একমাত্র সমস্যা হল এর জন্য সত্যিই ভাল উপকরণ খুঁজে পাওয়া...
    ডিস্কে একটি GPT পার্টিশন শৈলী আছে। Windows 7 gpt ইনস্টল করা কি সম্ভব?
    উইন্ডোজ পাঠ
    শুভ দিন, প্রিয় পাঠক। ওয়েবসাইট লেআউট একটি আকর্ষণীয় ব্যবসা একবার আপনি এটি বুঝতে শুরু. একমাত্র সমস্যা হল এর জন্য সত্যিই ভাল উপকরণ খুঁজে পাওয়া...
                     তথ্য নিরাপত্তা পরীক্ষাগার কতক্ষণ লেগেছে?
    ইন্টারনেটে কাজ করা
    শুভ দিন, প্রিয় পাঠক। ওয়েবসাইট লেআউট একটি আকর্ষণীয় ব্যবসা একবার আপনি এটি বুঝতে শুরু. একমাত্র সমস্যা হল এর জন্য সত্যিই ভাল উপকরণ খুঁজে পাওয়া...
    ওসমানভ ইসমাইল মাগোমেদগিরোভিচ ওসমানভ ইসমাইল ম্যাগোমেডোভিচের জীবনী
    স্কাইপ
    শুভ দিন, প্রিয় পাঠক। ওয়েবসাইট লেআউট একটি আকর্ষণীয় ব্যবসা একবার আপনি এটি বুঝতে শুরু. একমাত্র সমস্যা হল এর জন্য সত্যিই ভাল উপকরণ খুঁজে পাওয়া...