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

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

بحث

تاريخ آخر تحديث 6 مايو 2021

Dreamweaver

فتح التطبيق

تعرف على كيفية العمل في طريقة عرض التعليمات البرمجية واحصل على الأفضل من ميزات كتابة التعليمات البرمجية لـ Dreamweaver.

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

يمكنك فتح تعليمة برمجية جديدة باستخدام حوار New Document وبدء كتابة التعليمات البرمجية.

إنشاء ملف تعليمات برمجية جديد في Dreamweaver

أثناء الكتابة، تظهر تعليمات التلميحات البرمجية للمساعدة في تحديد التعليمات البرمجية وتجنب الأخطاء الإملائية. احصل على مساعدة في CSS عند الحاجة باستخدام Quick Docs في Dreamweaver.

يمكنك أيضًا إدراج التعليمات البرمجية باستخدام لوحة Insert أو استخدام اختصارات التعليمات البرمجية مثل سلوكيات Emmet.

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

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

يوفر Dreamweaver أيضًا مجموعة قوية من أدوات التحرير التي تجعل التنقل عبر تعليماتك البرمجية وعمل التغييرات فيها عملية سهلةً.

في Dreamweaver، استخدم ميزة بحث واستبدال للبحث عن العلامات أو السمات أو النصوص في هذه التعليمات البرمجية.
استخدم Code Navigator للتنقل في التعليمات البرمجية المرتبطة داخل الملف الحالي وخارجه على حدٍ سواء. ومن الأفضل استخدام ميزة Quick Edit لتحرير التعليمات البرمجية في الملفات المرتبطة بدون حتى فتح الملف في علامة تبويب جديدة.
انقر بزر الماوس الأيمن فوق التعليمة البرمجية لجلب قائمة سياق بسيطة وذات صلة تتيح لك تحرير التعليمة البرمجية مباشرة.
استخدم علامة Wrap Tag لالتفاف النص في العلامات.

اقرأ للحصول على مزيد من المعلومات حول جميع ميزات التعليمات البرمجية هذه.

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

ضع نقطة الإدخال في التعليمة البرمجية.
حدد فئة مناسبة في اللوحة Insert.
انقر فوق زر في اللوحة Insert، أو حدد عنصرًا من قائمة منبثقة في اللوحة Insert.

عند النقر فوق أحد الرموز، تظهر التعليمة البرمجية في الصفحة مباشرةً، أو يظهر مربع حوار يطالبك بمزيد من المعلومات لاستكمال التعليمة البرمجية.

يختلف عدد الأزرار المتوفرة في اللوحة Insert وأنواعها تبعًا لنوع المستند الحالي. كما يعتمد ذلك أيضًا على اختيارك لاستخدام طريقة العرض Code أم Design.

استخدام مجموعة أدوات Emmet مع Dreamweaver

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

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

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

ها هي بعض الأمثلة التي توضح طريقة استخدام اختصارات Emmet في طريقة العرض Code. للحصول على معلومات مفصلة ومراجع، راجع وثائق Emmet.

ملاحظة:

يدعم Dreamweaver حاليًا اختصارات Emmet 1.2.2.

مثال 1: إدراج التعليمة البرمجية بلغة HTML باستخدام Emmet

لإضافة التعليمة البرمجية لـ HTML بسرعة لقائمة غير مرتبة مكونة من ثلاثة عناصر، افتح ملف HTML واكتب Emmet التالي في طريقة العرض Code ضمن <body></body>:

div>(ul>li*3>{Lorem Ipsum})+p*4>lorem

والآن، تأكد من وضع المؤشر بعد اختصار Emmet مباشرة واضغط على المفتاح Tab لتوسيع الاختصار. بدلاً من ذلك، حدد الاختصار بأكمله ثم اضغط على المفتاح Enter.

يتم توسيع الاختصار إلى التعليمة البرمجية التالية:

<div>
    <ul>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
    </ul>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora temporibus vel.</p>
    <p>Ipsa, distinctio, eveniet ad numquam libero quam doloremque culpa illo ex possimus eligendi amet nesciunt provident inventore rerum facere ea veritatis itaque? Suscipit rem asperiores excepturi sapiente enim architecto esse.</p>
    <p>Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.</p>
    <p>Dignissimos, molestiae, quis ducimus ratione temporibus sed accusamus libero consequuntur ex velit maiores illum repudiandae cum! Dolorum, dolore, pariatur, incidunt in saepe laudantium consequatur provident totam vero velit nobis accusantium!</p>
</div>

مثال 2: إدراج التعليمة البرمجية لـ CSS باستخدام Emmet

