ضع نقطة الإدخال في التعليمة البرمجية.
تاريخ آخر تحديث
27 أبريل 2021
تعرف على كيفية العمل في طريقة عرض التعليمات البرمجية واحصل على الأفضل من ميزات كتابة التعليمات البرمجية لـ Dreamweaver.
هناك طرق متعددة يمكنك من خلالها العمل مع الكود في Dreamweaver.
افتح ملف تعليمات برمجية جديد باستخدام مربع حوار المستند الجديد وابدأ بكتابة التعليمات البرمجية.
أثناء الكتابة، تظهر تعليمات التلميحات البرمجية للمساعدة في تحديد التعليمات البرمجية وتجنب الأخطاء الإملائية. احصل على المساعدة مع CSS عند الحاجة إليها باستخدام المستندات السريعة المفيدة في Dreamweaver.
يمكنك أيضاً إدراج الكود باستخدام لوحة الإدراج أو استخدام اختصارات الترميز مثل اختصارات Emmet.
إذا وجدت نفسك تقوم بنسخ ولصق قطعة الكود نفسها عدة مرات، فجرّب هذه الميزات الموفرة للوقت:
- لوحة المقاطع لا غنى عنها لإنشاء وإدراج مقاطع الكود المُنسقة مسبقاً في كودك بسرعة.
- المؤشرات المتعددة تتيح لك إنشاء وتعديل عدة أسطر من الكود جميعها دفعة واحدة.
يوفر Dreamweaver أيضاً مجموعة قوية من أدوات التحرير التي تجعل التنقل عبر كودك وإجراء تغييرات عليه عملية سلسة.
- استخدم ميزة البحث والاستبدال في Dreamweaver للبحث عن العلامات أو الخصائص أو النص في الكود.
- استخدم Code Navigator للتنقل في التعليمات البرمجية المرتبطة داخل الملف الحالي وخارجه على حدٍ سواء. الأفضل من ذلك، استخدم ميزة التحرير السريع لتحرير الكود في الملفات ذات الصلة دون حتى فتح الملف في علامة تبويب جديدة.
- انقر بزر الماوس الأيمن على الكود لإظهار قائمة السياق البسيطة والمناسبة التي تتيح لك تحرير الكود مباشرة.
- استخدم علامة التغليف لتغليف النص في العلامات.
تابع القراءة للحصول على مزيد من المعلومات حول جميع ميزات الكود هذه.
إدراج تعليمة برمجية باستخدام اللوحة 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، أو داخل وسم style في صفحة HTML.
ها هي بعض الأمثلة التي توضح طريقة استخدام اختصارات Emmet في طريقة العرض Code. للحصول على معلومات مفصلة ومرجع، راجع وثائق Emmet.
ملاحظة
يدعم Dreamweaver حالياً اختصارات Emmet 1.2.2.
المثال 1: إدراج كود HTML باستخدام Emmet
لإضافة كود HTML بسرعة لقائمة غير مرتبة مع ثلاثة عناصر، افتح ملف HTML واكتب اختصار Emmet التالي في طريقة عرض الكود داخل <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، ولا يتم عرضه في المستعرض.
إضافة تعليقات إلى تعليمتك البرمجية
لإضافة التعليقات، اكتب نص التعليق أولاً. يمكنك بعد ذلك وضع المؤشر في نقطة الإدراج والنقر على أيقونة الإدراج من شريط الأدوات لفتح القائمة الفرعية لتطبيق التعليق.
يمكنك أيضًا تحديد النص وجعله تعليقًا. يُوضَع النص المحدد داخل كتلة تعليق
يمكنك إضافة التعليقات باستخدام العديد من خيارات بناء الجملة. حدد بناء الجملة المناسب، ويقوم 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 عملية linting (تحليل الرمز للأخطاء المحتملة) لـ 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 تعليمات برمجية خاصة بالسياق والأدوات الضمنية التي تتيح لك الحصول على قسم التعليمات البرمجية التي تحتاجها بشكل سريع. لمزيد من المعلومات، راجع Quick edit.
Cut, copy, paste
انقر هذه الخيارات لقص النص ونسخه ولصقه بسرعة دون الحاجة إلى الوصول إلى قائمة التحرير.
Find and replace, Find next, Find previous
انقر هذه الخيارات للبحث عن النص واستبداله بسرعة دون الحاجة إلى الوصول إلى قائمة "البحث".
Create new snippet
استخدم هذا الخيار لإنشاء أجزاء التعليمات البرمجية التي يمكنك حفظها لإعادة استخدامها فيما بعد. حدد التعليمة البرمجية، وانقر فوق Create new snippet لعمل جزء التعليمة البرمجية المحدد. لمزيد من المعلومات، راجع استخدام أجزاء التعليمات البرمجية.
Open related file
انقر بزر الماوس الأيمن فوق رابط/علامة نص برمجي وانقر على فتح الملف ذي الصلة لفتح الملف.
Attach Style Sheet
إرفاق ورقة أنماط CSS موجودة بصفحتك.
Selection
تتضمن القائمة الفرعية Selection خيارات تعديل رمز متنوعة يمكنك استخدامها على جزء محدد من الرمز، مثل تبديل تعليقات الأسطر والكتل، وتوسيع التحديد وطيه، وتحويل CSS المضمن إلى قواعد، ونقل قواعد CSS، وطباعة الرمز.
متصفح التعليمات البرمجية
انقر فوق هذا الخيار للانتقال إلى مصادر التعليمات البرمجية ذات الصلة، كقواعد CSS الداخلية والخارجية، ويتضمن جانب الخادم: ملفات JavaScript الخارجية وملفات قوالب الأصل وملفات المكتبة وملفات مصدر iframe. لمزيد من المعلومات، راجع الانتقال إلى التعليمة البرمجية ذات الصلة.
Code Hint Tools
توفر القائمة الفرعية "أدوات تلميح بشأن الرمز" أداة اختيار الألوان ومتصفح URL وقائمة الخطوط في متناول يديك.
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 الملف ويعرض القاعدة في منطقة الملفات ذات الصلة فوق المستند الرئيسي.
يمكنك الوصول إلى مستكشف الكود من طرق العرض التصميم والكود والمقسم، وكذلك من مفتش الكود.
للحصول على نظرة عامة بالفيديو من فريق هندسة Dreamweaver حول العمل مع Code Navigator، راجع www.adobe.com/go/dw10codenav.
للحصول على درس فيديو حول العمل مع Live View والملفات ذات الصلة و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 view وCode inspector، يمكنك عرض قائمة بجميع وظائف JavaScript أو VBScript في الكود الخاص بك والانتقال إلى أي منها.
اعرض المستند في عرض الكود (View > Code) أو في فاحص الكود (Window > Code Inspector).
قم بأحد الإجراءات التالية:
في طريقة العرض Code، انقر بزر الماوس الأيمن (في Windows) أو انقر مع الضغط على مفتاح Control (في Macintosh) في أي مكان في طريقة العرض Code، وحدد القائمة الفرعية Functions من قائمة السياق.
ملاحظة
لا تظهر القائمة الفرعية Functions في طريقة العرض Design.
تظهر أي وظائف JavaScript أو VBScript في التعليمة البرمجية في القائمة الفرعية.
ملاحظة
لإظهار الوظائف مسرودة بترتيب أبجدي، انقر بزر الماوس الأيمن مع الضغط على مفتاح Control (في Windows) أو انقر مع الضغط على مفتاح Option-Control (في Macintosh) في طريقة العرض Code، ثم حدد القائمة الفرعية Functions.
- في Code inspector، انقر على زر 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.
انقر فوق الأدوات > استخراج JavaScript.
في مربع الحوار إخراج JavaScript، عدّل التحديدات الافتراضية إذا لزم الأمر.
حدد إخراج JavaScript فقط إذا كنت تريد من Dreamweaver نقل أي JavaScript إلى ملف خارجي، والإشارة إلى ذلك الملف في المستند الحالي.يترك هذا الخيار معالجات الأحداث مثل onclick وonload في المستند، ويترك السلوكيات مرئية في لوحة السلوكيات.
حدد إخراج JavaScript وإرفاق بحذر إذا كنت تريد من Dreamweaver 1) نقل JavaScript إلى ملف خارجي والإشارة إليه في المستند الحالي، و2) إزالة معالجات الأحداث من HTML وإدراجها في وقت التشغيل باستخدام JavaScript.عند تحديد هذا الخيار، لن تعود قادرًا على تعديل السلوكيات في لوحة السلوكيات.
في عمود التعديل، ألغِ تحديد أي تعديلات لا تريد إجراءها، أو حدد التعديلات التي لم يحددها 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 الكود والأدوات الخاصة بالسياق بشكل مضمن مما يسمح لك بالوصول بسرعة إلى قسم الكود الذي تحتاجه.
يمكنك دخول وضع التعديل السريع عن طريق:
- النقر بزر الماوس الأيمن فوق مقطع كود وتحديد التعديل السريع من القائمة السياقية التي تظهر
- اضغط Ctrl + E (على Windows) أو Cmd+E (على Mac)
استخدام وضع Quick Edit مع ملفات HTML
في ملف HTML ضع مؤشرك داخل فئة أو سمة معرف (اسم أو قيمة) أو في اسم علامة. يعرض Quick Edit لك جميع قواعد CSS وSCSS وLESS في مشروعك المطابق. يمكنك تعديل هذه القواعد مباشرة بشكل مضمن، دون مغادرة سياق ملف HTML أبداً.
عندما تتطابق قواعد متعددة، تنقل بينها باستخدام القائمة على الجانب الأيمن (أو استخدم Alt-Up/Down).
لإنشاء قاعدة CSS مباشرة من المحرر المضمن، انقر فوق "New Rule" أو اضغط Ctrl-Alt-N (على Windows) أو Cmd-Opt-N (على Mac).
استخدام وضع Quick Edit مع ملفات JavaScript
في ملف JavaScript استبدل المؤشر باسم وظيفة. يُظهر لك التعديل السريع جسم الدالة (حتى لو كان موجودًا في ملفات أخرى يتم الرجوع إليها بواسطة عبارة require()).
استخدام وضع التعديل السريع مع ملفات CSS أو SCSS أو LESS
عندما تستدعي التعديل السريع مع وضع المؤشر داخل قيمة لون، يمكنك الوصول إلى أداة اختيار الألوان وتعديل الألوان المستخدمة في كود CSS بسرعة.
في ملف CSS أو LESS أو SCSS، ضع المؤشر على دالة توقيت الانتقال cubic-bezier() أو steps() وسيعرض Quick Edit محرر منحنى الانتقال الرسومي.
دوال التوقيت المحددة مسبقاً ease وease-in وease-out و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، أو Command + option + R على macOS لإعادة التسمية.
يظهر عرض متعدد المؤشرات على الشاشة، يتيح لك تغيير مرات توجد المتغير. تعمل تحسينات المؤشر المتعدد على تحديد مرة التواجد التالية للتحديد الحالي. Retype اسم متغير أو دالة فريد لاستبدال الاسم الحالي.
Extract to variable
Use Extract to Variable لاستبدال تعبير بمتغير أو متغير محلي أو ثوابت في JavaScript من خلال تحديد تعبير والنقر بزر الماوس الأيمن فوقه. ثم حدد Refactor > Extract to Variable. يمكنك أيضاً استخدام Ctrl + Alt + V على نظام التشغيل Windows وCmd + Alt + V على macOS.
Extract to function
استخدام Extract to Function لاستبدال تعبير في استدعاءات وظيفة داخل معلمة. يمكن تهيئة القيمة الافتراضية للمعامل الجديد داخل نص الدالة أو تمريرها من خلال استدعاءات الدالة.
قم بتنفيذ الخطوات التالية لإعادة الهيكلة باستخدام Extract to Function:
حدد أي تعبير أو مجموعة من التعبيرات في JavaScript.
انقر بزر الماوس الأيمن، وحدد Refactor > Extract to Function. يمكنك أيضاً استخدام Ctrl + Alt + M على نظام التشغيل Windows أو 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 condition
استخدم Wrap in Condition لتعبير في كود للتحويل البرمجي فقط لحالة محددة.
حدد تعبيرًا في الكود، وانقر بزر الماوس الأيمن، وحدد Refactor > Wrap in Condition.
Convert to arrow function
دالة السهم هي تعبير لا يحتوي على تعابير الدالة الخاصة به مثل this, arguments, super, or new.target. تعابير الدالة هذه مخصصة للتعابير غير المرتبطة بالأساليب، ولا يمكن استخدامها كمنشئ.
ضع المؤشر في دالة، وانقر بزر الماوس الأيمن، وحدد Refactor > Convert to Arrow Function.
ملاحظة
- إذا كانت العبارة المحددة تحتوي على معامل واحد، فإن هيكل المعامل يظهر كما يلي param => {statements}.
- إذا كانت العبارة المحددة تحتوي على صفر أو أكثر من معامل واحد مثل param (param1, param2) فإن هيكل المعامل يظهر كما يلي param (param1, param2) => {statements}.
Create getters/setters
في JavaScript، يمكن استخدام معيِّن لتنفيذ وظيفة تتطلب خاصية محددة فيها تغييرًا. غالبًا ما تستخدم المعيِّنات علاوة على المحصلات لإنشاء نوع خاصية زائفة. لا يمكنك إنشاء أداة تعيين لخاصية لها قيمة فعلية.
ضع المؤشر على عضو من تعبير كائن، وانقر بزر الماوس الأيمن، وحدد Refactor > 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 فقط أو على التعليمات البرمجية فقط.
يمكنك استخدام خوارزميات مطابقة أنماط قوية (تعبيرات عادية) لعمليات البحث والاستبدال المتقدمة.
بمجرد العثور على النص، يمكنك حينئذ اختيار استبداله بالنص أو التعليمة البرمجية أو المسافة الفاصلة المحددة.
لمزيد من المعلومات، راجع البحث عن نص واستبداله.
معاينة الصور والألوان في عرض الكود
بعد إدراج الكود ذي الصلة للصور والألوان، يمكنك معاينتها مباشرة داخل عرض الكود.
معاينة الصورة
مرر الماوس فوق عنوان URL لأي صورة لمشاهدة معاينة الصورة في طريقة العرض Code. يمكنك معاينة الصور المشار إليها كأي مما يلي:
- url();
- data-uri()
- قيمة سمة Src لعلامة img
يعرض Dreamweaver معاينات الصور للصور المستضافة عن بُعد.
إذا تعذر على Dreamweaver عرض معاينة المسارات البعيدة، فسيعرض رسالة "تعذر تحميل الصورة".
يمكنك معاينة أنواع الصور التالية:
- 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);
- أسماء الألوان المحددة مسبقاً، مثل، Olive، Teal، red.
معاينة الألوان متاحة في جميع أنواع المستندات للتنسيقات المذكورة أعلاه.
انقر بزر الماوس الأيمن على قيمة وحدد التحرير السريع لفتح أداة اختيار الألوان وتحديد لون مختلف.
ملاحظة
لتعطيل معاينات الصور والألوان، ألغِ تحديد الخيار عرض > خيارات عرض الرمز > معاينة الأصول.
طباعة تعليمة برمجية
يمكنك طباعة رمزك لتحريره دون اتصال، أو أرشفته، أو توزيعه.
افتح صفحة في طريقة العرض Code.
حدد File > Print Code.
حدد خيارات الطباعة، ثم انقر على موافق (Windows)
أو طباعة (Macintosh).
قم بإنشاء مواقع ويب جميلة في Dreamweaver
قم بتصميم مواقع الويب الديناميكية وبرمجتها وإدارتها في أداة قوية متكاملة.
