ابحث فى المدونة

أحدث المواضيع

تعلم واحترف HTML فى 14 يوم 

اليوم الثامن 
الاطارات


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

فهل تعرف ما هى الاطارات ؟ حسنا ساوضحها لك ..........
 هل سبق و زرت احدى الصفحات لتشاهد انها مقسمة الى عدة اقسام بحيث يظهر فى كل منها صفحة مستقلة , و تبدو بصورة منفصلة عن الاقسام الاخرى .

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



كما تشاهد الصفحة مقسمة الى 3 اقسام :علوى و ايسر و ايمن . و الحقيقة ان كل قسم منها هو عبارة عن ملف html كامل و مستقل بذاته . و هى مجرد صفحات عادية لا تختلف ابدا عن تلك التى تعلمنا انشاءها فى الدروس السابقة ,
و لا علاقة لكل منها بالصفحات الاخرى من حيث التركيب و التعريف .
اما كيف تم جمعها فى صفحة واحدة فهو موضوعنا اليوم الاطارات .
اى ان الموضوع يتلخص فى المعادلة الاتية :
مكونات صفحة الاطارات =عدد ملفات الصفحة نفسها + صفحة الملف الاساسى الذى يجمعها .
اى انى فى المثال السابق احتجت فعليا الى 4 ملفات لتكوين الصفحة .
قبل ان نبدأ لنقم بتحضير الملفات التى سترد فى الدرس لذلك قم بانشاء 3 او 4 ملفات بسيطة لكى تستخدمها فى الامثلة الاتية . انا قمت بانشاء ملفات على النمط التالى و اسميتها frame1.html , frame2.html ,frame3.html , frame4.html.
<html>
<head>
<title>frame1</title>
</head>
<body >
<b>
frame 1
</b>
</body>
</html>
و بقية الملفات بنفس الشكل مع تغيير الرقم من 1 الى 2 و هكذا .
نبدأ الان بتعريف الملف الرئيسى الذى سيضم كافة الاطارات و الملفات .و هو ملف ذو حالة خاصة حيث نقوم باستخدام الوسوم
<FRAMESET>.........</FRAMESET>
بدلا من <BODY>...........</BODY>
<html>
<head>
<title>frames</title>
</head>
<frameset >
...................
</frameset>
</html>
نأتى الان الى الخصائص :
الخاصية الاولى هى COLS و هى تعرف عدد و احجام الاطارات العمودية للصفحة .
و تحدد الاحجام اما بالطريقة المباشرة او الطريقة النسبية او كلاهما معا .
هذا الجدول يوضح مفهوم الاعمدة :

اما الخاصية الثانية فهى ROWS وتحدد عدد و حجم الاطارات الافقية داخل الصفحة بنفس الاسلوب المتبع مع الاعمدة . 


لم ننته بعد من ذكر كل الخصائص المتعلقة بالوسوم <FRAMESET> فلا زال هناك الكثير .
 من الضرورى ان نقوم الان بالانتقال الى وسم اخر للاطارات لانه مرتبط ارتباطا وثيقا بها  و هى <FRAME> فما هو عمل هذا الوسم ؟
الوسم <FRAME>وسم منفرد و فيه نقوم بتحديد مصدر و خصائص كل ملف نريد اظهاره داخل احد الاطارات .
ويتم استخدام هذا الوسم بنفس عدد الاطارات المذكورة داخل <FRAMESET> .

سوف اقوم مباشرة باستخدام الخاصية SRC  لتحديد مصدر الملف .
دعنا نقوم باتمام الشيفرة للصورة التى فى الاعلى :
<frameset rows="20%,80%">
<frame src="frame1.html">
<frameset cols="30%,*,">
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</frameset>
حصلت على نفس النتيجة اليس كذلك ؟
وتستطيع ايضا ادراج صورة مباشرة داخل الاطار و باستخدام <FRAME SRC> تماما كما ندرجها باستخدام <IMG SRC> و اليك هذا المثال :

<frameset cols="50%,*">
<frame src="frame1.html">
<frame src="image.jpg">
</frameset>
عودة مرة اخرى للوسم <FRAMESET> وخصائصه .
اولى هذه الخصائص FRAMEBORDER  و هى تقوم بتحديد ظهور حدود حول الاطار من عدمه و تأخذ القيم 1 للظهور , 0 لعدم الظهور 
<frameset cols="80%,*" frameborder="1">
 .............
</frameset>
0 الخاصية Border و هى تحدد سمك الحدود حول الاطار و تأخذ قيم بالبيكسل .
0 الخاصية bordercolor وتحدد لون الحدود 
0 الخاصية framespacing :لتحديد مسافات فارغة اضافية حول الاطارات و تأخذ قيم بالبيكسل .
 اما الخصائص المستخدمة مع الوسم <frame> فهى :
MARGINHERGHT 0: تحدد مقدار المسافة المتروكة للهوامش العلوية و السفلية للاطار (بالبيكسل).
MARGINWIDTH 0 :تحدد مقدار المسافة الفارغة المتروكة للهوامش اليمنى و اليسرى للاطار بالبيكسل .
SCROLLING 0: تحدد امكانية ظهور او عدم ظهور اشرطة التصفح الافقية و العمودية على جوانب او اسفل الاطار . و تأخذ القيم YES للظهور , NO لعدم الظهور. AUTO التى تحدد ظهور الاشرطة او عدمه تلقائيا حسب الحاجة اليها .
تماما كما يحدث فى معظم تطبيقات  Windows .

Scrolling="yes"
Scrolling="no"
Scrolling="auto"
NORESIZE 0 : عند اضافة هذه الخاصية يتم منع عملية التحكم بحجم الاطار بالتصغير او التكبير من خلال السحب و الافلات . و هى لا تأخذ اى قيم .
مثال على ما سبق :