لإدراج التعليمة البرمجية بلغة CSS لإنشاء نصف قطر الحد لبادئات البائع، افتح ملف CSS الخاص بك، ثم اكتب اختصار Emmet التالي داخل فئة:

-bdrs

عند الضغط على المفتاح Tab، يتم توسيع الاختصار إلى التعليمة البرمجية التالية:

-webkit-border-radius: ;
 
-moz-border-radius: ;
 
border-radius: ;

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

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

إضافة تعليقات إلى تعليمتك البرمجية

لإضافة التعليقات، اكتب نص التعليق أولاً. ثم يمكنك وضع مؤشرك عند نقطة الإدراج والنقر فوق أيقونة Insert من شريط الأدوات لفتح قائمة Apply Comment الفرعية.

يمكنك أيضًا تحديد النص وجعله تعليقًا. يتم التفاف النص المحدد في كتلة تعليق.

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

يمكنك أيضًا استخدام اختصار لوحة المفاتيح Ctrl+/ (في نظام Windows)، أو Cmd+/ (في نظام Mac) لإضافة تعليقاتك.

وفي حالة استخدام اختصار بدون تحديد أي نص، يتم تطبيق التعليق للسطر الحالي. وفي حالة تحديد نص واستخدام اختصار لوحة المفاتيح، يتم تطبيق التعليق على للنص المحدد.

إزالة التعليقات من تعليماتك البرمجية

لإزالة تعليقات تعليماتك البرمجية، حدد التعليمة البرمجية، وانقر فوق أيقونة Remove comment في شريط الأدوات.يمكنك أيضًا استخدام اختصار لوحة المفاتيح Ctrl-// (في نظام Windows)، أو Cmd-/ (في نظام Mac) لإزالة تعليقاتك.

تبديل تعليقات التعليمات البرمجية

لتبديل عرض التعليقات وإخفائها في طريقة عرض التعليمات البرمجية، فقط اضغط على Ctrl+/ في Windows، أو Cmd+/ في Mac للتعليق أو السطر المحدد.

استخدام العديد من المؤشرات لإضافة النص أو تغييره في العديد من الأماكن

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

ملاحظة:

لا تعمل عمليات النسخ واللصق والبحث والاستبدال مع العديد من المؤشرات أو العديد من التحديدات.

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

يمكنك إضافة العديد من المؤشرات بطرق مختلفة بناءً على متطلباتك.

إذا كنت تريد إضافة بعض النص في عدة أماكن بدون استبدال أيّ من النص الحالي، فأضف العديد من المؤشرات.

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

لإضافة العديد من المؤشرات أو التحديدات على نفس العمود عبر أسطر متواصلة:

اضغط لأسفل على مفتاح Alt ثم انقر للسحب رأسيا. وعند السحب رأسيًا، تتم إضافة المؤشرات لكل سطر تسحب عبره.

النص المضاف للمؤشرات عبر العديد من الأسطر

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

ملاحظة:

لإضافة المؤشرات أو تضمين العديد من الأسطر بشكل سريع في تحديد، استخدم اختصار لوحة المفاتيح Shift-Alt-Up أو Down.

بمجرد إضافة المؤشرات (أو النص المحدد) في عدة أماكن، امض قدمًا وابدأ الكتابة.

إذا كان لديك العديد من المؤشرات، فتتم إضافة النص الجديد.

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

لتحميل العديد من المؤشرات على مختلف الأعمدة عبر الأسطر:

لإضافة المؤشرات لأسطر نص متقطعة، فقط اضغط على مفتاح Ctrl وانقر فوق مختلف الأسطر التي تريد وضع المؤشر فيها.

إضافة المؤشرات للعديد من أسطر النص غير المتجاورة

لتحديد أسطر النص غير المتجاورة، حدد بعض النص، ثم اضغط على مفتاح Ctrl (Windows) أو مفتاح Cmd (Mac) وواصل عمل تحديدات إضافية.

لإضافة المؤشرات في بداية/نهاية كل سطر:

حدد العديد من أسطر النص واضغط مفتاحي السهمين لليمين واليسار.

لإضافة المؤشرات في الأسطر السابقة أو التالية للتحديد:

اضغط مفاتيح Shift+Alt+Up/Down ثم اضغط على مفتاح السهم لليمين.

لإلغاء تحديد أسطر النص المتصلة وغير المتجاورة:

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

حدد السطور المنقطعة من النص، ثم اضغط على Ctrl-Alt (في Windows) أو Cmd-Alt (في Mac) واسحب لإضافة مجموعة من السطور إلى التحديدات المتعددة الحالية.

تحديد كل من أسطر النص المستمرة وغير المتجاورة

الحصول على تعليمات حول استخدام CSS في Dreamweaver باستخدام Quick Docs

أثناء العمل باستخدام ملفات CSS أو LESS أو SCSS في Dreamweaver، يمكنك الحصول على مزيد من المعلومات حول خصائص CSS أو القيم.

ضع مؤشرك داخل خاصية أو قيمة واضغط على Ctrl + K، يتم فتح Dreamweaver لوثائق من مشروع Web Platform Docs.

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

لغلق برنامج تحرير داخلي واحد أو عارض مستندات ضمني، انقر فوق "X" في الركن الأيسر العلوي أو اضغط Escape أثناء التركيز على Quick Docs.

لغلق جميع برامج التحرير والمستندات الضمنية، ضع مؤشرك مرة أخرى في برنامج تحرير التعليمات البرمجية المطابق الرئيسي واضغط Escape.

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

يدعم Dreamweaver الفحص (تحليل التعليمات البرمجية بحثًا عن أخطاء) لـ HTML وCSS وJavaScript.

تسرد لوحة Output الأخطاء والتحذيرات التي تم اكتشافها أثناء عملية الفحص. لمزيد من المعلومات، راجع فحص التعليمات البرمجية.

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

ملاحظة: يتم عرض الخطأ الأول في السطر فقط. إذا احتوى السطر على تحذير فقط، يتم عرض وصف التحذير. إذا احتوى السطر على تحذير وخطأ، يتم عرض وصف الخطأ فقط.

التفاف النص في التعليمات البرمجية باستخدام Wrap Tag

استخدم طريقة عرض Wrap Tag in Code لالتفاف أسطر معينة من النص مع علامة. في طريقة عرض Design أو Live، يمكنك استخدام هذه الميزة لالتفاف الكائنات التي لها علامة.

حدد النص في طريقة عرض Code أو كائنًا في طريقة عرض Design واضغط على Ctrl+T في لوحة المفاتيح لديك.

تظهر قائمة منبثقة تتيح لك التحديد من بين عدد من علامات HTML.
حدد علامة من القائمة.

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

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

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

للوصول إلى قائمة السياق، انقر بزر الماوس الأيمن (في Windows) أو Command-click (في Mac). تتوفر الخيارات التالية للاستخدام:

Quick Edit

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

Cut, copy, paste

انقر فوق هذه الخيارات للقص والنسخ واللصق السريع للنص بدون الحاجة إلى الوصول إلى قائمة Edit.

Find and replace, Find next, Find previous

انقر فوق هذه الخيارات للبحث عن النص واستبداله بسرعة بدون الحاجة إلى الوصول إلى قائمة Find.

Create new snippet

استخدم هذا الخيار لإنشاء أجزاء التعليمات البرمجية التي يمكنك حفظها لإعادة استخدامها فيما بعد. حدد التعليمة البرمجية، وانقر فوق Create new snippet لعمل جزء التعليمة البرمجية المحدد. لمزيد من المعلومات، راجع ‏‫‏‫استخدام أجزاء التعليمات البرمجية‬‬.

Open related file

انقر بزر الماوس الأيمن فوق علامة ارتباط/برنامج نصي وانقر فوق open related file لفتح الملف ذي الصلة.

Attach Style Sheet

قم بإرفاق ورقة أنماط CSS حالية لصفحتك.

Selection

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

Code Navigator

انقر فوق هذا الخيار للانتقال إلى مصادر التعليمات البرمجية ذات الصلة، كقواعد CSS الداخلية والخارجية، ويتضمن جانب الخادم: ملفات JavaScript الخارجية وملفات قوالب الأصل وملفات المكتبة وملفات مصدر iframe. لمزيد من المعلومات، راجع ‏‫الانتقال إلى التعليمة البرمجية ذات الصلة‬.

Code Hint Tools

تجلب قائمة Code Hint Tools الفرعية منتقي الألوان، ومستعرض URL وأدوات قائمة Font في متناولك.

Indent code blocks

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

وضع مسافة بادئة لمقطع التعليمة البرمجية المحدد

اضغط على Tab، أو
اضغط على Ctrl+]، أو
حدد Edit > Indent Code.

إزالة مسافة بادئة من مقطع التعليمة البرمجية المحدد

