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

تصميم مواقع ويب تفاعلية باستخدام Bootstrap

  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

 

بالنسبة لمواقع الويب المجهزة للهواتف الجوالة والتفاعلية، استخدم قوالب بادئ نظام Bootstrap ومكونات Bootstrap للسحب والإفلات في Dreamweaver.

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

يتيح لك Dreamweaver إنشاء مستندات Bootstrap وكذلك تحرير صفحات الويب الحالية التي تم إنشاؤها باستخدام Bootstrap. وسواءٌ كانت ملفات Bootstrap تم تصميمها بالكامل أو كانت عملية التصميم قيد التنفيذ، يمكنك تحريرها في Dreamweaver ليس لتحرير التعليمات البرمجية فحسب، بل لاستخدام ميزات التحرير المرئية أيضًا مثل التحرير "بطريقة العرض Live" ومصمم CSS المرئي واستعلامات الوسائط المرئية وExtract لإجراء تغييرات في التصميم.

ملاحظة:

تتضمن إصدارات Bootstrap التي يتم دعمها حاليًا الإصدار رقم v4.4.1 وv3.4.1.

الأسئلة الشائعة

استخدم الشبكات المرنة في Dreamweaver. كيف يمكنني البدء في استخدام Bootstrap؟

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

وبالمثل، في مستندات Bootstrap، تحتاج فقط إلى التركيز على المحتوى والتصميم وتتم رعاية تفاعل صفحة الويب عن طريق Dreamweaver، والذي يتكامل مع إطار Bootstrap بشكل محكم.

يدعم Dreamweaver حاليًا الإصدارين 3.4.1 و4.4.1 من Bootstrap:

"يتضمن Bootstrap 3.4.1 نظام شبكة مرنة تفاعلي على الجوال والذي يعمل على تغيير حجم 12 عمودًا لتناسب الجهاز أو زيادات حجم إطار العرض. كما يتضمن فئات معرفة مسبقًا لخيارات تخطيط سهلة، وكذلك فئات Mixin فعالة لإنشاء تخطيطات أكثر دلالية." - وثائق Bootstrap.

"يشمل Bootstrap 4.4.1، الذي تم عمل تغييرات كبيرة به، شبكة مربعات قوية للأجهزة الجوالة لإنشاء تخطيطات بجميع الأشكال والأحجام بفضل نظام الاثني عشر عمودًا، والطبقات الافتراضية التفاعلية الخمس، ومتغيرات وفئات Mixin في Sass، وعشرات الفئات المحددة مسبقًا." - وثائق Bootstrap.

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

إذا كنت ترغب في إنشاء مستند Bootstrap من البداية، فيمكن دائمًا القيام بذلك كما هو موضح في القسم Create Bootstrap Documents.

هل يمكنني ترحيل مستندات الشبكة المرنة الموجودة لمستندات Bootstrap في Dreamweaver؟

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

هل يمكنني استيراد المواقع القديمة في الإصدار الأخير من Dreamweaver؟

نعم، يمكنك استيراد المواقع القديمة في الإصدار الأخير من Dreamweaver. عند القيام بذلك، يبحث Dreamweaver عن ملف Bootstrap CSS في مجلد site root/css/.

  • إذا كان الموقع يحتوي على ملف Bootstrap v3 CSS، فيتم تعيين إصدار Bootstrap في Manage Site > Advanced Settings > Bootstrap إلى 3.4.1.
  • إذا كان الموقع يحتوي على ملف Bootstrap v4 CSS، فيتم تعيين إصدار Bootstrap في Manage Site > Advanced Settings > Bootstrap إلى 4.4.1.
  • إذا كان الموقع لا يحتوي على ملف Bootstrap CSS في مسار site root/css، يتم تعيين Bootstrap Version في Manage Site > Advanced Settings > Bootstrap إلى 4.4.1.

إنشاء مستندات Bootstrap

