منتدى استراحات زايد

منتدى استراحات زايد (http://vb.ma7room.com/index.php)
-   منتدى أخبار المواقع والمنتديات العربية والأجنبية (http://vb.ma7room.com/forumdisplay.php?f=183)
-   -   [ شرح ] الدرس المنتظر(شرح) كيفية تلائم تصميم الصفحات + الستايل في جميع متصفحات الانترنت (http://vb.ma7room.com/showthread.php?t=448939)

محروم.كوم 07-07-2010 03:30 AM

[ شرح ] الدرس المنتظر(شرح) كيفية تلائم تصميم الصفحات + الستايل في جميع متصفحات الانترنت
 

( شرح+حصري )
توزيع الهيدر و الفوتير وكافة الصور التجمليه وتلافى كافة الأخطاء لأى متصفح
+++============+++

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

لكي لا يظهروها للبعض ويتميزوا بها ..
أو تتم بطريق المصادفة من المصمم بدون علمه بانها الطريقه الصحيحه


الشكر موجه لكلاً من قدم لي المساعده في إخراج هذا الدرس بالشكل الذي ترونه وحتى يستفيد منه الجميع
  • أخى الحبيب عفوا ,,, تم حجب الروابط و المرفقات عن الزوار و الأعضاء غير المتفاعلين [ للتسجيل اضغط هنا ]
  • أخى الحبيب عفوا ,,, تم حجب الروابط و المرفقات عن الزوار و الأعضاء غير المتفاعلين [ للتسجيل اضغط هنا ]
  • أخى الحبيبعفوا ,,, تم حجب الروابط و المرفقات عن الزوار و الأعضاء غير المتفاعلين [ للتسجيل اضغط هنا ]
  • أخى الحبيبعفوا ,,, تم حجب الروابط و المرفقات عن الزوار و الأعضاء غير المتفاعلين [ للتسجيل اضغط هنا ]


  • قال تعالى : (وتعاونوا على البر والتقوى ولا تعاونوا على الإثم والعدوان)
  • (المائدة أية 2) صدق الله العظيم
  • وقول الرسول عليه أفضل الصلاة و السلام ((من كتم علماً.. الجمه الله يوم القيامة بلجامِ من نار ))

+++============+++

نبدأ بإذن الله

توزيع الهيدر و الفوتير وكافة الصور التجمليه وتلافى كافة الأخطاء لأى متصفح

+++============+++

شرح كيفية تلائم الستايل في جميع متصفحات الانترنت

يوجد طريقتان لتلافى خطأ التوزيع عبر المتصفح
الطريقة الأولى التحديد بحجم الخليه ولأنها تحتاج بال طويل وشرح قوى وتركيز
أتيت لكم بالشرح الأسهل لكى يتم التعرف عليه بكل سهولة من جميع الفئات
-------
قبل بدا الشرح عليك بتحميل إحدى المتصفحات الأتية
عفوا ,,, تم حجب الروابط و المرفقات عن الزوار و الأعضاء غير المتفاعلين [ للتسجيل اضغط هنا ]
أو

عفوا ,,, تم حجب الروابط و المرفقات عن الزوار و الأعضاء غير المتفاعلين [ للتسجيل اضغط هنا ]

بعد تحميل إحدى المتصفحات هذه
عليك الان تتصفح هذا الإستايل
عفوا ,,, تم حجب الروابط و المرفقات عن الزوار و الأعضاء غير المتفاعلين [ للتسجيل اضغط هنا ]
بفضل الله لن يحدث اى خلل معك والصورة ثابتة مكانها كما ينبغى

الان نتوجه ونتصفح هذا الإستايل
عفوا ,,, تم حجب الروابط و المرفقات عن الزوار و الأعضاء غير المتفاعلين [ للتسجيل اضغط هنا ]
سوف تعلم ما الفرق
ولمن لم يرد العناء فى التحميل للمتصفحات وأكتفى بما عنده
فلك الفرق
أضغط على الصورة المصغرة لكى ترى الفرق

الصورة الأولى للتصميم بدون أخطاء على اى متصفح
عفوا ,,, تم حجب الروابط و المرفقات عن الزوار و الأعضاء غير المتفاعلين [ للتسجيل اضغط هنا ]
الصورة الثانية وطبعاً التوزيع لى وكان قبل تعلمى اماكن الأخطاء
عفوا ,,, تم حجب الروابط و المرفقات عن الزوار و الأعضاء غير المتفاعلين [ للتسجيل اضغط هنا ]

الأن نجهز العدة ونأتى بترمس شاى
نلاحظ كثيراً في معظم الإستايلات أنها تتشوه شكليا عندما نقوم بتغيير المتصفح من الأكسبلورر Internet Explorer الى متصفح أخر مثل fireFox أو Opera

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

حل هذه المشكله هو عدم أستخدام هذه الأزرار نهائيا و تحريك الصور يدويا عن طريق الأكواد
http://www.losha.net/shro7/tsmim/1.jpg

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

بعد إنشاء الخلايا الخاصه بالتصميم .. نضع الصوره وفي الشرح وضعنا العمود الأيسر بدون الضغط على المحاذاه لليمين
http://www.losha.net/shro7/tsmim/2.jpg

الان نقوم بالضغط مره واحده على الصوره حتى نقوم بمعرفة أمتدادها
ننتقل الى صفحة الأكوادا بتحديد إنقسام
http://www.losha.net/shro7/tsmim/3.jpg

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



كود PHP:





فيكون هكذا

http://www.losha.net/shro7/tsmim/4.jpg

ثم نضع هذا الكود في أخر إمتداد الصوره


كود PHP:





فيكون هكذا
http://www.losha.net/shro7/tsmim/5.jpg

بكل بساطه رابط الصوره الفعلي هكذا



كود PHP:





قمنا بتعديله الى
رمز PHP:



فكان الناتج هو انتقال الصوره الى الجزء الايمن وهو المطلوب

http://www.losha.net/shro7/tsmim/6.jpg

نكرر هذه العلميه على كل الأجزاء المراد تحريكها في الخلايا

وهذه هي اكواد المحاذاه للجوانب والتوسيط

فتم التوسيط بهذا الكود بالإضافه قبل وبعد

قبل كود الصورة
فى التوسيط



كود PHP:



بعد كود الصورة


كود PHP:





بكده تحكمنا فى طريقة العرض

يعنى الصورة التى تحتاج يسار نغير




كود PHP:





نهاية كود الصورة


كود PHP:





يمين



كود PHP:





نهاية كود الصورة


كود PHP:





وطبعا فى جميع الصور الهيدر والفوتير

والصور التجميلية التى تختص فقط بالتقطير وليس الصور العلويه والسفلية


وبكده يكون الإستايل والحمدلله فى الصدارة بلا كلام
وصل اللهم وسلم على سيدنا محمد وعلى اله وصحبه وسلم

في النهاية
وأى سؤال بإذن الله أخوكم حاضر يله بالتوفيق والخير نلتقى
http://00op.com/up/uploads06-08-17/6008c7257f.gif
فالسماح على الخطأ والنسيان
فإن كان بيه خطأ فإنه منى وأنسانى إياه الشيطان الرجيم
وإن أصبت http://www.traidnt.net/vb/images/smilies/clap.gif فلله الحمد والمنة أن وفقت في ذلك

وفي ختام هذا الشرح أدعوا الله لي ولكم ولوالدينا ولمن أحببناه في الدنيا
بالهداية والصلاح في الدنيا وأن يجمعنا جميعاً في الفردوس الأعلى ....

سبحانك اللهم وبحمدك , أشهد أن لا اله إلا أنت أستغفرك وأتوب إليك
أخوكم فى الله

Ali Losha


لتحميل الدرس لمن لم تظهر عندة الصور

http://www.losha.net/shro7/tsmim/gobutton.gif عفوا ,,, تم حجب الروابط و المرفقات عن الزوار و الأعضاء غير المتفاعلين [ للتسجيل اضغط هنا ]

لمن أردا نقل الدرس بالكامل

http://www.losha.net/shro7/tsmim/gobutton.gif عفوا ,,, تم حجب الروابط و المرفقات عن الزوار و الأعضاء غير المتفاعلين [ للتسجيل اضغط هنا ]

اقتباس:
هناك من يمر بموضوعك ويكون في أشد الحاجة إليه ويمنعه ضيق
الوقت
من الرد عليه ويكتفي بالدعاء لك في ظاهر الغيب

( فأجعل هذا هو هدفك الذي تطمح أليه )

ملحوظه
أختلفت الطرق إلى الوصول للحل الصحيح
ولاكن هذا أسهلهم



الساعة الآن 01:43 AM

Powered by vBulletin® Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Content Relevant URLs by vBSEO 3.5.2 TranZ By Almuhajir


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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227