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

لوحة DOM

  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

 

تعرف على كيفية استخدام لوحة DOM لتحرير HTML عن طريق تعيين العناصر في طريقة العرض ‏Live أو المحددات التطبيقية في HTML Designer مع علامات HTML لديها.

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

لفتح لوحة DOM، حدد Window > DOM. يمكنك أيضًا استخدام مفاتيح لوحة المفاتيح - Ctrl + / (Win); Cmd + / (Mac) - لفتح لوحة DOM.

عند سحب عناصر لإدراجها مباشرة في Live View، تظهر أيقونة </> قبل أن تسقط العنصر. يمكنك النقر فوق هذه الأيقونة لفتح لوحة DOM وإدراج العنصر في الموضع المناسب في بنية المستند. لمزيد من المعلومات، راجع إدراج عناصر مباشرةً في طريقة العرض Live.

تعرض لوحة DOM فقط العناصر الثابتة في طريقة العرض Design أو Code وكلاً من العناصر الثابتة والديناميكية في Live View.

في مستندات شبكة مرنة، تتيح لك لوحة DOM فقط عرض بنية HTML DOM ولا يسمح لك بتحرير بنية HTML.

ملاحظة:

يمكنك المحتوى الثابت فقط في لوحة DOM. تظهر عناصر القراءة فقط أو الديناميكية بظل أغمق رمادي.

لوحة DOM
لوحة DOM

يمكنك التحرك حول لوحة DOM ووضعها في أي مكان مناسب على واجهة المستخدم. يمكنك أيضًا إرساء اللوحة بجانب اللوحات الأخرى.

كيفية استخدام لوحة DOM

  1. افتح المستند المطلوب، ثم قم بفتح لوحة DOM عن طريق تحديد Window > DOM.

  2. قم بالتبديل إلى Live View وانقر فوق العنصر الذي تريد فحصه أو تحريره.

    • يتم تمييز علامة HTML الخاصة بالعنصر المحدد في لوحة DOM. 
    • يتم تمييز المحدد المطبق في CSS Designer.
    • يتم تمييز الأيقونة ذي الصلة في طريقة العرض Code.
    • يتم تمييز العلامة ذات الصلة (باللون الأزرق) في Tag Selector.

    بدلاً من ذلك، يمكنك تحديد عنصر HTML في لوحة DOM. عند النقر فوق أي عنصر في لوحة DOM:

    • يتم تمرير Live View إلى العنصر المطابق.
    • عند فتح Code View ، يقوم Code View بالتمرير إلى الرمز المطابق للعنصر.
    • CSS Designer ‏( جزء Selectors) يقوم بالتمرير إلى أقرب محدد مطابق (يشبه ذلك النقر فوق العنصر في Live View).
    • يتم تمييز العلامة في Tag Selector.

    يتيح لك هذا التزامن بين طرق العرض المختلفة وCSS Designer إظهار علامة HTML وأنماط ترتبط بالعنصر المحدد في لحظة واحدة. 

  3. متابعة تحرير العنصر حسب الحاجة (تحرير HTML أو CSS). للحصول على معلومات حول استخدام لوحة DOM لتحرير علامة HTML، راجع تحرير بنية HTML باستخدام لوحة DOM. للحصول على معلومات حول CSS Designer، راجع تخطيط الصفحات باستخدام CSS Designer.

تحرير بنية HTML باستخدام لوحة DOM

يتم تمييز العنصر المحدد حاليًا في الصفحة في لوحة DOM. يمكنك الانتقال إلى أي عقدة أو عنصر باستخدام مفاتيح الأسهم.

اختصارات لوحة المفاتيح:

  • التكرار - Ctrl + D (Win)/ Cmd + D (Mac)
  • الحذف - Del أو Backspace
  • النسخ - Ctrl + C (Win)/Cmd + C (Mac)
  • اللصق - Ctrl + V (Win)/Cmd + V (Mac)
  • التراجع - Ctrl + Z (Win)/Cmd + Z (Mac)
  • الإعادة - Ctrl + Y (Win)/Cmd + Y (Mac)
  • لتحديد عنصر أو عقدة، انقر فوق العنصر أو العقدة. لتمديد أو طي عنصر أو عقدة، انقر فوق علامة HTML أو انقر نقرًا مزدوجًا فوق المحدِد المجاور للعلامة.
  • لتكرار عنصر أو عقدة، انقر بزر الماوس الأيمن فوق العنصر أو العقدة، ثم انقر فوق Duplicate. عند تكرار عنصر بمعرف مقترن به، يتزايد المعرف للعنصر الجديد (المكرر).
  • لنسخ عنصر أو عقدة، انقر بزر الماوس الأيمن فوق العنصر أو العقدة، ثم انقر فوق Copy. عند نسخ عنصر مع عناصر تابعة، يتم نسخ العنصر التابع أيضًا.
  • للصق عنصر أو عقدة، انقر فوق العنصر أو العقدة التي من خلالها تريد إدخال العناصر المنسوخة. ثم انقر بزر الماوس الأيمن فوق العنصر أو العقدة وانقر فوق لصق. 
  • للصق العنصر المنسوخ كتابع للعنصر المحدد أو العقدة، انقر بزر الماوس الأيمن فوق العنصر أو العقدة (الأصل)، ثم انقر فوق Paste As Child.
  • لنقل العناصر أو إعادة ترتيبها، اسحب العنصر إلى الموقع المرغوب، ضمن لوحة DOM.

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

  • لحذف عنصر أو عقدة، انقر بزر الماوس الأيمن على العنصر أو العقدة، وانقر فوق Delete.

