10 نصائح وحيل دريمويفر مفيدة للمبتدئين

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

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

1. عرض ديناميكي مع “عرض لايف”

نحن نعلم بالفعل أن DW تقدم عرضًا ثابتًا لملفاتنا المفتوحة ، ولكن ماذا عن "وجهات النظر الديناميكية" تطبيق مثل وورد?

أولا ، نحن بحاجة إلى يخبار DW ما الإعدادات لاستخدام لتقديم لدينا"وجهات النظر الديناميكية" بشكل صحيح. للقيام بذلك ، حدد إعدادات طلب HTTP من عرض> خيارات العرض المباشر القائمة ، ثم أدخل احصل على أو بريد المعلمات تحتاج إلى عرض التطبيق الخاص بك بشكل صحيح.

ثم عن طريق التحول إلى عرض لايف في DW ، فإنه يحل محل القديم عرض تصميم جزء مع عرض WebKit مباشر مثالي للبكسل في صفحتك ؛ كاملة مع Javascript المباشرة ، ومعالجات DOM ، واستعلامات قاعدة البيانات ، والكود من جانب الخادم ، و CSS المقدم ، بدلاً من رموز العناصر النائبة التي تراها في عرض تصميم.

2. "Code Navigator" هو Firebug لـ DW

أخذ خطوة أبعد هو كل شيء عن رمز المستكشف وعندما في عرض لايف نافذة ، والنقر ALT (Command-Option-click for Mac) في أي مكان في النافذة ، يقدم على الفور الكود الذي قدم هذا العنصر. على غرار ما قد تراه حاليًا في Firefox / Firebug.

3. تجميد جافا سكريبت

نظرًا للطبيعة الديناميكية لـ Ajax ، نحتاج في كثير من الأحيان إلى التفاعل مع صفحة لا يتم فيها عرض بعض العناصر أو توفرها عند تحميل الصفحة الأولى. هذه هي العناصر التي يتم حقنها في الصفحة بعض الوقت بعد تحميل الصفحة. إليك مثال:

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

بدلاً من ذلك ، جرب هذا:

تقديم صفحتك في عرض لايف, ثم ضرب F6 لتجميد جافا سكريبت في أي وقت ، مما يسمح لك باستهداف وتشريح الكود المتعلق بأي عنصر ديناميكي في الصفحة.

4. Live View أفضل صديق التالي - "Live Code"

عند استخدام عرض لايف, يمكنك أيضا تشغيل كود لايف. كود لايف سيقوم بتحديث الكود الخاص بك وأنت تحوم ، وانقر وتفاعل مع العناصر والعناصر في نافذة عرض لايف!

5. جافا سكريبت التلقائي الانتهاء

يأتي Dreamweaver مع إكمال أكواد HTML و CSS ذكية وكاملة, ولكن ماذا عن جافا سكريبت? إذا قمت بتدوين jQuery أو Prototype في Dreamweaver ، فعندئذ يجب أن تعرف أن هناك امتدادات API توفر اكتمال شفرة Javascript. فهو يقلل من الكتابة اللازمة ويمكن أن يكون مفيدًا جدًا للمشفرات السريعة.

انقر هنا لقراءة المزيد ، أو التنزيل:

• jQuery API extension for Dreamweaver
• Prototype API extension for Dreamweaver

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

هل تشبه صفحة الكود خطوط غير منظمة وفوضوية من الكود؟ استخدم ال تطبيق تنسيق المصدر ميزة وإعادة تنسيقه بالضبط لتفضيلاتك. لتنظيفها بسرعة ، انقر فوق تنسيق شفرة المصدر أيقونة في أسفل شريط أدوات الترميز (تحرير> أشرطة الأدوات> الترميز) وحدد إعدادات تنسيق الرمز لضبط التنسيق المفضل لديك.

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

7. الحصول على القطعة

فقط انقر فوق تمديد رمز Dreamweaver (يبدو مثل ترس) في شريط التطبيق الخاص بك وحدد استعرض للوصول إلى Web Widgets. سينقلك هذا إلى Adobe Exchange حيث يمكنك العثور على أدوات إضافية من موردين مثل Yahoo! و JQuery والعديد غيرها..

8. التخريب و Dreamweaver

ونعم ، يدعم Dreamweaver برنامج Subversion (SVN). للمطورين الذين يستخدمون SVN للحفاظ على التحكم في مراجعة مشروعهم ، قد يكون هذا خبرًا جيدًا. مناقشة دريمويفر المطور أندرو فولتير كيف يمكنك استخدام Subversions مع Dreamweaver.

9. لا مزيد من الأساليب الزائدة

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

10. جعل التحقق من صحة النموذج سهلا

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

المكافأة: 3 أكثر

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

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

12. تحقق التوافق المتصفحات

