ينبغي أن يستجيب تخطيط صفحات الويب وأن يتأقلم مع أبعاد الجهاز الذي سيتم عرضه عليه. توفر تخطيطات الشبكات المرنة أسلوبًا بصريًا لإنشاء تخطيطات مختلفة وفقًا للأجهزة الذي يتم عرض موقع الويب عليها.
على سبيل المثال، سيتم عرض موقع الويب الخاص بك على أجهزة كمبيوتر مكتبية ولوحية وهواتف محمولة. يمكنك استخدام تخطيطات الشبكات المرنة لتحديد تخطيطات لكل من هذه الأجهزة. استنادًا إلى ما إذا كنت موقع الويب سيتم عرضه على كمبيوتر مكتبي أو لوحي أو هاتف محمول، سيتم استخدام التخطيط المناظر لعرض موقع الويب.
المزيد من المعلومات: التخطيط التكيفي أم التخطيط الاستجابي
يتضمن إصدار Dreamweaver 12.2 Creative Cloud العديد من التحسينات على تخطيطات الشبكة المرنة مثل دعم عناصر HTML5 البنيوية وتسهيل تحرير العناصر المتداخلة. للاطلاع على نظرة عامة حول القائمة الكاملة للتحسينات، انقر هنا.
ملاحظة:
لا يتوفر وضع الفحص لمستندات تخطيط Fluid Grid في Dreamweaver 13.1 والإصدارات الأحدث.
شاهد هذا التدريب بالفيديو لمعرفة كيفية استخدام تخطيطات الشبكة المرنة: اكتشاف تخطيطات الشبكة المرنة.
-
احفظ الملف. عند حفظ ملف HTML، سيُطلب منك حفظ الملفات التابعة مثل boilerplate.css وrespond.min.js في موقع على الكمبيوتر. حدد موقعًا وانقر فوق Copy.
ملف boilerplate.css مستند إلى النص الأساسي لـ HTML5. وهو عبارة عن مجموعة من أنماط CSS التي تضمن اتساق عرض صفحة الويب عبر العديد من الأجهزة. ملف respond.min.js هو مكتبة JavaScript تساعد في توفير الدعم لاستعلامات الوسائط في الإصدارات السابقة من المستعرض.
تسرد اللوحة Insert (Window > Insert) العناصر التي يمكنك استخدامها في تخطيط Fluid Grid. أثناء إدراج العناصر، يمكنك اختبار إدراجها كعناصر Fluid.
-
عند تحديد عنصر مدرج، يتم عرض خيارات إخفاء Div أو تكراره أو قفله أو حذفه. بالنسبة إلى عناصر Div الموضوعة في طبقات فوق بعضها البعض، يتم عرض خيار تبديل Divs.
خيار التسمية الوصف A Swap Div لتبديل العنصر المحدد حاليًا بالعنصر أعلاه أو أدناه.
B Hide لإخفاء العنصر.
لإظهار عنصر، قم بأحد الإجراءات التالية:
لإظهار محددات المعرف، قم بتغيير خاصية العرض في ملف CSS إلى الحظر. (display:block)
لإظهار محددات الفئة، قم بإزالة الفئة المطبّقة (hide_<MediaType>) في التعليمة البرمجية المصدر.
C Move up a row لنقل العنصر للأعلى صف واحد
D Duplicate لتكرار العنصر المحدد حاليًا. كما يتم تكرار CSS المرتبط بالعنصر.
E Delete بالنسبة إلى محددات المعرف، قم بحذف ملف HTML وCSS معًا. لحذف HTML فقط، اضغط على Delete.
بالنسبة إلى محددات الفئة، يتم حذف ملف HTML فقط.
F Lock لتحويل العنصر إلى عنصر مطلق الوضع.
G Align بالنسبة إلى محددات الفئة، يعمل خيار Align كزر هامش صفري.
بالنسبة إلى محددات المعرف، يعمل زر المحاذاة على محاذاة العنصر إلى الشبكة.ملاحظة:
يمكن نقل العناصر المرنة على الصفحات بشكل دائري فوق بعضها البعض باستخدام المفتاحين الأيسر والأيمن. حدد حد العنصر ثم اضغط على مفتاح السهم.
لتضمين العناصر المرنة في عناصر مرنة أخرى، تأكد من أن التركيز في العنصر الأساسي. ثم أدرج العنصر الفرعي المطلوب.
Nested Duplication مدعوم أيضًا. يؤدي Nested Duplication إلى تكرار HTML (للعنصر المحدد) وإنشاء Fluid CSS ذي صلة. يتم وضع العناصر المطلقة المضمنة في العنصر المحدد على نحو مناسب. يمكن أيضًا تكرار العناصر المتداخلة باستخدام زر التكرار.
عند حذف عنصر أساسي، يتم حذف CSS المناظر للعنصر والعناصر الفرعية له وHTML المرتبط به. يمكن أيضًا حذف العناصر المتداخلة معًا باستخدام الزر Delete (اختصار لوحة المفاتيح: Ctrl+Delete).
إن بنود Creative Commons لا تشمل منشورات Twitter™ وFacebook.