يمكنك البدء في تصميم موقع ويب Bootstrap الخاص بك باستخدام أحد الخيارات التالية في مربع الحوار New Document:

  • قوالب بادئ Bootstrap‬ (Starter Templates > Bootstrap Templates) - استخدم هذا الخيار إذا أردت بدء التشغيل بشكل سريع بدون الحاجة إلى تخطيط الصفحات من البداية. ببساطة قم بتحرير النص واستبدال الأصول، إذا لزم الأمر، وموقع الويب التفاعلي الخاص بك جاهز. راجع استخدام قوالب بدء تشغيل Bootstrap للحصول على مزيد من المعلومات.
  • إنشاء مستند HTML استنادًا إلى إطار عمل Bootstrap (New Document > HTML > Bootstrap) - استخدم هذا الخيار إذا أردت إنشاء موقع الويب الخاص بك خطوة بخطوة باستخدام CSS ومكونات Bootstrap داخل Dreamweaver. لمزيد من المعلومات، راجع إنشاء مستندات HTML استنادًا إلى إطار عمل Bootstrap.

استخدام قوالب بدء تشغيل Bootstrap

تتيح لك قوالب بدء تشغيل Bootstrap إنشاء صفحات ويب للنسق الشائعة في لمح البصر. يتم حفظ جميع الملفات المستقلة في إطار العمل تلقائيًا.

  1. انقر فوق File > New.

  2. في مربع حوار New Document الذي يظهر، انقر فوق Starter Templates، ثم حدد القالب المطلوب من قائمة Bootstrap Templates.

  3. انقر فوق Create

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

