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

تاريخ آخر تحديث 27 أبريل 2021

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

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

تم تصميم هذا القسم للأشخاص الذين يفضلون العمل في عرض التصميم، ولكن يريدون أيضًا وصولاً سريعًا إلى الكود.

تحديد العلامات الفرعية في طريقة عرض Design

إذا قمت بتحديد كائن في عرض التصميم يحتوي على علامات فرعية—على سبيل المثال، جدول HTML—يمكنك تحديد العلامة الفرعية الأولى لذلك الكائن بسرعة عن طريق تحديد تحرير > تحديد العنصر الفرعي.

ملاحظة

لا يتم تمكين هذا الأمر إلا في طريقة العرض Design.

على سبيل المثال، علامة <table> عادة ما تحتوي على علامات فرعية <tr>. إذا قمت بتحديد علامة <table> في محدد العلامة، يمكنك تحديد الصف الأول في الجدول عن طريق تحديد تحرير > تحديد فرعي. يحدد Dreamweaver علامة <tr> الأولى في محدد العلامة. نظرًا لأن علامة <tr> نفسها تحتوي على علامات فرعية، وهي علامات <td>، فإن تحديد تحرير > تحديد فرعي مرة أخرى يحدد الخلية الأولى في الجدول.

تحرير تعليمة برمجية باستخدام عارض الخصائص

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

ملاحظة

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

انقر في النص أو حدد كائنًا في الصفحة.

يظهر فاحص الخصائص للنص أو الكائن أسفل نافذة المستند. إذا لم يكن فاحص الخصائص مرئيًا، حدد نافذة > خصائص.

قم بإجراء التغييرات على السمات في عارض الخصائص.

تحرير CFML باستخدام عارض الخصائص

استخدم فاحص الخصائص لفحص وتعديل ترميز ColdFusion في عرض التصميم.

في فاحص الخصائص، انقر على زر الخصائص لتحرير خصائص العلامة أو لإضافة خصائص جديدة.
إذا كانت العلامة تحتوي على محتوى بين علاماتها الافتتاحية والإغلاقية، انقر على زر المحتوى لتحرير المحتوى.

يظهر زر المحتوى فقط إذا لم تكن العلامة المحددة علامة فارغة (أي إذا كانت تحتوي على علامة افتتاحية وإغلاقية كلاهما).

إذا كانت العلامة تحتوي على تعبير شرطي، قم بإجراء تغييرات عليه في مربع التعبير.

نظرة عامة على Quick Tag Editor

تستخدم محرر العلامة السريع لفحص وإدراج وتحرير علامات HTML بسرعة دون مغادرة عرض التصميم.

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

لتعيين خيارات محرر العلامة السريع، افتح محرر العلامة السريع بالضغط على Control-T (Windows) أو Command-T (Macintosh).

توجد في Quick Tag Editor ثلاثة أوضاع هي:

  • الوضع Insert HTML: ويُستخدم لإدراج تعليمة HTML برمجية جديدة.
  • الوضع Edit Tag: ويُستخدم لتحرير تعليمة برمجية موجودة.
  • الوضع Insert HTML: ويُستخدم لإدراج تعليمة HTML برمجية جديدة.

  • الوضع Edit Tag: ويُستخدم لتحرير تعليمة برمجية موجودة.

  • الوضع Wrap Tag: ويُستخدم لالتفاف علامة جديدة حول التحديد الحالي.

ملاحظة

يعتمد الوضع الذي يتم فتح Quick Tag Editor فيه على التحديد الحالي في طريقة العرض Design.

وفي الأوضاع الثلاثة جميعها، يعتبر الإجراء الأساسي لاستخدام Quick Tag Editor هو نفسه: فتح المحرر، ثم إدخال علامات وسمات أو تحريرها، ثم إغلاق المحرر.

يمكنك التنقل بين الأوضاع بالضغط على Control+T (في Windows) أو Command+T (في Macintosh) حينما يكون Quick Tag Editor نشطًا.  

تحرير تعليمة برمجية باستخدام Quick Tag Editor

يمكنك استخدام Quick Tag Editor (Edit > Quick Tag Editor) لفحص علامات HTML وإدراجها وتحريرها بسرعة، دون الخروج من طريقة العرض Design.

