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

تلميحات التعليمات البرمجية وإكمال التعليمات البرمجية

 

 

استخدم تلميحات رموز Dreamweaver وميزات إكمال التعليمات البرمجية لتقليل وقت كتابة التعليمات البرمجية.

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

يمكنك أيضًا استخدام هذه الميزة لمشاهدة ما يلي:

  • الميزات المتاحة لعلامة،
  • أو المعلمات المتاحة لوظيفة،
  • أو الطرق المتوفرة لكائن.

اللغات والتقنيات المدعومة

يدعم برنامج Dreamweaver إنشاء تلميحات تعليمات برمجية للغات والتقنيات التالية:

اقرأ لمعرفة كيفية عمل تلميحات التعليمات البرمجية وإكمال التعليمات البرمجية لهذه اللغات.

تمكين تلميحات التعليمات البرمجية

لتمكين تلميحات التعليمات البرمجية، انقر فوق Edit > Preferences > Code Hints، وحدد Enable Code Hints. لتعطيل تلميحات التعليمات البرمجية، ألغ تحديد Enable Code Hints.

تفضيلات تلميحات التعليمات البرمجية
تفضيلات تلميحات التعليمات البرمجية

لتمكين الإدراج التلقائي للأقواس والاقتباسات، حدد Auto-insert Braces وAuto-insert Quotes على التوالي.

لتمكين الأوصاف في تلميحات التعليمات البرمجية، حدد Enable description tooltips. ثم يمكنك بعد ذلك مشاهدة الأوصاف مع تلميحات التعليمات البرمجية.

تلميحات تعليمات HTML البرمجية

تتوفر الأنواع التالية من تلميحات التعليمات البرمجية للغة HTML:

  • تلميحات العلامات
  • تلميحات أسماء السمات
  • تلميحات قيم السمات

تلميحات العلامات

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

على سبيل المثال، عند كتابة <، تظهر قائمة منسدلة تعرض قائمة بأسماء العلامات. وبدلاً من كتابة بقية اسم العلامة، يمكنك تحديد العلامة من القائمة لتضمينها في نصك.

تلميحات التعليمات البرمجية بلغة HTML الأساسية
تلميحات التعليمات البرمجية بلغة HTML الأساسية

تتضمن تلميحات علامات HTML هذه أيضًا وصفًا موجزًا بالعلامة متى أمكن.

تلميحات أسماء السمات

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

تلميحات التعليمات البرمجية لأسماء السمات
تلميحات التعليمات البرمجية لأسماء السمات

تلميحات قيم السمات

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

معظم تلميحات قيم السمات تكون ثابتة. خذ على سبيل المثال قيمة السمات الهدف، والتي تكون ثابتة بطبيعتها، وبذلك تكون التلميحات ثابتة أيضًا. 

أمثلة لتلميحات قيم السمات الثابتة
أمثلة لتلميحات قيم السمات الثابتة

يعرض Dreamweaver تلميحات تعليمات برمجية ثابتة لقيم تلك السمات التي تتطلبها - مثل المعرف والهدف وsrc وhref والفئة.

ها هي نماذج قليلة لتلميحات القيم المعروضة بشكل ديناميكي. 

تلميحات التعليمات البرمجية الديناميكية لـ src

في هذا المثال، عندما تكتب src، تظهر لك قيم السمات الصالحة، وعندما تحدد الصور، يعرض Dreamweaver الصور الصالحة الفعلية الموجودة في مجلد الصور. يمكنك بعد ذلك التمرير لأسفل واختيار ما تريدها.

تلميحات التعليمات البرمجية الديناميكية لـ src
تلميحات التعليمات البرمجية الديناميكية لـ src

إذا كانت لديك أصول في CC Libraries، فستظهر هذه الأصول أيضًا عندما تكتب src. تم توضيح أصول CC library هذه أيضًا باستخدام رمز سحابة.

وعندما تختار أحد أصول CC library، تظهر قائمة منبثقة تتيح لك إعادة عمل نموذج لحجم الصورة وتغيير تنسيق الصورة.

تضمين أحد أصول CC library في التعليمة البرمجية
تضمين أحد أصول CC library في التعليمة البرمجية

ملاحظة:

يمكن عرض 50 من أصول CC library فقط داخل تلميحات التعليمات البرمجية. تظهر هذه التلميحات بترتيب أبجدي.

ملاحظة:

تضمين أصول CC library البعيدة في تعليمات البرمجية Dreamweaver غير مدعوم.

تلميحات التعليمات البرمجية الديناميكية لـ href

عند كتابة href، يعرض Dreamweaver قائمة بالملفات في مجلدك، مع توفير خيار الاستعراض لك وتحديد الملف الذي تريد عمل ارتباط له.

تلميحات التعليمات البرمجية الديناميكية لـ href
تلميحات التعليمات البرمجية الديناميكية لـ href

تلميحات التعليمات البرمجية الديناميكية للمعرف والنمط

في حالة تعريف المعرفات في ملفات CSS لديك، لذلك عند كتابة id في ملفات HTML لديك، يعرض Dreamweaver جميع المعرفات المتاحة.

تلميحات التعليمات البرمجية الديناميكية لـ id
تلميحات التعليمات البرمجية الديناميكية لـ id

وبالمثل، في حالة تعريف أنماط CSS لديك، لذلك عند كتابة style في ملفات HTML لديك، يعرض Dreamweaver جميع الأنماط المتاحة.

تلميحات التعليمات البرمجية الديناميكية للنمط
تلميحات التعليمات البرمجية الديناميكية للنمط

تلميحات تعليمات CSS البرمجية

تتوفر تلميحات التعليمات البرمجية لأنواع لغات CSS المختلفة التالية:

  • @rules
  • Properties
  • المحددات الزائفة والعناصر الزائفة
  • Shorthand

بعيدًا عن تلميحات التعليمات البرمجية، تتوفر التلميحات أيضًا لخصائص CSS.

تلميحات التعليمات البرمجية لـ CSS @rules

يعرض Dreamweaver تلميحات التعليمات البرمجية لجميع CSS @rule علاوة على وصف لقواعد CSS كما هو موضح هنا.

تلميحات تعليمات CSS @rule البرمجية
تلميحات تعليمات CSS @rule البرمجية

تلميحات خصائص CSS

عند الكتابة في خصائص CSS، فعندما تكتب فاصلة، تظهر تلميحات التعليمات البرمجية لمساعدتك في اختيار قيمة صالحة.

في التعليمة البرمجية المثال التالية، عند كتابة font-family: تظهر مجموعات خطوط صالحة.

ويمكنك اختيار أحد مجموعات الخطوط، أو يمكنك فتح Manage Fonts من داخل هذه التلميحات، وتعيين خطوطك المفضلة. 

تلميحات التعليمات البرمجية والتعليمات لخصائص CSS
تلميحات التعليمات البرمجية والتعليمات لخصائص CSS

يوجد مثال آخر لتلميحات تعليمات برمجية مفيدة عند العمل باستخدام اللون في CSS. وعند الكتابة في أي خاصية مرتبطة باللون (مثل لون الحد أو لون الخلفية) فعند الضغط على الفاصلة، تعرض تلميحات التعليمات البرمجية قائمة بالألوان. ويمكنك اختيار لون من القائمة، أو يمكنك فتح Color Picker من داخل تلميحات التعليمات البرمجية نفسها، وتعيين اللون المفضل.

تلميحات التعليمات البرمجية المرتبطة باللون في CSS
تلميحات التعليمات البرمجية المرتبطة باللون في CSS

إذا كانت لديك عيّنات ألوان في CC libraries، فإن تلميحات التعليمات البرمجية تعرض هذه العيّنات أيضًا.

يتم توضيح عيّنات الألوان من CC libraries من خلال رمز السحابة
يتم توضيح عيّنات الألوان من CC libraries من خلال رمز السحابة

ملاحظة:

يمكن عرض 50 من أصول CC library فقط داخل تلميحات التعليمات البرمجية. تظهر هذه التلميحات بترتيب أبجدي.

تلميحات المحددات الزائفة والعناصر الزائفة

يمكنك إضافة محدد CSS زائف لمحدد لتعريف حالة معينة للعنصر. على سبيل المثال، عند استخدام :hover، يتم تطبيق النمط عندما يقوم المستخدم بالتمرير فوق العنصر الذي تم تحديده بواسطة المحدد.

وعند كتابة ":"، يعرض Dreamweaver قائمة بالمحددات الزائفة الصالحة إذا كان المؤشر في السياق الصحيح.

تلميحات التعليمات البرمجية للمحددات الزائفة
تلميحات التعليمات البرمجية للمحددات الزائفة

