تعلم دريم ويفر

الفهرس



الموضوع رقم الصفحة



الفصل الاول

بدئ العمل مع دريم ويفر..................................... 5

الفصل الثاني

انشاء اول موقع باستخدام دريم ويفر ......................19

الفصل الثالث

اضافة المحتويات الي الموقع ...............................37

الفصل الرابع

تنسيق الصفحات ..............................................71

الفصل الخامس

اوامر التحكم....................................................102

الفصل السادس

كتابة الاكواد في دريم ويفر .................................143

الفصل السابع

تشغيل دريم ويفر لذوي الاحتياجات الخاصة.............147

الفصل الفصل الثامن

الصفحات الديناميكية..........................................154





























الفصل الأول

بدء العمل مع دريم ويفر

أساسيات دريم ويفر

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



المتطلبات الأساسية لتشغيل دريم ويفر

لتشغيل دريم ويفر يجب أن يكون لديك ما يلي:

- بروسيسور بانتيوم واحد على الأقل .

- نظام تشغيل ويندوز 98 أو 2000 أو ويندوز nt أو ويندوز ميلينيوم أو xp .

- متصفح انترنت أصدار 4 أو ما بعده على الأقل .

- رامات 96 ميجابايت .

- مساحة فارغة على القرص الصلب 275 ميجابايت .

- شاشة 256 لون 800× 600 بيكسل .

- مشغل أقراص سى دي



تنصيب دريم ويفر

لتنصيب برنامج دريم ويفر اتبع الخطوات التالية :

1 - أدخل اسطوانة دريم ويفر في مشغل الأقراص .

2 - من قائمة start أختر run ثم أنقر فوق browse وأختر dreamweaver mx installer0exe سيظهر مربع حواري اضغط ok لبدء التنصيب .

3 - اتبع التعليمات لإستكمال عملية التنصيب .

4 - عند الانتهاء أعد تشغيل جهازك .



استخدام دريم ويفر لأكثر من مستخدم

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



طريقة عرض مساحة العمل

في أول مرة تبدأ فيها تشغيل دريم ويفر يظهر مربع الحوار ( شكل رقم 1-1 ) لتختار منه طريقة العرض ويمكن تغييرها بعد ذلك باستخدام طريقه العرض الأخرى .



التعرف على قوائم دريم ويفر

ما يلي شرح مختصر لمكونات برنامج دريم ويفر



و تتكون شاشة دريم ويفر كما هو موضح في من العناصر التالية :


شريط الادراج

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



شريط الادوات

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



نافذة المستند

تعرض المستند الحالي الذي نقوم بالعمل فيه .



نافذة مساعدة

تحتوي على اعدادات مساحة العرض لأغراض مختلفة و تحتوي ايضا علي معلومات عن الخصائص الجديدة للاصدار الجديد من دريم ويفر .



مجموعة لوحات التحكم

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



صف الأكواد

من خلاله يمكن التحكم في أي جزء بالمستند( الجسم , الجدول , الصور وخلافه ) .



شريط الخصائص

يمكنك من التحكم في خصائص مكونات المستند مثل النصوص والصور والخلفية وخلافه .



لوحة بالموقع

تمكنك من إدارة ملفات الموقع من نسخ والغاء و فتح و اغلاق .



القوائم

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



قائمة file ( ملف)

وتشمل وظائف فتح مستند جديد وحفظه والمعاينة في المستعرض وقائمة بآخر الملفات التي تم فتحها .



قائمة edit ( تحرير )

وتشمل وظائف القص واللصق والنسخ والادراج والتحديد والبحث كما تشمل أيضا على مكتبة الأكواد .



قائمة view ( مشاهدة )

تمكنك من مشاهدة مختلف الخصائص للمستند مثل التصميم والأكواد وأنواع مكونات الصفحة وأدوات دريم ويفر المختلفة .



قائمة ) insert إدراج )

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



قائمة ) modifyتعديل )

تمكنك من تعديل خصائص عناصر الصفحة ويمكنك باستخدامها تحرير الأكواد وتغيير الجداول ومكونات الجداول وانجاز مختلف الوظائف لمختلف العناصر الجاهزه .



قائمة text ( نص )

تمكنك من تنسيق النص الذي تكتبه بسهولة .



قائمة commands ( أوامر )

