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

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

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

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


الملاحظات

دورة تصميم استايلات vbulletin بال css دورة خاصة للمبتدأين لتعليم تصميم استايلات بتقنية ال css [شاملة]


LinkBack (6) أدوات الموضوع انواع عرض الموضوع
غير مقروء 12-23-2009   6 links from elsewhere to this Post. Click to view. #1 (permalink)
VB EGY
 
الصورة الرمزية قناص جوبا

 رقم العضوية : 1
 تاريخ التسجيل : Jun 2009
 العمر : 27
 الدولة : ام الدنيا
 المشاركات : 4,439
إرسال رسالة عبر MSN إلى قناص جوبا
افتراضي الدرس الثامن نصائح لجعل موقعك متوافق مع المعاير القياسية



السلام عليكم
اسف على التاخير فى الموضوع بسبب الجهاز كل شويه نسخه ويندوز
المهم
الدرس ده هيكون الاخير من الدوره ان شاء الله
واى درس انتو تتطلبوه فقط فى قسم الشكاوى وسوف يتم الرد عليه وشرح الدرس ان شاء الله
كثير مننا يسمع المعاير القياسية وهناك ما يعلم ما هى وهناك ايضا لا يعلمها
اولا نبدأ بالموقع اللى بنعمل عليه بحث
فيه موقعيهم لازم يكونو فى المفضله للمصمم وديما يطابق تصميم بالمعاير بتاعتها
الموقع الاول
http://validator.w3.org/
وهو للبحث والمطابقه للمعاير من حيث ال xhtml
والموقع الثانى
http://jigsaw.w3.org/css-validator/
وهو المطابقه لل css
دلوقتى هنعمل اى بحث عن اى استايل من استايلاتى

وليكن الاستايل
http://vbegy.info/vb/?styleid=16

وبعدين هنعمل مطباقه للمعاير
الاول xhtml الثانى css
مش هنلاقى ولا خطأ الحمدلله

