- دليل مستخدم 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
- اختبار مواقع الويب ومعاينتها ونشرها
- استكشاف الأخطاء وإصلاحها
استخدم الوسائل المساعدة المرئية للتخطيط في Dreamweaver، بما في ذلك مسطرات الضبط وأدلة تخطيط الضبط، واستخدام الأدلة مع القوالب واستخدام شبكة تخطيطات، واستخدام صورة متابعة.
تعيين المساطر
تساعدك المساطر على قياس وتنظيم ووضع خطط لتخطيطك. يمكن أن تظهر على الحدود اليسرى والعلوية من الصفحة، مميزة بوحدات البكسل والبوصات والسنتيمترات.
- لتبديل تشغيل المساطر وإيقافها، حدد View > Design View Options > Rules > Show/Hide.
- لتغيير الأصل، اسحب أيقونة أصل المسطرة (في الركن العلوي الأيسر من طريقة العرض Design بالنافذة Document) في أي مكان من الصفحة.
- لإعادة تعيين الأصل إلى موقعه الافتراضي، حدد View > Design View Options >Rulers > Reset Origin.
- لتغيير وحدة القياس، حدد View > Rulers، ثم حدد Pixels أو Inches أو Centimeters.
قم بتعيين أدلة التخطيط
تعد الأدلة أسطر تسحبها إلى المستند من المساطر. فهي تساعدك على وضع ومحاذاة الكائنات بشكل أكثر دقة. يمكنك أيضًا قياس حجم عناصر الصفحة أو محاكاة الطيات (المناطق المرئية) من مستعرضات الويب.
للمساعدة في محاذاة العناصر، يمكنك محاذاة العناصر بالأدلة، أو محاذاة الأدلة بالعناصر. (يجب أن توضع العناصر بصورة تامة بالترتيب لسمة المحاذاة لكي تعمل). يمكنك أيضًا قفل الأدلة لمنع نقلها بصورة عرضية بواسطة مستخدم آخر.
قم بإنشاء دليل أفقي أو رأسي
-
اسحب من المسطرة المطابقة.
-
ضع الدليل في النافذة Document، وحرر زر الماوس (إعادة وضع الدليل بسحبه مرة أخرى).ملاحظة:
افتراضيًا، يتم تسجيل الأدلة باعتبارها مقاييس بالبكسل من الجانب العلوي أو السفلي للمستند، ويتم عرضها نسبيًا لأصل المسطرة. لتسجيل الدليل كنسبة مئوية، اضغط المفتاح Shift أثناء إنشاء أو نقل الدليل.
إظهار أو إخفاء الأدلة
-
حدد View > Guides > Show Guides.
محاذاة العناصر إلى الأدلة
- لمحاذاة الأدلة إلى العناصر، حدد View > Design View Options > Guides > Snap to Guides.
- لمحاذاة الأدلة إلى العناصر، حدد View > Design View Options > Guides > Guides Snap to Elements.
عند تغيير حجم العناصر، مثل العناصر ذات التعيين المطلق للموضع (عناصر AP) والجداول والصور يتم محاذاة العناصر التي تم تغيير حجمها إلى الأدلة.
تأمين أو قفل كل الأدلة
حدد View > Design View Options > Guides > Lock Guides.
عرض ونقل دليل إلى موضع محدد
-
ضع مؤشر الماوس فوق الدليل لعرض موضعه.
-
انقر نقرًا مزدوجًا فوق الدليل.
-
أدخل الموضع الجديد في مربع الحوار Move Guide، ثم انقر فوق OK.
عرض المسافة بين الأدلة
تعد وحدة القياس هي نفس وحدة القياس المستخدمة للمساطر.
محاكاة الطية (المنطقة المرئية) من مستعرض الويب
حدد View > Design View Options > Guides، ثم حدد حجم مستعرض معد مسبقًا من القائمة.
أزل دليلاً
تغيير إعدادات الدليل
-
حدد View > Design View Options > Guides > Edit Guides، ثم قم بتعيين الخيارات التالية، ثم انقر فوق OK.
Guide color
يحدد لون سطور الدليل. انقر فوق حامل اللون، ثم حدد لونًا من منتقي الألوان أو اكتب رقم سداسي عشري في مربع النص.
Distance Color
يحدد لون السطور التي تظهر كمؤشر مسافة عندما تضع مؤشر الماوس بين الأدلة. انقر فوق حامل اللون، ثم حدد لونًا من منتقي الألوان أو اكتب رقم سداسي عشري في مربع النص.
Show Guides
تجعل الأدلة ظاهرة في طريقة العرض Design.
Snap to Guides
تحاذي عناصر الصفحة بالأدلة عندما تحرك العناصر حول الصفحة.
Lock Guides
قفل الأدلة في مكانها.
Guides Snap to Elements
يحاذي الأدلة إلى العناصر على الصفحة حينما تقوم بسحب الأدلة.
Clear All
مسح كل الأدلة من الصفحة.
استخدام الأدلة مع القوالب
عندما تتم إضافة أدلة إلى قالب Dreamweaver، كل مثيلات القالب ترث الأدلة. ومع ذلك، تتم معاملة الأدلة في مثيلات القالب باعتبارها مناطق قابلة للتحرير، وبالتالي يمكنك تعديلها. تتم استعادة الأدلة المعدّلة في مثيلات القالب إلى موقعها الأصلي حينما يتم تحديث المثيل بالقالب الأصلي.
يمكنك إضافة أدلتك الخاصة إلى مثيلات القالب. ولا تتم الكتابة فوق الأدلة التي تتم إضافتها بهذه الطريقة عندما يتم تحديث مثيل القالب بالقالب الأصلي.
استخدام شبكة التخطيط
وتعرض هذه الشبكة نظامًا من الأسطر الأفقية والعمودية في النافذة Document. وهو مفيد لوضع الكائنات بدقة. يمكنك جعل عناصر الصفحة ذات التعيين المطلق للمواضع تحاذي الشبكة حينما تحركها، وأن تغير الشبكة أو تتحكم في سلوك المحاذاة بتحديد إعدادات الشبكة. تعمل المحاذاة سواءً كانت ظاهرة أم لا.
إظهار أو إخفاء الشبكة
حدد View > Design View Options > Grid > Show Grid.
إتاحة الانطباق أو تعطيله
حدد View > Design View Options > Grid > Snap to Grid.
تغيير إعدادات الشبكة
-
حدد View > Design View Options > Grid > Grid Settings.
-
قم بتعيين أي من الخيارات التالية، ثم انقر فوق OK لتطبيق التغييرات.
Color
يحدد لون سطور الشبكة. انقر فوق حامل اللون، ثم حدد لونًا من منتقي الألوان أو اكتب رقم سداسي عشري في مربع النص.
Show Grid
تجعل الشبكة ظاهرة في طريقة العرض Design.
Snap to Grid
تحاذي عناصر الصفحة بسطور الشبكة.
Spacing
تتحكم في مدى التباعد بين سطور الشبكة. أدخل رقمًا، وحدد Pixels أو Inches أو Centimeters من القائمة.
Display
يحدد ما إذا كانت سطور الشبكة تظهر كسطور أو نقاط.
ملاحظة:إذا لم يتم تحديد Show Grid، لا تظهر الشبكة في المستند ولا تكون أي تغييرات مرئية.
Use a tracing image
يمكنك استخدام صورة تتبع كدليل لإعادة إنشاء تصميم صفحة تم إنشاؤها في التطبيقات الرسومية مثل Adobe Freehand أو Fireworks.
صورة التتبع هي صورة JPEG أو GIF أو PNG يتم وضعها في خلفية نافذة Document. يمكنك إخفاء الصورة وتعيين معدل الشفافية لها وتغيير موضعها.
تكون صورة التتبع ظاهرة فقط في Dreamweaver؛ وتكون غير ظاهرة عندما تعرض الصفحة في مستعرض. عندما تكون صورة التتبع معروضة، تكون صورة الخلفية الحقيقية بالصفحة ولونها غير ظاهرين في النافذة Document، وستكون صورة الخلفية ولونها ظاهرين عند عرض الصفحة في مستعرض.
ضع صورة تتبع في النافذة Document.
-
قم بأحد الإجراءات التالية:
حدد View > Design View Options > Tracing Image > Load.
حدد File > Page Properties، ثم في فئة Tracing Image، انقر فوق Browse (بجوار مربع نص Tracing Image).
-
انتقل إلى ملف الصورة ثم انقر فوق OK.
-
في مربع الحوار Page Properties، حدد شفافية الصورة عن طريق سحب منزلق Image Transparency، ثم انقر فوق OK.
للتبديل لصورة تتبع مختلفة أو لتغيير شفافية صورة التتبع الحالية في أي وقت، حدد File > Page Properties.
عرض أو إخفاء صورة التتبع
حدد View > Design View Options >Tracing Image > Show.
تغيير موضع صورة تتبع
-
حدد View > Design View Options > Tracing Image > Adjust Position.
لتحديد موضع صورة التتبع بدقة، أدخل قيم الإحداثيات في مربعات النصوص X وY.
لنقل الصورة بمقدار بكسل واحد في المرة الواحدة، استخدم مفاتيح الأسهم.
لنقل الصورة بمقدار 5 بيكسل في المرة الواحدة، اضغط المفتاح Shift ومفاتيح الأسهم.
قم بإعادة تعيين موضع صورة التتبع
-
حدد View > Design View Options > Tracing Image > Reset Position.
تعود صورة التتبع إلى الزاوية العليا اليسرى من النافذة Document (0,0).
محاذاة صورة التتبع إلى عنصر محدد
-
حدد عنصرًا في النافذة Document.
-
حدد View > Design View Options > Tracing Image > Align with Selection.
تتم محاذاة الزاوية العليا اليسرى من صورة التتبع مع الزاوية العليا اليسرى من العنصر المحدد.