دروس على فـــرن بـــيـــج

 

الدرس الأول  واجهة البرنامج
 
* هذا هو قسم الفرونت بيج .. البرنامج الذي حظي باهتمام الكثير من المصممن ( المبتدئين والمحترفين ) ولأهميته وتعدد إمكانياته فقد أفردناه بقسم مستقل يحتوي على مجموعة من الدروس . وسنقوم هنا بشرح الإصدارة الرابعة من هذا البرنامج ( FrontPage2000 ) .

وقد يتساءل البعض لماذا لم نقم بشرح الإصدارة الخامسة والأخيرة من البرنامج ( FrontPage2002 ) والموجودة ضمن مجموعة ( Office xp ) ؟

- نقول هنا .. لأن البرنامج لم يزل جديداً ولذا نفترض عدم وجوده لدى الكثير من المستخدمين . أما فرونت بيج 2000 فهو في الغالب متوفر لدى الكثيرين . ولكن ربما نقدم لاحقاً شرح لأهم الإضافات فيه ودعمة الممتاز للغتنا العربية .

** ملاحظة : وردتنا الكثير والكثير جداً من الرسائل حول إمكانية الحصول على برنامج فرونت بيج 2000 من الشبكة .

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

قبل البدء في شرح رموز البرنامج وأدواته نورد هذه المعلومة عن صفحة الويب :

* تبدأ صفحة html أو الإتش تي ام ال بـالوسم <html> وتنتهي بـالوسم </html> .
* تنقسم الصفحة إلى منطقتين هما :
1- منطقة الرأس أو الهيد: وتبدأ بـالوسم <head> وتنتهي بـالوسم </head> وتحتوي على عنوان الصفحة .
2- منطقة الجسم أو البودي: وتقع بين الوسمين <body> و </body> .. وكل ما سيظهر في الصفحة سيكون موجود في هذه المنطقة .

والآن افتح الفرونت بيج2000 ، ستجد أن الإطار أسفل البرنامج يحتوي على ثلاث قسام هي Normal / HTML / Preview .
* القسم Normal : هو منطقة العمل التي سيتركز فيها شرحنا .
* القسم HTML : لمشاهدة الكود الذي يكتبه البرنامج خلف الصفحة .
* القسم Preview : لمشاهدة الصفحة كما ستظهر للمتصفح .. لذلك بعد أن تضيف شيء للصفحة في قسم Normal قم بمشاهدة طريقة ظهوره في منطقة Preview .
** شرح أهم رموز أشرطة أدوات فرونت بيج 2000 :
 


 

 

الدرس الثاني  أساسيات إنشاء المواقع

 


بعد أن تعرفت على واجهة فرونت بيج 2000 ابدأ التنفيذ الآن :

أولاً : حدد خصائص الصفحة ... كيف ؟
في أي مكان فارغ في الصفحة اضغط يمين الفارة واختر من القائمة المنسدلة Page Properties ستظهر لك النافذة التالية :
 


حدد ما تريد... بعد ذلك اضغط في الأعلى على علامة التبويب Background ستظهر لك النافذة التالية :
 


حدد ما تريد ثم اضغط OK .


ثانياً : ابدأ بتحرير الصفحة وإدراج الصور وعمل الارتباطات بين الصفحات .... كيف ؟
* لإدراج نص في الصفحة : ضع المؤشر في أي سطر تريد وفي أي جههة ( وسط أويمين أو يسار ) ثم ابدأ بالكتابة .
[ ملاحظة : عند الكتابة في الفرونت بيج وأردت الانتقال للسطر التالي لإكمال الجملة السابقة بالضغط على Enter ستكون المسافة كبيرة بين السطور ولكن اضغط ( Shift+Enter ) . ]
* لإدراج صورة : افتح القائمة Insert ثم اختر Picture ستفتح قائمة اختر منها From File بعد ذلك اختر الصورة التي تريدها واضغط OK .
* لوضع وصلة أو ارتباط أو لنك أو حسب ما تسميها ، تنقلك لصفحة أخرى أو لصورة أو لمستند وورد أو لأي ملف عند الضغط عليها :
1- اكتب اسم الارتباط : مثلاً .. لمشاهدة صفحتي الشخصية "اضغط هنا" .
2- ظلل "اضغط هنا " .. وهي الجملة التي تريدها أن تصبح ارتباط لصفحتك الشخصية .
3- افتح القائمة Insert واختر منها Hyperlink أو اضغط Ctrl+K في لوحة المفاتيح .. ستظهر لك النافذة التالية
 


