منتدى زمزم
 
الرئيسيةالبوابة*مكتبة الصورس .و .جبحـثالتسجيلدخولأتصل بنا

شاطر | 
 

 الدرس التاسع من دروس HTMLالإطارات (1)

اذهب الى الأسفل 
كاتب الموضوعرسالة
Mohammed shulkamy
مدير المنتدى
مدير المنتدى
avatar

ذكر
عدد الرسائل : 183
العمر : 34
اسم بلدك : مصر الثورة
تاريخ التسجيل : 15/05/2007

مُساهمةموضوع: الدرس التاسع من دروس HTMLالإطارات (1)   الأربعاء يونيو 04, 2008 10:41 am


أهلاً وسهلاً بك إلى الدرس التاسع من دروس HTML. في هذا الدرس والدرسين التاليين سوف نقوم بالتعرف على الإطارات Frames وطريقة عرض صفحات الويب باستخدامها…
فهل تعرف ما هي الإطارات؟ حسنا، سأوضحها لك… هل سبق لك وأن زرت إحدى الصفحات لتشاهد أنها مقسمة إلى عدة أقسام بحيث يظهر في كل منها صفحة مستقلة، وتبدو بصورة منفصلة عن الأقسام الأخرى. وربما تكون قد قمت بالنقر على إحدى الوصلات التشعبية الموجودة في أحد الأقسام لتظهر الصفحة المتعلقة بها في القسم الآخر.
إذا كنت قد شاهدت مثل هذه الصفحات فهذا يعني أن الإطارات مألوفة لديك وإلا قم بالنقر
هنا لتشاهد مثالاً على صفحة ذات إطارات (ولا تنسى العودة لكي تتابع الدرس معا).
كما شاهدت، فإن الصفحة مكونة من ثلاثة أقسام: علوي وأيسر وأيمن… والحقيقة أن كل قسم منها هو عبارة عن ملف Html كامل ومستقل بحد ذاته. وهي مجرد صفحات عادية لا تختلف أبداً عن تلك التي تعلمت إنشاءها في الدروس السابقة، ولا علاقة لكل منها بالصفحات الأخرى من حيث التركيب والتعريف.
أما كيف تم جمعها معا لتظهر بالشكل الذي شاهدته؟ فهنا بيت القصيد. فبالإضافة إلى الصفحات والملفات الإعتيادية يوجد دائماً ملف أساسي يتم إنشاؤه خصيصا لتعريف صفحة الإطارات وتجميعها وتحديد خصائصها. أي أن المعادلة تتلخص بـِ:

مكونات صفحة الإطارات = عدد ملفات الصفحة نفسها + صفحة الملف الأساسي الذي يجمعها.

أي أنني في المثال السابق إحتجت فعلياً إلى أربعة ملفات لتكوين الصفحة.

وقبل أن نبدأ… لنقم بالتحضير للأمثلة التي سترد في هذا الدرس. لذلك قم بإنشاء ثلاثة أو أربعة ملفات بسيطة لكي تستخدمها في تطبيق الأمثلة أو استخدم ملفاتك القديمة التي قمت بالتدرب عليها في الدروس السابقة. أنا قمت بإنشاء ملفات على النمط التالي (وهي التي استخدمتها في المثال) وأسميتها frame1.html, frame2.html, frame3.html


