الدرس السادس من( الجزء الاول ) من دورة تعليم تصميم المواقع
السلام عليكم ورحمه الله وبركاته
درسنا النهارده استكمالا للدرس اللى فات
يعنى معتمدين على بعضهم
والدرس الجاىهيكون عباره عن تطبيق شامل لما سبق يعنى مش هيكون فى شرح
هيكون تطبيق كامل على ما سبق وعليكم الاستعداد له فهو لن يخرج عن الدروس اللى اخدناها
نبدأ على بركه الله
الاطارات او الاطر Framesتستخدم الأطر frames لتقسيم المتصفح إلى عدة إطارات واستعراض عدة صفحات في نفس الوقت، كما يمكنك تبادل الأوامر بين هذه الصفحات، فيمكن عمل صفحة مستقلة تحتوي على فهرس الموقع، وبعد ذلك تضعها في صورة إطار يظل على يمين الشاشة، وكلما ضغط المستخدم على أحد الوصلات في الفهرس، يتم تحميل الصفحة في الإطار الآخر الذي على اليسار والذي يحتل الجزء الأكبر من الشاشة عادة، هذه الطريقة تتبع في الكثير من المواقع لتسهيل الأمور، فكيف يتم ذلك.
في البداية هنالك صفحة الإطارات، تحدد في هذه الصفحة تصميم طقم الإطارات الذي ستستخدمه، وما هي الصفحة التي يجب عرضها في كل إطار، أن كل صفحة تكون محفوظة في ملف مستقل لوحدها، في صفحة الإطارات ستستخدم وسوم الإطارات، ولكن باقي الصفحات ستكون صفحات عادية غالبا دون إطارات.
أول وسوم الإطارات هو الوسم frameset الذي يفتح مجموعة الإطارات، وفي هذه المجموعة يوجد عدد من وسوم الإطار frame المفردة ونضع فيها مصدر الصفحة في الخاصية src أو يمكننا وضع frameset أخرى داخل الـ frameset الأولى، ويوضع الوسم frameset خارج منطقة الجسم body دائما، نحدد في الوسم frameset إذا كنا سنقسم الصفحة أفقيا أو رأسيا، ونحدد حجم كل إطار، إذا كنا نريد تقسيم الصفحة رأسيا على شكل أعمدة نستخدم الخاصية cols ونضع فيها عرض كل إطار بحيث يفصل بين كل إطار والآخر فاصلة ( , ) وهذه الحجوم قد تكون نسبية أو مطلقة وتختلف في احتواء النسبية على علامة النسبة المؤوية، وإذا أردنا تقسيم الصفحة أفقيا نقوم بعمل نفس الشيء ولكن باستخدام الخاصية rows بدلا من cols، مثلا إذا أردنا تقسيم الصفحة رأسيا إلى ثلاثة أعمدة الأول بعرض 100 بكسل والثاني بعرض 10% من الشاشة والثالث يحتل باقي الشاشة تكون مجموعة الوسوم هكذا :
كود هتمل:<frameset cols="100,10%,*"> <frame src="sample1.html"> <frame src="sample2.html"> <frame src="sample3.html"> </frameset>
والنتيجه
وكما ذكرنا يمكنك وضع frameset آخر بدلا من أحد الإطارات frame
والنتيجهكود هتمل:<frameset rows="50,*"> <frame src="sample1.html"> <frameset cols="100,*"> <frame src="sample2.html"> <frame src="sample3.html"> </frameset> </frameset>
يمكنك وضع أو إزالة الإطار الذي يظهر حول الألواح باستخدام الخاصية frameborder إذا ضبتها عند القيمة 0 لن يظهر الإطار و 1 يظهر الإطار، يمكنك التحكم بحجم الإطار عن طريق زيادة أو إنقاص المسافة بين الألواح وذلك عبر الخاصية framespacing فتضع فيها القيمة التي تريدها، يمكنك ضبط الخاصيتان السابقتان عند 0 لمنع المستخدم من تغيير حجم الألواح.
والنتيجهكود هتمل:<frameset cols="50%,*" frameborder="0" framespacing="0"> <frame src="sample1.html"> <frame src="sample2.html"> </frameset>
يمكنك التحكم في ظهور أشرطة التمرير Scroll Bars في كل إطار من الإطارات عن طريق الخاصية scrolling وهي تأخذ القيمة yes لإظهار أشرطة التمرير دائما، والقيمة no لمنع ظهورها دائما، و auto لإظهارها وقت الحاجة إليها فقط.
كود هتمل:<frameset rows="20,*"> <frame src="sample1.html" scrolling="no"> <frameset cols="100,*"> <frame src="sample2.html" scrolling="yes"> <frame src="sample3.html"> </frameset> </frameset>
لكي تستطيع أن ترسل أوامرك ووصلاتك من لوح إلى آخر، يجب أن تقوم بتسمية أو عنونة الألواح بواسطة الخاصية name، وبعد ذلك لعمل وصلة بواسطة الوسم a استخدم الخاصية target لتحديد وجهة الوصلة، يمكنك فتح الوصلة في شاشة متصفح جديدة _blank أو فتحها في الشاشة الحالية فوق مجموعة الألواح _top أو فتحها في اللوح الحالي _self أو فتحها في اللوح الأب (في حالة ألواح داخل ألواح) _parent أو فتحها في أي لوح بوضع إسم اللوح.
كود هتمل:<!-- sample4.html --> <a href="sample1.html" target="_blank">Page 1</a><br> <a href="sample3.html" target="_top">Page 3</a><br> <a href="sample2.html" target="main">Page 2</a> <a href="sample4.html" target="main">Page 4</a> <frameset rows="20,*"> <frame src="sample1.html"> <frameset cols="200,*"> <frame src="sample4.html"> <frame src="sample3.html" name="main"> </frameset> </frameset>
والنتيجه
إضافة إلى ما سبق، يوجد أيضا إطار من نوع خاص يكون عائما في المستند مثل الصورة، يتم إدراج هذا الإطار في أي مكان بالمستند تحت القسم body، ويقوم بعمل إطار ليعرض صفحة HTML خارجية، ووسمه هو iframe وأهم خصائصه الخاصية src التي تحدد المستند المصدر الذي يجب عرضه في الإطار، يمكنك أيضا عنونه بالخاصية name وعمل وصلات موجهة إليه تماما مثل الإطار العادي، وفيما بقي فهو مثل الإطار
يمتلك أيضا خاصية width و height لتحديد حجمة
ملحوظه هامه:
الاطارات ماهى الا حاويه فارغه تظهر فيها صفحات قمنا بتصميمها سابقا
بمعنى اننا فى الامثله اللى فاتت عندنا صفحات مصممه اسمها sample1.html و sample2.htmlو sample3.html
ونريد ان يظهروا فى صفحه واحده نبدأ فى استخدام الاطارات
اذن فى حالات عدم وجود هذه الصفحات ستظهر الصفحه الرئيسيه فارغه
امممممممممممم
كفايه كدا ولا اضيف كمان
خلاص كفايه كدا عليكم علشان تستعدوا للتطبيق الجاى
انا خليت الدرس صغير علشان تخلصوه بسرعه وتراجعوا الدروس اللى فاتت
التطبيق المره دى غير المرات اللى فاتت
نظرا لان الدرس هيتعبكم علشان كدا انا عملتلكم
تطبيق بايدى
علشان تشوفوه ماشى ازاى
والمطلوب هتعملوا تطبيق زيه بالظبط
بس على مكتبه الكتب
تعملوا قائمه باسماء الكتب ولما اضغط على اسم الكتاب يفتح نبذه عن الكتاب واهدافه
وقيمته
بالظبط زى التطبيق اللى انا عملته دا بس انا عملته على عناوين الاخبار
وحضراتكم هتعملوه على مكتبه الكتب
بحيث ان المكتبه تضم مالا يقل عن 5 كتب يعنى تجيبوا 5 اسماء كتب بنبذه بسيطه عنهم
طبعا التطبيق بسيط وممكن نضيف صور وكل اللى عملناه فى الدروس السابقه
ودا هيكون التطبيق القادم
لتحميل التطبيق اضغط
سبحان الله
لتحميل الدرس الحالى اضغط
الحمدلله
رد مع الاستدلال
كتبت بواسطة ريما الكيلاني
الحمذ لله فهمت
الروابط المفضلة