برنامج Adobe Dreamweaver 2021 | لإنشاء وتصميم مواقع الويب

برنامج Adobe Dreamweaver 2021 | لإنشاء وتصميم مواقع الويب

Adobe Dreamweaver 2021 هو برنامج قوي وشامل لتصميم وتطوير مواقع الويب، تم تطويره بواسطة شركة Adobe كجزء من مجموعة Adobe Creative Cloud. يعتبر Dreamweaver أداة احترافية تجمع بين واجهة تصميم مرئية سهلة الاستخدام ومحرر أكواد متطور، مما يجعله مناسبًا لكل من المصممين والمطورين على اختلاف مستويات خبرتهم.

مميزات برنامج Adobe Dreamweaver 2021

قوة التصميم المرئي والمرونة البرمجية:

• واجهة مستخدم عصرية ومبسطة: استمتع بتجربة عمل أكثر تركيزًا وإنتاجية بفضل التصميم الجديد الذي يسهل الوصول إلى الأدوات والميزات الأساسية.
• تصميم مرئي حيوي (Live View) مُحسّن: شاهد تعديلاتك في الوقت الفعلي أثناء التصميم دون الحاجة للتحديث المستمر. تفاعل مباشرة مع عناصر الصفحة وتأكد من دقة التصميم على الفور.
• محرر أكواد قوي وذكي: اكتب التعليمات البرمجية بسرعة وكفاءة مع دعم الإكمال التلقائي، وتلوين بناء الجملة، والتحقق من الأخطاء في الوقت الفعلي للغات HTML، CSS، JavaScript، وغيرها.

بناء مواقع ويب متجاوبة وحديثة:

• دعم كامل لـ CSS Grid و Flexbox: قم بإنشاء تخطيطات ويب معقدة ومرنة بسهولة فائقة، مما يضمن أن موقعك يبدو رائعًا ويعمل بكفاءة على جميع الأجهزة والشاشات.
• تصميم متجاوب سلس: قم بإنشاء مواقع ويب تتكيف تلقائيًا مع أحجام الشاشات المختلفة باستخدام أدوات التصميم المتجاوب المدمجة.
• قوالب Starter مُحسّنة: ابدأ مشاريعك بسرعة مع مجموعة متنوعة من القوالب الاحترافية والقابلة للتخصيص، مما يوفر عليك الوقت والجهد في إنشاء الهيكل الأساسي للموقع.

تكامل وسير عمل فعال:

• تكامل سلس مع Adobe Creative Cloud: استورد وعدّل أصولك من Photoshop و Illustrator وغيرها من تطبيقات Adobe بسهولة، مما يضمن سير عمل إبداعي متكامل وسلس.
• دعم Git مُدمج: تعاون بكفاءة مع فريقك من خلال إدارة الإصدارات وتتبع التغييرات مباشرة داخل Dreamweaver.
• تحسينات في الأداء والاستقرار: استمتع بتجربة عمل أكثر سلاسة وسرعة مع تحسينات الأداء التي تجعل البرنامج أكثر استجابة وموثوقية.

ميزات إضافية قيمة:

• دعم أحدث تقنيات الويب: استفد من دعم HTML5، CSS3، JavaScript ES6+، وغيرها من التقنيات الحديثة لبناء مواقع ويب متطورة.
• أدوات فحص وتصحيح الأخطاء: قم بتحليل وتصحيح أخطاء التعليمات البرمجية بسهولة لضمان أداء موقعك الأمثل.
• خيارات نشر مبسطة: قم بنشر موقعك على الخادم بسهولة باستخدام أدوات FTP المدمجة.

باختصار، Adobe Dreamweaver 2021 يقدم مزيجًا قويًا من:

• سهولة الاستخدام: بفضل واجهته المرئية المحسّنة.
• قوة الأداء: بفضل محرك الترميز المتطور ودعمه للتقنيات الحديثة.
• الكفاءة: بفضل التكامل السلس مع تطبيقات Adobe الأخرى وأدوات التعاون المدمجة.

طريقة تشغيل واستخدام برنامج Adobe Dreamweaver 2021