إدراج علامة HTML

في عرض التصميم، انقر في الصفحة لوضع نقطة الإدراج حيث تريد إدراج الكود.
اضغط على Control+T (في Windows) أو Command+T (في Macintosh).

يفتح Quick Tag Editor في الوضع Insert HTML.

Quick Tag Editor في الوضع Insert HTML
Quick Tag Editor في الوضع Insert HTML

أدخل علامة HTML، واضغط على Enter.

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

اضغط على Escape للخروج دون إجراء أي تغييرات.

تحرير علامة HTML

حدد كائنًا في طريقة العرض Design.

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

اضغط على Control+T (في Windows) أو Command+T (في Macintosh).

يفتح Quick Tag Editor في الوضع Edit Tag.

أدخل خصائص جديدة أو حرّر الخصائص الموجودة أو حرّر اسم العلامة.
اضغط على Tab للانتقال إلى الأمام من خاصية إلى أخرى؛ اضغط على Shift+Tab للعودة إلى الخلف.
ملاحظة

بشكل افتراضي، يتم تطبيق التغييرات على المستند عندما تضغط على Tab أو Shift+Tab.

لإغلاق محرر العلامة السريع وتطبيق جميع التغييرات، اضغط على Enter.
وللخروج دون إجراء أي تغييرات أخرى، اضغط على Escape.

لف التحديد الحالي بعلامات HTML

حدد نصًا غير منسق أو كائنًا في عرض التصميم.
ملاحظة

إذا حددت نصًا أو كائنًا يتضمن علامة HTML للفتح أو الإغلاق، يفتح Quick Tag Editor في الوضع Edit Tag بدلاً من الوضع Wrap Tag.

اضغط على Control+T (Windows) أو Command+T (Macintosh)، أو انقر على زر محرر العلامة السريع في Property inspector.

يفتح Quick Tag Editor في الوضع Wrap Tag.

أدخل علامة فتح واحدة، مثل strong، واضغط على Enter (Windows) أو Return (Macintosh).

يتم إدراج العلامة في بداية التحديد الحالي، ويتم إدراج علامة إغلاق مطابقة في النهاية.

للخروج دون إجراء أي تغييرات، اضغط على Escape.

استخدم قائمة التلميحات في محرر العلامة السريع

يتضمن محرر العلامة السريع قائمة تلميحات الخصائص التي تسرد جميع الخصائص الصالحة للعلامة التي تحررها أو تدرجها.

يمكنك أيضًا تعطيل قائمة التلميحات أو ضبط التأخير قبل ظهور القائمة في محرر العلامة السريع.

لمشاهدة قائمة تلميحات تسرد الخصائص الصالحة لعلامة، توقف قليلاً أثناء تحرير اسم خاصية في محرر العلامة السريع. تظهر قائمة تلميحات تسرد جميع الخصائص الصالحة للعلامة التي تحررها.

وبالمثل، لمشاهدة قائمة تلميحات تسرد أسماء العلامات الصالحة، توقف قليلاً أثناء إدخال أو تحرير اسم علامة في محرر العلامة السريع.

ملاحظة

تفضيلات تلميحات التعليمات البرمجية في محرر العلامات السريع يتم التحكم فيها من خلال تفضيلات تلميحات التعليمات البرمجية العادية.لمزيد من المعلومات، راجع تعيين تفضيلات تلميح بشأن الرمز.

قم بأحد الإجراءات التالية:
  • ابدأ بكتابة اسم علامة أو سمة. ينتقل التحديد في قائمة Code Hints إلى العنصر الأول الذي يبدأ بالأحرف التي كتبتها.

  • استخدم مفتاحي السهم لأعلى والسهم لأسفل لتحديد عنصر.

  • استخدم شريط التمرير الأفقي للبحث عن عنصر.

اضغط على Enter لإدراج العنصر المحدد، أو انقر نقرًا مزدوجًا على عنصر لإدراجه.
لإغلاق قائمة التلميحات دون إدراج عنصر، اضغط على Escape أو تابع الكتابة.

تعطيل قائمة التلميحات أو تغيير التأخير قبل ظهورها

حدد Edit > Preferences (Windows) أو Dreamweaver > Preferences (Macintosh) وحدد Code Hints.