افتح المستند الذي تريد التحقق من توافقه ؛ من شريط القوائم نفسه حيث يتم الوصول إلى طرق العرض Code / Split / Design ، ابحث في أقصى اليمين عن "تحقق الصفحةزر.

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

ملاحظة: لن يتحقق هذا من الإصدارات الجديدة من IE على Mac! لتحديد المتصفحات التي تريد استخدامها للاختبار ، حدد تحقق الصفحة > الإعدادات من القائمة.

13. معاينة صفحات PHP

يتيح لك Dreamweaver تشغيل رموز PHP ومعاينتها داخل البرنامج. إليك كيفية الحصول عليه الإعداد.

ابدء

1. أولا ، حدد موقع -> موقع جديد من أعلى الملاحة.
2. سترى كل من الأساسية و تعريف الموقع المتقدم علامات تبويب الخيار. دعنا المضي قدما عن طريق اختيار علامة تبويب تعريف الموقع المتقدمة.
3. أدخل اسم مجلد للموقع في المربع المناسب (على سبيل المثال ، سنستخدم "myphp" كاسم مجلد).
4. قم بإنشاء مجلد آخر باسم "الصور" عن طريق إدخال اسمه في حقل "مجلد الصور الافتراضي".
5. تحت معلومات محلية, أدخل القيم التالية في الحقول:
   • اسم الموقع: اسم الموقع. لاستخدامها في Dreamweaver فقط
   • مجلد الجذر المحلي: هذا هو اسم الموقع الذي ستعمل فيه. تأكد من تسمية المواقع بطريقة لتقليل التعارضات ، أو إرباك الأسماء.
   • مجلد الصور الافتراضي: هذا اختياري ، لكن يُنصح بإنشائه الآن حيث أن معظم المواقع تستخدم الصور إلى حد ما. هذا هو المكان الذي سيبحث فيه DW لإدراج الصور في المستندات أثناء مرحلة الترميز.
   • روابط نسبة إلى: هذا يعرّف كيف سيتم التعامل مع وثيقة الارتباط في Dreamweaver. يمكنك تحديد إما المستند أو الجذر. الاختلافات بين الاثنين هي:
     • المستند النسبي - سيتم إدراج مسار متعلق بالملف الذي تعمل به والعنصر الذي يتم ربطه به.
     • نسبة الجذر - الاستخدامات / التي تسبب ربط الوثيقة / الملف بالعلاقة مع مجلد الجذر.
     • بديل آخر هو إضافة بعض التكوين إلى ملفات تكوين الخادم. لكونك مهمة أكثر تقدمًا ، سنلتزم فقط باستخدام المستند ذي الصلة في الوقت الحالي.
   • عنوان HTTP: أدخل مجلد جذر الموقع لمشروعك
   • روابط حساسة لحالة الأحرف: سيتحقق Dreamweaver مما إذا كان أي ملف في المشروع يمكن أن يكون له مشكلة حساسة لحالة الأحرف عند التحميل إلى الخادم. سيتم عرض الإشعارات عند استخدام: الموقع -> التحقق من روابط Sitewide. يمكنك تركها محددة إذا كنت تريد. أنا شخصياً لا أتركه محددًا لأنني دائمًا ما أسمي الملفات في أحرف صغيرة. لا يُنصح باستخدام الأحرف الكبيرة.
   • مخبأ: تحقق من تمكين ذاكرة التخزين المؤقت.
6. في ال معلومات عن بعد الصفحة ، إما إعداد FTP الخاص بك أو الوصول الآخر إلى خادم بعيد أو ترك الوصول إلى بلا.
7. في ال خادم الاختبار حدد الصفحة الخيار الذي يتعلق بنوع / نظام الملفات الذي ستختبره.
8. التحكم في الإصدار لن يتم استخدامه في هذا المثال ، لذا يمكنك تركه فارغًا ما لم تكن مألوفة له.
9. التغطية يسمح لك بوضع ملفات بتنسيق .psd و .fla وملفات مصدر أخرى داخل مجلد المواقع الخاصة بك وسيتجاهلها DW عند تحميل / تحديث موقعك.
10. ملاحظات التصميم مثالية لفريق تصميم الويب حيث يحتفظ بمذكرة بشأن التغييرات التي تم إجراؤها على الملفات. يتم التحقق بشكل افتراضي وغرامة بالنسبة لنا لاستخدام هذه الطريقة.
11. غادر ملف عرض العمود, تساهم, و قوالب كما الافتراضي.
12. ال شيق تشير الصفحة ببساطة إلى مجلد أصول Spry الذي يتم تضمينه تلقائيًا في Dreamweaver. ليست هناك حاجة لتغيير هذا. بمجرد الانتهاء من كل إعداد ، انقر فوق حسنا.

معاينة PHP في Dreamweaver

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

هذا كل شئ. Happy Dreamweaver'ing :-)

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