بيئة كتابة التعليمات البرمجية في Dreamweaver

إذا أردت العمل مع التعليمات البرمجية في Dreamweaver، يمكنك اختيار استخدام مساحة عمل Developer. تعرض مساحة العمل هذه طريقة العرض Code بشكل افتراضي وتتضمن فقط لوحتي Files وSnippets مرتسيتين على يسار الشاشة.

إذا كنت بحاجة إلى وظائف أكثر، فانقر فوق Window ثم اختر اللوحة المناسبة التي تحتاجها.

يمكنك العمل مع التعليمات البرمجية في Dreamweaver بطرق متعددة. يمكنك استخدام:

• طريقة العرض Code: تخطيط نظيف وبسيط يتيح لك العمل فقط مع التعليمات البرمجية، دون لوحات أو نوافذ إضافية.  لمزيد من المعلومات، راجع طريقة العرض View في نافذة Document.
• طريقة العرض Split: في طريقة العرض هذه، تكون كل من طريقتي العرض code وlive أو design ظاهرتين، بحيث يمكنك رؤية التغييرات التي تقوم بإجرائها أثناء كتابة التعليمات البرمجية. لمزيد من المعلومات، راجع كتابة التعليمات البرمجية لصفحة وتحريرها في الوقت نفسه في نافذة Document - طريقة عرض Split.

يمكنك التنقل بين طرق العرض المختلفة عن طريق النقر فوق أزرار التبديل بين طرق عرض Code وSplit وDesign/Live في أعلى مساحة العمل.

يمكنك أيضًا استخدام Code Inspector لعرض لغة HTML الخاصة بك في نافذة طافية. يتيح Code Inspector لك مشاهدة تصميم موقع الويب الخاص بك والتعليمات البرمجية في الوقت نفسه بدون الحاجة إلى تقسم طريقة العرض نصفين. لمزيد من المعلومات، راجع عرض التعليمات البرمجية في نافذة منفصلة من خلال Code Inspector.

عرض التعليمة البرمجية في النافذة Document - طريقة العرض Code

إنشاء تعليمة برمجية لصفحة وتحريرها في وقت واحد من النافذة Document - طريقة العرض Split

عرض التعليمة البرمجية في نافذة منفصلة باستخدام Code Inspector

يتيح لك Code inspector العمل في نافذة تعليمات برمجية منفصلة، تمامًا كالعمل في طريقة العرض Code.

كتابة التعليمات البرمجية بشكل أسرع في Dreamweaver

تقدم طريقة العرض Code في Dreamweaver ميزات مفيدة لكتابة التعليمات البرمجية تساعد المصممين في الانتقال إلى التطوير في طريقة العرض code، وبإمكان مؤلفي التعليمات البرمجية الخبراء الاستفادة من المساعدات المرئية مثل المسافة البادئة التلقائية، وتلوين التعليمات البرمجية، والخطوط القابلة لتغيير الحجم، لتقليل الأخطاء وتحسين إمكانية القراءة.

ها هي بعض الميزات التي يوفرها Dreamweaver.

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

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

فيما يلي مثال يوضح كيف يعمل ذلك في HTML. 

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

يتوفر أيضًا دعم تلميحات التعليمات البرمجية لـ CSS وJavaScript وPHP (الإصداران رقم 5.6 و7.1 من PHP). 

لمزيد من المعلومات، راجع تلميحات التعليمات البرمجية وإكمال التعليمات البرمجية.

الدعم لإصداري 5.6 و7.1 من PHP

يدعم Dreamweaver إصداري 5.6 و7.1 من PHP. 

يمكنك اختيار إنشاء ملفات PHP لموقعك من خلال إصدار PHP رقم 5.6 أو 7.1 باستخدام مربع حوار Site Setup (على أساس الموقع)، أو تفضيلات التطبيق (لجميع ملفات PHP المحفوظة خارج مواقع Dreamweaver). ثم يقوم Dreamweaver بإعداد هذه التلميحات وعمليات التحقق من الفحص لإصدار لغة PHP المحدد.

بالنسبة للمواقع الجديدة في Dreamweaver، يتم تعيين منشئ PHP الافتراضي للإصدار المحدد في Edit > Preferences > PHP.

لمزيد من المعلومات حول دعم PHP في Dreamweaver، راجع:

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

