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

الخامس::

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

انهينا في الدروس السابقة قص الصور وتركيب صور الواجهة بشكل كامل.

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

نقوم بفتح برنامج الفرونت بيج وندخل إلى ملف swishe كي نجد بداخلة الملف style.html
نقوم بفتح الملف وسوف يظهر لنا بهذا الشكل .

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

نقوم الان بالضغط في وسط الصفحه ونحن بوضع انقسام لكي نشاهد الكود بالاعلى ثم نمسح كلمة ( ) "انا قمت بالتعديل تعليمات برمجية " وندرج التعليق التالي :
قم بكتابة هذا التعليق :

كما تشاهد بالصورة المرفقة .

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

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

ثم نقوم بازالة الحدود كما فعلنا في الدروس السابقة .

الان نحفظ عملنا ونقوم بفتح صفحه جديدة ونضغ فيها جدول مكون من عمود واحد فقط وعشرة صفوق مثلاً كما تشاهد بالصورة المرفقة

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

الان سوف نبدأ بتأهيل هذا الجدول لقبول بعض خصائص CSS للتلوين والخطوط (نواحي تجميليه ) .
اضغط بزر الفاره الايمن على هذا الجدول واعمل هذه الاعدادات :
نطاق الخلية 3
المسافات بين الخلايا 3
حجم الحدود 0
ثم اعمل موافق
كما تشاهد بالصورة المرفقة

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

وقم بتسجيل ماتريد من عناوين بداخل الجدول مثلاً :
الرئيسية - المنتدى - من نحن - راسلنا - البطاقات ...... وهكذا واجعل عليها روابط للتنقل .
ثم احفظ عملك بهذا الاسم List1.html

كما تشاهد بالصورة المرفقة

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

كذلك نقوم بحفظ الصفحه السابقة باسم List2.html
ثم نجري عليها بعض التعديلات مثلا :
المواقع الصديقه - المواقع الدعوية - خدماتنا .......واجعل عليها روابط للتنقل

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

نقوم بحفظ عملنا واخذ قسط من الراحة والى اللقاء في الدرس القادم.

ولا تنسوني من دعائكم

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