تمكنك من الدخول الى مختلف الأوامر بما في ذلك التنسيق واعداد ألبومات الصور .



قائمة site ( موقع)

تمكنك من فتح وانشاء المواقع .



قائمة window ( نوافذ )

تمكنك من الدخول الى مختلف لوحات التحكم في البرنامج .



قائمة help ( مساعدة )

تقدم تعليمات حول كيفية استخدام دريم ويفر .


التعرف علي نوافذ دريم ويفر



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



نافدة المستند

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



سطر الحالة


(شكل 1-3)



يوجد سطر الحالة الموضح في (شكل 1-3) أسفل نافذة المستند ليقدم معلومات أضافية عن المستند المفتوح حاليا كما يوضح الشكل , كما يلي :

Tag selector

ويمثل هيكل المستند المفتوح حاليا و من خلال المفاتيح الموجودة فية يمكن التنقل داخل المستند.

Windows size pop-up menu

و تستخدم هذه القائمة في تغيير حجم المستند

Document size and download time

وتعطي معلومات عن حجم المستند علي شبكة الإنترنت و الوقت اللازم لفتح الصفحة في المتصفح.


تغيير حجم نافذة المستند



يعرض شريط الحالة الموضح في (شكل 1-3) الحجم الحالي للمستند و يظهر هذا الشريط أسفل صفحة المستند مباشرة , و يمكن تغيير حجم صفحة المستند بالنقر علي السهم الأسود الصغير الموجود بجانب حجم المستند , و بالنقر علي هذا السهم تظهر قائمة منسدله تحتوي علي أحجام مختلفة أختار منها الحجم الذي تريده و أنقر فوقه تلاحظ تغير حجم صفحة المستند .

كما يمكنك أيضا تغيير الأحجام الموجودة في القائمة المنسدله و يكون ذلك باختيار الخيار الأخير بهذه القائمة edit size و بالنقر علية يظهر مربع حواري أختر من هذا المربع الحجم الذي تريده و أضغط ok .

كما يمكنك أيضا إضافة أحجام جديدة الي المربع الحواري السابق وذلك بالنقر بالمساحة الفارغة أسفل الأحجام الموجودة في المربع الصغير تحت خانة width لتحديد عرض القيمة المطلوب أضافتها و في الخانة التي بجوارها لتحديد الطول و في الخانة التي بجوارها لتحديد الخصائص.



ضبط أعدادات شريط الحالة .

لضبط أعدادات شريط الحالة . من قائمة edit أختر preferences أو أضغط مفتاحي control + u يظهر مربع حواري يحتوي علي قائمة أعدادات تسمي category في يمين الشكل و في اليسار تظهر خيارات ضبط هذه الإعدادات و في أسفل الشكل زر و في أسفل الشكل زر ok لحفظ هذه الإعدادات و بالنقر علي أي خاصية في قائمة category تظهر خيارات إعدادها في اليمين و بضبطها و اختيار ok يتم حفظ هذه الإعدادات .



شريط التمرير .



يظهر شريط التمرير في شريط الحالة و يحتوي علي مفاتيح تقوم بفتح و إغلاق النوافذ و نوافذ التحكم.



شريط الأدوات.




يحتوي شريط الأدوات علي مجموعة من المفاتيح التي تمكنك من سرعة التنقل بين العروض المختلفة للمستند , فيمكن من خلال هذا الشريط عرض تصميم المستند كما سيظهر في المتصفح كما يمكن عرض الأكواد التي كتبها دريم ويفر و يمكن أيضا عرض الأكواد و التصميم معا

و لإظهار شريط الأدوات أختر toolbar من قائمة view و منها أختر document

يظهر شريط الأدوات كما هو موضح في شكل رقم (1-5).



شريط الأدوات القياسي .

يحتوي شريط الأدوات القياسي علي مفاتيح تقوم بتنفيذ العمليات المتكررة في قائمتي file و edit مثل فتح ملف جديد و حفظ و حفظ باسم و قطع و نسخ و لصق, و لعرض شريط الأدوات القياسي أختر toolbar من قائمة view و منها أختر standard.



قائمة المهام.

يعطي دريم ويفر استخدامات كثيرة لقائمة المهام لتسهيل تنفيذ كثير من الأوامر , و لفتح قائمة المهام أنقر بزر الماوس الأيمن في أي مكان بالمستند لتظهر قائمة المهام كما في



