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

إنشاء استعلامات الوسائط واستخدامها في Dreamweaver

بحث

تاريخ آخر تحديث 6 مايو 2021

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

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

يمكنك إضافة استعلامات الوسائط باستخدام قاعدة @media لـ CSS. أو بدلاً من ذلك، يمكنك إنشاء أوراق أنماط مختلفة لأنواع وسائط مختلفة ثم استدعاؤها باستخدام بناء الجملة التالي:

<link rel='stylesheet' media='all' href='normal.css' />
<link rel='stylesheet' media='print' href='print.css' />
<link rel='stylesheet' media='screen and (min-width: 701px)' href='medium.css' />

يفحص المستعرض في جهاز ما استعلام الوسائط ويستخدم ملف CSS المتناظر لعرض صفحة الويب.

للاطلاع على المزيد من المعلومات، انظر هذه المقالة.

يمكنك إضافة استعلامات الوسائط عن طريق إضافة الكود البرمجي ذات الصلة لأحد ملفي HTML أو CSS. بالإضافة إلى ذلك، يتيح لك Dreamweaver إنشاء استعلامات وسائط وإدارتها بسهولة باستخدام:

الاختلاف الأساسي بين هذين الأسلوبين هو العرض المرئي. إذا كنت تفضل تعيين التغييرات في طريقة العرض Live ككود برمجي ثم عرضها، فاستخدم CSS Designer. وإذا كنت تفضل عرض صفحتك في نقاط فاصل مختلفة وإجراء تغييرات تصميم على الفور، فاستعلام الوسائط المرئية هو الأفضل.

أشرطة استعلام الوسائط المرئية

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

يتكون استعلام الوسائط المرئية من ثلاثة أشرطة كصفوف أفقية، يمثل كل صف فئة من استعلام الوسائط:

Green: استعلامات الوسائط مع شروط max-width
Blue : استعلامات الوسائط مع شروط min-width وmax-width
Purple : استعلامات الوسائط مع شروط min-width

ملاحظة:

يتم بدء استعلامات الوسائط المدرجة في لوحة مصمم CSS بهذه الألوان.

يمكن أن تحتوي كل فئة على استعلام وسائط أو أكثر. إذا لم يتم تعريف شرط استعلام الوسائط في المستند، فلن يتم عرض شريط استعلام الوسائط المرئي المقابل، أيضًا. على سبيل المثال، إذا لم يحتو المستند على شروط min-width، فلن يتم عرض الشريط الأرجواني.

تتم الإشارة إلى قيم نقاط الفاصل على الأشرطة - min-width على اليسار وmax-width على يمين الشريط.

A. نقاط الفاصل B. أشرطة استعلام الوسائط المرئية C. إضافة رمز استعلام وسائط D. الشريط المنزلق

إظهار استعلامات الإعلام المرئي أو إخفائها

يكون شريط استعلام الوسائط المرئية مرئيًا في طريقة العرض Live بشكل افتراضي. لإخفاء الشريط، استخدام شريط Toggle Visual Media Queries في شريط الأدوات.

الانتقال بين نقاط الفصل

لعرض صفحتك بحجم معين (نقطة فاصل)، انقر فوق شريط استعلام الوسائط المقابل. سيقوم المستند بالإطباق على نقطة الفاصل.

أو بدلاً من ذلك، يمكنك سحب الشريط المنزلق إلى نقطة الفاصل المطلوبة.

لتغيير حجم طريقة العرض إلى حجم نافذة مستند Dreamweaver، قم بأحد الإجراءات التالية:

انقر نقرًا مزدوجًا فوق أي مكان في المنطقة الرمادية في الجزء الأيسر للمستند حيث ترى النص "Double Click To Fit Width". إذا لم تر المنطقة الرمادية، فاسحب الشريط المنزلق إلى اليسار.
حدد خيار Full Width في القائمة المنسدلة أسفل نافذة المستند.

