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

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

  1. دليل مستخدم Dreamweaver
  2. مقدمة
    1. أساسيات تصميم الويب التفاعلي
    2. الجديد في Dreamweaver
    3. تطوير الويب باستخدام Dreamweaver - نظرة عامة
    4. Dreamweaver | الأسئلة الشائعة
    5. اختصارات لوحة المفاتيح‬‏‫
    6. متطلبات النظام لبرنامج Dreamweaver
    7. ملخص الميزات
  3. Dreamweaver وCreative Cloud
    1. مزامنة إعدادات Dreamweaver مع Creative Cloud
    2. مكتبات Creative Cloud في Dreamweaver
    3. استخدام ملفات Photoshop في Dreamweaver
    4. العمل باستخدام Adobe Animate وDreamweaver
    5. استخراج ملفات SVG المحسّنة من المكتبات
  4. مساحات عمل Dreamweaver وطرق عرضه
    1. مساحة عمل Dreamweaver
    2. تحسين مساحة عمل Dreamweaver للتطوير المرئي
    3. البحث عن الملفات استنادًا إلى اسم الملف أو المحتوى | Mac OS
  5. إعداد المواقع
    1. حول مواقع Dreamweaver
    2. إعداد إصدار محلي من موقعك
    3. الاتصال بخادم نشر
    4. إعداد خادم اختبار
    5. استيراد إعدادات موقع Dreamweaver وتصديرها
    6. إحضار مواقع ويب موجودة من خادم بعيد إلى جذر موقع الويب المحلي
    7. ميزات الوصول في Dreamweaver
    8. الإعدادات المتقدمة
    9. تعيين تفضيلات الموقع لنقل الملفات
    10. تحديد إعدادات خادم الوكيل في Dreamweaver
    11. مزامنة إعدادات Dreamweaver مع Creative Cloud
    12. استخدام Git في Dreamweaver
  6. إدارة الملفات
    1. إنشاء الملفات وفتحها
    2. إدارة الملفات والمجلدات
    3. إحضار الملفات من الخادم ووضعها فيه
    4. سحب الملفات وإيداعها
    5. مزامنة الملفات
    6. مقارنة الملفات لمعرفة الاختلافات
    7. حماية ملفات ومجلدات في موقع Dreamweaver
    8. تمكين Design Notes لمواقع Dreamweaver وتعطيلها
    9. منع الاستغلال المحتمل لـ Gatekeeper
  7. التخطيط والتصميم
    1. استخدام الأدوات المساعدة المرئية للتخطيط
    2. حول استخدام CSS لتخطيط صفحاتك
    3. تصميم مواقع ويب تفاعلية باستخدام Bootstrap
    4. إنشاء استعلامات الوسائط واستخدامها في Dreamweaver
    5. عرض المحتوى باستخدام الجداول
    6. الألوان
    7. تصميم استجابة باستخدام مخططات الشبكة المرنة
    8. ميزة Extract في Dreamweaver
  8. CSS
    1. فهم أوراق الأنماط المتتالية
    2. تخطيط الصفحات باستخدام CSS Designer
    3. استخدام معالجات CSS الأولية في Dreamweaver
    4. كيفية تعيين تفضيلات أنماط CSS في Dreamweaver
    5. نقل قواعد CSS في Dreamweaver
    6. تحويل CSS مضمنة إلى قاعدة CSS في Dreamweaver
    7. استخدام علامات div
    8. تطبيق تدرجات على الخلفية
    9. إنشاء تأثيرات CSS3 الانتقالية وتحريرها في Dreamweaver
    10. تنسيق التعليمات البرمجية
  9. محتويات الصفحة وأصولها
    1. تعيين خصائص الصفحة
    2. تعيين خصائص عناوين CSS وخصائص ارتباطات CSS
    3. استخدام النص
    4. البحث عن النص والعلامات والسمات واستبدالها
    5. لوحة DOM
    6. التحرير في Live View
    7. ترميز المستندات في Dreamweaver
    8. تحديد العناصر وعرضها في النافذة Document
    9. تعيين خصائص النص في عارض الخصائص
    10. إجراء التدقيق الإملائي لصفحة ويب
    11. استخدام القواعد الأفقية في Dreamweaver
    12. إضافة مجموعات الخطوط وتعديلها في Dreamweaver
    13. استخدام الأصول
    14. إدراج التواريخ وتحديثها في Dreamweaver
    15. إنشاء الأصول المفضلة وإدارتها في Dreamweaver
    16. إدراج الصور وتحريرها في Dreamweaver
    17. إضافة كائنات وسائط
    18. إضافة مقاطع الفيديو في Dreamweaver
    19. إدراج فيديو HTML5
    20. إدراج ملفات SWF
    21. إضافة تأثيرات صوتية
    22. إدراج صوت HTML5 في Dreamweaver
    23. العمل باستخدام عناصر المكتبة
    24. استخدام النصوص العربية والعبرية في Dreamweaver
  10. الربط والتنقل
    1. حول الربط والتنقل
    2. الربط
    3. مخططات الصور
    4. استكشاف أخطاء الارتباطات وحلها
  11. عناصر واجهة jQuery وتأثيراتها
    1. استخدام عناصر واجهة مستخدم jQuery UI والجوال في Dreamweaver
    2. استخدام تأثيرات jQuery في Dreamweaver
  12. كتابة التعليمات البرمجية لمواقع الويب
    1. حول كتابة التعليمات البرمجية في Dreamweaver
    2. بيئة كتابة التعليمات البرمجية في Dreamweaver
    3. تعيين تفضيلات التعليمات البرمجية
    4. تخصيص ألوان التعليمات البرمجية
    5. كتابة تعليمة برمجية وتحريرها
    6. تلميحات التعليمات البرمجية وإكمال التعليمات البرمجية
    7. طي التعليمات البرمجية وتوسيعها
    8. إعادة استخدام التعليمات البرمجية مع أجزاء التعليمات البرمجية
    9. فحص التعليمات البرمجية
    10. تحسين التعليمة البرمجية
    11. تحرير التعليمة البرمجية في طريقة العرض Design
    12. العمل باستخدام محتوى العنوان للصفحات
    13. إدراج تضمينات على جانب الخادم في Dreamweaver
    14. استخدام مكتبات العلامات في Dreamweaver
    15. استيراد علامات مخصصة إلى Dreamweaver
    16. استخدام سلوكيات JavaScript (إرشادات عامة)
    17. تطبيق سلوكيات JavaScript المضمنة
    18. نبذة عن لغتي XML وXSLT
    19. تنفيذ تحويلات XSL على جانب الخادم في Dreamweaver
    20. تنفيذ تحويلات XSL على جانب العميل في Dreamweaver
    21. إضافة كيانات أحرف لـ XSLT في Dreamweaver
    22. تنسيق التعليمات البرمجية
  13. عمليات سير العمل على مستوى المنتجات
    1. تثبيت الملحقات واستخدامها في Dreamweaver
    2. التحديثات من داخل التطبيق في Dreamweaver
    3. إدراج مستندات Microsoft Office في Dreamweaver ‏(Windows فقط)
    4. استخدام Fireworks وDreamweaver
    5. تحرير المحتوى في مواقع Dreamweaver باستخدام Contribute
    6. تكامل Dreamweaver مع تطبيق Business Catalyst
    7. إنشاء حملات إعلانية خاصة عبر البريد الإلكتروني
  14. القوالب
    1. حول قوالب Dreamweaver
    2. التعرف على القوالب والمستندات القائمة على القوالب
    3. إنشاء قالب Dreamweaver
    4. إنشاء مناطق قابلة للتحرير في القوالب
    5. إنشاء مناطق وجداول التكرار في Dreamweaver
    6. استخدام المناطق الاختيارية في القوالب
    7. تحديد سمات العلامات القابلة للتحرير في Dreamweaver
    8. كيفية إنشاء قوالب متداخلة في Dreamweaver
    9. تحرير القوالب وتحديثها وحذفها
    10. تصدير محتوى xml واستيراده في Dreamweaver
    11. تطبيق أو إزالة قالب من مستند موجود
    12. تحرير المحتوى في قوالب Dreamweaver
    13. قواعد بناء الجملة لعلامات القوالب في Dreamweaver
    14. تعيين تفضيلات التمييز لمناطق القالب
    15. فوائد استخدام القوالب في Dreamweaver
  15. شاشات الهاتف المحمول والشاشات المتعددة
    1. إنشاء استعلامات الوسائط
    2. تغيير اتجاه الصفحة للأجهزة الجوالة
    3. إنشاء تطبيقات الويب للأجهزة الجوالة باستخدام Dreamweaver
  16. المواقع والصفحات ونماذج الويب الديناميكية
    1. فهم تطبيقات الويب
    2. إعداد الكمبيوتر لتطوير التطبيقات
    3. استكشاف أخطاء اتصالات قاعدة البيانات وحلها
    4. إزالة برامج الاتصال النصية في Dreamweaver
    5. تصميم صفحات ديناميكية
    6. نظرة عامة على مصادر المحتوى الديناميكي
    7. تعريف مصادر المحتوى الديناميكي
    8. إضافة محتوى ديناميكي إلى الصفحات
    9. تغيير المحتوى الديناميكي في Dreamweaver
    10. عرض سجلات قاعدة البيانات
    11. توفير البيانات المباشرة واستكشاف أخطائها وحلها في Dreamweaver
    12. إضافة سلوكيات خادم مخصصة في Dreamweaver
    13. إنشاء النماذج باستخدام Dreamweaver
    14. استخدام النماذج لجمع معلومات من المستخدمين
    15. إنشاء نماذج ColdFusion وتمكينها في Dreamweaver
    16. إنشاء نماذج الويب
    17. دعم HTML5 محسّن لعناصر النماذج
    18. تطوير نموذج باستخدام Dreamweaver
  17. إنشاء التطبيقات مرئيًا
    1. إنشاء صفحات رئيسية وصفحات تفاصيل في Dreamweaver
    2. إنشاء صفحات البحث والنتائج
    3. إنشاء صفحة إدراج سجل
    4. إنشاء صفحة تحديث سجل في Dreamweaver
    5. إنشاء صفحات حذف سجل في Dreamweaver
    6. استخدام أوامر ASP لتعديل قاعدة البيانات في Dreamweaver
    7. إنشاء صفحة تسجيل
    8. إنشاء صفحة تسجيل دخول
    9. إنشاء صفحة يمكن للمستخدمين المخولين فقط الوصول إليها
    10. تأمين المجلدات في Coldfusion باستخدام Dreamweaver
    11. استخدام مكونات ColdFusion في Dreamweaver
  18. اختبار مواقع الويب ومعاينتها ونشرها
    1. معاينة الصفحات
    2. معاينة صفحات ويب Dreamweaver على أجهزة متعددة
    3. اختبار موقع Dreamweaver

 

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

استعلامات الوسائط هي وحدة 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 في القائمة المنسدلة أسفل نافذة المستند.
تغيير حجم العرض
تغيير حجم العرض

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

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

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

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

    مقابض تغيير الحجم

  2. اسحب المقابض إلى الحجم المطلوب.

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

ملاحظة:

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

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

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

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

  2. انقر فوق .

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

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

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

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

ملاحظة:

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

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

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

  2. انقر فوق "حذف" ثم انقر فوق استعلام الوسائط الذي تريد حذفه.

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

ملاحظة:

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

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

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

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

  2. انقر فوق استعلام الوسائط المطلوب للانتقال إلى الكود البرمجي المقابلة في طريقة العرض Code.

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

شعار Adobe

تسجيل الدخول إلى حسابك