هيـــا الى الـــعمـــل !!
* لنبدأ العمل الآن بأول خطوه وهي انشاء الملف الذي سيتضمن جميع صفحات موقعك ومايختص به
1- اولا قم بتشغيل برنامج فرونت بيج
2- من القائمه الرئيسيه اختر file>New>Web
يعرض لك الان فرونت بيج مربع
قم باختيار one page web
بعد ذلك احذف النص المكتوب في الفراغ تحت
specify the location of the new web
وادخل مايلي C:/My Webs/Cocktail
أو قم باستبدال Cocktail بالاسم الذي ترغب أن يكون اسم موقعك
بعد ذلك اضغط Ok. انظر الشكل 2-2.
ادراج الصفحات والنصوص
الآن وبعد أن أنشأنا ملفا خاصا للموقع ستتعلّم كيفية ادراج الصفحات وحفظها وتسجيلها لتنضم لباقي ملفات موقعك.
1- من القائمة File اختر New>Page
يعرض لك فرونت بيج لوحه
الآن من التبويب General
قم باختيار Normal page .
كما هو موضح بالشكل 2-3
واضغط Ok .
2-3
2- من أعلى القائمة اختر Save لحفظ أو تسجيل الصفحه
فيعرض لك فرونت بيج لوحه
ستجد فراغا مكتوبا أمامه File name . قم بحذف new_page_1 وادخل على سبيل المثال Index
أو اسم الصفحه التي تريد حفظها
مع ملاحظه ان الصفحه الرئيسيه للموقع يجب أن تكون باسم
Index
بعد ذلك اضغط save لحفظ الصفحه بالملف الخاص لموقعك.
انظر الشكل 2-4.
2-4
___________________________
النــص وخصائصه
3- ستتعلم في هذه الخطوه كيفية ادراج النص وتغيير ألوانه وخصائصه.
4- في البدايه قم بكتابة نصك وليكن كوكب كوكتيل على سبيل المثال :)
5- حدد كل النص بالماوس أو بضغط Shift مع الضغط على السهم الأيمن بلوحه المفاتيح حتى تحدد النص كلية .
6-اختر الآن نوع الخط من القائمه المنسدله بالأعلى والتي موضحه بالشكل 2-5 وحدد حجمه ولونه وخصائصه كما هو موضح بالشكل التالي. أو اضغط هنا لتشاهد توضيح أكبر للنموذج.
2-5
* ملاحظه: يمكنك اللجوء لطريقه أسهل وذلك باتباع الخطوات التاليه
1- حدد النص ومن ثم انقر عليه بالزر الأيمن للماوس فتظهر لك قائمه
. أختر منها Font ومن ثم حدد لون النص وحجمه ونوع الخط من المربع الذي سيظهر لك كما هو موضّح بالشكل 2-6.
2-6
2- يمكنك اضافة العديد من الخصائص على النص من خلال هذا المربع الذي أمامك فلتغيير لون النص افتح القائمه المنسدله Color والتي تعرض لك العديد من الألوان المختلفه.اختر منها ماتشاء من ألوان.
3- ولجعل النص عريضا اختر Bold تحت قائمة Font style.
ويمكنك استعمال خاصيه تعريض الخط هذه من شريط الأدوات الموجود بأعلى قائمة البرنامج.
4- لجعل النص مائلا اختر Italic من القائمه نفسها.
كيف تدرج ارتباط تشعبي لصفحه أخرى
1- اكتب النص الذي تريد ان تضع له ارتباط من موقعك. سنضع على سبيل المثال كوكب كوكتيل.
2- لوضع الارتباط حدد كامل النص بالماوس ومن ثم اضغط على النص بالزر الأيمن للماوس فتظهر لك قائمه اختر منها Hyperlink. انظر الشكل2-7.
2-7
* ملاحظه: لطريقه مختصره اضغظ من لوحة المفاتيح المفتاحين CTRL+K . ويمكنك مشاهدة نموذج التعرف على محتويات الفرونت بيج بالدرس الأول والذي يوضح لك بالشكل طريقه أكثر اختصارا لادراج ارتباط .
3- يعرض لك فرونت بيج الآن مربع حواري.
4- اذا كنت تود انشاء ارتباط لصفحه أخرى سبق وأن أنشأتها وتريد وضع ارتباط لها بموقعك فقم باختيار الصفحه الذي تريد ربطها من مجموعه الملفات المعروضه في هذا المربع. أما اذا أردت الربط بصفحه خارجيه من الويب. كوكب كوكتيل على سبيل المثال, فضع عنوان الموقع في الفراغ المخصص لوضع الرابطه واضغط OK. انظر الشكل 2-8.
2-8
* لاحظ بأن كلمة كوكب كوكتيل قد أصبحت مسطّره الآن وهذا يعني انها مرتبطه بالموقع وستنقلك الى هذا الموقع مباشره بمجرّد الضغط عليها بالمتصفح وستبدو لك على هذا النحو:
كوكب كوكتيل
___________________________
كيف تدرج صوره
بعد أن تعلمنا كيفية ادراج ارتباط سننتقل الآن الى الخطوه التي تليها وهي ادراج الصور.
1- حدد الموضع الذي تريد وضع الصوره به ثم من أعلى القائمه الرئيسيه اختر Insert>Picture>From File. أو اتبع الطريقه السهله بالضغط على رمز الصوره من أعلى القائمه.راجع الدرس الأول ونموذج التعرف على محتويات برنامج الفرونت بيج.
خصائص الصوره
2- قم بتحديد الصوره الآن بعد أن قمت بادراجها ومن ثم انقر عليها بالزر الأيمن للماوس لاضافة بعض الخصائص والارتباطات لها.
3- اختر من القائمه التي ظهرت لك Picture Properties كما هو موضح بالشكل2-9.
2-9
4- يعرض لك فرونت بيج الآن مربع . لاحظ بأن عنوان الصوره هو تحت مسمى Picture source. انظر الشكل 2-10.
** وهذا يعني انه بامكانك تعديل عنوان هذه الصوره اذا كنت تريد استبدال عنوانها بآخر من الوب مباشره فقم بتغييره من هذا الخيار**
وقم بالضغط على Browse اذا كنت ترغب في اختيار صوره أخرى .
2-10
4- ولاضافة تأثير للصوره أي بمجرد الاشاره عليها بالماوس سيظهر وصف لها أو تعليق. فقم بكتابة ذلك امام مايسمى بــ Text. مثال: كوكب كوكتيل المتعه والفائده مع ريما وفوفو.
5- لاضافة رابطه من هذه الصوره لموقع وب او صفحه أخرى أدخل عنوان الموقع أمام مايسمى بـ Location. أو قم باختيار صفحه من صفحات موقعك لربطها من خلال النقر على الزر الموجود أمام هذا الفراغ مباشره وهو Browse. سيعرض لك مربع ملفات أختر منه الصفحه التي تود ربطها. وقد قمنا بكتابة العنوان القديم لموقع كوكب كوكتيل كمثال.
http://www.cocktail.u4l.com
6- في الخيار الذي يليه ستجد مايسمى بـ Target Frame وأمامه رمز يشبه صورة القلم. هذه الخاصيه تمكن الارتباط لعنوان الموقع الذي وضعته على الصوره من أن يظهر في صفحه جديده تفتح غير الصفحه الرئيسيه التي عليها الصوره ولاختيار هذه الخاصيه اضغط على الرمز الموجود أمام Target Frame ومن القائمه اختر New Window.
كما هو موضح لك بالشكل 2-10.
___________________________
كيف تدرج خلفيه
1- من القائمه الرئيسيه اختر Format>Background.
2- سيظهر لك مربع حواري.
3- في لسان التبويب Background . ستجد مستطيلا فارغا أمامه Browse. اضغط Browse واختر من القائمه التي ستظهر لك بالمربع ملف صورة الخلفيه التي تود وضعها بصفحتك.انظر الشكل 2-11
2-11
* ملاحظه: يمكنك أيضا من خلال هذه الخطوه وبهذا المربع الذي أمامك تغيير لون خلفيتك حتى ولو كانت خلفيتك عباره عن صوره فانه من الضروري تحديد لون يتناسب ولون خلفيتك كي تظهر بالمتصفح بمظهر متناسق جميل. وبالاضافه الى ذلك فان هذا المربع يمكنك من تغيير ألوان الروابط الأساسيه والروابط المزاره والنشطه كما تشاء من خلال قوائم الألوان التاليه والموجوده بنفس هذا المربع الموضح بالشكل 2-11. وهي :
Hyperlink
Visited hyperlink
Active hyperlink
___________________________
ادراج خلفيه صوتيه
1- لوضع خلفيه صوتيه أو موسيقى ترافق الصفحه, أختر التبويب General من أعلى المربع السابق نفسه.
2- ستجد فراغا امامه background sound
3- اضغط browse واختر الخلفيه الصوتيه من القائمه المعروضه لديك. انظر الشكل 2-12
2-12
* ملاحظه : لاحظ بأن نص كوكب كوكتيل الموجود بأول فراغ سيكون ظاهرا بالشريط العلوي للمتصفح عند عرض موقعك بمتصفحك. لذلك تمكنك هذه الخاصيه من وضع تعليق مبسّط أو عباره مجمله تصف موقعك أو صفحتك.
الجدول يقوم بترتيب العناصر بصفحتك ويجعلها اكثر تنظيما وجمالا.ستتعلّم الان كيف تنشي جدول تضع به الصور والنصوص.
1- باعلى القائمه الرئيسيه اختر Table>Insert>Table ويمكنك استعمال الطريقه السريعه بالضغط على صورة الجدول باعلى شريط الأدوات .انظر الشكل 2-13
2- يعرض لك مربع ادراج جدول . قم بتحديد الخيارات التي تريدها ثم اضغط ok.
2-13
___________________________
لتعديل خصائص الجدول
3- لتغيير لون اطارات الجدول وتوسيطه وتحديد خلفيته ايضا أنقر باليمين بأي فراغ داخل الجدول
تظهر لك قائمه اختر منها table properties.
4- يظهر لك مربع قم باختيار خصائص الجدول منه .كما هو موضح بالشكل 2-14.
2-14
5- حدد لون خلفية الجدول من خلال القائمه المنسدله أمام Background Color وعلى سبيل المثال فقد اخترنا هنا اللون الأسود كخلفيه.وأما لون الاطارات فيمكنك تغييرها من القوائم الثلاث التي تعلو خيار لون الخلفيه. وقد قمنا باختيار اللون الأزرق والبنفسجي لاطارات الجدول. انظر النتيجه بالاسفل.
* ملاحظه: يمكنك اضافة صوره كخلفيه للجدول وذلك بالنقر على Browse كما هو موضح بالشكل السابق 2-14.
** لزيادة عدد الخلايا بالجدول انقر بالزر الايمن للماوس بداخل الجدول واختر من القائمه Insert Row.**
___________________________
ادراج صوره داخل الجدول
1- لادراج صوره داخل الجدول انقر بأي خليه داخل الجدول.
2- من القائمه الرئيسيه للبرنامج اختر Insert>Picture>From File. أو اتبع الطريقه المختصره لانزال صوره. انظر الشكل 2-15.
2-15
3- ولالغاء أو مسح بعض الخلايا قم بتحديد الخليه بالكامل ومن خلال النقر بالزر الأيمن للماوس اختر من القائمه Delete Cells مع ملاحظه انه يجب عليك تحديد خليتين على الأقل لتتمكن من حذفها.انظر الشكل السابق 2-15.
___________________________
كيف تدرج شريط متحرّك
1- ستضيف الان لصفحتك نص متحرك وهو يعطي شكل رائع ودعايه للفت انتباه الزوار. من القائمه الرئيسيه أختر Insert>Component>Marquee.
2- فيعرض لك فرونت بيج مربع اكتب في المربع الفارغ نصك..كتبنا هنا مثلا كوكب كوكتيل.انظر الشكل 2-16.
2-16
3- لديك ثلاث خيارات بالاسفل :
scroll
يجعل النص يسير من اليمين لليسار أو العكس.
slide
يجعل النص يتحرك ومن ثم يقف فجأه.
اما alternate
يجعل النص يتجول بالصفحه كهذا المثال التالي..
كوكب كوكتيل
4- لتغيير خصائص هذا النص وتغيير خلفيته اضغط باليمين عليه واختر
من القائمه marquee properties .
ولتغيير نوع الخط اختر font .
عرض موقعك ونشره على الوب
** بعد تصميم موقعك بالكامل والتأكد من عمل جميع الوصلات أو الروابط بصفحات الموقع فان الخطوه الأخيره تكمن في عرض هذه الصفحات ومشاهدتها في شكلها النهائي
ملاحظه: لكى ترى الشكل النهائي لصفحاتك بصوره صحيحه اضغط على
Preview in Browser لتتمكن من رؤيته بمتصفحك اختر
وهو يحمل هذا الرمز بأعلى شريط الأدوات.
** ان المهمه لاتنتهي عند تصميم صفحاتك ولكن عليك نشرها على الوب حتي يتمكن الجميع من مشاهدتها.
ويوجد الكثير من المواقع التي تعطيك صفحات مجانيه وبلا مقابل , ايضا يوجد العديد من المواقع العربيه والأجنبيه المتخصصه باستضافه المواقع بمبلغ سنوي أو شهري.
___________________________
كلـــمــــه أخيـــــــرة
بهذا نكون قد انتيهنا من الدرس الخامس والأخير ونتمنى أن نكون قد وفقنا في شرح الدروس بالشكل المبسط واليسير ونرجو من كل شخص استفاد من هذه الصفحات أن يدعو لي بالتوفيق .
أخوكم الورناس
العرض العادي
