بعد ما تنتهي من هذه المرحله.. نضع الصور داخل مجلد
images وهذا المجلد داخل مجلد يكون إسم للستايل مثلاً
MNAB33 هل يجب أن أقطع أيقونات الروابط لوحدها؟
لا ..
يجب عليك تقطيع فقط الجزء كامل
أما فكرة الروابط سيتم شرحها في قسم التركيب في موضوع منفصل
ولا يجب عليك أن تقطع أيقونات الروابط.. وسوف نرى التفاصيل في الدرس الخاص به
طيب اذا كان تصميم الهيدر فالوسط كيف رح يكون التقطيع ؟
برضوا سهله جدا
نفس إللي فوق بالضبط
بالمثال اللي بالاعلى قمنا بتقطيع التالي :
خلفية للهيدر: وهي نقطة التمدد للهيدر كامل
صورة هيدر يمين : وهي الصورة اليمنى والتي تحتوي على شعار منابع
صورة هيدر يسار : وهي الصورة اليسرى التي تحتوي على روابط
ونضيف أيضاً لو هناك صورة وسطى
صورة هيدر وسطى: وهي صورة في نص الهيدر
هل أستطيع تصميم ستايل محتوى يحتوي على صورة هيدر في النص فقط؟
لا طبعاً ، لابد من وجود الزاوية اليمنى واليسرى لتكون مركز الأطار كامل ..
فهل رأيت من قبل أطار بدون زوايا؟؟ لا طبعاً.. لذا لا يمكن صنع ستايل محتوى بتأطير رباعي من دون زوايا
هل أستطيع تصميم ستايل محتوى بدون أطاراف؟؟
عندها لن يكون ستايل ذو تأطير رباعي
سوف يكون ستايل عادي مثل اللي تعلمناه من قبل :ص6:
ما هي الصور الذي أتوقع أن أراها بعد التقطيع ؟
لكي يكون الستايل .. ستايل محتوى ذو تأطير رباعي.. يجب أن يكون نتائج تقطيعك كالتالي:
- خلفية تمدد للهيدر
صوره للهيدر يمين ( الزاوية اليمنى )
صورة للهيدر يسار ( الزاوية اليسرى )
تمدد الأطار العموي الأيمن
تمدد الأطار العمودي الأيسر
خلفية المحتوى
خلفية تمدد للفوتر
صوره للفوتر يمين ( الزاوية اليمنى )
صورة للفوتر يسار ( الزاوية اليسرى )
وإحتمال تكون قد وضعت صورة وسطى للهيدر أو الفوتر.. فيكون هناك أيضاً صورة وسطى للهيدر والفوتر
هل هناك شي آخر يجب التأكد منه لنختبر صحة تصميمنا وتقطيعنا ؟
نعم..
- الهيدر بعناصره ( صورة التمدد والصور ) يكون لها نفس الطول
الفوتر بعناصره ( صورة التمدد والصور ) يكون لها نفس الطول
نقطتا التمدد العموديه (اليمنى واليسرى) يكون لهما نفس العرض
لاحظوا بان الهيدر والفوتر نفس الطول
أما نقطتا التمدد نفس العرض
هل تقصد بان عناصر الهيدر وعناصر الفوتر لهم نفس الطول؟
لا طبعا..
عناصر الهدير لهم طول خاص
وعناصر الهيدر لهم طول خاص ولا يجب عليه أن يكون نفس طول عناصر الهيدر..
بعد ما تنتهي من هذه المرحله.. تأكد بأن الصور داخل مجلد images وهذا المجلد داخل مجلد يكون إسم للستايل مثلاً MNAB33
بالنهايه سوف يكون عندك مجلد يحتوي على إسم ستايلك.. وبداخله مجلد اسمه images الذي يحتوي على صور التقطيع الخاصه بالستايل
توجه بحول الله إلى المرحله الثانيه وهي التركيب في الدرس التالي:
التركـــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــــــــــــــــــــــــــــ ـــــــيب
السلام عليكم
ما هو ستايل المحتوى؟
هو ستايل يكون عبارة عن صندوق يكون بداخله محتوى المنتدى
غير الستايلات الأخرى المنفصله ..
ما هي فكرة تركيب الستايل ؟
نفس فكرة الاطار الخاص بالنافبار والأقسم
ولكن هنا بشكل كامل.. والصورة التالية توضح فكرة التوزيع
وهذا المثال الذي في الأعلى مثل ستايل منابع الأول في درس التصميم
ولإضافة صوره في النص بالهيدر .. مجرد إضافة 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;
}
|
هذه الصورة التي وضعتها
هذا الكود هو كود الهيدر.. ويتم بداخله وضع مسار خلفية الهيدر مع تغيير طول خلفية التمدد
#header_right | |
| /*
الهيدر يمين.. يوضع به رابط الصوره الخاص بالهدير الجزء الأيمن
لا تنسى تغيير العرض والطول للصورة..
*/
#header_right {
background-image:url('MNAB33/images/MNAB33_03.jpg');
height:293px;
width:403px;
float:right;
background-repeat:no-repeat;
}
|
ولقد وضعت هذه الصوره
وهي صورة الهيدر اليمين.. وتم وضع العرض والطول الخاص بها..
#header .header_left | |
| /*
الهيدر يسار.. يوضع به رابط الصوره الخاص بالهدير الجزء الأيسر
لا تنسى تغيير العرض والطول للصورة..
*/
#header .header_left {
background-image:url('MNAB33/images/MNAB33_011.jpg');
height:293px;
width:411px;
float:left;
background-repeat:no-repeat;
}
|
ولقد وضعت هذه الصورة
وهي الصورة الخاصه بالهيدر الجزء الأيسر
يتم بها وضع مسار الصورة .. وتغيير العرض والطول الخاص بها
.content-left | |
| padding-left
هو مقدار الإنزحاح من اليسار
ضع به عرض نقطة التمدد
*/
.content-left {padding-left:34px; background-image:url('MNAB33/images/MNAB33_04.jpg');
background-repeat:repeat; background-position: left;
}
|
ولقد وضعت هذه الصوره
وهي صورة
التمدد الجانبي الأيسر
يتم من خلال الكود تغيير مسار الصوره إلى التي تخصكم
ونضع مقياس عرضها في
padding-left
content-right | |
| /*
التمدد الجانبي يمين.. ويوضع به رابط صورة التمدد الجانبي يمين
في خانة
padding-left
هو مقدار الإنزحاح من اليسار
ضع به عرض نقطة التمدد
*/
.content-right {padding-right:36px; background-image:url('MNAB33/images/MNAB33_06.jpg');
background-repeat: repeat; background-position: right;
}
|
ولقد وضعت به هذه الصوره
وهي صورة خلفية التمدد الجانبي الأيمن
ولا ننسى وضع عرضها في
padding-right
content | |
| /*
المحتوى.. ويوضع به خلفية الستايل في المحتوى الداخلي..أي بمنطقة المتوسطة
*/
.content {width: 100%; margin: 0px auto; background-color:#E3E0E0; background-image:url('MNAB33/images/MNAB33_05.jpg');
background-repeat:repeat;
}
|
ولقد وضعت به هذه الصوره (
قد لا تكون واضحه بهذا الستايل لان خلفيتها نفس خلفية الموضوع .. بتحديد الماوس تقدر تشوف ان فيه صورة )
وهي خامة المحتوى الداخلي للستايل
لا تغير الا مسار الصورة واللون
وإن لم تكون هناك صوره .. احذف الكود الخاص بالصوره
| |
| 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;
}
|
ولقد وضعت به هذه الصوره
وهي صورة خلفية التمدد للفوتر
ولا تنسوا وضع طول صورة التمدد الخاص بكم
#footer_right | |
| /*
الفوتر يمين.. يوضع به رابط الصوره الخاص بالفوتر الجزء الأيمن
لا تنسى تغيير العرض والطول للصورة..
*/
#footer_right {
background-image:url('MNAB33/images/MNAB33_09.jpg');
height:47px;
width:50px;
float:right;
background-repeat:no-repeat;
}
|
ولقد وضعت به هذه الصوره
وهي صورة الفوتر اليمنى
لا تنسوا تغيير العرض والطول للصور الخاصه بكم
#footer .footer_left | |
| /*
الفوتر يسار.. يوضع به رابط الصوره الخاص بالفوتر الجزء الأيسر
لا تنسى تغيير العرض والطول للصورة..
*/
#footer .footer_left {
background-image:url('MNAB33/images/MNAB33_07.jpg');
height:47px;
width:49px;
float:left;
background-repeat:no-repeat;
}
|
ولقد وضعته به هذه الصورة
وهي صورة الفوتر اليسرى
ولا تنسوا تغيروا عرض وطول الصوره الخاصه بكم
وبهكذا انتهينا من شرح تفاصيل خصائص السي اس اس الخاصه بالكود
شكرا لك اخي حماده.. هل بإمكانك أن تعيد مره أخرى وتذكرنا أينا نضع هذه الأكواد؟
نعم بالتاكيد
من
لوحة تحكم المنتدى
توجه إلى ا
لتحكم بالإستايلات
إضغط "
إذهب" بجوار الستايل الخاص بك ليتم فتح اعدادات الستايل كامله
إذهب إلى آخر الصفحة سوف تجد التالي
ومن ثم توجه إلى اعدادات الستايل الخاصه بستايلك..
سوف تجد الهيدر
وأمسح الجزء العلوي من الهيدر من بدايته إلى الملاحظة التالية
| |
<!-- 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[right]" id="header_right_cell">
<if condition="$ad_location['ad_header_logo']">$ad_location[ad_header_logo]<else /> </if>
</td>
</tr>
</table>
<!-- /logo -->
<!-- content table --> <div align="right"><table cellpadding="6" cellspacing="0" border="0" width="620" style="border: 1px dashed #499c00; margin: 10px; width: 620px;">
<tr>
<td style="background: #e7ffd9 url(http://www.rawabetvb.com/vb/images/php.gif) no-repeat top left; height: 29px;">
</td>
</tr>
<tr>
<td>
<div dir="ltr" style="width: 620px; height: 34px; text-align: left; overflow: auto">
<code style="white-space:nowrap">
<!-- php buffer start --><code><span style="color: #000000">
<span style="color: #0000BB"></span><span style="color: #007700"><!-- </span><span style="color: #0000BB">content table </span><span style="color: #007700">-->
</span><span style="color: #0000BB"></span>
</span>
</code><!-- php buffer end -->
</code>
</div>
</div>
</td>
</tr>
</table>
وسوف يكون الكود التالي الذي يجب مسحه:
</div>
|
وضع بعدها الحزء الخاص بالهيدر الخاص بك.. الذي تم تحديده
أما الجزء الآخر فهو جزء الفوتر
يتم تحديد الاكواد من
بداية الكود الذي يوضع في الفوتر ضعها في اخر المربع المحدد فوق.. أو المربع الذي تحته
هناك أكواد موجوده مسبقاً.. هل أمسحها أم ماذا ؟
عادة يتم توليد اكواد عبارة عن ملاحظات من قبل المنتدى..
ولكن تذكر ان هذا المربع هو المربع الخاص في خصائص السي اس اس الإضافة
لذا انصح بتركه كما هو.. لكي لا تفقد اكواد سابقة تم إضافتها
انتهينا من خصائص السي اس اس.. هل لك بشرح كيفية وضع اكواد HTML في الهيدر والفوتر؟
لا تحتاج شرح فهي بسيطه وموجوده مسبقاً ملاحظات تبين أي كود يتم وضعه في الهيدر وأي كود يتم وضعه في الفوتر
أعرف ذلك ولكن أحسست ببعض التأكيد.. هل بإمكانك شرح تفاصيل :بد3:؟
دايم كسولين.. طيب ولا يهمكم
من خلال برنامج
Microsoft Expression Web 2
أو أي برنامج أخر.
حتى لو المفكره
سوف نحدد أكواد الهيدر .. وهي كالتالي
إنسخ الأكواد
من
| |
| <!-- بداية الكود الذي يوضع في الهيدر -->
|
| |
| <!-- نهاية الكود الذي يوضع في الهيدر -->
|
الى نهاية الكود الذي يوضع في الفوتر ويتم وضعه في آخر قالب الفوتر بدون حذف أي شي آخر
ولا ننسى تغيير الـ margin الخاص بالستايل إلى 0 من خلال المربع التالي
لكي يتم مسح أي جزء زائد من الاطراف
وسوف تلاحظون بأن الستايل تم تركيبه وبحالة جيده وبجميع المتصفحات :ص6:
شكرا لك اخي حماده.. ماذا عن الروابط؟؟
سوف يتم وضعها في موضوع منفصل لكي تعم الفائده
فكرتها بسيطه وسيتم شرحها بالفيديو والصوت ..
هل هناك شي آخر تحب إضافته ؟
لا شي يخطر في بالي..
عسى أني قد وفقت في شرح تفاصيل هذا النوع من التركيب ..
وخير ما تقدمونه في المقابل هو دعوه لي في ظهر الغيب
شكرا لكم
ادعو للغالي حماده الخالدي على شرحه المميزز ولا تنسو كلمه ماشاء الله
مودتي
[/RIGHT]
26-06-2011, 12:40 AM
طريقة تصميم وتقطيع الستايلات رباعية الأطراف css 
العرض العادي