(1) : في هذه المساحة ستظهر الصفحات التي قمت بحفظها .. وهذا سيسهل عمل ارتباط إلى هذه الصفحات .. فقط أشر بالماوس على الصفحة التي تريد ربطها بجملة " اضغط هنا " وستكتب مباشرة في الخانة (2) ، ثم اضغط OK .
(2) : في هذه الخانة يمكنك كتابة اسم الصفحة مباشرة مع امتدادها وهو (htm.) .
(3) : بالضغط على هذا الرمز ستفتح لك نافذة جديدة يمكنك من خلالها أن تستعرض مجلدات وملفات جهازك واختيار ما شئت لتربطه بالجملة المظللة في الصفحة .
(4) : بالضغط على هذا الرمز ستفتح لك نافذه لعمل ارتباط إلى بريد إلكتروني .. عند الضغط على الوصلة في المتصفح يفتح برنامج البريد الإلكتروني الافتراضي للشخص المتصفح ليرسل لك رسالة على العنوان التي ستكتبه في هذه النافذة .
بعد أن تختار نوع الملف الذي ستربطه بجملة " اضغط هنا " اضغط OK .
ستلاحظ أن جملة "اضغط هنا" أصبح تحتها خط أي أنها أصبحت ارتباط لصفحة أخرى أو لملف آخر .
[ وبنفس الطريقة تقوم بعمل جميع الارتباطات في موقعك .. جرب عمل وصلة أخرى لملف من نوع آخر !!] .
** لاحظ أن الارتباط يجب ان يكتب فيه الاسم مع امتداد الملف ... فمثلاً البرامج تكون عادة بامتداد exe أو zip لذا يجب عليك كتابة هذا الامتداد اذا رغبت عمل صفحة برامج مجانية ... فمثلاً لو اردت عمل ارتباط لتحميل برنامج باسم mIRC وامتداده هو exe يجب ان يكون الارتباط كالتالي : mIRC.exe ، وهكذا لبقية الملفات باختلاف امتداداتها .
 


# كيف سأحفظ صفحاتي وبقية ملفاتي في الجهاز ؟؟؟
1- قم بحفظ الصور التي ستستخدمها في موقعك بأحد الامتدادين jpg أو gif .
* حيث ستستخدم امتداد jpg للمناظر الطبيعية أو الصور التي لا تقبل تقليل ألوانها حتى لا تفسد دقتها .
* أما امتداد gif فهو للجرافيك التي ستقوم بعملها في برنامج الرسم لديك .
2- يجب حفظ جميع ملفاتك من صفحات وصور .. إلخ في مجلد واحد وبعد ذلك قم بعمل ارتباطات إليها .. وذلك حتى لا تحدث مشاكل في ظهورها عند ارسالها إلى الشبكة ... كيف ؟؟؟؟
[ يفترض فرونت بيج حفظ جميع صفحاتك في المجلد التالي C:mydocumentmyweb .. لذلك يجب عليك أن تضع جميع ملفاتك التي ستستخدمها في مجلد myweb قبل عمل اي ارتباط لها . أما بالنسبة للصور فيفترض فرونت بيج لها مجلد داخل مجلد myweb وهو images لذلك يفضل أن تضع الصور والجرافيك فيها خاصة اذا كان موقعك به عدد كبير منها .. أي ستحفظها في c:mydocumentmywebimages وبعد ذلك تقوم بإدراجها في الصفحة أو تصنع لها ارتباط كما تعلمت في السابق .. وبذلك يكون مسار استخدامها صحيح وتظهر عند ارسالها للشبكة بدون مشاكل بمشيئة الله ] .
* طريقة حفظ الصفحة في الجهاز بعد عملها :
افتح القائمة File واختر Save ستفتح لك النافذة التالية :
 


في الخانة File name اكتب اسم الصفحة .. كما يمكنك تغيير عنوان الصفحة الذي حددته مسبقا في خصائص الصفحة من هذه النافذة وذلك بالضغط على Change فوق اسم الصفحة بعد ذلك اضغط Save ستلاحظ أن البرنامج حفظها في مجلد myweb كما ذكرنا آنفاً.
** ملاحظات مهمة **
1- يجب أن يكون اسم الصفحة الرئيسية Index وذلك حتى تظهر مباشرة عند كتابة عنوان موقعك في المتصفح دون الحاجة إلى كتابة اسم هذه الصفحة .
2- يجب أن تستخدم الحروف اللاتينية لكتابة اسم الصفحة أو أي رمز من الرموز المعروفة والموجودة في لوحة المفاتيح ولا تستخدم حروف عربية أو رموز غريبة .
 


