دورة Html الدرس 9 - حل التطبيق الوارد في الدرس السابق

في الدرس السابق طرحت في نهاية الموضوع سؤالاً كالتالي:
تطبيق عملي ( وظيفة )
بالاعتماد على الصور التالية :



قم بعمل جدول لواجهة موقع بحيث يكون الشكل كالتالي:



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

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


نقوم عادة بوضع هذه الصور في مجلد images و نضع بجانب هذا المجلد صفحة الانترنت
ولتكن index.htm مثلاً
وبشكل عام حاول تسمية الصور بأسماء واضحة مناسبة حتى تكون مريحة في العمل
الآن سنقوم بإنشاء جدول مكون من 3 أسطر و3 أعمدة كالتالي:

الآن سنحدد بعض الخصائص على هذا الجدول
حيث سنجعل عرضه 100% و سنجعل ارتفاعه 500 على سبيل المثال
وسنجعله حدوده صفر 0 و تباعد الخلايا و المسافات بين الخلايا صفر أيضاً
( بالنسبة للحدود و التباعد يمكن أن نقول أنه دائماً نجعلها صفر عند إنشاء صفحات من صور )
وسنجعل الاتجاه من اليمين إلى اليسار
يصبح الكود كمايلي

وهذه صورة من داخل برنامج expression web لما أصبح لدينا الآن:

حيث أنصح باستعماله في كتابة أكواد Html و يمكنكم أيضاً المتابعة على صديقتنا صفحة الأكواد التابعة لموقعنا على الرابط التالي:
http://www.tahasoft.com/code.htm
و الآن بالنسبة للصورة التي ستكون في المكان رقم 1 أي الصورة التالية:

سنضعها في الخلية الأولى من الجدول الذي رقمته في الصورة السابقة
و بالنسبة للخلية td التي ستوضع الصورة داخلها يجب أن نضبط أبعادها بشكل ملائم
وهذه الصورة أبعادها 15, 109 بكسل
نضع الأبعاد فيصبح الكود كما يلي:

نضع الآن الصورة داخل الخلية باستعمال الكود img
بالنسبة للتطبيق الحالي رح أستخدم روابط الصور الموجودة في الموضوع
يعني الصورة التالية:


رابطها الحالي هو :

http://img833.imageshack.us/img833/2499/headright.png

وسوف أستخدمه في الكود
الكود بعد وضع الصورة هو :

أما إذا كنت تستعمل الصورة بعد أن وضعتها في مجلد على جهازك
وبفرض أنك وضعت الصور في مجلد اسمه images , وتعمل حالياً ضمن صفحة
اسمها Index.htm وكان اسم الصورة السابقة h1.png عندئذ يكون الكود كالتالي:

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

في الزاوية الأخرى رقم 2
نضبط أبعاد الخلية td و الأبعاد لهذه الصورة هي 16*109 بكسل
يصبح الكود:

ويكون شكل الجدول حتى هذه المرحلة :

الآن سنضع الصورة الثانية في الزاوية الجديدة
فيكون الكود :

و الشكل

و الآن سنملأ الخلية التي بينهما باللون الأحمر باستعمال الخاصة

bgcolor="red"

على الخلية
فتكون النتجية:

ضع هذا الكود في صفحة التبطبيق : http://www.tahasoft.com/code.htm
لترى النتجية بنفسك
و الآن سنضع في الخلية المتوسطة التي لوناها بالأحمر الصورة التالية:


حيث نستعمل الوسم img و نطبق الخاصة

align="center"

على الخلية التي تحوي الصورة
يصبح الكود:

ضعه في محرر الأكواد و شوف النتيجة

إذا عدنا للصورة الأساسية نجد مساحة رمادية تحت رأس الجدول ملونة بلون رمادي
وهنا لدينا ثلاثة خلايا td
سنقوم بدمجهم بخلية واحدة باستعمال colspan

و سنقوم بتطبيق خاصتني
تلوين الخلية الناتجة من الدمج باللون silver
وهذا ذكرته في السؤال بالدرس السابق
وسنعطيها ارتفاع مقداره 300 بكسل

بقي الآن الأجزاء السفلية من الجدول
حيث علينا وضع الصورتين

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

وبهذا ينتهي الدرس
هذا الدرس غليظ شوي بما أنه في البداية و صعب قليلاً
ولكن مع الممارسة سيصبح أسهل
ويحتاج للدقة بضبط الأبعاد للخلايا و طريقة توضع الصور
و بالنسبة للخواص المستخدمة و الأوامر الموجودة في الأكواد لا يوجد شيء جديد أبداً اليوم
كلها تم شرحها سابقاً
مع ملاحظة أنه يوجد أكواد بديلة وأفضل في التعامل مع الخواص عن طريقة استعمال css
التي اقترب موعدها

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