للحصول على معلومات عامة حول إصداري PHP رقم 5.6 و7.1، راجع الموارد التالية:

• الترحيل من PHP 5.6.x إلى PHP 7.0.x: http://php.net/manual/en/migration70.php
• الترحيل من PHP 7.0.x إلى PHP 7.1: http://php.net/manual/en/migration71.php
• لمعرفة المزيد حول PHP 7.1: http://php.net/releases/7_1_0.php

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

يدعم Dreamweaver تلميحات التعليمات البرمجية للكائنات في JavaScript. يوفر Dreamweaver تلميحات تعليمات برمجية لكائنات JavaScript الأساسية مثل الصفائف والتواريخ والأرقام والسلاسل. 

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

لمزيد من المعلومات، راجع تلميحات التعليمات البرمجية وإكمال التعليمات البرمجية.

إعادة بناء تعليمات JavaScript البرمجية

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

لمزيد من المعلومات، راجع كتابة تعليمة برمجية وتحريرها.

تلوين التعليمات البرمجية للأنواع المختلفة من الملفات

يدعم Dreamweaver ألوان التعليمات البرمجية لـ HTML، وJS، وCSS، وPHP، وXML، وLESS، وSass، وSCSS، وSVG، وBash، وC، وC#، وC++، وclojure، وCoffeeScript، وDart، وDiff، وEJS، وEmbedded Ruby، وGroovy، وHandlebars، وHaskell، وHaxe، وJava، وJSON، وLua، وMarkdown، وMarkdown (GitHub)، وPerl، وProperties، وPython، وRDF Turtle، وRuby، وScala، وSQL، وStylus، وText، وVB، وVBScript، وXML، وYAML.

العديد من المؤشرات للمهام المتكررة

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

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

أثناء تحرير التعليمات البرمجية، يمكنك القيام بما يلي:

• إضافة مؤشرات متعددة لإضافة محتوى جديد في أماكن متعددة
• تحديد نص في أماكن متعددة لتطبيق عملية التحرير نفسها على أجزاء مختلفة من المستند

لمزيد من المعلومات، راجع إضافة العديد من المؤشرات أو العديد من التحديدات.

التحرير السريع لملفات التعليمات البرمجية ذات الصلة

لإجراء تغييرات سريعة على التعليمات البرمجية، ضع المؤشر على أجزاء معينة من التعليمات البرمجية واستخدم قائمة السياق أو اضغط على Ctrl-E (في Windows) أو Cmd-E (في Mac) للوصول إلى ميزة Quick Edit.

يقدم لك Dreamweaver خيارات وأدوات تعليمات برمجية خاصة بالسياق مضمنة.

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

خذ المثال التالي بعين الاعتبار:

أنت تقوم بتحرير ملف HTML، وتلاحظ أن شيئًا ما يبدو غير صحيح في طريقة العرض live. تقوم حينئذ بالتبديل إلى طريق العرض code وتدرك أنه يتعين عليك تحرير ملف آخر ذي صلة (على سبيل المثال ملف CSS) لإصلاح المشكلة. 

بدلاً من تبديل علامات التبويب، انقر بزر الماوس الأيمن فوق التعليمات البرمجية المناسبة وانقر فوق Quick Edit، أو استخدم اختصار لوحة مفاتيح وسيفتح Dreamweaver القسم المناسب في التعليمات البرمجية في ملف CSS ذي الصلة ضمن ملف HTML نفسه.

يمكنك حينئذ تحرير التعليمات البرمجية لـ CSS دون الحاجة إلى التنقل بعيدًا أو تبديل علامات التبويب. يتم تحديث التغييرات في ملف CSS تلقائيًا.

لمزيد من المعلومات، راجع التحرير السريع.

وثائق CSS في السياق

توفر Quick Docs وثائق لخصائص CSS ضمن طريقة العرض code.

لن يتعين عليك التنقل خارج Dreamweaver إلى صفحة ويب للتعرف على خصائص CSS. لإحضار Quick Docs، اضغط Ctrl+K (في Windows) أو Cmd+K (في Mac).

لمزيد من المعلومات، راجع الحصول على تعليمات من خلال CSS داخل Dreamweaver باستخدام Quick Docs.

دعم فوري لـ Emmet

