دورة تعلم الفرونت بيج بالصور وشرح كامل ووافى للمبتدئيين

بسم الله الرحمن الرحيم
نفتتح الدورة بأول درس وهو التعرف على فرونت بيج xp
أساسيات فرونت بيج :
يعد
فرونت بيج من أهم البرامج استخداماً في إنشاء صفحات الويب وذلك للمزايا
التي يتمتع بها من حيث السهولة في التعامل إضافة إلى الإمكانيات التي يتمتع
بها . ويبين ( الشكل 1 - 1 ) الواجهة الأساسية التي ستراها عند العمل في
فرونت بيج .

1 - 1
في الجانب الأيسر ستجد شريط العرض Views Bar
. هذا الشريط يتيح لك سرعة تغيير طرق العرض الخاصة بصفحات الويب فضلاً عن
تغيير الخصائص المتنوعة في البرنامج . ومن طرق العرض Navigation والذي
يتعلق بإنشاء أشرطة التحرك ، وأيضاً عرض المهام Tasks .
نظراً لأنك ستقضي معظم وقتك في استخدام فرونت بيج كمحرر لصفحات الويب ، فمن المفضل أن تقوم بإزالة شريط العرض ، كما يلي :
1- افتح قائمة View .
2-
قم بإلغاء تحديد خيار Views Bar لإزالة علامة الاختيار من أمامه ( أنظر
الشكل 2 - 2 ) ، سيختفي بذلك شريط العرض وهذا يفيد من أجل الحصول على عرض
في برنامج فرونت بيج يماثل عرض متصفح الانترنت .

2 - 2
بعد إخفائك شريط العرض يمكنك أيضاً الوصول إلى خيارات العرض الأخرى الخاصة بالموقع الذي أنشأته , وذلك من خلال قائمة View .
في فرونت بيج يمكنك الوصول إلى أكثر الخصائص استخداماً من خلال أشرطة الأدوات القياسية التسعة .
كيفية إنشاء موقع ويب :
عندما
تقوم بإنشاء مجموعة صفحات للويب لوضعها في موقع على الويب . فإن فرونت بيج
يتيح لك تجميع تلك الصفحات في وحدة واحدة ليطلق عليها في النهاية " ويب "
Web . رغم أننا نستخدم فرونت بيج إنشاء وتعديل الصفحات الفردية دون القيام
بإنشاء موقع ويب ، فإنك ستجد تحفيزاً قوياً على إنشاء موقع ويب يجمع
الصفحات التي أنشأتها . وذلك للأسباب التالية :
يحتوي فرونت بيج على عدة خصائص لفحص سلامة الصفحات التي تقوم بإنشائها وسلامة الارتباطات في تلك الصفحات .
فرونت بيج مصمم ليتيح لك إرسال الصفحات التي تنشئها إلى أحد أجهزة خادم الويب وذلك كوحدة واحدة .
عند إنشاء أحد المواقع يمكنك استخدام أداة التحرك التلقائية في فرونت بيج لإنشاء أشرطة تحرك خاصة بموقعك .
الاحتفاظ بصفحات الويب التي تنشئها داخل موقع واحد يتيح لك استخدام المجلدات Folders لتنظيم الملفات .
أيضاً يتيح لك ذلك استخدام التقارير Reports لتسهيل فحص موقعك .
إذا
قمت بإنشاء موقع ويب جديد ، ينشئ فرونت بيج مجلد جديد مستخدماً اسم الموقع
ثم تستطيع تخزين ملفاتك أو إضافتها إلى موقعك داخل هذا المجلد أو مجلدات
فرعية أخرى .
قم بإنشاء أول موقع ويب خاص بك :
1- من قائمة File ، حدد خيار New ثم Page or Web لتفتح مربع حوار يمين الشاشة ( انظر الشكل 3 - 3 ) .
2- حدد خيار Empty Web ومن بين القوالب المتاحة حدد One Page Web .
3- حدد موقع مجلد الويب وضع اسماً لموقع الويب الذي تقوم بإنشائه .
4- انقر زر OK في حالة عدم وجود مجلد الويب ، سيطلب منك إنشاؤه في هذه الحالة انقر زر yes لإنشاء المجلد والموقع .

