بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته،،
بداية انا اعرف ان معظم اعضاء سوالف ان لم يكن جميعهم محترفين و لكن وضعت هذا الدرس لعل احدا يستفيد به
ملحوظة هامة : لكى تظهر الصفحة بالشكل الصحيح قم بالضغط بالزر الايمن فى اى نقطة خالية و اختر Encoding ثم right to left
استكمالا لما بدأناه فى الدرس السابق , من التعرف على اساسيات الفرونت بيج . سوف نقوم اليوم ان شاء الله بالدخول شيئا يسيرا الى داخل هذا البرنامج العجيب . و نقوم بانشاء اول صفحة لنا بالفرونت بيج .
بعد ان تقوم بفتح البرنامج , و كما تعلمنا سوف تظهر لك هذه القائمة على اليمين
قم بالضغط على blank page . ليقوم البرنامج بقتح صفحة فارغة لنا .
لنبدأ الان بكتابة بعض الكلمات بهذه الصفحة ,و لنتخيل اننا نقوم بعمل صفحة البداية لموقعنا أو صفحة المقدمة :
انظر لقد قمنا بكتابة ما يلى فى الصفحة
ماذا تلاحظ؟ مجرد عبارات غير منسقة لم نجرى عليها اى تعديل الى الان .
لنقوم ببعض التنسيق على ما كتبناه بالاعلى باستخدام ادوات التنسيق المعروفة , كأن نجعل الخط عريضا و نغير لونه و نقوم بتوسيطه .... :
قم بعمل التنسيق الذى يناسبك : سنفترض اننا قمنا بتنسيق الخط بهذا الشكل
لان دعنا نقوم بادخال رابط او لنك - Link- و لكن انتظر ما هو الرابط ؟
ببساطة شديدة الرابط من اسمه ما هو الا رابط بين صفحة و صفحة اخرى أو ملف اخر ايا كان نوع هذا الملف . فنحن نقوم بعمل رابط لعبارة معينة او حتى صورة بحيث عند الضغط عليها يتوجه الزائر الى مصدر الربط الذى نحدده نحن . و بالطبع فان اغلبنا يعرف الروابط من خلال دخوله على الانترنت , فنادرا ما تخلو اى صفحة من الروابط .
دعنا الان ناخذ مثال عملى بالفرونت بيج عن كيفية عمل رابط
سوف نقوم الان بعمل رابط لعبارة ( مرحبا بكم فى مشاكس للبرامج حيث المتعة و الفائدة)
قم بتظليل هذه العبارة من شريط الادوات قم بالضغط على اداة التحكم بالروابط كما بالصورة
كما نرى , فى المربع رقم 3 قم بكتابة رابط الصفحة التى تود ان يذهب اليه الزائر عند الضغط على هذه العبارة .
و بالنسبة للرابط بامكانك ان تضع رابط لاى صفحة على الانترنت فبامكانى ان اضع فى هذه الخانة مثلا رابط لموقع الجزيرة http://www.aljazeera.net/
او لاى صفحة داخل موقع الجزيرة مثلا http://www.aljazeera.net/news/arabic/2004/1/1-25-5.htm ,
و ايضا قد يكون الملف او الصفحة فى داخل موقعى فلا داعى لوضع http://www , فلنفترض اننا قمنا بحفظ صفحتنا الحالية فى مجلد داخل موقعنا اسمه home باسم index.htm , و ان الرابط سوف يكون لصفحة اخرى بداخل نفس المجلد اسمها index.php , سوف يكون الرابط index.php
ماذ لو كان الملف index.php داخل مجلد اسمه toools تحت المجلد home الان سوف يكون الرابط tools/index.php ارجو ان تكون الفكرة مفهومة . و سوف نقوم بالاستفاضة فى موضوع الروابط ان شاء الله فى موضوع مستقل
- الان Target frame او مصدر الصفحة : ببساطة معناها فى اجابة هذا السؤال
ما هو الاطار الذى تريد ان تفتح به الصفحة عند الضغط على الرابط ؟
لعلك لاحظت فى بعض المواقع انك عندما تضغط على رابط معين فانه يقوم بفتح نافذة جديدة مستقلة , و يترك النافذة الحالية كما هى ,
ايضا فى بعض الصفحات عندما نستخدم الاطارات او IE frame , -و بالطبع لنا معها لقاء مهم - عند استخدامنا للاطارات أو الصفحات المضمنة فانه يمكننا تحديد المصدر الذى سوف يفتح به الرابط لانه فى هذه الحالة سوف يكون لدينا اكثر من صفحة
الان سوف نجعل الرابط الذى نقوم باعداده حاليا يفتح فى نافذة جديدة :
حدد العبارة , اضغط على اداة التحكم بالروابط لتظهر ثم اختر Target frame
2 - قم بتحديد مصدر الصفحة كما تريد :
Page Default : فى هذه الحالة سوف يفتح الرابط فى نفس الاطار الافتراضى للصفحة , حيث ان بامكاننا تحديد اطار افتراضى للصفحة فى هذه الحالة سوف يفتح اى رابط على حسب الوضع الافتراضى للصفحة ما لم نحدد فى اعداداته غير ذلك , و بامكاننا تحديد الرابط الافتراضى للصفحة عن طريق الخيارات العامة للصفحة او اضافة هذا الكود فى رأس الصفحة <base target="_self"> مع تغيير كلمة self الى ما يناسبنا
same frame : فى هذ الحالة فان الرابط سيفتح فى نفس النافذة الحالية
whole page : نفس الشىء هنا سوف يفتح فى نفس النافذة
New window : سيفتح الرابط فى نافذة جديدة
parent frame : هذا الخيار يكون نشط فقط او له تاثير فى حالة استخدامنا للاطارات .
الان سوف نقوم بعمل تعليق يظهر عند المرور بالماوس على الرابط
من نفس القائمة السابقة الخاصة بالتحكم فى الروابط قم بالضغط على Screen tip
سوف تظهر لك نافذة صغيرة اكتب التعليق الذى تريده ثم اضغط موافق
الان دعنا نشاهد نتيجة العمل الذى قمنا به , اضغط على جزء المشاهدة الموجود باسفل برنامج الفرونت بيج , قم بوضع الماوس فوق الرابط لترى التعليق كما بالصورة
الان سوف نتعلم عمل رابط داخل نفس الصفحة , لعلك شاهدت هذه الفكرة فى بعض المواقع و تعجبت من هذه الطريقة تضغط على رابط مثلا بأعلى الصفحة ينقلك الى اسفل نفس الصفحة أو العكس , هذه تسمى bookmark ,
هذه bookmark يمكننا أن نصفها بأنها علامة توضع بالصفحة لتقوم بتمميز مكان معين بالصفحة عن غيره .
فلكى نقوم بتنفيذ هذه الفكرة سوف نقوم بخطوتين , اولا سنقوم بادراج bookmark و ثانيا نقوم بعمل الرابط للbookmark
لادراج bookmark اولا حدد العبارة التى تريد ان تضع لها علامة او بمعنى اخر هذه هى النقطة التى نريد ان يذهب اليها الرابط عند الضغط عليه فى نفس الصفحة اذهب الى القائمة Insert و منها اختر bookmark او اضغط ctrl+k مباشرة لتفتح لك هذه النافذة
سوف نقوم بتطبيق مثالنا على هذه العبارة ( يوجد مشكلة بالمنتديات حاليا , حاول بعد فترة )
ضع العبارة السابقة فى اسفل الصفحة و لحاول ان تجعلها فى الاسفل على قدر الامكان تكون بعيدة عن الكلام الموجود بأعلى الصفحة لتشاهد الفرق
الان حدد عبارة ( يوجد مشكلة بالمنتديات حاليا , حاول بعد فترة ) افتح القائمة
Insert و منها اختر bookmark او اضغط ctrl+k مباشرة لتفتح لك هذه النافذة
من هذ النافذة حدد اى اسم تريده فى خانة ال bookmark name , بامكانك تركه كما هو , اضغط موافق للانتقال الى الخطوة التالية
الان بعد ان انشئنا ال bookmark , سوف نقوم بعمل رابط له بحيث اذا قام الزائر بالضغط على عبارة (اضغط هنا للدخول الى المنتديات )
تذهب به الصفحة الى هذه الجملة ( يوجد مشكلة بالمنتديات حاليا , حاول بعد فترة )
ظلل عبارة ( اضغط هنا للدخول الى المنتديات ) اضغط على اداة التحكم بالروابط , من النافذة قم بالضغط على bookmark , من نافذة bookmark , سوف تقوم بتحديد اسم ال bookmark الذى تريده , ثم اضغط موافق , الان , اذهب الى المعاينة لتشاهد بنفسك المثال عمليا .
لتحميل الدرس لا تنسى بالماوس الايمن و حفظ الهدف باسم
اضغط هنا لتحميل هذا الدرس على صيغة ملف وورد
اضغط هنا لتحميله بصيغة Html
رجو ان اكون قد قدمت فكرة مبسطة عن الروابط و باذن الله سوف نقوم بالتكملة فى الدروس القادمة
لا تنسونا من صالح دعائكم