# كيف سيكون مسار ملفاتي في الشبكة ؟؟؟
أنت في جهازك قمت بحفظ ملفاتك في مجلد myweb الذي مساره c:mydocumentmyweb هذا المسار سيستبدل باسم موقعك أي سيصبح مثلا www.des4arab.com ، وستنقل ملفاتك إلى الشبكة بنفس ترتيبها في جهازك .. فمثلاً أنت لديك مجلد تحفظ فيه جميع صور موقعك وهو باسم images .. لذلك ستقوم بإنشاء مجلد بنفس الاسم في موقعك في الشبكة وتضع فيه جميع الصور المستخدمة . أما بالنسبة للملفات الأخرى مثل صفحات الويب التي قمت بعملها والتي تتميز بامتداد (htm.) ، أو مستند وورد ، أو غيرها فأنت وضعتها في جهازك في مجلد myweb جنباً إلى جنب مع مجلد images .. لذلك سترسلها إلى الشبكة بجانب مجلد images .. وبذلك لن تحدث مشاكل في فتح الارتباطات على الشبكة بمشيئة الله .

 

 

الدرس الثالث  استخدام الجداول

 

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

اضغط على رمز ادراج جدول في شريط الأدوات العلوي ( راجع شرح الرموز في الخطوة الأولى ) واختر عدد الأعمدة والصفوف التي تريدها . أو استخدم insert>table وحدد عدد الخلايا .

* ستلاحظ أن حدود الجدول الداخلية والخارجية بارزة .. فماذا لو كنت تريد حدود الجدول مخفية في (Preview) وظاهرة في قسم (Normal) للتعامل معها وتدرج ما تريد ؟؟ ... بسيطة !!
ضع المؤشر في أي خلية داخل الجدول وانقر يمين الفارة ستفتح قائمة اختر منها Table Propeties ستفتح لك نافذة توضح خصائص الجدول وهي كالتالي :

(1): لتحديد موضع الجدول في الصفحة .
(2): لتحديد المسافة بين الخلايا .
(3): من هذا الخيار يمكنك اخفاء حدود الجدول في المتصفح وذلك بوضع قيمة سمك الإطار Border=0 ، ويمكنك من هنا أيضاً زيادة سمك الإطار .
(4): لاختيار لون الإطار حول الخلايا .
(5): لاختيار لون خلفية للجدول .
(6): لاختيار صورة كخلفية للجدول .
(7): لاختيار عرض وارتفاع خلايا الجدول .
(8): باختيار لونين مناسبين من الخانتين Light border و Dark border يمنكنك جعل خلايا الجدول وكأنها بارزة .. وهذا سيعطها مظهر جميل .
قم باختيار ما شئت من خصائص واضغط OK .


** ملاحظة **
( أي اختيار ستختاره من خصائص الجدول سينطبق على جميع خلايا الجدول ) .
ولكن ماذا لو أردت تطبيق خصائص معينة على خلية واحدة أو مجموعة من الخلايا دون البقية ؟؟ الأمر بسيط ..!!


1- لخلية واحدة ضع المؤشر بداخلها .. ولعدة خلايا قم بتحديد هذه الخلايا .
2- اضغط يمين الفارة واختر Cell Properties ستظهر لك النافذة التالية التي توضح خصائص الخلية :
 


3- كما تلاحظ أنها شبيهة بخصائص الجدول .. اختر منها ما تريد من خصائص لتطبيقها على خلية واحدة أو خلايا محددة ثم اضغط OK .
** ملاحظة **
( لفهم الجداول والتعرف إلى تعقيداتها بشكل أفضل احفظ الصفحات التى ترى تعقيداً في تصميمها وافتحها في الفرونت بيج 2000 ) .

 

الدرس الرابع  جماليات بالفرونت بيج

 

# أولاً: كيف تضع خط أفقي في صفحتك ؟
 لوضع خط أفقي في الصفحة اذهب إلى Insert>Horizontal Line سيظهر لك الخط بإعداداته الافتراضية ... لكن يمكنك تغييرها حسب ما تريد .. كيف ؟
انقر نقرة مزدوجة على الخط الأفقي عندها ستظهر لك النافذة التالية :
 


(1) : طول الخط (2) : سمك الخط (3) : لون الخط


# ثانياً: كيف تدرج رمز ما في صفحتك ؟
لإدراج رمز اذهب إلى Insert>Symbol ستفتح نافذة بها عدد كبير من الرموز .. اختر منها واضغط Insert ثم اضغط Close .
 


# ثالثاً: كيف تضع تعداد رقمي أو نقطي في صفحتك ؟
أي لو كان لديك عدد من الأسطر وتريد ترقيمها أو وضع نقاط بجانبها بأي شكل كانت .. فماذا تفعل ؟
1- اكتب السطور التي تريد ترقيمها واجعل الانتقال بينها بواسطتة Enter فقط وليس Enter+Shift .
2- ظلل السطور التي تريد ترقيمها واذهب إلى Format>Bullest and Numbering واختر منها ما تريد ثم اضغط OK .. ستجد أن المسافة بين الأسطر أصبحت صغيرة .
 


# رابعاً: كيف تدرج نص متحرك في صفحتك ؟
اذهب إلى Insert>Component>Marquee ستفتح لك النافذة التالية :
 