عندما تكتب "::"، يعرض Dreamweaver قائمة بالعناصر الزائفة الصالحة (المستخدمة للأجزاء المحددة بنمط لعنصر ما) إذا كان المؤشر في السياق الصحيح.

تلميحات التعليمات البرمجية للعناصر الزائفة
تلميحات التعليمات البرمجية للعناصر الزائفة

تلميحات اختصار CSS

خصائص الاختصار هي خصائص CSS تتيح لك تعيين قيم العديد من صفات CSS الأخرى في الوقت نفسه. كما أن بعض أمثلة خصائص اختصار CSS هي خصائص الخلفية والخط.

وكما تشاهد في المثال أدناه، فإذا كتبت خاصية اختصار CSS (مثل خلفية على سبيل المثال)، فبعد كتابة مسافة، يعرض Dreamweaver:

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

عندما يتم ملء خصائص اختصار CSS، تعرض تلميحات التعليمات البرمجية أيضًا قيم الخاصية التي كتبتها.

نصائح تعليمات CSS البرمجية

بالنسبة لبعض خصائص CSS (مثل ظل المربع أو ظل النص)، يعرض Dreamweaver التلميحات التي توضح القيمة التي ينبغي عليك اتباعها، وتوضح أيضًا القيم الإلزامية باستخدام علامة نجمة. 

يمكنك أيضًا معرفة كيفية تفسير المستعرض في CSS.

التلميحات التي تظهر لخصائص CSS
التلميحات التي تظهر لخصائص CSS

تلميحات تعليمات JavaScript البرمجية

في ملفات JavaScript، يوفر Dreamweaver تلميحات التعليمات البرمجية للمتغيرات ومعلمات الوظائف. 

في المثال أدناه، يوضح جزء التعليمات البرمجية النوع.

تلميحات تعليمات JavaScript البرمجية
تلميحات تعليمات JavaScript البرمجية

يحدِّث Dreamweaver تلقائيًا قائمة تلميحات التعليمات البرمجية المتاحة أثناء العمل في ملفات JavaScript. لنفترض مثلاً أنك تعمل في ملف HTML رئيسي، وانتقلت إلى ملف JavaScript لإجراء تغيير. ينعكس التغيير الذي تقوم به في ملف JavaScript في قائمة تلميحات التعليمات البرمجية عند العودة إلى ملف HTML الرئيسي. 

ملاحظة:

يعمل هذا التحديث التلقائي فقط في حالة تحرير ملفات JavaScript في Dreamweaver.

فحص الكائنات المباشرة

يقوم Dreamweaver أيضًا تلقائيًا بتحديث تلميحات تعليمات JavaScript البرمجية.

على سبيل المثال، في حالة تعريف متغير كرقم، يحتفظ Dreamweaver بتلك المعلومات. وعند الإشارة إلى هذا المرجع لاحقًا في التعليمات البرمجية، فهو يوضح نوعها.

وفي حالة تغيير نوع المتغير (مثل سلسلة)، فستوضح تلميحات تعليمات Dreamweaver البرمجية تلقائيًا أن المتغير عبارة عن سلسلة.

تلميحات التعليمات البرمجية التي توضح نوع المتغير
تلميحات التعليمات البرمجية التي توضح نوع المتغير

تضمين الوثائق الديناميكية

في حالة إضافة التعليقات لوظيفة معينة، فعند عمل تلميح للوظيفة، يعرض Dreamweaver أيضًا الوثائق لهذه الوظيفة. 

تلميحات تعليمات PHP البرمجية

يدعم برنامج Dreamweaver إنشاء تلميحات تعليمات برمجية لإصدارات PHP 5.6 و7.1. تلميحات تعليمات PHP البرمجية خاصة بالمواقع وتغطي جميع الوظائف الرئيسية والفئات والثوابت.

لمزيد من المعلومات حول PHP 5.6 و7.1، راجع دليل PHP.

لمزيد من المعلومات حول Site-Specific Code Hints، راجع Site-Specific Code Hints.

ميزة تلميحات التعليمات البرمجية لـ PHP هي إكمال تلقائي للمتغيرات.

وعند كتابة علامة الدولار ($)، تظهر قائمة بجميع المتغيرات في برنامجك النصي الحالي. حدد المتغير الذي تريده، ثم اضغط Enter/Return. تم أيضًا إدراج المتغيرات من الملفات المرتبطة، مما يقلل خطر إعادة استخدام نفس المتغير لغرض مختلف.

