الدرس السابع من دوره تصميم الاستايل بتقنيه (css)

قناص جوبا · 12-16-2009

السلام عليكم ورحمه الله
النهارده ان شاء الله الدرس السابع والدرس القادم هو الاخير من دوره تصميم الاستايلات بتقنيه ال css
وهيكون الاخير فى تاطير القوالب

دلوقتى باقى تاطير ثلث قوالب
الاول
navbar

نخش القالب ونبحث عن

كود:

<!-- breadcrumb, login, pm info -->

ونضع التاطير العلوى فوقها

وبعدين نبحث عن

كود PHP:


			
<!-- / nav buttons bar -->

ونضع الايطار السفلى تحته

وفى نفس القالب نبحث عن

كود:

<input type="hidden" name="url" value="$return_link" />

ونضع الايطار العلوى تحتها

وبعدين نبحث عن

كود:

        <td class="alt1">
            $notices
        </td>
    </tr>
    </table>

وبعدين تضع تحته الايطار السفلى

محلوظه بس ممكن مش تلاقى اللى انا بتكلم عنه بسبب وجود مسافه زياده او اقل فقط لا اكتر
طيب نبحث عنها ازاى
مثلا نبحث عن $notices
وبعدين هتلاقى تحتها
</td>
وبعدين تحتها
</tr>
وبعدين تحتها
</table>
وهكذا بنفس الطريقه
وبعدين نعمل حفظ
والشكل النهائى

الثانى
postbit_legacy

نبحث عن

كود PHP:


			
$template_hook[postbit_start]

هنلاقى منها اتنين فى القالب واحده فى الاول وواحده فى المنتصف تقريبا الاتنين يطبق عليهم نفس النظام
ونضع تحتهم الايطار العلوى

وبعدين نبحث عن

كود PHP:


			
$template_hook[postbit_end]

برضه هنلاقى منهم اتنين واحده فى النص وواحده قبل الاخير تقريبا يطبق عليهم التالى
نضع فوقهم الايطار السفلى

حتى يصبح الشكل النهائى

الثالث
SHOWTHREAD

نبحث عن

كود PHP:


			
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center" style="border-bottom-width:0px">

ونضع الايطار العلوى فوقه

وبعدين نبحث عن

كود PHP:


			
<if condition="$show['inlinemod'] AND $show['popups']">

ونضع الايطار السفلى فوقه

وبعدين نبحث عن

كود PHP:


			
    <form action="newreply.php?do=postreply&amp;t=$threadid" method="post" name="vbform" onsubmit="return qr_prepare_submit(this, $vboptions[postminchars]);" id="qrform">

ونضع تحته الايطار العلوى

ونبحث عن

كود PHP:


			
<if condition="!is_browser('ie') AND $show['wysiwyg']">

وهنلاقى فوقها

كود PHP:


			
</form>

نضع فوقهم الايطار السفلى

بعدين نبحث عن

كود PHP:


			
<!-- currently active users -->

نضع تحته الايطار العلوى

وبعدين نبحث عن

كود PHP:


			
<!-- end currently active users -->

ونضع فوقها الايطار السفلى

ونعمل حفظ للقالب ويصبح الشكل النهائى

الى هنا انتهى السابع
منتديات فى بى ايجى
http://vbegy.info/vb
الموضوع الاصلى من هنا

rina · 12-17-2009

جزاك الله كل الخير على هذه الدروس المفيده
عندى سؤال من فضلك

اذا الهدر عندى مكون من 5 صور - صورتين فى كل جانب و صوره متمدده فى المنتصف
كيف اقوم بكتابه الاكواد للصور
تطبيقا لشرحك قدرت اعمل اكواد الثلاث صور التمدد و صوره على كل جانب
لكن الصورتين الباقيتين كيف تكتب اكوادهم ؟

قناص جوبا · 12-17-2009

كويس وشئ جميل
بس فى الاول ليا استفسار ليه صورتين فى جنب واحد مع فى الامكان انها تكون صوره واحده
مش مشكله تكون كبيره
عمتا عملت شرح بسيط كده
فى المرفقات الصور المبطق عليها مع الكود
وده الناتج النهائى

والكود

كود PHP:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 2</title>
<style type="text/css">
.h1{
    background-image:url('test_03.gif');
    height:200px;
    background-repeat:repeat-x;
}
.h2{
    background-image:url('test_01.gif');
    background-repeat:no-repeat;
    height:200px;
    width:123px;
    float:left;
}
.h3{
    background-image:url('test_02.gif');
    background-repeat:no-repeat;
    height:200px;
    width:260px;
    float:left;
}
.h4{
    background-image:url('test_05.gif');
    background-repeat:no-repeat;
    height:200px;
    width:123px;
    float:right;
}

.h5{
    background-image:url('test_04.gif');
    background-repeat:no-repeat;
    height:200px;
    width:260px;
    float:right;
}
</style>
</head>

<body>
<div class="h1">
<div class="h2"></div>
<div class="h3"></div>
<div class="h4"></div>
<div class="h5"></div></div>
</body>

</html>

والشكل النهائى للتصميم

rina · 12-17-2009

مرسى كتيييييييييييييييييييييييييييييييييييييييييييييييي ييييييييير لاهتمامك
و سعيده بانضمامى لهذا المنتدى الرائع

هبهوبة · 12-17-2009

شرح راااائع ووافي بارك الله فيك

ساره روز · 12-18-2009

هاااااااااااااااااااي
جيتكم وتطبيق معاي بعد
أول شي أحب أقول

درس رائع وشرح أروع

وشخص متفاهم خدوم

ربي يوفقك ويكون فى عونك دوم

معليش الأيطار كبير ويلوع بالجبد بس حق التعليم لحد يضحك عليه

الحين شوف التطبيق

