مراجعة: Adobe Dreamweaver CC يجعل CSS أكثر وضوحًا وأقل ملاءمة للمبرمج

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

لا مزيد من مربعات مربعة

إن أوضح تحسينات في Dreamweaver CC هو CSS Designer الجديد ، الذي يوفر مساعدات بصرية لسمات CSS التي تنطبق على الكائنات. في Dreamweaver CS6 ، يمكنك إجراء تعديلات في لوحة أساسية ، ولكن قد تحتاج ، على سبيل المثال ، إلى إلقاء نظرة على إدخال لنصف قطر حدود كائن والتفكير ، "أعلى ، يمين ، أسفل ، يسار" للتأكد من حصولك على ترتيب الإعدادات صيح.

مع إضافة لوحة CSS Designer ، فإن واجهة Dreamweaver CC مكتظة بالأشياء.

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

عند إضافة عناصر جديدة إلى تخطيط شبكة Fluid في Dreamweaver ، لديك الآن خيار تعيين فئات HTML لها ، وليس فقط معرفات فريدة.

ومع ذلك ، فإن الأمر الأكثر إرباكًا هو أن التراجع والإعادة لا ينطبقان على التغييرات التي تجريها في نافذة CSS Designer. في الواقع ، إذا قمت بإجراء تغيير في لوحة التصميم ، وقمت بإجراء تغيير آخر في مصمم CSS ، ثم التراجع ، فسيتم التراجع عن التغيير الذي أجريته في طريقة العرض "تصميم".

يعرض مصمم CSS تمثيلات مرئية لخصائص CSS للكائنات ، على الرغم من أن الأرقام تتغير فقط في اللوحة ؛ لا الرسومات.

في السابق ، إذا استخدمت ميزة Fluid Grid Layout في Dreamweaver CS6 لإنشاء صفحات سريعة الاستجابة تعمل في قادك البرنامج إلى استخدام معرفات فريدة لكل عنصر تمت إضافته إليه حديثًا شبكتها. ومع ذلك ، يمنحك Dreamweaver CC خيار تعيين فئة HTML عالمية عند إضافتها ، بحيث بعد ذلك ، تؤثر التعديلات التي تجريها على خصائص CSS لأحد العناصر على جميع العناصر التي تستخدم ذلك صف دراسي. يوفر Dreamweaver CC أيضًا العديد من مكونات HTML5 في القائمة Insert لـ Fluid Grid Layouts.

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

أصبحت آلية Fluid Grid Layout أكثر أهمية بالنسبة لـ Dreamweaver.

متعة خطوط الويب

يجعل Dreamweaver CC استخدام خطوط الويب أسهل أيضًا. يعرض مربع حوار كل الخطوط المتوفرة في مكتبة Adobe Edge Web Fonts ، وهي مستودع خطوط مفتوح المصدر يتضمن خطوطًا من Adobe TypeKit و Google Web Fonts. ومع ذلك ، فإنه لا يتضمن جميع الخطوط في Adobe TypeKit - فقط الخطوط مفتوحة المصدر. ومع ذلك ، يمكنك الحصول على مجموعة كبيرة للاختيار من بينها ، ويسهّل التنوع استبدال خطوط حقبة ماضية - Arial ، Times ، Courier ، et al - بأخرى جديدة رائعة. ولأن الخطوط مفتوحة المصدر ، يمكنك استخدامها على أي موقع تريد ، طالما تريد. ومع ذلك ، يمكنك استخدام الخطوط من مكتبة Edge Web Fonts مجانًا ، بدون Dreamweaver CC ؛ تمنحك Adobe حتى التعليمات البرمجية اللازمة لاستخدامها.

تضع آلية خطوط الويب المُجددة الخطوط من Adobe TypeKit و Google Web Fonts تحت تصرفك.

