PDA

عرض كامل الموضوع : دروس فرونت بيج مهم جدا !!!


hanafi2005
11-03-2005, 11:19 AM
خطوات سهله مهمه لكل مبتديء ببرنامج الفرونت بيج نقدمها لكم بشرح مبسط ونصائح قيمه من شبكة كوكتيل لكل من يرغب فعلا بدراسة هذا البرنامج المتميز ونتمنى لكم الفائده انشاءالله
سيتم شرح التالي على 5 خطوات:

تعرف على محتويات فرونت بيج

انشيء المجلد الخاص بموقعك

أدرج الصفحات ونسق النصوص

أدرج الصور والارتباطات والخلفيات

كيف تدرج ارتباط لصفحه أخرى؟

كيف تدرج صوره؟

كيف تدرج خلفيه؟

كيف تدرج خلفيه صوتيه؟

كيف تدرج جدول؟

كيف تدرج شريط متحرك? >> Marquee

كيف تنشر موقعك؟


الدرس الأول

مقــــدمــه

التعرّف على محتويات برنامج فرونت بيج

مرحبا بك , يمكنك انشاء موقعك ونشره على النت بكل سهوله فالامر ليس معقدا كما يبدو للبعض ونحن هنا سنقوم بمساعدتك لانشاء موقع الذي طالما حلمت به.

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

فلاتنسى أن مشوار الألف ميل يبدأ من الصفر.

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

سنعرفك في البدايه على محتويات برنامج فرونت بيج كي نسهل عليك طريقة بدء العمل.

هيـــا الى الـــعمـــل !!

* لنبدأ العمل الآن بأول خطوه وهي انشاء الملف الذي سيتضمن جميع صفحات موقعك ومايختص به

1- اولا قم بتشغيل برنامج فرونت بيج

2- من القائمه الرئيسيه اختر file>New>Web

يعرض لك الان فرونت بيج مربع

قم باختيار one page web

بعد ذلك احذف النص المكتوب في الفراغ تحت

specify the location of the new web

وادخل مايلي C:/My Webs/Cocktail

أو قم باستبدال Cocktail بالاسم الذي ترغب أن يكون اسم موقعك

بعد ذلك اضغط Ok.


الدرس الثاني

ادراج الصفحات والنصوص

الآن وبعد أن أنشأنا ملفا خاصا للموقع ستتعلّم كيفية ادراج الصفحات وحفظها وتسجيلها لتنضم لباقي ملفات موقعك.

1- من القائمة File اختر New>Page

يعرض لك فرونت بيج لوحه

الآن من التبويب General

قم باختيار Normal page .

واضغط Ok .


2- من أعلى القائمة اختر Save لحفظ أو تسجيل الصفحه

فيعرض لك فرونت بيج لوحه

ستجد فراغا مكتوبا أمامه File name . قم بحذف new_page_1 وادخل على سبيل المثال Index

أو اسم الصفحه التي تريد حفظها

مع ملاحظه ان الصفحه الرئيسيه للموقع يجب أن تكون باسم

Index

بعد ذلك اضغط save لحفظ الصفحه بالملف الخاص لموقعك.



النــص وخصائصه

3- ستتعلم في هذه الخطوه كيفية ادراج النص وتغيير ألوانه وخصائصه.

4- في البدايه قم بكتابة نصك وليكن كوكب كوكتيل على سبيل المثال :)

5- حدد كل النص بالماوس أو بضغط Shift مع الضغط على السهم الأيمن بلوحه المفاتيح حتى تحدد النص كلية .

6-اختر الآن نوع الخط من القائمه المنسدله بالأعلى والتي موضحه بالشكل 2-5 وحدد حجمه ولونه وخصائصه كما هو موضح بالشكل التالي. أو اضغط هنا لتشاهد توضيح أكبر للنموذج.


* ملاحظه: يمكنك اللجوء لطريقه أسهل وذلك باتباع الخطوات التاليه

1- حدد النص ومن ثم انقر عليه بالزر الأيمن للماوس فتظهر لك قائمه

. أختر منها Font ومن ثم حدد لون النص وحجمه ونوع الخط في مربع


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

3- ولجعل النص عريضا اختر Bold تحت قائمة Font style.

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

4- لجعل النص مائلا اختر Italic من القائمه نفسها.



الــدرس الثالث

ادراج الصور والارتباطات والخلفيات

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

كيف تدرج ارتباط تشعبي لصفحه أخرى

1- اكتب النص الذي تريد ان تضع له ارتباط من موقعك. سنضع على سبيل المثال كوكب كوكتيل.

