- دليل مستخدم Dreamweaver
- مقدمة
- Dreamweaver وCreative Cloud
- مساحات عمل Dreamweaver وطرق عرضه
- إعداد المواقع
- حول مواقع Dreamweaver
- إعداد إصدار محلي من موقعك
- الاتصال بخادم نشر
- إعداد خادم اختبار
- استيراد إعدادات موقع Dreamweaver وتصديرها
- إحضار مواقع ويب موجودة من خادم بعيد إلى جذر موقع الويب المحلي
- ميزات الوصول في Dreamweaver
- الإعدادات المتقدمة
- تعيين تفضيلات الموقع لنقل الملفات
- تحديد إعدادات خادم الوكيل في Dreamweaver
- مزامنة إعدادات Dreamweaver مع Creative Cloud
- استخدام Git في Dreamweaver
- إدارة الملفات
- التخطيط والتصميم
- CSS
- فهم أوراق الأنماط المتتالية
- تخطيط الصفحات باستخدام CSS Designer
- استخدام معالجات CSS الأولية في Dreamweaver
- كيفية تعيين تفضيلات أنماط CSS في Dreamweaver
- نقل قواعد CSS في Dreamweaver
- تحويل CSS مضمنة إلى قاعدة CSS في Dreamweaver
- استخدام علامات div
- تطبيق تدرجات على الخلفية
- إنشاء تأثيرات CSS3 الانتقالية وتحريرها في Dreamweaver
- تنسيق التعليمات البرمجية
- محتويات الصفحة وأصولها
- تعيين خصائص الصفحة
- تعيين خصائص عناوين CSS وخصائص ارتباطات CSS
- استخدام النص
- البحث عن النص والعلامات والسمات واستبدالها
- لوحة DOM
- التحرير في Live View
- ترميز المستندات في Dreamweaver
- تحديد العناصر وعرضها في النافذة Document
- تعيين خصائص النص في عارض الخصائص
- إجراء التدقيق الإملائي لصفحة ويب
- استخدام القواعد الأفقية في Dreamweaver
- إضافة مجموعات الخطوط وتعديلها في Dreamweaver
- استخدام الأصول
- إدراج التواريخ وتحديثها في Dreamweaver
- إنشاء الأصول المفضلة وإدارتها في Dreamweaver
- إدراج الصور وتحريرها في Dreamweaver
- إضافة كائنات وسائط
- إضافة مقاطع الفيديو في Dreamweaver
- إدراج فيديو HTML5
- إدراج ملفات SWF
- إضافة تأثيرات صوتية
- إدراج صوت HTML5 في Dreamweaver
- العمل باستخدام عناصر المكتبة
- استخدام النصوص العربية والعبرية في Dreamweaver
- الربط والتنقل
- عناصر واجهة jQuery وتأثيراتها
- كتابة التعليمات البرمجية لمواقع الويب
- حول كتابة التعليمات البرمجية في Dreamweaver
- بيئة كتابة التعليمات البرمجية في Dreamweaver
- تعيين تفضيلات التعليمات البرمجية
- تخصيص ألوان التعليمات البرمجية
- كتابة تعليمة برمجية وتحريرها
- تلميحات التعليمات البرمجية وإكمال التعليمات البرمجية
- طي التعليمات البرمجية وتوسيعها
- إعادة استخدام التعليمات البرمجية مع أجزاء التعليمات البرمجية
- فحص التعليمات البرمجية
- تحسين التعليمة البرمجية
- تحرير التعليمة البرمجية في طريقة العرض Design
- العمل باستخدام محتوى العنوان للصفحات
- إدراج تضمينات على جانب الخادم في Dreamweaver
- استخدام مكتبات العلامات في Dreamweaver
- استيراد علامات مخصصة إلى Dreamweaver
- استخدام سلوكيات JavaScript (إرشادات عامة)
- تطبيق سلوكيات JavaScript المضمنة
- نبذة عن لغتي XML وXSLT
- تنفيذ تحويلات XSL على جانب الخادم في Dreamweaver
- تنفيذ تحويلات XSL على جانب العميل في Dreamweaver
- إضافة كيانات أحرف لـ XSLT في Dreamweaver
- تنسيق التعليمات البرمجية
- عمليات سير العمل على مستوى المنتجات
- تثبيت الملحقات واستخدامها في Dreamweaver
- التحديثات من داخل التطبيق في Dreamweaver
- إدراج مستندات Microsoft Office في Dreamweaver (Windows فقط)
- استخدام Fireworks وDreamweaver
- تحرير المحتوى في مواقع Dreamweaver باستخدام Contribute
- تكامل Dreamweaver مع تطبيق Business Catalyst
- إنشاء حملات إعلانية خاصة عبر البريد الإلكتروني
- القوالب
- حول قوالب Dreamweaver
- التعرف على القوالب والمستندات القائمة على القوالب
- إنشاء قالب Dreamweaver
- إنشاء مناطق قابلة للتحرير في القوالب
- إنشاء مناطق وجداول التكرار في Dreamweaver
- استخدام المناطق الاختيارية في القوالب
- تحديد سمات العلامات القابلة للتحرير في Dreamweaver
- كيفية إنشاء قوالب متداخلة في Dreamweaver
- تحرير القوالب وتحديثها وحذفها
- تصدير محتوى xml واستيراده في Dreamweaver
- تطبيق أو إزالة قالب من مستند موجود
- تحرير المحتوى في قوالب Dreamweaver
- قواعد بناء الجملة لعلامات القوالب في Dreamweaver
- تعيين تفضيلات التمييز لمناطق القالب
- فوائد استخدام القوالب في Dreamweaver
- شاشات الهاتف المحمول والشاشات المتعددة
- المواقع والصفحات ونماذج الويب الديناميكية
- فهم تطبيقات الويب
- إعداد الكمبيوتر لتطوير التطبيقات
- استكشاف أخطاء اتصالات قاعدة البيانات وحلها
- إزالة برامج الاتصال النصية في Dreamweaver
- تصميم صفحات ديناميكية
- نظرة عامة على مصادر المحتوى الديناميكي
- تعريف مصادر المحتوى الديناميكي
- إضافة محتوى ديناميكي إلى الصفحات
- تغيير المحتوى الديناميكي في Dreamweaver
- عرض سجلات قاعدة البيانات
- توفير البيانات المباشرة واستكشاف أخطائها وحلها في Dreamweaver
- إضافة سلوكيات خادم مخصصة في Dreamweaver
- إنشاء النماذج باستخدام Dreamweaver
- استخدام النماذج لجمع معلومات من المستخدمين
- إنشاء نماذج ColdFusion وتمكينها في Dreamweaver
- إنشاء نماذج الويب
- دعم HTML5 محسّن لعناصر النماذج
- تطوير نموذج باستخدام Dreamweaver
- إنشاء التطبيقات مرئيًا
- إنشاء صفحات رئيسية وصفحات تفاصيل في Dreamweaver
- إنشاء صفحات البحث والنتائج
- إنشاء صفحة إدراج سجل
- إنشاء صفحة تحديث سجل في Dreamweaver
- إنشاء صفحات حذف سجل في Dreamweaver
- استخدام أوامر ASP لتعديل قاعدة البيانات في Dreamweaver
- إنشاء صفحة تسجيل
- إنشاء صفحة تسجيل دخول
- إنشاء صفحة يمكن للمستخدمين المخولين فقط الوصول إليها
- تأمين المجلدات في Coldfusion باستخدام Dreamweaver
- استخدام مكونات ColdFusion في Dreamweaver
- اختبار مواقع الويب ومعاينتها ونشرها
- استكشاف الأخطاء وإصلاحها
استخدم هذا الموضوع لمعرفة كيفية استخدام عارض الخصائص لتحرير التعليمة البرمجية في طريقة عرض Design في Adobe Dreamweaver.
يتيح Dreamweaver لك إنشاء صفحات الويب وتحريرها بشكل مرئي دون الاهتمام بالتعليمة البرمجية المصدر المضمنة، ولكن قد تحتاج في بعض الأحيان إلى تحرير التعليمة البرمجية لمزيد من التحكم أو لحل مشكلات صفحة الويب. يتيح Dreamweaver لك تحرير بعض التعليمات البرمجية أثناء العمل في طريقة عرض Design.
تم إعداد هذا القسم لمن يفضلون العمل في طريقة العرض Design، ولكنهم يريدون الوصول السريع إلى التعليمة البرمجية.
تحديد العلامات الفرعية في طريقة عرض Design
إذا حددت كائنًا في طريقة العرض Design يحتوي على علامات ثانوية - كجدول HTML مثلاً - فيمكنك تحديد العلامة الثانوية الأولى من ذلك الكائن بسرعة بتحديد Edit > Select Child.
لا يتم تمكين هذا الأمر إلا في طريقة العرض Design.
على سبيل المثال، تحتوي علامة <table> عادةً على علامات <tr> تابعة. إذا حددت علامة <table> في محدد العلامات، فيمكنك تحديد الصف الأول في الجدول بتحديد Edit > Select Child. يحدد Dreamweaver علامة <tr> الأولى في محدد العلامات. ولأن علامة <tr> نفسها تحتوي على علامات ثانوية، وهي علامات <td>، فستؤدي إعادة تحديد Edit > Select Child إلى تحديد الخلية الأولى في الجدول.
تحرير تعليمة برمجية باستخدام عارض الخصائص
يمكنك استخدام عارض الخصائص لفحص سمات النص أو سمات الكائنات الموجودة بالصفحة وتحريرها. تناظر الخصائص التي يتم عرضها في عارض الخصائص سمات العلامات بشكل عام؛ حيث يؤدي تغيير خاصية ما في عارض الخصائص إلى إحداث الأثر نفسه بشكل عام الذي يسببه تغيير السمة المقابلة في طريقة العرض Code.
ويتيح لك Tag inspector وعارض الخصائص عرض سمات العلامة وتحريرها. يتيح لك Tag inspector عرض كل سمة مرتبطة بعلامة معينة وتحريرها. بينما لا يعرض عارض الخصائص إلا السمات الأكثر شيوعًا، ولكنه يوفر مجموعة أكثر ثراءً من عناصر التحكم لتغيير قيم تلك السمات، ويتيح لك تحرير كائنات معينة (كأعمدة الجداول) لا تقابل علامات معينة.
-
انقر في النص أو حدد كائنًا في الصفحة.
يظهر عارض الخصائص للنص أو الكائن أسفل النافذة Document. إذا لم يكن عارض الخصائص مرئيًا، فحدد Window > Properties.
-
قم بإجراء التغييرات على السمات في عارض الخصائص.
تحرير CFML باستخدام عارض الخصائص
استخدم عارض الخصائص لفحص تمييز ColdFusion وتعديله في طريقة العرض Design.
-
في عارض الخصائص، انقر فوق الزر Attributes لتحرير سمات العلامات أو إضافة سمات جديدة.
-
وإذا كان بين العلامات محتوى محاط بعلامات فتح وإغلاق، فانقر فوق الزر Content لتحرير المحتوى.
لا يظهر الزر Content إلا إذا لم تكن العلامة المحددة علامة فارغة (أي، إذا كانت تحتوي على علامة الفتح والإغلاق).
-
وإذا كانت العلامة تحتوي على تعبير شرطي، فقم بإجراء التغييرات عليها في المربع Expression.
نظرة عامة على Quick Tag Editor
يمكنك استخدام Quick Tag Editor لفحص علامات HTML وإدراجها وتحريرها بسرعة، دون الخروج من طريقة العرض Design.
إذا قمت بكتابة HTML غير صخيخ في Quick Tag Editor، فسيقوم Dreamweaver بمحاولات لتصحيح ذلك لك من خلال إدراج علامات اقتباس الإغلاق وإغلاق أقواس الزاوية عند الحاجة.
لتعيين خيارات Quick Tag Editor، افتح Quick Tag Editor بالضغط على 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
-
في طريقة العرض Design، انقر في الصفحة لوضع نقطة الإدخال في المكان الذي تريد إدراج تعليمة برمجية به.
-
اضغط على Control+T (في Windows) أو Command+T (في Macintosh).
يفتح Quick Tag Editor في الوضع Insert HTML.
-
أدخل علامة HTML، واضغط على Enter.
يتم إدراج العلامة في التعليمة البرمجية، مع علامة إغلاق مطابقة، إن أمكن.
-
اضغط على Escape للخروج دون إجراء أي تغييرات.
تحرير علامة HTML
-
حدد كائنًا في طريقة العرض Design.
يمكنك أيضًا تحديد العلامة التي تريد تحريرها من محدد العلامات بأسفل النافذة Document. لمزيد من المعلومات، راجع تحرير تعليمة برمجية باستخدام محدد العلامات.
-
اضغط على Control+T (في Windows) أو Command+T (في Macintosh).
يفتح Quick Tag Editor في الوضع Edit Tag.
-
أدخل سمات جديدة، أو حرر سمات موجودة، أو حرر اسم العلامة.
-
اضغط على Tab للانتقال من سمة إلى التي تليها، أو اضغط على Shift+Tab للعودة إلى السمة السابقة.ملاحظة:
وافتراضيًا، لا تنطبق التغييرات على المستند إلا عند الضغط على Tab أو Shift+Tab.
-
لإغلاق Quick Tag Editor وتطبيق جميع التغييرات، اضغط على Enter.
-
وللخروج دون إجراء أي تغييرات أخرى، اضغط على Escape.
التفاف التحديد الحالي باستخدام علامات HTML
-
حدد نصًا غير منسق أو كائنًا في طريقة العرض Design.ملاحظة:
إذا حددت نصًا أو كائنًا يتضمن علامة HTML للفتح أو الإغلاق، يفتح Quick Tag Editor في الوضع Edit Tag بدلاً من الوضع Wrap Tag.
-
اضغط على Control+T (في Windows) أو Command+T (في Macintosh)، أو انقر فوق الزر Quick Tag Editor في عارض الخصائص.
يفتح Quick Tag Editor في الوضع Wrap Tag.
-
أدخل علامة فتح واحدة، مثل strong، واضغط على Enter (في Windows) أو الزر Return (في Macintosh).
يتم إدراج العلامة في بداية التحديد الحالي، وعلامة إغلاق مطابقة في نهايته.
-
للخروج دون إجراء أي تغييرات، اضغط على Escape.
استخدام قائمة التلميحات في Quick Tag Editor
يتضمن Quick Tag Editor قائمة تلميحات للسمات تضم جميع السمات الصالحة للعلامة التي تحررها أو تدرجها.
يمكنك أيضًا تعطيل قائمة التلميحات، أو ضبط وقت التأخير قبل ظهور القائمة المنبثقة في Quick Tag Editor.
لعرض قائمة تلميحات تضم السمات الصالحة لإحدى العلامات، توقف مؤقتًا لفترة قصيرة عن تحرير اسم السمة في Quick Tag Editor. تظهر قائمة تلميحات، تسرد جميع السمات الصالحة للعلامة التي تقوم بتحريرها.
وبالمثل، لعرض قائمة تلميحات تسرد أسماء علامات صالحة، توقف مؤقتًا لفترة قصيرة أثناء إدخال اسم علامة أو تحريرها في Quick Tag Editor.
يتم التحكم في تفضيلات تلميحات التعليمات البرمجية لـ Quick Tag Editor بواسطة تفضيلات تلميحات التعليمات البرمجية العادية. لمزيد من المعلومات، راجع تعيين تفضيلات تلميحات التعليمات البرمجية.
-
قم بأحد الإجراءات التالية:
ابدأ بكتابة اسم علامة أو سمة. ينتقل التحديد في القائمة 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 من القائمة. قم بإجراء التغييرات المطلوبة في Quick Tag Editor. لمزيد من المعلومات، راجع تحرير تعليمة برمجية باستخدام Quick Tag Editor.
-
لحذف علامة، حدد Remove Tag من القائمة.
تحديد كائن مقابل لعلامة
-
انقر في المستند.
تظهر العلامات التي يتم تطبيقها عند نقطة الإدخال في محدد العلامات.
-
انقر فوق علامة في محدد العلامات.
يتم تحديد الكائن الذي تمثله العلامة في الصفحة.
ملاحظة:استخدم هذا الأسلوب لتحديد صفوف (علامات tr) أو خلايا (علامات td) مفردة في جدول.
كتابة برامج نصية وتحريرها في طريقة العرض Design
يمكنك العمل باستخدام JavaScripts وVBScripts من جانب الخادم في كلا طريقتي العرض Code وDesign، بالطرق التالية:
كتابة برنامج نصي بلغة JavaScript أو VBScript لصفحتك دون الخروج من طريقة العرض Design.
إنشاء ارتباط في المستند إلى ملف برنامج نصي خارجي دون الخروج من طريقة العرض Design.
تحرير برنامج نصي دون الخروج من طريقة العرض Design.
قبل البدء، حدد View > Visual Aids > Invisible Elements للتأكد من ظهور علامات البرامج النصية في الصفحة.
كتابة برنامج نصي من جانب العميل
-
ضع نقطة الإدخال في المكان الذي تريد وضع البرنامج النصي فيه.
-
حدد Insert > HTML > Script.
-
حدد البرنامج النصي في نافذة تحديد الملف.
ملاحظة:ولا داعي لتضمين علامات فتح وإغلاق script.
تم إدراج علامة البرنامج النصي للملف المحدد في المستند.
تحرير برنامج نصي
-
حدد علامة البرنامج النصي.
-
في عارض الخصائص، انقر فوق الزر Edit.
يظهر البرنامج النصي في مربع الحوار Script Properties.
إذا قمت بالربط بملف برنامج نصي خارجي، يتم فتح الملف في طريقة العرض Code، حيث يمكنك إجراء التغييرات من خلالها.
ملاحظة:في حالة وجود تعليمة برمجية بين علامات البرامج النصية، يتم فتح مربع الحوار Script Properties حتى في حالة وجود ارتباط إلى ملف برنامج نصي خارجي أيضًا.
-
في المربع Language، حدد إما JavaScript أو VBScript كلغة للبرنامج النصي.
-
من القائمة المنبثقة Type، حدد نوع البرنامج النصي، إما من جانب العميل أو الخادم.
-
(اختياري) في المربع Source، حدد ملف برنامج نصي مرتبط خارجيًا.
انقر فوق أيقونة المجلد أو الزر Browse لتحديد ملف، أو اكتب المسار.
-
قم بتحرير البرنامج النصي، وانقر فوق OK.
تحرير برامج ASP نصية من جانب الخادم في طريقة العرض Design
استخدم عارض الخصائص لبرنامج ASP النصي لفحص برامج ASP النصية من جانب الخادم وتعديلها في طريقة العرض Design.
-
من طريقة العرض Design، حدد الرمز المضيء لعلامة لغة الخادم.
-
في عارض الخصائص لبرنامج ASP النصي، انقر فوق الزر Edit.
-
قم بتحرير برنامج ASP النصي من جانب الخادم، وانقر فوق OK.
تحرير برامج نصية في الصفحة باستخدام عارض الخصائص
-
في عارض الخصائص، حدد لغة البرمجة النصية من القائمة المنبثقة Language، أو اكتب اسم لغة في المربع Language.ملاحظة:
إذا كنت تستخدم JavaScript ولست متأكدًا من الإصدار، فحدد JavaScript وليس JavaScript1.1 أو JavaScript1.2.
-
من القائمة المنبثقة Type، حدد نوع البرنامج النصي، إما من جانب العميل أو الخادم.
-
(اختياري) في المربع Source، حدد ملف برنامج نصي مرتبط خارجيًا. انقر فوق أيقونة المجلد لتحديد الملف، أو اكتب المسار.
-
انقر فوق Edit لتعديل البرنامج النصي.
استخدام سلوكيات JavaScript
يمكنك بسهولة إرفاق سلوكيات JavaScript (من جانب العميل) بعناصر الصفحة باستخدام علامة التبويب Behaviors في Tag inspector. لمزيد من المعلومات راجع تطبيق سلوكيات JavaScript المضمنة في Dreamweaver.