لأن اشتراك Creative Cloud الخاص بك يسمح لك بتثبيت Dreamweaver CC على جهازي كمبيوتر (أو على جهاز Mac ثنائي التمهيد) باستخدام OS X و Windows) ، يمكنك مزامنة إعدادات التطبيق والموقع بين أجهزة الكمبيوتر باستخدام Creative Cloud الحساب. يقول Adobe ، قريبًا ، سيشمل إعدادات خط الويب ، لذلك عندما تفتح ملفًا في الثانية جهاز الكمبيوتر ، ستظهر الخطوط التي حددتها على جهاز الكمبيوتر الأول دون الحاجة إلى تعيينها مرة أخرى.

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

يوفر Dreamweaver CC المزيد من مكونات HTML5 التي يمكنك إضافتها إلى Fluid Grid Layouts.

اشترك في شاشة أكبر

تقول Adobe أن الواجهة المحدثة في Dreamweaver CC تجعلها أكثر سهولة وتوفر سير عمل أكثر سلاسة ، ويمكنك تنفيذ المهام بنقرات أقل. في بعض النواحي ، ربما يكون هذا صحيحًا ، لكن إضافة لوحة CSS Designer الضخمة تعني أن Dreamweaver لديه المزيد ليكتظ في واجهته - لذا لدرجة أنني وجدت نفسي باستمرار في توسيع وتقليص النوافذ داخل التطبيق ، حتى عندما كنت أستخدمها بملء الشاشة على شاشة مقاس 24 بوصة. لقد وجدت أيضًا التطبيق بطيئًا للغاية مع تخطيطات معقدة ، سواء على جهاز MacBook Pro 2011 مع وحدة معالجة مركزية Core i7 بسرعة 2.3 جيجاهرتز وعلى محطة عمل تستند إلى Windows. تقول Adobe أن محرك العرض الخاص بها تسبب في بعض مشكلات الأداء ، ولكنه سيعالجها عن طريق استبدال المحرك في الإصدار القادم من Dreamweaver CC.

إن التبديل بين أوضاع عرض Dreamweaver - الوضع العادي ، والمنظر المباشر ، والرمز المباشر ، والفحص - يصبح مملاً. على سبيل المثال ، إذا كنت في الوضع العادي ، فلا يمكنك رؤية تأثيرات أي إعدادات HTML5 في طريقة العرض Design ، ترى مربعات مربعة بدلاً من الصناديق ذات الزوايا الدائرية. في طريقة العرض Live ، ترى تلك التأثيرات ، لكن لا يمكنك تحرير النص في لوحة Design (على الرغم من أنه يمكنك تحريره في لوحة Code مع تمكين طريقة العرض Live). لا يجب علينا دائما أن تكون قادرًا على رؤية التمثيل الأكثر دقة لتعديلاتنا؟

تستمر طريقة العرض المباشر في Dreamweaver CC في الاعتماد على WebKit لعرض التنسيقات ، ولكن لا يزال عليك التحقق من كيفية ظهور تنسيقاتك في المتصفحات التي لا تعتمد على عرض WebKit - بما في ذلك Internet Explorer (إصدارات متعددة ، بشكل طبيعي) وفايرفوكس وأي متصفحات أخرى تحتاجها الدعم. يحتوي Dreamweaver CS6 على لوحة لـ Adobe BrowserLab ، وهي خدمة خارجية توضح لك كيف سيبدو تخطيطك في متصفحات مختلفة ، ولكن الشركة قتل خارج الخدمة في وقت سابق من هذا العام.

قم بتغيير خصائص CSS لكائن واحد في فئة HTML - هنا ، نصف قطر الحدود - ويتم تحديث كل الكائنات التي تشارك هذه الفئة أيضًا.

الحد الأدنى

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

ملاحظة: عندما تشتري شيئًا بعد النقر على الروابط في مقالاتنا ، فقد نربح عمولة صغيرة. اقرأ سياسة الارتباط بالعمولة لمزيد من التفاصيل.
  • Aug 04, 2021
  • 80
  • 0
instagram story viewer