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

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

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

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

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

• HTML
• CSS
• JavaScript 
• PHP

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

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

لتمكين تلميحات التعليمات البرمجية، انقر فوق 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 هذه أيضًا وصفًا موجزًا بالعلامة متى أمكن.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

يقوم 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 البرمجية

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

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.

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

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

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

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

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

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

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

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