كيفية استخدام برنامج Adobe Dreamweaver

click fraud protection

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

رسم توضيحي لشخص يستخدم Adobe Dreamweaver
لايف واير / بريانا جيلمارتين

تحديد الموقع

  • ابدأ موقعًا جديدًا
  • إنشاء موقع على شبكة الانترنت
  • قم بإعداد أجزاء الموقع التي تحتاجها فقط عندما تحتاج إليها * جديد في CS5
  • قم بإعداد الخوادم عن بُعد ، وضمان الجودة ، والاختبار لمزيد من سير العمل الكامل * الجديد في CS5
  • إنشاء ونشر أدلة جديدة
  • تغيير نوع الدوك
  • تضمين البيانات الوصفية في صفحاتك

وضع موقعك على الهواء مباشرة

  • تحديد موقع بعيد
  • ملفات FTP إلى خادم الويب
  • استخدم نظام التحكم في الإصدار لإيداع الملفات وسحبها
  • تواصل مع Subversion لتحكم أكثر تقدمًا في الإصدار * جديد في CS5
  • اترك ملاحظات لزملائك في الفريق

إنشاء صفحات الويب

  • اكتب صفحة في وضع WYSIWYG
  • اكتب صفحة بتنسيق HTML
  • قم بإنشاء صفحة جديدة من قالب
  • قم بإنشاء صفحة جديدة من البداية
  • قم بإنشاء قالب
  • حفظ الملفات في دليل الموقع الخاص بك
  • تحديد خصائص الصفحة

CSS

  • استخدم أوراق أنماط CSS
  • مضيفا الأنماط المضمنة
  • قم بإنشاء ورقة أنماط خارجية
  • إرفاق ورقة أنماط خارجية
  • قم بإنشاء فئة ومعرف وعلامة ومحددات CSS مركبة
  • تحرير قواعد CSS الحالية
  • قم بإنشاء CSS للصفحات القابلة للطباعة
  • تمكين وتعطيل خصائص النمط * جديد في CS5
  • افحص نموذج مربع CSS بصريًا * الجديد في CS5

نص

  • تعديل النص
  • استخدم خطوط مختلفة
  • أدخل فاصل أسطر
  • استخدم أحرفًا خاصة
  • قم بتضمين تاريخ اليوم
  • اكتب التعليقات
  • تطبيق علامات HTML للنص
  • أضف سمات HTML إلى العلامات

الروابط

  • ربط النص والصور
  • تحقق من روابط الموقع
  • تغيير ألوان الارتباط الافتراضية (ارتباط ، تمت زيارتها ، تحوم ، نشط)
  • إنشاء تلميحات الأدوات على الروابط
  • إنشاء روابط mailto
  • إنشاء روابط صفحات الويب

الصور

  • أضف رسومات إلى الصفحة
  • تحرير الصور
  • تغيير حجم الصور
  • أضف نصًا بديلاً إلى الصور
  • أضف خيارات إمكانية الوصول الإضافية للصور
  • محاذاة الصور والنص
  • قم بإنشاء صورة متغيرة
  • يستخدم خرائط الصور
  • استخدم صور التتبع
  • استخدم العناصر النائبة للصور
  • أدخل Fireworks HTML
  • أدخل ملفات Photoshop

تخطيط

  • استخدم القوالب المجانية المضمنة * تخطيطات بداية CSS الجديدة في CS5
  • أدخل divs للتخطيط
  • قم بتحرير divs في لوحة أنماط CSS
  • أدخل العناصر الموضوعة بشكل مطلق
  • تنسيق العناصر الموضوعة بشكل مطلق في فاحص الخصائص
  • استخدم المساطر والشبكات والأدلة

القوائم

  • إضافة قوائم ذات تعداد نقطي ورقمي
  • تخصيص قائمة الرصاص والأرقام

الجداول

  • قم بإنشاء جدول
  • أضف صفوف وأعمدة الرأس
  • يستخدم صور شفافة لإبقاء خلايا الجدول مفتوحة
  • إنشاء أعمدة ذات عرض ثابت وعرض مرن
  • تغيير أنماط حدود الجداول
  • قم بتضمين جدول داخل جدول
  • استيراد البيانات الجدولية

