الدرس الرابع :: شرح توزيع صور الاستايل على الفرونت بيج + وضع روابط الأزرار

أهلاً بكم في الدرس الرابع




من دروس دورة تصميم الاستايلات




شرح توزيع صور الاستايل على الفرونت بيج + وضع روابط الأزرار




مدة الدرس / 5 أيام




وسيكون موعد الدرس الخامس أن شاء الله يوم الأربعاء القادم




وعذراً على التأخر في طرح الدرس يوم أمس لوجود مشاكل بالاتصال




:: نبدأ الدرس ::




1- نقوم بفتح برنامج الفرونت بيج ونختار من أسفل الصفحة تعليمات برمجية









2 – نقوم بتظليل النص الموجود داخل الصفحة ونمسحه








3 – نختار من أسفل الصفحة تصميم









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














4 – نضيف الجداول 3 صفوف









شكل الجدول بعد إضافته









5 – نضع المؤشر أسفل الجدول العلوي بالضغط أسفل الجدول









6 - نضيف جدول واحد في المنتصف بنفس الطريقة السابقة ليكون بهذا الشكل









7 - نضع المؤشر أسفل الجدول الأوسط بالضغط أسفل الجدول









8 – نضيف الجدول السفلي 3 صفوف بنفس الطريقة السابقة









9 – الآن نقوم بإضافة الصور للجدول طبعاً نحن إنشائنا مجلدات خاصة بنا في الدرس السابق وكان مسارها




جهاز الكمبيوتر >>> القرص C >>> مجلد AppServ >>>


مجلد www >>> مجلد vb >> مجلد altsmeem الذي أنشائناه




سيكون ترتيب الصور كالتالي في الجدول









10 – نضع المؤشر في المستطيل الذي نريد إضافة الصورة فيه ثم نضيف الصور التي نريد حسب الأماكن الموضحة في الصورة السابقة









شكل الصور بعد إضافتها









11- نحول مناطق التمدد في الهيدر والفوتر إلى خلايا


عن طريق الوقوف على منطقة التمدد في الهيدر ونضغط على زر الماوس الأيمن ونختار التالي









نطبق التالي









نفعل نفس الشي مع نقطة تمدد الفوتر مع ملاحظة وضع نقطة تمدد الفوتر




12 - نغيير إعدادات الجداول من خلال الوقوف على أي خانه من صفوف الهيدر و نضغط الماوس الأيمن ونختار من القائمة التي ستظهر









نختار القيم التالية









نفعل نفس الخطوات مع الجدول الأوسط ومع الجدول السفلي الفوتر



ليكون بهذا الشكل في النهاية










نضغط على الجزء الأيسر من صورة الهيدر مرتين









تظهر لنا النافذة التالية نحفظ قيم الطول والعرض









الآن
نضغط بزر الماوس الأيمن على نفس الجزء من الصورة ونختار من القائمة التي
ستظهر خصائص الخلية ونضع الطول والعرض الذي حفظنا قيمها قبل قليل









نكرر نفس الخطوات مع




- الجزء الأيمن من الهيدر


- الجزء الأيسرمن الفوتر


- الجزء الأيمن من الفوتر




الآن نذهب إلى المنتدى من خلال الرابط التالي




http://localhost/vb/index.php




13 – سنقوم الآن بوضع الروابط على الأزرار أولاً سننسخ رابط المنتدى ويكون


على زر الرئيسية




هذا هو رابط الرئيسية




http://localhost/vb/index.php




رابط التسجيل




http://localhost/vb/register.php




رابط لوحة التحكم




http://localhost/vb/usercp.php




طبعاً جميع هذه الروابط حصلت عليها من المنتدى من خلال الخيارات الموجودة بالصفحة الرئيسية




الآن في الفرونت بيج نقف على مكان فارغ أسفل شريط القوائم ونختار








14 – نختار الآن من شريط الصور هذا الشكل






سيكون شكل الماوس كالقلم الآن نقوم بتحديد زر الرئيسية





بعد تحديده سيظهر لنا مربع حوار نضع فيه رابط الرئيسية





نكمل بنفس الطريقة روابط باقي الأزرار


الآن بعد الانتهاء من وضع روابط الأزرار نذهب إلى تعليمات برمجية في أسفل صفحة الفرونت بيج








نضغط بزر الماوس الأيمن مع مراعاة وجدود التحديد ونختار من القائمة


التي ستظهر









تظهر نافذة نختار منها














ثم نغلق النافذة المتبقية









الآن في المنتدى ندخل إلى لوحة التحكم من أسفل صفحة المنتدى عن طريق خيار الإدارة ونختار بعد الدخول إلى لوحة التحكم









الآن نقوم بمسح النص الموجود في الهيدر









نذهب للفرونت بيج لتعليمات البرمجية وننسخ الجزء الخاص بالهيدر









نلصق الجزء الذي نسخناه من الفرونت بيج و نلصقة في المنتدى مكان النص الذي مسحناه










نذهب للفرونت بيج وننسخ النص الخاص بالفوتر









نلصقه في جزء الفوتر الموجود بالمنتدى









الآن نختار من أسفل الصفحة حفظ










الآن نذهب إلى المنتدى ونشاهد الهيدر والفوتر














:: تحميل الشرح ملف فديو ::





http://www.4shared.com/file/72456454/c7a9907f/leeson_4.html






والرجاء كل الرجاء قراءة الشرح أولاً ثم تحميل ملف الفديو ومتابعته لأن الاثنان مكملن لبعض





انتهى الشرح



:: تحميل شرح الدرس في حال عدم ظهور الصور بصيغة ملف Adobe Reader ::

الرابط الأول

http://www.mediafire.com/?jyzwyjjc5mu

الرابط الثاني

http://depositfiles.com/files/6rrlkha3x

:: التطبيق المطلوب ::





تطبيق الدرس ووضع صورة للهيدر والفوتر بعد تركيبها على المنتدى





:: ملاحظة ::في حال وضع روابط لمنتديات و مواقع آخرى أو صور نساء سيتم حذف التطبيق