إنشاء مستندات HTML استنادًا إلى إطار عمل Bootstrap

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

  1. انقر فوق File > New.

  2. في مربع حوار New Document، انقر فوق New Document > HTML، ثم انقر فوق علامة تبويب Bootstrap.

  3. لإنشاء ملف bootstrap.css جديد (وملفات bootstrap الأخرى)، قم بتنفيذ الإجراءات التالية:

    حدد ما إذا كنت تريد إنشاء Bootstrap CSS جديد أو استخدام CSS موجود.

    إذا اخترت إنشاء CSS جديدة، يتم إنشاء مجلد "css" في جذر الموقع، ويتم نسخ ملف bootstrap.css إلى المجلد الجديد. إذا اخترت استخدام CSS موجود، فحدد المسار أو استعرض إلى موقع CSS.

    1. انقر فوق Create New.

      إنشاء مستند Bootstrap
      إنشاء مستند Bootstrap

    2. (اختياري) إذا كنت تريد إرفاق أي CSS أخرى إلى المستند الخاص بك، فانقر  في قسم Attach CSS. يظهر مربع الحوار Attach External Style Sheet. حدد الإعدادات، ثم انقر فوق OK.

    3. يوفر الخيار Include A Pre-built Layout بنية مستند Bootstrap أساسي.

      إذا كنت لا تريد البنية الأساسية وتريد البدء بمستند فارغ، فقم بإلغاء تحديد الخيار Include A Pre-built Layout.

    4. (اختياري) يحتوي التخطيط الافتراضي على 12 عمودًا وهامش توثيق بعرض 30 بكسل. أحجام الشاشة الافتراضية هي 576 و768 و992 و1200 بكسل. 

      إذا أردت تعديل هذه الإعدادات، فانقر فوق Customize. تم تعديل الملف bootstrap.css وفقًا لذلك.

      ملاحظة:

      بالنسبة لإصدار Bootstrap v3.4.0، تكون أحجام الشاشة الافتراضية هي 768 و992 و1200 بكسل.

    5. حدد Use Extract to Build Your Page from Photoshop Comps إذا كنت تريد فتح لوحة Extract (في حالة إغلاقها بالفعل). ومن خلال القيام بذلك، ستتمكن من استخراج الأصول من تركيبات Photoshop مباشرة.

      يتم إنشاء موقع جديد بشكل افتراضي باستخدام الإصدار 4.4.1 من Bootstrap. وبعد إنشاء المستند، ستجد مجلدي css وjs في المجلد الجذر للموقع. لكن إذا كنت تريد إنشاء الموقع باستخدام الإصدار 3.4.1 من Bootstrap، فحدد Site > Manage Sites. حدد مجلد جذر الموقع. انقر فوق Advance Settings > Bootstrap. في الحقل Bootstrap Version المنسدل، حدد 3.4.1. بالنسبة لإصدار 3.4.1 من Bootstrap، ستجد مجلدات css وjs وfonts في مجلد جذر الموقع.

      تحديد إصدار Bootstrap رقم 4.4.1
      تحديد إصدار Bootstrap رقم 4.4.1

      عندما تقوم بإنشاء صفحة Bootstrap 4.4.1، يتم دعم الإصدار 3.4.1 من jQuery.يتم تحديث قوالب Bootstrap Starter لإصدار 4.4.1 من Bootstrap.

      عند إضافة مكونات Bootstrap إلى صفحة Bootstrap، يمكنك ترقية صفحات Bootstrap 4.0.0 إلى Bootstrap 4.4.1 وإصدار jQuery إلى 3.4.1. انقر فوق ‎Yes في مربع الحوار الذي يظهر عند إدراج مكونات Bootstrap في الصفحة.

      مربع حوار تأكيد التوافق مع الإصدارات السابقة
      مربع حوار تأكيد التوافق مع الإصدارات السابقة

      حوار تأكيد Bootstrap 3.4.1
      حوار تأكيد Bootstrap 3.4.1

      حوار jQuery المنبثق
      حوار jQuery المنبثق

      عند استيراد موقع Bootstrap 4.0.0 أو عند ترحيل موقع من إصدارات سابقة إلى الإصدار التالي من إصدار Dreamweaver ، يتم تعيين إصدار Bootstrap إلى 4.4.1 في Site Setup > Advanced setting > Bootstrap.

    ملاحظة:

    مع Bootstrap 4.3.1، يتغير ارتفاع عمود الصف Grid من 1 بكسل إلى 0 بكسل. لذلك، لجعله مرئيًا في طريقة العرض Live، تحتاج إلى إضافة بعض المحتوى في عمود الصف Grid.

  4. لاستخدام ملفات إطار عمل Bootstrap الموجودة، قم بالإجراءات التالية:

    1. انقر فوق Use Existing، وحدد مسار ملف bootstrap.css. يمكنك أيضًا استعراض الموقع حيث يتم حفظ CSS.

      إنشاء مستندات Bootstrap باستخدام ملفات إطار العمل الموجودة
      إنشاء مستندات Bootstrap باستخدام ملفات إطار العمل الموجودة

    2. (اختياري) إذا كنت تريد إرفاق أي CSS أخرى إلى المستند الخاص بك، فانقر  في قسم Attach CSS. في مربع حوار Attach External Style Sheet حدد الإعدادات ثم انقر فوق OK.

    3. يوفر الخيار Include A Pre-built Layout بنية مستند Bootstrap أساسي.إذا كنت لا تريد البنية الأساسية وتريد البدء بمستند فارغ، فقم بإلغاء تحديد الخيار Include A Pre-built Layout.

  5. انقر فوق Create.

ملاحظة:

ملف bootstrap.css الذي تم إنشاؤه للقراءة فقط. لذا، لا يُمكنك تحرير هذه الأنماط باستخدام CSS Designer؛ ويتم تعطيل جزء Properties في CSS Designer في ملفات Bootstrap.

إذا أردت تعديل الأنماط لمستند Bootstrap، فقم بإنشاء ملف CSS آخر لتجاوز الأنماط الموجودة ومن ثم إرفاقها إلى المستند.

فتح ملفات تمهيد التشغيل

ملاحظة:

من المستحسن أن تقوم بفتح المستندات التي تم إنشاؤها في الإصدار 3 من Bootstrap وأحدث فقط في Dreamweaver وتحريرها.

يمكنك فتح ملفات تمهيد التشغيل باستخدام إحدى الطرق التالية:

  • انقر فوق File > Open واستعرض حتى تصل إلى ملف Bootstrap HTML.
  • (مستحسن) قم بإنشاء موقع Dreamweaver وحدد مجلد الموقع إلى المجلد الذي يحتوي على كل ملفات Bootstrap الخاصة بك.

عند فتح ملف Bootstrap HTML في Dreamweaver:

  • يتم تمييز الصفوف بأسطر رمادية متقطعة بزوايا دائرية
  • ويتم تمييز الأعمدة بأسطر زرقاء متقطعة

يقوم Dreamweaver بتمييز ملفات CSS المرتبطة بأيّ من ملفات Bootstrap HTML إذا احتوى اسم ملف CSS على 'ملفات تمهيد التشغيل'. يمكن أن يكون مرجع ملف CSS أيّ من أو كل مما يلي:

  • المسار المحلي:

    ملف CSS المصغّر أو غير المصغّر موجود محليًا. على سبيل المثال:

    <link href="css/bootstrap.css" rel="stylesheet"> أو
    <link href="css/bootstrap.min.css" rel="stylesheet">

  • المسار البعيد:
  • ملف CSS بعيد مصغّر أو غير مصغّر. على سبيل المثال:

    <link href="http://somewebsite.com/css/bootstrap.css" rel="stylesheet">
    <link href="http://somewebsite.com/css/bootstrap.min.css" rel="stylesheet">

  • CDN
  • <link href="http://maxcdn.bootstrapcdn.com/bootstrap/<bootstrap_version_number>/css/bootstrap.min.css" rel="stylesheet">

ملاحظة:

يتم دعم أوراق أنماط تمهيد التشغيل في كل من علامات الارتباط والاستيراد في Dreamweaver. ومع ذلك، فإن عمليات الاستيراد المتداخلة - التي ترتبط مع إحدى أوراق الأنماط التي بدورها تقوم باستيراد ورقة نمط أخرى - غير معتمدة.

إخفاء عناصر تمهيد التشغيل المخفية وإظهارها وإدارتها

في بعض الأحيان، قد يتطلب عنصر ليتم عرضه في إطار عرض واحد أثناء عرضه في إطار آخر، وربما تحتاج إلى إخفاء العنصر لأغراض التصميم. 

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

إخفاء عناصر Bootstrap في Dreamweaver
إخفاء عناصر Bootstrap في Dreamweaver

لعرض العناصر المخفية وإظهارها، انقر بزر الماوس الأيمن وحدد Manage Hidden Elements. تظهر العناصر المخفية في خلفية رمادية اللون ومتقطعة. انقر فوق رمز العين لإظهار العنصر.

إدارة عناصر Bootstrap المخفية
إدارة عناصر Bootstrap المخفية

إضافة مكونات تمهيد التشغيل

يسرد خيار Bootstrap Components في لوحة Insert جميع مكونات Bootstrap التي يمكنك إضافتها إلى صفحة ويب في Dreamweaver. ووفقًا لإصدار Bootstrap في ملف bootstrap.css المرتبط بصفحة HTML، يتم إدراج المكونات ذات الصلة في لوحة Insert.على سبيل المثال، في Bootstrap v4.0.0، يمكنك مشاهدة المكونات الإضافية مثل Cards وBadges. وبالمثل، تتوفر مكونات Glyphicons وPanel وWells وThumbnail فقط في Bootstrap v3.7. واستنادًا إلى إصدار 3.3.7 من Bootstrap، يمكنك مشاهدة المكونات ذات الصلة في لوحة Insert. أيضًا، يتوفر عنصر Spinners فقط في Bootstrap v4.4.1.