(1): اكتب هنا النص المتحرك .
(2): سرعة تحريك النص .
(3): نوع الحركة .
(4): لوضع لون لخلفية النص المتحرك .
اختر ما تريد ثم اضغط OK ... قم بمعاينته في قسم Preview .
لو اردت تغيير الاعدادات انقر نقراً مزدوجاً على النص المتحرك ستظهر النافذة السابقة .. أجر تعديلاتك ثم اضغط OK .
 


# خامساً: ما هي خاصية البوك مارك ؟
هل سبق لك أن زرت موقع عندما تضغط على ارتباط ينقلك إلى مكان آخر ولكن في نفس الصفحة ؟ انها خاصية البوك مارك !! فكيف يتم عملها ؟ تابع الخطوات التالية فالعملية سهلة :
1- حدد النص أو الصورة التي تريد الزائر أن ينتقل إليها عند ضغط ارتباط معين .
2- اذهب إلى Insert>Bookmark ستفتح النافذة التالية :
 


3- اكتب اسم لهذا النص أو الصورة في خانة Bookmark name ثم اضغط OK .
4- حدد النص أو الصورة التي تريد الزائر أن يضغطها لينتقل إلى هناك .
5- اذهب إلى Insert>Hyperlink ستفتح النافذة التالية :
 


هذا جزء من النافذة فقط وهو ما يهمنا في هذه النقطة
 


6- افتح القائمة المنسدلة بجوار كلمة Bookmark ستجد أن الاسم الذي كتبته في الخطوة (3) موجود هنا قم باختياره ثم اضغط OK .
قم بتجربته في المعاينة ... ولكن لن يتضح لك إلا إذا كانت المسافة بين الارتباط والهدف أكبر من ارتفاع الشاشة 0
 


# سادساً: كيف تدرج أزرار متغيرة بواسطة فرونت بيج 2000 ؟
هل سبق لك أن زرت موقع عند مرور الفارة على زر يتغير لونه أو يتحرك أو يحدث له أي تأثير ؟ ... يمكنك عمل بعض هذه التأثيرات بواسطة فرونت بيج 2000 كالتالي :
1- ضع المؤشر في المكان الذي تريد ظهور الزر فيه .
2- اذهب إلى Insert>component>Hover Button ستفتح النافذة التالية :
 


3- حدد الخيارات التالية :
(1): في هذه الخانة اكتب النص الذي تريد ظهوره في الزر .
(2): الصفحة التي تريد الزائر ينتقل إليها عند ضغط الزر .
(3): لون الزر .
(4): نوع التأثير .
(5): عرض الزر .
(6): ارتفاع الزر .

وبعد ضبط الإعدادات اضغط OK ، ثم قم بتجربة التأثير في قسم المعاينة Preview .
** ملاحظة **
[لو اردت تغيير الاعدادات انقر الزر نقراً مزدوجاً على الزر ستفتح النافذة السابقة ثم قم بالتعديلات اللازمة واضغط OK].

 

الدرس الخامس  المجلدات

 

** إذا كنت ممن يملكون موقعاً كبيراً نسبياً على شبكة الإنترنت ، به العديد من الملفات المتنوعة ، فيلزمك أن تكون هذه الملفات أكثر تنظيماً ليسهل إدارة موقعك فيما بعد .وذلك بعمل مجلدات في موقعك.

## ولكن كيف يتم تنظيم هذه الملفات داخل مجلدات في موقعك ؟
1- عليك أولاً بتصنيف أقسام موقعك تصنيفاً ملائماً لمحتوياته .
2- بعد ذلك قم بعمل مجلد لكل قسم وسمه بما يدل على محتويات هذا القسم .

** مثال : لنفترض أن لدينا موقعاً يضم الأقسام التالية :
- قسم برامج مجانية .
- مكتبة صور .
- مكتبة سمعية .
- قيم تعليمي .

سنقوم بإنشاء أربعة مجلدات في الجهاز في مجلد myweb الافتراضي لملفات موقعك ، ونسمي كل مجلد بما يدل على محتواه ... فمثلاً تكون أسماء الأقسام السابقة على التوالي :
- software .
- pictures
- songs
- edu

وعند إنشاء الصفحات سنقوم بحفظ كل صفحة في المجلد المناسب لها . ويمكنك إنشاء مجلد صور باسم " img " مثلاً ، داخل كل من هذه المجلدات لحفظ الصور الخاصة بكل قسم .

# عمل الارتباطات بين صفحات وملفات الأقسام :

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

أولاً : مثلاً ، لوضع ارتباط إلى الصفحة الرئيسية لقسم edu يمكنك عمل ذلك بإحدى طريقتين :
أ) تسطير العنوان يدوياً في خانة URL ، بحيث يكون كالتالي :
 

