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

جارٍ التحميل...

المواضيع الاكثر مشاهده

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

تعلم واحترف 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 سنبدأ بها يومنا التالى .

8 comments:

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

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

Nashwa Mostafa يقول...

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

sameh gamal يقول...

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

معادلة هندسة يقول...

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

اتصل بنا على :01093189974
www.معادلة-كلية-الهندسة.com/

مركز النور يقول...


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

eng elnour يقول...

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

مركز النور يقول...

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

اتصل بنا علي الرقم 01093189974 ، 01116126161

معادلة هندسة يقول...

لو انت عاوز مركز يكون متخصص فى تدريس معادلة كلية الهندسة جامعة القاهرة
و تكون اسعاره كويسه يبقى مش هتلاقى افضل من شرح مركز النور فهو متخصص فى تدريس معادلة كلية الهندسة جامعة القاهرة تابعوا معنا افضل نتيجة لمعادلة كلية الهندسة جامعة القاهرة
اتصل بنا على :01093189974
www.معادلة-كلية-الهندسة.com/

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