1. تشغيل برنامج Adobe Dreamweaver 2021:

• إذا كان البرنامج مثبتًا: ابحث عن أيقونة Adobe Dreamweaver 2021 في قائمة “ابدأ” (Windows) أو في مجلد “التطبيقات” (macOS) وانقر عليها لفتحه.
• إذا لم يكن مثبتًا: يجب عليك أولاً تنزيل البرنامج وتثبيته. يمكنك القيام بذلك من موقع Adobe الرسمي إذا كان لديك اشتراك في Adobe Creative Cloud. بعد التثبيت، يمكنك تشغيله كما هو موضح أعلاه.

2. التعرف على واجهة المستخدم:

عند تشغيل Dreamweaver لأول مرة، سترى واجهة تتكون من عدة أقسام رئيسية:

• شريط القوائم (Menu Bar): في الأعلى، يحتوي على قوائم مثل “ملف” (File)، “تحرير” (Edit)، “عرض” (View)، “إدراج” (Insert)، وغيرها، والتي تحتوي على أوامر ووظائف البرنامج المختلفة.
• شريط الأدوات (Toolbar): أسفل شريط القوائم، يوفر وصولاً سريعًا إلى بعض الوظائف الأكثر استخدامًا مثل فتح وحفظ الملفات، والتراجع والإعادة، وعرض الصفحة.
• مساحة العمل (Workspace): الجزء المركزي حيث تقوم بإنشاء وتعديل صفحات الويب الخاصة بك. يمكن أن يظهر هذا الجزء بطرق عرض مختلفة:
  • عرض “الكود” (Code): يعرض الكود المصدري لصفحة الويب (HTML، CSS، JavaScript، إلخ).
  • عرض “مباشر” (Live): يعرض معاينة تفاعلية لصفحة الويب كما ستظهر في المتصفح، مع إمكانية التعديل المرئي.
  • عرض “تقسيم” (Split): يعرض كلاً من الكود والمعاينة الحية في نفس الوقت.
• الألواح (Panels): توجد عادةً على الجانبين الأيمن والأيسر من مساحة العمل. تحتوي على أدوات وميزات لتنظيم الملفات (“ملفات” – Files)، وإدراج العناصر (“إدراج” – Insert)، وتعديل خصائص العناصر (“خصائص” – Properties)، وأنماط CSS (“CSS Designer”)، وغيرها. يمكنك فتح وإغلاق وترتيب هذه الألواح حسب احتياجاتك من قائمة “نافذة” (Window).
• شريط الحالة (Status Bar): في الأسفل، يعرض معلومات حول المستند الحالي ويوفر بعض الخيارات السريعة.

3. إنشاء موقع ويب جديد أو فتح موقع موجود:

• إنشاء موقع جديد:
  • انتقل إلى “موقع” (Site) في شريط القوائم واختر “موقع جديد” (New Site).
  • في النافذة التي تظهر، قم بتحديد “اسم الموقع” (Site Name) (اسم داخلي لتنظيم ملفاتك) و “المجلد المحلي للموقع” (Local Site Folder) (المجلد على جهاز الكمبيوتر الخاص بك حيث ستحفظ جميع ملفات موقع الويب).
  • يمكنك أيضًا تحديد معلومات الخادم إذا كنت تخطط لنشر موقعك على الإنترنت.
  • انقر على “حفظ” (Save).
• فتح موقع موجود:
  • انتقل إلى “موقع” (Site) في شريط القوائم واختر “فتح موقع” (Open Site).
  • استعرض جهاز الكمبيوتر الخاص بك وحدد المجلد المحلي لموقع الويب الذي تريد فتحه وانقر على “فتح” (Open).

4. إنشاء صفحة ويب جديدة أو فتح صفحة موجودة:

• إنشاء صفحة جديدة:
  • انتقل إلى “ملف” (File) في شريط القوائم واختر “جديد” (New).
  • في النافذة التي تظهر، اختر نوع المستند الذي تريد إنشاؤه (عادةً “HTML”) وحدد أي إعدادات أخرى ترغب بها وانقر على “إنشاء” (Create).
