05-01-2010, 11:16 AM
|
| |  | مسؤول قسم الدورات
 | | تاريخ التسجيل: 04-05-2008
المشاركات: 1,612
| |
 [الدرس الثالث]مقدمة فى xhtml+css الجزء الثانى
[الدرس الثالث]مقدمة فى xhtml+css الجزء الثانى
عودة من جديدة أعضاءنا الكرام واستكمال لدورتنا راح نبدأ بالجزء
الثانى بالتعرف على xhtml+css
نبدأ على بركة الله .........
كالعادة: راح نأخذ مثال عملى وراح نفهم منه الهدف من درسنا:
راح نفتح نفس المثال السابق: اضغـــــط هـــــنا
استعرض السورس كود بالضغط كليك يمين ورؤية مصدر الصفحة viewsource مرة أخرى :
والحين راح يكون التحدث عن السورس كود وملف css على هيئة سؤال وجواب
1- ماهو ملف style.css وما هى أهميته؟
- هو عبارة عن ملف وعن طريقة راح نغير من شكل الصفحة فى اى جزء نحن نريده, سواء
- وضع خلفية للصفحة background
-تغيير الخطوطtext من الوانcolor واحجامfont-size ونوعهاfont-family tahoma...timesnewroman....etc
-وضع جدول border والتحكم فى خصائصه من حجم الحد وسمكه ولونه ..الخ
2-كيف استدعى ملف style.css فى الصفحة اللى أنا مسويها حتى يقوم بعمل
التأثيرات اللى تم ادراجها به؟
- عن طريق هذه الجملة ووضعها بين وسمى head كما ذكرنا سابقا:
كود: <link rel="stylesheet" href="style.css" media="screen" /> كل ما يهمنا هو href وفيها راح تحدد مكان ملف css
لاحظ انه ملف style.css لوكان داخل مجلد الصور Images على سبيل
المثال راح يكون هيك مساره
كود: <link rel="stylesheet" href="images/style.css" media="screen" />
3-كيف ابدأ فى تعلم css؟حتى أقدر أفهم كيفية التغيير على الصفحة بأحتراف؟
- هذه النقطة تحتاج لتطبيق كثير ومفاهيم أساسية لابد ان ترفعها بجانب ما
راح أسرده الان , وراح احدد لك مصادر تقدر تزود بها خبرتك
وانا راح أعطيك مفتاح الانطلاق من هذه الدروة حتى تكون على وعى
بمفهوم css بشكل واضح:
استكمال للسؤال الثالث: نجاوب على الاسئلة الاتية :
1- فى css ما هى الصيغة العامة لكتابة الكود:
- الصيغة هى:
كود: p {color:red;text-align:center} p: وهى وسم الhtml اللى راح نعدل عليه , يعنى على سبيل المثال
فى المثال اللى قمنا بسرده راح تجد عبارة
h2 : تعنى الheadings2 وعندما نريد التغيرر على كلمة المحتوى
راح نستدعيها فى ملف css بكتابة h2
وتصبح الجملة :
كود: h2{color:red;text-align:center} ملاحظه: اذهب لدورة html لتفهم كلامى......
نكمل......
color:red
color: وهى الخاصية اللى راح نستخدمها
فمثلا لو راح تكون للون لتغييره راح تكون color
ولو كانت للخطوط راح تكون font
ولو كانت للخلفية راح تكون background
وهكذا....
وانا راح اسرد كل الاشياء فيما بعد
نكمل ........
red: هى قيمة اللون , يعنى بنخبر المتصفح اننا نريد ان يكون لون
كلمة المحتوى هو الاحمر red
لاحظ العلامة ; الفاصلة بين color:red وبين text-align:center
هذه العلامة تسخدم للفصل بين أمرين
فمثلا بعد هذه العلامة راح تجد text-align:center
وهى امر يخبرنا اننا نريد توسيط الكلمة center وجعلها فى وسط مكانها
اخيرا:
نعرف الطريقة اللى راح تكتب بها كود css
1-حدد المكان اللى راح تغير عليه فى صفحتك وليكن h2
2- افتح وسم {}
3-بين الوسم ضع الاوامر التى تريد تنفيذها color:red
5-لعمل اكثر من تأثير على نفس الوسم h2 افصل امرك بالفاصلة المنقوطة ;
6-لعمل تأثير على مكان اخر, لابد من اغلاق الوسم ثم بدأ التغيير على أمر جديد
مثال:
كود: p{color:red;text-align:center}
h2{color:green;text-align:left} نكمل......
لو فتحنا ملف style.css , راح نجد عبارة مثل هذة:
كود: #container{
margin:0 auto;
width:850px;
text-align:left;
} ماذا تعنى container# ؟
لو رجعنا لصفحة html الخاصة بنا
راح نجد هذه العبارة :
كود: <div id="container">
<div id="header">
<h1><a href="http://vistacompany.org" title="درس عمل تخطيط وزوايا مستديرة ">vista-design</a></h1>
</div>
<div id="content"> اول كلمة
هذه هى المعرف اللى راح نغير عليه وقد رمزنا فى ملف css للid بالعلامة # ثم الحقناه باسم هذا الid
ولاحظ انها تم ضمها داخل وسم div كما شرحنا سابقا وعرفنا اهميته:
وفى نفس الصفحة راح تجدid مختلفة , كل id راح يستخدم لتغيير جزء معين من
صفختنا:
أمثلة:
للتغيير على الهيدر......
للتغيير على المحتوى.....
نكمل الاسئلة :
2- ماهى المتغييرات والقيم الخاصة بcss
- اجابة السؤال هذه محتاجه دورة كاملة لحالها:
لذا أنصحك بعمل الاتى الذهاب ل w3schools من هذا الرابــــط
ثم راح تجد انه مسوى مرجع كامل لكل أوامر css
كل يوم تعرفلك على الاقل 5 او 6 مفاهيم وتدرب على المثال , وراح تجد ان كل أمر له مثال عملى
يمكنك تطبيقه .
وأنا فى دورتنا راح أنوه للاشياء التى سوف نحتاجها بكثرة
انظر للصورة الاتية وراح تعرف المهم واللى راح يخدم دورتنا بأذن الله
وتدرب عليه جيدا.
هذه الصورة قمت بعملها فى 6 ساعات متواصلة حتى تكون مرجع سريع لك بأذن الله
هذه الصورة راح نتدرب عليها من الدرس القادم بأذن الله
وراح يكون فيه درس مكثف مخصص على التدريب على الcss
وراح يكون فيديو حتى تشوفوا طريقة الكتابة فى css
فى رعاية الله
المطلوب من الاعضاء: عمل صفحة بسيطة تقوم فيها بأستخدام
الhtml وcss
أخوكم vista-design
آخر تعديل بواسطة vista-design ، 26-01-2010 الساعة 02:33 PM |
مواضيع جديدة في قسم دورة تصميم المواقع بإسلوب المحترفين web2.0 
دخول الاعضاء
العرض العادي
