دليل المستخدم إلغاء

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

بحث

تاريخ آخر تحديث 18 فبراير 2022

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

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

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

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

لا يتوفر وضع الفحص لمستندات تخطيط الشبكة المرنة.

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

يمكنك تحرير تخطيطات الشبكات المرنة الموجودة في Dreamweaver 2017. ومع ذلك، لا يمكنك إنشاء تخطيطات الشبكات المرنة.

ويمكنك، بدلاً من ذلك، استخدام bootstrap لإنشاء تخطيطات تفاعلية في Dreamweaver 2017. لمزيد من المعلومات حول Bootstrap، راجع العمل باستخدام ملفات Bootstrap.

حدد File > Fluid Grid (القديمة).
القيمة الافتراضية لعدد الأعمدة الموجودة في الشبكة معروضة في منتصف نوع الوسائط. لتخصيص عدد الأعمدة لجهاز، قم بتحرير القيمة على النحو المطلوب.
لتعيين عرض الصفحات مقارنة بحجم الشاشة، قم بتعيين القيمة بالنسبة المئوية.
يمكنك تغيير عرض هامش التوثيق بالإضافة إلى ذلك. هامش التوثيق هو المسافة بين عمودين.
حدد خيارات CSS للصفحة.

عند النقر فوق Create، سيطلب منك تحديد ملف CSS. يمكنك القيام بأي من الإجراءات التالية:
- إنشاء ملف CSS جديد.
- فتح ملف CSS حالي.
- حدد ملف CSS المفتوح كملف CSS لشبكة مرنة.
يتم عرض الشبكات المرنة للهواتف المحمولة افتراضيًا. كما يتم أيضًا عرض لوحة Insert للشبكة المرنة. استخدم خيارات اللوحة Insert لإنشاء التخطيط.

للتحويل لتصميم التخطيط لأجهزة أخرى، انقر فوق الرمز المناظر في الخيارات الموجودة أسفل العرض Design.
احفظ الملف. عند حفظ ملف HTML، سيُطلب منك حفظ الملفات التابعة مثل boilerplate.css وrespond.min.js في موقع على الكمبيوتر. حدد موقعًا وانقر فوق Copy.

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

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

يمكنك تحرير مستندات الشبكة المرنة مباشرةً في طريقة العرض Live من أجل:

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

يمكنك الآن أيضًا عرض بنية HTML DOM لمستند الشبكة المرنة باستخدام Element Quick View.

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

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

في اللوحة Insert، انقر فوق العنصر الذي تريد إدراجه.
في مربع الحوار الذي يظهر، انقر فوق Before أو After أو Next لوضع العنصر بشكل نسبي للعنصر المرجعي المميز في المستند.
حدد فئة أو أدخل قيمة للمعرف. تعرض القائمة Class الفئات من ملف CSS الذي حددته عند إنشاء الصفحة.
حدد خانة الاختيار Insert As Fluid Element.

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

الخيار	الوصف
Swap Div	لتبديل العنصر المحدد حاليًا بالعنصر أعلاه أو أدناه.
Hide	لإخفاء العنصر. لإظهار عنصر، قم بأحد الإجراءات التالية: لإظهار محددات المعرف، قم بتغيير خاصية العرض في ملف CSS إلى الحظر. (display:block) ‬‏‫لإظهار محددات الفئة، قم بإزالة الفئة المطبّقة (hide_<MediaType>) في التعليمات البرمجية المصدر.
Move up a row	لنقل العنصر للأعلى صف واحد
Duplicate	لتكرار العنصر المحدد حاليًا. كما يتم تكرار CSS المرتبط بالعنصر.
Delete	بالنسبة إلى محددات المعرف، قم بحذف ملف HTML وCSS معًا. لحذف HTML فقط، اضغط على Delete. بالنسبة إلى محددات الفئة، يتم حذف ملف HTML فقط.
Align	بالنسبة إلى محددات الفئة، يعمل خيار Align كزر هامش صفري. بالنسبة إلى محددات المعرف، يعمل زر المحاذاة على محاذاة العنصر إلى الشبكة.

ملاحظة:

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

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

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

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

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

احصل على مساعدة بشكل أسرع وأسهل

مستخدم جديد؟