مدرسة بناء المواقع >>  الدروس العملية >>  موقعك على شكل برنامج !

تكرر طلب هذا الدرس كثيرا ً ، من جهات مختلفة :) ، لذا قررت شرح هذه الطريقة السهلة في العمل إن شاء الله تعالى في هذا الدرس الذي أرجو منكم بعد الفراغ منه أن لا تنسوني بدعوات صالحة في ظهر الغيب :)

في البداية دعوني أخبركم أمرا ً وهو أن ارتكاز هذا الدرس على لغة الـ جافا سكربت ، ولسنا هنا بصدد شرح هذه اللغة ، وإنما سأقوم بشرح برنامجا ً قام ببرمجته أحد مبرمجي هذه اللغة ( راجع التلميحات لترى المصدر ) الذي قام ببرمجة الكود الرائع والذي سنعتمد عليه في الشرح .

اسحب الملف من هنا
( بالزر اليمين > Save target As  حفظ الهدف باسم )

عليك بوضع الملف بجوار ملفات الـ Html  الخاصة بموقعك .

ممتاز ممتاز .. نبدأ الآن بالخطوة الأولى ، عليك تصميم الصفحة التي تريدها أن تظهر داخل هذا الإطار وقم بتسميتها home.htm  مثلا ً أشترط عليك أمرين في هذه الصفحة :
- أن تكون عرض الصفحة 800 ولا يزيد ارتفاعها عن 435 بيكسل .
- أن تحوي هذه الصفحة بداخلها إطارا ً مضمنا ً ( إن كنت لا تعرف ما هي الإطارات المضمنة ارجع لدرس :
الإطارات المضمنة .. حاجة حلوه :)) لكي يمكن للزائر تنزيل شريط المتصفح ( لأن الصندوق لا يحوي على أشرطة أنزلاق ولا أشرطة تكبير وتصغير للنافذة ) .

 

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

بعد ذلك أدخل  ( 1 ) في مكان العنوان المراد الربط به  .
الآن توجه إلى كود الـ ( HTML ) عن طريق الضغط على التبويب في أسفل البرنامج ( انظر الشكل ) :

الآن ابحث عن شفرة كهذه في الكود  :

<a href="1">

إذا وجدتها قم بتعديلها إلى التالي :

<a href="1" onclick="homepage=openIT('home.html',800,435,null,null,'homepage');">

حيث home.html هي الصفحة التي تريدها أن تكون بداخل الصندوق . و 800 و 435 هي مقاس الصندوق  ( هذا ما يهمنا )
 

الآن توجه إلى كود الصفحة ( home ليست   وإنما الصفحة الرئيسية التي تريد إذا ضغط الزائر على وصلة فيها أن يخرج له الصندوق )  وأضف هذا الكود  بين <head> و <head\> :

 قمت في هذا الشكل بشرح ما يهمنا في هذا الكود



 اسم هذا السكربت :

 CHROMELESS WINDOWS v.35.1 [ 8.1K ]
(c) Gabriel Suchowolski,2000 | www.microbians.com


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


 تطبيفات على الدرس

موقع الطير   www.al6er.com

 كاتب الدرس /

 مناقشة الدرس في المنتدى /


 مـازن©