Frame1<‎/TITLE><br /><‎/HEAD><br /><BODY><br />Frame 1<br /><‎/BODY><br /><‎/HTML><br /></font></div><br /><br /><font color="darkorchid">ونبدأ الآن بتعريف الملف الرئيسي الذي سيضم كافة الإطارات والملفات. وهو بالمناسبة ملف ذو حالة خاصة حيث نقوم باستخدام الوسوم </font><div align="center"><font color="darkorchid"><FRAMESET> ... <‎/FRAMESET> </font><br /><font color="darkorchid">بدلاً من الوسوم <BODY> ... <‎/BODY> </font><br /><font color="darkorchid">((إذن الملف الرئيسي للإطارات لا يتضمن تعريفا باستخدام BODY )) </font><br /><font color="darkorchid"><HTML><br /><HEAD><br /><TITLE>Master File<‎/TITLE><br /><‎/HEAD><br /> <br /><FRAMESET><br /><‎/FRAMESET><br /> <br /><‎/HTML><br /></font><br /><font color="darkorchid">نأتي الآن إلى الخصائص: والخاصية الأولى التي تستخدم مع هذه الوسوم هي COLS وهي تعرّف عدد وأحجام الإطارات العمودية للصفحة. وتُحدد الأحجام بطريقتين (هل عرفتهما؟) نعم… إنهما الطريقة المباشرة والطريقة النسبية...أو كلاهما معا. </font><br /><font color="darkorchid">والآن إليك هذه الأمثلة التي توضح مفهوم الأعمدة... وألفت نظرك إلى أن قيامك بالنقر على الشيفرة لكل مثال سيؤدي بك إلى مشاهدة هذا المثال بصورة عملية لكن إنتبه! فهذه الشيفرة غير مكتملة وكتابتها بهذا الشكل فقط لن يؤدي إلى أي نتيجة ولا إلى ظهور أي إطارات حيث ينقصها وسوم أخرى خاصة بمصدر الملفات الظاهرة داخل الإطارات، وقد قمت بإكمالها لغرض توضيح النتيجة لك فقط. لذلك أرجو أن تكتفي الآن بمعاينة كل شيفرة ونتيجتها إلى أن أقوم بسرد باقي الخصائص المهمة لاحقاً. </font></div><br /><br /><table dir=ltr cellPadding=5 width="80%" border=1><tr><td><font color="darkorchid">‎<FRAMESET COLS="50%,50%">‎<br /><‎/FRAMESET><br /></font><a href="http://www.khayma.com/HPINARAbic/examples/master_1.html" class="postlink" target="_blank" rel="nofollow"><font color="darkorchid"> * </font></a> <br /></td><td><div align="right"><font color="darkorchid">يحدد إطارين عموديين حجم كل منهما 50% من حجم الشاشة </font></div></td></tr><tr><td><font color="darkorchid">‎<FRAMESET COLS="20%,50%,30%">‎<br /><‎/FRAMESET><br /></font><a href="http://www.khayma.com/HPINARAbic/examples/master_2.html" class="postlink" target="_blank" rel="nofollow"><font color="darkorchid"> * </font></a> <br /></td><td><div align="right"><font color="darkorchid">يحدد ثلاثة إطارات أحجامها 20% و 50% و 30% على التوالي من حجم الشاشة </font></div></td></tr><tr><td><font color="darkorchid">‎<FRAMESET COLS="200,300,*">‎<br /><‎/FRAMESET><br /></font><a href="http://www.khayma.com/HPINARAbic/examples/master_3.html" class="postlink" target="_blank" rel="nofollow"><font color="darkorchid"> * </font></a> <br /></td><td><div align="right"><font color="darkorchid">يحدد ثلاثة إطارات عمودية الأول حجمه 200 بيكسل، والثاني 300 بيكسل، <br />أما الثالث * أي انه غير محدد بحجم معين ولكنه سيكون بالحجم المتبقي من الشاشة (طالما أننا لا نعرف استبانة الشاشة التي يستخدمها زائر الموقع) </font></div></td></tr><tr><td><font color="darkorchid">‎<FRAMESET COLS="200,*,15%,20%">‎<br /><‎/FRAMESET><br /></font><a href="http://www.khayma.com/HPINARAbic/examples/master_4.html" class="postlink" target="_blank" rel="nofollow"><font color="darkorchid"> * </font></a> <br /></td><td><div align="right"><font color="darkorchid">يحدد أربعة إطارات حجم الأول هو 200 بيكسل، والثالث 15% من حجم الشاشة، والرابع 20% من حجم الشاشة أما الثاني فسيكون حجمه بما تبقى من الشاشة. </font></div></td></tr><tr><td><font color="darkorchid">‎<FRAMESET COLS="150,*,2*">‎<br /><‎/FRAMESET><br /> <br /></font><a href="http://www.khayma.com/HPINARAbic/examples/master_5.html" class="postlink" target="_blank" rel="nofollow"><font color="darkorchid"> * </font></a> <br /></td><td><div align="right"><font color="darkorchid">يحدد ثلاثة إطارات الأول حجمه 150 بيكسل.... أما المساحة المتبقية فتقسم على أساس أن الإطار الثالث حجمه هو ضعفي (*2) حجم الإطار الثاني (*) </font></div></td></tr></table><div align="center"><font color="darkorchid">أما الخاصية الثانية فهي ROWS وأعتقد أنك استنجت طبيعة عملها. نعم هي تحدد عدد وحجم الإطارات الأفقية (الصفوف) داخل الصفحة. وذلك بنفس الأسلوب المتبع مع الأعمدة، أي إما باستخدام الطريقة النسبية أو المطلقة. وسأقوم بسرد بعض الأمثلة لتوضيحها (وأذكرك ثانية أن هذه الأمثلة غير مكتملة): </font></div><br /><br /><table width="80%" border=1><tr><td><font color="darkorchid">‎<FRAMESET ROWS="50%,50%">‎<br /><‎/FRAMESET><br /></font><a href="http://www.khayma.com/HPINARAbic/examples/master_6.html" class="postlink" target="_blank" rel="nofollow"><font color="darkorchid"> * </font></a> <br /></td><td><div align="right"><font color="darkorchid">يحدد إطارين أفقيين ارتفاع كل منهما 50% من ارتفاع الشاشة </font></div></td></tr><tr><td><font color="darkorchid">‎<FRAMESET ROWS="20%,50%,30%">‎<br /><‎/FRAMESET><br /></font><a href="http://www.khayma.com/HPINARAbic/examples/master_7.html" class="postlink" target="_blank" rel="nofollow"><font color="darkorchid"> * </font></a> <br /></td><td><div align="right"><font color="darkorchid">يحدد ثلاثة إطارات أفقية ارتفاعاتها 20% و 50% و 30% على التوالي من ارتفاع الشاشة </font></div></td></tr><tr><td><font color="darkorchid">‎<FRAMESET ROWS="50,120,*">‎<br /><‎/FRAMESET><br /></font><a href="http://www.khayma.com/HPINARAbic/examples/master_8.html" class="postlink" target="_blank" rel="nofollow"><font color="darkorchid"> * </font></a> <br /></td><td><div align="right"><font color="darkorchid">يحدد ثلاثة إطارات أفقية الأول ارتفاعه 50 بيكسل، والثاني 120 بيكسل، والثالث سيكون بالإرتفاع المتبقي من الشاشة </font></div></td></tr><tr><td><font color="darkorchid">‎<FRAMESET ROWS="50,*,15%,20%">‎<br /><‎/FRAMESET><br /></font><a href="http://www.khayma.com/HPINARAbic/examples/master_9.html" class="postlink" target="_blank" rel="nofollow"><font color="darkorchid"> * </font></a> <br /></td><td><div align="right"><font color="darkorchid">يحدد أربعة إطارات أفقية ارتفاع الأول هو 50 بيكسل، والثالث 15% من ارتفاع الشاشة، والرابع 20% من ارتفاع الشاشة أما الثاني فسيكون ارتفاعه بما تبقى من ارتفاع الشاشة. </font></div></td></tr><tr><td><font color="darkorchid">‎<FRAMESET COLS="*,2*">‎<br /><‎/FRAMESET><br /></font><a href="http://www.khayma.com/HPINARAbic/examples/master_0.html" class="postlink" target="_blank" rel="nofollow"><font color="darkorchid"> * </font></a> <br /></td><td><div align="right"><font color="darkorchid">يحدد إطارين الثاني ارتفاعه ضعفي ارتفاع الأول </font></div></td></tr></table><div align="center"><font color="darkorchid">لم ننته بعد من ذكر كل الخصائص المتعلقة بالوسوم <FRAMESET> فلا زال هناك الكثير. ولكن من الضروري أن نقوم الآن بالإنتقال إلى وسم آخر للإطارات لأنه مرتبط إرتباطاً وثيقاً بالوسوم السابقة وخصائصها المذكورة أعلاه، وهي <FRAME> فما هو عمل هذا الوسم؟ </font><br /><font color="darkorchid">حسنا، كل ما قمنا به حتى الآن هو تعريف مجموعة من الإطارات وخصائصها (فقط تعريف الإطارات) لكن لم نحدد ماهية هذه الإطارات ولا محتوياتها ولا مصادرها. تماما كما نقوم بتعريف صفحات الويب الإعتيادية وخصائصها في الوسم <BODY> دون أن يعني ذلك تحديد محتويات هذه الصفحات. فإذا أردنا فيما بعد إدراج صورة مثلاً نستخدم الوسم الخاص بذلك وهو ‎<IMG SRC="imagname.ext">‎ </font><br /><font color="darkorchid">وفي حالة الإطارات فإننا نستخدم الوسم <FRAME> وهو وسم مفرد أي ليس له وسم نهاية تماماً مثل <IMG>. وفيه نقوم بتحديد مصدر وخصائص كل ملف نريد إظهاره داخل أحد الإطارات. ويتم استخدام هذا الوسم مرات بنفس عدد الإطارات المذكورة داخل <FRAMESET>. وسوف أقوم مباشرة باستخدام الخاصية SRC لتحديد مصدر الملف. </font><br /><font color="darkorchid">دعنا نقوم الآن بإتمام الشيفرة لبعض الأمثلة المذكورة أعلاه. ونبدأ بالمثال الأول: </font><br /><font color="darkorchid">‎<FRAMESET COLS="50%,50%">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /><‎/FRAMESET><br /></font><br /><font color="darkorchid">الآن ... والآن فقط أصبح لديك صفحة إطارات محترمة.</font><br /><font color="darkorchid">مثال آخر:</font><br /><font color="darkorchid">‎<FRAMESET COLS="200,400,*">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎<FRAME SRC="frame3.html">‎<br /><‎/FRAMESET><br /></font><br /><font color="darkorchid">مثال ثالث:</font><br /><font color="darkorchid">‎<FRAMESET ROWS="50,*,15%,20%">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎<FRAME SRC="frame3.html">‎<br /> ‎<FRAME SRC="frame4.html">‎<br /><‎/FRAMESET><br /></font><br /><font color="darkorchid">ورابع:</font><br /><font color="darkorchid">‎<FRAMESET COLS="*,2*">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /><‎/FRAMESET><br /></font><br /><font color="darkorchid"><hr align=center width="80%" SIZE=4></font><br /><font color="darkorchid">وبالإضافة إلى ما ذكر، نستطيع إدراج صورة مباشرةً داخل الإطار وباستخدام <FRAME SRC> تماماً كما ندرجها باستخدام <IMG SRC> وإليك هذا المثال: </font><br /><font color="darkorchid">‎<FRAMESET COLS="50%,50%">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="thedome.jpg">‎<br /><‎/FRAMESET><br /></font><a href="http://www.khayma.com/HPINARAbic/examples/mastimag.html" class="postlink" target="_blank" rel="nofollow"><font color="darkorchid"> * </font></a> <br /><font color="darkorchid"><hr align=center width="80%" SIZE=4></font><br /><br /><br /><font color="darkorchid">والآن لماذا لا نقم معاً بمراجعة الأفكار الأساسية السابقة الذكر وتلخيصها؟ وهذه هي:- </font></div><br /><br /><table dir=rtl width="80%" bgColor=#ffffff border=5><tr><td><br /><br /><ul><br /><li><font color="darkorchid">لإدراج صفحة إطارات نحتاج إلى ملف رئيسي يعتبر بمثابة الوعاء الذي سيضم هذه الإطارات. </font><br /></li><li><font color="darkorchid">الملف الرئيسي هو ملف HTML إعتيادي غير أننا نكتب الوسوم <FRAMESET> ...<‎/FRAMESET> بدلاً من <BODY> ...</BODY>. وبالتالي فهو يحتوي على الخصائص التي نريدها للإطارات وتعريفاتها. </font><br /></li><li><font color="darkorchid">نستخدم الخصائص COLS, ROWS لتحديد عدد الإطارات (صفوفاً كانت أو أعمدة) وأحجامها. </font><br /></li><li><font color="darkorchid">الملفات الفرعية التي تظهر ضمن الإطارات هي ملفات عادية كالتي قمنا بإنشائها في الدروس السابقة أو صوراً. ولا تحتوي على أي تنسيق أو وسوم خاصة. </font><br /></li><li><font color="darkorchid">نستخدم الوسم <FRAME> داخل الملف الرئيسي لمناداة الملفات الفرعية داخل الإطارات، وذلك مع الخاصية SRC. بالإضافة إلى استخدامه لتحديد باقي الخصائص . </font><br /></li></ul><br /></td></tr></table><br /><div align="center"><font color="darkorchid">كما نستطيع تمثيل هيكلية الإطارات من خلال الشكل التالي: </font></div><br /><font color="darkorchid"><img src="http://www.khayma.com/HPINARAbic/images/frameset.gif" style="width: 304;height: 254" border="0"></font><div align="center"><br /><br /><font color="darkorchid">هل تأكدت من فهمك لهذه النقاط؟ لنتابع إذن ... <br />حتى الآن قمنا بتقسيم الصفحة إما لإطارات أفقية أو لإطارات عمودية. لكن نحتاج لمعرفة كيفية إدراج كلاهما في الصفحة. كما في الأمثلة التالية: </font></div><br /><br /><br /><ul><br /><li><div align="center"><font color="darkorchid">صفحة مكونة من صفين، الثاني منهما مقسم بدوره إلى عمودين </font><a href="http://www.khayma.com/HPINARAbic/examples/master.html" class="postlink" target="_blank" rel="nofollow"><font color="darkorchid"> * </font></a> </div></li><li><div align="center"><font color="darkorchid">صفحة مكونة من عمودين، الثاني منهما مقسم بدوره إلى صفين </font><a href="http://www.khayma.com/HPINARAbic/examples/masterc.html" class="postlink" target="_blank" rel="nofollow"><font color="darkorchid"> * </font></a> </div></li></ul><div align="center"><br /><font color="darkorchid">لنبدأ بالمثال الأول:<br />بما أن الصفحة تحتوي على صفين نقوم بتعريفهما أولاً حسب الإرتفاعات المرغوب بها: </font><br /><font color="darkorchid">‎<FRAMESET ROWS="100,*">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /><‎/FRAMESET><br /> <br /></font><br /><font color="darkorchid">لكن الصف الثاني مقسم إلى عمودين وهنا يعتبر بمفهوم لغة HTML وكأنه صفحة إطارات جديدة لذلك لا نحتاج لتعريفه كصف وبدلاً من ذلك نعاود استخدام تعريف الصفحات! أي <FRAMESET> مرة أخرى. </font><br /><font color="darkorchid">‎<FRAMESET ROWS="100,*">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> <br /> <FRAMESET><br /> <‎/FRAMESET><br /> <br /><‎/FRAMESET><br /> <br /></font><br /><font color="darkorchid">وبما أن الصف الثاني (أو لنقل الإطار الثاني) مقسم إلى عمودين، إذن بقي علينا إضافة تعريف لهذه الأعمدة. وبذلك تكون الشيفرة النهائية كالتالي: </font><br /><font color="darkorchid">‎<FRAMESET ROWS="100,*">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> <br /> ‎<FRAMESET COLS="200,*">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎<FRAME SRC="frame3.html">‎<br /> <‎/FRAMESET><br /> <br /><‎/FRAMESET><br /> <br /></font><br /><font color="darkorchid">ما رأيك أن تحاول كتابة الشيفرة الخاصة بالمثال الثاني، أما إذا أردت إختصار هذه المهمة </font><a href="http://www.khayma.com/HPINARAbic/examples/framcode.html" class="postlink" target="_blank" rel="nofollow"><font color="darkorchid">فهذه هي</font></a> <br /><font color="darkorchid"><hr align=center width="80%" SIZE=4></font><br /><font color="darkorchid">لنقم الآن بإدراج مثال آخر وتحليله: أنقر </font><a href="http://www.khayma.com/HPINARAbic/examples/masterc2.html" class="postlink" target="_blank" rel="nofollow"><font color="darkorchid">هنا</font></a><font color="darkorchid"> لمشاهدته ثم عد إلى هنا لنناقشه معاً </font><br /><font color="darkorchid">يوجد لدينا ثلاثة أعمدة، أليس كذلك؟ إذن لنقم بتعريف صفحة إطارات ذات ثلاثة أعمدة (طبعاً لا يوجد أهمية للأحجام المذكورة، فأنا اخترتها حسب رغبتي وتستطيع أنت اختيار الأحجام التي تريدها). </font><br /><font color="darkorchid">‎<FRAMESET COLS="100,*,100">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎<FRAME SRC="frame3.html">‎<br /><‎/FRAMESET><br /> <br /></font><br /><font color="darkorchid">العمود الأوسط من هذه الصفحة مقسم إلى صفين، إذن نستبدل تعريفه بتعريف آخر لصفحة إطارات مكونة من صفين (وهذا هو التعريف بصورة مستقلة) </font><br /><font color="darkorchid">‎<FRAMESET ROWS="80,*">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎<FRAME SRC="frame4.html">‎<br /><‎/FRAMESET><br /> <br /></font><br /><font color="darkorchid">وبعد دمج الشيفرتين السابقتين معاً نحصل على هذه الشيفرة النهائية: </font><br /><font color="darkorchid">‎<FRAMESET COLS="100,*,100">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> <br /> ‎<FRAMESET ROWS="80,*">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎<FRAME SRC="frame4.html">‎<br /> <‎/FRAMESET><br /> <br /> ‎<FRAME SRC="frame3.html">‎<br /><‎/FRAMESET><br /> <br /></font><br /><font color="darkorchid">وصلنا الآن إلى نهاية هذا الدرس. وقد قمنا فيه بمناقشة أساسيات إدراج الإطارات، ولكن بقى هناك الكثير ليقال في هذا المجال</font><br /><font color="darkorchid"></span></font></div></div><div class="clear"></div></div><span class="gensmall"></span></td></tr></table></td></tr><tr class="post--227" style=""><td class="row1 browse-arrows" align="center" valign="middle" width="150"><a href="#top"><img src="http://hitsk.in/t/10/75/63/i_up_arrow.gif" alt="الرجوع الى أعلى الصفحة" /></a> <a href="#bottom"><img src="http://hitsk.in/t/10/75/63/i_down_arrow.gif" alt="اذهب الى الأسفل" /></a></td><td class="row1 messaging gensmall" width="100%" height="28"><table border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle"><a href="/u1" class="profile-icon" title="معاينة صفحة البيانات الشخصي للعضو"><img src="https://illiweb.com/fa/prosilver/icon_user_profile.png" class="i_icon_profile " alt="معاينة صفحة البيانات الشخصي للعضو" /></a> <a href="http://zamzam.1talk.net" title="مُعاينة مُنتدى هذا العضو" target="_blank"><img src="http://hitsk.in/t/10/75/63/i_icon_www.gif" alt="http://zamzam.1talk.net" /></a> </td></tr></table></td></tr><tr class="post post--228" id="p228" style=""><td class="row2" valign="top" width="150"><span class="name"><a name="228" style="position: relative; top: -30px; width: 1px;" id="228"></a><strong><a href="/u1"><span style="color:#FF8F0A"><strong>Mohammed shulkamy</strong></span></a></strong></span><br /><span class="postdetails poster-profile">مدير المنتدى<br /><img src="http://i46.servimg.com/u/f46/11/26/86/36/admin10.gif" alt="مدير المنتدى" title="مدير المنتدى" /><br /><a href="/u1"><img src="https://imgfast.net/users/3415/53/59/20/avatars/1-94.jpg" alt="avatar" /></a><br /><br /><span class="label"><span style="color:#cc3300;"></span></span> <img src="https://illiweb.com/fa/empty.gif" alt="ذكر" title="ذكر" /><br /><span class="label"><span style="color:#cc3300;">عدد الرسائل</span> : </span> 183<br /><span class="label"><span style="color:#cc3300;">العمر</span> : </span> 34<br /><span class="label"><span style="color:#cc3300;">اسم بلدك</span> : </span> مصر الثورة<br /><span class="label">تاريخ التسجيل : </span> 15/05/2007<br /></span><br /><img src="https://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" /></td><td class="row2" valign="top" width="100%" height="28"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><span class="postdetails"><img src="https://illiweb.com/fa/prosilver_pink/subforum_read.gif" alt="مُساهمة" title="مُساهمة" border="0" />موضوع: رد: الدرس التاسع من دروس HTMLالإطارات (1)   <img src="http://hitsk.in/t/10/75/63/i_icon_minitime.gif" alt="" border="0" />الأربعاء يونيو 04, 2008 10:43 am</span></td><td valign="top" nowrap="nowrap" class="post-options"> </td></tr><tr><td colspan="2" class="hr"><hr /></td></tr><tr><td colspan="2"><div class="postbody"><div><div align="center"><font face="Arial"><span style="font-size: 9px; line-height: normal"><strong><HTML><br /><HEAD><br /><TITLE>Frame1<‎/TITLE><br /><‎/HEAD><br /><BODY><br />Frame 1<br /><‎/BODY><br /><‎/HTML><br /></div></strong></span></font><br /><br /><strong>ونبدأ الآن بتعريف الملف الرئيسي الذي سيضم كافة الإطارات والملفات. وهو بالمناسبة ملف ذو حالة خاصة حيث نقوم باستخدام الوسوم </strong><div align="center"><font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><strong><FRAMESET> ... <‎/FRAMESET> </strong></span></font><br /><strong>بدلاً من الوسوم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><BODY> ... <‎/BODY> </span></font></strong><br /><strong>((إذن الملف الرئيسي للإطارات لا يتضمن تعريفا باستخدام <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">BODY</span></font> )) </strong><br /><font face="Arial"><span style="font-size: 9px; line-height: normal"><strong><HTML><br /><HEAD><br /><TITLE>Master File<‎/TITLE><br /><‎/HEAD><br /> <br /><FRAMESET><br /><‎/FRAMESET><br /> <br /><‎/HTML><br /></div></strong></span></font><div align="center"><strong>نأتي الآن إلى الخصائص: والخاصية الأولى التي تستخدم مع هذه الوسوم هي <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">COLS</span></font> وهي تعرّف عدد وأحجام الإطارات العمودية للصفحة. وتُحدد الأحجام بطريقتين (هل عرفتهما؟) نعم… إنهما الطريقة المباشرة والطريقة النسبية...أو كلاهما معا. </strong><br /><strong>والآن إليك هذه الأمثلة التي توضح مفهوم الأعمدة... وألفت نظرك إلى أن قيامك بالنقر على الشيفرة لكل مثال سيؤدي بك إلى مشاهدة هذا المثال بصورة عملية <u>لكن إنتبه! فهذه الشيفرة غير مكتملة وكتابتها بهذا الشكل فقط لن يؤدي إلى أي نتيجة ولا إلى ظهور أي إطارات </u>حيث ينقصها وسوم أخرى خاصة بمصدر الملفات الظاهرة داخل الإطارات، وقد قمت بإكمالها لغرض توضيح النتيجة لك فقط. لذلك أرجو أن تكتفي الآن بمعاينة كل شيفرة ونتيجتها إلى أن أقوم بسرد باقي الخصائص المهمة لاحقاً. </strong></div><br /><br /><table dir=ltr cellPadding=5 width="80%" border=1><tr><td><font face="Arial"><span style="font-size: 9px; line-height: normal"><strong>‎<FRAMESET COLS="50%,50%">‎<br /><‎/FRAMESET><br /></strong><a href="http://www.khayma.com/HPINARAbic/examples/master_1.html" class="postlink" target="_blank" rel="nofollow"><strong> * </strong></a></span></font><br /></td><td><div align="right"><span style="font-size: 16px; line-height: normal"><strong>يحدد إطارين عموديين حجم كل منهما 50% من حجم الشاشة </strong></span></div></td></tr><tr><td><font face="Arial"><span style="font-size: 9px; line-height: normal"><strong>‎<FRAMESET COLS="20%,50%,30%">‎<br /><‎/FRAMESET><br /></strong><a href="http://www.khayma.com/HPINARAbic/examples/master_2.html" class="postlink" target="_blank" rel="nofollow"><strong> * </strong></a></span></font><br /></td><td><div align="right"><span style="font-size: 16px; line-height: normal"><strong>يحدد ثلاثة إطارات أحجامها 20% و 50% و 30% على التوالي من حجم الشاشة </strong></span></div></td></tr><tr><td><font face="Arial"><span style="font-size: 9px; line-height: normal"><strong>‎<FRAMESET COLS="200,300,*">‎<br /><‎/FRAMESET><br /></strong><a href="http://www.khayma.com/HPINARAbic/examples/master_3.html" class="postlink" target="_blank" rel="nofollow"><strong> * </strong></a></span></font><br /></td><td><div align="right"><span style="font-size: 16px; line-height: normal"><strong>يحدد ثلاثة إطارات عمودية الأول حجمه 200 بيكسل، والثاني 300 بيكسل، <br />أما الثالث * أي انه غير محدد بحجم معين ولكنه سيكون بالحجم المتبقي من الشاشة (طالما أننا لا نعرف استبانة الشاشة التي يستخدمها زائر الموقع) </strong></span></div></td></tr><tr><td><font face="Arial"><span style="font-size: 9px; line-height: normal"><strong>‎<FRAMESET COLS="200,*,15%,20%">‎<br /><‎/FRAMESET><br /></strong><a href="http://www.khayma.com/HPINARAbic/examples/master_4.html" class="postlink" target="_blank" rel="nofollow"><strong> * </strong></a></span></font><br /></td><td><div align="right"><span style="font-size: 16px; line-height: normal"><strong>يحدد أربعة إطارات حجم الأول هو 200 بيكسل، والثالث 15% من حجم الشاشة، والرابع 20% من حجم الشاشة أما الثاني فسيكون حجمه بما تبقى من الشاشة. </strong></span></div></td></tr><tr><td><font face="Arial"><span style="font-size: 9px; line-height: normal"><strong>‎<FRAMESET COLS="150,*,2*">‎<br /><‎/FRAMESET><br /> <br /></strong><a href="http://www.khayma.com/HPINARAbic/examples/master_5.html" class="postlink" target="_blank" rel="nofollow"><strong> * </strong></a></span></font><br /></td><td><div align="right"><span style="font-size: 16px; line-height: normal"><strong>يحدد ثلاثة إطارات الأول حجمه 150 بيكسل.... أما المساحة المتبقية فتقسم على أساس أن الإطار الثالث حجمه هو ضعفي (*2) حجم الإطار الثاني (*) </strong></span></div></td></tr></table><div align="center"><strong>أما الخاصية الثانية فهي <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">ROWS</span></font> وأعتقد أنك استنجت طبيعة عملها. نعم هي تحدد عدد وحجم الإطارات الأفقية (الصفوف) داخل الصفحة. وذلك بنفس الأسلوب المتبع مع الأعمدة، أي إما باستخدام الطريقة النسبية أو المطلقة. وسأقوم بسرد بعض الأمثلة لتوضيحها (وأذكرك ثانية أن هذه الأمثلة غير مكتملة): </strong></div><br /><br /><table width="80%" border=1><tr><td><font face="Arial"><span style="font-size: 9px; line-height: normal"><strong>‎<FRAMESET ROWS="50%,50%">‎<br /><‎/FRAMESET><br /></strong><a href="http://www.khayma.com/HPINARAbic/examples/master_6.html" class="postlink" target="_blank" rel="nofollow"><strong> * </strong></a></span></font><br /></td><td><div align="right"><span style="font-size: 16px; line-height: normal"><strong>يحدد إطارين أفقيين ارتفاع كل منهما 50% من ارتفاع الشاشة </strong></span></div></td></tr><tr><td><font face="Arial"><span style="font-size: 9px; line-height: normal"><strong>‎<FRAMESET ROWS="20%,50%,30%">‎<br /><‎/FRAMESET><br /></strong><a href="http://www.khayma.com/HPINARAbic/examples/master_7.html" class="postlink" target="_blank" rel="nofollow"><strong> * </strong></a></span></font><br /></td><td><div align="right"><span style="font-size: 16px; line-height: normal"><strong>يحدد ثلاثة إطارات أفقية ارتفاعاتها 20% و 50% و 30% على التوالي من ارتفاع الشاشة </strong></span></div></td></tr><tr><td><font face="Arial"><span style="font-size: 9px; line-height: normal"><strong>‎<FRAMESET ROWS="50,120,*">‎<br /><‎/FRAMESET><br /></strong><a href="http://www.khayma.com/HPINARAbic/examples/master_8.html" class="postlink" target="_blank" rel="nofollow"><strong> * </strong></a></span></font><br /></td><td><div align="right"><span style="font-size: 16px; line-height: normal"><strong>يحدد ثلاثة إطارات أفقية الأول ارتفاعه 50 بيكسل، والثاني 120 بيكسل، والثالث سيكون بالإرتفاع المتبقي من الشاشة </strong></span></div></td></tr><tr><td><font face="Arial"><span style="font-size: 9px; line-height: normal"><strong>‎<FRAMESET ROWS="50,*,15%,20%">‎<br /><‎/FRAMESET><br /></strong><a href="http://www.khayma.com/HPINARAbic/examples/master_9.html" class="postlink" target="_blank" rel="nofollow"><strong> * </strong></a></span></font><br /></td><td><div align="right"><span style="font-size: 16px; line-height: normal"><strong>يحدد أربعة إطارات أفقية ارتفاع الأول هو 50 بيكسل، والثالث 15% من ارتفاع الشاشة، والرابع 20% من ارتفاع الشاشة أما الثاني فسيكون ارتفاعه بما تبقى من ارتفاع الشاشة. </strong></span></div></td></tr><tr><td><font face="Arial"><span style="font-size: 9px; line-height: normal"><strong>‎<FRAMESET COLS="*,2*">‎<br /><‎/FRAMESET><br /></strong><a href="http://www.khayma.com/HPINARAbic/examples/master_0.html" class="postlink" target="_blank" rel="nofollow"><strong> * </strong></a></span></font><br /></td><td><div align="right"><span style="font-size: 16px; line-height: normal"><strong>يحدد إطارين الثاني ارتفاعه ضعفي ارتفاع الأول </strong></span></div></td></tr></table><div align="center"><strong>لم ننته بعد من ذكر كل الخصائص المتعلقة بالوسوم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><FRAMESET></span></font> فلا زال هناك الكثير. ولكن من الضروري أن نقوم الآن بالإنتقال إلى وسم آخر للإطارات لأنه مرتبط إرتباطاً وثيقاً بالوسوم السابقة وخصائصها المذكورة أعلاه، وهي <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><FRAME></span></font> فما هو عمل هذا الوسم؟ </strong><br /><strong>حسنا، كل ما قمنا به حتى الآن هو تعريف مجموعة من الإطارات وخصائصها (فقط تعريف الإطارات) لكن لم نحدد ماهية هذه الإطارات ولا محتوياتها ولا مصادرها. تماما كما نقوم بتعريف صفحات الويب الإعتيادية وخصائصها في الوسم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><BODY></span></font> دون أن يعني ذلك تحديد محتويات هذه الصفحات. فإذا أردنا فيما بعد إدراج صورة مثلاً نستخدم الوسم الخاص بذلك وهو <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">‎<IMG SRC="imagname.ext">‎</span></font> </strong><br /><strong>وفي حالة الإطارات فإننا نستخدم الوسم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><FRAME></span></font> وهو وسم مفرد أي ليس له وسم نهاية تماماً مثل <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><IMG></span></font>. وفيه نقوم بتحديد مصدر وخصائص كل ملف نريد إظهاره داخل أحد الإطارات. ويتم استخدام هذا الوسم مرات بنفس عدد الإطارات المذكورة داخل <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><FRAMESET>.</span></font> وسوف أقوم مباشرة باستخدام الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">SRC</span></font> لتحديد مصدر الملف. </strong><br /><strong>دعنا نقوم الآن بإتمام الشيفرة لبعض الأمثلة المذكورة أعلاه. ونبدأ بالمثال الأول: </strong><br /><font face="Arial"><span style="font-size: 9px; line-height: normal"><strong>‎<FRAMESET COLS="50%,50%">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /><‎/FRAMESET><br /></div></strong></span></font><div align="center"><strong>الآن ... والآن فقط أصبح لديك صفحة إطارات محترمة.</strong><br /><strong>مثال آخر:</strong><br /><font face="Arial"><span style="font-size: 9px; line-height: normal"><strong>‎<FRAMESET COLS="200,400,*">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎<FRAME SRC="frame3.html">‎<br /><‎/FRAMESET><br /></div></strong></span></font><div align="center"><strong>مثال ثالث:</strong><br /><font face="Arial"><span style="font-size: 9px; line-height: normal"><strong>‎<FRAMESET ROWS="50,*,15%,20%">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎<FRAME SRC="frame3.html">‎<br /> ‎<FRAME SRC="frame4.html">‎<br /><‎/FRAMESET><br /></div></strong></span></font><div align="center"><strong>ورابع:</strong><br /><font face="Arial"><span style="font-size: 9px; line-height: normal"><strong>‎<FRAMESET COLS="*,2*">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /><‎/FRAMESET><br /></div></strong></span></font><strong><div align="center"><hr align=center width="80%" SIZE=4></div></strong><div align="center"><strong>وبالإضافة إلى ما ذكر، نستطيع إدراج صورة مباشرةً داخل الإطار وباستخدام <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><FRAME SRC></span></font> تماماً كما ندرجها باستخدام <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><IMG SRC></span></font> وإليك هذا المثال: </strong><br /><font face="Arial"><span style="font-size: 9px; line-height: normal"><strong>‎<FRAMESET COLS="50%,50%">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="thedome.jpg">‎<br /><‎/FRAMESET><br /></strong><a href="http://www.khayma.com/HPINARAbic/examples/mastimag.html" class="postlink" target="_blank" rel="nofollow"><strong> * </strong></a></span></font></div><strong><div align="center"><hr align=center width="80%" SIZE=4></div></strong><br /><br /><div align="center"><strong>والآن لماذا لا نقم معاً بمراجعة الأفكار الأساسية السابقة الذكر وتلخيصها؟ وهذه هي:- </strong></div><br /><br /><table dir=rtl width="80%" bgColor=#ffffff border=5><tr><td><span style="font-size: 16px; line-height: normal"><br /><br /><br /><ul><br /><li><strong>لإدراج صفحة إطارات نحتاج إلى ملف رئيسي يعتبر بمثابة الوعاء الذي سيضم هذه الإطارات. </strong><br /></li><li><strong>الملف الرئيسي هو ملف <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTML</span></font> إعتيادي غير أننا نكتب الوسوم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><FRAMESET> ...<‎/FRAMESET></span></font> بدلاً من <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><BODY> ...</BODY>.</span></font> وبالتالي فهو يحتوي على الخصائص التي نريدها للإطارات وتعريفاتها. </strong><br /></li><li><strong>نستخدم الخصائص <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">COLS, ROWS</span></font> لتحديد عدد الإطارات (صفوفاً كانت أو أعمدة) وأحجامها. </strong><br /></li><li><strong>الملفات الفرعية التي تظهر ضمن الإطارات هي ملفات عادية كالتي قمنا بإنشائها في الدروس السابقة أو صوراً. ولا تحتوي على أي تنسيق أو وسوم خاصة. </strong><br /></li><li><strong>نستخدم الوسم <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><FRAME></span></font> داخل الملف الرئيسي لمناداة الملفات الفرعية داخل الإطارات، وذلك مع الخاصية <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">SRC.</span></font> بالإضافة إلى استخدامه لتحديد باقي الخصائص . </strong><br /></li></ul><br /></span></td></tr></table><br /><div align="center"><strong>كما نستطيع تمثيل هيكلية الإطارات من خلال الشكل التالي: </strong></div><br /><strong><img src="http://www.khayma.com/HPINARAbic/images/frameset.gif" style="width: 304;height: 254" border="0"></strong><strong><br /><br /></strong><div align="center"><strong>هل تأكدت من فهمك لهذه النقاط؟ لنتابع إذن ... <br />حتى الآن قمنا بتقسيم الصفحة إما لإطارات أفقية أو لإطارات عمودية. لكن نحتاج لمعرفة كيفية إدراج كلاهما في الصفحة. كما في الأمثلة التالية: </strong></div><br /><br /><br /><ul><br /><li><div align="center"><strong>صفحة مكونة من صفين، الثاني منهما مقسم بدوره إلى عمودين </strong><a href="http://www.khayma.com/HPINARAbic/examples/master.html" class="postlink" target="_blank" rel="nofollow"><strong> * </strong></a></div></li><li><div align="center"><strong>صفحة مكونة من عمودين، الثاني منهما مقسم بدوره إلى صفين </strong><a href="http://www.khayma.com/HPINARAbic/examples/masterc.html" class="postlink" target="_blank" rel="nofollow"><strong> * </strong></a></div></li></ul><br /><div align="center"><strong>لنبدأ بالمثال الأول:<br />بما أن الصفحة تحتوي على صفين نقوم بتعريفهما أولاً حسب الإرتفاعات المرغوب بها: </strong><br /><font face="Arial"><span style="font-size: 9px; line-height: normal"><strong>‎<FRAMESET ROWS="100,*">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /><‎/FRAMESET><br /> <br /></div></strong></span></font><div align="center"><strong>لكن الصف الثاني مقسم إلى عمودين وهنا يعتبر بمفهوم لغة <font face="Times New Roman"><span style="font-size: 16px; line-height: normal">HTML</span></font> وكأنه صفحة إطارات جديدة لذلك لا نحتاج لتعريفه كصف وبدلاً من ذلك نعاود استخدام تعريف الصفحات! أي <font face="Times New Roman"><span style="font-size: 16px; line-height: normal"><FRAMESET></span></font> مرة أخرى. </strong><br /><font face="Arial"><span style="font-size: 9px; line-height: normal"><strong>‎<FRAMESET ROWS="100,*">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> <br /> <FRAMESET><br /> <‎/FRAMESET><br /> <br /><‎/FRAMESET><br /> <br /></div></strong></span></font><div align="center"><strong>وبما أن الصف الثاني (أو لنقل الإطار الثاني) مقسم إلى عمودين، إذن بقي علينا إضافة تعريف لهذه الأعمدة. وبذلك تكون الشيفرة النهائية كالتالي: </strong><br /><font face="Arial"><span style="font-size: 9px; line-height: normal"><strong>‎<FRAMESET ROWS="100,*">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> <br /> ‎<FRAMESET COLS="200,*">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎<FRAME SRC="frame3.html">‎<br /> <‎/FRAMESET><br /> <br /><‎/FRAMESET><br /> <br /></div></strong></span></font><div align="center"><strong>ما رأيك أن تحاول كتابة الشيفرة الخاصة بالمثال الثاني، أما إذا أردت إختصار هذه المهمة </strong><a href="http://www.khayma.com/HPINARAbic/examples/framcode.html" class="postlink" target="_blank" rel="nofollow"><strong>فهذه هي</strong></a></div><strong><div align="center"><hr align=center width="80%" SIZE=4></div></strong><div align="center"><strong>لنقم الآن بإدراج مثال آخر وتحليله: أنقر </strong><a href="http://www.khayma.com/HPINARAbic/examples/masterc2.html" class="postlink" target="_blank" rel="nofollow"><strong>هنا</strong></a><strong> لمشاهدته ثم عد إلى هنا لنناقشه معاً </strong><br /><strong>يوجد لدينا ثلاثة أعمدة، أليس كذلك؟ إذن لنقم بتعريف صفحة إطارات ذات ثلاثة أعمدة (طبعاً لا يوجد أهمية للأحجام المذكورة، فأنا اخترتها حسب رغبتي وتستطيع أنت اختيار الأحجام التي تريدها). </strong><br /><font face="Arial"><span style="font-size: 9px; line-height: normal"><strong>‎<FRAMESET COLS="100,*,100">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎<FRAME SRC="frame3.html">‎<br /><‎/FRAMESET><br /> <br /></div></strong></span></font><div align="center"><strong>العمود الأوسط من هذه الصفحة مقسم إلى صفين، إذن نستبدل تعريفه بتعريف آخر لصفحة إطارات مكونة من صفين (وهذا هو التعريف بصورة مستقلة) </strong><br /><font face="Arial"><span style="font-size: 9px; line-height: normal"><strong>‎<FRAMESET ROWS="80,*">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎<FRAME SRC="frame4.html">‎<br /><‎/FRAMESET><br /> <br /></div></strong></span></font><div align="center"><strong>وبعد دمج الشيفرتين السابقتين معاً نحصل على هذه الشيفرة النهائية: </strong><br /><font face="Arial"><span style="font-size: 9px; line-height: normal"><strong>‎<FRAMESET COLS="100,*,100">‎<br /> ‎<FRAME SRC="frame1.html">‎<br /> <br /> ‎<FRAMESET ROWS="80,*">‎<br /> ‎<FRAME SRC="frame2.html">‎<br /> ‎<FRAME SRC="frame4.html">‎<br /> <‎/FRAMESET><br /> <br /> ‎<FRAME SRC="frame3.html">‎<br /><‎/FRAMESET><br /> <br /></div></strong></span></font><div align="center"><strong>وصلنا الآن إلى نهاية هذا الدرس. وقد قمنا فيه بمناقشة أساسيات إدراج الإطارات، ولكن بقى هناك الكثير ليقال في هذا المجال</strong></div></div><div class="clear"></div></div><span class="gensmall"></span></td></tr></table></td></tr><tr class="post--228" style=""><td class="row2 browse-arrows" align="center" valign="middle" width="150"><a href="#top"><img src="http://hitsk.in/t/10/75/63/i_up_arrow.gif" alt="الرجوع الى أعلى الصفحة" /></a> <a href="#bottom"><img src="http://hitsk.in/t/10/75/63/i_down_arrow.gif" alt="اذهب الى الأسفل" /></a></td><td class="row2 messaging gensmall" width="100%" height="28"><table border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle"><a href="/u1" class="profile-icon" title="معاينة صفحة البيانات الشخصي للعضو"><img src="https://illiweb.com/fa/prosilver/icon_user_profile.png" class="i_icon_profile " alt="معاينة صفحة البيانات الشخصي للعضو" /></a> <a href="http://zamzam.1talk.net" title="مُعاينة مُنتدى هذا العضو" target="_blank"><img src="http://hitsk.in/t/10/75/63/i_icon_www.gif" alt="http://zamzam.1talk.net" /></a> </td></tr></table></td></tr><tr align="right"><td class="catBottom" colspan="2" height="28"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td width="9%" class="noprint"> </td><td align="center" class="t-title"><a name="bottomtitle"></a><div class="cattitle">الدرس التاسع من دروس HTMLالإطارات (1)</div></td><td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="#top"><img src="http://hitsk.in/t/10/75/63/i_up_arrow.gif" alt="الرجوع الى أعلى الصفحة" /></a> </td></tr></table></td></tr></table><table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;"><tr><td class="row2" valign="top" colspan="2" width="150"><span class="gensmall">صفحة <strong>1</strong> من اصل <strong>1</strong></span></td></tr></table><table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td class="row2" colspan="2" align="center" style="padding:0px"><a name="quickreply"></a><br /></td></tr><tr><td style="margin:0; padding: 0;" colspan="2"><table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''"><tbody><tr><td class="row2" valign="top" width="25%"><span class="gensmall"><strong>صلاحيات هذا المنتدى:</strong></span></td><td class="row1" valign="top" width="75%"><span class="gensmall"><strong>لاتستطيع</strong> الرد على المواضيع في هذا المنتدى<br /></span></td></tr><tr><td class="catBottom" colspan="2" height="28"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle" width="100%"><span class="nav"><a class="nav" href="/forum"></a><a class="nav" href=""></a> :: <a href="/c5-category" class="nav"><span>منتدى الكمبيوتر والبرامج</span></a> :: <a href="/f34-montada" class="nav"><span>زمزم للغات تطوير المواقع</span></a></span></td><td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="http://hitsk.in/t/10/75/63/i_tabs_less.gif" alt="-" align="middle" border="0" /></a></span></td></tr></table></td></tr></tbody></table></td></tr><tr><td style="margin:0; padding: 0;" colspan="2"><table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;"><tbody><tr><td class="catBottom" colspan="2" height="28"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle" width="100%"><span class="nav"><a class="nav" href="/forum"></a><a class="nav" href=""></a> :: <a href="/c5-category" class="nav"><span>منتدى الكمبيوتر والبرامج</span></a> :: <a href="/f34-montada" class="nav"><span>زمزم للغات تطوير المواقع</span></a></span></td><td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="http://hitsk.in/t/10/75/63/i_tabs_more.gif" alt="+" align="middle" border="0" /></a></span></td></tr></table></td></tr></tbody></table></td></tr></table><form action="/viewforum" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}"><table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center"><tr><td align="left" valign="middle" nowrap="nowrap" ><span class="nav"></span></td><td align="right" nowrap="nowrap"><span class="gensmall">انتقل الى: <select name="selected_id" onchange="if(this.options[this.selectedIndex].value != -1){ forms['jumpbox'].submit() }"><option value="-1">اختر منتدى</option><option value="-1"></option><option value="-1">|</option><option txt="foro" value="c2">|--منتدى الترحيب والترفيه</option><option txt="foro" value="f38">|   |--قبل المشاركة</option><option txt="foro" value="f4">|   |--زمزم للترحيب بالأعضاء الجدد</option><option txt="foro" value="f3">|   |--زمزم للتسلية والترفيه</option><option txt="foro" value="f5">|   |--قسم مواقف لاتنسى بحياتنا اليومية</option><option value="-1">|   </option><option txt="foro" value="f16">|--منتدى زمــزم العام</option><option txt="foro" value="c8">|--المنتدى الاسلامي العام</option><option txt="foro" value="f31">|   |--منتدى البرامج الاسلامية</option><option txt="foro" value="f26">|   |--المنتدى الإسلامي العــام</option><option txt="foro" value="f15">|   |--الاعجاز العلمي في القرآن و السنه</option><option txt="foro" value="f36">|   |--منتــدى الاحاديث النبوية</option><option txt="foro" value="f27">|   |--منتدى الدفاع عن نبينا محمد صلى الله عليه وسلم</option><option txt="foro" value="f25">|   |--رمضانيات - الدعوة الي الله</option><option txt="foro" value="f24">|   |--الحديث والفقة</option><option txt="foro" value="f22">|   |--منتدى الصوتيات والمرئيات الإسلامية</option><option txt="foro" value="f23">|   |--العقيدة وعلوم القران</option><option txt="foro" value="f35">|   |--التاريخ الإسلامي</option><option value="-1">|   </option><option txt="foro" value="c9">|--المنتديات الفكرية والسياسية والاقتصادية</option><option txt="foro" value="f28">|   |--المنتدى السياسي</option><option txt="foro" value="f29">|   |--المجلة الاقتصادية وعلوم التكنولوجيا</option><option txt="foro" value="f30">|   |--منتدى الكتب الإلكترونية</option><option value="-1">|   </option><option txt="foro" value="c7">|--المنتدى الرياضي</option><option txt="foro" value="f21">|   |--كرة القدم العربية</option><option txt="foro" value="f20">|   |--الرياضة العامة المختلفة</option><option txt="foro" value="f19">|   |--الرياضة العالمية</option><option value="-1">|   </option><option txt="foro" value="c5">|--منتدى الكمبيوتر والبرامج</option><option txt="foro" value="f17">|   |--زمزم للدروس المشروحه</option><option txt="foro" value="f34">|   |--زمزم للغات تطوير المواقع</option><option txt="foro" value="f14">|   |--زمـــــــزم ألعاب الفيديو و الكارتون</option><option txt="foro" value="f12">|   |--زمـــــــــزم لبرامج الكمبيوتر والأنترنت</option><option txt="foro" value="f13">|   |--زمــــــــــــزم لتصاميم البطاقات والتواقيع</option><option value="-1">|   </option><option txt="foro" value="f18">|--منتدى الاغانى والكليبات العربيه</option><option txt="foro" value="c3">|--منتدى الادبي والثـقـافــى</option><option txt="foro" value="f10">|   |--زمــــــزم للشعر العربي</option><option txt="foro" value="f33">|   |--جوله سياحيه حول العالم</option><option txt="foro" value="f32">|   |--الشخصيات المشهورة</option><option txt="foro" value="f11">|   |--للغرائب وعجائب الدنيا !</option><option txt="foro" value="f9">|   |--للـقصص والحكايات</option><option value="-1">|   </option><option txt="foro" value="c4">|--منتدى الأخوات المسلمات</option><option txt="foro" value="f8">|   |--ركن الأخوات المسلمات</option><option txt="foro" value="f6">|   |--زمـــــــزم للنقاشـات الجـادة</option><option txt="foro" value="f7">|   |--عـــــالــــم الـمـرأة و الأسـرة</option><option value="-1">|   </option><option txt="foro" value="c1">|--منتدى الاقتراحات والشكاوى وخدمات الاعضاء</option><option txt="foro" value="f39">    |--منتدى زمزم للاعلان عن مواقع ومنتديات الاعضاء</option><option txt="foro" value="f37">    |--منتدى زمزم لطلب الاعضاء للاشراف</option><option txt="foro" value="f1">    |--منتدى زمزم للاقتراحات والشكاوى</option></select><input type="hidden" name="tid" value="7110e589b0995d4de9800998ecf8427e" /> <input class="liteoption" type="submit" value="انتقل الى" /></span></td></tr></table></form><script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script><div id="z35cea35" style="clear:both;"><div align="center"><div> <div id="taboola-below-desktop-forum-thumbnails" style="max-width:1000px"></div> <script type="text/javascript"> window._taboola = window._taboola || []; _taboola.push({ mode: 'thumbnails-desktop-a', container: 'taboola-below-desktop-forum-thumbnails', placement: 'Below Desktop Forum Thumbnails', target_type: 'mix' }); </script></div></div></div><div style="height:3px"></div></td><td valign="top" width="0"><div id="emptyidright"></div></td></tr></tbody></table></div></div><!-- close div id="page-body" --><div id="page-footer"><div align="center"><div class="gen"><span class="gensmall">©</span> <a href="https://www.ahlamontada.com/phpbb" target="_blank">phpBB</a> | <strong><a href="http://www.ahlamontada.com/a-free-forum" target="_blank">منتدى مجاني</a></strong> | <a name="bottom" href="http://help.ahlamontada.com/" target="_blank">منتدى مجاني للدعم و المساعدة</a> | <a href="/abuse?page=%2Ft176-topic&report=1" rel="nofollow">التبليغ عن محتوى مخالف</a> | <strong><a href="http://www.ahlablog.com" target="_blank">احدث مدونتك مجانيا</a></strong></div></div></div></td></tr></table><script type="text/javascript">$(document).ready( function() {$('div.ti-connect').attr({'data-loc' : 'https://connect.topicit.net/','data-login' : 'http://zamzam.1talk.net/topicit/index.php/connect','data-version' : '1','data-lang' : 'ar'});(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "https://connect.topicit.net/scripts/connect.js";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'topicit-connect'));});</script><script type="text/javascript">//<![CDATA[ fa_endpage();//]]></script><script type="text/javascript"> var vglnk = { key: '74bad24252620514d1244cfba01f2ee2' }; (function(d, t) { var s = d.createElement(t); s.type = 'text/javascript'; s.async = true; s.src = '//cdn.viglink.com/api/vglnk.js'; var r = d.getElementsByTagName(t)[0]; r.parentNode.insertBefore(s, r); }(document, 'script')); </script><script type="text/javascript"> document.write('<scr' + 'ipt data-cfasync="false" type="text/javascript" src="http://www.adexchangeguru.com/a/display.php?r=1615687"></scr' + 'ipt>'); </script> <script type="text/javascript"> window._taboola = window._taboola || []; _taboola.push({flush: true}); </script></body></html>