ابو عبدالرحمن
2011-04-27, 07:20 PM
شرح تصميم إستايل جانبي و وضع الاعلانات و الروابط و الاكواد
اليوم بأذن الله سوف اطرح درس طال انتظاره و لا اخفي عليكم اني كُنت من احد مُترقبيه ,,
و من الله علي بإن حاولت حاولت حتى فشلت و فشلت ثم نجحت بعمل استايل جانبي
و الذي سوف نتطرق إليه بالدرس اليوم و الذي يجب ان تكون مُلم ولو 20% من :-
Html
Css
نبتدأ بالدرس على بإسم الله ,,
أولاً لنفتح برنامج الفوتوشوب و نصمم استايل جانبي و نقطعه و هذه صورة توضيحيه لطريقة التصميم و التقطيع ...
http://www.a2ibba.com/vb/attachment.php?attachmentid=6617&stc=1&d=1296688413
الأن نذهب نحفظه كصفحة ويب عن طريق ..
File > Save For Web
,,
نتوجه إلى محررك الخاص و انا من مُستخدمي
(Adobe Dreamweaver CS5)
و تابع الصُور
,,
http://www.a2ibba.com/vb/attachment.php?attachmentid=6618&stc=1&d=1296688493
http://www.a2ibba.com/vb/attachment.php?attachmentid=6619&stc=1&d=1296688506
http://www.a2ibba.com/vb/attachment.php?attachmentid=6620&stc=1&d=1296688649
http://www.a2ibba.com/vb/attachment.php?attachmentid=6621&stc=1&d=1296688682
http://www.a2ibba.com/vb/attachment.php?attachmentid=6622&stc=1&d=1296688718
http://www.a2ibba.com/vb/attachment.php?attachmentid=6623&stc=1&d=1296688757
http://www.a2ibba.com/vb/attachment.php?attachmentid=6624&stc=1&d=1296688816
http://www.a2ibba.com/vb/attachment.php?attachmentid=6625&stc=1&d=1296688860
http://www.a2ibba.com/vb/attachment.php?attachmentid=6626&stc=1&d=1296688895
الأن نذهب نقيس عرض القائمة الجانبية
http://www.a2ibba.com/vb/attachment.php?attachmentid=6627&stc=1&d=1296688970
كما نرى أن العرض 270 بعد ذلك نذهب إلى (خلفية المنتدى/Body) ونعدل
خواص CSS الإضافية
http://www.a2ibba.com/vb/attachment.php?attachmentid=6628&stc=1&d=1296689040
الأن نضع في خانة الخلفية صورة نقطة التمدد للقائمة الجانبية و نكررها بشكل
رأسي من جهة أعلي و يمين مثال على الكود
url(al7erbi/aL7eRbI_05.jpg) repeat-y top right
و الأن هذا الناتج بعد عمل الخطوات السابقة
http://www.a2ibba.com/vb/attachment.php?attachmentid=6629&stc=1&d=1296689223
بعد ذلك نعود لمحبُوبنا (Adobe Dreamweaver CS5) و ننظف الاكواد ليصبح بالشكل الآتي
,,
http://www.a2ibba.com/vb/attachment.php?attachmentid=6630&stc=1&d=1296689306
http://www.a2ibba.com/vb/attachment.php?attachmentid=6631&stc=1&d=1296689355
http://www.a2ibba.com/vb/attachment.php?attachmentid=6632&stc=1&d=1296689402
http://www.a2ibba.com/vb/attachment.php?attachmentid=6633&stc=1&d=1296689446
http://www.a2ibba.com/vb/attachment.php?attachmentid=6634&stc=1&d=1296689499
تم تعريف id الـ al7erbi-y
تم إدراج صورة التمدد و وضعها بتكرار رأسي
تم وضع عرض صورة التمدد و هي270 px
هُنا تم تحديد وضعية العنصر و تم وضعه بشكل مطلقabsolute
هُنا تم وضع اليمين صفر و من الاعلى صفر
تم تعريف id الـ al7erbi-y-1
هُنا تم وضع الصورة التجميلية للهيدر من غير تكرار وتم وضعها أعلى اليمين
هنا تم تحديد عرض الصورة بـ 270 Px
نحديد طولها بـ 167 Px
هُنا تم تعريف id الـ al7erbi-y-2
تم إدراج صورة تجميلية الخاصة بالأزرار مع عدم تكرارها أسفل اليمين
هنا تم تحديد عرضها بـ 270 Px
تم تحديد طولها بـ 175Px
,,
و الأن الاكواد التي بين وسم
<body></body>
ضعها بـ الفوتر او الهيدر و انا افضل الهيدر و الاكواد التي بين وسم
<style type="text/css">
</style>
نضعها في تعاريف CSS الإضافية ,,
منقول للفائده
اليوم بأذن الله سوف اطرح درس طال انتظاره و لا اخفي عليكم اني كُنت من احد مُترقبيه ,,
و من الله علي بإن حاولت حاولت حتى فشلت و فشلت ثم نجحت بعمل استايل جانبي
و الذي سوف نتطرق إليه بالدرس اليوم و الذي يجب ان تكون مُلم ولو 20% من :-
Html
Css
نبتدأ بالدرس على بإسم الله ,,
أولاً لنفتح برنامج الفوتوشوب و نصمم استايل جانبي و نقطعه و هذه صورة توضيحيه لطريقة التصميم و التقطيع ...
http://www.a2ibba.com/vb/attachment.php?attachmentid=6617&stc=1&d=1296688413
الأن نذهب نحفظه كصفحة ويب عن طريق ..
File > Save For Web
,,
نتوجه إلى محررك الخاص و انا من مُستخدمي
(Adobe Dreamweaver CS5)
و تابع الصُور
,,
http://www.a2ibba.com/vb/attachment.php?attachmentid=6618&stc=1&d=1296688493
http://www.a2ibba.com/vb/attachment.php?attachmentid=6619&stc=1&d=1296688506
http://www.a2ibba.com/vb/attachment.php?attachmentid=6620&stc=1&d=1296688649
http://www.a2ibba.com/vb/attachment.php?attachmentid=6621&stc=1&d=1296688682
http://www.a2ibba.com/vb/attachment.php?attachmentid=6622&stc=1&d=1296688718
http://www.a2ibba.com/vb/attachment.php?attachmentid=6623&stc=1&d=1296688757
http://www.a2ibba.com/vb/attachment.php?attachmentid=6624&stc=1&d=1296688816
http://www.a2ibba.com/vb/attachment.php?attachmentid=6625&stc=1&d=1296688860
http://www.a2ibba.com/vb/attachment.php?attachmentid=6626&stc=1&d=1296688895
الأن نذهب نقيس عرض القائمة الجانبية
http://www.a2ibba.com/vb/attachment.php?attachmentid=6627&stc=1&d=1296688970
كما نرى أن العرض 270 بعد ذلك نذهب إلى (خلفية المنتدى/Body) ونعدل
خواص CSS الإضافية
http://www.a2ibba.com/vb/attachment.php?attachmentid=6628&stc=1&d=1296689040
الأن نضع في خانة الخلفية صورة نقطة التمدد للقائمة الجانبية و نكررها بشكل
رأسي من جهة أعلي و يمين مثال على الكود
url(al7erbi/aL7eRbI_05.jpg) repeat-y top right
و الأن هذا الناتج بعد عمل الخطوات السابقة
http://www.a2ibba.com/vb/attachment.php?attachmentid=6629&stc=1&d=1296689223
بعد ذلك نعود لمحبُوبنا (Adobe Dreamweaver CS5) و ننظف الاكواد ليصبح بالشكل الآتي
,,
http://www.a2ibba.com/vb/attachment.php?attachmentid=6630&stc=1&d=1296689306
http://www.a2ibba.com/vb/attachment.php?attachmentid=6631&stc=1&d=1296689355
http://www.a2ibba.com/vb/attachment.php?attachmentid=6632&stc=1&d=1296689402
http://www.a2ibba.com/vb/attachment.php?attachmentid=6633&stc=1&d=1296689446
http://www.a2ibba.com/vb/attachment.php?attachmentid=6634&stc=1&d=1296689499
تم تعريف id الـ al7erbi-y
تم إدراج صورة التمدد و وضعها بتكرار رأسي
تم وضع عرض صورة التمدد و هي270 px
هُنا تم تحديد وضعية العنصر و تم وضعه بشكل مطلقabsolute
هُنا تم وضع اليمين صفر و من الاعلى صفر
تم تعريف id الـ al7erbi-y-1
هُنا تم وضع الصورة التجميلية للهيدر من غير تكرار وتم وضعها أعلى اليمين
هنا تم تحديد عرض الصورة بـ 270 Px
نحديد طولها بـ 167 Px
هُنا تم تعريف id الـ al7erbi-y-2
تم إدراج صورة تجميلية الخاصة بالأزرار مع عدم تكرارها أسفل اليمين
هنا تم تحديد عرضها بـ 270 Px
تم تحديد طولها بـ 175Px
,,
و الأن الاكواد التي بين وسم
<body></body>
ضعها بـ الفوتر او الهيدر و انا افضل الهيدر و الاكواد التي بين وسم
<style type="text/css">
</style>
نضعها في تعاريف CSS الإضافية ,,
منقول للفائده