العمل باستخدام Bootstrap في Dreamweaver

Name: العمل باستخدام Bootstrap في Dreamweaver
Author: Patti Scully-Lane

لا يعد فهم HTML وCSS شرطًا لاستخدام دريم ويفر. ومع ذلك، فهو من المستحسن. في هذه الوحدة، ستتعرف على بناء العلامات لصفحة HTML وكيف يسهل دريم ويفر استخدام العرض…

شاهد الدرس الأول مجانًا — احصل على وصول كامل إلى جميع الدروس الـ5.

اطلب عرضًا توضيحيًا تسجيل الدخول

دورة تدريبية: عند الطلب

سوف تتعلم في هذا الدرس كيفية إنشاء صفحة فارغة جديدة باستخدام إطار عمل bootstrap الآن، أول شيء يتعين علينا القيام به قبل أن نبدأ في استخدام bootstrap هو إنشاء موقع لذلك سننتقل إلى القائمة موقع سننشئ موقعًا جديدًا وسنضغط على التصفح للبحث عن المجلد ولقد قمت بحفظ ملفات الدرس لهذه الوحدة على سطح المكتب الخاص بي ولذا سأدخل وسأختار الدرس الأول في الوحدة الثانية وسيكون هذا هو مجلدي ولاسم موقعنا سأقوم فقط بكتابة في العمل باستخدام bootstrap وسأضغط حفظ لذلك عندما ننظر إلى لوحة الملفات الخاصة بنا يمكننا أن نرى أن هناك مجلد الصور ومجلد الوسائط والمجلد متنوع لا توجد أي ملفات HTML حتى الآن في مجلدنا ولذا فمن المهم أن نفهم ما هي المجلدات الموجودة لدينا لأنه في غضون لحظات عندما ننشئ صفحتنا باستخدام Bootstrap سينشئ دريم ويفر تلقائيًا بضع مجلدات أخرى لنا لذلك سننتقل إلى القائمة ملف ثم جديد وعندما ننشئ مستند HTML الجديد فإن مستندات HTML التي قمنا بإنشائها من البداية تستخدم إطار عمل لا يوجد لكن هذه المرة سنستخدم إطار عمل Bootstrap إذن ما هو Bootstrap بالضبط؟ حسنًا، Bootstrap هو ما نسميه إطار العمل وهو مجموعة من المكونات مسبقة البناء التي يمكنك استخدامها بسهولة أكبر لإنشاء الصفحات موقع الويب الخاص بك الآن، كل هذه المكونات مبنية على ترميز 5 HTML الجديد ويستخدمون 3CSS أحدث إصدار من أوراق الأنماط المتتالية الآن لا يحتوي Bootstrap على HTML5 وCSS3 فقط ولكنه يستخدم أيضًا جافا سكريبت وهكذا عندما تنشئ صفحتك الأولى بناءً على إطار عمل Bootstrap فإن دريم ويفر سيقوم بإنشاء مجلدات إضافية للاحتفاظ بـ CSS بالإضافة إلى جافا سكريبت لذلك سنضغط على الزر إنشاء وعندما نفعل ذلك، يمكنك الاطلاع على لوحة الملفات الخاصة بنا لدينا مجلد CSS ومجلد جافا سكريبت وفي جافا سكريبت لدينا لدينا ثلاث ملفات جافا سكريبت مختلفة في CSS لدينا، لدينا ملف CSS واحد وسننتقل إلى القائمة ملف وسنقوم بحفظ هذا المستند الآن وسنسميه index.HTML ونحفظه أريد التحدث قليلاً عن الملف ذي الصلة لذا، هنا في الجزء العلوي من صفحتنا لدينا كود المصدر الخاص بنا وإذا نقرنا على هذا الزر في الأعلى يمكننا أن نرى أن هذا هو كود المصدر لصفحتنا وحاليًا، لا يوجد أي شيء هنا حقًا ولكن لدينا تعليق يقول النص الأساسي هنا ولكن تم إعداد روابطنا هنا لذلك لدينا هذا الرابط إلى ملف إطار عمل bootstrap لدينا أيضًا رابط لملفات جافا سكريبت الثلاثة لذلك في أي من المكونات التي نستخدمها بعض المكونات التفاعلية التي لدينا إنها تعتمد على هذه التكنولوجيا تقنية جافا سكريبت، لذا فهي موجودة بالفعل على صفحتنا وإذا نظرنا إلى الأعلى فإن كل هذه الملفات التي يمكننا استخدامها وإذا كنت تفهم القليل عن HTML وCSS يمكنك الدخول وتخصيص هذه الملفات وبعد قول ذلك، إنها فكرة جيدة إذا كنت ستعمل بإطار عمل Bootstrap إنها فكرة جيدة أن يكون لديك أساس في لغتي HTML وCSS لتكون قادرًا على إلقاء نظرة على التعليمات البرمجية وإجراء التغييرات على التعليمات البرمجية عند الحاجة مع هذه الملفات ذات الصلة أريد أن ألفت انتباهك وهما bootstrap، هما bootstrap 4.4 0.1 هذه هي التكنولوجيا التي ظهرت في عام 2019 لذلك فهو ليس أحدث إصدار من bootstrap لا يعمل دريم ويفر مع أحدث إصدار لكنها لا تزال نسخة مستقرة للغاية من bootstrap للبدء بها الآن، إذا انتقلنا إلى علامة التبويب إدراج الخاصة بنا لدينا في علامة التبويب إدراج، لدينا قوائم منسدلة مختلفة وإحدى تلك القوائم المنسدلة هي مكونات bootstrap من هنا يمكننا أن نضيف الكثير من التخطيطات المختلفة المصممة مسبقًا لصفحتنا وسنتعلم كيفية القيام بذلك في الدروس اللاحقة لكن في الوقت الحالي، سنضع حاوية فقط وستلاحظ، لدي العرض live محدد هنا في الأعلى عندما تعمل في bootstrap العمل في العرض live هو في الواقع فكرة أفضل من العمل في العرض design تأكد من أن لدينا المؤشر في جسم الصفحة هنا على اليسار، سنضغط هناك وسنضغط على هذه الحاوية والآن داخل جسم الصفحة، لدينا الحاوية وفي تلك الحاوية حيث سنضع جميع المكونات الأخرى لصفحتنا لذلك سنذهب إلى القائمة ملف ونقوم بالحفظ ولدينا الآن صفحة بها حاوية جاهزة لوضع المحتوى الخاص بنا في هذا الدرس، تعلمت كيفية إنشاء صفحة باستخدام إطار عمل bootstrap في أدوبي دريم ويفر

