تصميم ستايل بتقنية css الجزء الاول

تصميم ستايل بتقنية css الجزء الاول

متطلبات الدورة :
1- برنامج الفوتوشب لايهم اي اصدار ولكن يدعم للعربي لمصلحتك
2- برنامج Microsoft Expression Web 2 البديل للفورنت بيج الفورنت بيج قديم لاينفع او استخدم برنامج الدريم ويفر .
3- وجود موقع على سيرفر شخصي او موقع تجريبي لتجربة الستايل علية
لااريد سوى دعاؤكم الطاهر لي والوالدي بالخير والبركة والرحمة
واعتذر من المشرفين القائمين على هذا القسم اذا كانت الدروس " متوقفة في القسم " كما سابقا .
- الدروس لتصميم ستايل بتقنية css
افضل 100 مرة من تصميم ستايل بالطريقة التقليدية :
بعض الاشخاص سالوني ماالفرق بين تصميم ستايل بتقنية css عن الطريقة التقليدية ؟؟
طبعا لاانكر ان لغة css لغة جديدة ويوجد لغة على وجهه الانتهاء وهي css3 لانرف متى
المهم الجواب على السؤال
ما الفرق بين تصميم ستايل بتقنية css عن الطريقة التقليدية ؟؟
1- سريع التصفح متوافق مع جميع التصفحات خفيف " تلقى الزائر مبسوط من الموقع الانة سريع التصفح
2- منضم اكثر ومنسق بشكل اجمل والخطوط متوافق مع جميع التصفحات
3- كما قال صاحب لغة php أن لغة css وخاصة تطوير المواقع هي صممت لكي تساعد اصحاب المواقع القديمة الطراز على التطور لكي تصبح جديدة الطراز .

4- لايوج بة اخطاء وبامكانك بعد تصميم الستايل فحصة بهذا الموقع http://validator.w3.org/ w3c لتجد ان الستايل المصمم بتقنية css لايوجد به اخطاء حاول ان تضع رابط موقعك على استايلك الغير مصمم بلغة css ستجد اخطاء لابو موزه .. والسبب ان لغة html اصبحت قديمة جدا ..
5- هناك امور كثيرة ستكتشفها بنفسك بعد تصميم الستايل بتقنية css
لنضع معا النقاط على الحروف وناخذ درس بسيط في اللغة الانجليزية , فهذا لايخرج عن نطاق الدورة بل هو مهم للدورة وكل كلمة سنكتبها هنا فهي مهمة للدورة , واكيد هذة الكلمات مرت على الكثيرين والكثيرين عارفينها ولكن لتبسيط الامر ساكتبها فقط للعلم .

قبل البداية في كتابة الكلمات ومعانيها اسمحولي بتوصيل معلومات قد تفيدكم .
نحن سنتعلم تصميم ستايل بتقنية css ونريد ان نعرف ماهي هذة التقنية ومن اين جاءت ..اوكي
- أن تقنية css هي اختصار لكلمة cascading style sheets ايش يعني هذا راح اقولكم معناها , صفحات الانماط الانسيابية , هذة اللغة ظهرت لكي تساعد المواقع القديمة الطراز على التطور للطراز الحديث , من ضمن مظمة w3c وهناك ايضا نفسة اللغة ستصدر حديثا وهي css3 فعلا انها لغة جميلة جدا , وخاصة لاصحاب المواقع , الذين يريدون الافضل لموقعهم .
- تيب لية اخترنا في دورتنا برنامج Microsoft Expression Web ؟ الجواب لأن هذا البرنامج تمت معالجتة بدقة .. لان برنامج مايكروسفت الفورنت بيج يوجد بة اخطاء كثيرة وايضا تقنيتة لاتساعد على ادراج الكلمات تلقائيا
أن برنامج Microsoft Expression Web 2 هو الأفضل , في دورتنا سنعتمد علية كل الاعتماد .... لانة عندما تكتب [ حرف الكلمة ] يعطيك نمط للكلمة كاملة وماعليك سوى اختيارها

