3.3 KiB
| title | localeTitle |
|---|---|
| Layouts | تخطيطات |
تخطيطات
تخطيطات تنظم مناطق مختلفة من صفحة الويب.
يمكن تقسيم كل صفحة الويب التي نراها تقريبًا إلى مربعات ، يمكن ترتيبها بترتيب معين لإنشاء صفحة الويب هذه. الصورة أدناه مثال واحد.
غالبًا ما تعرض مواقع الويب محتوى في عدة أعمدة (مثل مجلة أو صحيفة).
وتساعدنا تقنيات تخطيط HTML على وضع المعلومات المطلوبة في الطلب أو التصميم المطلوب.
تقنيات لتنفيذ التخطيطات
جداول HTML
واحدة من أكثر الأدوات الأساسية لتنفيذ التنسيقات في صفحة الويب ، يتم توفيرها بواسطة HTML. ولكن نظرًا لأن التخطيط يصبح معقدًا ، فإن جداول HTML ستفقد سرعتها بسهولة ، نظرًا لزيادة نصوص الترميز.
CSS Float
إذا كنت تريد تصميم صفحة تستند إلى 2 عمود مع جزء التنقل الأيسر ومنطقة عرض المحتوى المركزي ، فمن السهل القيام بذلك باستخدام floats CSS. ما عليك سوى تعيين صفحة الاستكشاف اليمنى في <div> مع خاصية float: left; . و voila تحصل على هذا التصميم. ولكن ماذا لو كان لديك 4 أعمدة في قسم واحد. بالتأكيد ، يمكن للمرء أن يفعل ذلك بعوامات ، ولكن سيكون من السهل فهم صيغة HTML التي تكتبها.
أطر CSS
هذا هو المكان الذي تأتي فيه CSS Frameworks مثل Bootstrap و Materialize . توفر أطر العمل هذه وظيفة الشبكة التي تسمح بتقسيم كل قسم من صفحة الويب الخاصة بك إلى 12 عمودًا ، والتي يمكنك طلبها لتصميمها.
عينة Bootstrap الشبكة
HTML الدلالي الدلائل
غالبًا ما تعرض مواقع الويب محتوى في عدة أعمدة (مثل مجلة أو صحيفة).
تقدم HTML5 عناصر دلالية دلالية تحدد الأجزاء المختلفة لصفحة الويب:
`
- Defines a header for a document or a section - Defines a container for navigation links