درسنا النهاردة هيكون توزيع الأستايل ب Css وعن الدرس التمهيدي الذي قمت بطرحة نكمل مسيرة التوزيع

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



والصورة التالية توضح التقطيع اي تقطيع للأستايل



نيجي لأهم حاجة وهي Div -Id -Class


يتم تعريف الـ id بوضع هاش ( # )

يتم تعريف الـclass بوضع نقطة ( . )

ويمكن أيضا للـ id والـ class ان يتضمنوا أكثر من تعريف او فئه جديدة بداخلة

حيث قمنا بالتعريف لكل وسم منهم بالاتي

div = وهو الوسم الذى سيتم التقسيم من خلالة .
id = معرف يتم تحديدة ويمكن تندرج تحدتها عنده فئات حيث تكون ثابتة لاتتكرر بالتصميم مثل الهيدر والفوتر .
class = الفئات وهى يمكن ان تكرر اكثر من مرة بنفس الصفحة ، على عكس المعرفات id مثل الجوانب المتكررة راسيا في اتجاه (Y)حسب الاتجاهات المشروحة سابقا

نييجي للتصميم
أحنا قطعناه ل 9 صور
4 هيدر و 2 أعمدة و 3 فوتر

يبقي كدا من السهل كتابة الكود بتاع الاوسمة div وهي كالتالي



وكما هو واضح في الصور فأننا قمنا بتقسيم الاكواد حسب التصميم مثال الصورة التي توضح علاقة الهيدر بالصور التي قمنا بتقطيعها حيث يتكون من 4 صور صورة خلفية وصورة يمين وصورة شمال وصورة وسط وهذا تك شرحة مسبقا

يبقي كدا نبدأندخل اكواد ال Style Css وهى تعريف قيم كل الفئات التى وضعناها في الوسوم div .

كالتالي



لأدخال محتوي ال Container يتم كالتالي



شوف ال cONTAINER موجود فين هتلاقي ان لازم نعرف ال CONTAINER بخواص ال cSS

يتم تعريف ال Container بأنة صندوق شامل مثل الجدول في ال Htmlوالذي يحتوي علي بقية التصميم من هيدر وفوتر وأعمدة وخلافة حسب تقطيعك للأستايل



كدا انتهينا من الContainer وظبطنا عرضة سواء محدد بالبكسل أو ممتد بالنسبة المأوية شوف بقي في كود ال style كتب اية



ننتقل لحاجة جديدة وهي الهيدر

نضغط بردة لأضافة خصائص Css



يتم ادخالها كالتالي






ويتم أدخال ما يحتوية Header بالشكل التالي

header .right#
header .left#
header .midl#


ويتم أدخال جميع الصور بهذة الطريقة

ونكرر الصورة في ناحية الشمال والصورة الوسطي بنفس الطريقة مع وضع ال Float =left في حالة الصورة الشمال

ومفيش Float في الصورة الوسطي


ويكرر العمل علي الفوتر كذلك

نيجي للأعمدة


shadowright. و shadowleft. قم بتعريف كل منهم كما بالصورة التالية .






in_container# بالنسبه لهذا المعرف لا نحتاج ان نضع فيه اى قيم حيث انه المكان الذى سيظهر فيه المنتدى ، اما في حاله تصميم المواقع ستوضع تعريف للخلفيه والخط ..



مصطلحات مرت علينا في المثال :

Background : هو التعريف العام للخلفيه سواء كانت صورة او لون فقط ويمكن من خلاله ان يستخدم لأكثر من وظيفه .
background-color : لون الخلفية .
background-image : صورة الخلفية .
background-repeat : تكرار الخلفية .
background-attachment : كيفية معالجة الخلفية .
background-position : وضع الخلفية .

Height : الطول .

Width : العرض .

Float : محاذاة العنصر .

Padding : وهى تعرف بالعربيه ( الحواشي ) اى انها لعمل حاشية للعنصر او مسافة مـا ـ ويأثرعلى العنصر من الداخل .

Margin : الهوامش وتؤثر على العنصر من الخارج بالنسبه للعناصر الأخري المجاورة .


مع التعود ستتمكن من فهم طريقه التوزيع بسرعه ، ويمكنك ان تستغنى عن النافذة التى تضع عن طريقها القيم وتكتبها بنفسك لانك ستكون حفظت الأوامر من التكرار .


-**- طريقه وضع الاكواد الناتجه :

/*/*/- كل مانتج من أكواد css سيتم وضعه بالإستايل فى تعاريف css الإضافية وتجدها بـ إعددات css رئيسي بلوحة تحكم المنتدى ـ وتحصل هذه الأكواد داخل الـ dreamweaver بين الوسمين <style>

ووضع أجزاء div كما في الصورة التالية




في قالب الهيدر يوضع مباشرة قبل الكود ..

$spacer_open

$_phpinclude_output

ويم حذف كل الأكواد الأخري فوقها ـ وفي قالب الفوتر يوضع بعد أخر سطر منه مباشرة




الي هنا انتهي الشغل بتاعنا وبكدانقدر نظبط الاستايل



مهم ليس كل ما عرفتة هنا في الدرس يجعلك ملم بال css ولكن هناك علم رهيب يتكلم عن ال Css والجيل الجديد من المطورين

منقول من موقع ترايدنت نقلا عن منتديات بكسل التعليمية