بسم الله الرحمن الرحيم
سنتعرف في درسنا هذا على برنامج دريم ويفر إم إكس Dreamweaver MX.
سأشرح في هذه الدورة على برنامج Dreamweaver MX 2004 لكن إذا كنت تستخدم النسخة الأقدم من MX فلن تجد الإختلاف الكبير وإذا ما واجهت أية مشاكل فأرجو منك طرحها في الساحة المخصصة للأسئلة.
برنامج Dreamweaver برنامج سهل الإستخدام وواجهته غنية بالأدوات التي يسهل الوصول إليها، واللوحات التي تعطيك تحكما أكبر، وهو من أفضل أدوات تحرير صفحات الوب التي تعمل بتقنية WYSIWYG (ما تراه هو ما تحصل عليه).
لنتعرف على هذا البرنامج لا بد من نظرة سريعة على شاشة البدء وساحة العمل، ولا بد أيضا من التعرف على استخدام بعض الأدوات المهمة، تجد هنا صورة لواجهة البرنامج لمستخدمي ويندوز (لن تختلف الواجهة كثيرا عند مستخدمي
شريط الإدراج:
يحتوي هذا الشريط على مجموعة من الأزرار التي بها تستطيع إدراج العناصر إلى صفحتك كالصور والروابط والجداول وملفات الصوت وملفات فلاش وما إلى ذلك.
طبعا لن تجد كل هذه الأدوات أمامك الآن، فلو كانت كذلك ما استطعت استخدامها نتيجة تكديسها معا ، لكنها مرتبة بطريقة جميلة ومريحة، في شريط الإدراج تجد كلمة Common وبجانبها سهم صغير إضغط عليه واختر الخيار الثاني من القائمة المنسدلة وهو Layout، منه تستطيع إدراج الجداول Tables والطبقات Layers والإطارات Frames، أما في النسخة الأقدم من MX فتجد بدلا من القائمة المنسدلة مجموعة من الخيارات (ألسنة) مصفوفة في أعلى الشريط، طبعا ذكرت هذا كي لا يواجه مستخدموا النسخة الأقدم المشاكل.
شريط الأدوات:
ويحتوي على أزرار تساعدك على التنقل بين وضعيات العمل الثلاث: التصميم والشيفرة والإثنان معا.
التصميم:
يفترض الآن أنك في وضعية التصميم، إذا لم تكن كذلك اضغط على زر Design من شريط الأدوات.
الشيفرة: اضغط على زر Code للإنتقال إلى وضعية الشيفرة.
التصميم والشيفرة معا: اضغط على زر Split للإنتقال إلى هذا الوضعية.
أيضا يحتوي شريط الأدوات على أزرار أخرى تساعدك في إدارة موقعك.
مجموعة اللوحات:
في دريم ويفر تجد العديد من اللوحات التي تساعدك على معاينة موقعك وتغيير وتعديل المعلومات في صفحاته من خلال المحتوى.
اضغط على اسم اللوحة فقط لعرضها ومرة أخرى أيضا لإغلاقها.
نافذة العمل:
هذه هي الصفحة التي تعمل عليها والتي ستقوم بإخراجها في النهاية.
الخصائص:
كل عنصر في دريم ويفر له خصائص معينة، بمجرد الضغط عليه تتغير لوحة الخصائص حسب ما يناسب ذلك العنصر.
عمل موقع ويب في دريم ويفر
أخذنا شرحا سريعة على واجهة البرنامج، وفصلنا بعض الأشياء الضرورية، قمنا بعمل صفحة وعايناها في المستعرض.
لكن هل قمنا بعمل موقع؟ إلى الآن.. لا
موقع الوب في دريم ويفر عبارة عن مجلد نقوم بتعريفه في دريم ويفر وبذلك نستطيع إدارة موقعنا، والتحكم به يصبح سهلا.. كيف؟
إن موقع الوب في دريم ويفر يحتوي على جميع صفحات الموقع وغيرها من الوسائط والعناصر، كل هذا سيعرض في دريم ويفر مما يسهل عمليات الحذف وتغيير الأسماء والأماكن، هذا يسهل على دريم ويفر تجديد الروابط المكسورة.
أيضا يسهل ذلك معاينة وإدارة الملفات على السيرفر من خلال دريم ويفر.
1. لعمل موقع ويب في دريم ويفر اتبع الآتي:
Site>Manage Sites
2. من النافذة Manage Sites اضغط New، ومن القائمة المنسدلة اختر Site.
ملاحظة: في النسخة الأقدم من MX سيكون ذلك هكذا: Site>New Site
3. لديك في أعلى النافذة Site Definition لديك خياران Basic و Advanced سنختار هنا Basic.
4. في مربع الإسم أكتب اسم موقعك وسيكون عنوان موقعنا هنا My Web.
5. اضغط Next.
6. الآن سيسألك إذا ما كنت تريد استخدام لغة برمجة معينة في حالتنا طبعا لن نستخدم ذلك اختر No.
7. اضغط Next.
8. في هذه النافذة يعطيك خياران:
الأول: عمل الموقع محليا ثم رفعه إلى سيرفر
الثاني: عمل الموقع على السيرفر حالا
9. اختر الخيار الأول لأننا سنتعلم كيف نرفع الموقع لاحقا.
10. واختر أين ستضع مجلد الموقع، في حالتنا سنستخدم المجلد الذي قمنا بإنشاءه وهو myweb، وهذا عندي:
D:My Documentsmyweb
11. اضغط Next.
12. كيف تتصل بموقعك يعطيك خيارات:
None لا شيء.
FTP عن طريق بروتوكول FTP.
Local/Network إذا كنت تستخدم مجلد في شبكة أو على سيرفر في جهازك.
RDS إذا كنت تتصل بموقعك عن طريق RDS.
SourceSafe Database إذا كنت تتصل بموقعك عن طريق SourceSafe Database.
WebDAV إذا كنت تتصل بموقعك عن طريق WebDAV.
a. في حالتنا سنستخدم FTP (لمن لديه موقع يدعم الـFTP) وعليه يجب ملء البيانات التي سيطلبها البرنامج كما تعطيك الشركة المستضيفة.
b. وأيضا سنستخدم Local/Network لرفع موقعنا على سيرفر موجود في الجهاز (لمن ليس لديه موقع) لكن أيضا في حالتنا سنخزنه في مجلد آخر بجانب الأول باسم lacal_myweb:
D:My Documentslacal_myweb
13. اضغط Next
14. سيسألك عما إذا كنت تريد عمل دخول وخروج للملف اختر No هذه الوظيفة مهمة لمن يعمل مع مجموعة على الإنترنت للتأكد من عدم دخول أكثر من شخص للملف الواحد.
15. اختر No كما قلنا و اضغط Next
16. سيعرض لك معلومات موقع اضغط Done
17. ثم Done
18. ماذا لو أننا نريد تعديل بعض المعلومات في موقع الوب الذي أنشأناه؟
19. لعمل ذلك إذهب إلى Site>Manage Sites ومنها حدد My Web إذا كان هناك أكثر من موقع.
20. اضغط على زر Edit
21. عدل المعلومات المطلوبة (في حالتنا لن نعدل على الموقع شيء).
22. ثم Done
نم مهاراتك في استخدام دريم ويفر
لنجر بعض التمارين السريعة لننم مهارتنا في استخدام هذا البرنامج ولنشعر بالحرية عند تحرير صفحات مواقعنا فيه.
لنقم بعمل صفحة في موقع الوب الذي أنشأناه، نغير خصائصها، ونضع فيها بعض العناصر من كتابة وصور، لحظة! لا تنشئ الصفحة كما تعلمت سابقا.. سنتعلم طريقة جديدة، لنتابع الخطوات التالية:
1. من نافذة الملفات Files تأكد أنك في الموقع المطلوب (My Web).
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 داخل مجلد myweb.
هذا المجلد لحفظ الصور بداخله.
12. احفظ الصفحة واستعرضها.. ثم أغلقها
السلام عليكم ورحمة الله وبركاته
رمضان مبارك سعيد أخواني الكرام
التعامل مع الجداول:
إن الجداول هي من أهم الأدوات التي يستخدمها مصممو المواقع، فلا تجد موقعا رتبت في الصور، والنصوص والخلفيات وغيرها من الوساءط دون استخدام الجداول.
إن الجدول عبارة عن مجموعة من الصفوف الأفقية والأعمدة، التي تستطيع دمجها وفصلها وترتيبها في برنامج دريم ويفر.
إن برنامج دريم ويفر يتيح لك التعامل مع الجداول بسهولة حتى الخبراء في تصميم الموقع يتيع لهم دريم ويفر أداوة قوية لتقطيع الجدوال.
1. عمل جدول جديد
من قائمة الإدراج إضغط على زر الجدول و حدد القيم كما في الصورة التالية:
2- لتعديل هذا الجدول سواء بدمج إحدى خلايا هذا الجدول مع الأخرى أو في إنشاء خلايا جديدة
حدد أول ثلاث خلايا في الجدول وبزر الفأرة الأيمن اختر من القائمة المنسدلة:
Table>Merge cell
لتقسيم خلية نختار أول خلية من اليمين من الصف الثاني
Table>Split cell
اترك القيم كما هي و اضغط ok
3. على أحد خطوط الجدول سيتغير شكل مؤشر الفأرة، الآن إضغط ضغطة واحدة بزر الفأرة الأيسر
سيتحدد الجدول بخط أسود.
من لوحة الخصائص properties غير القيم حسب الصورة التالية:
4. للكتابة داخل الجدول نضغط بمؤشر الفأرة في أي خلية نريد الكتابة فيها ونكتب بشكل عادي كما تعلمنا سابقا و كذلك الحال عند إدراج الصور.
مثلا ضع صورة في الخلية الأولى من السطر الثاني و نكتب في الخلية الثانية من السطر الثاني كلمة محمد، ومن لوحة الخصائص اختر وضعية النص العمودية سواء في الأعلى أو الأسفل أو الوسط
القوالب Templates:
1. لعمل قالب template جديد إتبع الآتي:
File>New
و من النافذة اختر Template ومنه HTML
2. لعمل Editable Region
Insert>Template objects>Editable region
احفظ القالب بأي أسم (مثلا 1)
3. لإدراج قالب إلى صفحة قم بالتالي
Modify>Template>Apply template to page
4. ومن الـ Editable regionأكتب أي نص بداخله وأدرج أي صورة
5. لتعديل القالب افتحه
File>Open
ومن النافذة اختر القالب الذي قمت بحفظه.
غير فيه ما شئت (مثلا ضع في الأسفل الحقوق والسنة) ومن ثم قم بحفظه
لتعديل القالب
ملحوظة لابد من أن يكون لنا قالب في الجهاز قمنا بتحميله من نت مجانا أوشرائه
الخظوة التالية نقوم بفتح dreamweaver
File>Open
ومن النافذة اختر القالب الذي قمت بحفظه.
ونبدأ بتغيير فيه كيف نشاء نحن
القوالب templates عبارة عن هياكل جاهزة يمكنك استخدامها في إنشاء أنواع مختلفة من مواقع وصفحات الويب . وإلى جانب كونها هياكل جاهزة
مع تحيات رئيس جمعية مارينا للشباب بمدينة أبي الجعد إقليم خريبكة المغرب
