linnou
10-30-2013, بتوقيت غرينيتش 08:49 PM
http://www.dzbatna.com/images/icons/icon26.gif طھطµظ…ظٹظ… ط³طھط§ظٹظ„ ط¨طھظ‚ظ†ظٹط© css ط§ظ„ط¬ط²ط، ط§ظ„ط§ظˆظ„ [ ظ„ط§ظٹظپظˆطھظƒظ… ] (http://www.dzbatna.com/t1672527/)
http://upload.dzbatna.net/upfiles/GOI01744.gif
دورة تصميم ستايل style بتقنية css جديد
2014-2018
الدورة مقسمة على ثلاث اجزاء وهذا الجزء الاول
متطلبات الدورة :
1- برنامج الفوتوشب لايهم اي اصدار ولكن يدعم للعربي لمصلحتك
2- برنامج Microsoft Expression Web 2 البديل للفورنت بيج الفورنت بيج قديم لاينفع او استخدم برنامج الدريم ويفر .
3- وجود موقع على سيرفر SERVER شخصي او موقع تجريبي لتجربة الستايل style علية
http://upload.dzbatna.net/upfiles/23W77333.png (http://www.mp3quran.net/)
-------- لااريد سوى دعاؤكم الطاهر لي والوالدي بالخير والبركة والرحمة .-----------
واعتذر من المشرفين القائمين على هذا القسم اذا كانت الدروس " متوقفة في القسم " كما سابقا .
- الدروس لتصميم ستايل style بتقنية css
افضل 100 مرة من تصميم ستايل style بالطريقة التقليدية :
بعض الاشخاص سالوني ماالفرق بين تصميم ستايل style بتقنية css عن الطريقة التقليدية ؟؟
طبعا لاانكر ان لغة css لغة جديدة ويوجد لغة على وجهه الانتهاء وهي css3 لانرف متى
المهم الجواب على السؤال
ما الفرق بين تصميم ستايل style بتقنية css عن الطريقة التقليدية ؟؟
1- سريع التصفح متوافق مع جميع التصفحات خفيف " تلقى الزائر مبسوط من الموقع الانة سريع التصفح
2- منضم اكثر ومنسق بشكل اجمل والخطوط متوافق مع جميع التصفحات
3- كما قال صاحب لغة php أن لغة css وخاصة تطوير المواقع هي صممت لكي تساعد اصحاب المواقع القديمة الطراز على التطور لكي تصبح جديدة الطراز .
4- لايوج بة اخطاء وبامكانك بعد تصميم الستايل style فحصة بهذا الموقع http://validator.w3.org/ (http://validator.w3.org/) w3c لتجد ان الستايل style المصمم بتقنية css لايوجد به اخطاء حاول ان تضع رابط موقعك على استايل styleك الغير مصمم بلغة css ستجد اخطاء لابو موزه .. والسبب ان لغة html اصبحت قديمة جدا ..
5- هناك امور كثيرة ستكتشفها بنفسك بعد تصميم الستايل style بتقنية css
لنضع معا النقاط على الحروف وناخذ درس مفصل بسيط في اللغة الانجليزية , فهذا لايخرج عن نطاق الدورة بل هو مهم للدورة وكل كلمة سنكتبها هنا فهي مهمة للدورة , واكيد هذة الكلمات مرت على الكثيرين والكثيرين عارفينها ولكن لتبسيط الامر ساكتبها فقط للعلم .
http://upload.dzbatna.net/upfiles/qvy78088.gif
قبل البداية في كتابة الكلمات ومعانيها اسمحولي بتوصيل معلومات قد تفيدكم .
نحن سنتعلم تصميم ستايل style بتقنية 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://upload.dzbatna.net/upfiles/9S476750.gif
-----------------------------------------------------------
http://upload.dzbatna.net/upfiles/sbE76848.gif
اذا لم تظهر الصور في المستقبل يوجد في [ المرفقات ] كتاب للشرح طريقة بصيغة pdf
حملة موفقين
مثال على الستايل style حق الدورة
http://upload.dzbatna.net/upfiles/qe276877.gif
- يمكنكم تحميلة من المرفقات والدراسة علية - اي ستايل style مخالف وغير مناسب بخلاف الستايل style الى بالشرح طريقة سكون x غير مقبول اطلاقا .. يمكنك الاستغناء عن البنر الاعلاني فقط .
الحين شوفوا كيف قطعنا الستايل style بكل دقة وحذر .. لاحظ المثال + ارجوكم اريد مشاركة بوضع الستايل style + صورة لتقطيع الستايل style ... ننتظركم
المقاسات [ مقاسات الستايل style ] واهم شيء العرض وهو 800 حسب مقاسات شاشة المستخدم الارتفاع لايهم .
http://upload.dzbatna.net/upfiles/4qe76918.gif
الأن لاحظوا + شاهدوا التقطيع
http://upload.dzbatna.net/upfiles/11L76945.gif
الحين نقوم بعد تقطيع الستايل style بحفظة داخل القرص الصلب للي عندة سيرفر SERVER اما الى عندة موقع على استضافة HOTING مجاني freeة فيمكنة وضعة على سطح المكتب ونكتفي بذالك
طريقة الحفظ للستايل style بعد التقطيع
حفظة بصيغة
gif
هكذا
http://upload.dzbatna.net/upfiles/U9A76437.gif
ثم نختار
http://upload.dzbatna.net/upfiles/eJB76975.gif
http://upload.dzbatna.net/upfiles/PDC76247.gif
-
واحفظ عملك اما على سطح المكتب او على هذا المسار
c;/ wamp server -www-vb
طبعا الي بالون الزهر يختلف اسم مجلد برنامج السيرفر SERVER الشخصي حسب ماحملت اسم البرنامج.
[ رجع مقدمة الدرس مفصل لتحميل البرنامج متوفر رابط تحميل لة ]
الحين يوجد بعض الصور في مجلد الاستايل style ليس لها اهمية نقوم بحذفها
لاحظ الصورة والمثال
http://upload.dzbatna.net/upfiles/57z77005.gif
- بعد ذالك غير اسم الستايل style من images الى اي اسم تبغاه لستايل styleك.
الحين نبدأ بفتح برنامج exprssion
من قائمة ستارت -- ابدأ
http://upload.dzbatna.net/upfiles/i1X77033.gif
الصفحة الرئيسية للبرنامج
دوس على code .. يوجد كود code جاهز في البرنامج لاحظ الصور
http://upload.dzbatna.net/upfiles/csZ77065.gif
- من اجل الفهم اكثر سنقوم بتقسيم الكود code الجاهز الى لقناه في البرنامج الى جزئين
لاحظ
http://upload.dzbatna.net/upfiles/hVT77097.gif
الحين الكود code رقم 1 الى بالصورة السابقة كالتالي
<title>Untitled 1</title>
والوسم
</head>
- نكتب بينهما الكود code التالي
<style type="text/css"></style>
لاحظ الصور التالية وكيف كتبنا بداية الكود code وبشكل تلقائي البرنامج يعطينا خيارات للكلمة
اولا : كتبنا اشارة >
ثانيا كتبنا style ثم مسافة بالمسطرة من لوحة المفاتيح ثم type سنجد البرنامج يعطيك كافة الكود code بشكل تلقائي ...الخ
http://upload.dzbatna.net/upfiles/9tp77128.gif
الحين رح يكون شغلنا في الكود code الي كتبناه في المثال السابقة انظر اين رح يكون العمل
http://upload.dzbatna.net/upfiles/hXt77150.gif
<style type="text/css">
هنا يتم كتابة الكود code للجزء الاول بين هذا الوسم
</style>
http://upload.dzbatna.net/upfiles/kxX77176.gif
الان نتكره
وننزل تحت لكي نبدأ بكتابة الكلاسات من الجزء الثاني للكود code
لاحظ سنكتب الكود code حق الكلاسات بين الوسم <body>
والوسم الثاني </body>
http://upload.dzbatna.net/upfiles/q2k77198.gif
سنكتب الكود code التالي ولاتخاف لان البرنامج سيساعد في اختيار الكلمة بشكل تلقائي
ولكن ملاحظة مهمة نختم كل عمل باشارة الفاصل المنقوطة وهي shift + حرف ك
طبعا كل شيء بالانجليزي يعني اعكس الكتابة الى الانجليزي وتابع . الكتابة مثل هذا الكود code
<div class="h1"></div>
http://upload.dzbatna.net/upfiles/CBG77219.gif
http://upload.dzbatna.net/upfiles/5Ru77238.gif
http://upload.dzbatna.net/upfiles/gYI77257.gif
ثم بعد اضافة h1 نقوم بالضغط على shift + الحرف ز
سيعطينا هذا القوس > او اشارة الاكبر والاصغر كما هو اسمها بالرياضيات
سيقوم البرنامج وبشكل تلقائي بوضع كود code </div>
يصبح الشكل النهائي للكود code
<div class="h1"></div>
هذ h1 تعني الصورة الممتدة للهيدر الى بالوسط الي عملناها نقطة تمدد في الهيدر header وقمنا بتسميتها ب h1 الحين باقي 3 صور ايضا للهيدر طبعا مع صورة البانر الاعلاني اذا اردتم حذفة فيكون المجموع الكلي لصور الهيدر header مع صورة نقطة التمدد هو 3 فقط
وليس اربعة 4 ذا في حال عدم عمل صورة البنر الاعلاني والا سيكون 4 صور للهيدر
نكتب نفس الطريقة للصورة الثانية للهيدر والثالثة والرابع يعني نغير فقط المتغير h
نعمل 3 اكواد اخر في الكلاسات هذ للصورة الاولى الى هي نقطة التمدد <div class="h1"></div> والثانية كذالك والثالثة كذالك والرابعة كذالك مع تغيير الى
h2 - h3-h4
لاحظ الصورة الثانية
http://upload.dzbatna.net/upfiles/P3e77278.gif
مع تغيير h في كل مره الى الرقم التالي 1 -2 -3 -4
ثم في النهاية نقوم بقص الوسم الي هو </div> فقط من اول صورة للهيدر ووضعها في نهاية الصورة الرابع شوف المثال
http://upload.dzbatna.net/upfiles/EDO76528.gif
http://upload.dzbatna.net/upfiles/gKt76559.gif
- الحين تحت الكود code كامل نعمل مثلة تماما للفوتر
ولكن للعلم ان الفوتر ثلاث صور فقط 3 الصورة اليمنى واليرى والوسط الى هي نقطة التمدد
ونعطيها اسم متغير اخر وهو [ f ]
اسرع طريقة لعمل ذالك هي كالتالي
http://upload.dzbatna.net/upfiles/KOr76605.gif
ثم
http://upload.dzbatna.net/upfiles/dzJ76638.gif
انتهينا من الجزء الثاني للكود code
الى هو [ اكلاسات ]
نرجع الى الجزء الاول للكود code
الحين احنا قمنا في بداية الدرس مفصل بكتابة الكود code التالي
<style type="text/css"></style>
صح ولا تذكرتوا راجعوا بداية هذا الدرس مفصل
ستتذكرون
وقلنا انا راح نكتب الجزء الاول بين
<style type="text/css">
هنا يتم كتابة الكود code للجزء الاول بين هذا الوسم
</style>
اوكي نترك مسافة بينهما وذالك بالضغط على انتر
لنكتب بداية الكود code
ونبدأ الكود code
بالنقطة نقطة عادية مثال الى بين القوسين [ . ]
المثال
http://upload.dzbatna.net/upfiles/Olu77309.gif
وبعدين بشكل تلقائي يعطينا البرنامج المتغيرات للهيدر بعد وضع النقطة اذا ماطلع لكم
المتغير الى هو h1-h2-h3-h4-f1-f2-f3 هذ كلها اسم متغيرات
اختر h1 للصورة الاولى وهي صورة التمدد للستايل style في الهيدر header
وتابع الصور كل الكود code مكتوب بالصور لاداعي للكتابة والشرح طريقة بالكتابة .
http://upload.dzbatna.net/upfiles/Vzu77329.gif
بعد اختيار backgraund -imagesسيظهر لنا امر اسمة
pick ULR
نختار صورة التمدد للهيدر
http://upload.dzbatna.net/upfiles/h1T77354.gif
بعد اختيار الصورة نختمها بالفاصلة المنقوطة
http://upload.dzbatna.net/upfiles/4gT77373.gif
ثم نختار
http://upload.dzbatna.net/upfiles/nRs77394.gif
ثم فاصلة منقوطة
احنا قلنا كل عمل نقوم به نختمة بفاصلة منقوطة
والحين نختار ارتفاع الصورة فقط
http://upload.dzbatna.net/upfiles/DIq76703.gif
ولكي نعرف ارتفاع الصورة
نروح الى مجلد الاستايل style ونضغط بزر الفارة الايمن على صورة التمدد للهيدر
ثم ملخص سنجد الارتفاع والعرض احنا هنا نريد الارتفاع فقط
width
راجع الدرس مفصل الاول لكلمات اللغة الانجليزية.
http://upload.dzbatna.net/upfiles/j3A76843.gif
نختم الوسم بالفاصلة المنقوطة وانتهينا من الاولى
http://upload.dzbatna.net/upfiles/DyP76886.gif
الحين الصورة الثانية للهيدر نعمل نفس الطريقة السابقة
الى هي نقطة ثم نختار للصورة الثانية المتغير h2 انتبهه وليس h1 لانة اسم محجوز للصورة الاولى الي هي صورة نقطة التمدد
http://upload.dzbatna.net/upfiles/prd77491.gif
http://upload.dzbatna.net/upfiles/sXj77582.gif
http://upload.dzbatna.net/upfiles/POt77628.gif
ثم فاصلة منقوطة + مسافة
ثم الارتفاع
http://upload.dzbatna.net/upfiles/Gvi77676.gif
الشكل النهائي للكود code حق الصورة الاولى نقطة التمدد
.h1{
background-image:url('yousefthawabh/yousefthawabh_02.gif');
background-repeat:repeat-x;height:170px;
}
-------------------------------------------------
الصورة الثانية
ثم العرض لان الصورة الثانية غير ممتدة
http://upload.dzbatna.net/upfiles/6w477458.gif
كما شرح طريقةت سابقا الارتفاع والعرض لاخذ المقاسات تروح الى مجلد الستايل style
وبالشرح طريقة السابق تاخذ المقاسات
وليس على كيفك تحط من عندك .
وفاصلة منقوطة + مسافة ثم المحاذاه يسار left
http://upload.dzbatna.net/upfiles/MHS77771.gif
الشكل النهائي للصورة الثانية الكود code هو
.h2{
background-image:url('yousefthawabh/yousefthawabh_01.gif');
background-repeat:no-repeat;height:170px;
width:246px;
float:left;
}
-------------------------------------------
الحين الصورة اليمنا نفس الشيء الى ان نصل الى المحاذاه وهي يمين وليس يسار
لان الصورة الثالثة هي يمين
اذن نختار right
ونختم بالفاصلة المنقوطة
http://upload.dzbatna.net/upfiles/jjU77726.gif
الشكل النهائي للصورة الثالثة اليمنى
.h3{
background-image:url('yousefthawabh/yousefthawabh_04.gif');
background-repeat:no-repeat;height:152px;width:170px;
float:right;
}
-------------------------------------------
الحين صورة البنر الاعلاني الى هي لها المتغير h4
عند مرحلة المحاذاه لاتختار لايمين ولايسار اختر التالي
المحاذاه عائم
margin-left:0px
الشكل النهائي لكود code الصورة الرابع الي هي البنر الاعلاني
.h4{
background-image:url('yousefthawabh/yousefthawabh_03.gif');
background-repeat:no-repeat;
height:170px;
width:292px; margin-left:0px;
}
-----------------------------------------
ملاحظة مهمة
نفس الكود code الي سويناه للهيدر نسوية للفوتر
تحتة مباشره ولكن نغير اسم المتغير من h
الى مثلا f
ولكن لثلاث صور فقط لان الفوتر اصلا ثلاث صور
لاحظ المثال التالي
http://upload.dzbatna.net/upfiles/NQA77492.gif
--------
يتبع أن شاء الله
لمن لاتظهر عنده الصور
1- يوجد كتاب بالمرفقات pdf
2- مجلد صور الشرح طريقة بالمرفقات
http://upload.dzbatna.net/upfiles/qvy78088.gif
الجزء الثاني
[/CENTER]
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif book-css1.zip (http://www.traidnt.net/vb/attachments/517714d1284733328-book-css1.zip) (459.5 كيلوبايت, عدد مرات المشاهدة 3879 مرة)
http://www.traidnt.net/vb/images/attach/zip.gif book2-style-css.zip (http://www.traidnt.net/vb/attachments/517715d1284733328-book2-style-css.zip) (198.0 كيلوبايت, عدد مرات المشاهدة 2775 مرة)
http://www.traidnt.net/vb/images/attach/zip.gif الجزء الاول.zip (http://www.traidnt.net/vb/attachments/537871d1291277553-الجزء-الاول.zip) (624.1 كيلوبايت, عدد مرات المشاهدة 2509 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
http://upload.dzbatna.net/upfiles/GOI01744.gif
دورة تصميم ستايل style بتقنية css جديد
2014-2018
الدورة مقسمة على ثلاث اجزاء وهذا الجزء الاول
متطلبات الدورة :
1- برنامج الفوتوشب لايهم اي اصدار ولكن يدعم للعربي لمصلحتك
2- برنامج Microsoft Expression Web 2 البديل للفورنت بيج الفورنت بيج قديم لاينفع او استخدم برنامج الدريم ويفر .
3- وجود موقع على سيرفر SERVER شخصي او موقع تجريبي لتجربة الستايل style علية
http://upload.dzbatna.net/upfiles/23W77333.png (http://www.mp3quran.net/)
-------- لااريد سوى دعاؤكم الطاهر لي والوالدي بالخير والبركة والرحمة .-----------
واعتذر من المشرفين القائمين على هذا القسم اذا كانت الدروس " متوقفة في القسم " كما سابقا .
- الدروس لتصميم ستايل style بتقنية css
افضل 100 مرة من تصميم ستايل style بالطريقة التقليدية :
بعض الاشخاص سالوني ماالفرق بين تصميم ستايل style بتقنية css عن الطريقة التقليدية ؟؟
طبعا لاانكر ان لغة css لغة جديدة ويوجد لغة على وجهه الانتهاء وهي css3 لانرف متى
المهم الجواب على السؤال
ما الفرق بين تصميم ستايل style بتقنية css عن الطريقة التقليدية ؟؟
1- سريع التصفح متوافق مع جميع التصفحات خفيف " تلقى الزائر مبسوط من الموقع الانة سريع التصفح
2- منضم اكثر ومنسق بشكل اجمل والخطوط متوافق مع جميع التصفحات
3- كما قال صاحب لغة php أن لغة css وخاصة تطوير المواقع هي صممت لكي تساعد اصحاب المواقع القديمة الطراز على التطور لكي تصبح جديدة الطراز .
4- لايوج بة اخطاء وبامكانك بعد تصميم الستايل style فحصة بهذا الموقع http://validator.w3.org/ (http://validator.w3.org/) w3c لتجد ان الستايل style المصمم بتقنية css لايوجد به اخطاء حاول ان تضع رابط موقعك على استايل styleك الغير مصمم بلغة css ستجد اخطاء لابو موزه .. والسبب ان لغة html اصبحت قديمة جدا ..
5- هناك امور كثيرة ستكتشفها بنفسك بعد تصميم الستايل style بتقنية css
لنضع معا النقاط على الحروف وناخذ درس مفصل بسيط في اللغة الانجليزية , فهذا لايخرج عن نطاق الدورة بل هو مهم للدورة وكل كلمة سنكتبها هنا فهي مهمة للدورة , واكيد هذة الكلمات مرت على الكثيرين والكثيرين عارفينها ولكن لتبسيط الامر ساكتبها فقط للعلم .
http://upload.dzbatna.net/upfiles/qvy78088.gif
قبل البداية في كتابة الكلمات ومعانيها اسمحولي بتوصيل معلومات قد تفيدكم .
نحن سنتعلم تصميم ستايل style بتقنية 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://upload.dzbatna.net/upfiles/9S476750.gif
-----------------------------------------------------------
http://upload.dzbatna.net/upfiles/sbE76848.gif
اذا لم تظهر الصور في المستقبل يوجد في [ المرفقات ] كتاب للشرح طريقة بصيغة pdf
حملة موفقين
مثال على الستايل style حق الدورة
http://upload.dzbatna.net/upfiles/qe276877.gif
- يمكنكم تحميلة من المرفقات والدراسة علية - اي ستايل style مخالف وغير مناسب بخلاف الستايل style الى بالشرح طريقة سكون x غير مقبول اطلاقا .. يمكنك الاستغناء عن البنر الاعلاني فقط .
الحين شوفوا كيف قطعنا الستايل style بكل دقة وحذر .. لاحظ المثال + ارجوكم اريد مشاركة بوضع الستايل style + صورة لتقطيع الستايل style ... ننتظركم
المقاسات [ مقاسات الستايل style ] واهم شيء العرض وهو 800 حسب مقاسات شاشة المستخدم الارتفاع لايهم .
http://upload.dzbatna.net/upfiles/4qe76918.gif
الأن لاحظوا + شاهدوا التقطيع
http://upload.dzbatna.net/upfiles/11L76945.gif
الحين نقوم بعد تقطيع الستايل style بحفظة داخل القرص الصلب للي عندة سيرفر SERVER اما الى عندة موقع على استضافة HOTING مجاني freeة فيمكنة وضعة على سطح المكتب ونكتفي بذالك
طريقة الحفظ للستايل style بعد التقطيع
حفظة بصيغة
gif
هكذا
http://upload.dzbatna.net/upfiles/U9A76437.gif
ثم نختار
http://upload.dzbatna.net/upfiles/eJB76975.gif
http://upload.dzbatna.net/upfiles/PDC76247.gif
-
واحفظ عملك اما على سطح المكتب او على هذا المسار
c;/ wamp server -www-vb
طبعا الي بالون الزهر يختلف اسم مجلد برنامج السيرفر SERVER الشخصي حسب ماحملت اسم البرنامج.
[ رجع مقدمة الدرس مفصل لتحميل البرنامج متوفر رابط تحميل لة ]
الحين يوجد بعض الصور في مجلد الاستايل style ليس لها اهمية نقوم بحذفها
لاحظ الصورة والمثال
http://upload.dzbatna.net/upfiles/57z77005.gif
- بعد ذالك غير اسم الستايل style من images الى اي اسم تبغاه لستايل styleك.
الحين نبدأ بفتح برنامج exprssion
من قائمة ستارت -- ابدأ
http://upload.dzbatna.net/upfiles/i1X77033.gif
الصفحة الرئيسية للبرنامج
دوس على code .. يوجد كود code جاهز في البرنامج لاحظ الصور
http://upload.dzbatna.net/upfiles/csZ77065.gif
- من اجل الفهم اكثر سنقوم بتقسيم الكود code الجاهز الى لقناه في البرنامج الى جزئين
لاحظ
http://upload.dzbatna.net/upfiles/hVT77097.gif
الحين الكود code رقم 1 الى بالصورة السابقة كالتالي
<title>Untitled 1</title>
والوسم
</head>
- نكتب بينهما الكود code التالي
<style type="text/css"></style>
لاحظ الصور التالية وكيف كتبنا بداية الكود code وبشكل تلقائي البرنامج يعطينا خيارات للكلمة
اولا : كتبنا اشارة >
ثانيا كتبنا style ثم مسافة بالمسطرة من لوحة المفاتيح ثم type سنجد البرنامج يعطيك كافة الكود code بشكل تلقائي ...الخ
http://upload.dzbatna.net/upfiles/9tp77128.gif
الحين رح يكون شغلنا في الكود code الي كتبناه في المثال السابقة انظر اين رح يكون العمل
http://upload.dzbatna.net/upfiles/hXt77150.gif
<style type="text/css">
هنا يتم كتابة الكود code للجزء الاول بين هذا الوسم
</style>
http://upload.dzbatna.net/upfiles/kxX77176.gif
الان نتكره
وننزل تحت لكي نبدأ بكتابة الكلاسات من الجزء الثاني للكود code
لاحظ سنكتب الكود code حق الكلاسات بين الوسم <body>
والوسم الثاني </body>
http://upload.dzbatna.net/upfiles/q2k77198.gif
سنكتب الكود code التالي ولاتخاف لان البرنامج سيساعد في اختيار الكلمة بشكل تلقائي
ولكن ملاحظة مهمة نختم كل عمل باشارة الفاصل المنقوطة وهي shift + حرف ك
طبعا كل شيء بالانجليزي يعني اعكس الكتابة الى الانجليزي وتابع . الكتابة مثل هذا الكود code
<div class="h1"></div>
http://upload.dzbatna.net/upfiles/CBG77219.gif
http://upload.dzbatna.net/upfiles/5Ru77238.gif
http://upload.dzbatna.net/upfiles/gYI77257.gif
ثم بعد اضافة h1 نقوم بالضغط على shift + الحرف ز
سيعطينا هذا القوس > او اشارة الاكبر والاصغر كما هو اسمها بالرياضيات
سيقوم البرنامج وبشكل تلقائي بوضع كود code </div>
يصبح الشكل النهائي للكود code
<div class="h1"></div>
هذ h1 تعني الصورة الممتدة للهيدر الى بالوسط الي عملناها نقطة تمدد في الهيدر header وقمنا بتسميتها ب h1 الحين باقي 3 صور ايضا للهيدر طبعا مع صورة البانر الاعلاني اذا اردتم حذفة فيكون المجموع الكلي لصور الهيدر header مع صورة نقطة التمدد هو 3 فقط
وليس اربعة 4 ذا في حال عدم عمل صورة البنر الاعلاني والا سيكون 4 صور للهيدر
نكتب نفس الطريقة للصورة الثانية للهيدر والثالثة والرابع يعني نغير فقط المتغير h
نعمل 3 اكواد اخر في الكلاسات هذ للصورة الاولى الى هي نقطة التمدد <div class="h1"></div> والثانية كذالك والثالثة كذالك والرابعة كذالك مع تغيير الى
h2 - h3-h4
لاحظ الصورة الثانية
http://upload.dzbatna.net/upfiles/P3e77278.gif
مع تغيير h في كل مره الى الرقم التالي 1 -2 -3 -4
ثم في النهاية نقوم بقص الوسم الي هو </div> فقط من اول صورة للهيدر ووضعها في نهاية الصورة الرابع شوف المثال
http://upload.dzbatna.net/upfiles/EDO76528.gif
http://upload.dzbatna.net/upfiles/gKt76559.gif
- الحين تحت الكود code كامل نعمل مثلة تماما للفوتر
ولكن للعلم ان الفوتر ثلاث صور فقط 3 الصورة اليمنى واليرى والوسط الى هي نقطة التمدد
ونعطيها اسم متغير اخر وهو [ f ]
اسرع طريقة لعمل ذالك هي كالتالي
http://upload.dzbatna.net/upfiles/KOr76605.gif
ثم
http://upload.dzbatna.net/upfiles/dzJ76638.gif
انتهينا من الجزء الثاني للكود code
الى هو [ اكلاسات ]
نرجع الى الجزء الاول للكود code
الحين احنا قمنا في بداية الدرس مفصل بكتابة الكود code التالي
<style type="text/css"></style>
صح ولا تذكرتوا راجعوا بداية هذا الدرس مفصل
ستتذكرون
وقلنا انا راح نكتب الجزء الاول بين
<style type="text/css">
هنا يتم كتابة الكود code للجزء الاول بين هذا الوسم
</style>
اوكي نترك مسافة بينهما وذالك بالضغط على انتر
لنكتب بداية الكود code
ونبدأ الكود code
بالنقطة نقطة عادية مثال الى بين القوسين [ . ]
المثال
http://upload.dzbatna.net/upfiles/Olu77309.gif
وبعدين بشكل تلقائي يعطينا البرنامج المتغيرات للهيدر بعد وضع النقطة اذا ماطلع لكم
المتغير الى هو h1-h2-h3-h4-f1-f2-f3 هذ كلها اسم متغيرات
اختر h1 للصورة الاولى وهي صورة التمدد للستايل style في الهيدر header
وتابع الصور كل الكود code مكتوب بالصور لاداعي للكتابة والشرح طريقة بالكتابة .
http://upload.dzbatna.net/upfiles/Vzu77329.gif
بعد اختيار backgraund -imagesسيظهر لنا امر اسمة
pick ULR
نختار صورة التمدد للهيدر
http://upload.dzbatna.net/upfiles/h1T77354.gif
بعد اختيار الصورة نختمها بالفاصلة المنقوطة
http://upload.dzbatna.net/upfiles/4gT77373.gif
ثم نختار
http://upload.dzbatna.net/upfiles/nRs77394.gif
ثم فاصلة منقوطة
احنا قلنا كل عمل نقوم به نختمة بفاصلة منقوطة
والحين نختار ارتفاع الصورة فقط
http://upload.dzbatna.net/upfiles/DIq76703.gif
ولكي نعرف ارتفاع الصورة
نروح الى مجلد الاستايل style ونضغط بزر الفارة الايمن على صورة التمدد للهيدر
ثم ملخص سنجد الارتفاع والعرض احنا هنا نريد الارتفاع فقط
width
راجع الدرس مفصل الاول لكلمات اللغة الانجليزية.
http://upload.dzbatna.net/upfiles/j3A76843.gif
نختم الوسم بالفاصلة المنقوطة وانتهينا من الاولى
http://upload.dzbatna.net/upfiles/DyP76886.gif
الحين الصورة الثانية للهيدر نعمل نفس الطريقة السابقة
الى هي نقطة ثم نختار للصورة الثانية المتغير h2 انتبهه وليس h1 لانة اسم محجوز للصورة الاولى الي هي صورة نقطة التمدد
http://upload.dzbatna.net/upfiles/prd77491.gif
http://upload.dzbatna.net/upfiles/sXj77582.gif
http://upload.dzbatna.net/upfiles/POt77628.gif
ثم فاصلة منقوطة + مسافة
ثم الارتفاع
http://upload.dzbatna.net/upfiles/Gvi77676.gif
الشكل النهائي للكود code حق الصورة الاولى نقطة التمدد
.h1{
background-image:url('yousefthawabh/yousefthawabh_02.gif');
background-repeat:repeat-x;height:170px;
}
-------------------------------------------------
الصورة الثانية
ثم العرض لان الصورة الثانية غير ممتدة
http://upload.dzbatna.net/upfiles/6w477458.gif
كما شرح طريقةت سابقا الارتفاع والعرض لاخذ المقاسات تروح الى مجلد الستايل style
وبالشرح طريقة السابق تاخذ المقاسات
وليس على كيفك تحط من عندك .
وفاصلة منقوطة + مسافة ثم المحاذاه يسار left
http://upload.dzbatna.net/upfiles/MHS77771.gif
الشكل النهائي للصورة الثانية الكود code هو
.h2{
background-image:url('yousefthawabh/yousefthawabh_01.gif');
background-repeat:no-repeat;height:170px;
width:246px;
float:left;
}
-------------------------------------------
الحين الصورة اليمنا نفس الشيء الى ان نصل الى المحاذاه وهي يمين وليس يسار
لان الصورة الثالثة هي يمين
اذن نختار right
ونختم بالفاصلة المنقوطة
http://upload.dzbatna.net/upfiles/jjU77726.gif
الشكل النهائي للصورة الثالثة اليمنى
.h3{
background-image:url('yousefthawabh/yousefthawabh_04.gif');
background-repeat:no-repeat;height:152px;width:170px;
float:right;
}
-------------------------------------------
الحين صورة البنر الاعلاني الى هي لها المتغير h4
عند مرحلة المحاذاه لاتختار لايمين ولايسار اختر التالي
المحاذاه عائم
margin-left:0px
الشكل النهائي لكود code الصورة الرابع الي هي البنر الاعلاني
.h4{
background-image:url('yousefthawabh/yousefthawabh_03.gif');
background-repeat:no-repeat;
height:170px;
width:292px; margin-left:0px;
}
-----------------------------------------
ملاحظة مهمة
نفس الكود code الي سويناه للهيدر نسوية للفوتر
تحتة مباشره ولكن نغير اسم المتغير من h
الى مثلا f
ولكن لثلاث صور فقط لان الفوتر اصلا ثلاث صور
لاحظ المثال التالي
http://upload.dzbatna.net/upfiles/NQA77492.gif
--------
يتبع أن شاء الله
لمن لاتظهر عنده الصور
1- يوجد كتاب بالمرفقات pdf
2- مجلد صور الشرح طريقة بالمرفقات
http://upload.dzbatna.net/upfiles/qvy78088.gif
الجزء الثاني
[/CENTER]
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif book-css1.zip (http://www.traidnt.net/vb/attachments/517714d1284733328-book-css1.zip) (459.5 كيلوبايت, عدد مرات المشاهدة 3879 مرة)
http://www.traidnt.net/vb/images/attach/zip.gif book2-style-css.zip (http://www.traidnt.net/vb/attachments/517715d1284733328-book2-style-css.zip) (198.0 كيلوبايت, عدد مرات المشاهدة 2775 مرة)
http://www.traidnt.net/vb/images/attach/zip.gif الجزء الاول.zip (http://www.traidnt.net/vb/attachments/537871d1291277553-الجزء-الاول.zip) (624.1 كيلوبايت, عدد مرات المشاهدة 2509 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
