[الدرس الأول] تكويد ستايل مبني على بروسيلفر phpBB3
 

السلام عليكم ورحمة الله وبركاته
=====================
اهلا بكم في درسنا الأول من دورة تكويد ستايل مبني على بروسيلفر لمنتديات phpBB3 هذا الدرس يشمل التقطيع بالاضافة إلى تقسيم التصميم وتجهيزه “HTML” .
التصميم الذي سنعمل عليه هو “patterny” الموجود في هذا الرابط:
مشاهدة الموضوع - ستايل patterny و قرب انطلاق دورة التقطيع والتركيب • منتديات phpBBArabia

أولا تقطيع التصميم :
كبداية قم بانشاء مجلد جديد في مكان على الحاسوب الخاص بك وسمه بأي اسم تريده مثلا “patterny” ثم بداخله
انشيء مجلدا آخر باسم images – هذا المجلد ستضع به اجزاء التصميم التي سنقوم بتقطيعها-

التصميم سينقسم إلى ثلاثة اجزاء رئيسية هي “الهيدر” “الخلفية” و “الفوتر” لذلك سنبدأ بتقطيه هذه الأجزاء من التصميم. كما في الصورة التالية :

http://www.bbcolors.com/blog/wp-cont...orials_001.png

حفظ الـهيدر باسم header.png والخلفية باسم bg.png والفوتر باسم footer.png

بعد ذلك سنقوم بقطع خلفية عناوين الأقسام و التدريج الخاص بخلفية الاقسام :

http://www.bbcolors.com/blog/wp-cont...orials_002.png

نحفظ خلفية عناوين الأقسام باسم tbg.png وخلفية الأقسام باسم rowbg.png
هكذا نكون انتهينا من تقطيع التصميم “للحصول على الملفات المقطعة جاهزة في آخر هذا الدرس”

ثانيا تقسيم التصميم باستخدام HTML:

اولا نقوم بفتح اي محرر نصوص مثل notepad او الافضل notepad++ ثم نقوم بانشاء ملفين هما :
index.html و style.css ونحفظهما في المجلد الذي أنشأناه في بداية الدرس “patterny” ولا تنس الترميز بيكون utf-8

في ملف index.html قم بوضع هذا الكود كبداية :
رمز Code:


تجهيز الاستايل






الكود السابق بالطبع هو البناء البدائي لاي صفحة html كما تعلم استدعينا فيه ملف الـ style.css ووضعناه لنبدأ شغلة التقسيم.
الآن…
نقوم بعمل div جديد ونعطه المعرف wrap ، هذا الـ div سيكون بمثابة الإطار الرئيسي للصفحة وسيحتوي بداخله على كل محتويات الصفحة هكذا
رمز Code:





تجهيز الاستايل









بداخل الـ div المعرف باسم wrap سننشيء ثلاثة div مختلفة هي كالتالي:

• wrapheader وهو منطقة رأس الصفحة
• wrapcenter وسيحتوي منطقة الوسط
• wrapfooter وسيحتوي نهاية اصفحة “الفوتر”

يصبح الآن كود الـ HTML هو :
رمز Code:


تجهيز الاستايل















الآن نأتي إلى ملف style.css لنحدد خصائص الـ div التي قمنا بانشائها :
أولا بالنسبة لـ wrap: نعطيه عرض 980 بكسل “وهو عرض التصميم الأصلي” ونضع له الخلفية التي سميناها bg.png في البداية :
رمز Code:
#wrap {
margin:0 auto;
width:980px;
background:url(images/bg.png);
}
بالنسبة لـ wrapheader نعطيها عرض 980 بكسل وارتفاع 294 بكسل ونضع له الخلفية header.png :
رمز Code:
#wrap {
margin:0 auto;
width:980px;
background:url(images/bg.png);
}
#wrapheader {
height:294px;
width:980px;
background:url(images/header.png);
}
بالنسبة لـ wrapcenter سنعطيه عرض 90% و margin بيكون auto حتى تكون حدوده متساوية من الجانبين تلقائيا:
رمز Code:
#wrap {
margin:0 auto;
width:980px;
background:url(images/bg.png);
}
#wrapheader {
height:294px;
width:980px;
background:url(images/header.png);
}
#wrapcenter {
width:90%;
margin:0 auto;
}
بالنسبة لـ wrapfooter سيكون بعرض 980 بكسل وارتفاع 81 بكسل وخلفيته هي footer.png :
رمز Code:
#wrap {
margin:0 auto;
width:980px;
background:url(images/bg.png);
}
#wrapheader {
height:294px;
width:980px;
background:url(images/header.png);
}
#wrapcenter {
width:90%;
margin:0 auto;
}
#wrapfooter {
height:81px;
width:980px;
background:url(images/footer.png);
}
تحميل ملفات الدرس:
patterny_tutorials_01_bbcolors.zip







أكثر...