يمكنك التراجع (Ctrl/Cmd + Z) عن العمليات التي يتم إجراؤها في لوحة DOM أو إعادتها (Ctrl/Cmd + Y).

لإجراء عمليات التحرير المذكورة أعلاه على العديد من العناصر، حدد عناصر متعددة في لوحة DOM:

  • انقر مع الضغط على مفتاح Shift فوق العناصر المطلوبة للتحديد المتجاور
  • انقر مع الضغط على مفتاح Ctrl فوق العناصر المطلوبة للتحديد غير المتجاور
ملاحظة:

في العادة، عند تحرير صفحة، يتغير الزر Refresh الموجود في شريط الأدوات Document إلى الزر Stop ليشير إلى أن الصفحة قيد إعادة التحميل. بعد إعادة تحميل الصفحة، يظهر الزر Refresh مرة أخرى للإشارة إلى أن الصفحة تم تحميلها بالكامل.

خيارات التحرير في لوحة DOM
خيارات التحرير في لوحة DOM

هام: إذا كانت صفحتك تحتوي على JavaScript، فسيتم عرض القائمة التي تظهر عند النقر بزر الماوس الأيمن في لوحة DOM لبرهة، ثم تصبح غير متوفرة. لاستخدام القائمة التي تظهر عند النقر بزر الماوس الأيمن، قم بإخفاء شاشات Live View ‏(Live View options > Hide Live View Displays)، ثم قم بتعطيل JavaScript ‎(Live View options > Disable JavaScript)‎.

تحرير العلامات والفئات والمعرفات ولوحة DOM

يُمكنك تحرير العلامات والفئات والمعرفات عن طريق النقر المزدوج فوقها في لوحة DOM. كما يُمكنك إضافة فئات أو معرفات إضافية عن طريق فصلها بمسافة. بالنسبة للعلامات غير المرتبطة بفئة ما أو معرف، يُمكنك كتابة اسم الفئة أو المعرف بعد النقر المزدوج فوق العلامة.

تظهر تلميحات التعليمة البرمجية بمجرد بدء كتابة اسم العلامة أو الفئة أو المعرف. لتضييق نطاق التلميحات إلى الفئات، ابدأ الكتابة بنقطة. لرؤية المعرفات فقط في التلميحات، ابدأ الكتابة بعلامة تجزئة (#).

تحرير الفئات
تحرير الفئات

إدراج العناصر في لوحة DOM

يُمكنك الآن إدراج عناصر جديدة في صفحة الويب باستخدام لوحة DOM بإحدى الطرق التالية:

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

  • انقر فوق العنصر المطلوب في لوحة الإدراج واسحبه إلى لوحة DOM. تظهر أدلة Live للإشارة إلى ما إذا كان سيتم إدراج العنصر. أفلت العنصر في موقع الصورة.

عند قيامك بإدراج العلامات باستخدام لوحة DOM، يتم أيضا إدراج النص الافتراضي (العنصر النائب) والسمات المطلوبة للعلامات:

  • عند إدراج أي من العلامات التالية وتطبيق التغييرات، يتم إدراج النص الافتراضي في طريقة عرض Code وLive وDesign:
    div، وheader، وnav، وaside، وarticle، وsection، وfooter، وh1-h6، وhgroup
  • عندما تقوم بإدراج علامة جدول وتنفيذ هذه التغييرات، يتم إدراج جدول 3X3.
  • عند إدراج علامة embed أو img وتنفيذ التغييرات، يظهر حوار Select File ويطالبك باختيار الملف المناسب.
  • عند إدراج علامة تعريف وتطبيق التغييرات، تتم إضافة التعليمة البرمجية في عرض Code: <meta name="" content="">
  • عند إدراج علامة figure وتنفيذ التغييرات، يتم إدراج علامة figure مع figcaption متداخلة.
  • وعند إدراج علامة ul أو علامة ol وتنفيذ التغييرات، يتم إدراج علامة ol/ul مع علامة li المتداخلة.
شعار Adobe

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