اضغط على Shift+Tab، أو
اضغط على Ctrl+[، أو
حدد Edit > Outdent Code.

الانتقال إلى التعليمات البرمجية ذات الصلة

يعرض Code Navigator قائمة بمصادر التعليمات البرمجية ذات الصلة بتحديد معين في الصفحة. يمكنك استخدامه للانتقال إلى مصادر التعليمات البرمجية ذات الصلة، كقواعد CSS الداخلية والخارجية، ويتضمن جانب الخادم: ملفات JavaScript الخارجية وملفات قوالب الأصل وملفات المكتبة وملفات مصدر iframe. عند النقر فوق ارتباط في Code Navigator، يفتح Dreamweaver الملف الذي يحتوي على جزء التعليمة البرمجية ذي الصلة. يظهر الملف في منطقة الملفات ذات الصلة، إذا تم تمكينها. وإذا لم تكن منطقة الملفات ذات الصلة ممكَّنة، فحينئذٍ يفتح Dreamweaver الملف المحدد كمستند منفصل في النافذة Document.

إذا نقرت فوق قاعدة CSS في Code Navigator، ينقلك Dreamweaver إلى هذه القاعدة مباشرةً. وإذا كانت القاعدة داخلية في الملف، يعرض Dreamweaver القاعدة في طريقة العرض Split. أما إذا كانت القاعدة ملف CSS خارجيًا، فيفتح Dreamweaver الملف ويعرض القاعدة في منطقة الملفات ذات الصلة فوق المستند الرئيسي.

يمكنك الوصول إلى Code Navigator من طرق العرض: Design وCode وSplit، وكذلك من عارض Code.

لمشاهدة فيديو نظرة عامة من الفريق الهندسي لـ Dreamweaver حول استخدام Code Navigator، راجع www.adobe.com/go/dw10codenav.

‏‫لمشاهدة فيديو تدريبي حول استخدام طريقة العرض Live والملفات ذات الصلة وCode Navigator، راجع www.adobe.com/go/lrvid4044_dw.

فتح Code Navigator

انقر في أي مكان بالصفحة مع الضغط على Alt (في Windows) أو على Command+Option (في Macintosh). يعرض Code Navigator ارتباطات إلى التعليمة البرمجية التي تؤثر على المنطقة التي نقرت فيها.

انقر خارج Code Navigator لإغلاقه.

ملاحظة:

يمكنك أيضًا فتح Code Navigator بالنقر فوق مؤشر Code Navigator . يظهر هذا المؤشر بالقرب من نقطة الإدخال الموجودة بالصفحة عند عدم تحريك الماوس لمدة ثانيتين.

الانتقال إلى التعليمة البرمجية باستخدام Code Navigator

افتح Code Navigator من منطقة الصفحة التي تريدها.
انقر فوق جزء التعليمة البرمجية الذي تريد الانتقال إليه.

يقوم Code Navigator بتجميع مصادر التعليمات البرمجية ذات الصلة حسب الملف، ويسرد الملفات بترتيب أبجدي. فمثلاً بفرض أن قواعد CSS في ثلاثة ملفات خارجية تؤثر على التحديد في المستند. في هذه الحالة، يسرد Code Navigator هذه الملفات الثلاثة كقواعد CSS ذات صلة بالتحديد. بالنسبة لـ CSS ذي الصلة بتحديد معين، يؤدي Code Navigator الوظيفة التي تقوم بها اللوحة CSS Styles في Current Mode.

ملاحظة:

عند تحريك المؤشر على ارتباطات إلى قواعد CSS، يعرض Code Navigator تلميحات أدوات للخصائص في القاعدة. وتفيد تلميحات الأدوات هذه عندما تريد التمييز بين عدة قواعد تشترك في الاسم.

تعطيل مؤشر Code Navigator

افتح Code Navigator.
حدد Disable Indicator أسفل الزاوية اليمنى.
انقر خارج Code Navigator لإغلاقه.

لإعادة تمكين مؤشر Code Navigator، انقر مع الضغط على Alt (في Windows) أو Command+Option (في Macintosh) لفتح Code Navigator، وقم بإلغاء تحديد الخيار Disable Indicator.

الانتقال إلى وظيفة JavaScript أو VBScript

في طريقة العرض Code وعارض Code، يمكنك عرض قائمة لجميع وظائف JavaScript أو VBScript في التعليمة البرمجية والانتقال إلى أيّ منها.

اعرض المستند في طريقة العرض Code ‏(View > Code) أو Code inspector ‏(Window > Code Inspector).
قم بأحد الإجراءات التالية:
- في طريقة العرض Code، انقر بزر الماوس الأيمن (في Windows) أو انقر مع الضغط على مفتاح Control (في Macintosh) في أي مكان في طريقة العرض Code، وحدد القائمة الفرعية Functions من قائمة السياق.
ملاحظة:

لا تظهر القائمة الفرعية Functions في طريقة العرض Design.

تظهر أيّ من وظائف JavaScript أو VBScript في التعليمة البرمجية في القائمة الفرعية.

ملاحظة:

لإظهار الوظائف المسرودة بترتيب أبجدي، انقر بزر الماوس الأيمن مع الضغط على مفتاح Control (في Windows) أو انقر مع الضغط على مفتاح Option-Control (في Macintosh) في طريقة العرض Code، ثم حدد القائمة الفرعية Functions.
- في عارض Code، انقر فوق الزر Code Navigation ({ }) في شريط الأدوات.
حدد اسم وظيفة للانتقال إلى الوظيفة في التعليمة البرمجية.

Extract JavaScript

يزيل JavaScript Extractor (JSE)‎ جميع JavaScript أو معظمها من مستند Dreamweaver، ويصدرها إلى ملف خارجي، ويربط الملف الخارجي بالمستند. كما يمكن أن يزيل JSE أيضًا معالجات الأحداث مثل onclick وonmouseover من التعليمة البرمجية ثم يرفق JavaScript بشكل مخفي مع هذه المعالجات إلى المستند.

تعلم قيود JavaScript Extractor التالية قبل استخدامها:

لا يستخرج JSE علامات البرامج النصية الموجودة في متن المستند (إلا في حالة عناصر واجهة مستخدم Spry). وقد يؤدي جعل هذه البرامج النصية خارجية إلى الحصول على نتائج غير متوقعة. ويسرد Dreamweaver افتراضيًا هذه البرامج النصية في مربع الحوار Externalize JavaScript، لكنه لا يحددها للاستخراج. (ويمكنك تحديدها يدويًا إذا أردت.)
لا يستخرج JSE البرنامج النصي JavaScript من مناطق قابلة للتحرير بملفات ‎.dwt (قوالب Dreamweaver)، أو مناطق غير قابلة للتحرير بمثيلات القالب، أو عناصر Dreamweaver Library.
وبعد استخراج JavaScript باستخدام Externalize JavaScript والخيار Attach Unobtrusively، لن تتمكن من تحرير سلوكيات Dreamweaver في اللوحة Behaviors. لا يمكن لـ Dreamweaver فحص اللوحة Behaviors وملؤها بالسلوكيات المرفقة بشكل مخفي.
لا يمكنك التراجع عن التغييرات بعد إغلاق الصفحة. ولكن يمكنك التراجع عن التغييرات ما دمت في جلسة التحرير نفسها. حدد Edit > Undo Externalize JavaScript للتراجع.
قد لا تعمل بعض الصفحات المعقدة كما هو متوقع. كن حذرًا عند استخراج JavaScript من الصفحات التي تتضمن document.write() في المتن والمتغيرات العامة.

لمشاهدة فيديو نظرة عامة من الفريق الهندسي لـ Dreamweaver حول دعم JavaScript في Dreamweaver، راجع www.adobe.com/go/dw10javascript.

لاستخدام JavaScript Extractor:

فتح صفحة تحتوي على JavaScript.
انقر فوق Tools > Externalize JavaScript.
في مربع الحوار Externalize JavaScript، قم بتحرير التحديدات الافتراضية إذا لزم الأمر.
- حدد Only Externalize JavaScript إذا كنت تريد ألا ينقل Dreamweaver أي JavaScript إلى ملف خارجي، وللإشارة إلى هذا الملف في المستند الحالي. يترك هذا الخيار معالجات الأحداث مثل onclick وonload في المستند، ويترك السلوكيات مرئية في اللوحة Behaviors.
- حدد Externalize JavaScript وAttach Unobtrusively إذا أردت أن يقوم Dreamweaver: ‏1) بنقل JavaScript إلى ملف خارجي، والإشارة إليه في المستند الحالي، و2) بإزالة معالجات الأحداث من HTML وإدراجها في وقت التشغيل باستخدام JavaScript. عند تحديد هذا الخيار، لا يمكنك تحرير السلوكيات من اللوحة Behaviors.
- في العمود Edit، قم بإلغاء تحديد أي عمليات تحرير لا تريد إجراءها، أو حدد عمليات تحرير لم يحددها Dreamweaver افتراضيًا.
  ويسرد Dreamweaver عمليات التحرير التالية افتراضيًا ولكنه لا يحددها:
  
  مقاطع البرامج النصية في عنوان المستند الذي يحتوي على استدعاءات document.write() أو document.writeln().
  
  مقاطع البرامج النصية في عنوان المستند الذي يحتوي على توقيعات وظائف متعلقة بالتعليمة البرمجية لمعالجة EOLAS، المعروفة باستخدام document.write().
  
  مقاطع البرامج النصية في متن المستند، إلا إذا تضمنت المقاطع على عنصر واجهة مستخدم Spry أو منشئات مجموعات بيانات Spry.