Navbar

SHOWTHREAD

وهذا مادري شنو ما عرف أسمه

تحت إضافة رد لاصق مع

postbit_legacy

وهذا

postbit_legacy

بالعرض

وهذا باطول

بس خانة التوقيع طالع عندي بطول وبالعرض

مرتين

صح جذيه ولا لا اعتقد خطاء

عندك فى الدرس موش ظاهر التوقيع فى العرض طالع فى الطول

واين الخطاء

طيب أنا الحين باحط الملفات فى المرفقات حق تشوف إذا في خطاء في ترتيب الأكواد وخاصه فى

postbit_legacy
دائماً أتعبك معاي أخوي قناص جوبا
بس أستحمل
وجمعة مباركة
ساره روز
قودبااااااااااي

قناص جوبا · 12-18-2009

المشاركة الأصلية كتبت بواسطة rina

مرسى كتيييييييييييييييييييييييييييييييييييييييييييييييي ييييييييير لاهتمامك
و سعيده بانضمامى لهذا المنتدى الرائع

احنا اللى اسعد بالانضمام ده
منوره ،،

المشاركة الأصلية كتبت بواسطة هبهوبة

شرح راااائع ووافي بارك الله فيك

واياكى
ديما منوره بوجودك ،،

المشاركة الأصلية كتبت بواسطة ساره روز

هاااااااااااااااااااي
جيتكم وتطبيق معاي بعد
أول شي أحب أقول

درس رائع وشرح أروع

وشخص متفاهم خدوم

ربي يوفقك ويكون فى عونك دوم

دائماً أتعبك معاي أخوي قناص جوبا
بس أستحمل
وجمعة مباركة
ساره روز
قودبااااااااااي

لا لا تطبيق تمام جدا
وانا سعيد بالتطبيقات اللى قدامى من الجميع
التوقيع مش ظاهر عندى علشان انا مستحته بالفوتوشوب بس مش اكتر
بس بجد تطبيقات كويسيه جدا
ومفيش تعب ولا حاجه

rina · 12-19-2009

اخى اذا ممكن تزود لنا درس عن قالب postbit_legacy
يعنى كيف يكون بالطول و كيف يكون بالعرض
كيف نقدر نحط اطار حول توقيع العضو
او اضافه صور جماليه او الوان لمعلومات العضو
انا كنت اعرف اعمل ده على الفرونت بيج
فاذا فى وسيله اننا نعملها css ياريت يكون فى درس لها
وسورى كتير لانه تعبينك معنا
بس فعلا دوره رائعه افضل دوره تابعتها

ساره روز · 12-19-2009

هااااااااااااااي
أسفه أخوي قناص جوبا
أنا محيت الأقتراح لأنه مكانه غير صحيح
كان لازم أحطه فى قسم الأقتراحات
الموضوع أني تحمست
عن جد أسفه
ساره روز

قناص جوبا · 12-23-2009

اسف على التاخير فى الرد
بس للاسف انا مش عندى المام بكل قوالب البوست لان القالب الوحيد اللى استخدمته هو اللى انا حاطه فى الشرح

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق
انواع عرض الموضوع
العرض العادي الانتقال إلى العرض المتطور الانتقال إلى العرض الشجري

LinkBacks (?) LinkBack to this Thread: http://vbegy.info/vb/t801.html
أرسلت بواسطة	For	Type	التاريخ
Untitled document	This thread	Refback	12-10-2010 04:51 PM
Untitled document	This thread	Refback	12-05-2010 03:07 AM
ط§طھط¨ط¹طھ ط´ط±ظˆطط§طھظƒظ… ظپظٹ طھط£ط·ظٹط± ط§ظ„ظ†ط§ظپط¨ط§ط± navbar ط¨ط³ ظƒظٹظپ ط§ط®ظ„ظٹظ‡ ط¹ظ„ظ‰ طھط£ط·ظٹط± ط±ط¨ط§ط¹ظٹ - طھظ‚ظ†ظٹظˆظ†	This thread	Refback	04-27-2010 09:42 AM
Untitled document	This thread	Refback	03-12-2010 11:01 AM
Untitled document	This thread	Refback	03-10-2010 08:33 PM
Untitled document	This thread	Refback	02-01-2010 10:31 AM
Untitled document	This thread	Refback	01-02-2010 12:09 PM
Untitled document	This thread	Refback	12-20-2009 10:47 PM
ط§ظ„ط¯ط±ط³ ط§ظ„ط³ط§ط¨ط¹ ظ…ظ† ط¯ظˆط±ظ‡ طھطµظ…ظٹظ… ط§ظ„ط§ط³طھط§ظٹظ„ ط¨طھظ‚ظ†ظٹظ‡ (css)	This thread	Trackback	12-16-2009 09:12 PM
Untitled document	This thread	Trackback	12-16-2009 09:07 PM
Untitled document	This thread	Trackback	12-16-2009 09:04 PM

فى بى ايجى التطويرية
موقع تكويد	مركز رفع صور وملفات	مدونه فى بى ايجى	منتدى المشاكل	منتدى مجانى
معرض استايلات	دليل مواقع \| اضف موقعك	استضافه مجانيه	اعمال فى بى ايجى	دوره اداره الموقع
دوره تصميم الاستايلات	تبادل اعلانى	تبادل اعلانى	تبادل اعلانى	تبادل اعلانى

رسالة مدير الموقع

دورة تصميم قالب ورد بريس بلوحة تحكم

دورة برمجه اضافه اتصل بنا للورد بريس

الدرس السابع من دوره تصميم الاستايل بتقنيه (css)

دورة تصميم استايلات vbulletin بال css

روابط vbegy

دورات vbegy

مواقع تابعه لـ vbegy

اتصل بنا

خدمات موقع تكويد