نماذج

  • استخدم نموذج mailto
  • تحديد إجراءات النموذج
  • قم بإضافة نص وراديو ومربع اختيار وملف وصورة ومربعات تحديد وحقول نموذج مخفية
  • اجعل نماذجك قابلة للوصول باستخدام حقول مجموعة الحقول والتسمية
  • إنشاء أزرار إرسال مخصصة
  • التحقق من صحة النماذج باستخدام JavaScript (Spry)

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

  • إرفاق موقعك بقاعدة بيانات
  • قم بإعداد موقع PHP / mySQL
  • استخدم عناصر Spry للاتصال بقاعدة البيانات
  • أدخل كائنات البيانات في صفحاتك
  • اختبار وتحديث مصدر بيانات Spry أو عرضه
  • تحرير المواقع الديناميكية المعقدة في طريقة عرض التصميم
  • اكتشف جميع الملفات ذات الصلة ديناميكيًا لتجميع مواقع PHP CMS (WordPress و Joomla و Drupal) * جديد في CS5
  • تلميح فئة مخصص لرمز PHP ، بما في ذلك أطر عمل الجهات الخارجية مثل Zend framework * جديد في CS5

الإطارات

  • إنشاء موقع ويب مؤطر
  • تحرير محتوى noframes
  • تنسيق وتصميم الإطارات الخاصة بك
  • قم بإعداد أهداف الارتباط الافتراضية بين الإطارات

أضف التفاعل

  • إنشاء ألبوم صور (لم يعد في CS5)
  • أضف الصوت إلى صفحات الويب
  • قم بإنشاء قائمة منسدلة
  • استخدم سلوكيات Dreamweaver لفتح النوافذ المنبثقة وإنشاء قوائم الانتقال وتشغيل الصوت وتبديل الصور والمزيد
  • إضافة تغذيات RSS إلى موقع
  • أدخل نص Flash كتمرير
  • أدخل نص CSS كتمرير
  • أدخل المكونات الإضافية الأخرى
  • أضف شريط قوائم Spry واللوحات المبوبة والأكورديون وتلميح الأداة واللوحة القابلة للطي
  • استخدم متصفح Widget للبحث عن أدوات جديدة لموقعك ، دون الحاجة إلى معرفة JavaScript

اختبر صفحاتك

  • اختبر صفحاتك في Live View لترى التغييرات الناتجة عن JavaScript والتفاعلية * جديد في CS5
  • تحقق من صحة HTML الخاص بك
  • قم بمعاينة صفحاتك في عدة متصفحات
  • استخدم BrowserLab لمعاينة صفحاتك في أنظمة التشغيل الأخرى * الجديد في CS5
  • استخدم Device Central للتحقق من شكل الصفحات على الأجهزة المحمولة
  • تحقق من توافق المتصفح
  • قم بتغيير الإعدادات لتتطابق مع ما يحتاج موقعك للعمل معه
  • تحقق من روابط الموقع الداخلية
  • اختبر إمكانية الوصول إلى موقعك (لم يعد في CS5)
  • تحويل ملف وثيقة كلمة إلى HTML

قم بتخصيص Dreamweaver

  • إضافة ملحقات
  • تعطيل الملحقات
  • قم بتخصيص Dreamweaver باستخدام الاختصارات

زيادة كفاءتك

  • استخدم اختصارات لوحة المفاتيح المضمنة
  • استخدم مقتطفات التعليمات البرمجية
  • إنشاء واستخدام القوالب
  • إنشاء صفحات جديدة من قوالب مخصصة
  • تحديث القوالب
  • قم بتضمين ملف واحد في ملف آخر باستخدام مكتبة Dreamweaver
  • تحديث عناصر المكتبة
  • قم بتضمين ملف واحد في ملف آخر باستخدام مباحث أمن الدولة
  • استخدم البحث والاستبدال