التخطي إلى المحتوى الرئيسي
Dreamweaver



إن من أشهر البرامج استخداما في برمجة صفحات الويب الديناميكية هو Dreamweaver . قبل أن تتحد شركتا Adobe و Macromedia كان Dreamweaver هو إصدار شركة Macromedia ولم يكن يدعم اللغة العربية بشكل كامل, أما الآن فقد أصبح Dreamweaver من إنتاج شركة Adobe المشهورة .

فقد ظهر Dreamweaver CS2 و Dreamweaver CS3 و Dreamweaver CS4 و مؤخرا ً Dreamweaver CS5.

إن إصدارات CS والتي تحمل اللاحقة ME (Middle East) قد بدأت عمليا ً الدعم المتواصل للغة العربية على طول السنوات المنصرمة وبدءا ً من الإصدار CS3 الذي قدم دعما ً كاملا ً للغة العربية سواء باستخدام واجهة تصميم الصفحات أو الواجهة البرمجية.

يمكنك شراء برنامج Adobe Dreamweaver ذو إصدارات CS ME من المكتبات المتوفرة بمنطقتك أو من خلال الانترنت, وعادة يتم بيع حزمة Adobe الكاملة التي تتضمن برامج تصميم ومعالجة الصور والصوت وتحرير الفيديو وغيرها من البرامج المهمة للمصممين في مختلف المجالات.

بالنسبة لي فأنا استخدم برنامج Adobe Dreamweaver CS3 ME ولذا سأقوم بشرح طريقة تثبيته أما بالنسبة لبقية الإصدارات فلا تختلف عملية تثبيتها تقريبا.

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

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





في الصفحة الرئيسية للبرنامج ستشاهد على اليسار قائمة الملفات التي فتحتها مؤخرا أما في الوسط Create New فمنها يمكنك إنشاء الملفات بالصيغ المختلفة مثل HTML, ColdFusion, PHP, ASP وغيرها من لغات برمجة صفحات الويب الديناميكية والاستاتيكية, كما يوجد في الأسفل خانة Properties حيث تعرض خصائص العنصر أو النص أو الصورة مثل اللون والحجم وإمكانية تعديلها, أما الشريط الجانبي (على اليمين) فيحتوي على CSS وهي خانة عرض خصائص صفحات الأنماط الانسيابية التي تستخدم في بناء صفحة الويب من الناحية الشكلية, وكذلك يوجد Application الذي يحتوي على مجموعة مميزات تسهل عملية البرمجة مثل الاتصال بقاعدة البيانات وتفاعل صفحات المخدم وأوامر تتعلق بالصفحات الديناميكية, وكذلك خانة Tag Inspector التي تحتوي على الخصائص العامة للصفحة الحالية والمؤثرات التي يمكن إضافتها للصفحة كمؤثرات DHTML و JavaScript .

أما خانة Files فهي تستعرض مسار المشروع الحالي الذي تقوم بالعمل عليه سواء كان في حاسوبك الشخصي أم على مساحة على الويب ويُظهر الملفات الموجودة وإمكانية رفع ملفات جديدة وحذف أخرى والكثير من المميزات الأخرى الموجودة.

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

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


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

لذا لتكون لوحة مفاتيحك مستعدة وأنت أيضا, ولا بأس بكوب قهوة إثناء التعلم.

تعليقات

المشاركات الشائعة من هذه المدونة

الفرق بين unlocked و locked في الهواتف المحمولة

في بعض الاحيان تلاحظ وجود كلمة unlocked بعد اسم المنتج على علبة الهاتف المحمول, او ربما يسألك البائع اذا ماكنت تريد الهاتف لشبكة اتصالات معينة ام حرا... في بعض الهواتف كهاتف iphone يتوافر نوعان منه locked و unlocked حيث الهاتف المقفل locked   يكون متاحا ويعمل على شبكة اتصالات محددة في بلدك تختارها انت بنفسك ويكون سعر الهاتف المقفل بقدر ربع السعر الحقيقي للهاتف الغير مقفل, وهذا النظام هو صفقات توقع بين شركات الهاتف وشركات الاتصالات, ومن مساوء هذه الاجهزه هو حالما تسافر الى بلد اخر سيتوقف الجهاز عن العمل تماما ولا يمكنك تشغيله على بطاقة شريحة SIM اخرى, لذا سيكون الهاتف عديم الفائدة, اما الهواتف الغير مقفلة unlocked فهي هواتف عادية تعمل على اي نوع من شبكات الاتصالات ويكون سعرها باهض جدا مقارنة بالهواتف المقفلة. 

انشاء صفحة تسجيل دخول

مستوى الدرس:  متوسط اللغات المستخدمة:   PHP ,  SQL, HTML  كما أفترض ان لديك معرفة مسبقة بأساسيات لغة SQL والقليل من PHP   . البرامج المستخدمة:  مخدم  WAMP ، برنامج Adobe Dreamweaver CS5 او اي محرر "كود" برمجي . الصفحات التي سوف ننشئها :   Index.html   process.php   welcome.html ان انشاء صفحة تسجيل دخول حقيقية ليست بالصعوبة التي تتصورها فكل الية تسجيل دخول تتشابه بالاساسيات وربما تختلف من ناحية الجرافكس او شدة الاجراءات الوقائية, في النهاية كلها تتألف من ثلاث مراحل (ادخال البيانات, التحقق من وجود البيانات في قاعدة البيانات, التصرف في حال وجودها ام عدمه) لاشيء اخر وكلها في غاية السهولة!! تابع معي: الخطوة الاولى يجب ان ننشىء جدول في قاعدة البيانات يحتوي على جدول مكون من ثلاثة حقول (id, user, pass) وسندخل بعض المعلومات عن اسماء مستخدمين وكلمات السر كما هو موضح في الصورة: لقد ادخل معلومات مستخدم واحد كما هو موضح , والان لننتقل الى الخطوة التالية: الخطوة الثانية انشاء الصفحات الثلاث (صفحة استقبال المعلومات, صفحة معالجة المعلومات والتحقق من وجودها في قاعدة الب

انشاء نموذج الاتصال بنا

مستوى الدرس:  متوسط اللغات المستخدمة:   PHP ,   HTML  كما أفترض ان لديك معرفة مسبقة بأساسيات لغة PHP   . البرامج المستخدمة:  مخدم  WAMP ، برنامج Adobe Dreamweaver CS5 او اي محرر "كود" برمجي . الصفحات التي سوف ننشئها :   contact.php process.php ان من الصفحات الاساسية في كل موقع هي صفحة تمكن الزائرين من الاتصال بصاحب الموقع, او المدونة او الشركة او غيرها.حيث غالبا هذه الصفحات تتكون من نماذج اتصال مثل (نموذج دردشة, نموذج ارسال رسالة) وغيرها , كما تحتوي على معلومات اتصال اخرى. نماذج الاتصال تستخدم صفحات ديناميكية لمعالجة طلب الاتصال فمثلا لو كان نموذج دردشة مع خدمة الزبائن فمن خلال الصفحة الديناميكية يتم التأكد ما ان كان الموظف متواجد ام لا وعلى هذا الاساس يتم تفعيل صفحة برنامج الدردشة والذي غالبا يكون بلغة  JavaScript . لنركز على نموذج الاتصال الشائع والذي من خلاله يمكنك ارسال رسالة تحتوي على اسمك وبريدك الالكتروني ومحتوى الرسالة الى بريد الشركة او الموقع بدون استخدام خدمات البريد التقليدية... فكيف يعمل؟ سنقوم في هذا الدرس بأنشاء صفحة (اتصل بنا) تحتوي على