عند تعيين PHP 7.1 إلى الإعداد الافتراضي، يعرض Dreamweaver تلميحات التعليمات البرمجية الخاصة بـ PHP 7.1.

تلميحات تعليمات PHP 7 البرمجية
تلميحات تعليمات PHP 7 البرمجية

مثال لتلميحات تعليمات كائن PHP البرمجية
مثال لتلميحات تعليمات كائن PHP البرمجية

تحرير إعدادات التأخير لتلميحات تعليمات PHP البرمجية

لتحسين أداء كتابة التعليمات البرمجية في ملفات .php، يحتوي Dreamweaver 2017.5 والإصدارات اللاحقة على تأخير مضاف لتلميحات تعليمات PHP البرمجية. وعند كتابة تعليمات PHP البرمجية، يعرض Dreamweaver التلميحات بعد تأخير مدته 400 مللي ثانية. وإذا كنت تريد تعديل إعدادات التأخير لتعليمات PHP البرمجية، فاتبع الإجراء التالي: 

  1. قم بإنهاء Dreamweaver.

  2. افتح brackets.json من الموقع التالي، باستخدام محرر نصي:

    • نظام تشغيل Windows%appdata%\Adobe\Dreamweaver CC 2017\<locale>\Configuration\Brackets\
    • نظام تشغيل Mac~/Library/Application Support/Adobe/Dreamweaver CC 2017/<locale>/Configuration/Brackets/
  3. انقر فوق الزر Save Structure الموجود في الركن الأيمن العلوي من مربع الحوار.

    في ملف JSON، أضف الفاصلة بعد زوج الاسم الأخير/القيمة.

    أضف السطر التالي مع وقت التأخير المفضل بالمللي ثانية: "delayInPHPHint": <الوقت بالمللي ثانية>. على سبيل المثال، "delayInPHPHint": 200.

  4. احفظ الملف وقم بتشغيل Dreamweaver.

Site-Specific Code Hints

تسمح ميزة Dreamweaver لمطوري البرامج الذين يعملون مع Joomla أو Drupal أو Wordpress أو أطر العمل الأخرى بعرض تلميحات التعليمات البرمجية PHP أثناء قيامهم بالكتابة في عرض Code. لعرض هذه التلميحات الخاصة بالتعليمات البرمجية، لا بد أولاً من إنشاء ملف تكوين باستخدام مربع الحوار Site-Specific Code Hints. يخبر ملف التكوين برنامج Dreamweaver بالأماكن التي يبحث فيها عن تلميحات التعليمات البرمجية الخاصة بموقعك.

للحصول على تدريب بالفيديو خاص باستخدام Site-Specific Code Hints، راجع www.adobe.com/go/learn_dw_comm13_ae.

إنشاء ملف التكوين

يمكنك استخدام مربع الحوار Site-Specific Code Hints لإنشاء ملف التكوين الضروري لعرض تلميحات التعليمات البرمجية في Dreamweaver.

بشكل افتراضي، يخزن Dreamweaver ملف التكوين في دليل Adobe Dreamweaver CS5\configuration\Shared\Dinamico\Presets.

ملاحظة:

تكون تلميحات التعليمات البرمجية التي تقوم بإنشائها خاصة بالموقع المحدد في لوحة Dreamweaver Files. ولعرض تلميحات التعليمات البرمجية، يجب أن تكون الصفحة التي تعمل عليها موجودة في الموقع المحدد حاليًا.

  1. حدد Site > Site Options > Site-Specific Code Hints.

    بشكل افتراضي، تقوم ميزة Site-Specific Code Hints بفحص موقعك لتحديد إطار عمل Content Management System (CMS) الذي تستخدمه. يدعم Dreamweaver ثلاثة أطر عمل بشكل افتراضي: Drupal وJoomla وWordpress.

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

    ملاحظة:

    لا يمكنك حذف بنيات أطر العمل الافتراضية الحالية أو إعادة تسميتها.

  2. في مربع حوار الجذر الفرعي، حدد مجلد الجذر الفرعي المخزن فيه ملفات إطار العمل الخاص بك. يمكنك النقر فوق رمز المجلد الموجود بجوار مربع النص لاستعراض المجلدات وصولاً إلى مكان ملفات إطار العمل.

    يعرض Dreamweaver بنية شجرية للملفات الموجودة داخل المجلدات التي تحتوي على ملفات إطار العمل الخاص بك. إذا كانت المجلدات والملفات التي تريد فحصها معروضة بالكامل، فانقر فوق OK لتشغيل عملية الفحص. وإذا كنت تريد تخصيص عملية الفحص، فانتقل إلى الخطوات التالية.

  3. انقر فوق زر الإضافة (+) الموجود أعلى نافذة Files لتحديد الملف أو المجلد الذي تريد إضافته إلى عملية الفحص. في مربع الحوار Add Files/Folders، يمكنك تحديد ملحقات اسم الملف المعين الذي تريد تضمينه.

    ملاحظة:

    تحديد ملحق اسم ملف معين لتسريع عملية المسح.

  4. لإزالة ملفات من عملية الفحص، حدد الملفات التي لا تريد فحصها ثم انقر فوق زر ناقص (-) الموجود أعلى نافذة Files.

    ملاحظة:

    إذا كان إطار العمل المحدد هو Drupal أو Joomla، فسيعرض مربع الحوار Site-Specific Code Hints مسارًا إضافيًا للملف داخل مجلد التكوين الخاص بك في Dreamweaver.

    لا تحذفه - فهو ضروري عند استخدام أطر العمل سابقة الذكر.

  5. لتخصيص كيفية تعامل ميزة Site-Specific Code Hints مع ملف أو مجلد بعينه، حدده من القائمة وقم بأي من الخطوات التالية:

    • حدد Scan This Folder لتضمين المجلد المحدد في عملية الفحص.
    • حدد Recursive لتضمين جميع الملفات والمجلدات الموجودة داخل الدليل المحدد.
    • انقر فوق الزر Extensions لفتح مربع الحوار Find Extensions، حيث يمكنك تحديد ملحقات اسم الملف الذي تريد تضمينه في عملية الفحص لملف أو مجلد بعينه.

حفظ بنية الموقع

يمكنك حفظ بنية موقع مخصصة قمت بإنشائها في مربع الحوار Site-Specific Code Hints.

  1. قم بإنهاء Dreamweaver.

  2. نص الخطوة
  3. قم بإنشاء بنية الملفات والمجلدات بالطريقة التي تريدها، مع إضافة ملفات ومجلدات وحذفها وفقًا للضرورة.

  4. حدد اسمًا لبنية الموقع التي قمت بإنشائها وانقر فوق Save.

ملاحظة:

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

إعادة تسمية بنيات الموقع

عند إعادة تسمية بنية موقعك، ضع في اعتبارك أنه لا يمكنك استخدام أسماء أي من البنيات الافتراضية الثلاثة الخاصة بإطار عمل الموقع، أو استخدام كلمة "custom".

  1. اعرض البنية التي تريد إعادة تسميتها.

  2. انقر فوق زر الأيقونة Rename Structure الموجود في الركن الأيمن العلوي من مربع الحوار.

  3. حدد اسمًا جديدًا للبنية وانقر فوق Rename.

ملاحظة:

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

إضافة ملفات أو مجلدات إلى بنية موقع

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

  1. انقر فوق زر الإضافة (+) الموجود أعلى نافذة Files لفتح مربع الحوار Add File/Folder.

  2. في مربع الحوار Add File/Folder، أدخل المسار الخاص بالملف أو المجلد الذي تريد إضافته. يمكنك أيضًا النقر فوق رمز المجلد الموجود بجوار مربع النص لاستعراض المجلدات وصولاً إلى الملف أو المجلد.

  3. انقر فوق زر الإضافة (+) الموجود أعلى نافذة Extensions لتحديد ملحقات اسم الملف الذي تريد فحصه.

    ملاحظة:

    تحديد ملحق اسم ملف معين لتسريع عملية المسح.

  4. انقر فوق Add.

فحص موقع بحثًا عن ملحقات اسم ملف

يمكنك استخدام مربع الحوار Find Extensions لعرض ملحقات اسم الملف المضمنة في بنية الموقع وتحريرها.

  1. في مربع الحوار Site-Specific Code Hints، انقر فوق الزر Extensions.

    يسرد مربع الحوار Find Extensions قائمة بالملحقات القابلة للفحص حاليًا.

  2. لإضافة ملحق آخر إلى القائمة، انقر فوق زر الإضافة (+) الموجود أعلى نافذة Extensions.

  3. لحذف ملحق من القائمة، انقر فوق زر ناقص (-).

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

مستخدم جديد؟