2- لوضع الارتباط حدد كامل النص بالماوس ومن ثم اضغط على النص بالزر الأيمن للماوس فتظهر لك قائمه اختر منها Hyperlink.




* ملاحظه: الطريقه مختصره اضغظ من لوحة المفاتيح المفتاحين CTRL+K . ويمكنك مشاهدة نموذج التعرف على محتويات الفرونت بيج بالدرس الأول والذي يوضح لك بالشكل طريقه أكثر اختصارا لادراج ارتباط .

3- يعرض لك فرونت بيج الآن مربع حواري.

4- اذا كنت تود انشاء ارتباط لصفحه أخرى سبق وأن أنشأتها وتريد وضع ارتباط لها بموقعك فقم باختيار الصفحه الذي تريد ربطها من مجموعه الملفات المعروضه في هذا المربع. أما اذا أردت الربط بصفحه خارجيه من الويب. كوكب كوكتيل على سبيل المثال, فضع عنوان الموقع في الفراغ المخصص لوضع الرابطه واضغط OK.


* لاحظ بأن كلمة كوكب كوكتيل قد أصبحت مسطّره الآن وهذا يعني انها مرتبطه بالموقع وستنقلك الى هذا الموقع مباشره بمجرّد الضغط عليها بالمتصفح وستبدو لك على هذا النحو:

كوكب كوكتيل

كيف تدرج صوره

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

1- حدد الموضع الذي تريد وضع الصوره به ثم من أعلى القائمه الرئيسيه اختر Insert>Picture>From File. أو اتبع الطريقه السهله بالضغط على رمز الصوره من أعلى القائمه.راجع الدرس الأول ونموذج التعرف على محتويات برنامج الفرونت بيج.

خصائص الصوره

2- قم بتحديد الصوره الآن بعد أن قمت بادراجها ومن ثم انقر عليها بالزر الأيمن للماوس لاضافة بعض الخصائص والارتباطات لها.

3- اختر من القائمه التي ظهرت لك Picture Propertie


4- يعرض لك فرونت بيج الآن مربع . لاحظ بأن عنوان الصوره هو تحت مسمى Picture source. انظر الشكل 2-10.

** وهذا يعني انه بامكانك تعديل عنوان هذه الصوره اذا كنت تريد استبدال عنوانها بآخر من الوب مباشره فقم بتغييره من هذا الخيار**

وقم بالضغط على Browse اذا كنت ترغب في اختيار صوره أخرى .



4- ولاضافة تأثير للصوره أي بمجرد الاشاره عليها بالماوس سيظهر وصف لها أو تعليق. فقم بكتابة ذلك امام مايسمى بــ Text.

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

http://www.cocktail.u4l.com

6- في الخيار الذي يليه ستجد مايسمى بـ Target Frame وأمامه رمز يشبه صورة القلم. هذه الخاصيه تمكن الارتباط لعنوان الموقع الذي وضعته على الصوره من أن يظهر في صفحه جديده تفتح غير الصفحه الرئيسيه التي عليها الصوره ولاختيار هذه الخاصيه اضغط على الرمز الموجود أمام Target Frame ومن القائمه اختر New Window.

كيف تدرج خلفيه

1- من القائمه الرئيسيه اختر Format>Background.

2- سيظهر لك مربع حواري.

3- في لسان التبويب Background . ستجد مستطيلا فارغا أمامه Browse. اضغط Browse واختر من القائمه التي ستظهر لك بالمربع ملف صورة الخلفيه التي تود وضعها بصفحتك.

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

Hyperlink

Visited hyperlink

Active hyperlink

ادراج خلفيه صوتيه

1- لوضع خلفيه صوتيه أو موسيقى ترافق الصفحه, أختر التبويب General من أعلى المربع السابق نفسه.

2- ستجد فراغا امامه background sound

3- اضغط browse واختر الخلفيه الصوتيه من القائمه المعروضه لديك.

* ملاحظه : لاحظ بأن نص كوكب كوكتيل الموجود بأول فراغ سيكون ظاهرا بالشريط العلوي للمتصفح عند عرض موقعك بمتصفحك. لذلك تمكنك هذه الخاصيه
من وضع تعليق مبسّط أو عباره مجمله تصف موقعك أو صفحتك.




الــدرس الرابع

ادراج الجداول وكيفية التعامل معها

الجدول يقوم بترتيب العناصر بصفحتك ويجعلها اكثر تنظيما وجمالا.ستتعلّم الان كيف تنشي جدول تضع به الصور والنصوص.

