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

دورة تصميم ستايل بتقنية css جديد
2011-2018

الدورة مقسمة على ثلاث اجزاء وهذا الجزء الاول

متطلبات الدورة :
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

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

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

قبل البداية في كتابة الكلمات ومعانيها اسمحولي بتوصيل معلومات قد تفيدكم .

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

------------------------------------

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

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

-----------------------------------------------------------

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

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

مثال على الستايل حق الدورة

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

- يمكنكم تحميلة من المرفقات والدراسة علية - اي
ستايل مخالف وغير مناسب بخلاف الستايل الى بالشرح سكون x غير مقبول اطلاقا
.. يمكنك الاستغناء عن البنر الاعلاني فقط .

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

المقاسات [ مقاسات الستايل ] واهم شيء العرض وهو 800 حسب مقاسات شاشة المستخدم الارتفاع لايهم .

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

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

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

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

طريقة الحفظ للستايل بعد التقطيع

حفظة بصيغة

gif

هكذا

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

ثم نختار

-

واحفظ عملك اما على سطح المكتب او على هذا المسار

c;/ wamp server -www-vb
طبعا الي بالون الزهر يختلف اسم مجلد برنامج السيرفر الشخصي حسب ماحملت اسم البرنامج.

[ رجع مقدمة الدرس لتحميل البرنامج متوفر رابط تحميل لة ]

الحين يوجد بعض الصور في مجلد الاستايل ليس لها اهمية نقوم بحذفها
لاحظ الصورة والمثال

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

- بعد ذالك غير اسم الستايل من images الى اي اسم تبغاه لستايلك.

الحين نبدأ بفتح برنامج exprssion

من قائمة ستارت -- ابدأ

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

الصفحة الرئيسية للبرنامج

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

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

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

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

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

<title>Untitled 1</title>
والوسم
</head>

- نكتب بينهما الكود التالي
<style type="text/css"></style>
لاحظ الصور التالية وكيف كتبنا بداية الكود وبشكل تلقائي البرنامج يعطينا خيارات للكلمة
اولا : كتبنا اشارة >
ثانيا كتبنا style ثم مسافة بالمسطرة من لوحة المفاتيح ثم type سنجد البرنامج يعطيك كافة الكود بشكل تلقائي ...الخ

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

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

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

الان نتكره
وننزل تحت لكي نبدأ بكتابة الكلاسات من الجزء الثاني للكود

لاحظ سنكتب الكود حق الكلاسات بين الوسم <body>

والوسم الثاني </body>

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

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

<div class="h1"></div>

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

ثم بعد اضافة h1 نقوم بالضغط على shift + الحرف ز
سيعطينا هذا القوس > او اشارة الاكبر والاصغر كما هو اسمها بالرياضيات

سيقوم البرنامج وبشكل تلقائي بوضع كود </div>

يصبح الشكل النهائي للكود
<div class="h1"></div>

هذ h1 تعني الصورة الممتدة للهيدر الى بالوسط الي
عملناها نقطة تمدد في الهيدر وقمنا بتسميتها ب h1 الحين باقي 3 صور ايضا
للهيدر طبعا مع صورة البانر الاعلاني اذا اردتم حذفة فيكون المجموع الكلي
لصور الهيدر مع صورة نقطة التمدد هو 3 فقط
وليس اربعة 4 ذا في حال عدم عمل صورة البنر الاعلاني والا سيكون 4 صور للهيدر

نكتب نفس الطريقة للصورة الثانية للهيدر والثالثة والرابع يعني نغير فقط المتغير h
نعمل 3 اكواد اخر في الكلاسات هذ للصورة الاولى الى
هي نقطة التمدد <div class="h1"></div> والثانية كذالك
والثالثة كذالك والرابعة كذالك مع تغيير الى
h2 - h3-h4

لاحظ الصورة الثانية
تصميم ستايل بتقنية الجزء الاول P3e77278

مع تغيير h في كل مره الى الرقم التالي 1 -2 -3 -4

ثم في النهاية نقوم بقص الوسم الي هو </div> فقط من اول صورة للهيدر ووضعها في نهاية الصورة الرابع شوف المثال

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

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

اسرع طريقة لعمل ذالك هي كالتالي

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

ثم

انتهينا من الجزء الثاني للكود
الى هو [ اكلاسات ]

نرجع الى الجزء الاول للكود
الحين احنا قمنا في بداية الدرس بكتابة الكود التالي

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

صح ولا تذكرتوا راجعوا بداية هذا الدرس
ستتذكرون

وقلنا انا راح نكتب الجزء الاول بين

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

اوكي نترك مسافة بينهما وذالك بالضغط على انتر
لنكتب بداية الكود

ونبدأ الكود
بالنقطة نقطة عادية مثال الى بين القوسين [ . ]

المثال

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

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

اختر h1 للصورة الاولى وهي صورة التمدد للستايل في الهيدر

وتابع الصور كل الكود مكتوب بالصور لاداعي للكتابة والشرح بالكتابة .

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

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

pick ULR

نختار صورة التمدد للهيدر

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

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

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

ثم نختار

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

والحين نختار ارتفاع الصورة فقط

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

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

راجع الدرس الاول لكلمات اللغة الانجليزية.

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

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

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

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

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

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

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

الشكل النهائي للكود حق الصورة الاولى نقطة التمدد

.h1{
background-image:url('yousefthawabh/yousefthawabh_02.gif');
background-repeat:repeat-x;height:170px;
}

-------------------------------------------------

الصورة الثانية

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

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

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

وفاصلة منقوطة + مسافة ثم المحاذاه يسار left

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

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

.h2{
background-image:url('yousefthawabh/yousefthawabh_01.gif');
background-repeat:no-repeat;height:170px;
width:246px;
float:left;
}
-------------------------------------------

الحين الصورة اليمنا نفس الشيء الى ان نصل الى المحاذاه وهي يمين وليس يسار
لان الصورة الثالثة هي يمين

اذن نختار right
ونختم بالفاصلة المنقوطة

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

الشكل النهائي للصورة الثالثة اليمنى

.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
ولكن لثلاث صور فقط لان الفوتر اصلا ثلاث صور

لاحظ المثال التالي

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

--------

يتبع أن شاء الله

لمن لاتظهر عنده الصور
1- يوجد كتاب بالمرفقات pdf
2- مجلد صور الشرح بالمرفقات
تصميم ستايل بتقنية الجزء الاول Qvy78088

الجزء الثاني

[/CENTER]

» تكويد ستايل مبني على بروسيلفر phpBB3
» الموسم الاول من بافى Buffy:The Vampire Slayer S01 DvdRip Rmvb
» الحلقة -6- الجمعي فاميلي 3 - الكورتاج - الجزء الأول
» الحلقة -5- الجمعي فاميلي 3 - العرس- الجزء الأول
» جميع حلقات مسلسل صبايا الجزء 3 من الاولى الى الاخيرة