- احب أن اذكر أن دورتنا التي ستقام باذن الله , بالأنجليزي .. وليس بالعربي فقط الشرح بالعربي يعني الاوامر بالانجليزي .
هذة المصطلحات لابد من احصائها جيدا تقريبا 20 كلمة فقط
1- header راس الصفحة
2- footer زيل الصفحة
3- color الوان
4- right يمين
5- left يسار
6- font خط
7- size حجم
8- link رابط / خط
9- text نص
10- center مركز / الوسط
11- body الجسم
12 - background خلفية
13 - table قاعدة / طاولة
14 - type شكل
15 - style نمط
16- title عنوان
17- none لاشيء
18- images صور
19- repeat تكرار
20 -width عرض
21 - height ارتفاع
22- repeat _x هذا المصطلح يعني تكرار التمدد الافقي
23 repeat _y هذا يعني تكرار التمدد عمودي
repeat-no لاتمدد

بعض الاوامر التي سنستخدما من لوحة المفاتيح الكيبورت
وهي
http://www.alktheri.org/img/articles/347/1.gif
http://www.alktheri.org/img/articles/347/2.gif

اذا لم تظهر الصور في المستقبل يوجد في [ المرفقات ] كتاب للشرح بصيغة pdf
حملة موفقين
مثال على الستايل حق الدورة

http://www.alktheri.org/img/articles/347/3.gif

- يمكنكم تحميلة من المرفقات والدراسة علية - اي ستايل مخالف وغير مناسب بخلاف الستايل الى بالشرح سكون x غير مقبول اطلاقا .. يمكنك الاستغناء عن البنر الاعلاني فقط . الحين شوفوا كيف قطعنا الستايل بكل دقة وحذر .. لاحظ المثال + ارجوكم اريد مشاركة بوضع الستايل + صورة لتقطيع الستايل ... ننتظركم المقاسات [ مقاسات الستايل ] واهم شيء العرض وهو 800 حسب مقاسات شاشة المستخدم الارتفاع لايهم .

http://www.alktheri.org/img/articles/347/4.gif

الأن لاحظوا + شاهدوا التقطيع
http://www.alktheri.org/img/articles/347/5.gif

الحين نقوم بعد تقطيع الستايل بحفظة داخل القرص الصلب للي عندة سيرفر اما الى عندة موقع على استضافة مجانية فيمكنة وضعة على سطح المكتب ونكتفي بذالك طريقة الحفظ للستايل بعد التقطيع حفظة بصيغة gif هكذا

http://www.alktheri.org/img/articles/347/6.gif

ثم نختار

http://www.alktheri.org/img/articles/347/7.gif


http://www.alktheri.org/img/articles/347/8.gif

واحفظ عملك اما على سطح المكتب او على هذا المسار c;/ wamp server -www-vb طبعا الي بالون الزهر يختلف اسم مجلد برنامج السيرفر الشخصي حسب ماحملت اسم البرنامج. [ رجع مقدمة الدرس لتحميل البرنامج متوفر رابط تحميل لة ] الحين يوجد بعض الصور في مجلد الاستايل ليس لها اهمية نقوم بحذفها لاحظ الصورة والمثال

http://www.alktheri.org/img/articles/347/9.gif
- بعد ذالك غير اسم الستايل من images الى اي اسم تبغاه لستايلك. الحين نبدأ بفتح برنامج exprssion من قائمة ستارت -- ابدأ

http://www.alktheri.org/img/articles/347/10.gif

الصفحة الرئيسية للبرنامج دوس على code .. يوجد كود جاهز في البرنامج لاحظ الصور

http://www.alktheri.org/img/articles/347/11.gif

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

http://www.alktheri.org/img/articles/347/12.gif

الحين الكود رقم 1 الى بالصورة السابقة كالتالي

كود:

---

<title>Untitled 1</title>

---

والوسم

كود:

---

</head>

---

- نكتب بينهما الكود التالي

اقتباس:

---

<style type="text/css"></style>

---

لاحظ الصور التالية وكيف كتبنا بداية الكود وبشكل تلقائي البرنامج يعطينا خيارات للكلمة
اولا : كتبنا اشارة >
ثانيا كتبنا style ثم مسافة بالمسطرة من لوحة المفاتيح ثم type سنجد البرنامج يعطيك كافة الكود بشكل تلقائي ...الخ

http://www.alktheri.org/img/articles/347/13.gif

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

