said
10-30-2013, بتوقيت غرينيتش 08:49 PM
http://www.dzbatna.com/images/icons/icon26.gif ط§ظ„ط¯ط±ط³ ط§ظ„ظ…ظ†طھط¸ط± ط´ط±ط* طھطµظ…ظٹظ… ط¥ط³طھط§ظٹظ„ ط¬ط§ظ†ط¨ظٹ ظˆ ظˆط¶ط¹ ط§ظ„ط§ط¹ظ„ط§ظ†ط§طھ ظˆ ط§ظ„ط±ظˆط§ط¨ط· ظˆ ط§ظ„ط§ظƒظˆط§ط¯ ..! (http://www.dzbatna.com/t1641809/)
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاتة
اهلاً بكم اخوتي و اطاب الله ايامكم بكل خير ,, اليوم بأذن الله سوف اطرح درس مفصل طال انتظاره و لا اخفي عليكم اني كُنت من احد مُترقبيه ,,
و من الله علي بإن حاولت حاولت حتى فشلت و فشلت ثم نجحت بعمل استايل style جانبي
و الذي سوف نتطرق إليه بالدرس مفصل اليوم و الذي يجب ان تكون مُلم ولو 20% من :-
Html
Css
نبتدأ بالدرس مفصل على بإسم الله ,,
ـأولاً لنفتح برنامج الفوتوشوب و نُصمم استايل style جانبي و نقطعه و هذه صورة توضيحيه لطريقة التصميم و التقطيع ...
http://img510.imageshack.us/img510/521/19163122.gif
الأن نذهب نحفظه كصفحة ويب عن طريق ..
File > Save For Web
,,
نتوجه إلى محررك الخاص و انا من مُستخدمي
(Adobe Dreamweaver CS5)
و تابع الصُور
,,
http://img51.imageshack.us/img51/763/67725592.gif
,,
http://img694.imageshack.us/img694/9693/26160992.gif
,,
http://img840.imageshack.us/img840/5168/13985866.gif
,,
http://img211.imageshack.us/img211/1120/45653315.gif
,,
http://img844.imageshack.us/img844/690/94978979.gif
,,
http://img52.imageshack.us/img52/6411/85694107.gif
,,
http://img98.imageshack.us/img98/7159/60377042.gif
,,
http://img213.imageshack.us/img213/346/51615806.gif
,,
http://img717.imageshack.us/img717/8808/37778315.gif
,,
,,
الأن نذهب نقيس عرض القائمة الجانبية
,,
http://img832.imageshack.us/img832/3227/55422790.gif
,,
كما نرى أن العرض 270 بعد ذلك نذهب إلى (خلفية المنتدى forum/Body) ونعدل
خواص CSS الإضافية
,,
http://img694.imageshack.us/img694/5343/56423715.gif
,,
الأن نضع في خانة الخلفية صورة نقطة التمدد للقائمة الجانبية و نكررها بشكل
رأسي من جهة أعلي و يمين مثال على الكود code
رمز Code:
url(al7erbi/aL7eRbI_05.jpg) repeat-y top right
و الأن هذا الناتج بعد عمل الخطوات السابقة
,,
http://img718.imageshack.us/img718/4783/48735602.gif
,,
بعد ذلك نعود لمحبُوبنا (Adobe Dreamweaver CS5) و ننظف الاكواد ليصبح بالشكل الآتي
,,
http://img341.imageshack.us/img341/2442/93043894.gif
,,
http://img844.imageshack.us/img844/2540/89713088.gif
,,
http://img836.imageshack.us/img836/2674/12208675.gif
,,
http://img211.imageshack.us/img211/3759/98757302.gif
,,
http://img156.imageshack.us/img156/5185/44687243.gif
,,
تم تعريف id الـ al7erbi-y
تم إدراج صورة التمدد و وضعها بتكرار رأسي
تم وضع عرض صورة التمدد و هي 270 px
هُنا تم تحديد وضعية العنصر و تم وضعه بشكل مطلق absolute
هُنا تم وضع اليمين صفر و من الاعلى صفر
تم تعريف id الـ al7erbi-y-1
هُنا تم وضع الصورة التجميلية للهيدر من غير تكرار وتم وضعها أعلى اليمين
هنا تم تحديد عرض الصورة بـ 270 Px
نحديد طولها بـ 167 Px
هُنا تم تعريف id الـ al7erbi-y-2
تم إدراج صورة تجميلية الخاصة بالأزرار مع عدم تكرارها أسفل اليمين
هنا تم تحديد عرضها بـ 270 Px
تم تحديد طولها بـ 175Px
,,
و الأن الاكواد التي بين وسم
رمز Code:
<body></body>
ضعها بـ الفوتر او الهيدر header و انا افضل الهيدر header و الاكواد التي بين وسم
رمز Code:
<style type="text/css">
</style>
نضعها في تعاريف CSS الإضافية ,,
,,
و إلى هُنا اُنهي الدرس مفصل و من لم يفهم اكواد css فأنصحه بمدرس مفصلة كليبرز (http://cliprz-php.com) و ar.html.net (http://ar.html.net/)
,
,,
,(آخـــر تــعــديــل إعادة رفع الصور تــم بــتــاريــخ 9 / 1 / 2014),
فمان الله
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif صور الشرح.zip (http://www.traidnt.net/vb/attachments/546573d1294796565-صور-الشرح.zip) (611.9 كيلوبايت, عدد مرات المشاهدة 213 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاتة
اهلاً بكم اخوتي و اطاب الله ايامكم بكل خير ,, اليوم بأذن الله سوف اطرح درس مفصل طال انتظاره و لا اخفي عليكم اني كُنت من احد مُترقبيه ,,
و من الله علي بإن حاولت حاولت حتى فشلت و فشلت ثم نجحت بعمل استايل style جانبي
و الذي سوف نتطرق إليه بالدرس مفصل اليوم و الذي يجب ان تكون مُلم ولو 20% من :-
Html
Css
نبتدأ بالدرس مفصل على بإسم الله ,,
ـأولاً لنفتح برنامج الفوتوشوب و نُصمم استايل style جانبي و نقطعه و هذه صورة توضيحيه لطريقة التصميم و التقطيع ...
http://img510.imageshack.us/img510/521/19163122.gif
الأن نذهب نحفظه كصفحة ويب عن طريق ..
File > Save For Web
,,
نتوجه إلى محررك الخاص و انا من مُستخدمي
(Adobe Dreamweaver CS5)
و تابع الصُور
,,
http://img51.imageshack.us/img51/763/67725592.gif
,,
http://img694.imageshack.us/img694/9693/26160992.gif
,,
http://img840.imageshack.us/img840/5168/13985866.gif
,,
http://img211.imageshack.us/img211/1120/45653315.gif
,,
http://img844.imageshack.us/img844/690/94978979.gif
,,
http://img52.imageshack.us/img52/6411/85694107.gif
,,
http://img98.imageshack.us/img98/7159/60377042.gif
,,
http://img213.imageshack.us/img213/346/51615806.gif
,,
http://img717.imageshack.us/img717/8808/37778315.gif
,,
,,
الأن نذهب نقيس عرض القائمة الجانبية
,,
http://img832.imageshack.us/img832/3227/55422790.gif
,,
كما نرى أن العرض 270 بعد ذلك نذهب إلى (خلفية المنتدى forum/Body) ونعدل
خواص CSS الإضافية
,,
http://img694.imageshack.us/img694/5343/56423715.gif
,,
الأن نضع في خانة الخلفية صورة نقطة التمدد للقائمة الجانبية و نكررها بشكل
رأسي من جهة أعلي و يمين مثال على الكود code
رمز Code:
url(al7erbi/aL7eRbI_05.jpg) repeat-y top right
و الأن هذا الناتج بعد عمل الخطوات السابقة
,,
http://img718.imageshack.us/img718/4783/48735602.gif
,,
بعد ذلك نعود لمحبُوبنا (Adobe Dreamweaver CS5) و ننظف الاكواد ليصبح بالشكل الآتي
,,
http://img341.imageshack.us/img341/2442/93043894.gif
,,
http://img844.imageshack.us/img844/2540/89713088.gif
,,
http://img836.imageshack.us/img836/2674/12208675.gif
,,
http://img211.imageshack.us/img211/3759/98757302.gif
,,
http://img156.imageshack.us/img156/5185/44687243.gif
,,
تم تعريف id الـ al7erbi-y
تم إدراج صورة التمدد و وضعها بتكرار رأسي
تم وضع عرض صورة التمدد و هي 270 px
هُنا تم تحديد وضعية العنصر و تم وضعه بشكل مطلق absolute
هُنا تم وضع اليمين صفر و من الاعلى صفر
تم تعريف id الـ al7erbi-y-1
هُنا تم وضع الصورة التجميلية للهيدر من غير تكرار وتم وضعها أعلى اليمين
هنا تم تحديد عرض الصورة بـ 270 Px
نحديد طولها بـ 167 Px
هُنا تم تعريف id الـ al7erbi-y-2
تم إدراج صورة تجميلية الخاصة بالأزرار مع عدم تكرارها أسفل اليمين
هنا تم تحديد عرضها بـ 270 Px
تم تحديد طولها بـ 175Px
,,
و الأن الاكواد التي بين وسم
رمز Code:
<body></body>
ضعها بـ الفوتر او الهيدر header و انا افضل الهيدر header و الاكواد التي بين وسم
رمز Code:
<style type="text/css">
</style>
نضعها في تعاريف CSS الإضافية ,,
,,
و إلى هُنا اُنهي الدرس مفصل و من لم يفهم اكواد css فأنصحه بمدرس مفصلة كليبرز (http://cliprz-php.com) و ar.html.net (http://ar.html.net/)
,
,,
,(آخـــر تــعــديــل إعادة رفع الصور تــم بــتــاريــخ 9 / 1 / 2014),
فمان الله
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif صور الشرح.zip (http://www.traidnt.net/vb/attachments/546573d1294796565-صور-الشرح.zip) (611.9 كيلوبايت, عدد مرات المشاهدة 213 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