<frameset rows="20%,80%" border="5">
<frame src="frame1.html" norsize>
<frameset cols="30%,*," bordercolor="red">
<frame src="frame2.html" scrolling="yes">
<frame src="frame3.html" marginwidth="80">
</frameset>
</frameset>

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

<NOFRAMES>..........</NOFRAMES>
يستخدم هذا الوسم لتوفير بديل معين عن صفحة الاطارات فى حالة قيام احد الزوار بدخول الموقع مستخدما متصفحا لا يدعم الاطارات .
فاذا اردت ان تمنح زوارك الذين لا يستخدمون متصفحا حديثا فرصة مشاهدة موقعك , فكل ما عليك فعله هو ادراج هذا الوسم فى نهاية الملف الرئيسى و البدء بكتابة صفحتك كما لو كانت صفحة ويب عادية .

<HTML>
<HEAD>
<TITLE>Main File< /TITLE>
< /HEAD>
<FRAMESET ROWS="50,*,15%,20%" FRAMEBORDER="0">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
<FRAME SRC="frame4.html">
< /FRAMESET>
<NOFRAMES>
<BODY>
اكتب صفحتك الاعتيادية
هنا
< /BODY>
< /NOFRAMES>
< /HTML>

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

15 comments:

غير معرف يقول...

شكرا على المجهود الرائع

غير معرف يقول...

النور التعليمي لـ معادلة كلية الهندسة للدبلومات الفنية مركز متخصص لتدريس مواد معادلة كلية الهندسة تؤهلكم لدخول كليه الهندسه بسهوله و يسر و بأسعار مخفضة جداً ويشرف على التدريس نخبة من أكبر المهندسين المتخصصين و خبرة اكثر من 10 اعوام -و يمكنك الحصول على كتب معادلة كلية الهندسة بأسعار مخفضة

sameh يقول...

كل خدمات التسويق الالكتروني تقدمها لكم شركة سوقني

Unknown يقول...


معادلة كلية الهندسة جامعة القاهرة
اذا كنت تريد ان تعمل معادلة كلية الهندسة جامعة القاهرة عليك اللجؤ الي مركز النور
فهو به سوف يساعدك في اجتياز امتحانات معادلة كلية الهندسة جامعة القاهرة فهو به نخبه من افضل المدرسين و الاساتذه
اللي هتساعدك في شرح مواد المعادلة بطريقه سهله و بسيطة و بدون تعقيد لكي تجتاز الامتحانات بنجاح
اتصل بنا علي الرقم 01093189974 – 0111612616161
http://www.engelnour.com

eng elnour يقول...

كتب معادلة كلية الهندسة جامعة القاهرة
مركز النور هو مركز متخصص في معادلة كلية الهندسة جامعة القاهرة يقدم لكل الطلبة اقوي شرح لمناهج ومواد معادلة كلية الهندسة كما لديه جميع كتب معادلة كلية الهندسة جامعة القاهرة منها كتب الرياضيات ,كتب الفيزياء,كتب الميكانيكا,وكتب الانجليزي, ويقوم مركز النور بتأهيل جميع الطلبة واعدادهم جيدا لاجتياز اختبارات معادلة كلية الهندسة جامعة القاهرة.
للاتصال علي 01118585670
http://www.eng-elnour.com/

Unknown يقول...

so cute

NO NAME يقول...


شركة رش مبيدات بالرياض
شركة مكافحة حشرات بالرياض
شركة مكافحة النمل الابيض بالدمام
شركة مكافحة النمل الابيض بالرياض




شركة مكافحة حشرات بالخرج
شركة مكافحة حشرات بالدمام
شركة مكافحة حشرات بالخبر


marketing for all يقول...

كما ان الاستعانة الحصول علي شركة عزل خزانات بجدة الكويت ، الكثير من المشاكل نجيل صناعي للفلل بالاتفاق سباك هاو شركة تنسيق حدائق تسليك المجاري و مشاكل شركة المنيوم بالكويت الصحي ان يقوم المشكلة شركة تنظيف كنب بدبي احضرته الوضع فنى كهرباء منازل بالكويت سرعان توفير للتخلص شركة نقل اثاث بالكويت أي ان تتواجد تسليك مجاري بالكويت

marketing for all يقول...

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

marketing for all يقول...

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

عمرو خيري يقول...

01157139355او01152233611 شركة جنة لخدمات نظافة منازل وفلل مابعد لتشطيبات وشقق المغلقة شركة تنظيف الارضيات الاسيراميك وبرسلين والرخام باحدث الماكينات وتلميع الموبليات وغسيل الانتريهات وصالونات وغسيل والموكيت وغسيل الواجهات ورش مبيدات

حكييييييم نور 01201726286 يقول...



افضل شركة تنظيف مساجد بخميس مشيط وابها
شركة تنظيف بخميس مشيط
ارخص شركة تنظيف منازل بخميس مشيط
افضل شركة تنظيف خزانات بخميس مشيط
شركة تنظيف بخميس مشيط
افضل شركة تنظيف خزانات بنجران
افضل شركة تنظيف كنب بخميس مشيط

شركة تسويق الكترونى يقول...

أصبح نقل العفش والاثاث من الاشياء المهمة جدا حيث نقوم فى شركتنا بتوفير أفضل عروض نقل العفش بجدة بأرخص الاسعار من خلال شركة نقل عفش بجدة الشركة رقم 1 فى بين جميع شركات نقل العفش بجدة ولمزيد من الخدمات اليك : شركة نقل عفش بجدة أهل الخليج

el-jokr يقول...



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

mai يقول...

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

data: commentLabel/
Related Posts Plugin for WordPress, Blogger...