كيفية إنشاء ملف HTML :
بعد أن تعلمت كيفية إنشاء موقع الويب الخاص بك ستتعلم الآن كيفية إنشاء صفحات داخل موقعك حيث أن للموقع أن يحوي عدد من الصفحات .
لإضافة صفحة جديدة في موقعك ، قم بما يلي :
1- من قائمةFile حدد خيار New ثم Page or Web حتى تفتح مربع حوار New ثم Blank Page .
2- سوف يعرض لك المربع New قوالب متنوعة لصفحات ويب من خلال Page templates .
عندما
تقوم بإنشاء الصفحات ستأخذ هذه الصفحات الأسماء الافتراضية للملفات مثل
new page1.htm و new page2.htm لذا احفظ الصفحات بأسماء أخرى أكثر وضوحاً
حتى يمكنك التعرف عليها بسهولة .
تعلمت في هذا الدرس بعض الأساسيات في
فرونت بيج عن كيفية إنشاء المواقع وإضافة الصفحات إلى هذا الموقع . في
الدرس القادم ستتعلم كيفية استخدام قوالب وصفحات الويب .
-------------------------------
هذا الدرس الأول وان شاء الله سوف يتم عرض الدرس الثاني بعنوان استخدام القوالب

[center][center]
نبتدي الدرس الثاني من الفرونت بيج بعنوان استخدام القوالب في فرونت بيج

التعرف على القوالب :القوالب
templates عبارة عن هياكل جاهزة يمكنك استخدامها في إنشاء أنواع مختلفة من
مواقع وصفحات الويب . وإلى جانب كونها هياكل جاهزة ، تأتي القوالب في شكل
هياكل فارغة .

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

أنواع القوالب المتاحة في فرونت بيج :

القوالب نوعان هما قوالب الصفحات page templates وقوالب المواقع web templates .

قوالب المواقع :

هناك تشكيلة مكونة من عشرة قوالب للمواقع يمكنك اختيار ما تريد منها حسب ما يناسبك ( انظر الشكل 1-2 )

من قائمة File حدد خيار New ثم خيار Page or Web ثم من مربع الحوار اختر Web Site Templates .

1 - 2

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

هذا وصف بعض قوالب ومعالجات مواقع الويب في فرونت بيج :

× Corporate Presence Wizard : هذا المعالج يرشدك إلى خطوات إنشاء موقع ويب خاص بأعمالك التجارية .

×
Customer Support Web : يمكنك هذا المعالج من إنشاء موقع ويب خاص بدعم
المستهلكين ، يصلح هذا القالب لشركات البرامج التي تقوم بإنشاء مواقع دعم
المستهلكين .

× Discussion Web Wizard : يرشدك هذا المعالج إلى عملية إنشاء موقع مناقشة يشبه مجموعات الأخبار .

×
Import Web Wizard : يمكنك هذا المعالج من إنشاء أرشيف على الويب يحتوي
على ملفات من كمبيوترك الخاص بك . كما يمكنك من استيراد أحد مواقع الويب
إلى موقع آخر داخل فرونت بيج .

× Project Web : يقوم هذا المعالج
بإنشاء موقع ويب يتم تأسيسه وفق مشروع معين يحوي الجدول الخاص بهذا المشروع
وحالته وعدده وملفات الأرشيف والمناقشات .

× Personal Web : يكنك من إنشاء موقع ويب شخصي يعكس أنشطتك واهتماماتك الخاصة .

× One Page Web : يحوي هذا القالب صفحة ويب واحدة .

× Empty Web : لا يحوي أي صفحة ويب بداخله .

استخدام قالب معالج الويب :

لاستخدام قالب بسيط في إنشاء موقع ويب ، قم بما يلي :

1- من قائمة File ، حدد الخيار New ثم Page or Web حتى تفتح مربع حوار New وبداخله علامة تبويبWeb Site محددة .

2- حدد نوع القالب الذي تريد استخدامه ، كأن تختار قالب Customer Support Web مثالاً

3- حدد المجلد أو الدليل الذي تريد أن تنشئ فيه موقع الويب ثم انقر زر ok .

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

5- بعد بضع ثوان ، سيتم إنشاء القالب .