ثم ضغط OK . وعندما يقوم الزائر بضغط هذا الارتباط سيقوم المتصفح تلقائياً بقراءة الصفحة الرئيسية index لهذا القسم " edu " .

 ب) استعراض هذه الصفحة من خانة الملفات في Create Hyberlink بحيث نقوم بفتح مجلد edu والتأشير على صفحة index بداخله ثم نضغط OK . كما في الشكل التالي :

ثانياً : عمل ارتباط لصفحة في قسم ما من صفحة في قسم آخر :

** مثال : لدينا صفحة في قسم software باسم internet.htm ، نريد أن نضع فيها ارتباط لصفحة wall.htm في قسم pictures . يمكنك عمل ذلك بإحدى طريقتين :

أ) تسطير العنوان يدوياً :
1- افتح صفحة internet.htm في الفرونت بيج .
2- اشر على العبارة أو الصورة التي تريدها أن تكون ارتباط .
3- افتح نافذة Create Hyberlink .
4- في خانة URL اكتب ما يلي :

** حيث أن /.. تعني خروج من مجلد software ، والبقية وصول لصفحة wall.htm .
5- وأخيراً اضغط OK .

ب) ادخال العنوان أتوماتيكياً :
1- افتح صفحة internet.htm في الفرونت بيج .
2- اشر على العبارة أو الصورة التي تريدها أن تكون ارتباط .
3- افتح نافذة Create Hyberlink .
4- من الأعلى افتح مجلد pictures لاستعراض جميع محتوياته .
5- أشر على صفحة wall ثم اضغط OK .

** وبهذه الطريقة يمكنك عمل ارتباطات بين جميع صفحات وملفات أقسام موقعك .
[ وأخيراً قم بإنشاء مجلدات في موقعك في الشبكة بنفس ترتيبها وأسماءها في جهازك ، وانقل صفحات كل قسم إلى ما يماثله في الشبكة ] .

 

 

الدرس السادس  الإطارات أو الفريمات

 

# ماذا تعني الإطارات ؟
تعني تقسيم الصفحة إلى عدة أقسام كل منها يمثل صفحة مستقلة ، ولكن بشكل غير ملاحظ للشخص المتصفح .
* مثل : وضع قائمة في اليمين ثابتة لا تتغير بتغير الصفحات في اليسار .
* ملاحظة : [ كما أن للإطارات ميزات فإن لها مساويء ستعرفها عند استخدامك لها ] .

# ما هي أنواع الإطارات التي يمكن عملها بواسطة الفرونت بيج 2000 ؟
يوفر لك فرونت بيج 2000 عدة أشكال جاهزة للفريمات ، يمكنك استخدام ما تريد منها .
ويمكنك مشاهدة هذه الأشكال كالتالي :
1- من قائمة File اختر New ثم Page .
2- سيفتح مربع حوار ، اختر من الأعلى Frames .
 

3- ستظهر لك عدة أشكال للفريمات ، يمكنك معاينتها في القسم الأيمن السفلي من مربع الحوار بالتأشير على ما تريد ، وبعد الاختيار اضغط OK .
وإليك المثال التالي :

- إذا أردت أن تنشيء صفحة جديدة في أي إطار اضغط NewPage .
- أما إذا كانت لديك صفحة جاهزة وتريد ظهورها في أحد هذه الإطارات فاضغط Set initial Page .

** بعد ذلك قم بتحديد خصائص كل إطار على حده كالتالي :
أ-اضغط بيمين الفأرة على الإطار الذي تريد تحديد خصائصه .
ب- من القائمة اختر Frame Properties .
ج- سيظهر لك مربع خصائص هذا الفريم كالتالي :

1- اسم هذا الفريم .
2- عنوان الصفحة التي ستدرجها في هذا الفريم .
3- عرض هذا الفريم .

** ملاحظة : لكي لا يتشوه شكل الإطارات باختلاف دقة العرض اتبع التالي :
كما في الشكل السابق هناك اطاران فقط ، أيمن وأيسر . إذا كانت القائمة في اليسار والصفحة الرئيسية في اليمين فسنقوم بتحديد عرض إطار القائمة بالبكسل ، ونترك الآخر يتغير تلقائياً حسب دقة العرض للمتصفح .

- مثلاً : نجعل عرض القائمة 150 بكسل ، وعرض إطار الصفحة الرئيسية نتركه 1 Relative .
4- ارتفاع الإطار ، وهذا لن تحتاجه إلا إذا استخدمت إطارات في الأعلى أو في الأسفل .
5- قم بإزالة الإشارة من مربع التدقيق إذا كنت لا تريد لمن يتصفح موقعك أن يغير مقاسات الإطارات .
6- اضغط هذا الزر واجعل قيمة Frame Spacing صفراً ، لإخفاء حدود كل الإطارات .
7- هذا الخيار خاص بأشرطة التمرير الرأسية والأفقية حيث أن :

