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

الماوردي نت


 
الرئيسيةأحدث الصورالتسجيلدخول

 

 درس : توزيع إستايل متمدد ذو أعمدة متصلة بالهيدر إلى الفوتر بتقنية Css..

اذهب الى الأسفل 
كاتب الموضوعرسالة
Manager
مؤسس الموقع
مؤسس الموقع
Manager


. : بيانات اصافية
ذكر
المشاركات : 285
نقاط : 634
التقييم : 0
الانتساب : 14/01/2011

فيس بوك
 :

درس : توزيع إستايل متمدد ذو أعمدة متصلة بالهيدر إلى الفوتر بتقنية Css.. Empty
مُساهمةموضوع: درس : توزيع إستايل متمدد ذو أعمدة متصلة بالهيدر إلى الفوتر بتقنية Css..   درس : توزيع إستايل متمدد ذو أعمدة متصلة بالهيدر إلى الفوتر بتقنية Css.. Emptyالثلاثاء مارس 01, 2011 12:41 pm

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

نستمر معكم بدروس توزيع الإستايلات بتقنية الـCss الحديثة ..

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

وكيف التعامل مع الكلاسات وكيفية التركيب وإلخ إلخ ..

طرحت هذأ الدرس للأسئلة الشديدة عن عملية التوزيع لهذأ الإستايل ..~

صورة توضيحية لطريقة التقطيع في الفوتوشوب ..
درس : توزيع إستايل متمدد ذو أعمدة متصلة بالهيدر إلى الفوتر بتقنية Css.. HEg54872

نأتي ونوضع النقاط على الحروف ..

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

الكلاسات اللازمة لعملية التوزيع وهيا كالتالي ..

بدايتاً نبدأً بالكلاسات :

رمز PHP:




<div id="Heder_tmdd">

<
div class="hedr_right">div>

<
div class="hedr_left">div>

div>



<
div class="t1">

<
div class="t2">



div>

div>



<
div id="Foter_tmdd">

<
div class="Foter_right">div>

<
div class="Foter_left">div>

div>








طبعاً للمعلومية تكتب الكلاسات بين الوسم ..

رمز PHP:




<body>

body>








والأن ننتقل إلى كتابة خصائص الـCss ..
وهيا كالتالي مع مراعاة تغير مسارات الصور + الطول + العرض :

رمز PHP:




#Heder_tmdd {

background-image: url('Wrdh_alorcedh/t3ter/h-h-bg.jpg');

background-repeat: repeat-x;

height: 66px;








}

.
hedr_right{

background-image: url('Wrdh_alorcedh/t3ter/h-h-l.gif');

background-repeat: no-repeat;

height: 66px;

width: 203px;

float:right;

}

.
hedr_left {

background-image: url('Wrdh_alorcedh/t3ter/h-h-r.jpg');

background-repeat: no-repeat;

height: 66px;

width: 235px;

float:left;

}

.
t1 {

background-image: url('Wrdh_alorcedh/t3ter/t1.jpg');

background-repeat: repeat-y;

background-position:right;

padding-right: 37px;

}

.
t2 {

background-image: url('Wrdh_alorcedh/t3ter/t2.jpg');

background-repeat: repeat-y;

background-position:left;

padding-left: 34px;

}

#Foter_tmdd {

background-image: url('Wrdh_alorcedh/t3ter/f-f-bg.jpg');

background-repeat: repeat-x;

height: 60px;

}

.
Foter_right {

background-image: url('Wrdh_alorcedh/t3ter/f-f-r.gif');

background-repeat: no-repeat;

height: 60px;

width: 235px;

float: right;

}

.
Foter_left {

background-image: url('Wrdh_alorcedh/t3ter/f-f-l.gif');

background-repeat: no-repeat;

height: 60px;

width: 203px;

float: left;

}








=========================================

طريقة تركيبه في منتديات الـ Vb .

أولا نتوجه إلى التالي --
التحكم بالإستايلات --> البحث في القوالب --> إختار الإستايل المراد التعديل عليه --> إكتب إسم القالب التالي --> header --> ثم نقوم بحذف الأكواد الموجودة بين التعلقات التالية ..

رمز PHP:















ونتوجه إلى كلاسات الهيدر + كلاسات الأعمدة ( دون أخذ نهاياة الداف ) .. ونضعها بين التعليفات الموجوده أعلاه ليصبح الكود هكذأ ..

رمز PHP:




<div id="Heder_tmdd">

<
div class="hedr_right">div>

<
div class="hedr_left">div>

div>



<
div class="t1">

<
div class="t2">












ومن ثم حفظ ..

التحكم بالإستايلات --> البحث في القوالب --> إختار الإستايل المراد التعديل عليه --> إكتب إسم القالب التالي --> footer -->
نبحث في هذأ القالب عن التالي :

رمز PHP:












نضع بعده مباشرة الكلاسات التالية :

رمز PHP:




div>

div>



<
div id="Foter_tmdd">

<
div class="Foter_right">div>

<
div class="Foter_left">div>

div>









ومن ثم حفظ
..~

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

فإن أصبت فمن الله وإن أخطأت فمن الشيطان

بالتوفيق
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://mawardi.forum.st
 
درس : توزيع إستايل متمدد ذو أعمدة متصلة بالهيدر إلى الفوتر بتقنية Css..
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
الماوردي نت :: سلة المهملات :: دروس التصميم-
انتقل الى: