خمسة دروس فى الفرونت بيج

خطوات سهله مهمه وتعليم لكل مبتديء ببرنامج الفرونت بيج نقدمها لكم في دروس مبسطه ونصائح قيمه من شبكة كوكتيل لكل من يرغب فعلا بدراسة هذا البرنامج المتميز ونتمنى لكم الفائده انشاءالله
أولا يمكنك تحميل برنامج الفرونت بيج من هنا : برنامج الفرونت بيج لتصميم الصفحات,تحميل , مشاكل وحلول تصميم المواقع والفرونت بيج من هنا
سيتم شرح التالي على 5 خطوات:
تعرف على محتويات فرونت بيج
انشيء المجلد الخاص بموقعك
أدرج الصفحات ونسق النصوص
أدرج الصور والارتباطات والخلفيات
كيف تدرج ارتباط لصفحه أخرى؟
كيف تدرج صوره؟
كيف تدرج خلفيه؟
كيف تدرج خلفيه صوتيه؟
كيف تدرج جدول؟
كيف تدرج شريط متحرك? >> Marquee
كيف تنشر موقعك؟









منقوووووووووووووووووووووووووووووووووووول لكم بواسطتى

مقــــدمــه
التعرّف على محتويات برنامج فرونت بيج
مرحبا بك , يمكنك انشاء موقعك ونشره على النت بكل سهوله فالامر ليس معقدا كما يبدو للبعض ونحن هنا سنقوم بمساعدتك لانشاء موقع الذي طالما حلمت به.
وبالطبع ففي بداية الأمر يتوجب أن تكون على استعداد تام و رغبه حقيقيه في عمل الموقع الذي تريد فمتى توفرت الرغبه والعزيمه فتأكد بأنك قادر على تصميم موقع جدير بالاهتمام والمتابعه وشيئا فشيئا وبممارسة تطوير الموقع ستجد أن لديك موقعا خياليا.
فلاتنسى أن مشوار الألف ميل يبدأ من الصفر.
لتصميم موقع فانك تحتاج الى برنامج تقوم فيه بتصميم صفحات موقعك ونحن ننصحك ببرنامج فرونت بيج فهو البرنامج الوحيد الذي يمكنك انشاء صفحات موقعك وتصميمها بكل بساطه لتبدو لك بالمتصفح كما صممتها تماما.بالاضافه الى أنه عملي وسهل لمن ليست لهم خبره بالتصميم أو يصعب عليهم التعامل مع اللغة الشهيره الــhtml.
سنعرفك في البدايه على محتويات برنامج فرونت بيج كي نسهل عليك طريقة بدء العمل. أنظر الشكل2-1.

2-1
هيـــا الى الـــعمـــل !!
* لنبدأ العمل الآن بأول خطوه وهي انشاء الملف الذي سيتضمن جميع صفحات موقعك ومايختص به
1- اولا قم بتشغيل برنامج فرونت بيج
2- من القائمه الرئيسيه اخترfile>New>Web أو بالعربيه اختر ملف < جديد
يعرض لك الان فرونت بيج مربع
قم باختيارone page web أو (بالعربيه) اختر : موقع ويب ذو صفحة واحدة
بعد ذلك احذف النص المكتوب في الفراغ تحت
specify the location of the new web او بالعربية : حدد موضع موقع ويب الجديد
وادخل مايليC:/My Webs/Cocktail
أو قم باستبدالCocktail بالاسم الذي ترغب أن يكون اسم موقعك
بعد ذلك اضغطOk. انظر الشكل 2-2.

2-2
* ملاحظه لقد قمنا بادخالCocktail كمثال
ويمكنك ادخال بديل له كاسم موقعك الذي تريد انشاءه.
بهذا تكون قد أنشأت ملفا خاصا بصفحات موقعك سيتضمن بعد ذلك جميع الملفات والصور التي تخص موقعك. هيا بنا الآن الى الدرس الثاني من الفرونت بيج .

الــدرس الثاني في دروس الفرونت بيج
ادراج الصفحات والنصوص
الآن وبعد أن أنشأنا ملفا خاصا للموقع ستتعلّم كيفية ادراج الصفحات وحفظها وتسجيلها لتنضم لباقي ملفات موقعك.
1- من القائمةFileاخترNew>Page
او بالعربيه اختر : جديد , ثم من القائمه اختر : صفحة فارغه
2- الان من أعلى القائمة اختر Save لحفظ أو تسجيل الصفحه
فيعرض لك فرونت بيج لوحه
ستجد فراغا مكتوبا أمامهFile name . قم بحذف new_page_3مثلا وادخل على سبيل المثالmypage
أو اسم الصفحه التي تريد حفظها
مع ملاحظه ان الصفحه الرئيسيه للموقع يجب أن تكون باسم
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من القائمه نفسها.

الــدرس الثالث في دروس الفرونت بيج

ادراج الصور والارتباطات والخلفيات
* ستتعلم بهذا الدرس كيفية وضع الصور والارتباطات لمواقع أخرى أو لصفحات موقعك, أيضا ستقوم بوضع صور الخلفيات لصفحاتك والتي ستزيد من جمال الصفحه. لنبدأ بالخطوه الأولى وهي وضع الارتباط أو مايسمى بــLink.
كيف تدرج ارتباط تشعبي لصفحه أخرى
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أوخصائص الصورة.

4- يعرض لك فرونت بيج الآن مربع .اختر عام من التبويب بالاعلى, لاحظ بأن عنوان الصوره هو تحت مسمىPicture source.أو الصورة
انظر الشكل2-10.
**وهذا يعني انه بامكانك تعديل عنوان هذه الصوره اذا كنت تريد استبدال عنوانها بآخر من الوب مباشره فقم بتغييره من هذا الخيار**
وقم بالضغط علىBrowse أو استعراضاذا كنت ترغب في اختيار صوره أخرى .

2-10
4- ولاضافة تأثير للصوره أي بمجرد الاشاره عليها بالماوس سيظهر وصف لها أو تعليق. فقم بكتابة ذلك امام مايسمى بــ Text أو النص.
5- لاضافة رابطه من هذه الصوره لموقع وب او صفحه أخرى أدخل عنوان الموقع أمام مايسمى بـLocation أو الموقع. أو قم باختيار صفحه من صفحات موقعك لربطها من خلال النقر على الزر الموجود أمام هذا الفراغ مباشره وهو Browse أو استعراض. سيعرض لك مربع ملفات أختر منه الصفحه التي تود ربطها. وقد قمنا بكتابة عنوان موقع شبكة كوكتيل كمثال.
http://www.coctail.net
6- في الخيار الذي يليه ستجد مايسمى بـ Target Frame أو الاطار الهدف وأمامه رمز يشبه صورة القلم. هذه الخاصيه تمكن الارتباط لعنوان الموقع الذي وضعته على الصوره من أن يظهر في صفحه جديده تفتح غير الصفحه الرئيسيه التي عليها الصوره ولاختيار هذه الخاصيه اضغط على الرمز الموجود أمامTarget Frame أو الاطار الهدف ومن القائمه اخترNewWindow أو اطار جديد.
كما هو موضح لك بالشكل 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 الموجود بأول فراغ سيكون ظاهرا بالشريط العلوي للمتصفح عند عرض موقعك بمتصفحك. لذلك تمكنك هذه الخاصيه من وضع تعليق مبسّط أو عباره مجمله تصف موقعك أو صفحتك.

الــدرس الرابع في دروس الفرونت بيج
ادراج الجداول وكيفية التعامل معها
الجدول يقوم بترتيب العناصر بصفحتك ويجعلها اكثر تنظيما وجمالا.ستتعلّم الان كيف تنشي جدول تضع به الصور والنصوص.
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. أو ادراج صفوف.
** ولالغاء أو مسح بعض الخلايا قم بتحديد الخليه بالكامل ومن خلال النقر بالزر الأيمن للماوس اختر من القائمهDelete Cells أو حذف صفوف مع ملاحظه انه يجب عليك تحديد خليتين على الأقل لتتمكن من حذفها
ادراج صوره داخل الجدول
1- لادراج صوره داخل الجدول انقر بأي خليه داخل الجدول.
2- من القائمه الرئيسيه للبرنامج اخترInsert>Picture>From File. أو ادراج < صورة < من ملف اتبع الطريقه المختصره لانزال صوره. انظر الشكل 2-15.

2-15
كيف تدرج شريط متحرّك
1- ستضيف الان لصفحتك نص متحرك وهو يعطي شكل رائع ودعايه للفت انتباه الزوار. من القائمه الرئيسيه أختر Insert>Component>Marquee. أو ادراج < web component < شاشه إسميه < انهاء
2- فيعرض لك فرونت بيج مربع اكتب في المربع الفارغ نصك..كتبنا هنا مثلا شبكة كوكتيل.انظر الشكل 2-16.

2-16
3- لديك ثلاث خيارات بالاسفل :
scroll أو مرور
يجعل النص يسير من اليمين لليسار أو العكس.
slide أو انزلاق
يجعل النص يتحرك ومن ثم يقف فجأه.
اماalternate أو تبديل
يجعل النص يتجول بالصفحه كهذا المثال التالي..


4- لتغيير خصائص هذا النص وتغيير خلفيته اضغط باليمين عليه واختر
منالقائمهmarquee properties أو خصائص لشاشه الاسميه.

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

عرض موقعك ونشره على الوب
**بعد تصميم موقعك بالكامل والتأكد من عمل جميع الوصلات أو الروابط بصفحات الموقع فان الخطوه الأخيره تكمن في عرض هذه الصفحات ومشاهدتها في شكلها النهائي
ملاحظه:لكى ترى الشكل النهائي لصفحاتك بصوره صحيحه
Preview in Browser ولتتمكن من رؤيته بمتصفحك اختر
وهو يحمل هذا الرمز بأعلى شريط الأدوات.
** ان المهمه لاتنتهي عند تصميم صفحاتك ولكن عليك نشرها على الوب حتي يتمكن الجميع من مشاهدتها.
ويوجد الكثير من المواقع التي تعطيك صفحات مجانيه وبلا مقابل , ايضا يوجد العديد من المواقع العربيه والأجنبيه المتخصصه باستضافه المواقع بمبلغ سنوي أو شهري , وتتوفر حاليا هذه الخدمه بموقع شبكة كوكتيل اضغط هنا لمعرفة اسعار حجز موقع لدينا.
كلـــمــــه أخيـــــــرة

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

يمكنك تحميل برنامج الفرونت بيج من هنا : برنامج الفرونت بيج لتصميم الصفحات,تحميل , مشاكل وحلول تصميم المواقع والفرونت بيج من هنا

COCTAIL DESIGN

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