منتدى اربد
اهلا وسهلا بكم في منتدى اربد بانطلاقه جديده
عزيزي الزائر لا تحرمنا مشاركاتك لدينا الكثير في الداخل لا يظهر الا عند التسجيل
اهلا وسهلا



 
الرئيسيةالبوابةبحـثالتسجيلدخول

شاطر | 
 

 توزيع الاستايل بلغة CSS

اذهب الى الأسفل 
كاتب الموضوعرسالة
admin
Admin
Admin
avatar

ذكر
عدد المساهمات : 1116
نقاط : 3091
السٌّمعَة : 1
تاريخ التسجيل : 08/04/2010

مُساهمةموضوع: توزيع الاستايل بلغة CSS   الأربعاء أبريل 28, 2010 11:28 pm

بسم الله الرحمن الرحيم
الدرس الاول

انشاء الله سوف يعلمنا بداية التفكير الصحيح بتوزيع الصور علي الاستايلات
وليس فقط الاستايلات ولكن المواقع والمجلات واي شيئ حيث من فوائد هذة اللغه انها تقلل عدد الجداول في المنتدي وبذلك يشتغل معاك المنتدي مثل الصاروخ
مقدمة عن ال Css
من الغريب ان لاحظ تطور هائل في العلوم ولانزال نتمسك بقديمنا , فعلا مع ظهور عصر ال css ومعضم العرب المصممين يزالون متمسكين بلغة Html مع العلم بأن لغة ال Scc ن اسهل اللغات الموجودة باعالم والتي مثلت جميع المعايير القياسية في ضبط التصمبيم والمواقع حيث السرعة والكفئة



فتعتمد فكرة عملهاعلي انك تقوم بفرد ( فرش )خلفية عامة وتعمل علي رص الصور بمحازات بعضها حتي تتكون أكواد تغير فيها حسب ماشئت

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

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

1- ال Contant
2- ال Header
3- ال footer
4- ال container
أولا : ما المقصود بال Contant ؟ وما الموازي لة بلفة ال Html ؟.
** ال Contant ما هو الا اطار كبير أو محتوي نقوم بعرض التصميم بداخلة (لرص الصور بة) حسب الجزء المخصص لها
** الموازي لة بلغة ال html هو الجدول
ثانيا : مما يتكون ال Contant ؟
** يتكون من header -Container-Footerثالثا : ما هو header ؟

** هو المكان العلوي بالموقع والذي يحتوي علي التصميم العلوي ( الصور التجميلية العلوية )



رابعـــا: مما يتكون ال header ؟

** يتكون الهيدر من الصور التي قمت بتصميمها ثم تقطيعها ويتكون من صورة يمين hedr.right وصورة في المنتصف hedr.middl وصورة شمال hedr.left



خامسا : مما يتكون ال Footer ؟

** يتكون الفوتر من الصور التي قمت بتصميمها ثم تقطيعها ويتكون من صورة يمين footr.right وصورة في المنتصف footer.middl وصورة شمال footer.left

ما هو ال Container ؟

** يتكون من الصورة للأعمدة (ان وجدت ) اليمين والشمال

تتبع الصورة التالية

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

1- div وهو الوسم الذى سيتم التقسيم من خلالة .

2- id معرف يتم تحديدة ويمكن ان ندرج تحتها عنده فئات .

3- class الفئات وهى يمكن ان تكرر اكثر من مرة بنفس الصفحة ، على عكس المعرفات id .

سنتعرف في الدرس التالي كيفية أدراج أكواد الهيدر والفوتر وعمل استايل بأستخدام الٍCSS

الدرس الثاني


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

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


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

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

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

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

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

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

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

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

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

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


_________________
المدير العام
______________
[وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://irbed.hooxs.com
 
توزيع الاستايل بلغة CSS
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

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