http://www.alktheri.org/img/articles/347/14.gif

اقتباس:

---

<style type="text/css">
هنا يتم كتابة الكود للجزء الاول بين هذا الوسم
</style>

---

http://www.alktheri.org/img/articles/347/15.gif

الان نتكره
وننزل تحت لكي نبدأ بكتابة الكلاسات من الجزء الثاني للكود
لاحظ سنكتب الكود حق الكلاسات بين الوسم <body>
والوسم الثاني </body>

http://www.alktheri.org/img/articles/347/16.gif

سنكتب الكود التالي ولاتخاف لان البرنامج سيساعد في اختيار الكلمة بشكل تلقائي
ولكن ملاحظة مهمة نختم كل عمل باشارة الفاصل المنقوطة وهي shift + حرف ك
طبعا كل شيء بالانجليزي يعني اعكس الكتابة الى الانجليزي وتابع . الكتابة مثل هذا الكود
<div class="h1"></div>

http://www.alktheri.org/img/articles/347/17.gif

http://www.alktheri.org/img/articles/347/18.gif

http://www.alktheri.org/img/articles/347/19.gif

ثم بعد اضافة h1 نقوم بالضغط على shift + الحرف ز
سيعطينا هذا القوس > او اشارة الاكبر والاصغر كما هو اسمها بالرياضيات
سيقوم البرنامج وبشكل تلقائي بوضع كود </div>
يصبح الشكل النهائي للكود
<div class="h1"></div>
هذ h1 تعني الصورة الممتدة للهيدر الى بالوسط الي عملناها نقطة تمدد في الهيدر وقمنا بتسميتها ب h1 الحين باقي 3 صور ايضا للهيدر طبعا مع صورة البانر الاعلاني اذا اردتم حذفة فيكون المجموع الكلي لصور الهيدر مع صورة نقطة التمدد هو 3 فقط
وليس اربعة 4 ذا في حال عدم عمل صورة البنر الاعلاني والا سيكون 4 صور للهيدر
نكتب نفس الطريقة للصورة الثانية للهيدر والثالثة والرابع يعني نغير فقط المتغير h
نعمل 3 اكواد اخر في الكلاسات هذ للصورة الاولى الى هي نقطة التمدد <div class="h1"></div> والثانية كذالك والثالثة كذالك والرابعة كذالك مع تغيير الى
h2 - h3-h4
لاحظ الصورة الثانية

http://www.alktheri.org/img/articles/347/20.gif

مع تغيير h في كل مره الى الرقم التالي 1 -2 -3 -4
ثم في النهاية نقوم بقص الوسم الي هو </div> فقط من اول صورة للهيدر ووضعها في نهاية الصورة الرابع شوف المثال

http://www.alktheri.org/img/articles/347/21.gif

http://www.alktheri.org/img/articles/347/22.gif

الحين تحت الكود كامل نعمل مثلة تماما للفوتر ولكن للعلم ان الفوتر ثلاث صور فقط 3 الصورة اليمنى واليرى والوسط الى هي نقطة التمدد ونعطيها اسم متغير اخر وهو [ f ] اسرع طريقة لعمل ذالك هي كالتالي

http://www.alktheri.org/img/articles/347/23.gif

http://www.alktheri.org/img/articles/347/24.gif

انتهينا من الجزء الثاني للكود الى هو [ اكلاسات ] نرجع الى الجزء الاول للكود الحين احنا قمنا في بداية الدرس بكتابة الكود التالي
<style type="text/css"></style>
صح ولا تذكرتوا راجعوا بداية هذا الدرس ستتذكرون وقلنا انا راح نكتب الجزء الاول بين
<style type="text/css">
هنا يتم كتابة الكود للجزء الاول بين هذا الوسم
</style>
اوكي نترك مسافة بينهما وذالك بالضغط على انتر لنكتب بداية الكود ونبدأ الكود بالنقطة نقطة عادية مثال الى بين القوسين [ . ]
المثال

http://www.alktheri.org/img/articles/347/25.gif

وبعدين بشكل تلقائي يعطينا البرنامج المتغيرات للهيدر بعد وضع النقطة اذا ماطلع لكم المتغير الى هو h1-h2-h3-h4-f1-f2-f3 هذ كلها اسم متغيرات اختر h1 للصورة الاولى وهي صورة التمدد للستايل في الهيدر وتابع الصور كل الكود مكتوب بالصور لاداعي للكتابة والشرح بالكتابة .

