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

[alktheri]

تصميم ستايل بتقنية 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 لاتمدد

بعض الاوامر التي سنستخدما من لوحة المفاتيح الكيبورت
وهي

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

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

الأن لاحظوا + شاهدوا التقطيع

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

ثم نختار

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

- بعد ذالك غير اسم الستايل من images الى اي اسم تبغاه لستايلك. الحين نبدأ بفتح برنامج exprssion من قائمة ستارت -- ابدأ

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

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

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

<title>Untitled 1</title>

والوسم

</head>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ثم نختار

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

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

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

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

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

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


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

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

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

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

الشكل النهائي للصورة الثالثة اليمنى
.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 ولكن لثلاث صور فقط لان الفوتر اصلا ثلاث صور لاحظ المثال التالي




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



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

الملفات المرفقة

	book-css1.zip‏ (459.5 كيلوبايت, المشاهدات 1)
	book2-style-css.zip‏ (198.0 كيلوبايت, المشاهدات 1)
	الجزء الاول.zip‏ (624.1 كيلوبايت, المشاهدات 1)

---

التعديل الأخير تم بواسطة alktheri ; أضيفت بتاريخ 16-03-2020 الساعة 09:11 PM

[رنيا محسن]

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