الصفحة رقم 1 من 2 12 الأخيرةالأخيرة
مشاهدة النتائج 1 الى 20 من 38
  1. #1

    تابع دورة تعليم تصميم المواقع بالفرونت بيج بسهولة تامة (شرح + صور)

    السلام عليكم

    اقدم لكم اليوم شرحا بسيطا لتعليم الفرونت بيج
    يعني بمجرد انك سوف تقرأه رح تكون محترف في تصميم المواقع بالفرونت بيج
    لانه شرح مدعم بالصور كما سترون معي
    نبدأ بمحتويات الدروس

    اولا هي خمس دروس و لن اضعها كلها حتى ارى هل هناك تفاعل مع الموضوع
    محتويات الدروس
    التعرف على محتويات فرونت بيج
    انشيء المجلد الخاص بموقعك
    أدرج الصفحات ونسق النصوص
    أدرج الصور والارتباطات والخلفيات
    كيف تدرج ارتباط لصفحه أخرى؟
    كيف تدرج صوره؟
    كيف تدرج خلفيه؟
    كيف تدرج خلفيه صوتيه؟
    كيف تدرج جدول؟
    كيف تدرج شريط متحرك? >> Marquee
    كيف تنشر موقعك؟

    يتبع...
    اخر تعديل كان بواسطة » deco017 في يوم » 27-05-2007 عند الساعة » 15:31
    download
    0


  2. ...

  3. #2
    [CENTER]8727758577
    [/CENTER]

    الدرس الاول
    مقــــدمــه
    التعرّف على محتويات برنامج فرونت بيج
    مرحبا بك , يمكنك انشاء موقعك ونشره على النت بكل سهوله فالامر ليس معقدا كما يبدو للبعض ونحن هنا سنقوم بمساعدتك لانشاء موقع الذي طالما حلمت به.
    وبالطبع ففي بداية الأمر يتوجب أن تكون على استعداد تام و رغبه حقيقيه في عمل الموقع الذي تريد فمتى توفرت الرغبه والعزيمه فتأكد بأنك قادر على تصميم موقع جدير بالاهتمام والمتابعه وشيئا فشيئا وبممارسة تطوير الموقع ستجد أن لديك موقعا خياليا.
    فلاتنسى أن مشوار الألف ميل يبدأ من الصفر.
    لتصميم موقع فانك تحتاج الى برنامج تقوم فيه بتصميم صفحات موقعك ونحن ننصحك ببرنامج فرونت بيج فهو البرنامج الوحيد الذي يمكنك انشاء صفحات موقعك وتصميمها بكل بساطه لتبدو لك بالمتصفح كما صممتها تماما.بالاضافه الى أنه عملي وسهل لمن ليست لهم خبره بالتصميم أو يصعب عليهم التعامل مع اللغة الشهيره الــ 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 كمثال
    ويمكنك ادخال بديل له كاسم موقعك الذي تريد انشاءه.
    بهذا تكون قد أنشأت ملفا خاصا بصفحات موقعك سيتضمن بعد ذلك جميع الملفات والصور التي تخص موقعك. هيا بنا الآن الى الدرس الثاني.
    34dfade134
    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.
    9fcb3adce8
    2-2

    * ملاحظه لقد قمنا بادخال Cocktail كمثال

    ويمكنك ادخال بديل له كاسم موقعك الذي تريد انشاءه.

    بهذا تكون قد أنشأت ملفا خاصا بصفحات موقعك سيتضمن بعد ذلك جميع الملفات والصور التي تخص موقعك.
    يتبع... بعد الردووود
    اخر تعديل كان بواسطة » deco017 في يوم » 27-05-2007 عند الساعة » 11:57
    0

  4. #3
    مشكوور اخووي...

    شرح رهييب وعجييب...

    تسلم يداك اخي الغالي...

    جداَ رائع...

    وانا ان شاءالله راح اسوي شرح تصميم واجهة بطريقة سهلة...


    جزاك الله الف الف خير...


    موضوع فضيع بالفعل...


    اخوك المعجب بالدرس...

    بحريني2
    1842f39481cfcff27e48887babd85060biggrinbiggrin
    0

  5. #4
    مشكووور اخي على الرد الحلو و المشجع
    0

  6. #5
    اريد رؤية الكثير من الردود حتى اكمل الموضوع
    0

  7. #6
    [CENTER]8727758577
    [/CENTER]
    [CENTER]



    الــدرس الثاني
    للاسف ما في ردوود بس رح اكمل الشرح عشان بعض الاخوة و الاخواة

    ادراج الصفحات والنصوص
    الآن وبعد أن أنشأنا ملفا خاصا للموقع ستتعلّم كيفية ادراج الصفحات وحفظها وتسجيلها لتنضم لباقي ملفات موقعك.
    1- من القائمة File اختر New>Page
    او بالعربيه اختر : جديد , ثم من القائمه اختر : صفحة فارغه
    2- الان من أعلى القائمة اختر Save لحفظ أو تسجيل الصفحه
    فيعرض لك فرونت بيج لوحه
    ستجد فراغا مكتوبا أمامه File name . قم بحذف new_page_3 مثلا وادخل على سبيل المثال mypage
    أو اسم الصفحه التي تريد حفظها
    مع ملاحظه ان الصفحه الرئيسيه للموقع يجب أن تكون باسم
    index
    بعد ذلك اضغط save لحفظ الصفحه بالملف الخاص لموقعك.
    ملاحظه ::: الفرونت بيج ينشيء صفحة الاندكس تلقائيا في مجلد الموقع يمكنك فتحها والتعديل عليها ان وجدتها في المجلد
    انظر الشكل 2-4.


    5bbe642f2e

    2-4
    ___________________________
    النــص وخصائصه
    3- ستتعلم في هذه الخطوه كيفية ادراج النص وتغيير ألوانه وخصائصه.
    4- في البدايه قم بكتابة نصك وليكن شبكة كوكتيل على سبيل المثال smile
    5- حدد كل النص بالماوس أو بضغط Shift مع الضغط على السهم الأيمن بلوحه المفاتيح حتى تحدد النص كلية .
    6-اختر الآن نوع الخط من القائمه المنسدله بالأعلى والتي موضحه بالشكل 2-5 وحدد حجمه ولونه وخصائصه كما هو موضح بالشكل التالي. أو اضغط هنا لتشاهد توضيح أكبر للنموذج.
    15aa06fbe3

    2-5
    * ملاحظه: يمكنك اللجوء لطريقه أسهل وذلك باتباع الخطوات التاليه
    1- حدد النص ومن ثم انقر عليه بالزر الأيمن للماوس فتظهر لك قائمه
    . أختر منها Font أو خط ومن ثم حدد لون النص وحجمه ونوع الخط من المربع الذي سيظهر لك كما هو موضّح بالشكل 2-6.
    36b16d7ba6

    2-6
    2- يمكنك اضافة العديد من الخصائص على النص من خلال هذا المربع الذي أمامك فلتغيير لون النص افتح القائمه المنسدله Color او اللون والتي تعرض لك العديد من الألوان المختلفه.اختر منها ماتشاء من ألوان.
    3- ولجعل النص عريضا اختر Bold تحت قائمة Font style أو نمط الخط.
    ويمكنك استعمال خاصيه تعريض الخط هذه من شريط الأدوات الموجود بأعلى قائمة البرنامج.
    4- لجعل النص مائلا اختر Italic من القائمه نفسها.


    يتبع ...
    اخر تعديل كان بواسطة » deco017 في يوم » 27-05-2007 عند الساعة » 14:35
    0

  8. #7
    8727758577
    [

    السلام عليكم

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

    9f62a64a2d

    2-7
    * ملاحظه: الطريقه مختصره اضغظ من لوحة المفاتيح المفتاحين CTRL+K . ويمكنك مشاهدة نموذج التعرف على محتويات الفرونت بيج بالدرس الأول والذي يوضح لك بالشكل طريقه أكثر اختصارا لادراج ارتباط .
    3- يعرض لك فرونت بيج الآن مربع حواري.
    4- اذا كنت تود انشاء ارتباط لصفحه أخرى سبق وأن أنشأتها وتريد وضع ارتباط لها بموقعك فقم باختيار الصفحه الذي تريد ربطها من مجموعه الملفات المعروضه في هذا المربع. أما اذا أردت الربط بصفحه خارجيه من الويب. شبكة كوكتيل على سبيل المثال, فضع عنوان الموقع في الفراغ المخصص لوضع الرابطه واضغط OK. انظر الشكل 2-8.
    31ba6d3dfa
    2-8
    * لاحظ بأن كلمة شبكة كوكتيل قد أصبحت مسطّره الآن وهذا يعني انها مرتبطه بالموقع وستنقلك الى هذا الموقع مباشره بمجرّد الضغط عليها بالمتصفح وستبدو لك على هذا النحو:
    شبكة كوكتيل
    كيف تدرج صوره
    بعد أن تعلمنا كيفية ادراج ارتباط سننتقل الآن الى الخطوه التي تليها وهي ادراج الصور.
    1- حدد الموضع الذي تريد وضع الصوره به ثم من أعلى القائمه الرئيسيه اختر Insert>Picture>From File. أو اتبع الطريقه السهله بالضغط على رمز الصوره من أعلى القائمه.راجع الدرس الأول ونموذج التعرف على محتويات برنامج الفرونت بيج.
    خصائص الصوره
    2- قم بتحديد الصوره الآن بعد أن قمت بادراجها ومن ثم انقر عليها بالزر الأيمن للماوس لاضافة بعض الخصائص والارتباطات لها.
    3- اختر من القائمه التي ظهرت لك Picture Properties أو خصائص الصورة.

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

    2-10
    4- ولاضافة تأثير للصوره أي بمجرد الاشاره عليها بالماوس سيظهر وصف لها أو تعليق. فقم بكتابة ذلك امام مايسمى بــ Text أو النص.
    5- لاضافة رابطه من هذه الصوره لموقع وب او صفحه أخرى أدخل عنوان الموقع أمام مايسمى بـ Location أو الموقع. أو قم باختيار صفحه من صفحات موقعك لربطها من خلال النقر على الزر الموجود أمام هذا الفراغ مباشره وهو Browse أو استعراض. سيعرض لك مربع ملفات أختر منه الصفحه التي تود ربطها. وقد قمنا بكتابة عنوان موقع شبكة كوكتيل كمثال.
    6- في الخيار الذي يليه ستجد مايسمى بـ Target Frame أو الاطار الهدف وأمامه رمز يشبه صورة القلم. هذه الخاصيه تمكن الارتباط لعنوان الموقع الذي وضعته على الصوره من أن يظهر في صفحه جديده تفتح غير الصفحه الرئيسيه التي عليها الصوره ولاختيار هذه الخاصيه اضغط على الرمز الموجود أمام Target Frame أو الاطار الهدف ومن القائمه اختر New Window أو اطار جديد.
    كما هو موضح لك بالشكل 2-10.
    كيف تدرج خلفيه
    1- من القائمه الرئيسيه اختر Format>Background أو اختر تنسيق < خلفيه
    2- سيظهر لك مربع حواري.
    3- في لسان التبويب Background . ستجد مستطيلا فارغا أمامه Browse أو استعراض. اضغط Browse أو استعراض واختر من القائمه التي ستظهر لك بالمربع ملف صورة الخلفيه التي تود وضعها بصفحتك.انظر الشكل 2-11

    22edb412fc

    2-11
    * ملاحظه: يمكنك أيضا من خلال هذه الخطوه وبهذا المربع الذي أمامك تغيير لون خلفيتك حتى ولو كانت خلفيتك عباره عن صوره فانه من الضروري تحديد لون يتناسب ولون خلفيتك كي تظهر بالمتصفح بمظهر متناسق جميل.
    اخر تعديل كان بواسطة » deco017 في يوم » 27-05-2007 عند الساعة » 17:03
    0

  9. #8
    0

  10. #9
    متابعين لك اخووي

    واصل ابداعك

    ولا تهتم عشان الردود

    تراهم منشغلين في الامتحانات وانا اول واحد بكرة عندي امتحان


    على كل حال


    مشكوووور اخووي
    0

  11. #10
    مشكور اخي و بالتوفيق لكم كلكم
    و انا رح أكمل بقية الدروي انشاء الله
    0

  12. #11
    0

  13. #12
    السلام عليكم
    أولا أعتذر عن طول الغياب (ظروف)

    بسم الله الرحمن الرحيم

    الدرس الرابع


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

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

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

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


    334879f0b3



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

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

    تظهر لك قائمه اختر منها table properties أو خصائص الجدول.

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

    ][/COLOR][/SIZE]

    efecf1383a


    2-14

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


    * ملاحظه: يمكنك اضافة صوره كخلفيه للجدول وذلك بالنقر على Browse أو استعراض كما هو موضح بالشكل السابق 2-14.

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

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

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

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

    2- من القائمه الرئيسيه للبرنامج اختر Insert>Picture>From File. أو ادراج < صورة < من ملف اتبع الطريقه المختصره لانزال صوره. انظر الشكل 2-15.


    63a1031fdf


    2-15

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

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

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



    07468e5234


    2-16

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

    scroll أو مرور

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

    slide أو انزلاق

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

    اما alternate أو تبديل

    يجعل النص يتجول بالصفحه

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

    من القائمه marquee properties أو خصائص لشاشه الاسميه


    وين رايحين ردوووود

    يتبع...
    اخر تعديل كان بواسطة » deco017 في يوم » 30-05-2007 عند الساعة » 12:42
    0

  14. #13
    0

  15. #14
    مشكور على المرور أخي
    heyon
    0

  16. #15
    شكرا اخووي على الردس


    بس لو تسرع في وضع الدرس وتخلصه عشان تلاقي ردود وتشجيع اكثر


    بحريني2
    0

  17. #16
    بسم الله الرحمن الرحيم..











    شكراً لك أخي على شرحك الغاية في الابداع..







    لدي سؤال بسيط..





    لو أنني صممت كل شيء بالفوتو شوب، ووضعت العنوان وكل شيء في صورة واحدة. ثم أدرجتها في الفرونت بيج. كيف يمكن لي أن أحدد على مكان معين في هذه الصورة وأضع عيله الرابط؟!!!..





    أنت شرحت الارتباط لنص في البرنامج نفسه وصورة واحدة منفردة. والصورة التي أريدها كاملة..







    أتمنى فهمت قصدي..













    بالتوفيق في الدنيا والآخرة..



    gooood gooood gooood










    والسلام عليكم ورحمة الله وبركاته..
    f5b8fa3869492577a369e6a51ab12064
    0

  18. #17
    إقتباس الرسالة الأصلية كتبت بواسطة Princess ALY مشاهدة المشاركة
    بسم الله الرحمن الرحيم..











    شكراً لك أخي على شرحك الغاية في الابداع..





    لدي سؤال بسيط..





    لو أنني صممت كل شيء بالفوتو شوب، ووضعت العنوان وكل شيء في صورة واحدة. ثم أدرجتها في الفرونت بيج. كيف يمكن لي أن أحدد على مكان معين في هذه الصورة وأضع عيله الرابط؟!!!..





    أنت شرحت الارتباط لنص في البرنامج نفسه وصورة واحدة منفردة. والصورة التي أريدها كاملة..







    أتمنى فهمت قصدي..













    بالتوفيق في الدنيا والآخرة..



    gooood gooood gooood










    والسلام عليكم ورحمة الله وبركاته..

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

  19. #18
    الــدرس الخامس


    عرض موقعك ونشره على الوب

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

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

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

    وهو يحمل هذا الرمز
    b8a5da1ebe[img]

    بأعلى شريط الأدوات.

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

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

    كلـــمــــه أخيـــــــرة



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


    انتهى
    0

  20. #19
    بسم الله الرحمن الرحيم..









    شكراً لك أخي على شرحك الوافي..


    asian asian asian





    بانتظار جديدك..


    smile wink smile





    لا تحرمنا من مواضيعك..


    wink smile gooood asian asian gooood smile wink









    بالتوفيق في الدنيا والآخرة..


    gooood gooood gooood









    والسلام عليكم ورحمة الله وبركاته..
    0

  21. #20
    مشكور يا أختي على المرور الحلو gooood
    و ان شاء الله يكون في جديد عندي في القريب العاجلdevious و شكرا tongue
    0

الصفحة رقم 1 من 2 12 الأخيرةالأخيرة

بيانات عن الموضوع

الأعضاء الذين يشاهدون هذا الموضوع

عدد زوار الموضوع الآن 1 . (0 عضو و 1 ضيف)

المفضلات

collapse_40b قوانين المشاركة

  • غير مصرّح لك بنشر موضوع جديد
  • غير مصرّح بالرد على المواضيع
  • غير مصرّح لك بإرفاق ملفات
  • غير مصرّح لك بتعديل مشاركاتك
  •  

مكسات على ايفون  مكسات على اندرويد  Rss  Facebook  Twitter