تعرف على برنامج لتصميم المواقع Adobe Dreamweaver CC

الايجابيات

• مرنة وقوية.

• دعم كامل لمنصات الطرف الثالث.

• دعم تصميم سريع الاستجابة مدمج.

• تكامل محكم مع تطبيقات Adobe الأخرى.

• محرر كود كامل بنمط IDE مع تحرير WYSIWYG المباشر.

• المعاينة في الوقت الحقيقي.

سلبيات

• منحنى تعلم حاد لأول مرة وواجهة معقدة.

• لا تعمل ميزة التراجع في جميع السياقات.

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

مثل جميع تطبيقات Adobe الأخرى ، فإنه يأتي بإصدارات متطابقة تقريبًا لنظامي التشغيل Mac و Windows ، وهو متاح إما من خلال اشتراك Dreamweaver المدفوع فقط (20.99 دولارًا أمريكيًا شهريًا مع التزام لمدة عام واحد ، أو 31.49 دولارًا أمريكيًا شهريًا ، أو 239.88 دولارًا أمريكيًا للسنة المدفوعة مسبقًا. ) أو كجزء من مجموعة Creative Cloud الكاملة (52.99 دولارًا شهريًا) ، والتي توفر لك Photoshop و Illustrator وجميع البرامج والتطبيقات الإبداعية الأخرى. يأتي كل من التطبيق الفردي واشتراك المجموعة الكامل بسعة تخزين سحابية تبلغ 100 جيجابايت.

تصميم موقع مستجيب

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

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

منتجات مماثلة

تريد Adobe أن تعمل باستخدام أدوات Adobe ، لذلك من السهل استخدام Photoshop و Illustrator لتحرير الصور أو Premiere Pro و Audition لملفات الفيديو والصوت. يمكنك أيضًا استخدام Photoshop لإنشاء نموذج لما تريد أن يبدو عليه موقعك ، ثم استخدم قائمة Extract في Dreamweaver لسحب العناصر من ملف Photoshop إلى صفحات الويب الخاصة بك. لكن Dreamweaver يعمل أيضًا مع أي أداة بناء مواقع تابعة لجهة خارجية قد ترغب في استخدامها. على سبيل المثال ، يمكنك استخدام Dreamweaver لتصميم وتحرير المواقع التي يديرها WordPress أو Joomla! أو Drupal ، أو يمكنك إنشاء مستودع Git واستخدامه لتعقب التغييرات في موقعك.

يستخدم Dreamweaver إطار عمل Bootstrap للمواقع المتجاوبة ، ويستخدم افتراضيًا أحدث إصدار من Bootstrap ، وهو 4.3.1 ، على الرغم من أن الإصدار 3.4.1 السابق لا يزال مدمجًا إذا كنت ترغب في الاستمرار في استخدامه. يرشدك Dreamweaver خلال ترقية المواقع بناءً على الإصدار السابق ويحاول حل مشكلات عدم التوافق من خلال إنشاء ملفات CSS و JavaScript جديدة تستخدم أحدث معيار. تعد مواقع Bootstrap سريعة الاستجابة للهواتف المحمولة أولاً ، مما يعني أن إطار عمل Bootstrap مُحسَّن في الغالب للهواتف أو الأجهزة اللوحية ، ولكن قوالب Bootstrap المضمنة في Adobe مصممة جيدًا بما يكفي لتبدو جيدة بنفس القدر على أجهزة الكمبيوتر المكتبية والهواتف.

تجربة Dreamweaver

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

عند تحرير موقع ويب نموذجي وبسيط نسبيًا ، يكون لديك ما لا يقل عن أربع علامات تبويب مفتوحة للمستند ، واحدة للصفحة الحالية ، والأخرى لملفات JavaScript و CSS ، ولوحة معلومات بها سبع علامات تبويب على الأقل ، تعرض الملفات ، ومكتبات Creative Cloud ، و HTML العلامات التي يمكنك سحبها إلى ملف ، ومجموعة معقدة من عناصر تحكم CSS ، وشجرة نموذج كائن المستند (DOM) ، وقائمة بالأصول (مصنفة في عناوين URL ، والصور ، والوسائط ، والمزيد) ، وقائمة طويلة من الإنشاءات والمخصصة مسبقًا مقتطفات بنيت. أضف إلى ذلك شريط أدوات قابل للتخصيص على اليسار وقائمة مكتظة بالسكان في الأعلى ، وستحصل على واحدة من أكثر الواجهات التي تم تضمينها في التطبيق تعقيدًا على الإطلاق ، ولا ينافسها سوى برامج التطوير الأخرى مثل Microsoft Visual Studio.

لحسن الحظ ، إذا كنت خبيرًا في البرمجة ، أو إذا كنت تريد عرض WYSIWYG الأكثر اتساعًا ، فيمكنك إخفاء كل شيء باستثناء نافذة التحرير الرئيسية لبرنامج Dreamweaver. وهذه النافذة تشبه أعجوبة الحرباء من المرونة. تتضمن خيارات عرض النافذة عرضًا لجميع الأكواد مع المسافة البادئة لإطار الترميز النموذجي وترميز الألوان لجعل هيكل مشروعك مرئيًا.

