سنتعرف في درسنا هذا على برنامج دريم ويفر إم إكس Dreamweaver MX.
سأشرح في هذه الدورة على برنامج Dreamweaver MX 2004 لكن إذا كنت تستخدم النسخة الأقدم من MX فلن تجد الإختلاف الكبير وإذا ما واجهت أية مشاكل فأرجو منك طرحها في الساحة المخصصة للأسئلة.
برنامج Dreamweaver برنامج سهل الإستخدام وواجهته غنية بالأدوات التي يسهل الوصول إليها، واللوحات التي تعطيك تحكما أكبر، وهو من أفضل أدوات تحرير صفحات الوب التي تعمل بتقنية WYSIWYG (ما تراه هو ما تحصل عليه).
لنتعرف على هذا البرنامج لا بد من نظرة سريعة على شاشة البدء وساحة العمل، ولا بد أيضا من التعرف على استخدام بعض الأدوات المهمة، تجد هنا صورة لواجهة البرنامج لمستخدمي ويندوز (لن تختلف الواجهة كثيرا عند مستخدمي Mac):
شريط الإدراج:
يحتوي هذا الشريط على مجموعة من الأزرار التي بها تستطيع إدراج العناصر إلى صفحتك كالصور والروابط والجداول وملفات الصوت وملفات فلاش وما إلى ذلك.
طبعا لن تجد كل هذه الأدوات أمامك الآن، فلو كانت كذلك ما استطعت استخدامها نتيجة تكديسها معا ، لكنها مرتبة بطريقة جميلة ومريحة، في شريط الإدراج تجد كلمة Common وبجانبها سهم صغير إضغط عليه واختر الخيار الثاني من القائمة المنسدلة وهو Layout، منه تستطيع إدراج الجداول Tables والطبقات Layers والإطارات Frames، أما في النسخة الأقدم من MX فتجد بدلا من القائمة المنسدلة مجموعة من الخيارات (ألسنة) مصفوفة في أعلى الشريط، طبعا ذكرت هذا كي لا يواجه مستخدموا النسخة الأقدم المشاكل.
شريط الأدوات:
ويحتوي على أزرار تساعدك على التنقل بين وضعيات العمل الثلاث: التصميم والشيفرة والإثنان معا.
التصميم:
يفترض الآن أنك في وضعية التصميم، إذا لم تكن كذلك اضغط على زر Design من شريط الأدوات.
الشيفرة: اضغط على زر Code للإنتقال إلى وضعية الشيفرة.
التصميم والشيفرة معا: اضغط على زر Split للإنتقال إلى هذا الوضعية.
أيضا يحتوي شريط الأدوات على أزرار أخرى تساعدك في إدارة موقعك.
مجموعة اللوحات:
في دريم ويفر تجد العديد من اللوحات التي تساعدك على معاينة موقعك وتغيير وتعديل المعلومات في صفحاته من خلال المحتوى.
اضغط على اسم اللوحة فقط لعرضها ومرة أخرى أيضا لإغلاقها.
نافذة العمل:
هذه هي الصفحة التي تعمل عليها والتي ستقوم بإخراجها في النهاية.
الخصائص:
كل عنصر في دريم ويفر له خصائص معينة، بمجرد الضغط عليه تتغير لوحة الخصائص حسب ما يناسب ذلك العنصر.
الدرس الثاني عمل صفحة وحفظها + التنقل بين وضعيات العمل
عمل صفحة وحفظها
إن الموقع يتكون من عدة صفحات مترابطة، سنتعلم الآن كيفية عمل صفحة جديدة في دريم ويفر وحفظها.
1. من القائمة في أعلى البرنامج اختر File>New.
ومن النافذة New ******** اختر HTML لاحظ الصورة:
2. اضغط ضغطا مزدوجا على الخيار HTML، أو اضغط Create.
3. في الصفحة التي ستفتح عندك أكتب أي نص يعجبك واختر له عنوان مناسب، أريد أن يظهر ما كتبت كالتالي:
4. بعد هذا النص اضغط Enter من على لوحة المفاتيح لعمل سطر جديد، ومن شريط الإدراج اضغط على Image، أيضا لإدراج صورة إذهب إلى قائمة Insert في أعلى البرنامج واختر Image.
ومن النافذة التي ستظهر لك أدخل إلى أي مجلد به صور (My Pictures مثلا) واختر الصورة التي تعجبك.
5. ظلل السطر الأول، ومن شريط الإدراج اختر Text بدلا من Common من الخيارات التي لديك.
ومن الأزرار التي تظهر لديك اضغط على H2، سيتغير حجم الخط.
6. أيضا ظلل السطر الثاني، ومن لوحة الخصائص بالأسفل غير نوع الخط Font إلى Tahoma، والحجم Size إلى 10 points.
طريقة اختيار نوع الخط Tahoma كالتالي:
من القائمة التي تظهر عند اختيار خط معين Font اختر Edit Font list، وأضف Tahoma كما في الصورة:
7. احفظ الصفحة التي قمت بعملها: File>Save، باسم index.htm داخل مجلد باسم my*** (سنستخدمه بعد ذلك).
8. أغلق الصفحة، ولا تغلق البرنامج:
9. افتح الصفحة File>open>index.htm من المجلد my***.
10. ولتستعرض صفحتك في المستعرض اضغط على الزر Preview من شريط الأدوات، واختر البرنامج الذي تريد الإستعراض فيه (لدي IE).
ملاحظة: تستطيع عمل صفحة جديدة وحفظها وفتح الصفحات من خلال الشريط Standard، ولإظهار هذا الشريط إذهب إلى: View>Toolbars>Standard.
التنقل بين وضعيات العمل
تعلمنا كيف ننتقل بين الوضعيات الثلاث: التصميم، والشيفرة، والتصميم والشيفرة معا.
وضعية التصميم Design:
قمنا في الدرس الماضي بتحرير صفحة index.htm في وضعية التصميم.
وضعية الشيفرة Code:
انتقل إلى وضعية الشيفرة كما تعلمت سابقا.
افتح الصفحة index.htm التي قمت بعملها في الدرس الثاني.
غير الكود التالي:
<h2>text</h2>
إلى:
<h3>text</h3>
اضغط على زر *******.
إرجع إلى وضعية التصميم Design ولاحظ الإختلاف.
وضعية التصميم والشيفرة معا Split:
إذهب إلى القوائم في أعلى البرنامج:
File>Revert
سيسألك عما إذا كنت تريد إعادة الصفحة لما كانت عليه وتضييع ما قمت بتغييره.. أضغط Yes.
انتقل إلى وضعية التصميم والشيفرة معا Split كما تعلمت سابقا.
كرر الخطوات السابقة في وضعية الشيفرة
أخذنا شرحا سريعة على واجهة البرنامج، وفصلنا بعض الأشياء الضرورية، قمنا بعمل صفحة وعايناها في المستعرض.
لكن هل قمنا بعمل موقع؟ إلى الآن.. لا
موقع الوب في دريم ويفر عبارة عن مجلد نقوم بتعريفه في دريم ويفر وبذلك نستطيع إدارة موقعنا، والتحكم به يصبح سهلا.. كيف؟
إن موقع الوب في دريم ويفر يحتوي على جميع صفحات الموقع وغيرها من الوسائط والعناصر، كل هذا سيعرض في دريم ويفر مما يسهل عمليات الحذف وتغيير الأسماء والأماكن، هذا يسهل على دريم ويفر تجديد الروابط المكسورة.
أيضا يسهل ذلك معاينة وإدارة الملفات على السيرفر من خلال دريم ويفر.
1. لعمل موقع ويب في دريم ويفر اتبع الآتي:
Site>Manage Sites
2. من النافذة Manage Sites اضغط New، ومن القائمة المنسدلة اختر Site.
ملاحظة: في النسخة الأقدم من MX سيكون ذلك هكذا: Site>New Site
3. لديك في أعلى النافذة Site Definition لديك خياران Basic و Advanced سنختار هنا Basic.
4. في مربع الإسم أكتب اسم موقعك وسيكون عنوان موقعنا هنا My ***.
5. اضغط Next.
6. الآن سيسألك إذا ما كنت تريد استخدام لغة برمجة معينة في حالتنا طبعا لن نستخدم ذلك اختر No.
7. اضغط Next.
8. في هذه النافذة يعطيك خياران:
الأول: عمل الموقع محليا ثم رفعه إلى سيرفر
الثاني: عمل الموقع على السيرفر حالا
9. اختر الخيار الأول لأننا سنتعلم كيف نرفع الموقع لاحقا.
10. واختر أين ستضع مجلد الموقع، في حالتنا سنستخدم المجلد الذي قمنا بإنشاءه وهو my***، وهذا عندي:
D:My ********smy***
11. اضغط Next.
12. كيف تتصل بموقعك يعطيك خيارات:
None لا شيء.
FTP عن طريق بروتوكول FTP.
Local/Network إذا كنت تستخدم مجلد في شبكة أو على سيرفر في جهازك.
RDS إذا كنت تتصل بموقعك عن طريق RDS.
SourceSafe Data**** إذا كنت تتصل بموقعك عن طريق SourceSafe Data****.
***DAV إذا كنت تتصل بموقعك عن طريق ***DAV.
a. في حالتنا سنستخدم FTP (لمن لديه موقع يدعم الـFTP) وعليه يجب ملء البيانات التي سيطلبها البرنامج كما تعطيك الشركة المستضيفة.
b. وأيضا سنستخدم Local/Network لرفع موقعنا على سيرفر موجود في الجهاز (لمن ليس لديه موقع) لكن أيضا في حالتنا سنخزنه في مجلد آخر بجانب الأول باسم lacal_my***:
D:My ********slacal_my***
13. اضغط Next
14. سيسألك عما إذا كنت تريد عمل دخول وخروج للملف اختر No هذه الوظيفة مهمة لمن يعمل مع مجموعة على الإنترنت للتأكد من عدم دخول أكثر من شخص للملف الواحد.
15. اختر No كما قلنا و اضغط Next
16. سيعرض لك معلومات موقع اضغط Done
17. ثم Done
18. ماذا لو أننا نريد تعديل بعض المعلومات في موقع الوب الذي أنشأناه؟
19. لعمل ذلك إذهب إلى Site>Manage Sites ومنها حدد My *** إذا كان هناك أكثر من موقع.
20. اضغط على زر Edit
21. عدل المعلومات المطلوبة (في حالتنا لن نعدل على الموقع شيء).
22. ثم Done
نم مهاراتك في استخدام دريم ويفر
لنجر بعض التمارين السريعة لننم مهارتنا في استخدام هذا البرنامج ولنشعر بالحرية عند تحرير صفحات مواقعنا فيه.
لنقم بعمل صفحة في موقع الوب الذي أنشأناه، نغير خصائصها، ونضع فيها بعض العناصر من كتابة وصور، لحظة! لا تنشئ الصفحة كما تعلمت سابقا.. سنتعلم طريقة جديدة، لنتابع الخطوات التالية:
1. من نافذة الملفات Files تأكد أنك في الموقع المطلوب (My ***).
2. وهناك اضغط بيمين الفأرة في أي مساحة فاضية ومن القائمة المنسدلة اختر New File
3. سمها page.htm
4. افتحها عن طريق النقر المزدوج عليها، أو بز الفأرة اليمين ومنها Open
5. أسفل البرنامج هل ترى لوحة الخصائص؟ هناك نعم.. اضغط على Page Properties
6. غير المعلومات حسب الصورة التالية:
7. ثم OK
8. أكتب أي نص بعنوان كما قمنا به سابقا
9. حدد العنوان وغيره إلى H2 كما تعلمت سابقا.
10. حدد النص وغير اللون إلى #006666، والحجم إلى 14 px، والنوع إلى Times New Roman
11. أسفل النص ضع الصورة التي قمت بوضعها في صفحة index.htm ولكن هذه المرة قم بنسخها إلى مجلد images داخل مجلد my***.
هذا المجلد لحفظ الصور بداخله.
12. احفظ الصفحة واستعرضها.. ثم أغلقها.
الدرس الخامس والأخير الروابط التشعبية + رفع الموقع
الروابط التشعبية:
كلنا يعلم ما هي الروابط التشعبية ولماذا نستخدمها لذلك لن أدخل في تفاصيلها، هي بشكل مختصر وسيلة للتنقل من صفحة في الموقع إلى أخرى، أو من صفحة في الموقع إلى صفحة أخرى في موقع آخر، أو حتى التنقل إلى أماكن مختلفة في الصفحة الواحدة، وغالبا ما تكون عبارة عن نص يختلف عن النص العادي ويتغير شكل مؤشر الفأرة عندما يمر عليه، أو عبارة عن صورة يتغير شكل مؤشر الفأرة عندما يمر عليها، هذا عادة وهناك طرق مختلفه لعمل الروابط، وغايات مختلفة أيضا.
1. في البداية قم بكتابة ثلاث كلمات في صفحة جديدة، كل كلمة في سطر.
2. اختر أول كلمة ومن لوحة الخصائص في ستجد مربع نص لكتابة الرابط فيه، لاحظ الصورة:
أكتب فيه عنوان الصفحة المراد الإنتقال إليها.
3. أو بالضغط على صورة المجلد لفتح نافذة، ومنها اختر الصفحة المراد الإنتقال إليها.
4. هنا أداة جميلة تسما point-to-file وهي عبارة عن مؤشر.
طريقة عمل هذا المؤشر هي بعد تحديدك للنص المراد عمل رابط له اضغط على هذا المؤشر، وقم بسحبه مع استمرار الضغط إلى أي صفحة في لوحة الملفات على اليمين:
5. ذاك بالنسبة للكلمة الأولى أما بالنسبة للثانية فبعد تحديدك لها اضغط بيمين الفأرة على الكلمة ومن القائمة المنسدلة اختر Make link، ستظهر لك نافذة منها اختر الصفحة المراد الإنتقال إليها.
6. الآن حدد الكلمة الثالثة واضغط على زر الربط من شريط الإدراج
واكتب الرابط في مربع النص Link، أو إضغط على المجلد
7. ينطبق ما ذكر في النقطة السابقة على الربط للبريد الإلكتروني .
8. ويمكنك عمل النقطتين السابقتين دون تحديد نص وذلك بتحديد النص في مربع النص Text.
9. أخيرا لعمل روابط للصور استخدم الطرق في النقط 2،3،4.
رفع الموقع:
سبق أن وضحنا كيفية الإتصال بالموقع لرفع ملفاتنا، طبعا بعد التأكد من جاهزية موقعك لنشره على الإنترنت، قم بتوضيح طريقة اتصالك بالملقم Server بالطرق التي وضحناها سابقا، والطريقة الأشهر هي عن طريق بروتوكول FTP، لاحظ الصورة التالية:
طبعا هذه المعلومات يعطيك إياها مزود خدمة الإستضافة والذي قمت بحجز مساحة لديه.
1. في البداية نحتاج لعمل اتصال من لوحة الملفات اضغط على هذا الزر لعمل اتصال
بعد نجاح الإتصال سيغدو بهذا الشكل
2. لرفع الملفات اختر الملفات المراد رفعها أو المجلد بأكمله، اضغط على الزر ذو السهم الأزرق Put والذي يعني Upload، وذلك بعد التأكد من أنك في الـLocal view.
3. لتنزيل الملفات، اختر الملفات المراد تنزيلها أو المجلد بأكمله، اضغط على الزر ذو السهم الأخضر Get الذي يعني Download، وذلك بعد التأكد من أنك في الـRemote view.
4. لقطع الإتصال إضغط على زر الإتصال سيتغير شكله إلى الوضع العادي
هذا بالنسبة لطريقة FTP أما الطريقة الأخرى فهي:
Local/Network إذا كنت تستخدم مجلد في شبكة أو على سيرفر في جهازك.
ببساطة نحدد مجلد السيرفر على الجهاز أو الشبكة (قمنا بهذه الخطوة في الدرس الثالث "الخيار b") ثم Put.
طرق أخرى لرفع المواقع:
RDS إذا كنت تتصل بموقعك عن طريق RDS.
إختصار لـ Remote Development Services، تحتاج هذه الطريقة إلى Server ColdFusion أو على جهاز يعمل به الـ ColdFusion، ويتم الوصول إليه عن طريق HTTP.
SourceSafe Data**** إذا كنت تتصل بموقعك عن طريق SourceSafe Data****.
يجب أن تثبت النسخة السادسة أو أعلى من Microsoft Visual SourceSafe وهو لتخزين شيفرة المصدر والملفات النصية ومحتويات المواقع.
***DAV إذا كنت تتصل بموقعك عن طريق ***DAV.
إختصار لبرتوكول ***-****d Distributed Authoring and Versioning، وهو شكل لامتداد HTTP، يسمح هذا البروتوكل بتحرير وتنظيم الملفات على جهاز سيرفر، وتحتاج إلى سيرفر يدعم هذا البرونوكول كسيرفر IIS أو أباتشي.
يارب اكون وفقت في هذه الدورة واكون نلت اعجابكم اخواني اخوكم RedTiger WwW.RedTigerCo.CoM/vb
كم افرحنى دروسك التي تتكلم عن برنامج قد يجعلك تبرمج وانت لا تعرف الا قليل عن برمجة بي لغة كانت يسطر ويصحح لك الاخطاء في كتابة الاكواد يساعد على انجاز الاسرع مع الجقة العالية وايضا يتعمال مع المعاير القاسية بقوة وبشكل رائع جدا ومفيد يساعدك على تنسيق صفحات ويب
وكثير من مميزات الي لازت اوصل شرحها وتوضيحها للاخوان
[دورة] تعليم برنامج الدريم ويفر الشهير
النمط المتتابع
