شاعر بلا مشاعر
17-01-2012, 07:59 PM
بسم الله الرحمن الرحيم
السلام عليكم
ما هو ستايل المحتوى؟
هو ستايل يكون عبارة عن صندوق يكون بداخله محتوى المنتدى
غير الستايلات الأخرى المنفصله ..
ما الذي نحتاجه لتصميم ستايل من هذا النوع؟
طبعا نحتاج خبره بالتصميم.. ليس هناك شخص يريد تصميم ستايل وليس له خلفيه بالتصميم:ص6:
إنما نحتاج نقاط اساسيه نمشي عليها في مرحلة تصميمنا.. وكل شخص له ذوقه الخاص
وما نحتاجه هنا هي فكرة الستايل
ما هي فكرة الستايل ؟
نفس فكرة الاطار الخاص بالنافبار والأقسم
إللي تعلمناها سابقاً
ولكن هنا بشكل كامل..
المثال التالي هو ستايل منابع.. لو تلاحظون بأن فكرته تماماً نفس فكرة الاطار..
http://mnab33up.com/upfiles/phq23900.gif (http://mnab33up.com/)
شايفين كيف موضحه
الزوايا المحدده باللون الأحمر هي الزواية نفس فكرة زوايا الأطار سابقاً
اما بانسبه للون الأخضر فهي نقطة تمدد الستايل كامل..نفس فكرة تمدد الأطار
إذا نحن هنا نتعامل مع ستايل فكرته نفس فكرة الاطار.. لكن بشكل أكبر
كيف أبدأ في تصميم الستايل؟
إبدأ التصميم كما هو حال تصميم الأطار.. ولكن سوف اعطيكم بعض النقاط لتسهل عليكم التصميم
في البداية نفتح عمل جديد مثلا الطول: 1000بسكل والعرض : 850 بسكل
وليس عليك التقيد في الحجم ..لكن يجب مراعاة أن العرض لا يجب أن يتعدى 900 على أكثر تقدير
لكي يتنابس مع جميع مقاسات الشاشات.. فليس هناك شاشة عرضها اقل من 1000
أما الطول..وضعته 1000 ليكون لي حرية في التصميم ... لان الأطراف العموديه بالنهايه سوف تكون مجرد نقاط تمدد ..تمتمد من نفسها
بعدها
أعمل مستطيل أسود وضعه في الوسط..
وتكون هناك مساحات في جميع الأطراف
ثم إبدأ في التفكير بتصميم الاطار فقط مع مراعاة أن الاطار يكون في مستوى واحد ولا يحتوي على إنحناءات
بعدها استبدل المستطيل الأسود بخلفية تناسب الاطار
بعدها إبدأ في التفكير في الهيدر العلوي مع مراعات وجود نقطة تمدد لتكون خلفية للهيدر
وحال الهيدر هو حال الفوتر.. جميعهم من جد واحد :ص6:
وكل شخص له ذوقه الخاص وستايله الخاص في التصميم..
وأرجع للدرس وقم بقراءته مره أخرى .. وإبدأ في التقطيع
كيف ستكون تقطيعه في الفوتوشوب؟
في المثال التالي هو تقطيع لستايل منابع بالفوتوشوب:
http://mnab33up.com/upfiles/9Gc24549.png (http://mnab33up.com/)
بعد ما تنتهي من هذه المرحله.. نضع الصور داخل مجلد images وهذا المجلد داخل مجلد يكون إسم للستايل مثلاً MNAB33
هل يجب أن أقطع أيقونات الروابط لوحدها؟
لا ..
يجب عليك تقطيع فقط الجزء كامل
أما فكرة الروابط سيتم شرحها في قسم التركيب في موضوع منفصل
ولا يجب عليك أن تقطع أيقونات الروابط.. وسوف نرى التفاصيل في الدرس الخاص به
طيب اذا كان تصميم الهيدر فالوسط كيف رح يكون التقطيع ؟
برضوا سهله جدا
نفس إللي فوق بالضبط
بالمثال اللي بالاعلى قمنا بتقطيع التالي :
خلفية للهيدر: وهي نقطة التمدد للهيدر كامل
صورة هيدر يمين : وهي الصورة اليمنى والتي تحتوي على شعار منابع
صورة هيدر يسار : وهي الصورة اليسرى التي تحتوي على روابط
ونضيف أيضاً لو هناك صورة وسطى
صورة هيدر وسطى: وهي صورة في نص الهيدر
هل أستطيع تصميم ستايل محتوى يحتوي على صورة هيدر في النص فقط؟
لا طبعاً ، لابد من وجود الزاوية اليمنى واليسرى لتكون مركز الأطار كامل ..
فهل رأيت من قبل أطار بدون زوايا؟؟ لا طبعاً.. لذا لا يمكن صنع ستايل محتوى بتأطير رباعي من دون زوايا
هل أستطيع تصميم ستايل محتوى بدون أطاراف؟؟
عندها لن يكون ستايل ذو تأطير رباعي
سوف يكون ستايل عادي مثل اللي تعلمناه من قبل :ص6:
ما هي الصور الذي أتوقع أن أراها بعد التقطيع ؟
لكي يكون الستايل .. ستايل محتوى ذو تأطير رباعي.. يجب أن يكون نتائج تقطيعك كالتالي:
خلفية تمدد للهيدر
صوره للهيدر يمين ( الزاوية اليمنى )
صورة للهيدر يسار ( الزاوية اليسرى )
تمدد الأطار العموي الأيمن
تمدد الأطار العمودي الأيسر
خلفية المحتوى
خلفية تمدد للفوتر
صوره للفوتر يمين ( الزاوية اليمنى )
صورة للفوتر يسار ( الزاوية اليسرى )
وإحتمال تكون قد وضعت صورة وسطى للهيدر أو الفوتر.. فيكون هناك أيضاً صورة وسطى للهيدر والفوتر
هل هناك شي آخر يجب التأكد منه لنختبر صحة تصميمنا وتقطيعنا ؟
نعم..
الهيدر بعناصره ( صورة التمدد والصور ) يكون لها نفس الطول
الفوتر بعناصره ( صورة التمدد والصور ) يكون لها نفس الطول
نقطتا التمدد العموديه (اليمنى واليسرى) يكون لهما نفس العرض
لاحظوا بان الهيدر والفوتر نفس الطول
أما نقطتا التمدد نفس العرض
هل تقصد بان عناصر الهيدر وعناصر الفوتر لهم نفس الطول؟
لا طبعا..
عناصر الهدير لهم طول خاص
وعناصر الهيدر لهم طول خاص ولا يجب عليه أن يكون نفس طول عناصر الهيدر..
بعد ما تنتهي من هذه المرحله.. تأكد بأن الصور داخل مجلد images وهذا المجلد داخل مجلد يكون إسم للستايل مثلاً MNAB33
بالنهايه سوف يكون عندك مجلد يحتوي على إسم ستايلك.. وبداخله مجلد اسمه images الذي يحتوي على صور التقطيع الخاصه بالستايل
توجه بحول الله إلى المرحله الثانيه وهي التركيب في الدرس التالي:
التركـــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــــــــــــــــــــــــــــ ـــــــيب
السلام عليكم
ما هو ستايل المحتوى؟
هو ستايل يكون عبارة عن صندوق يكون بداخله محتوى المنتدى
غير الستايلات الأخرى المنفصله ..
ما هي فكرة تركيب الستايل ؟
نفس فكرة الاطار الخاص بالنافبار والأقسم
ولكن هنا بشكل كامل.. والصورة التالية توضح فكرة التوزيع
http://www.mnab33.com/vb/MNAB33/images/pic8.jpg
وهذا المثال الذي في الأعلى مثل ستايل منابع الأول في درس التصميم
ولإضافة صوره في النص بالهيدر .. مجرد إضافة div مثل اليمين واليسار ونضيف فيه كود التوسيط إللي تعلمناه بدروس سابقة
هل نستطيع الإستعانة بكود الاطار ؟
لا فهنا نحن نتعامل مع محتوى كامل مليء بالجداول والبيانات الآخرى
هل نستطيع عمله بالسي اس اس بدون مشاكل ومتوافق مع المقاييس المعايرة ؟
نعم ، أسهل وأفضل طريقة هي توزيعه بالسي اس اس.. ليكون الستايل أسرع وأكثر فاعليه
هل أستطيع إضافة روابط في الستايل ؟
نعم ليس هناك أي مشكله مع الروابط.. وسوف يكون هناك درس منفصل لإضافة الروابط تابع لهذا الدرس
لقد صممنا ستايل وقطعناه من جزء التصميم.. كيف بنا نبدأ في تكوين الستايل .؟ وهل هناك صعوبه وتعقيد؟
عند بناء الكود من البدايه هناك بعض الصعوبه.. لذا قررت بأني أوزع اكواد جاهزه وأضيف ملاحظات لكل كود .. يبين لكم ما تحتاجون تبديله .. سوف يكون عملكم بكل بساطة.. تغيير مسارات الصور والمقاسات الخاصة بها
لكن كيف تكون الفكره.. فالهيدر قالب لوحده والفوتر قالب لوحده؟.. أعطنا فكره عامه مبدأيه
الفكرة وبكل بساطه.. هي كود طويل.. يكون منفصل جزئين
جزء في الهيدر.. وجزء مكمل له في الفوتر..
وبهكذا سوف يتصلون مع بعضهم تلقائياً
في شرح اخر.. تخيل ان المنتدى كله عبارة عن نافبار.. والكود الحالي هو الاطار
فهناك جزء علوي وجزء سفلي..
هذه الفكره نفسها
كود طويل جزئين
العلوي في الهيدر
والسفلي في الفوتر
كيف سيكون شرح هذا الموضوع؟
وضعت في مرفقات الدرس المنفصل
ملف للجزء HTML لا يتغير ابداً ويكون منفصلين.. وقد وضعت ملاحظات لذالك
ملف لجزء css .. يتم من خلاله تغيير المعطيات الخاصه بصوركم ومقاساتها.. وتم وضع ملاحظات فوق كل جزء .. ما يجب تركه وما يجب تغييره
لدي بعض التعقيد في السي اس اس .. هل لك بشرح كل جزء بالتفصيل؟
نعم بالتأكيد
لنبدأ
.container
/*
كود المجمع للأكواد كامله
*/
.container {width: 100%; margin: 0px auto;}
وضيفته تحديد عرض الستايل.. ولقد وضعت بانه 100% لكي يكون ممتد على طول الصفحة
#header
/*
كود الهدير.. ويوضع به خلفية التمدد الخاصه بالهيدر
وطول خلفية التمدد
*/
#header {
background-image:url('MNAB33/images/MNAB33_02.jpg');
height:293px;
background-repeat:repeat-x;
}
هذه الصورة التي وضعتها
http://www.mnab33.com/vb/MNAB33/images/MNAB33_02.jpg
هذا الكود هو كود الهيدر.. ويتم بداخله وضع مسار خلفية الهيدر مع تغيير طول خلفية التمدد
#header_right
/*
الهيدر يمين.. يوضع به رابط الصوره الخاص بالهدير الجزء الأيمن
لا تنسى تغيير العرض والطول للصورة..
*/
#header_right {
background-image:url('MNAB33/images/MNAB33_03.jpg');
height:293px;
width:403px;
float:right;
background-repeat:no-repeat;
}
ولقد وضعت هذه الصوره
http://www.mnab33.com/vb/MNAB33/images/MNAB33_03.jpg
وهي صورة الهيدر اليمين.. وتم وضع العرض والطول الخاص بها..
#header .header_left
/*
الهيدر يسار.. يوضع به رابط الصوره الخاص بالهدير الجزء الأيسر
لا تنسى تغيير العرض والطول للصورة..
*/
#header .header_left {
background-image:url('MNAB33/images/MNAB33_011.jpg');
height:293px;
width:411px;
float:left;
background-repeat:no-repeat;
}
ولقد وضعت هذه الصورة
http://www.mnab33.com/vb/MNAB33/images/MNAB33_01.jpg
وهي الصورة الخاصه بالهيدر الجزء الأيسر
يتم بها وضع مسار الصورة .. وتغيير العرض والطول الخاص بها
.*******-left
/*
التمدد الجانبي الأيسر.. ويوضع به رابط صورة التمدد الجانبي يسار
في خانة
padding-left
هو مقدار الإنزحاح من اليسار
ضع به عرض نقطة التمدد
*/
.*******-left {padding-left:34px; background-image:url('MNAB33/images/MNAB33_04.jpg');
background-repeat:repeat; background-position: left;
}
ولقد وضعت هذه الصوره
http://www.mnab33.com/vb/MNAB33/images/MNAB33_04.jpg
وهي صورة التمدد الجانبي الأيسر
يتم من خلال الكود تغيير مسار الصوره إلى التي تخصكم
ونضع مقياس عرضها في
padding-left
*******-right
/*
التمدد الجانبي يمين.. ويوضع به رابط صورة التمدد الجانبي يمين
في خانة
padding-left
هو مقدار الإنزحاح من اليسار
ضع به عرض نقطة التمدد
*/
.*******-right {padding-right:36px; background-image:url('MNAB33/images/MNAB33_06.jpg');
background-repeat: repeat; background-position: right;
}
ولقد وضعت به هذه الصوره
http://www.mnab33.com/vb/MNAB33/images/MNAB33_06.jpg
وهي صورة خلفية التمدد الجانبي الأيمن
ولا ننسى وضع عرضها في
padding-right
*******/*
المحتوى.. ويوضع به خلفية الستايل في المحتوى الداخلي..أي بمنطقة المتوسطة
*/
.******* {width: 100%; margin: 0px auto; background-color:#E3E0E0; background-image:url('MNAB33/images/MNAB33_05.jpg');
background-repeat:repeat;
}
ولقد وضعت به هذه الصوره (قد لا تكون واضحه بهذا الستايل لان خلفيتها نفس خلفية الموضوع .. بتحديد الماوس تقدر تشوف ان فيه صورة )
http://www.mnab33.com/vb/MNAB33/images/MNAB33_05.jpg
وهي خامة المحتوى الداخلي للستايل
لا تغير الا مسار الصورة واللون
وإن لم تكون هناك صوره .. احذف الكود الخاص بالصوره
background-image:url('MNAB33/images/MNAB33_05.jpg');
#footer
/*
كود الفوتر.. ويوضع به رابط تمدد الفوتر
وطول خلفية التمدد
*/
#footer {
background-image:url('MNAB33/images/MNAB33_08.jpg');
height:47px;
width:100%;
background-repeat:repeat-x;
}
ولقد وضعت به هذه الصوره
http://www.mnab33.com/vb/MNAB33/images/MNAB33_08.jpg
وهي صورة خلفية التمدد للفوتر
ولا تنسوا وضع طول صورة التمدد الخاص بكم
#footer_right
/*
الفوتر يمين.. يوضع به رابط الصوره الخاص بالفوتر الجزء الأيمن
لا تنسى تغيير العرض والطول للصورة..
*/
#footer_right {
background-image:url('MNAB33/images/MNAB33_09.jpg');
height:47px;
width:50px;
float:right;
background-repeat:no-repeat;
}
ولقد وضعت به هذه الصوره
http://www.mnab33.com/vb/MNAB33/images/MNAB33_09.jpg
وهي صورة الفوتر اليمنى
لا تنسوا تغيير العرض والطول للصور الخاصه بكم
#footer .footer_left
/*
الفوتر يسار.. يوضع به رابط الصوره الخاص بالفوتر الجزء الأيسر
لا تنسى تغيير العرض والطول للصورة..
*/
#footer .footer_left {
background-image:url('MNAB33/images/MNAB33_07.jpg');
height:47px;
width:49px;
float:left;
background-repeat:no-repeat;
}
ولقد وضعته به هذه الصورة
http://www.mnab33.com/vb/MNAB33/images/MNAB33_07.jpg
وهي صورة الفوتر اليسرى
ولا تنسوا تغيروا عرض وطول الصوره الخاصه بكم
وبهكذا انتهينا من شرح تفاصيل خصائص السي اس اس الخاصه بالكود
شكرا لك اخي حماده.. هل بإمكانك أن تعيد مره أخرى وتذكرنا أينا نضع هذه الأكواد؟
نعم بالتاكيد
من لوحة تحكم المنتدى
توجه إلى التحكم بالإستايلات
إضغط "إذهب" بجوار الستايل الخاص بك ليتم فتح اعدادات الستايل كامله
إذهب إلى آخر الصفحة سوف تجد التالي
http://www.mnab33.com/vb/MNAB33/images/pic1.jpg
ضعها في اخر المربع المحدد فوق.. أو المربع الذي تحته
هناك أكواد موجوده مسبقاً.. هل أمسحها أم ماذا ؟
عادة يتم توليد اكواد عبارة عن ملاحظات من قبل المنتدى..
ولكن تذكر ان هذا المربع هو المربع الخاص في خصائص السي اس اس الإضافة
لذا انصح بتركه كما هو.. لكي لا تفقد اكواد سابقة تم إضافتها
انتهينا من خصائص السي اس اس.. هل لك بشرح كيفية وضع اكواد HTML في الهيدر والفوتر؟
لا تحتاج شرح فهي بسيطه وموجوده مسبقاً ملاحظات تبين أي كود يتم وضعه في الهيدر وأي كود يتم وضعه في الفوتر
أعرف ذلك ولكن أحسست ببعض التأكيد.. هل بإمكانك شرح تفاصيل :بد3:؟
دايم كسولين.. طيب ولا يهمكم
من خلال برنامج
Microsoft Expression Web 2
أو أي برنامج أخر.
حتى لو المفكره
سوف نحدد أكواد الهيدر .. وهي كالتالي
http://www.mnab33.com/vb/MNAB33/images/pic2.jpg
إنسخ الأكواد
من
<!-- بداية الكود الذي يوضع في الهيدر -->
إلى
<!-- نهاية الكود الذي يوضع في الهيدر -->
ومن ثم توجه إلى اعدادات الستايل الخاصه بستايلك..
سوف تجد الهيدر
http://www.mnab33.com/vb/MNAB33/images/pic3.jpg
وأمسح الجزء العلوي من الهيدر من بدايته إلى الملاحظة التالية
<!-- ******* table -->
وسوف يكون الكود التالي الذي يجب مسحه:
<!-- logo -->
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="$stylevar[left]"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
<td align="$stylevar" id="header_right_cell">
<if condition="$ad_********['ad_header_logo']">$ad_********[ad_header_logo]<else /> </if>
</td>
</tr>
</table>
<!-- /logo -->
<!-- ******* table -->
وضع بعدها الحزء الخاص بالهيدر الخاص بك.. الذي تم تحديده
http://www.mnab33.com/vb/MNAB33/images/pic4.jpg
أما الجزء الآخر فهو جزء الفوتر
http://www.mnab33.com/vb/MNAB33/images/pic5.jpg
يتم تحديد الاكواد من
<!-- بداية الكود الذي يوضع في الفوتر -->
إلى
<!-- نهاية الكود الذي يوضع في الفوتر -->
ويتم وضعه في آخر قالب الفوتر بدون حذف أي شي آخر
http://www.mnab33.com/vb/MNAB33/images/pic6.jpg
ولا ننسى تغيير الـ margin الخاص بالستايل إلى 0 من خلال المربع التالي
http://www.mnab33.com/vb/MNAB33/images/pic7.jpg
لكي يتم مسح أي جزء زائد من الاطراف
وسوف تلاحظون بأن الستايل تم تركيبه وبحالة جيده وبجميع المتصفحات :ص6:
شكرا لك اخي حماده.. ماذا عن الروابط؟؟
سوف يتم وضعها في موضوع منفصل لكي تعم الفائده
فكرتها بسيطه وسيتم شرحها بالفيديو والصوت ..
هل هناك شي آخر تحب إضافته ؟
لا شي يخطر في بالي..
عسى أني قد وفقت في شرح تفاصيل هذا النوع من التركيب ..
وخير ما تقدمونه في المقابل هو دعوه لي في ظهر الغيب
شكرا لكم
السلام عليكم
ما هو ستايل المحتوى؟
هو ستايل يكون عبارة عن صندوق يكون بداخله محتوى المنتدى
غير الستايلات الأخرى المنفصله ..
ما الذي نحتاجه لتصميم ستايل من هذا النوع؟
طبعا نحتاج خبره بالتصميم.. ليس هناك شخص يريد تصميم ستايل وليس له خلفيه بالتصميم:ص6:
إنما نحتاج نقاط اساسيه نمشي عليها في مرحلة تصميمنا.. وكل شخص له ذوقه الخاص
وما نحتاجه هنا هي فكرة الستايل
ما هي فكرة الستايل ؟
نفس فكرة الاطار الخاص بالنافبار والأقسم
إللي تعلمناها سابقاً
ولكن هنا بشكل كامل..
المثال التالي هو ستايل منابع.. لو تلاحظون بأن فكرته تماماً نفس فكرة الاطار..
http://mnab33up.com/upfiles/phq23900.gif (http://mnab33up.com/)
شايفين كيف موضحه
الزوايا المحدده باللون الأحمر هي الزواية نفس فكرة زوايا الأطار سابقاً
اما بانسبه للون الأخضر فهي نقطة تمدد الستايل كامل..نفس فكرة تمدد الأطار
إذا نحن هنا نتعامل مع ستايل فكرته نفس فكرة الاطار.. لكن بشكل أكبر
كيف أبدأ في تصميم الستايل؟
إبدأ التصميم كما هو حال تصميم الأطار.. ولكن سوف اعطيكم بعض النقاط لتسهل عليكم التصميم
في البداية نفتح عمل جديد مثلا الطول: 1000بسكل والعرض : 850 بسكل
وليس عليك التقيد في الحجم ..لكن يجب مراعاة أن العرض لا يجب أن يتعدى 900 على أكثر تقدير
لكي يتنابس مع جميع مقاسات الشاشات.. فليس هناك شاشة عرضها اقل من 1000
أما الطول..وضعته 1000 ليكون لي حرية في التصميم ... لان الأطراف العموديه بالنهايه سوف تكون مجرد نقاط تمدد ..تمتمد من نفسها
بعدها
أعمل مستطيل أسود وضعه في الوسط..
وتكون هناك مساحات في جميع الأطراف
ثم إبدأ في التفكير بتصميم الاطار فقط مع مراعاة أن الاطار يكون في مستوى واحد ولا يحتوي على إنحناءات
بعدها استبدل المستطيل الأسود بخلفية تناسب الاطار
بعدها إبدأ في التفكير في الهيدر العلوي مع مراعات وجود نقطة تمدد لتكون خلفية للهيدر
وحال الهيدر هو حال الفوتر.. جميعهم من جد واحد :ص6:
وكل شخص له ذوقه الخاص وستايله الخاص في التصميم..
وأرجع للدرس وقم بقراءته مره أخرى .. وإبدأ في التقطيع
كيف ستكون تقطيعه في الفوتوشوب؟
في المثال التالي هو تقطيع لستايل منابع بالفوتوشوب:
http://mnab33up.com/upfiles/9Gc24549.png (http://mnab33up.com/)
بعد ما تنتهي من هذه المرحله.. نضع الصور داخل مجلد images وهذا المجلد داخل مجلد يكون إسم للستايل مثلاً MNAB33
هل يجب أن أقطع أيقونات الروابط لوحدها؟
لا ..
يجب عليك تقطيع فقط الجزء كامل
أما فكرة الروابط سيتم شرحها في قسم التركيب في موضوع منفصل
ولا يجب عليك أن تقطع أيقونات الروابط.. وسوف نرى التفاصيل في الدرس الخاص به
طيب اذا كان تصميم الهيدر فالوسط كيف رح يكون التقطيع ؟
برضوا سهله جدا
نفس إللي فوق بالضبط
بالمثال اللي بالاعلى قمنا بتقطيع التالي :
خلفية للهيدر: وهي نقطة التمدد للهيدر كامل
صورة هيدر يمين : وهي الصورة اليمنى والتي تحتوي على شعار منابع
صورة هيدر يسار : وهي الصورة اليسرى التي تحتوي على روابط
ونضيف أيضاً لو هناك صورة وسطى
صورة هيدر وسطى: وهي صورة في نص الهيدر
هل أستطيع تصميم ستايل محتوى يحتوي على صورة هيدر في النص فقط؟
لا طبعاً ، لابد من وجود الزاوية اليمنى واليسرى لتكون مركز الأطار كامل ..
فهل رأيت من قبل أطار بدون زوايا؟؟ لا طبعاً.. لذا لا يمكن صنع ستايل محتوى بتأطير رباعي من دون زوايا
هل أستطيع تصميم ستايل محتوى بدون أطاراف؟؟
عندها لن يكون ستايل ذو تأطير رباعي
سوف يكون ستايل عادي مثل اللي تعلمناه من قبل :ص6:
ما هي الصور الذي أتوقع أن أراها بعد التقطيع ؟
لكي يكون الستايل .. ستايل محتوى ذو تأطير رباعي.. يجب أن يكون نتائج تقطيعك كالتالي:
خلفية تمدد للهيدر
صوره للهيدر يمين ( الزاوية اليمنى )
صورة للهيدر يسار ( الزاوية اليسرى )
تمدد الأطار العموي الأيمن
تمدد الأطار العمودي الأيسر
خلفية المحتوى
خلفية تمدد للفوتر
صوره للفوتر يمين ( الزاوية اليمنى )
صورة للفوتر يسار ( الزاوية اليسرى )
وإحتمال تكون قد وضعت صورة وسطى للهيدر أو الفوتر.. فيكون هناك أيضاً صورة وسطى للهيدر والفوتر
هل هناك شي آخر يجب التأكد منه لنختبر صحة تصميمنا وتقطيعنا ؟
نعم..
الهيدر بعناصره ( صورة التمدد والصور ) يكون لها نفس الطول
الفوتر بعناصره ( صورة التمدد والصور ) يكون لها نفس الطول
نقطتا التمدد العموديه (اليمنى واليسرى) يكون لهما نفس العرض
لاحظوا بان الهيدر والفوتر نفس الطول
أما نقطتا التمدد نفس العرض
هل تقصد بان عناصر الهيدر وعناصر الفوتر لهم نفس الطول؟
لا طبعا..
عناصر الهدير لهم طول خاص
وعناصر الهيدر لهم طول خاص ولا يجب عليه أن يكون نفس طول عناصر الهيدر..
بعد ما تنتهي من هذه المرحله.. تأكد بأن الصور داخل مجلد images وهذا المجلد داخل مجلد يكون إسم للستايل مثلاً MNAB33
بالنهايه سوف يكون عندك مجلد يحتوي على إسم ستايلك.. وبداخله مجلد اسمه images الذي يحتوي على صور التقطيع الخاصه بالستايل
توجه بحول الله إلى المرحله الثانيه وهي التركيب في الدرس التالي:
التركـــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــــــــــــــــــــــــــــ ـــــــيب
السلام عليكم
ما هو ستايل المحتوى؟
هو ستايل يكون عبارة عن صندوق يكون بداخله محتوى المنتدى
غير الستايلات الأخرى المنفصله ..
ما هي فكرة تركيب الستايل ؟
نفس فكرة الاطار الخاص بالنافبار والأقسم
ولكن هنا بشكل كامل.. والصورة التالية توضح فكرة التوزيع
http://www.mnab33.com/vb/MNAB33/images/pic8.jpg
وهذا المثال الذي في الأعلى مثل ستايل منابع الأول في درس التصميم
ولإضافة صوره في النص بالهيدر .. مجرد إضافة div مثل اليمين واليسار ونضيف فيه كود التوسيط إللي تعلمناه بدروس سابقة
هل نستطيع الإستعانة بكود الاطار ؟
لا فهنا نحن نتعامل مع محتوى كامل مليء بالجداول والبيانات الآخرى
هل نستطيع عمله بالسي اس اس بدون مشاكل ومتوافق مع المقاييس المعايرة ؟
نعم ، أسهل وأفضل طريقة هي توزيعه بالسي اس اس.. ليكون الستايل أسرع وأكثر فاعليه
هل أستطيع إضافة روابط في الستايل ؟
نعم ليس هناك أي مشكله مع الروابط.. وسوف يكون هناك درس منفصل لإضافة الروابط تابع لهذا الدرس
لقد صممنا ستايل وقطعناه من جزء التصميم.. كيف بنا نبدأ في تكوين الستايل .؟ وهل هناك صعوبه وتعقيد؟
عند بناء الكود من البدايه هناك بعض الصعوبه.. لذا قررت بأني أوزع اكواد جاهزه وأضيف ملاحظات لكل كود .. يبين لكم ما تحتاجون تبديله .. سوف يكون عملكم بكل بساطة.. تغيير مسارات الصور والمقاسات الخاصة بها
لكن كيف تكون الفكره.. فالهيدر قالب لوحده والفوتر قالب لوحده؟.. أعطنا فكره عامه مبدأيه
الفكرة وبكل بساطه.. هي كود طويل.. يكون منفصل جزئين
جزء في الهيدر.. وجزء مكمل له في الفوتر..
وبهكذا سوف يتصلون مع بعضهم تلقائياً
في شرح اخر.. تخيل ان المنتدى كله عبارة عن نافبار.. والكود الحالي هو الاطار
فهناك جزء علوي وجزء سفلي..
هذه الفكره نفسها
كود طويل جزئين
العلوي في الهيدر
والسفلي في الفوتر
كيف سيكون شرح هذا الموضوع؟
وضعت في مرفقات الدرس المنفصل
ملف للجزء HTML لا يتغير ابداً ويكون منفصلين.. وقد وضعت ملاحظات لذالك
ملف لجزء css .. يتم من خلاله تغيير المعطيات الخاصه بصوركم ومقاساتها.. وتم وضع ملاحظات فوق كل جزء .. ما يجب تركه وما يجب تغييره
لدي بعض التعقيد في السي اس اس .. هل لك بشرح كل جزء بالتفصيل؟
نعم بالتأكيد
لنبدأ
.container
/*
كود المجمع للأكواد كامله
*/
.container {width: 100%; margin: 0px auto;}
وضيفته تحديد عرض الستايل.. ولقد وضعت بانه 100% لكي يكون ممتد على طول الصفحة
#header
/*
كود الهدير.. ويوضع به خلفية التمدد الخاصه بالهيدر
وطول خلفية التمدد
*/
#header {
background-image:url('MNAB33/images/MNAB33_02.jpg');
height:293px;
background-repeat:repeat-x;
}
هذه الصورة التي وضعتها
http://www.mnab33.com/vb/MNAB33/images/MNAB33_02.jpg
هذا الكود هو كود الهيدر.. ويتم بداخله وضع مسار خلفية الهيدر مع تغيير طول خلفية التمدد
#header_right
/*
الهيدر يمين.. يوضع به رابط الصوره الخاص بالهدير الجزء الأيمن
لا تنسى تغيير العرض والطول للصورة..
*/
#header_right {
background-image:url('MNAB33/images/MNAB33_03.jpg');
height:293px;
width:403px;
float:right;
background-repeat:no-repeat;
}
ولقد وضعت هذه الصوره
http://www.mnab33.com/vb/MNAB33/images/MNAB33_03.jpg
وهي صورة الهيدر اليمين.. وتم وضع العرض والطول الخاص بها..
#header .header_left
/*
الهيدر يسار.. يوضع به رابط الصوره الخاص بالهدير الجزء الأيسر
لا تنسى تغيير العرض والطول للصورة..
*/
#header .header_left {
background-image:url('MNAB33/images/MNAB33_011.jpg');
height:293px;
width:411px;
float:left;
background-repeat:no-repeat;
}
ولقد وضعت هذه الصورة
http://www.mnab33.com/vb/MNAB33/images/MNAB33_01.jpg
وهي الصورة الخاصه بالهيدر الجزء الأيسر
يتم بها وضع مسار الصورة .. وتغيير العرض والطول الخاص بها
.*******-left
/*
التمدد الجانبي الأيسر.. ويوضع به رابط صورة التمدد الجانبي يسار
في خانة
padding-left
هو مقدار الإنزحاح من اليسار
ضع به عرض نقطة التمدد
*/
.*******-left {padding-left:34px; background-image:url('MNAB33/images/MNAB33_04.jpg');
background-repeat:repeat; background-position: left;
}
ولقد وضعت هذه الصوره
http://www.mnab33.com/vb/MNAB33/images/MNAB33_04.jpg
وهي صورة التمدد الجانبي الأيسر
يتم من خلال الكود تغيير مسار الصوره إلى التي تخصكم
ونضع مقياس عرضها في
padding-left
*******-right
/*
التمدد الجانبي يمين.. ويوضع به رابط صورة التمدد الجانبي يمين
في خانة
padding-left
هو مقدار الإنزحاح من اليسار
ضع به عرض نقطة التمدد
*/
.*******-right {padding-right:36px; background-image:url('MNAB33/images/MNAB33_06.jpg');
background-repeat: repeat; background-position: right;
}
ولقد وضعت به هذه الصوره
http://www.mnab33.com/vb/MNAB33/images/MNAB33_06.jpg
وهي صورة خلفية التمدد الجانبي الأيمن
ولا ننسى وضع عرضها في
padding-right
*******/*
المحتوى.. ويوضع به خلفية الستايل في المحتوى الداخلي..أي بمنطقة المتوسطة
*/
.******* {width: 100%; margin: 0px auto; background-color:#E3E0E0; background-image:url('MNAB33/images/MNAB33_05.jpg');
background-repeat:repeat;
}
ولقد وضعت به هذه الصوره (قد لا تكون واضحه بهذا الستايل لان خلفيتها نفس خلفية الموضوع .. بتحديد الماوس تقدر تشوف ان فيه صورة )
http://www.mnab33.com/vb/MNAB33/images/MNAB33_05.jpg
وهي خامة المحتوى الداخلي للستايل
لا تغير الا مسار الصورة واللون
وإن لم تكون هناك صوره .. احذف الكود الخاص بالصوره
background-image:url('MNAB33/images/MNAB33_05.jpg');
#footer
/*
كود الفوتر.. ويوضع به رابط تمدد الفوتر
وطول خلفية التمدد
*/
#footer {
background-image:url('MNAB33/images/MNAB33_08.jpg');
height:47px;
width:100%;
background-repeat:repeat-x;
}
ولقد وضعت به هذه الصوره
http://www.mnab33.com/vb/MNAB33/images/MNAB33_08.jpg
وهي صورة خلفية التمدد للفوتر
ولا تنسوا وضع طول صورة التمدد الخاص بكم
#footer_right
/*
الفوتر يمين.. يوضع به رابط الصوره الخاص بالفوتر الجزء الأيمن
لا تنسى تغيير العرض والطول للصورة..
*/
#footer_right {
background-image:url('MNAB33/images/MNAB33_09.jpg');
height:47px;
width:50px;
float:right;
background-repeat:no-repeat;
}
ولقد وضعت به هذه الصوره
http://www.mnab33.com/vb/MNAB33/images/MNAB33_09.jpg
وهي صورة الفوتر اليمنى
لا تنسوا تغيير العرض والطول للصور الخاصه بكم
#footer .footer_left
/*
الفوتر يسار.. يوضع به رابط الصوره الخاص بالفوتر الجزء الأيسر
لا تنسى تغيير العرض والطول للصورة..
*/
#footer .footer_left {
background-image:url('MNAB33/images/MNAB33_07.jpg');
height:47px;
width:49px;
float:left;
background-repeat:no-repeat;
}
ولقد وضعته به هذه الصورة
http://www.mnab33.com/vb/MNAB33/images/MNAB33_07.jpg
وهي صورة الفوتر اليسرى
ولا تنسوا تغيروا عرض وطول الصوره الخاصه بكم
وبهكذا انتهينا من شرح تفاصيل خصائص السي اس اس الخاصه بالكود
شكرا لك اخي حماده.. هل بإمكانك أن تعيد مره أخرى وتذكرنا أينا نضع هذه الأكواد؟
نعم بالتاكيد
من لوحة تحكم المنتدى
توجه إلى التحكم بالإستايلات
إضغط "إذهب" بجوار الستايل الخاص بك ليتم فتح اعدادات الستايل كامله
إذهب إلى آخر الصفحة سوف تجد التالي
http://www.mnab33.com/vb/MNAB33/images/pic1.jpg
ضعها في اخر المربع المحدد فوق.. أو المربع الذي تحته
هناك أكواد موجوده مسبقاً.. هل أمسحها أم ماذا ؟
عادة يتم توليد اكواد عبارة عن ملاحظات من قبل المنتدى..
ولكن تذكر ان هذا المربع هو المربع الخاص في خصائص السي اس اس الإضافة
لذا انصح بتركه كما هو.. لكي لا تفقد اكواد سابقة تم إضافتها
انتهينا من خصائص السي اس اس.. هل لك بشرح كيفية وضع اكواد HTML في الهيدر والفوتر؟
لا تحتاج شرح فهي بسيطه وموجوده مسبقاً ملاحظات تبين أي كود يتم وضعه في الهيدر وأي كود يتم وضعه في الفوتر
أعرف ذلك ولكن أحسست ببعض التأكيد.. هل بإمكانك شرح تفاصيل :بد3:؟
دايم كسولين.. طيب ولا يهمكم
من خلال برنامج
Microsoft Expression Web 2
أو أي برنامج أخر.
حتى لو المفكره
سوف نحدد أكواد الهيدر .. وهي كالتالي
http://www.mnab33.com/vb/MNAB33/images/pic2.jpg
إنسخ الأكواد
من
<!-- بداية الكود الذي يوضع في الهيدر -->
إلى
<!-- نهاية الكود الذي يوضع في الهيدر -->
ومن ثم توجه إلى اعدادات الستايل الخاصه بستايلك..
سوف تجد الهيدر
http://www.mnab33.com/vb/MNAB33/images/pic3.jpg
وأمسح الجزء العلوي من الهيدر من بدايته إلى الملاحظة التالية
<!-- ******* table -->
وسوف يكون الكود التالي الذي يجب مسحه:
<!-- logo -->
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="$stylevar[left]"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
<td align="$stylevar" id="header_right_cell">
<if condition="$ad_********['ad_header_logo']">$ad_********[ad_header_logo]<else /> </if>
</td>
</tr>
</table>
<!-- /logo -->
<!-- ******* table -->
وضع بعدها الحزء الخاص بالهيدر الخاص بك.. الذي تم تحديده
http://www.mnab33.com/vb/MNAB33/images/pic4.jpg
أما الجزء الآخر فهو جزء الفوتر
http://www.mnab33.com/vb/MNAB33/images/pic5.jpg
يتم تحديد الاكواد من
<!-- بداية الكود الذي يوضع في الفوتر -->
إلى
<!-- نهاية الكود الذي يوضع في الفوتر -->
ويتم وضعه في آخر قالب الفوتر بدون حذف أي شي آخر
http://www.mnab33.com/vb/MNAB33/images/pic6.jpg
ولا ننسى تغيير الـ margin الخاص بالستايل إلى 0 من خلال المربع التالي
http://www.mnab33.com/vb/MNAB33/images/pic7.jpg
لكي يتم مسح أي جزء زائد من الاطراف
وسوف تلاحظون بأن الستايل تم تركيبه وبحالة جيده وبجميع المتصفحات :ص6:
شكرا لك اخي حماده.. ماذا عن الروابط؟؟
سوف يتم وضعها في موضوع منفصل لكي تعم الفائده
فكرتها بسيطه وسيتم شرحها بالفيديو والصوت ..
هل هناك شي آخر تحب إضافته ؟
لا شي يخطر في بالي..
عسى أني قد وفقت في شرح تفاصيل هذا النوع من التركيب ..
وخير ما تقدمونه في المقابل هو دعوه لي في ظهر الغيب
شكرا لكم