1- باعلى القائمه الرئيسيه اختر Table>Insert>Table ويمكنك استعمال الطريقه السريعه بالضغط على صورة الجدول باعلى شريط الأدوات .انظر الشكل 2-13

2- يعرض لك مربع ادراج جدول . قم بتحديد الخيارات التي تريدها ثم اضغط ok.




لتعديل خصائص الجدول

3- لتغيير لون اطارات الجدول وتوسيطه وتحديد خلفيته ايضا أنقر باليمين بأي فراغ داخل الجدول

تظهر لك قائمه اختر منها table properties.

4- يظهر لك مربع قم باختيار خصائص الجدول منه .



5- حدد لون خلفية الجدول من خلال القائمه المنسدله أمام Background Color وعلى سبيل المثال فقد اخترنا هنا اللون الأسود كخلفيه.وأما لون الاطارات فيمكنك تغييرها من القوائم الثلاث التي تعلو خيار لون الخلفيه. وقد قمنا باختيار اللون الأزرق والبنفسجي لاطارات الجدول. انظر النتيجه بالاسفل.




* ملاحظه: يمكنك اضافة صوره كخلفيه للجدول وذلك بالنقر على Browse

** لزيادة عدد الخلايا بالجدول انقر بالزر الايمن للماوس بداخل الجدول واختر من القائمه Insert Row.**

ادراج صوره داخل الجدول

1- لادراج صوره داخل الجدول انقر بأي خليه داخل الجدول.

2- من القائمه الرئيسيه للبرنامج اختر Insert>Picture>From File. أو اتبع الطريقه المختصره لانزال صوره.



3- ولالغاء أو مسح بعض الخلايا قم بتحديد الخليه بالكامل ومن خلال النقر بالزر الأيمن للماوس اختر من القائمه Delete Cells مع ملاحظه انه يجب عليك تحديد خليتين على الأقل لتتمكن من حذفها.

كيف تدرج شريط متحرّك

1- ستضيف الان لصفحتك نص متحرك وهو يعطي شكل رائع ودعايه للفت انتباه الزوار. من القائمه الرئيسيه أختر Insert>Component>Marquee.

2- فيعرض لك فرونت بيج مربع اكتب في المربع الفارغ نصك..كتبنا هنا مثلا كوكب كوكتيل.

3- لديك ثلاث خيارات بالاسفل :

scroll

يجعل النص يسير من اليمين لليسار أو العكس.

slide

يجعل النص يتحرك ومن ثم يقف فجأه.

اما alternate

يجعل النص يتجول بالصفحه كهذا المثال التالي..

كوكب كوكتيل يصبح متحركا يمينا ويسارا

4- لتغيير خصائص هذا النص وتغيير خلفيته اضغط باليمين عليه واختر

من القائمه marquee properties .

ولتغيير نوع الخط اختر font .



الــدرس الخامس
عرض موقعك ونشره على الوب

** بعد تصميم موقعك بالكامل والتأكد من عمل جميع الوصلات أو الروابط بصفحات الموقع فان الخطوه الأخيره تكمن في عرض هذه الصفحات ومشاهدتها في شكلها النهائي

ملاحظه: لكى ترى الشكل النهائي لصفحاتك بصوره صحيحه

Preview in Browser ولتتمكن من رؤيته بمتصفحك اختر

وهو يحمل هذا الرمز بأعلى شريط الأدوات.

** ان المهمه لاتنتهي عند تصميم صفحاتك ولكن عليك نشرها على الوب حتي يتمكن الجميع من مشاهدتها.

ويوجد الكثير من المواقع التي تعطيك صفحات مجانيه وبلا مقابل , ايضا يوجد العديد من المواقع العربيه والأجنبيه المتخصصه باستضافه المواقع بمبلغ سنوي أو شهري.



اضغط هنا : http://www.coctail.net/
اضغط هنا : http://free.sqor.net/


تحيااااااااااتي

hanafi2@************

موون هتوون
12-03-2005, 07:56 PM
هلا بك وغلا هنوفه0000

تسلمين اوخيتي على مشاركاتك الرائعه وبرامجك المميزه يا الغاليه 0000

بصراحه برامج حلووه ومفيده ومميزه يا الغاليه 0000

لا حرمنا هالطله المشرقه والمفيده بكل جديد وعطر اجد 000

تحايا عطرها الورد لك حبيبتي 000

hanafi2005
12-03-2005, 10:19 PM
عفوا ......



مشكوووووووووووووووووووووووووووووووووورة اختي على هارد السريع الحلو يا حلوة


تحياااااااااااااااااااتي





hnafi2@************