تخطيطات الشبكة المرنة (CC)

بحث
Adobe Dreamweaver CS6 دليل المستخدم

في هذه الصفحة

يسري على: Adobe Dreamweaver CS6

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

ينبغي أن يستجيب تخطيط صفحات الويب وأن يتأقلم مع أبعاد الجهاز الذي سيتم عرضه عليه. توفر تخطيطات الشبكات المرنة أسلوبًا بصريًا لإنشاء تخطيطات مختلفة وفقًا للأجهزة الذي يتم عرض موقع الويب عليها.

على سبيل المثال، سيتم عرض موقع الويب الخاص بك على أجهزة كمبيوتر مكتبية ولوحية وهواتف محمولة. يمكنك استخدام تخطيطات الشبكات المرنة لتحديد تخطيطات لكل من هذه الأجهزة. استنادًا إلى ما إذا كنت موقع الويب سيتم عرضه على كمبيوتر مكتبي أو لوحي أو هاتف محمول، سيتم استخدام التخطيط المناظر لعرض موقع الويب.

المزيد من المعلومات: التخطيط التكيفي أم التخطيط الاستجابي

يتضمن إصدار Dreamweaver 12.2 Creative Cloud العديد من التحسينات على تخطيطات الشبكة المرنة مثل دعم عناصر HTML5 البنيوية وتسهيل تحرير العناصر المتداخلة. للاطلاع على نظرة عامة حول القائمة الكاملة للتحسينات، انقر هنا.

ملاحظة:

لا يتوفر وضع الفحص لمستندات تخطيط Fluid Grid في Dreamweaver 13.1 والإصدارات الأحدث.

استخدام تخطيطات الشبكات المرنة

شاهد هذا التدريب بالفيديو لمعرفة كيفية استخدام تخطيطات الشبكة المرنة: اكتشاف تخطيطات الشبكة المرنة.

إنشاء تخطيط شبكة مرنة

  1. حدد File > New Fluid Grid Layout.

  2. القيمة الافتراضية لعدد الأعمدة الموجودة في الشبكة معروضة في منتصف نوع الوسائط. لتخصيص عدد الأعمدة لجهاز، قم بتحرير القيمة على النحو المطلوب.

  3. لتعيين عرض الصفحات مقارنة بحجم الشاشة، قم بتعيين القيمة بالنسبة المئوية.

  4. يمكنك تغيير عرض هامش التوثيق بالإضافة إلى ذلك. هامش التوثيق هو المسافة بين عمودين.

  5. حدد خيارات CSS للصفحة.

    عند النقر فوق Create، سيطلب منك تحديد ملف CSS. يمكنك القيام بأي من الإجراءات التالية:

    • إنشاء ملف CSS جديد.
    • فتح ملف CSS حالي.
    • حدد ملف CSS المفتوح كملف CSS لشبكة مرنة.

    يتم عرض الشبكات المرنة للهواتف المحمولة افتراضيًا. كما يتم أيضًا عرض لوحة Insert للشبكة المرنة. استخدم خيارات اللوحة Insert لإنشاء التخطيط.

    للتحويل لتصميم التخطيط لأجهزة أخرى، انقر فوق الرمز المناظر في الخيارات الموجودة أسفل العرض Design.

  6. احفظ الملف. عند حفظ ملف HTML، سيُطلب منك حفظ الملفات التابعة مثل boilerplate.css وrespond.min.js في موقع على الكمبيوتر. حدد موقعًا وانقر فوق Copy.

    ملف boilerplate.css مستند إلى النص الأساسي لـ HTML5. وهو عبارة عن مجموعة من أنماط CSS التي تضمن اتساق عرض صفحة الويب عبر العديد من الأجهزة. ملف respond.min.js هو مكتبة JavaScript تساعد في توفير الدعم لاستعلامات الوسائط في الإصدارات السابقة من المستعرض. 

     

إدراج عناصر الشبكات المرنة

تسرد اللوحة Insert ‏(Window > Insert) العناصر التي يمكنك استخدامها في تخطيط Fluid Grid. أثناء إدراج العناصر، يمكنك اختبار إدراجها كعناصر Fluid.

  1. في اللوحة Insert، حدد العنصر الذي تريد إدراجه.

  2. في مربع الحوار الذي يظهر، حدد فئة أو أدخل قيمة للمعرف. تعرض القائمة Class الفئات من ملف CSS الذي حددته عند إنشاء الصفحة.

  3. حدد خانة الاختيار Insert As Fluid Element.

  4. عند تحديد عنصر مدرج، يتم عرض خيارات إخفاء Div أو تكراره أو قفله أو حذفه. بالنسبة إلى عناصر Div الموضوعة في طبقات فوق بعضها البعض، يتم عرض خيار تبديل Divs.

    خيارالتسميةالوصف
    ASwap Divلتبديل العنصر المحدد حاليًا بالعنصر أعلاه أو أدناه.
    BHideلإخفاء العنصر.

    لإظهار عنصر، قم بأحد الإجراءات التالية:

    لإظهار محددات المعرف، قم بتغيير خاصية العرض في ملف CSS إلى الحظر. (display:block)

    ‬‏‫لإظهار محددات الفئة، قم بإزالة الفئة المطبّقة (hide_<MediaType>) في التعليمة البرمجية المصدر.
    CMove up a rowلنقل العنصر للأعلى صف واحد
    DDuplicateلتكرار العنصر المحدد حاليًا. كما يتم تكرار CSS المرتبط بالعنصر.
    EDeleteبالنسبة إلى محددات المعرف، قم بحذف ملف HTML وCSS معًا. لحذف HTML فقط، اضغط على Delete.
    بالنسبة إلى محددات الفئة، يتم حذف ملف HTML فقط.
    FLockلتحويل العنصر إلى عنصر مطلق الوضع.
    GAlignبالنسبة إلى محددات الفئة، يعمل خيار Align كزر هامش صفري.
    بالنسبة إلى محددات المعرف، يعمل زر المحاذاة على محاذاة العنصر إلى الشبكة.

    ملاحظة:

    يمكن نقل العناصر المرنة على الصفحات بشكل دائري فوق بعضها البعض باستخدام المفتاحين الأيسر والأيمن. حدد حد العنصر ثم اضغط على مفتاح السهم.

تضمين العناصر

لتضمين العناصر المرنة في عناصر مرنة أخرى، تأكد من أن التركيز في العنصر الأساسي. ثم أدرج العنصر الفرعي المطلوب.

Nested Duplication مدعوم أيضًا. يؤدي Nested Duplication إلى تكرار HTML (للعنصر المحدد) وإنشاء Fluid CSS ذي صلة. يتم وضع العناصر المطلقة المضمنة في العنصر المحدد على نحو مناسب. يمكن أيضًا تكرار العناصر المتداخلة باستخدام زر التكرار.

عند حذف عنصر أساسي، يتم حذف CSS المناظر للعنصر والعناصر الفرعية له وHTML المرتبط به. يمكن أيضًا حذف العناصر المتداخلة معًا باستخدام الزر Delete (اختصار لوحة المفاتيح: Ctrl+Delete).