يقوم فرونت بيج بإضافة صفحة آو أكثر إلى موقع الويب بعد تحديد أي قالب من القوالب ما عدا قالب Empty Web .

استخدام القوالب لإنشاء أنواع مختلفة من صفحات الويب

على
غرار قوالب المواقع ، تمثل قوالب الصفحات أيضاً هياكل فارغة يمكنك
استخدامها لإنشاء صفحات الويب داخل موقعك ، أيضاً يمكنك إنشاء أي عدد من
صفحات الويب باستخدام القوالب الخاصة بها .

رغم أن عدد القوالب
للمواقع عشرة فقط إلا أنه يحتوي على 27 قالباً للصفحات . ويبين الشكل 2-2
معظم قوالب الصفحات التي يمكنك اختيار ما يناسب احتياجك منها .

2 - 2

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

لإنشاء صفحة ويب باستخدام أحد القوالب قم بما يلي :

1- من قائمة File حدد خيار New ثم خيار Page or Web لتفتح مربع حوار New اختر منه Page Templates

2- حدد نوع القالب الذي تريد استخدامه ، كأن تختار قالب – Left ، Narrow aligned Body مثلاً .

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

3- انقر زر ok بعد ثوان معدودة ، سيتم إنشاء الصفحة الجديدة من القالب الذي حددته .

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

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

-------------------------------

أساسيات النص :

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

أيضاً يتيح لك فرونت بيج تزيين النص وتنسيقه بالإضافة إلى
وضع النص الأصلي في الصفحة ، وستلاحظ إن كان لك معرفة وتعامل سابق مع
برامج أوفيس أن الأمر لا يختلف كثيراً مع فرونت بيج وستجد أن إضافة النص
سهل جداً كما لو أنك تكتب ملف وورد وتقوم بتنسيقه ، يمكنك باستخدام فرونت
بيج :

تعديل حجم النص .

ضبط وضع النص ، كأن يكون منخفضاً subscript أو مرتفعاً superscript عن السطر .

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

توسيط النص على الشاشة .

إضافة ألوان أو أي تأثيرات أخرى ، مثل تأثير النص الوامض .

تغيير الخط الظاهر على الشاشة .

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

إضافة النص إلى صفحة الويب :

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

لتبدأ بكتابة أي فقرة تريدها :

1- إذا لم تكن لديك الآن صفحة فارغة على الشاشة ، فلتقم بإنشاء واحدة .

2- عند الموضع الذي يظهر فيه مؤشر الكتابة ، اكتب ما يلي :

بسم الله الرحمن الرحيم

لاحول ولا قوة إلا بالله

3-
اضغط مفتاح الإدخال Enter واستمر في كتابة أي نص . لا تضغط مفتاح الإدخال
Enter عندما تصل إلى نهاية السطر ، فقط واصل الكتابة وسيتم لف النص
تلقائياً إلى السطر التالي .

ثم أنه لابد أن تحدد النص الذي تريد تغييره أو إضافة أي سمة إليه ، مثلاً لتغيير حجم النص الذي كتبته ، قم بما يلي :

1- حدد نص بسم الله الرحمن الرحيم .

2-
من قائمة Format ، حدد أمر Font . في مجموعة Size ، استخدم شريط التمرير
حتى تصل إلى خيار 7 ثم حدده ، انقر بعد ذلك زر ok ، لا بد أن يظهر النص
لديك بنفس الحجم الموجود في الشكل .

بشكل عام ، يمنحك فرونت بيج
قدراً معقولاً من حرية الاختيار في تحديد حجم النص الذي تكتبه ، ويبين(
الشكل 1-3 ) المدى المتاح لك في تغيير حجم النص حيث يبدأ من 8 إلى 36 نقطة .

1 - 3

ملاحظة : لست مضطراً لاستخدام قائمة Format حتى
تفتح مربع حوار Font يمكنك أيضاً أن تنقر بزر الفأرة الأيمن بعد تحديد النص
لتفتح قائمة مختصرة ، من هذه القائمة حدد أمر Font Properties لتفتح مربع
حوار Font .

إضافة الألوان والسمات :

والآن ، قم بإضافة بعض السمات إلى النص ، ابدأ بتغيير لون العنوان :

ولتغيير لون النص :

1- حدد عنوان النص .