يتم ملء المكونات في لوحة Insert استنادًا إلى المعايير التالية:

  • المستند قيد التركيز: يتم ملء المكونات في لوحة Insert استنادًا إلى إصدار Bootstrap في ملف Bootstrap المرتبط بالمستند. 
  • الإصدار في Site Preferences: بالنسبة للمستند غير الموجود في bootstrap، يبحث Dreamweaver عن الإصدار في Site Preferences > Advanced > Bootstrap. استنادًا إلى الإصدار في هذا الخيار، تتم تعبئة المكونات المناسبة. يكون الإصدار هو 4.4.1 بشكل افتراضي للمواقع الجديدة.
  • مكان حفظ الملفات: بالنسبة للمستند غير الموجود في bootstrap الذي ليس جزءًا من أي موقع، تعرض لوحة Insert مكونات 4.4.1.
المكونات المدعومة في Bootstrap 4.0.0
المكونات المدعومة في Bootstrap 4.4.1

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

إضافة صفوف

انقر فوق الصف المطلوب الذي تريد إضافة صف جديد بعده. ثم، انقر فوق أيقونة Add new row. يتم إضافة صف تمهيد التشغيل مع عنصري العمود التابع بالإضافة إلى ستة أعمدة.

تكون التعليمة البرمجية للصف الذي تمت إضافته كما يلي:

<div class="row">
<div class="col-*-6"></div>
<div class="col-*-6"></div>
</div>

حيث يمثل (*) حجم الشاشة الحالية في Dreamweaver.

إضافة أعمدة

حدد العمود المرغوب ثم انقر فوق أيقونة Add new column. تم تكرار العمود المحدد دون توابعه.

تم تعيين كل الأعمدة الفارغة بارتفاع 20px كحد أدنى. ومع ذلك، لا تتم إضافة هذا الارتفاع فعليًا إلى الصفحة; ويتم إظهاره في طريقة العرض Live لتسهيل إدراج عناصر داخل الأعمدة.

الصفوف والأعمدة المتكررة

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

ملاحظة:

يعمل خيار "إضافة صف" أو "إضافة عمود" على تكرار الصف أو العمود مع الفئات الخاصة به، ولكن بدون المحتوى.

تغيير حجم الأعمدة وإزاحتها

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

تغيير حجم الأعمدة

انقر فوق العمود المطلوب واسحب لليمين لتغيير الحجم. بالنسبة لمستند Bootstrap v4.0.0، عند تغيير حجم أحد الأعمدة، تتم إضافة الفئة col-*-n، حيث تمثل (*) استعلام الوسائط الحالي (‏sm أو md أو ld أو xl) وتمثل n عدد الأعمدة الموجودة بها. بالنسبة لحجم الشاشة Extra small تتم إضافة الفئة col-n.

بالنسبة لمستند Bootstrap v3.3.7، عند تغيير حجم أحد الأعمدة، تتم إضافة الفئة col-*-n، حيث تمثل (*) استعلام الوسائط الحالي (xs أو sm أو md أو lg) وتمثل n عدد الأعمدة الموجودة بها.

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

إزاحة الأعمدة

انقر فوق العمود المطلوب واسحبه على الجانب الأيمن لإزاحة العمود. تظهر الإزاحة كمنطقة متقطعة. بالنسبة لمستند Bootstrap v4.0.0، عند إزاحة أحد الأعمدة، تتم إضافة فئة الإزاحة col-*-n، حيث تمثل (*) استعلام الوسائط الحالي (‏sm أو md أو lg أو xl) وتمثل n عدد الأعمدة الموجودة بها.

بالنسبة لمستند Bootstrap v3.3.7، عندما تقوم بإزاحة العمود، تتم إضافة الفئة col-*-offset-n، حيث تمثل (*) استعلام الوسائط الحالي (xs أو sm أو md أو lg) وتمثل (n) عدد الأعمدة التي تم إزاحتها.

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

شعار Adobe

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