http://www.alktheri.org/img/articles/347/26.gif

بعد اختيار backgraund -imagesسيظهر لنا امر اسمة pick ULR نختار صورة التمدد للهيدر

http://www.alktheri.org/img/articles/347/27.gif

بعد اختيار الصورة نختمها بالفاصلة المنقوطة

http://www.alktheri.org/img/articles/347/28.gif

ثم نختار

http://www.alktheri.org/img/articles/347/29.gif

ثم فاصلة منقوطة احنا قلنا كل عمل نقوم به نختمة بفاصلة منقوطة والحين نختار ارتفاع الصورة فقط

http://www.alktheri.org/img/articles/347/30.gif

ولكي نعرف ارتفاع الصورة نروح الى مجلد الاستايل ونضغط بزر الفارة الايمن على صورة التمدد للهيدر ثم ملخص سنجد الارتفاع والعرض احنا هنا نريد الارتفاع فقط width راجع الدرس الاول لكلمات اللغة الانجليزية.

http://www.alktheri.org/img/articles/347/31.gif

نختم الوسم بالفاصلة المنقوطة وانتهينا من الاولى

http://www.alktheri.org/img/articles/347/32.gif

الحين الصورة الثانية للهيدر نعمل نفس الطريقة السابقة الى هي نقطة ثم نختار للصورة الثانية المتغير h2 انتبهه وليس h1 لانة اسم محجوز للصورة الاولى الي هي صورة نقطة التمدد

http://www.alktheri.org/img/articles/347/33.gif

http://www.alktheri.org/img/articles/347/34.gif

ثم فاصلة منقوطة + مسافة ثم الارتفاع

http://www.alktheri.org/img/articles/347/35.gif

الشكل النهائي للكود حق الصورة الاولى نقطة التمدد
.h1{
background-image:url('yousefthawabh/yousefthawabh_02.gif');
background-repeat:repeat-x;height:170px;
}


الصورة الثانية ثم العرض لان الصورة الثانية غير ممتدة

http://www.alktheri.org/img/articles/347/36.gif

كما شرحت سابقا الارتفاع والعرض لاخذ المقاسات تروح الى مجلد الستايل وبالشرح السابق تاخذ المقاسات وليس على كيفك تحط من عندك . وفاصلة منقوطة + مسافة ثم المحاذاه يسار left

http://www.alktheri.org/img/articles/347/37.gif

الشكل النهائي للصورة الثانية الكود هو
.h2{
background-image:url('yousefthawabh/yousefthawabh_01.gif');
background-repeat:no-repeat;height:170px;
width:246px;
float:left;
}

الحين الصورة اليمنا نفس الشيء الى ان نصل الى المحاذاه وهي يمين وليس يسار لان الصورة الثالثة هي يمين اذن نختار right ونختم بالفاصلة المنقوطة

http://www.alktheri.org/img/articles/347/38.gif

الشكل النهائي للصورة الثالثة اليمنى
.h3{
background-image:url('yousefthawabh/yousefthawabh_04.gif');
background-repeat:no-repeat;height:152px;width:170px;
float:right;
}

الحين صورة البنر الاعلاني الى هي لها المتغير h4 عند مرحلة المحاذاه لاتختار لايمين ولايسار اختر التالي المحاذاه عائم
margin-left:0px

الشكل النهائي لكود الصورة الرابع الي هي البنر الاعلاني

.h4{
background-image:url('yousefthawabh/yousefthawabh_03.gif');
background-repeat:no-repeat;
height:170px;
width:292px; margin-left:0px;
}


ملاحظة مهمة نفس الكود الي سويناه للهيدر نسوية للفوتر تحتة مباشره ولكن نغير اسم المتغير من h الى مثلا f ولكن لثلاث صور فقط لان الفوتر اصلا ثلاث صور لاحظ المثال التالي

http://www.alktheri.org/img/articles/347/39.gif


منقول للفائده
:omg:


يتبع أن شاء الله الجزء الثاني

شكرا جدااا على الموضوع الرائع انا استفدت جدا