Emmet هو مكون إضافي يتيح لك كتابة التعليمات البرمجية بسرعة عالية وإنشاء التعليمات البرمجية لـ HTML وCSS.

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

استخدم اختصارات Emmet في طريقة العرض Code أو في Code Inspector في Dreamweaver والضغط على المفتاح Tab لتوسيع هذه الاختصارات في علامات HTML أو CSS.

توسيع اختصارات HTML في صفحات HTML وPHP.

تتوسع اختصارات CSS في صفحات CSS وLESS وSass وSCSS أو داخل علامة النمط في صفحة HTML.

لمزيد من المعلومات حول استخدام Emmet، راجع استخدام مجموعة أدوات Emmet مع Dreamweaver.

طي تعليمة برمجية

يتيح Dreamweaver لك طي أقسام التعليمات البرمجية كي يمكنك التركيز بسهولة على الأقسام التي تقوم بتحريرها بشكل نشط. 

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

لمزيد من المعلومات، راجع طي تعليمة برمجية وتوسيعها.

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

يقدم Dreamweaver وظائف فحص قوية للمساعدة في تصحيح الأخطاء في التعليمات البرمجية الخاصة بك. 

وهي تعمل على تحليل التعليمات البرمجية لتعليم الأخطاء المحتملة أو الاستخدام المريب للتعليمات البرمجية. تعتبر أخطاء بناء الجملة في HTML، أو تحليل الأخطاء في CSS أو التحذيرات في ملفات JavaScript هي بعض الأشياء التي يتم تمييزها خلال عملية الفحص في Dreamweaver.

لمزيد من المعلومات حول فحص التعليمات البرمجية في Dreamweaver، راجع فحص التعليمات البرمجية.

إذا كنت تعمل مع PHP وكان المستند يحتوي على تعليمات برمجية غير صالحة، يعرض Dreamweaver هذه التعليمات البرمجية في طريقة العرض Design (إذا كانت مفتوحة) ويميزها في طريقة العرض Code (تبعًا للتفضيلات التي تقوم بتعيينها).

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

الدعم للمعالجات المسبقة لـ CSS

يدعم Dreamweaver الآن معالجات CSS المسبقة الشائعة مثل SASS وLess وSCSS والتلوين الكامل للتعليمات البرمجية، وتلميحات التعليمات البرمجية، والتجميع. 

مع دعم المعالج المسبق لـ CSS، يمكنك توفير الوقت عند العمل مع المواقع الكبيرة التي تتضمن أوراق أنماط معقدة.

لمزيد من المعلومات حول دعم Dreamweaver لمعالجات CSS الأولية، راجع استخدام معالجات CSS الأولية في Dreamweaver.

حفظ أجزاء التعليمات البرمجية وإعادة استخدامها

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

الأجزاء التي يتم حفظها باستخدام اللوحة Snippets غير خاصة بموقع محدد، وبالتالي يمكن إعادة استخدامها عبر المواقع.

يمكنك أيضًا استخدام الأجزاء عبر أجهزة مختلفة، وأيضًا عبر إصدارات مختلفة من Dreamweaver باستخدام إعدادات المزامنة.

لمزيد من المعلومات، راجع إعادة استخدام التعليمات البرمجية مع الأجزاء‬.

المعاينة في المستعرض في الوقت الحقيقي

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

لمزيد من المعلومات، راجع المعاينة في المستعرض في الوقت الحقيقي.

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

يمكنك استخدام اختصارات لوحة المفاتيح المفضلة في Dreamweaver. إذا كنت معتادًا على استخدام اختصارات لوحات مفاتيح معينة - مثل Shift+Enter لإضافة فاصل أسطر، أو Control+G للانتقال إلى موضع معين في التعليمة البرمجية، فيمكنك إضافتها إلى Dreamweaver باستخدام Keyboard Shortcut Editor.

للحصول على الإرشادات، راجع ‏‫تخصيص اختصارات لوحة المفاتيح‬.

فتح الملفات في طريقة العرض Code افتراضيًا

عند فتح نوع ملف لا يحتوي عادةً على أي HTML (ملف JavaScript مثلاً)، يُفتح الملف في طريقة العرض Code (أو Code inspector) وليس في طريقة العرض Design. ويمكنك تعيين أنواع الملفات التي تفتح في طريقة العرض Code.