2- من قائمة Format اختر أمر Font لتفتح مربع حوار Font ( انظر الشكل 2-3 ) .

2 - 3

3- افتح القائمة المنسدلة Color حتى تظهر لوحة الألوان .

4- حدد خيار Red ثم انقر زر ok لتغلق مربع حوار Font لتفتح مربع حوار Font يجب الآن أن يظهر عنوان الفقرة باللون الأحمر .

أيضاً يمكنك جعل النص عريضاً أو مائلاً أو أسفله خط .

لجعل النص عريضاً :

1- حدد الكلمات لاحول ولا قوة إلا بالله.

2- انقر رمز Bold ( يحمل هذا الرمز حرف B ) الموجود على شريط الأدوات .

لجعل النص مائلاً :

1- حدد الكلمات أي من الكلمات .

2- انقر رمز Italics ( يحمل هذا الرمز حرف I المائل ) الموجود على شريط الأدوات .

ولإضافة سطر أسفل النص :

1- حدد كلمة الله جل جلاله .

2- انقر رمز Underline ( يحمل هذا الرمز حرف U ) الموجود على شريط الأدوات .

3- الآن ينبغي أن تشبه الفقرة لديك ما هو مبين في الشكل (3 - 3 ) .

أنماط الخط والتأثيرات :

1- حدد كلمة أي كلمة من النص.

2- من قائمة Format ، حدد أمر Font لتفتح مربع حوار Font .

3-
في جزء Effects ، يمكنك أن ترى التأثيرات المتنوعة التي يتيحها لك ، كما
يتيح لك مربع المعاينة Preview رؤية الشكل الذي يظهر عليه النص بعد تطبيق
أي تأثير من تلك التأثيرات .

لا حظ السطرين الظاهرين في مربع
المعاينة يتيحان لك رؤية النص بالنسبة للتأثيرات التي تغير من الوضع الرأسي
، مثل تأثير انخفاض subscript وارتفاع superscript النص عن السطر .

4- مثلاً حدد خياري Caps Small و Superscript . انقر زر ok لتغلق مربع الحوار وترى التغييرات التي أجريتها على النص .

يعد تغيير المسافة بين الأحرف Character Spacing من التأثيرات التي تستطيع استخدامها لإبراز النص .

هذه بعض الخيارات التي يمكنك تطبيقها فيما يتعلق بتأثير المسافة بين الأحرف :

1- حدد الكلمات أي من الكلمات بالحروف الإنجليزية أو اكتب مثلاsaudint.com.

2- افتح مربع حوار Font .

3- انقر علامة التبويب Character Spacing لتفتح اللوحة الخاصة بتأثير المسافة بين الأحرف .

4- من مربع القائمة المنسدلة Spacing ، حدد خيار Expanded وفي مربع القائمة الذي يجاوره By ، حدد خيار 10 .

5- انقر زر ok لحفظ وتطبيق التغييرات التي أجريتها على المسافة بين الأحرف .

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

----------------------------------

وان شاء الله سوف يتم عرض الدرس القادم بعنوان إنشاء واستخدام الجداول
[b][center]إنشاء واستخدام الجداول

التعرف على الجداول :

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

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

تسمى مجموعة الخلايا الأفقية بـ " صف " ، في حين تسمى مجموعة الخلايا الرأسية بـ " عمود " .

انشاء الجداول :

لإنشاء جدول :

1- قم بإنشاء صفحة جديدة فارغة .

2- من قائمة Table ، حدد أمر Insert ثم Table لتفتح مربع حوار Insert Table ( انظر الشكل 1 - 4 ) .

2 - 4

4- في جزء Specify width ، حدد خيار In Pixels ثم اضبط القيمة على 400 .

5- انقر زر ok وسيتم تغيير حجم الجدول الذي أنشأته من قبل .

ارتفاع الجدول :

تستطيع
أيضاً أن تعدل ارتفاع الجدول من خلال مربع حوار Table Properties رغم أن
معظم مصممي صفحات الويب لا يهتمون بارتفاع الجدول قدر اهتمامهم بعرضه .
ويتم عادة ضبط ارتفاع الجدول تلقائياً بحسب المحتوى الموجود داخل الجدول أو
الخلايا الفردية ، وإذا قررت تغيير ارتفاع الجدول ، يمكنك فقط أن تجري
تعديلات مطلقة وفق عدد معين من البكسلات . حدد خيار Specify height ثم اكتب
عدد البكسلات الذي تريد أن تحدده لارتفاع الجدول .