• فتح صفحة موجودة:
  • انتقل إلى “ملف” (File) في شريط القوائم واختر “فتح” (Open).
  • استعرض جهاز الكمبيوتر الخاص بك وحدد ملف HTML الذي تريد فتحه وانقر على “فتح” (Open).

5. تصميم وتطوير صفحة الويب:

• باستخدام العرض “مباشر” (Live): يمكنك إضافة وتعديل العناصر بشكل مرئي مباشرة على الصفحة. استخدم لوحة “إدراج” (Insert) لإضافة عناصر مثل النصوص، والصور، والروابط، والجداول، والنماذج، وغيرها. يمكنك سحب وإفلات العناصر وتغيير حجمها وموضعها. استخدم لوحة “خصائص” (Properties) لتعديل خصائص العنصر المحدد (مثل لون النص، وحجم الخط، ومصدر الصورة).
• باستخدام العرض “الكود” (Code): يمكنك كتابة وتعديل كود HTML و CSS و JavaScript مباشرة. يوفر Dreamweaver ميزات مثل الإكمال التلقائي للأكواد وتلوين بناء الجملة لتسهيل العملية.
• باستخدام العرض “تقسيم” (Split): يمكنك رؤية الكود والتصميم المرئي في نفس الوقت، مما يتيح لك فهم العلاقة بينهما وإجراء التعديلات في أي من العرضين.
• تنسيق CSS: استخدم لوحة “CSS Designer” لتطبيق أنماط CSS على عناصر صفحتك. يمكنك إنشاء قواعد CSS جديدة وتعديل الخصائص الموجودة بشكل مرئي أو عن طريق كتابة الكود.
• إضافة تفاعلية باستخدام JavaScript: يمكنك كتابة أو إضافة أكواد JavaScript لجعل موقعك أكثر تفاعلية وديناميكية.

6. حفظ الصفحة والموقع:

• حفظ الصفحة: انتقل إلى “ملف” (File) واختر “حفظ” (Save) لحفظ التغييرات على الصفحة الحالية، أو “حفظ باسم” (Save As) لحفظ نسخة جديدة.
• حفظ جميع الملفات: انتقل إلى “ملف” (File) واختر “حفظ الكل” (Save All) لحفظ جميع الملفات المفتوحة التي تم تعديلها.

7. معاينة صفحة الويب:

• يمكنك معاينة صفحتك في متصفح الويب بالنقر على أيقونة “معاينة في المتصفح” (Preview in Browser) في شريط الأدوات أو بالضغط على مفتاح F12 (في Windows) أو Option + F12 (في macOS). اختر المتصفح الذي تريد استخدامه للمعاينة.

8. إدارة الملفات والمجلدات:

• استخدم لوحة “ملفات” (Files) لتصفح ملفات ومجلدات موقع الويب الخاص بك، وإنشاء مجلدات جديدة، وتحميل الملفات، وتنزيلها، وإعادة تسميتها، وحذفها.

9. نشر موقع الويب (اختياري):

• لنشر موقعك على الإنترنت، تحتاج إلى حساب استضافة ويب. يمكنك إعداد اتصال بخادم الاستضافة الخاص بك في Dreamweaver باستخدام معلومات FTP أو SFTP التي يوفرها مزود الاستضافة.
• انتقل إلى “موقع” (Site) واختر “إدارة المواقع” (Manage Sites). حدد موقعك وانقر على “تحرير” (Edit). في علامة التبويب “الخوادم” (Servers)، يمكنك إضافة معلومات الخادم الخاص بك.
• بعد إعداد الخادم، يمكنك استخدام لوحة “ملفات” (Files) لتحميل ملفات موقعك إلى الخادم.

نصائح للمبتدئين:

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

متطلبات تشغيل برنامج Adobe Dreamweaver 2021

متطلبات نظام التشغيل Windows:

ملاحظات هامة:

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

الموقع الرسمى للبرنامج

تابعنا دائماً لتحميل أحدث البرامج من موقع شرح PC