- يعين Dreamweaver تلقائيًا معرّفات للعناصر التي لا تحتوي على معرّفات بالفعل. وإذا لم تعجبك هذه المعرّفات، فيمكنك تغييرها بتحرير مربعات نصوص المعرّفات.
انقر فوق OK.

يعرض مربع حوار الملخص ملخصًا لعمليات الاستخراج. راجع عمليات الاستخراج وانقر فوق OK.
احفظ الصفحة.

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

التحرير السريع

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

يمكنك الدخول إلى وضع Quick Edit من خلال:

انقر بزر الماوس الأيمن فوق جزء التعليمات البرمجية وحدد Quick Edit من قائمة السياق التي تظهر
اضغط Ctrl + E (on Windows) أو Cmd+E (on Mac)

استخدام وضع Quick Edit مع ملفات HTML

في ملف HTML ضع مؤشرك داخل فئة أو سمة معرف (اسم أو قيمة) أو في اسم علامة. يعرض Quick Edit لك جميع قواعد CSS وSCSS وLESS في مشروعك المطابق. يمكنك تحرير هذه القواعد مباشرة ضمنيًا، بدون الحاجة إلى ترك سياق ملف HTML.

عند مطابقة العديد من القواعد، تنقل بينها باستخدام القائمة على الجانب الأيمن (أو استخدم Alt-Up/Down).