إذا لم تشاهد هذا الخيار، فقم بسحب الشريط المنزلق لتقليل حجم صفحة الويب.

تحرير استعلامات الوسائط بشكل مرئي

انقر فوق شريط استعلام الوسائط المرئية الذي يتطابق مع استعلام الوسائط الذي تريد تحريره.

تظهر مقابض تغيير الحجم. بالنسبة لاستعلامات الوسائط التي تحتوي على قيم min وmax-width، تظهر مقابض تغيير الحجم على كلا جانبي الشريط.

مقابض تغيير الحجم
اسحب المقابض إلى الحجم المطلوب.

يتم تحديث استعلامات الوسائط تلقائيًا بالقيم min-width و/أو max-width. يتم عرض إعلام للإشارة إلى أنه تم تحرير استعلام الوسائط بنجاح. إذا كان هناك العديد من استعلامات الوسائط تتوافق مع شريط استعلام الوسائط المرئية، يتم تحديث جميع استعلامات الوسائط. يتم عرض عدد استعلامات الوسائط التي تم تحديثها مع رسالة النجاح.

ملاحظة:

للتراجع، اضغط على Ctrl+Z ‏(في Win)‏‏ أو‏ Cmd+Z ‏(في Mac).

أو بدلاً من ذلك، يُمكنك النقر المزدوج فوق قيم نقطة الفاصل للكتابة في القيم باستخدام لوحة المفاتيح لديك.

إضافة استعلامات وسائط جديدة

اسحب الشريط المنزلق على طول المسطرة إلى الحجم المطلوب.
انقر فوق .

إضافة استعلامات وسائط
في القائمة المنبثقة التي تظهر، يتم تحديد خيار max-width افتراضيًا. لتحديد min-width أو min-max، حدد الخيار المناسب في القائمة المنسدلة وحدد الوحدات المطلوبة.

ثم حدد مصدر CSS الذي يجب إضافة استعلام الوسائط إليه.

إذا اخترت إنشاء ملف CSS جديد، فستظهر نافذة منبثقة أخرى. حدد الاسم والمسار الخاصين بملف CSS الجديد ثم انقر فوق OK.

ملاحظة:

للتراجع، اضغط على Ctrl+Z ‏(في Win)‏‏ أو‏ Cmd+Z ‏(في Mac).

حذف استعلامات الوسائط

انقر بزر الماوس الأيمن فوق شريط استعلام الوسائط المرئية المقابل.
انقر فوق "حذف" ثم انقر فوق استعلام الوسائط الذي تريد حذفه.
انقر فوق "موافق" لتأكيد حذف جميع استعلامات الوسائط والمحددات المرتبطة.

ملاحظة:

للتراجع، اضغط على Ctrl+Z ‏(في Win)‏‏ أو‏ Cmd+Z ‏(في Mac).

عرض الكود البرمجي لاستعلامات الوسائط

انقر بزر الماوس الأيمن فوق شريط استعلام الوسائط المرئية المطلوب وقم بتمرير الماوس فوق Go To Code.

تظهر قائمة بجميع استعلامات الوسائط في نطاق نقطة الفاصل الخاص هذا مع الملفات الموضحة بها.
انقر فوق استعلام الوسائط المطلوب للانتقال إلى الكود البرمجي المقابلة في طريقة العرض Code.

إذا كانت طريقة العرض Code غير مرئية، يتم تحويل المستند إلى طريقة العرض Split لعرض الكود البرمجي.

Adobe

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

مستخدم جديد؟

إنشاء استعلامات الوسائط واستخدامها في Dreamweaver

أشرطة استعلام الوسائط المرئية

إظهار استعلامات الإعلام المرئي أو إخفائها

الانتقال بين نقاط الفصل

تحرير استعلامات الوسائط بشكل مرئي

إضافة استعلامات وسائط جديدة

حذف استعلامات الوسائط

عرض الكود البرمجي لاستعلامات الوسائط

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

طرح سؤال على المجتمع

اتصل بنا