يمكنك الاختيار بين نوعين من طرق عرض WYSIWYG. أحدهما هو طريقة العرض Live التي تقارب ما قد تراه في المستعرض ، باستثناء عناصر الصفحة الموضحة للتوضيح والأزرار التي تتيح لك تعديل العلامات للعناصر الفردية بمجرد النقر فوق العنصر. الآخر هو طريقة عرض التصميم التي تعرض جميع عناصر التصميم على الصفحة ، بما في ذلك العناصر التي قد تكون غير مرئية في المستعرض حتى ينقر المستخدم عليها. أخيرًا ، يمكنك تقسيم النافذة لإظهار التعليمات البرمجية في جزء واحد وإما طريقة العرض Live أو Design في الجزء الآخر - أو مع التعليمات البرمجية في كلا الجزأين بحيث يمكنك عرض وتحرير جزأين مختلفين من التعليمات البرمجية في نفس الوقت. تتيح لك الخيارات المتقدمة مزامنة التغييرات التي تجريها على سطح المكتب مع الرمز الموجود على خادم الويب البعيد.

ميزات جديدة

يبدو Dreamweaver 2020 الذي تم إصداره مؤخرًا ويعمل تمامًا مثل Dreamweaver 2019 العام الماضي. يذكر Adobe ثلاث ميزات جديدة فقط: انقر للتحرير المبسط في Live view ، بحيث يمكنك تحرير النص ، وليس فقط العلامات ، في طريقة العرض Live بمجرد النقر فوق على عنصر نصي ؛ إعدادات افتراضية جديدة للخطوط اليابانية ؛ والنوافذ المنبثقة المحسنة تلميح التعليمات البرمجية. لا يوجد منحنى تعليمي جديد ، ولم تتغير الواجهة والميزات الأخرى. إحدى طرق التعثر البسيطة المحتملة في ميزة تحرير العرض المباشر المحسّنة هي أن بعض ضغطات المفاتيح لا تعمل بالشكل الذي قد تتوقعه. على سبيل المثال ، يمكنك تقسيم فقرة بالضغط على Enter في بعض النصوص في طريقة العرض Live ، لكن Backspace لن يعيد دمج الفقرات المقسمة - سيتعين عليك التبديل إلى عرض التعليمات البرمجية وإزالة العلامة الخاصة بالفقرة الجديدة.

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

هل يجب عليك شراء اشتراك في Dreamweaver؟ إذا كنت تستخدم Photoshop أو Illustrator بالفعل أو إذا كنت تقوم بإنشاء موقع شركة أو موقع ثقيل التصميم ، فإن Dreamweaver هو خيار واضح. إذا كنت تنفر من البرمجة ، فيمكنك فعل ما يفعله نصف العالم عبر الإنترنت ، واستخدام WordPress لبناء موقعك عن طريق اختيار سمة مرئية واستخدامها أو تعديلها من القوائم البسيطة. ستحتاج إلى بعض المعرفة التقنية ، ولكن يمكنك الحصول عليها بدون أي شيء تقريبًا.

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

بالنسبة إلى مواقع الويب الأصغر المصممة في الغالب لمتصفحات الكمبيوتر المحمول وسطح المكتب ، يمكنك استخدام أي من العشرات من برامج تحرير صفحات الويب التقليدية مثل RapidWeaver أو Coda على جهاز Mac - ولكنك لن تحصل على تحرير WYSIWYG الحقيقي كما تفعل في Dreamweaver أو الأنظمة المستندة إلى المستعرض مثل WordPress أو Wix. تقدم العديد من برامج تحرير صفحات الويب التقليدية أوضاعًا للمعاينة ، وبعضها (مثل محرر Brackets الرائع والمجاني من Adobe) يقدم معاينة في الوقت الفعلي في متصفحك ، ولكن هذا لا يشبه التحرير بالكامل في وضع WYSIWYG كما هو الحال في وضع التحرير المباشر في Dreamweaver.

محرر الويب WYSIWYG المفضل والسريع والنظيف للمواقع البسيطة هو برنامج Expression Web المجاني من Microsoft الذي يعمل بنظام Windows فقط ، والذي كان سابقًا تطبيقًا باهظ الثمن ، ولكنه الآن تنزيل مجاني ، لأن Microsoft توقفت عن تحديثه بعد أن قدم Visual Studio بناء موقع أكثر تقدمًا أدوات. لم يتم تحديث Expression Web منذ عام 2011 ، ولكن مجموعة الميزات الخاصة به لا تزال تنجز المهمة لمواقع الويب الأساسية ، ولا يمكنك الجدال مع السعر.

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

لا يزال ممتاز

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