تصميم وقص وتركيب واجهه موقع PHP :: الدرس الثالث

السلام عليكم ورحمة الله وبركاته

بعد القص وتحميل الصور بالدرس السابق نبدأ الان العمل في الفرونت بيج

الدرس دسم ولذيذ جداً امل التركيز :

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

1- قم بفتح برنامج الفرونت بيج وغلباً مايظهر لك بالانجليزي ولذا نقوم بالتعديل اليدوي لكي يقبل اللغة العربيه فنضيف رقم 6 بدلاً من رقم 2 ونقوم بتعديل عنوان الصفحه الى اي اسم تريد ولنجعله بهذا الشكل :: مدرسة سويشي التعليمية :: كما تشاهد بالصورة المرفقة
وتابع الخطوات المرقمة :

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

2- نختار الان وضع التصميم في الفرونت بيج وندرج جدول مكون من تسع( 9 ) خانات من اجل اضافه الصور بداخله ويجب علينا هنا تعلم طريقة وضع التعليقات التي تعتبر جديده على البعض ولكنها مفيده لفهم بداية ونهاية الكود البرمجي . كما تشاهد بالصورة المرفقة :

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

3-سوف يظهر لنا جدول به تسع خانات وسوف نقوم بوضع الصور بداخلة ولا تستعجل فانا اعلم بان الصور لن تظهر بشكل لائق بسبب النقص وكذلك وجود حدود سوف نلغيها ولكن ليس الان
قم بتركيب الصور الموجوده بمجلد swishe الذي بسطح المكتب كالتالي :
الصور 1 - 5 - 8 - 12 سوف تضاف من خيار اضافه صورة
الصور 3 - 6 - 7 - 10 سوف تدرج بالضغط على الخليه المناسبه بزر الفاره الايمين واختيار خصائص الخلية ثم تختار زر استعراض الموجود مقابل " استخدام صوره خلفية " .وتدرج الصوره المناسبه بالموضع المناسب حسب ماتم شرحه .
حسب ماهو موضح لك بالصوره المرفقة :

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

4- سوف تظهر لنا الصور بشكل غير لا ئق كما ترى بالصوره المرفقة :

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

5- الان نقوم بتحديد عرض الخلايا لكي يصبح التصميم مشدود بشكل افضل ولذا سوف يتم تظليل الخانات الثلاث اليمنى وثم الضغط عليها بزر الفاره الايمن واختيار خصائص الخلية ونضع العرض 1 بالنسبه المئوية وليس البيكسل كذلك يتم العمل مع الخانات اليسرى ويتبقى الخانات الوسطى فنقوم بتظليلها ونضع عرض الخلايا بها 98 بالنسبة المئوية

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

6- الان سوف نرى العمل بعد شد الخلايا كما ترى بالصوره المرفقة :

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

بعد ذلك نقوم بحفظ العمل في مجلد swishe الذي على سطح المكتب باسم style.html

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

ستجد بالمرفقات الصفحه style.html + الصور المرفقة

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

» تصميم وقص وتركيب واجهه موقع PHP - الدرس الاول
» تصميم وقص وتركيب واجهه موقع PHP :: الدرس الثاني
» تصميم وقص وتركيب واجهه موقع PHP :: الدرس الرابع
» تصميم وقص وتركيب واجهه موقع PHP :: الدرس الخامس
» تصميم وقص وتركيب واجهه موقع PHP :: الدرس السادس