يظهر مربع الحوار Code Hints Preferences.

لتعطيل قائمة التلميحات، ألغِ تحديد خيار Enable Code Hints.

تحرير تعليمة برمجية باستخدام محدد العلامات

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

تحرير علامة أو حذفها

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

تظهر العلامات التي تنطبق عند نقطة الإدراج في محدد العلامات.

انقر بزر الماوس الأيمن (Windows) أو انقر مع الضغط على Control (Macintosh) على علامة في محدد العلامات.
لتحرير علامة، حدد Edit Tag من القائمة. أدخل تغييراتك في محرر العلامات السريع.لمزيد من المعلومات، راجع تعديل الكود باستخدام محرر العلامات السريع.
لحذف علامة، حدد Remove Tag من القائمة.

حدد كائنًا يتوافق مع علامة

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

تظهر العلامات التي تنطبق عند نقطة الإدراج في محدد العلامات.

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

يتم تحديد الكائن الذي تمثله العلامة في الصفحة.

ملاحظة

استخدم هذه الطريقة لتحديد صفوف الجدول الفردية (علامات tr) أو الخلايا (علامات td).

اكتب وعدّل البرامج النصية في عرض التصميم

يمكنك العمل مع JavaScript و VBScript من جانب العميل في كل من عرضي الكود والتصميم، بالطرق التالية:

  • اكتب برنامجًا نصيًا بـ JavaScript أو VBScript لصفحتك دون مغادرة عرض التصميم.

  • أنشئ رابطًا في مستندك إلى ملف برنامج نصي خارجي دون مغادرة عرض التصميم.

  • عدّل برنامجًا نصيًا دون مغادرة عرض التصميم.

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

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

ضع نقطة الإدراج حيث تريد البرنامج النصي.

حدد Insert > HTML > Script.

حدد البرنامج النصي في نافذة تحديد الملف.

ملاحظة

ولا داعي لتضمين علامات فتح وإغلاق script.

تم إدراج علامة البرنامج النصي للملف المحدد في المستند.

تحرير برنامج نصي

حدد علامة البرنامج النصي.
في عارض الخصائص، انقر فوق الزر Edit.

يظهر البرنامج النصي في مربع الحوار Script Properties.

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

ملاحظة

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

في مربع اللغة، حدد JavaScript أو VBScript كلغة البرنامج النصي.
في قائمة "النوع" المنبثقة، حدد نوع البرنامج النصي، إما من جانب العميل أو من جانب الخادم.
(اختياري) في مربع المصدر، حدد ملف برنامج نصي مرتبط خارجيًا.

انقر فوق أيقونة المجلد أو الزر Browse لتحديد ملف، أو اكتب المسار.

قم بتحرير البرنامج النصي، وانقر فوق OK.

تحرير البرامج النصية لـ ASP من جانب الخادم في عرض التصميم

استخدم مفتش خصائص البرنامج النصي ASP لـ فحص وتعديل برامج ASP النصية من جانب الخادم في عرض التصميم.

في عرض التصميم، حدد رمز علامة لغة الخادم المرئي.
في مفتش خصائص البرنامج النصي ASP، انقر على زر التعديل.
قم بتحرير برنامج ASP النصي من جانب الخادم، وانقر فوق OK.

تعديل البرامج النصية على الصفحة باستخدام مفتش الخصائص

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

إذا كنت تستخدم JavaScript وغير متأكد من الإصدار، حدد JavaScript بدلاً من JavaScript1.1 أو JavaScript1.2.

في القائمة المنبثقة "النوع"، حدد نوع البرنامج النصي، إما من جانب العميل أو من جانب الخادم.

(اختياري) في المربع Source، حدد ملف برنامج نصي مرتبط خارجيًا. انقر فوق أيقونة المجلد لتحديد الملف، أو اكتب المسار.

انقر فوق Edit لتعديل البرنامج النصي.

استخدام سلوكيات JavaScript

يمكنك بسهولة إرفاق سلوكيات JavaScript (من جانب العميل) بعناصر الصفحة باستخدام علامة التبويب السلوكيات في مُفتش الوسوم.لمزيد من المعلومات، راجع تطبيق سلوكيات JavaScript المدمجة Dreamweaver.