و في هذه القائمة اضغط علي الأمر الذي تريده بذر الماوس الأيسر لتنفيذه.



شريط الأدراج

يحتوي شريط الأدراج علي مفاتيح لإدراج المكونات مثل الجداول و التنسيقات و الصور , و لإظهار و إخفاء شريط الأدراج اختار insert من قائمة window و لتوسيع و تضييق شريط الأدراج أنقر در التوسيع و التضييق الموجود في يسار شريط الأدراج , لإظهار المفاتيح في شريط الإدراج أنقر فوق مفتاح tab , و لإدراج عنصر أنقر فوق الذر المخصص لهذا العنصر في شريط الإدراج , و لإدراج مكان فارغ لإدراج عنصر أضغط مفتاح control بلوحة المفاتيح أثناء الضغط علي مفتاح هذا العنصر في شريط الإدراج و في هذه الحالة لا يظهر مربع الحوار الخاص بمواصفات العنصر الذي ستقوم بإدراج مكان خالي له , مع ملاحظة أنه ليست كل العناصر في شريط الإدراج يمكن إدراج مكان خالي لها , و يحتوي شريط الإدراج كما هو موضح في (شكل 40) علي عدة قوائم فرعية هي :




Common لإدراج العناصر الشائعة

Layout للتنسيق

Text لإدراج النصوص

Tables' لإدراج الجداول

Forms لإدراج النماذج

Characters لإدراج الرموز و العلامات الخاصة

Media لإدراج ملفات الصوت و الفيديو

Head العناصر الرئيسية

Script لإدراج الإسكريبتات و هي عبارة عن العناصر الخاصة بالميتا

والتي تتعرف عليها محركات البحث

Application و تختص بالعناصر الديناميكية بالصفحة



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

كما يمكن تغيير إعدادات شريط الأدوات باختيار preferences of dreamweaver

من قائمة edit أو بالضغط علي مفتاحي control + u و منها اختار preferences(max os x) و اختار general من قائمة category في اليسار .


شريط الخواص property inspector

يمكنك شريط الخواص الموضح في من إعداد خصائص المستند المفتوح حاليا أو إعداد أحد عناصره مثل الصور و الجداول و النماذج و الروابط و خلافه , و لإظهار و إخفاء مربع التحكم في الخصائص أختار properties من قائمة window


و تختلف مكونات شريط الخواص علي حسب العنصر الذي تحدده سواء كان نصا أو جدول أو نموذج أو صوره , و يوجد سهم صغير في أعلي يسار المربع بالضغط علي هذا السهم يمكنك تكبير أو تصغير المربع .

مجموعة نوافذ الإدارة managing panel

تجمع نوافذ إدارة دريم ويفر معا في يمين الشاشة و يمكن إظهارها أو إخفاؤها أو توسيعها أو تضييفها لكي تساعدك في الوصول لأي منها وذلك عن طريق السهم الموجود في الخط الفاصل بينها و بين باقي شاشة دريم ويفر , كما يمكن إظهارها في شكل شريط , كما يمكن أيضا اختيار أي من هذه القوائم و توسيعها بالنقر علي السهم الأبيض الصغير الموجود برأس النافذة



كما يمكن أيضا سحب هذه القائمة و وضعها في المكان الذي تريده من خلال النقر علي الزر الموجود يسار أعلي النافذة وسحبها بالماوس و وضعها في المكان الذي تريده , كما يمكن التحكم في خصائص النافذة أو تغيير اسمها أو إغلاقها بالضغط بزر الماوس الأيمن علي الزر الموجود أعلي يمين النافذة فتظهر قائمة مختصره



و من خلال هذه القائمة يمكن تغيير أسم القائمة بالنقر علي rename panel group

و كتابة الاسم الذي تريده و أضغط ok و يمكن أيضا إغلاق هذه النافذة و التحكم في باقي خصائصها من خلال هذه القائمة المختصرة , و عند إغلاق هذه النافذة يمكن فتحها مرة أخري بالنقر علي اسمها في قائمة window .



تحديد النوافذ المفضلة