متوسط مقدِّم الخدمة : Patti Scully-Lane 5 الدروس · 39m باللغات: العربية, الألمانية, الإنجليزية, الإسبانية, الفرنسية, البرتغالية, الأوردية, Chinese

وصف الدورة

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

ما ستتعلمه

التعرف على صياغة HTML واستخدامها أثناء العمل في طريقة عرض الكود في Dreamweaver
إنشاء صفحة فارغة جديدة باستخدام إطار عمل Bootstrap
إدراج تنقل وعروض الصور المتحركة في صفحة باستخدام Bootstrap
إدراج صفوف وأعمدة في صفحة باستخدام Bootstrap
إنشاء صفحة استناداً إلى أسلوب Bootstrap
العمل مع طريقة عرض الكود في Dreamweaver لتعلم HTML وتحريرها

النقاط الرئيسية

لا يُشترط فهم HTML وCSS لاستخدام Dreamweaver، وإن كان ذلك مستحسناً.
تُسهِّل طريقة عرض الكود في Dreamweaver تعلم HTML أثناء إنشاء الصفحات.
يتيح لك إطار عمل Bootstrap إضافة صفحات جديدة وإدراج عناصر فيها بسهولة.
يمكن استخدام Bootstrap لإدراج التنقل وعروض الصور المتحركة والصفوف والأعمدة في الصفحة.

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

هل أحتاج إلى معرفة HTML وCSS قبل أخذ هذا المقرر؟

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

ما الذي سأتمكن من بنائه باستخدام Bootstrap في هذا المقرر؟

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

ما المهارات التي يغطيها هذا المقرر؟

يغطي المقرر Adobe Dreamweaver وإطار عمل Bootstrap الأمامي وبروتوكول Bootstrap وبرمجة HTML النصية، ويرتبط بشهادة Adobe Dreamweaver وشهادة Dreamweaver MX.

لمن هذا المقرر؟

يناسب هذا المقرر المتعلمين الراغبين في التعرف على بنية وسوم صفحة HTML وتطبيق وظائف إطار عمل Bootstrap في Dreamweaver لإضافة صفحات جديدة وإدراج عناصر فيها.