دلوقتى بالشرح اللى انا شرحته فى الدروس السابقه اللى هيتبعه هيلاقى نفس النتيجه على استايله
بس فى ناس هتلاقى اخطأء عندهم
الاول هنصلح شئ بسيط كان خطأ فى الشرح يسبب عدم توافق فى المعاير القياسية الجديد
بعد صدور css3 اصبحت غير متوافقه
وهى فى الاعمده للايطارات مناطق التمدد لها
كود PHP:
.f_g_2{
background:url('sweet_style/images/style_f_06.gif'repeat-y left;
height:100%;
}
.
f_g_3{
background:url('sweet_style/images/style_f_09.gif'repeat-y right;
height:100%;
padding-left:36px;padding-right:37px;

ده الشكل اللى احنا كنا بنشرح بيه
الاختلاف هيكون بشكل بسيط جدا ان شاء الله

كود PHP:
.f_g_2{
background-imageurl("sweet_style/images/style_f_06.gif");
background-repeatrepeat-y;
background-positionleft;
padding-left:36px;
}
.
f_g_3{
background-imageurl("sweet_style/images/style_f_09.gif");
background-repeatrepeat-y;
background-positionright;
padding-right:37px;

طبعا ركز فى المكتوب ومش هتلاقى اى صعوبه فى التعديل على تصميمك السابق

دلوقتى بعد لما تعمل مطابقه للمعاير القياسية هنلاقى عندنا اخطاء
عدده اسباب
ممكن تكون عامل حاجه غلط مش مظبوطه فى الشرح
ممكن يكون من هاك
علشان ننتاكد اذا كانت من الهاكات ولا لا نعطل الهاكات ونشوف لو فيه مشكله لسه يبقى مش من الهاكات
لو مفيش مشكله يبقى المشلكه من الهاكات نعطل هاك هاك ونعمل بحث حتى نصل الى الهاك ونستبدله بهاك نظيف من الشركه الام (طبعا مش شرط كل هاكات الشركه الام مطابقه للمعاير القياسية )
ممكن يكون السبب من بعض الجماليات اللى احنا بنعملها فى المنتدى
مثل تلوين وصف القسم
مثل وضع الملاحظات وكله بيعملها بالفرونت بيج
وقيس على كده الكثير من الحاجات اللى احنا بنعملها فى المنتدى
طيب الحل ايه كده احنا مش هنعمل الجماليات دى
لا طبعا فيه حل وكمان هنعملها بال css
طيب الاول نيجى للوصف
هنعدل مع بعض على وصف قسم اخبار فى بى ايجى
الوصف فى المنتدى هنا عادى جدا
هنا اخر الاخبار من منتديات فى بى ايجى التطويرية
بدول اى الوان او غيره
احنا مثلا عاوزين نعمله احمر
هنخش فى الوصف ونكتب الوصف على الشكل
كود PHP:
<class="Ahmed">هنا اخر الاخبار من منتديات فى بى ايجى التطويرية</p
وبعدين نروح فى اعدادات ال css الرئيسية وننزل تحط خالص فى تعاريف CSS الإضافية/Additional CSS Definitions
ونحط
كود PHP:
.Ahmed {
    
color#F00;

وهكذا اى حاجه عاوزين نضيفيها يعنى عاوزين نعمل النص سميك
كود PHP:
.Ahmed {
    
color#F00;
    
font-weightbold;

وهكذا
طيب دلوقتى عاوزين نحط نص وعليه رابط فى الملاحظات برضه بال css
كود PHP:
<class="yhoooo
"
><strong><a href="http://vbegy.info/vb/f45.html"تابعو 
معنا دوره تصميم الاستايلات بتقنيه 
(css) </a></strong></p
وفى ال css الرئيسية
كود PHP:
.yhoooo
 
{
    
text-aligncenter;
    
font-sizelarge;
    
font-familyArialHelveticasans-serif;

وكله بنفس النظام كده
طيب عاوزين نحط صوره فى الملاحظات ونوسطها
كود PHP:
<div style="background-image:url(http://vbegy.info/vb/Ahmed_vbegy/Banner3.gif);
background-repeat:no-repeat;
height:60px;
width:468px;
margin:0px auto;"
></div
طيب احنا هنا اختصرنا بدل ما نحط اعدادت الديف فى اعدادات ال css
عملنها مع الديف نفسه

طيب عاوزين نحط على الصور رابط
كود PHP:
<div style="background-image:url(http://vbegy.info/vb/Ahmed_vbegy/Banner3.gif); background-repeat:no-repeat; height:60px; width:468px; margin:0px auto; position:relative;"><class="Ahmed" href="http://vbegy.info/vbtitle="فى بى ايجى"></a></div
بس هنا هنحط فى ال css الرئيسيى
كود PHP:
a.Ahmed{
    
height:60px;
    
width:468px;
    
position:absolute;
    
border:none;

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

-------------------------------------------
(تعديل)
كنت طرحت فى الدرس السادس من الدوره كفيه تركيب فلاش بتقنيه ال css
والطريقه كانت تمام على كل المتصفحات ماعدا الاكسبلور للاسف
هنا تعديل لجعها تتوافق مع الكل
كنا وصلنا ان شكل الكلاس النهائى
كود PHP:
<div class="h1">
<
object class="h2" data="3eed_Alkber/images/Movie1.swf" style="width: 263px; height: 198px;">
<
param name="wmode" value="transparent" />
</
object>
<
object class="h3" data="3eed_Alkber/images/Movie14.swf" style="width: 313px; height: 198px;">
<
param name="wmode" value="transparent" />
</
object>
</
div
وشكل الاكواد النهائى
كود PHP:
.h1{
    
background-image:url('3eed_Alkber/images/3eed1_02.gif');
    
height:225px;
    
background-repeat:repeat-x;
}
.
h2 {
    
background-imageurl('3eed_Alkber/images/3eed1_03.gif');
    
height225px;
    
width263px;
    
background-repeatno-repeat;
    
floatright;
}
.
h3 {
    
background-imageurl('3eed_Alkber/images/3eed1_01.gif');
    
height225px;
    
width313px;
    
background-repeatno-repeat;
    
float:left;

التعديل هنا هيكون على جزء الكلاس
هنزود الجزء ده
كود PHP:
<param name="movie" value="3eed_Alkber/images/Movie1.swf" />
<
param name="quality" value="High" /> 
بحيث يصبح الشكل دلوقتى للكلاس
كود PHP:
<div class="h1">
<
object class="h2" data="3eed_Alkber/images/Movie1.swf" style="width: 263px; height: 198px;">
<
param name="wmode" value="transparent" />
<
param name="movie" value="3eed_Alkber/images/Movie1.swf" />
<
param name="quality" value="High" />
</
object>
<
object class="h3" data="3eed_Alkber/images/Movie14.swf" style="width: 313px; height: 198px;">
<
param name="wmode" value="transparent" />
<
param name="movie" value="3eed_Alkber/images/Movie14.swf" />
<
param name="quality" value="High" />
</
object>
</
div
وبعدين هنضيف الجزء ده علشان يسرع الجوده للفلاش وسرعه التحميل
كود PHP:
 type="application/x-shockwave-flash" 
بحيث كده انتهينا ويصبح الشكل النهائى
كود PHP:
<div class="h1">
<
object class="h2" data="3eed_Alkber/images/Movie1.swf" style="width: 263px; height: 198px;" type="application/x-shockwave-flash">
<
param name="wmode" value="transparent" />
<
param name="movie" value="3eed_Alkber/images/Movie1.swf" />
<
param name="quality" value="High" />
</
object>
<
object class="h3" data="3eed_Alkber/images/Movie14.swf" style="width: 313px; height: 198px;" type="application/x-shockwave-flash">
<
param name="wmode" value="transparent" />
<
param name="movie" value="3eed_Alkber/images/Movie14.swf" />
<
param name="quality" value="High" />
</
object>
</
div
ودلوقتى المثال للتاكد من الشرح على الاستايل العيد من هنا
http://vbegy.info/vb/?styleid=14

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












قناص جوبا غير متواجد حالياً   رد مع اقتباس
غير مقروء 12-23-2009   #2 (permalink)
مؤسسه المنتدى
 
الصورة الرمزية هبهوبة

 رقم العضوية : 61
 تاريخ التسجيل : Jul 2009
 العمر : 27
 الدولة :
 المشاركات : 700
افتراضي

بصراحة شرح رااااائع ونصائح من اروع ما يكون

بارك الله فيك و 1000 شكر على المجهود


















التوقيع


اتمنى ان اكون قد تركت بصمة بسيطة في المنتدى وان لم اترك فهذا خطئي يذكركم بي
:: مع تمنياتي بالتوفيق للجميع ان شاء الله ::
هبهوبة غير متواجد حالياً   رد مع اقتباس
غير مقروء 12-24-2009   #3 (permalink)
VB EGY
 
الصورة الرمزية قناص جوبا

 رقم العضوية : 1
 تاريخ التسجيل : Jun 2009
 العمر : 27
 الدولة : ام الدنيا
 المشاركات : 4,439
إرسال رسالة عبر MSN إلى قناص جوبا
افتراضي

المشاركة الأصلية كتبت بواسطة هبهوبة مشاهدة المشاركة
بصراحة شرح رااااائع ونصائح من اروع ما يكون

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












قناص جوبا غير متواجد حالياً   رد مع اقتباس
غير مقروء 12-24-2009   #4 (permalink)
عضو نشيط

 رقم العضوية : 201
 تاريخ التسجيل : Nov 2009
 الدولة :
 المشاركات : 68
افتراضي

بصراحة ابداع منقطع النظير












p.t.2 غير متواجد حالياً   رد مع اقتباس
غير مقروء 12-25-2009   #5 (permalink)
VB EGY
 
الصورة الرمزية قناص جوبا

 رقم العضوية : 1
 تاريخ التسجيل : Jun 2009
 العمر : 27
 الدولة : ام الدنيا
 المشاركات : 4,439
إرسال رسالة عبر MSN إلى قناص جوبا
افتراضي

المشاركة الأصلية كتبت بواسطة p.t.2 مشاهدة المشاركة
بصراحة ابداع منقطع النظير
الله يخليك يا غالى
منور الموضوع والمنتدى كله












قناص جوبا غير متواجد حالياً   رد مع اقتباس
غير مقروء 12-25-2009   #6 (permalink)
VB EGY
 
الصورة الرمزية قناص جوبا

 رقم العضوية : 1
 تاريخ التسجيل : Jun 2009
 العمر : 27
 الدولة : ام الدنيا
 المشاركات : 4,439
إرسال رسالة عبر MSN إلى قناص جوبا
افتراضي

تم اضافه تعديل لتوافق الفلاش مع الاكسبلور












قناص جوبا غير متواجد حالياً   رد مع اقتباس
غير مقروء 12-25-2009   #7 (permalink)
عضو جديد

 رقم العضوية : 271
 تاريخ التسجيل : Nov 2009
 الدولة : دار زايد
 المشاركات : 27
افتراضي

مشكور أخوي قناص جوبا
على هذه النصائح
ما قصرت
ساره روز












ساره روز غير متواجد حالياً   رد مع اقتباس
غير مقروء 12-26-2009   #8 (permalink)
VB EGY
 
الصورة الرمزية قناص جوبا

 رقم العضوية : 1
 تاريخ التسجيل : Jun 2009
 العمر : 27
 الدولة : ام الدنيا
 المشاركات : 4,439
إرسال رسالة عبر MSN إلى قناص جوبا
افتراضي

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

العفو منوره المنتدى ديما ،،












قناص جوبا غير متواجد حالياً   رد مع اقتباس
غير مقروء 01-03-2010   #9 (permalink)
عضو جديد

 رقم العضوية : 327
 تاريخ التسجيل : Dec 2009
 الدولة :
 المشاركات : 5
افتراضي

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

وبعدين نخش على قالب
forumhome_forumbit_level1_nopost
وبعدين فى اول القالب هنلاقى
كود PHP:
<br />

نضع تحتها الايطار العلوى
وبعدين فى اخر القالب هنلاقى
كود PHP:
<!--bdayh-->

نضع فوقها الايطار السفلى
وجدت اختلاف كامل في هذا الكود ولم اجد هذه الأكواد <br /> ولا <!--bdayh-->
وكذالك لم أجد هذه الاكواد في نسخه المنتدي التي قمت بتثبيتها علي السيرفر المحلي
القالب
الثانى
postbit_legacy

نبحث عن
كود PHP:
$template_hook[postbit_start]

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

وبعدين نبحث عن
كود PHP:
$template_hook[postbit_end]

برضه هنلاقى منهم اتنين واحده فى النص وواحده قبل الاخير تقريبا يطبق عليهم التالى
نضع فوقهم الايطار السفلى
لم أجد هذا الكود في القالب الثاني إلا مرة واحده في القالب ولم يكن مكررا مرتين كما ذكرت
في قوالب المنتدي ومرفق مع المداخله صورة من كود هذا القالب عندي في المنتدي حيث انني قومت بتثبيت نسخه المنتدي علي سيرفر محلي علي الجهاز وهذا هو إسم النسخه التي قمت بتثبيتها علي الجهاز vBulletin.v3.8.4.Patch.Level.2
مع العلم بأنني حاولت تطبيق الدرس علي أكثر من نسخه ولكنها لم تنجح معي كنت بسبب اختلاف الاكواد في القوالب ولكن الهيدر والفوتر للمنتدي كان في كل مرة يتم تركيبه وظهوره بدون اي مشاكل المشكلة فقد كانت في تأطير القوالب
بسبب أختلاف أكواد البعض منها مثل كود القالب forumhome_forumbit_level1_nopost
وقتها كنت مثبت السيرفر المحلي WampServer2.0a إلا أنني بعد هذا كله قومت الان بتثبيت برنامج السيرفر المحلي appserv-win32-2.5.10_2 والحمد لله يعمل المنتدي علي السيرفر المحلي بدون أي مشاكل
المهم قمت بمحاولات كثيره إلا أن توصلت إلي عمل متواضع بناء علي ما استوعبته وفهمته من الدروس في إتمام الاستايل من ناحيه التصميم وتركيب اكواد لغة ال css وكذالك تثبيت نسخه المنتدي علي سيرفر محلي إلخ...
رجائي وطلبي المتواضع ان تراجع علي التصميم وتراه وأن تعطيني تقديرك في هذا التصميم من كل النواحي
خصوصا ما لم اتقنه جيدا وهو تركيب الفريمات علي أجزاء المنتدي من الداخل أو بعض أجزاءه
ولكم جزيل الشكر
تحميل الاستايل من هنا












Albasher غير متواجد حالياً   رد مع اقتباس
غير مقروء 01-03-2010   #10 (permalink)
VB EGY
 
الصورة الرمزية قناص جوبا

 رقم العضوية : 1
 تاريخ التسجيل : Jun 2009
 العمر : 27
 الدولة : ام الدنيا
 المشاركات : 4,439
إرسال رسالة عبر MSN إلى قناص جوبا
افتراضي

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












قناص جوبا غير متواجد حالياً   رد مع اقتباس

مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)
متوافق, لجعل, مع, موقعك, المعاير, الثامن, الدرس, القياسية, نصائح

أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة


LinkBacks (?)
LinkBack to this Thread: http://vbegy.info/vb/t823.html
أرسلت بواسطة For Type التاريخ
ط§ظ„ط¯ط±ط³ ط§ظ„ط«ط§ظ…ظ† ظ†طµط§ط¦ط­ ظ„ط¬ط¹ظ„ ظ…ظˆظ‚ط¹ظƒ ظ…طھظˆط§ظپظ‚ ظ…ط¹ ط§ظ„ظ…ط¹ط§ظٹط± ط§ظ„ظ‚ظٹط§ط³ظٹط© - طھظ‚ظ†ظٹظˆظ† This thread Refback 06-28-2010 02:43 AM
Untitled document This thread Refback 05-22-2010 05:15 PM
Untitled document This thread Trackback 12-25-2009 02:50 PM
Untitled document This thread Trackback 12-23-2009 05:13 PM
ط§ظ„ط¯ط±ط³ ط§ظ„ط«ط§ظ…ظ† ظ†طµط§ط¦ط­ ظ„ط¬ط¹ظ„ ظ…ظˆظ‚ط¹ظƒ ظ…طھظˆط§ظپظ‚ ظ…ط¹ ط§ظ„ظ…ط¹ط§ظٹط± ط§ظ„ظ‚ظٹط§ط³ظٹط© This thread Trackback 12-23-2009 04:58 PM
Untitled document This thread Trackback 12-23-2009 04:52 PM


فى بى ايجى التطويرية



الساعة الآن 06:28 AM.
Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37