10 المأجورون حول Dreamweaver - أفضل محرر كود لمطوري الويب

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

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

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

1. العرض الديناميكي والعرض المباشر:

يعلم الجميع أن Dreamweaver يقدم عرضًا ثابتًا أو ملفاتنا المفتوحة. ومع ذلك ، يبقى السؤال بلا إجابة حول وجهات النظر الديناميكية لتطبيق مثل WordPress. لتعيين العرض الديناميكي ، نحتاج إلى إخبار Dreamweaver بالإعدادات التي يجب استخدامها لطرق العرض الديناميكية. لتعيين هذا ، انتقل إلى إعدادات طلب HTTP بالنقر فوق عرض> عرض مباشر> قائمة الخيارات ثم أدخل GET أو POST المطلوب لعرض التطبيق الخاص بك بشكل صحيح.

بعد ذلك ، قم بتبديل طريقة العرض Live في Dreamweaver والتي ستحل محل لوحة Design View في WebKit المباشر والكمال بكسل لصفحتك. ثم أكمله باستخدام Javascript المباشر ، ومعالجات DOM ، واستعلامات قاعدة البيانات ، والتعليمات البرمجية من جانب الخادم ، و CSS المعروض ، بدلاً من رمز العنصر النائب من واجهة Design View.

2. Bootstrap لتصعيد التنقل:

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

لإعطائك نظرة سريعة عليه ، فيما يلي عرض توضيحي سريع لكيفية استخدام Bootstrap في تطويرك.

يبدأ تصعيد التنقل باستخدام Bootstrap بحوار المستند الجديد في Dreamweaver. ما عليك سوى النقر فوق الزر Bootstrap Framework في مربع حوار المستند الجديد وأيضًا تحديد مربع اختيار خيار التخطيط المسبق لاستخدام خيارات التنقل المميزة بالكامل مثل ؛

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

إذا وجدت الأمر صعبًا ، فهناك خيار آخر. يسمح لك Dreamweaver بإنشاء شريط التنقل المخصص. إذا كنت تفضل اللوحة المظلمة ، فما عليك سوى إضافة فئة .navbar-inverse إلى علامة <nav>. يمكنك حتى اللعب بها أيضًا. إذا كنت تريد إظهار التنقل أعلى الصفحة دائمًا ، فاكتب .navbar-fixe-top. إذا كنت تريد إظهاره أدناه ، فاكتب .navbar-fix-bottom. جميع فئات Bootstrap هذه قياسية ، ويدعم تلميح التعليمات البرمجية Dreamweaver أيضًا هذه الترميز ، لذلك لا يتعين عليك وضع الترميز بالكامل في الاعتبار. عليك فقط كتابة .navbar في عرض العناصر ، وستحصل على القائمة المنبثقة التي يمكنك من خلالها اختيار الخيار الذي تريده.

3. تجميد JavaScript:

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

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

4. إبراز الرمز:

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

بمجرد تمكين خيار التمييز ، ما عليك سوى النقر نقرًا مزدوجًا فوق أي علامة ، وسيتم تمييز جميع مثيلات العلامة في الصفحة الحالية. ومع ذلك ، يجب تحديد المعلمات. هذه الأداة رائعة لتحديد العناصر المتشابهة والانتقال إليها بسرعة. بمجرد تمييز أي عنصر ، استخدم اختصارات لوحة المفاتيح f3 على جهاز الكمبيوتر ، CMD-G على جهاز Mac) للانتقال من عنصر مظلل إلى العنصر التالي. أيضًا ، يمكن لمعدِّل التغيير الرجوع إلى القسم السابق. علاوة على ذلك ، يعمل تمييز التعليمات البرمجية أيضًا مع سمات وقيم علامات HTML بحيث يمكنك بسهولة تحديد الفئات المحددة.

5. الإكمال التلقائي لجافا سكريبت:

يعد Dreamweaver نظامًا أساسيًا رائعًا يحتوي على أكواد HTML و CSS ذكية وكاملة. رغم ذلك ، يعتقد بعض الناس أن JavaScript غير مكتمل. في حالة jQuery أو Prototype ، في Dreamweaver ، يجب أن تعلم أن هناك ملحقات API توفر أكواد إكمال Javascript. تعمل هذه الأكواد على تسريع عملية التطوير لأنه باستخدام هذه الأكواد ليست هناك حاجة لكتابة نصوص كاملة وتصبح مفيدة جدًا للمبرمجين السريعين.

Dreamweaver هو برنامج تطوير الويب الوحيد الذي يسمح لك باستخدام هذا النوع من أكواد إكمال jQuery و Prototype التي تساعد كل مطور ويب على تسريع مهمتهم وإنتاج أفضل منتج ممكن بأقل جهد ممكن.

6. الوصول إلى الملفات ذات الصلة بسهولة:

CSS و JavaScript هي أسماء الملفات المستقلة التي تراها عند فتح ملفات HTML و PHP. أثناء فتح ملف PHP ، يمكنك رؤيته في أعلى النافذة. نظرًا لوضع كل هذه الخيارات في المقدمة ، يمكنك التبديل بسهولة إلى هذه الملفات وإجراء تغييرات يمكن حفظها دون فتحها. عند النقر فوق أي ملف في شريط الملفات ذات الصلة ، سيظهر لك مصدره في طريقة العرض Code والصفحة الرئيسية في Design View.

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

7. تجميل الرموز على الطاير:

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

هناك طريقة أخرى لتنظيم البرنامج النصي وهي الوصول إلى خيار التنسيق من الأوامر> تطبيق تنسيق المصدر أو تطبيقه فقط على كتلة من التعليمات البرمجية عن طريق تحديد خيار تطبيق تنسيق المصدر على التحديد.

8. الترميز الخالي من النسالة:

بغض النظر عن مدى تزويد Adobe لبرنامج Dreamweaver بأدوات وميزات قوية ، فكلما زاد عملك على مواقع الويب ، زاد العمل الذي يتعين عليك القيام به في جانب الترميز. يمكن أن يؤدي هذا الشيء إلى زيادة مهاراتك ، ولكنه سيفتح أيضًا أبواب الأخطاء التي لا تنتهي لأن الكتابة الكثيرة في الترميز ليست مهمة سهلة. يعرفه Dreamweaver ، ولهذا السبب في أحدث إصدار من Dreamweaver وهو Creative Cloud (CC) توجد ميزة تسمى دعم Linting. Linting هي أداة أساسية للتحقق من بناء جملة البرمجة وهي متاحة لـ CSS و HTML و JavaScript. من خلال هذا ، عندما يحدد Dreamweaver أي مشكلة أو خطأ ، فإنه يرسل عددًا من التوهجات العامة والخاصة.

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

9. التحقق من توافق المتصفحات:

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

عند النقر ، ستفتح قائمة منسدلة ، حدد التحقق من توافق المتصفح فيه وشاهد نتيجة التوافق في نافذة منفصلة.

10. التقليل من التعليمات البرمجية:

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