- If Needed : ظهور الشريط عند الحاجة له .
- Always : ظهوره باستمرار .
- Never : عدم ظهوره نهائياً .

[ وبنفس الطريقة يمكنك تحديد خصائص الفريم الآخر ] .

## كيفية وضع الارتباطات في الصفحات التي تستخدم الإطارات ( الفريمات ) :

عند استخدامك لطريقة الإطارات يجب عليك تحديد الإطار ( الفريم ) الذي ستفتح فيه الصفحة عند ضغط ارتباط ما ، وذلك كالتالي :
 1- أشر علة العبارة أو الصورة التي تريدها أن تكون ارتباط .
2- افتح نافذة Create Hyberlink .
3- اكتب الارتباط الذي تريده في خانة URL .
 


4- اضغط على على زر Target Frame ، سيظهر لك الشكل التالي :
 

** يمكنك اختيار مكان فتح الصفحة من الخانة (1) بالتأشير بالفأرة . أو من اختيار العبارة المناسبة من الخانة (2) ، حيث :

Page Default [main : لفتح الصفحة في الإطار الافتراضي المسمى main .
Same Frame : فتح في نفس الإطار .
Whole Page ,Parent Frame : فتح في إطار كامل ( صفحة كاملة ) .
New Window : فتح في نافذة جديدة ، بحيث تبقى الصفحة الأولى مفتوحة .
5- وأخيراً اضغط OK .

 

 

 

الدرس السابع  النماذج

 

أولاً : ماهي النماذج ؟ وما هي فائدتها ؟

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

ثانياً : معلومات حول النموذج :

 -يبدأ النموذج بوسم <FORM> وينتهي بوسم </FORM> .

- يقوم بإدارة النموذج نيابة عنك برنامج مكتوب بإحدى لغات الإنترنت مثل perl ، php ، asp .

- لكي يعمل النموذج في موقعك يجب أن يعمل البرنامج الذي تربط به هذا النموذج بشكل سليم . وهذا يتطلب أن يدعم السيرفر المستضيف لموقعك تشغيل هذا البرنامج .

- قبل البدء في إنشاء نموذج في موقعك يجب أن يكون لديك معرفة ولو بسيطة بطريقة تركيب هذه البرامج ، والتي سنذكر في هذا الدرس مثال على تركيب أحدها وهو برنامج سي جي آي " Cgi " .

ثالثاً : التعريف بالحقول والاختيارات المستخدمة في النماذج :

 لإدراج نموذج في صفحتك بما يحتويه من خانات ، اذهب إلى قائمة Insert ثم أشر على Form ، ستفتح لك قائمة بها ما يلي :
 

الأمـــر

الشــــــرح
Form يدرج منطقة نموذج في الصفحة تحتوي فقط على زرين ، أحدهما للارسال ( Submit ) والآخر للمسح ( Reset ) .
On-Line Text Box يدرج مربع نص بسطر واحد .
Scrolling Text Box يدرج مربع نص متعدد الأسطر ، به شريط تمرير .
Check Box يدرج مربع تدقيق يمكن للزائر اختيار أكثر من واحد منها .
Radio Button يدرج زر اختيار ، بحيث لا يستطيع الزائر أن يختار منها إلا واحد فقط .
Drop-Down Menu لإدراج قائمة منسدلة للأسفل ، وهي مناسبة للاختيارات الكثيرة .
Push Button لإدراج الأزرار ... لا تحتاجه فالأزرار ستدرج تلقائياً مع الفورم الفارغ .
Picture يدرج صورة يمكنك استخدامها بدل الزر .


رابعاً : مثال لإنشاء فورم بريدي في موقعك :

** ماذا نعني بالفورم البريدي ؟
الفورم البريدي هو نموذج يستطيع الزائر من خلاله أن يرسل لك رسالة لبريدك مباشرة من موقعك دون الحاجة لاستخدام بريده للارسال ... وهو كما تلاحظ يسهل على الزائر عملية الارسال ويشجعه عليها .

## والآن لنبدأ معاً إنشاء هذا الفورم خطوة خطوة :
من خلال هذا الفورم يستطيع الزائر أن :
- يرسل لك اسمه الحقيقي أو المستعار .
- يدرج بريده الإلكتروني للتمكن من الرد عليه .
- يحدد عنوان لرسالته .
- يكتب رسالة لك كما يريد .

* الخطـــــــــــوات :
1- افتح قائمة Insert وأشر على Form ستفتح قائمة ، اختر منها Form .
كما تلاحظ تم إدراج مستطيل بحد أسود متقطع به زران ، أحدهما Submit للارسال والآخر Reset للمسح والكتابة من جديد .هذا هو الفورم ولكنه لا يزال فارغ .

* لتغيير Submit و Reset إلى ارسال ومسح على التوالي ، انقر نقرة مزدوجة على زر Submit واستبدل هذه الكلمة بـ ارسال ، وبنفس الطريقة غير Reset إلى مسح .
2- اترك المؤشر داخل الفورم وادرج جدول بأربعة صفوف وعمودين .

3- اكتب في العمود الأيمن بالترتيب من أعلى لأسفل :
- الاســــم :
- عنوان بريدك الإلكتروني :
- عنوان رسالتك :
- اكتب رسالتك :

4- في الخلية الأولى من العمود الأيسر أدرج مربع نص وحيد السطر كالتالي :
Insert>Form>On-Line Text Box

ثم انقر عليه نقرة مزدوجة ، وفي خانة Name اكتب name ثم اضغط OK .

5- في الخلية الثانية كما في الخلية الأولى مع تغيير الاسم في خانة Name إلى email .

6- في الخلية الثالثة أضف قائمة منسدلة بها عدة خيارات لعنوان الرسالة وذلك كالتالي :
Insert>Form>Drop-Down Menu
ثم انقر عليه نقرة مزدوجة وفي خانة Name اكتب subject ، وقبل أن تضغط OK حدد خيارات العنوان كالتالي :
أ- اضغط على زر Add وفي خانة Choice اكتب " اختر عنوان لرسالتك " ثم اضغط OK .
ب- مرة أخرى اضغط Add واكتب في خانة Choice شكر وتهنئة ثم اضغط OK .
ج- وبنفس الطريقة أضف جميع العناوين التي تريدها ، ثم اضغط OK لإغلاق مربع حوار Drop-Down Menu Properties .

7- في الخلية الرابعة أضف مربع نص نتعدد الأسطر كالتالي :
Insert>Form>Scrolling Text Box
ثم انقر عليه نقرة مزدوجة وفي خانة Name اكتب massage ثم اضغط Ok .

خامساً : تطوير أداء هذا النموذج ( الفورم البريدي ) :

 ** سنشرح هنا كيف نخصص صفحة شكر لمن يرسل بريد و صفحة خطأ لمن يترك خانات مطلوبة وذلك كالتالي :
أ- صمم صفحة شكر وليكن اسمها thanks.htm وأخرى خطأ وليكن اسمها error.htm بواسطة الفرونت بيج واكتب فيها ما تريد من عبارات وارسلها لموقعك في الشبكة .
ب- ضع الكود الخاص بكل من صفحة الشكر والخطأ والذي ستدرج فيه عنوان الصفحتين في موقعك في الشبكة وذلك بواسطة الفرونت بيج كالتالي :
1- إضافة صفحة الشكر thanks.htm :
- ضع المؤشر داخل الفورم واضغط بيمين الفأرة واختر Form Properties .
- اضغط على زر Advanced في الأسفل سيفتح لك مربع جديد .
- اضغط على زر Add واكتب redirect في خانة Name ، ثم اكتب في خانة Value عنوان صفحة الشكر في موقعك مثل http://www.albaheth.net/thanks.htm واضغط OK .

2- إضافة صفحة الخطأ error.htm :
بنفس الطريقة السابقة اضغط Add واكتب missing_fields_redirect في خانة Name ، ثم اكتب عنوان صفحة الخطأ في موقعك كالسابق .

* ولكي تظهر رسالة الخطأ عند ترك الخانات الضرورية قم بالآتي :
- ضع المؤشر داخل الفورم واضغط بيمين الفأرة واختر Form Properties .
- اضغط على زر Advanced في الأسفل سيفتح لك مربع جديد .
- اضغط على زر Add واكتب required في خانة Name ، ثم اكتب في خانة Value أسماء الخانات التي ترى ضرورة ملأها مفصولة بفاصلة مثل name,email ثم اضغط OK ثلاث مرات .

سادساً : تحويل الرسائل على بريدك الخاص وربط الفورم البريدي بالبرنامج:

 أ- يجب كتابة عنوان البريد الذي تريد أن تستقبل عليه الرسائل وذلك باتباع التالي :
- ضع المؤشر داخل الفورم واضغط بيمين الفأرة واختر Form Properties .
- اضغط على زر Advanced في الأسفل سيفتح لك مربع جديد .
- اضغط على زر Add واكتب recipient في خانة Name ، ثم اكتب في خانة Value عنوان البريد الإلكتروني مثل albaheth@albaheth.net ثم اضغط OK ثلاث مرات .

ب- يجب أن تربط هذا الفورم ببرنامج كما ذكرنا في " ثانياً " والبرنامج الذي سنستخدمه هنا اسمه FormMail.cgi وسنضعه داخل مجلد cgi-bin في الموقع في الشبكة ، وسنقوم بعملية الربط كالتالي :
- ضع المؤشر داخل الفورم واضغط بيمين الفأرة واختر Form Properties .
- أشر على مربع الاختيار Send to other وتأكد من اختيار الخيار الأول في القائمة المنسدلة بجانبه .
- اضغط على زر Options في الأسفل سيفتح مربع جديد .
- اكتب في خانة Action عنوان البرنامج في موقعك مثل http://www.albaheth.net/cgi-bin/FormMail.cgi ثم اضغط OK مرتين .

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

 

 

 

الدرس الثامن  معلومات مهمة عن الفرونت بيج
 

## تغيير ترميز الصفحة إلى العربية :

يجب تغيير ترميز صفحة الويب إلى العربية حتى لا تواجه مشاكل أثناء تصميمها ولكي تسهل محركات البحث في العثور عليها عند البحث عن المواقع العربية .... وذلك كالتالي :

 1- افتح صفحة جديدة .
2- اضغط بيمين الفأرة في أي مكان في الصفحة واختر Page Properties من القائمة .
3- من الأعلى اضغط على علامة التبويب Language .
4- اجعل الخيار الأول على العربية + اسم دولتك .
5- اجعل الخيار الثاني والثالث Arabic .
6- اضغط OK ثم ابدأ العمل في الصفحة .
 

## كيفية جعل الصفحة منسقة عند كتابة نص عربي أو نص مختلط ( عربي - انجليزي ) :

يفترض الفرونت بيج 2000 أي صفحة جديدة تقوم بفتحها أنها مناسبة للنص المكتوب من اليسار لليمين "Lift To Right" والنص العربي كما تعلم من اليمين لليسار .. لذا يجب علينا تحويل اتجاه النص إلى "Right To Lift" وذلك بأحد الخيارات التالية :

 1- تغيير وسم بداية الصفحة من <html> إلى <html dir=rtl> . وذلك من قسم HTML في أسفل الفرونت بيج 2000 كما ذكرنا في الدرس الأول .
2- أو تغيير وسم بداية منطقة الجسم من <body> إلى <body dir=rtl> .

* ملاحظة : [ في الخيارين السابقين ستلاحظ انتقال شريط التمرير الرأسي من اليمين إلى اليسار عند معاينة الصفحة في الفرونت بيج أو في المتصفح ] .

3- أو باستخدام الجداول لتنظيم الصفحة ، حيث يمكنك تغيير اتجاه النص إلى العربية في النص المكتوب داخل الجدول فقط ، وذلك بتغيير وسم بداية الجدول من <table> إلى <table dir=rtl> .

4- أو تغيير خلية واحدة فقط من خلايا الجدول ، وذلك بتغيير وسم بداية الخلية من <td> إلى <td dir=rtl> . وهذا سيفيدك إذا كان اتجاه النص لكامل الصفحة من اليمين لليسار وتريد أن تضع نص انجليزي في أحد خلايا الجدول وجعله أكثر تنظيماً ، حيث أن كل ما عليك هو جعل وسم بداية الخلية <td dir=ltr> .

5- أو تغيير اتجاه النص لمقطع أو فقرة محددة وذلك بتغيير وسم بداية الفقرة من <p> إلى <p dir=rtl> ، وهو سيفيدك في تنسيق نص من اليسار لليمين السابق ذكره مثل النص الانجليزي بحيث يصبح وسم بداية النص الانجليزي في صفحة عربية هو <p dir=ltr> وليس <p dir=rtl> .

*** ملاحظـــــة : [ تذكر دائماً المسافة قبل كتابة dir ] .
 

## ضبط نص كما في ميكروسوفت وورد :

لضبط نهاية جميع أسطر نص معين مكتوب في فقرة واحدة ، غيّر وسم بداية الفقرة من <p> إلى أحد الأوامر التالية :
 

1- <P dir="rtl" style="TEXT-ALIGN: justify"> .
 2- <P dir="rtl" style=" TEXT-ALIGN: justify; TEXT-JUSTIFY: inter-word"> .
 3- <P dir="rtl" style=" TEXT-ALIGN: justify; TEXT-JUSTIFY: newspaper"> . 
4- <P dir="rtl" style=" TEXT-ALIGN: justify; TEXT-JUSTIFY: kashida"> .
 

## طريقة وضع عدة ارتباطات في صورة واحدة بواسطة الفرونت بيج 2000 :

1- أدرج الصورة في الصفحة .
2- أشر على الصورة بالفأرة ... سيظهر في الأسفل شريط أدوات الصورة .
3- ستجد في الشريط ثلاثة أشكال هي اضغط ما تريد منها واصنع شكل حول أي جزء من الصورة تريده أن يصبح ارتباط .
4- بعد أن تكمل وضع الشكل في الصورة سيفتح مربع حوار وضع الارتباط Create Hyberlink ، ضع الارتباط الذي تريد واضغط OK .
 

نهاية دروس الفرونت بيج .... نرجوا أن تكونوا قد استفدتم ... بالتوفيق للجميع ،،

أرجع إلى الصفحة الرئيسية اتصل بنا