أهلاً وسهلاً بك إلى الدرس العاشر من دروس HTML. والذي لا زلنا نناقش موضوع الإطارات فيه. لقد تعرفت في الدرس السابق على الأساسيات في هذا الموضوع، وتعلمت كيفية إنشاء صفحة ويب باستخدام مبدأ الإطارات. ونتابع معاً التعرف على باقي الخصائص والتحديدات المتعلقة بها.بداية، أجد من الضروري أن أذكرك بالوسمين الأساسيين للإطارات واللذين ندرجهما في الملف الأساسي، وهما <FRAMESET> والذي يوضع بدلاً من <BODY> ويشكّل الوسم الأساسي لتحديد مجموعة الإطارات في الصفحة وخصائص هذه المجموعة ككل. و <FRAME> الذي يوضع داخل نطاق الوسم السابق ويعرّف الملف المصدر لكل إطار ويحدد خصائصه. ومن المهم جداُ أن نميز بين الخصائص المتعلقة بكل وسم وأن لا نخلط بينهما.وعند الحديث عن الإطارات سوف نواجه تلك المشكلة العتيدة التي تؤرق دائماً مصممي صفحات الويب، ألا وهي مسألة توافق الوسوم والخصائص مع المتصفحات المختلفة (والتي قمت بتوضيحها هنا). فمثلاً لدينا أربع خصائص للوسم <FRAMESET> ، لكن واحدة منها فقط تعمل مع كلا المتصفحين الرئيسيين Netscape, MS Explorer. وكما إعتدنا سوف لن أركز على هذه الخصائص ، لكن على الأقل سأكتفي بذكرها وذكر عملها وأترك لك حرية تجربتها إن أردت.أولى هذه الخصائص هي FRAMEBORDER وهي تقوم بتحديد ظهور أو عدم ظهور الحدود حول الإطارات وتأخذ القيم 1 للظهور، و0 لعدم الظهور. وهذا مثال عليها:<FRAMESET ROWS="50,*,15%,20%" FRAMEBORDER="0">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
<FRAME SRC="frame4.html">
</FRAMESET>
*أما الخصائص الثلاث الأخرى فهي:
BORDER: تحدد سمك الحدود الظاهرة حول الإطارات وهي تأخذ قيماً بالبيكسل. (BORDER="n") وتعمل فقط مع Netscape
BORDERCOLOR: لإضافة لون للحدود (BORDERCOLOR="rrggbb") وتعمل مع Netscape أيضاً.
FRAMESPACING: لتحديد مسافات فارغة إضافية حول الإطارات وتأخذ قيماً بالبيكسل (FRAMESPACING="n") وهي تعمل مع MS Explorer.
أما الخصائص المستخدمة مع الوسم <FRAME> فهي كالتالي:
MARGINHEIGHT: تحدد مقدار المسافة الفارغة المتروكة للهوامش العلوية والسفلية للإطار (بالبيكسل).MARGINHEIGHT="n" MARGINWIDTH: تحدد مقدار المسافة الفارغة المتروكة للهوامش اليمنى واليسرى للإطار (بالبيكسل).MARGINWIDTH="n" SCROLLING: تحدد إمكانية ظهور أو عدم ظهور أشرطة التصفح الأفقية والعمودية على جوانب أو أسفل الإطار. وتأخذ القيم yes للظهور. no لعدم الظهور. و auto التي تحدد ظهور الأشرطة أو عدمه تلقائياً بحسب الحاجة إليها. تماماً كما يحدث في معظم تطبيقات WindowsSCROLLING="yes"
SCROLLING="no"
SCROLLING="auto"
NORESIZE عند إضافة هذه الخاصية يتم منع عملية التحكم بحجم الإطار بالتصغير أو التكبير من خلال السحب والإفلات. وهي لا تأخذ أي قيم.ولتوضيح مبدأ عمل هذه الخصائص إليك هذه الأمثلة، (سأقوم باستخدام الملف الرئيسي الذي أدرجت فيه الصورة في الدرس السابق، فهو أفضل مثال لتوضيحها). ولكي أذكرك به رجاءً أنقر هنا. وقم بتفحصه والتدقيق في تفاصيله لكي تقارنها بما سينتج عن الأمثلة التالية، كذلك حاول القيام بتكبير الإطار أو تصغيره بوضع المؤشر على الحد ثم استخدام السحب والإفلات بالإتجاه المطلوب. وذلك لكي تستطيع تمييز عمل الخاصية NORESIZE
<FRAMESET COLS="50%,50%">
<FRAME SRC="thedome.jpg" MARGINHEIGHT="40">
<FRAME SRC="frame2.html">
</FRAMESET>
*
<FRAMESET COLS="50%,50%">
<FRAME SRC="thedome.jpg" MARGINHEIGHT="40" MARGINWIDTH="30">
<FRAME SRC="frame2.html">
</FRAMESET>
*
<FRAMESET COLS="50%,50%">
<FRAME SRC="thedome.jpg" MARGINHEIGHT="40" MARGINWIDTH="30" SCROLLING="yes">
<FRAME SRC="frame2.html">
</FRAMESET>
*
<FRAMESET COLS="50%,50%">
<FRAME SRC="thedome.jpg" MARGINHEIGHT="40" MARGINWIDTH="30" SCROLLING="yes" NORESIZE>
<FRAME SRC="frame2.html">
</FRAMESET>
*
كذلك هناك الخصائص FRAMEBORDER, FRAMESPACING, BORDER, BORDERCOLOR التي تستخدم مع هذا الوسم وبنفس التفاصيل التي ذكرت مع <FRAMESET>. لكنها بالطبع تحدد خصائص الإطار وحده وليس مجموعة الإطارات ككل في الصفحة. وهي تعمل على متصفحات معينة دون غيرها.بقي لدينا الخاصية NAME والتي تعتبر أهم خاصية لهذا الوسم، فهي التي تحدد طريقة تنسيق العمل بين الإطارات والصفحات وأسلوب عرضها لذلك فقد فضلت أن أفرد لها موضوعاً خاصاً وبصورة مستقلة عن باقي الخصائص، وذلك في الدرس التالي إن شاء الله.
هناك وسم ثالث يتعلق بالإطارات، ويتم إدراجه داخل الملف الرئيسي وعادة في النهاية وهو:<NOFRAMES> ... </NOFRAMES>يستخدم هذا الوسم لتوفير بديل معين عن صفحة الإطارات في حالة قيام أحد الزوار بدخول الموقع مستخدماً متصفحاً لا يدعم الإطارات. (بالمناسبة فإن هناك متصفحات لا يمكن لها أن تعرض الإطارات مثل الإصدارات القديمة لـِ Netscape, MS Explorer) لكنك حتماً تستطيع مشاهدتها وذلك لأن الإصدارات المعربة من هذه المتصفحات هي إصدارات حديثة نسبياً وتدعم الإطارات.فإذا أردت أن تمنح زوار موقعك الذين لا يستخدمون متصفحاً حديثاً فرصة مشاهدة موقعك، فكل ما عليك فعله هو إدراج هذا الوسم في نهاية الملف الرئيسي للإطارات والبدء بكتابة صفحتك كما لو كانت صفحة ويب عادية.<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. ما رأيك لو قمنا بالتدرب على إنشاء نسخة من هذا الموقع باستخدام الإطارات في الدرس التالي؟ فكر في هذا الموضوع وتخيّل تصميماً معيناً تحب أن تراه في هذا الموقع (أو بالأحرى تحب أن ترى الموقع فيه). وقم بتجهيز الملفات الخاصة بذلك لتقارنها مع الملفات والأمثلة التي سأوردها. أراك على خير في الدرس التالي
الخميس، 19 يوليو 2012
الدرس العاشر الإطارات (2)
تنبيه : المرجوا عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا
قد يهمك أيضا :
الاشتراك في:
تعليقات الرسالة (Atom)
اقسام المجلة
- اخبار عن صناع التكنولوجيا
- اخبار متنوعة
- أشهار مدونتك
- اصنع محرك بحث خاص بك
- اضافات بلوجر
- اضافات بلوجر css
- اضافات jQuery
- الاستعلام عن مكان اللجنة الانتخابية
- الإعجاز العلمي في القرآن والسنة
- التورنت
- الطاقة الشمسية وتطبيقاتها
- الفوتوشوب
- الفيس بوك (Facebook)
- برامج اسلامية (كتب اليكترونية)
- برامج الانترنت
- برامج التصميم
- برامج الحماية
- برامج الصيانة
- برامج الكمبيوتر
- برامج المحادثة (الشات)
- برامج المديا
- برامج تصفح الانترنت
- برامج هندسية
- تحميل العاب
- تحميل القرأن الكريم
- جوجل ادسنس
- حل مشاكل بلوجر
- دروس بلوجر للمبتدئين
- دروس وخطب دينية
- دورة Html من الابتداء الى الاحتراف
- روائع هندسية
- شرح اليوتيوب الأمين
- طرائف حقيقية مضحكة
- علماء العرب المسلمين
- علماء مصر
- علوم وتكنولوجيا
- قصائد
- قصص الأنبياء
- قوالب بلوجر
- كاريكاتير المهندسين
- كتب هندسية باللغة العربية
- كورس هندسة وصفية واسقاط
- كورسات هندسية
- مقالتي
- مكتبة اكواد html
- مكتبة الكتب الهندسية
- Discover Egypt
- Islam
- Tech Tricks
التابدل الاعلاني
المشاركات الشائعة
-
تحميل لعبة فيفا 13( FIFA 13) اليوم معنا لعبة فيفا 2013 تحميل مباشر من اعظم العاب كرة القدم لعبة فيفا الغنية عن التعريف الان ا...
-
لاشتراكيون الثوريون ، هي منظمة ماركسية - تروتسكية مصرية ، متحالفة مع تيار الاشتراكية الدولية. [1] لعبت المنظمة وفقاً لأستاذ التاريخ الأمر...
-
تحميل العاب بروابط مباشرة اليوم معنا لعبة مميزة جدا وهي لعبةDead Space 3 ولان اترككم مع بعض صور من اللعبة . . . . ...
-
بسم الله الرحمن الرحيم طريقة ازالة اعلانات يوتيوب والفيس بوك اضافة الفيرفوكس(Firefox) https://addons.mozilla.org/en-...
-
بسم الله الرحمن الرحيم الصلاة و السلام على سيد الخلق اجمعين في مجال العمل المساحي يعتبر برنامج السيرفر من اهم البرامج لعمل الخ...
-
تفعيل انترنت دونلود مانجر الي الابد (الحل النهائي لكل الاصدارات) الشرح من هنا . رابط تحميل الاداة من هنا
-
في شهر رمضان المبارك توجد الكثير من الفوائد الروحيّة والإجتماعيّة التي نحن بحاجة ماسة إليها في حياتنا اليوميّة، إلا إن الصحيح...
-
تم الاعلان عن نتيجة الدبلومات الفنية - صناعى - تجارى - زراعى - صباح اليوم الثلاثاء 2/7/2013 يمكن مشاهدتها من خلال موقع وزارة التربية و...
-
تحميل لعبة بيس 2013 ( pes201 3) معنا اليوم لعبة كرة القدم المشهورة والغنية عن التعريف التي تنافس وبقوة لعبة فيفا العملاقة بل ا...
-
إضافة تعريف كاتب الموضوع لمدونات بلوجر الشخصية و الجماعية بسم الله و الحمد لله و الصلاة و السلام على خير من بعث نبيا مرشدا سيدنا مح...
أرشيف المدونة الإلكترونية
-
▼
2012
(676)
-
▼
يوليو
(104)
-
▼
يوليو 19
(21)
- وفاة رئيس المخابرات المصري السابق عمر سليمان
- مقدمة في لغة HTML
- الدرس الأول الأساسيات
- الدرس الثاني الألوان - أضف لصفحتك بعض الحيوية
- الدرس الثالث الخطوط
- الدرس الرابع الفقرات والقوائم
- الدرس الخامس الصور والرسومات
- الدرس السادس الوصلات التشعبية
- الدرس السابع الجداول (1)
- الدرس الثامن الجداول (2)
- الدرس التاسع الإطارات (1)
- الدرس العاشر الإطارات (2)
- الدرس الحادي عشر الإطارات (3)
- الدرس الثاني عشر وسوم ... من هنا وهناك!!!
- الدرس الثالث عشر الخرائط الصورية
- الدرس الرابع عشر النماذج (1)
- الدرس الخامس عشر النماذج (2)
- الدرس السادس عشر المتصفحات والوسوم الخاصة
- الدرس السابع عشر الويب واللغة العربية
- الدرس الثامن عشر وسوم META ومحركات البحث
- وفاة عمر سليمان بأمريكا
-
▼
يوليو 19
(21)
-
▼
يوليو
(104)
ليست هناك تعليقات:
إرسال تعليق