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


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

 :: منتدى الكمبيوتر والبرامج :: زمزم للغات تطوير المواقع
 

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

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


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

الدرس التاسع من دروس HTMLالإطارات (1) Empty
مُساهمةموضوع: الدرس التاسع من دروس HTMLالإطارات (1)   الدرس التاسع من دروس HTMLالإطارات (1) I_icon_minitimeالأربعاء يونيو 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="https://2img.net/h/www.khayma.com/HPINARAbic/images/frameset.gif" style="width: 304;height: 254" border="0" alt="الدرس التاسع من دروس HTMLالإطارات (1) Frameset"/></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><tr><td colspan="2"><div class="fa_like_div"><p class="fa_like_list" style="display: none;"></p><button class="rep-button " data-href="" data-href-rm=""><svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg><span>أعجبني</span><span class="rep-nb" style="display:none;"></span></button><button class="rep-button " data-href="" data-href-rm=""><svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg><span>لم يعجبني</span><span class="rep-nb" style="display:none;"></span></button></div></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="https://2img.net/s/t/10/75/63/i_up_arrow.gif" alt="الرجوع الى أعلى الصفحة" loading="lazy" /></a> <a href="#bottom"><img src="https://2img.net/s/t/10/75/63/i_down_arrow.gif" alt="اذهب الى الأسفل" loading="lazy" /></a></td><td class="row1 messaging gensmall" width="100%" height="28"><table border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle"> <a href="https://zamzam.1talk.net" title="مُعاينة مُنتدى هذا العضو" target="_blank" rel="nofollow"><img src="https://2img.net/s/t/10/75/63/i_icon_www.gif" alt="https://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><span style="color:#FF8F0A"><strong>Mohammed shulkamy</strong></span></strong></span><br /><span class="postdetails poster-profile">مدير المنتدى<br /><img src="https://i.servimg.com/u/f46/11/26/86/36/admin10.gif" alt="مدير المنتدى" title="مدير المنتدى" loading="lazy" /><br /><img loading="lazy" src="https://2img.net/u/3415/53/59/20/avatars/1-94.jpg" alt="Mohammed shulkamy" style="max-width: 200px; max-height: 600px" /><br /><br /><div class="dd_award right"></div><div class="award_more"></div><br><span class="label"><span style="color:#cc3300;"></span></span> <img src="https://2img.net/i/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> 40<br /><span class="label"><span style="color:#cc3300;">اسم بلدك</span> : </span> مصر الثورة<br /><span class="label">تاريخ التسجيل : </span> 15/05/2007<br /></span><br /><img src="https://2img.net/i/empty.gif" alt="الدرس التاسع من دروس HTMLالإطارات (1) Empty" style="width:150px;height:1px" /></td><td class="row2" valign="top" width="100%" height="100%"><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><span class="postdetails"><img src="https://2img.net/i/fa/prosilver_pink/subforum_read.gif" alt="مُساهمة" title="مُساهمة" border="0" />موضوع: رد: الدرس التاسع من دروس HTMLالإطارات (1)   <img src="https://2img.net/s/t/10/75/63/i_icon_minitime.gif" alt="الدرس التاسع من دروس HTMLالإطارات (1) I_icon_minitime" 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 height="100%" valign="top"><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="https://2img.net/h/www.khayma.com/HPINARAbic/images/frameset.gif" style="width: 304;height: 254" border="0" alt="الدرس التاسع من دروس HTMLالإطارات (1) Frameset"/></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><tr><td colspan="2"><div class="fa_like_div"><p class="fa_like_list" style="display: none;"></p><button class="rep-button " data-href="" data-href-rm=""><svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg><span>أعجبني</span><span class="rep-nb" style="display:none;"></span></button><button class="rep-button " data-href="" data-href-rm=""><svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg><span>لم يعجبني</span><span class="rep-nb" style="display:none;"></span></button></div></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="https://2img.net/s/t/10/75/63/i_up_arrow.gif" alt="الرجوع الى أعلى الصفحة" loading="lazy" /></a> <a href="#bottom"><img src="https://2img.net/s/t/10/75/63/i_down_arrow.gif" alt="اذهب الى الأسفل" loading="lazy" /></a></td><td class="row2 messaging gensmall" width="100%" height="28"><table border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle"> <a href="https://zamzam.1talk.net" title="مُعاينة مُنتدى هذا العضو" target="_blank" rel="nofollow"><img src="https://2img.net/s/t/10/75/63/i_icon_www.gif" alt="https://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="https://2img.net/s/t/10/75/63/i_up_arrow.gif" alt="الرجوع الى أعلى الصفحة" loading="lazy" /></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><tr><td class="row2" colspan="2" align="right" valign="top"><span class="gensmall"></span></td></tr></table><table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px"><tr><td class="catBottom" height="28"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td valign="top"><div class="cattitle"> مواضيع مماثلة</div></td><td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="https://2img.net/s/t/10/75/63/i_tabs_more.gif" alt="+" align="middle" border="0" /></a></span></td></tr></table></td></tr></table><table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px"><tr><td class="catBottom" height="28"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td valign="top"><div class="cattitle"> مواضيع مماثلة</div></td><td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="https://2img.net/s/t/10/75/63/i_tabs_less.gif" alt="-" align="middle" border="0" /></a></span></td></tr></table></td></tr><tr><td class="row2 postbody" valign="top"></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="https://2img.net/s/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="https://2img.net/s/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="48f4c591674a23d7e9800998ecf8427e" /> <input class="liteoption" type="submit" value="انتقل الى" /></span></td></tr></table></form><div id="heff3a0" style="clear:both;"><div align="center"><div></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="https://www.ahlamontada.com/" 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> | <a href="javascript:window.Sddan.cmp.displayUI();">ملفات تعريف الارتباط التابعة لجهات خارجية</a> | <strong><a href="/latest" 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' : 'https://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 async src="https://ac.audiencerun.com/j/tag.js" data-arun-z="327yqx5vf9" data-arun-a="1" data-arun-cb="%%CACHEBUSTER%%" data-arun-vu="%%VIEW_URL_UNESC%%" data-arun-pm="%%PREVIEW_MODE%%" data-arun-site="%%SITE%%" data-arun-url="%%PATTERN:url%%" > </script></body></html>