يمكن تحديد أي النوافذ تفضل أن تظهر في واجهة شاشة دريم ويفر و أيها يكون غير ظاهر بالشاشة , كما يمكن أيضا تحديد أي النوافذ يظهر بشريط النوافذ و أيها يظهر في شريط التمرير , و للتحكم في كيفية ظهور النوافذ اختار preferences من قائمة edit أو اضغط مفتاحي control + u يظهر مربع حواري اختار من هذا المربع من قائمة category الموجودة أيسر الشكل من هذه القائمة panels تجد أن خيارات النوافذ تظهر بالجزء الأيمن من الشكل و يوجد به ثلاثة خيارات و يوجد بهم قائمة بالنوافذ و بالنقر أمام أسم النافذة نكون قد حددناها



الخيار الأول : always on top

يتيح لك هذا الخيار تحديد أي النوافذ أي النوافذ تظهر في واجهة البرنامج , و نلاحظ أن محددة للظهور في واجهة البرنامج و بإلغاء تحديد أي منها تختفي من واجهة البرنامج و لا تظهر إلا عند استخدامها .

ملحوظة : لا يمكنك باستخدام هذا الخيار أخفاء كل النوافذ



الخيار الثاني : show icons in panels and launcher

و يؤدي هذا الخيار إلي إظهار النافذة علي شكل أيقونة بشريط التمرير



الخيار الثالث : يتيح هذا الخيار اختيار أي النوافذ بشريط التمرير , ولاختيار أحد النوافذ أنقر فوق علامة (+ ) و لإزالتها أنقر فوق علامة (-)



حدد الخيارات التي تريدها ثم أضغط ok .



نافذة التاريخ history panel

تعرض نافذة التاريخ قائمة بالخطوات التي قمت بها في الصفحة التي تعمل بها منذ بداية فتح هذه الصفحة , و تمكنك نافذة التاريخ من إلغاء أو إعادة أي خطوة سبق و قمت بها



و يشير المؤشر إلى أخر عملية قمت بها , ولإلغاء أخر عملية قمت بها أختر undo من قائمة edit و منها اختر , و لفتح نافذة التاريخ اختر others من قائمة window ومنها اختر history . و لإلغاء عدة خطوات قمت بها أسحب المؤشر إلي هذه الخطوات مع الضغط بزر الماوس الأيسر اذا كانت متتالية أو بالنقر عليها واحدة تلو الأخرى مع الضغط علي مفتاح control إذا كانت غير متتالية و لإلغائها أنقر علي الخط الموجود به المؤشر , كما يمكنك تحديد عدد الخطوات التي يمكن أن تظهر بنافذة التاريخ و ذلك باختيار performances من قائمة edit أو بالضغط علي مفتاحي control + u يظهر مربع حواري أختر منه general من قائمة category و أكتب الرقم الذي تريده في خانة maximum number of history steps ثم أضغط ok و يلاحظ أن الرقم الافتراضي للخطوات المحددة بنافذة التاريخ هو 50 و لإزالة الخطوات الموجودة في نافذة التاريخ أنقر بزر الماوس الأيمن فوق أي خطوة بنافذة التاريخ و من القائمة المختصرة أختر clear history بذلك يتم تفريغ النافذة .

نافذة المساعدة answers

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


الفصل الثاني

إنشاء أول موقع باستخدام دريم ويفير.



يقدم الفصل الجزء مجموعة من الخطوات ترشدك لإنشاء موقع ويب ساكن باستخدام دريم ويفير



إنشاء الموقع

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

وفي الدريم ويفير المقصود بكلمة موقع ما يلي :

- مجموعة من الصفحات المترابطة موجودة علي شبكة الانترنت يمكن زيارتها بواسطة أي متصفح.

- مجموعة ملفات علي السيرفر والتي يتكون منها الموقع

- موقع محلي علي جهازك متصل بموقع منشور علي الانترنت

ويعرف دريم ويفير الموقع بانه مجموعة من الصفحات علي الجهاز المحلي مرتبطة بالموقع علي الانترنت .

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

1_ من صف القوائم اختار site ومنها اختار من القائمة المسند له new site يظهر صندوق الحوار في ( الشكل رقم 2-1).

2 _اختر من الصندوق الحواري من الزر الأعلى basic تظهر صفحة الموقع يطلب منك أن تكتب اسم الموقع .

3 _في المستطيل المحدد لذلك اكتب اسم الموقع ( يمكنك اختيار اى اسم تريده مثل: global car rent أو أي أسم تريده ).