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

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

 

 

بالنسبة لمواقع الويب المجهزة للهواتف الجوالة والتفاعلية، استخدم قوالب بادئ نظام 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 الحجم الحالي للشاشة ويقوم بإضافة الفئة الصحيحة. لإزاحة الأعمدة لكي تناسب زوايا محددة، قم بتغيير حجم إطار العرض باستخدام الخيارات الموجودة في الزاوية اليمنى السفلية أو الشريط المنزلق. ثم قم بإزاحة الأعمدة حسب الاقتضاء.

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

مستخدم جديد؟