التعامل مع تخطيط الجداول

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

لتغيير حجم الحد في الجدول :

1- حدد الجدول الذي أنشأته من قبل .

2- من قائمة Table ، حدد خيار Table Properties ثم Table لتفتح مربع حوار Table Properties .

3- في جزء Borders ، غير الحجم Size إلى 20 .

4- انقر زر ok لتطبيق ورؤية التغيير الذي أجريته على حجم الحد في الجدول ( انظر الشكل3 - 4 ) .

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

3 - 4

أيضاً يكنك الاستعانة بحشو الخلايا cell padding .

لتغيير حشو الخلايا :

1- حدد الجدول الذي أنشأته من قبل .

2- من قائمة Table ، حدد خيار Table Properties ثم Table لتفتح مربع حوار Table Properties .

3- في جزء Layout ، اضبط خانة Cell padding على 20 .

4- انقر زر ok لتطبيق ورؤية التغيير الذي أجريته على حشو الخلايا ( انظر الشكل 4 - 4) .

4 - 4

يمكنك أيضاً استخدام خاصية المسافة بين الخلايا cell spacing .

لتغيير المسافة بين الخلايا :

1- حدد الجدول الذي أنشأته من قبل .

2- من قائمة Table ، حدد خيار Table Properties ثم Table لتفتح مربع حوار Table Properties .

3- في جزء Layout ، اضبط خانة Cell spacing على 20 .

4- انقر زر ok لتطبيق ورؤية التغيير الذي أجريته على المسافة بين الخلايا ( انظر الشكل 5 - 4 ) .

5 - 4

التعامل مع ألوان الجداول :

يمكنك
أن تحدد للجدول حدوداً عادية ، أو تنشئ تأثيراً ثلاثي الأبعاد من خلال
الحدود الفاتحة light border والحدود الداكنة dark border.

لتحديد لون حدود الجدول :

1- حدد الجدول الذي أنشأته من قبل .

2- من قائمة Table ، حدد خيار Table Properties ثم Table لتفتح مربع حوار Table Properties .

3- في جزء Border ، انقر سهم القائمة المنسدلة Color لتفتح لوحة الألوان .

4- حدد خيار Red لتظهر حدود الجدول باللون الأحمر .

5- انقر زر ok لتطبيق ورؤية اللون الذي حددته لحدود الجدول .

يمكنك أيضاً تحديد ألوان ثلاثية الأبعاد لحدود الجدول

لتحديد ألوان ثلاثية الأبعاد لحدود الجدول :

1- حدد الجدول الذي أنشأته من قبل .

2- من قائمة Table ، حدد خيار Table Properties ثم Table لتفتح مربع حوار Table Properties .

3- في جزء Border ، انقر سهم القائمة المنسدلة light Border لتفتح لوحة الألوان الخاصة بها .

4- حدد خيار Red لتظهر الحد الفاتح للجدول بهذا اللون .

5- ومن نفس الجزء انقر سهم القائمة المنسدلة Dark Border لتفتح لوحة الألوان الخاصة بها .

6- حدد خيار Maroon ليظهر الحد الداكن للجدول بهذا اللون .

7- انقر زر ok لتطبيق ورؤية التغيير الذي أجريته على لون الحدود الفاتحة والداكنة للجدول ( انظر الشكل 6 - 4 ) .

6 - 4
---------------------------------

وجاري عرض الدرس القادم بعنوان مزيد من العمل مع الجداول

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]شكرا لك

» كلمات اللغة الانجليزية وشرح كامل للصف الاول الابتدائى الترم الثانى
» بالصور تعلم كيفية الصلاة الصحيحة ..دعوة مفتوحة للجميع
» تعلم كيف تصنع خدع بالفوتوشوب
» حل وشرح مشكلة اضافة التوقيع
» حصريا :: دورة شامله لتعليم الفوتوشوب PhotoShop Me 7 بالفيديو شرح وافى ( فيديو 3 ساعات