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

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

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

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



حفظ الـهيدر باسم header.png والخلفية باسم bg.png والفوتر باسم footer.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







أكثر...