لإنشاء قاعدة CSS مباشرة من برنامج التحرير الضمني، انقر فوق click New Rule أو اضغط Ctrl-Alt-N (في Windows) أو Cmd-Opt-N (في Mac).

استخدام وضع Quick Edit مع ملفات JavaScript

في ملف JavaScript استبدل المؤشر باسم وظيفة. يعرض لك Quick Edit نص الوظيفة (حتى إذا كانت موجودة في الملفات الأخرى المشار إليها بواسطة عبارة require()).

استخدام وضع Quick Edit مع ملفات CSS أو SCSS أو LESS

عندما تحضر Quick Edit مع وضع المؤشر داخل قيمة لون، يمكنك الوصول إلى منتقي الألوان وتعديل الألوان المستخدمة في تعليمات CSS البرمجية لديك بشكل سريع.

في ملف CSS أو LESS أو SCSS ضع المؤشر على دالة cubic-bezier() أو steps() transition timing وسيعرض Quick Edit برنامج تحرير منحنى انتقال رسومي.

تعتبر دوال التوقيت المحددة مسبقا ease وease-in وease-in-out وstep-start وstep-end نقاط البداية الصالحة.

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

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

من خلال إعادة بناء التعليمات البرمجية من خلال JavaScript، يمكنك تغيير اسم الوظائف وتعيين نطاق متغير كي يمكنك استدعاؤه من داخل مقطع تعليمات برمجية تم تعريفه فيها.

ملاحظة:

تتوفر التعليمات البرمجية لإعادة البناء الآن فقط في ملفات .js.

إعادة البناء من خلال JavaScript

يمكنك إعادة بناء التعليمات البرمجية لأنواع مستندات html وphp وjavascript. وعند النقر بزر الماوس الأيمن فوق التعليمات البرمجية في Dreamweaver، يظهر خيار Refactor في القائمة المنسدلة. تتكون إعادة البناء من الخيارات التالية:

Rename
Extract to Variable
Extract to Function
Wrap in Try Catch
Wrap in Condition
Convert to Arrow Function
Create Getters/Setters

لفهم وظائف كل خيار إعادة بناء، راجع الأقسام التالية:

Rename

يستخدم لتغيير جميع مرات تواجد اسم متغير أو اسم وظيفة في تعليمة برمجية بلغة JavaScript. وتحديد متغير من خلال النقر والسحب غير ضروري لإعادة البناء.

قم بإجراء الخطوات التالية لإعادة التسمية في JavaScript:

قم بالتمييز أو ضع مؤشر النص في التعليمات البرمجية التي تتطلب التغيير.
انقر بزر الماوس الأيمن فوق النص، ثم حدد Refactor > Rename. يمكنك أيضًا استخدام Ctrl + Alt + R في Windows OS، أو Command + option + R في اختصارات لوحة مفاتيح Mac OS لإعادة التسمية.
يظهر عرض متعدد المؤشرات على الشاشة، يتيح لك تغيير مرات توجد المتغير. تعمل تحسينات المؤشر المتعدد على تحديد مرة التواجد التالية للتحديد الحالي. أعد كتابة متغير اسم متغير أو وظيفة فريد ليحل محل الاسم الحالي.

قبل: Rename

بعد: Rename

Extract to variable

Use Extract to Variable لاستبدال تعبير بمتغير أو متغير محلي أو ثوابت في JavaScript من خلال تحديد تعبير والنقر بزر الماوس الأيمن فوقه. ثم حدد Refactor > Extract to Variable. يمكنك أيضًا استخدام Ctrl + Alt + V في Windows OS وCmd + Alt + V في macOS.

Extract to function

استخدام Extract to Function لاستبدال تعبير في استدعاءات وظيفة داخل معلمة. يمكن بدء القيمة الافتراضية للمعلمة الجديدة داخل بنية وظيفة أو تمريرها عبر استدعاءات الوظائف.

قم بإجراء الخطوات التالية باستخدام Extract to Function:

حدد أي تعبير أو مجموعة تعبيرات في JavaScript.

تحديد تعبير
انقر بزر الماوس الأيمن ثم حدد Refactor > Extract to Function. يمكنك أيضًا استخدام Ctrl + Alt + M في Windows OS أو Cmd + Alt + M في Mac OS.
حدد النطاق الوجهة لاستخراج الوظيفة من القائمة المنبثقة المعروضة على الشاشة.

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

خصائص Extract to function هي:
- تحدد المعلمات اللازمة للتمرير استنادًا إلى المحددات المتاحة في التحديد أو في النطاق الذي تم استخراجه.
- تحدد معلمات الإرجاع اللازمة للإرجاع من وظيفة استنادًا إلى المحددات التي تم تغيير قيمها في التحديد.
- كما تقوم أيضًا بإنشاء وظيفة باسم فريد.
تعرض لقطات الشاشة التالية الإخراج استنادًا إلى نطاق الوجهة ذي الصلة المحدد.
الدالة الإنشائية

الفئة

عمومي

Wrap in try catch

استخدم Wrap in Try Catch لاستثناء مقطع تعليمات برمجية يظهر كخطأ بعد إنشاء البرنامج. تقوم هذه الوظيفة بعمل التفاف لمقطع التعليمات البرمجية في مقطع التعليمات البرمجية Try أو Catch. يتم تمييز مقطع التعليمات البرمجية هذا كاستثناء أثناء تنفيذ البرنامج.

حدد التعليمات البرمجية أو ضع المؤشر عليها، ثم انقر بزر الماوس الأيمن وحدد Refactor > Wrap in Try Catch. إذا وضعت المؤشر في موضع ما، فسوف يبحث عن العبارات المحيطة، وإلا سوف يتحقق مما إذا كانت التعليمات البرمجية تتحقق من العبارات أم لا. إذا وجدت عبارات، فسيتم التفافها في التعليمات البرمجية في مقطع Try أو Catch.

قبل: Wrap in try catch — قبل: Wrap in Try Catch

بعد: Wrap in try catch — بعد: Wrap in Try Catch

Wrap in condition

استخدم Wrap in Condition لتعبير في تعليمة برمجية للإنشاء فقط لشرط معين.

حدد تعبيرًا في التعليمات البرمجية، أو حدد Refactor > Wrap in Condition.

قبل: Wrap in condition — قبل: Wrap in Condition

بعد: Wrap in condition — بعد: Wrap in Condition

Convert to arrow function

وظيفة arrow هي تعبير ليس لديه تعبيرات وظائف خاصة به مثل this أو arguments أو super أو new.target. وتعبيرات الوظائف هذه خاصة بالتعبيرات غير الخاصة بالأساليب، ولا يمكن استخدامها كدالة إنشائية.

ضع المؤشر فوق وظيفة، ثم حدد Refactor > Convert to Arrow Function.

قبل: Convert to arrow function — قبل: Convert to Arrow Function

بعد: Convert to arrow function — بعد: Convert to Arrow Function

ملاحظة:

إذا كانت العبارة المحددة بها معلمة واحدة، فستظهر بنية المعلمة في صورة param => ‏{statements}.
إذا كانت العبارة المحددة بها صفر أو أكثر من معلمة، مثل param ‏(param1, param2)، فستظهر بنية المعلمة في صورة param ‏(param1, param2) => {statements}.

Create getters/setters

في JavaScript، يمكن استخدام معيِّن لتنفيذ وظيفة تتطلب خاصية محددة فيها تغييرًا. غالبًا ما تستخدم المعيِّنات علاوة على المحصلات لإنشاء نوع خاصية زائفة. ولا يمكنك إنشاء معيِّن، لخاصية لها قيمة فعلية.

ضع المؤشر على عضو لتعبير كائن، وانقر بزر الماوس الأيمن، وحدد Refactor > Create Getters/Setters.

قبل: Create getters/setters — قبل: Create Getters/Setters

بعد: Create getters/setters — بعد: Create Getters/Setters

تلميحات استكشاف المشكلات وإصلاحها

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

اسم الوظيفة	رسالة الخطأ	تلميح استكشاف المشكلات وإصلاحها
Rename	لا يوجد تعبير في الموضع المحدد	ضع المؤشر على اسم متغير أو وظيفة أو قبله
Extract to Variable	التحديد لا يكوّن تعبيرًا	حدد تعبيرًا في التعليمات البرمجية قبل إعادة بناء التعليمات البرمجية.
Extract to Function	ينبغي أن يمثل المقطع المحدد مجموعة من العبارات أو تعبيرًا	تأكد من تحديد مقطع به مجموعة من العبارات أو تعبير.
Wrap in Try Catch	حدد تعليمة برمجية صالحة للالتفاف في مقطع Try-catch	تأكد من تحديد أي تعليمة برمجية قبل تطبيق خيار إعادة بناء Try catch.
Wrap in Condition	حدد تعليمة برمجية صالحة للالتفاف في مقطع Condition	تأكد من تحديد تعبير قبل تطبيق خيار إعادة بناء Wrap in Codition.
Convert to Arrow Function	ضع المؤشر داخل تعبير وظيفة	تأكد من وضع المؤشر داخل تعبير وظيفة قبل تطبيق خيار إعادة البناء.
Create Getters/Setters	ضع المؤشر على عضو لتعبير كائن	تأكد من وضع المؤشر على عضو لتعبير كائن قبل تطبيق خيار إعادة بناء المعيِّنات/المحصلات.

البحث عن النص واستبداله

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

يمكنك البحث في الأجزاء المميزة بالكامل أو يمكنك قصر البحث على النص المعروض في طريقة العرض Design فقط أو على التعليمات البرمجية فقط.

يمكنك استخدام خوارزميات مطابقة الأنماط القوية (التعبيرات العادية) لعمليات البحث والاستبدال المتقدمة.

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

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

معاينة الصور والألوان في طريقة العرض Code

بعد إدراج التعليمة البرمجية ذات الصلة للصور والألوان، يمكنك الآن معاينتها مباشرة من داخل طريقة عرض Code.

معاينة الصور

مرر الماوس فوق عنوان URL لأي صورة لمشاهدة معاينة الصورة في طريقة العرض Code. يمكنك معاينة الصور التي تم الإشارة إليها كأيّ من التالي:

url();
data-uri()
قيمة سمة Src لعلامة img

يعرض Dreamweaver معاينات الصور للصور المستضافة عن بُعد.

إذا لم يتمكن Dreamweaver من عرض المعاينة للمسارات البعيدة، يتم عرض الرسالة "Unable to load image".

يمكنك معاينة أنواع الصور التالية:

JPEG
JPG
PNG
GIF
SVG

معاينة الألوان

مرر الماوس فوق قيم الألوان لمعاينة الألوان في "طريقة العرض Code". التنسيقات المدعومة هي:

قيم ألوان سداسية مكونة من 3 أو 6 أرقام: #ff0000;
RGB: rgb(0, 0, 0);
RGBA: rgba(0, 255, 228,0.5);
HSL: hsl(120, 100%, 50%);
HSLA: hsla(120, 60%, 70%, 0.3);
أسماء الألوان المحددة مسبقًا: الزيتي والأزرق المخضر والأحمر.

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

انقر بزر الماوس الأيمن فوق قيمة وحدد Quick Edit لفتح منتقي الألوان وتحديد لون مختلف.

ملاحظة:

لتعطيل المعاينات للصور والألوان، قم بإلغاء تحديد الخيار View > Code View Options > Asset Preview.

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

يمكنك طباعة تعليمة برمجية لتحريرها في حالة عدم الاتصال أو أرشفتها أو توزيعها.

افتح صفحة في طريقة العرض Code.
حدد File > Print Code.
حدد خيارات الطباعة، ثم انقر فوق OK (في Windows) أو Print (في Macintosh).

Adobe

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

مستخدم جديد؟