-:-|صحاب بجد|-:-

المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة Herzمنتديات صحاب بجد الشبابية
ترحب بكم المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة Icon_wink
المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة 233798391


انضم إلى المنتدى ، فالأمر سريع وسهل

-:-|صحاب بجد|-:-

المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة Herzمنتديات صحاب بجد الشبابية
ترحب بكم المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة Icon_wink
المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة 233798391

-:-|صحاب بجد|-:-

هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.


Long live Egypt




....................|لوحة شرف المنتدي|....................
المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة Cauoa-17

المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة Caaony18

المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة Caaaoa17

المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة Caoa--19
  قريبـــــا
قريبـــــا
قريبـــــا
قريبـــــا


.......................................................|اعلانات المنتدي|......................................


.........................................المنتدي لسه جديد محتاجين ناس تظبطه ................................................................

2 مشترك

    المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة

    elking
    elking
    مشرف متميز
    مشرف متميز


    الدولة : مصر
    ذكر
    عدد المشاركات : 247
    عدد النقاط : 518
    تاريخ التسجيل : 19/11/2009
    العمل : طالب
    مزاجي : 10/10

    عاجل المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة

    مُساهمة من طرف elking الثلاثاء 24 نوفمبر 2009 - 15:23

    [center]بسم الله نبدأ الشرح


    الأدوات التي سوف نستخدمها :


    1 - برنامج الفوتوشوب الاصدار رقم 7
    2 - برنامج الفرونت بيج 2003
    3 - برنامج السويتش ماكس


    الشرح مجزء الى عشر مراحل وهي كتالي :

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


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


    المرحلة الثالثة : شرح إدراج كود الشاشة الأسمية ( النص المتحرك من تحت الى أعلى او من اليمين الى اليسار ) .


    المرحلة الرابعة : شرح إدراج جدول وصور ونصوص في المربعات التي قسمناها وشرح إضافة الإرتباط التشعبي

    للنصوص .


    المرحلة الخامسة : شرح إدراج كود القائمة المنسدلة .


    المرحلة السادسة : شرح إدراج كود الشايب العجوز المرحب بالزوار .


    المرحلة السابعة : شرح إدراج كود (( حدث في مثل هذا اليوم )) وايضا كود (( شريط اخبار الجزيرة )) .


    المرحلة الثامنة : شرح اضافة لون لاساس الصفحة واضافة العنوان وطريقة حفظ العمل .


    المرحلة التاسعة : طريقة رفع الملفات الى سيرفر مجاني .


    المرحلة العاشرة : طريقة رفع الملفات الى سيرفر مدفوع

    ------------------------------------------------------------------------------

    === المرحلة الأولى ===


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


    نبدأ اولا بفتح برنامج الفوتوشوب ونفتح عمل جديد وذلك عن طريق File >> New
    ونحدد المقاسات الموضحة بالصورة التالية :


    المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة Mharat1


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


    المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة Mharat2


    ملاحظة هامة
    ( بعد الانتهاء من التصميم نحفظ العمل بنوع psd وذلك للرجوع اليه عند حدوث اي خطأ )

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


    المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة Mharat3


    1 - المستطيل الاحمر / سيتم تقسيم الازرار وإدراج الروابط ببرنامج الفوتوتوشوب

    2 - المستطيل الأزرق / سيتم تقسيم المستطيلات وبعد
    حفظ العمل سيتم سحب الصور ببرنامج السويتش وإدراج الفلاش ببرنامج الفرونت
    بيج وسوف اشرح هذه الطريقة
    3 - المستطيل الأخضر / سيتم تقسيم هذه الخانة وذلك لادراج شاشة اسمية بالفرونت بيج

    4 - المربعين الزهريين يمين ويسار الصفحة / سيتم تقسيم هذه الخانة لإدراج نص ورابط على النص وذلك ببرنامج الفرونت بيج

    5 - المستطيل البني / سيتم تقسيم هذه الخانة لادراج قائمة منسدله وذلك ببرنامج الفرونت بيج

    6 - المربعين بلون السماوي يمين ويسار الصفحة / سيتم تقسيم هذه الخانة لادراج نص أو صوره ببرنامج الفرونت بيج

    7 - المستطيل الرمادي / سيتم تقسيم هذه الخانة لادراج صورة متحركة وذلك ببرنامج الفرونت بيج


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


    المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة Mharat4


    بعد الانتهاء من التقسيم يتبقى لنا اضافة الروابط على
    بعض الخانات المحددة باداة التقسيم وفي شرحي هذا سيتم وضع الروابط على
    المستطيل الأحمر وهي منتدى البرامج ومنتدى الهاردوير والصيانة ومنتدى
    الألعاب ومنتد قسم الخبرات والمبتدئين ومنتدى البرامج المشروحة ومنتدى
    التصميم وطريقة إدراج الرابط موضح بالصورة التالية :


    المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة Mharat5


    بعد الانتهاء من اضافة الروابط بالفوتوشوب يتبقى لنا طريقة حفظ التصميم بنوع HTML والطريقة موضحة بالصورة التالية :


    المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة Mharat6


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

    ---------------------------------------------------------------------------


    === المرحلة الثانية ===

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

    قبل فتح برنامج الفرونت بيج نذهب الى المستندات ثم
    الى My Web Sites ونننشأ مجلد جديد ف ونسميه أي اسم فأنا اختر اسم لهذا
    المجلد absba فسيتم شرح الغرض من انشاء هذا المجلد


    الان نفتح برنامج الفرونت بيج ومن قوائم البرنامج نذهب الى File ثم نضغط على Open كما هو موضح بالصورة التالية :


    المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة Mharat7


    تم فتح الموقع ببرنامج الفرونت بيج وهو مجموعة من
    الصور بلغ عددها 74 صورة منها الكبير والصغير فنحنوا لانريد الا الصور
    التي قسمناها ببرنامج الفوتوشوب فهي التي سيتم العمل عليها فلنلقي نظرة
    على الصورة الثالثة المدرجة في أول الموضوع
    ونشاهد الفقرة رقم 2 - المستطيل الأزرق يوجد به اربع مستطيلات فهي الان اصبحت اربع صور بعد فتحها بالفرونت بيج
    فسوف احذف هذه الصور وادرج مكانها صورة متحركة او ملف فلاشي فالطريقة سهلة جدا عليك تطبيق التالي :

    وانت فاتح التصميم بالفرونت بيج نذهب الى الصور الاربع التي ذكرناها اضغط الماوس يمين على الصورة الأولى
    ثم اختر خصائص الصورة كما هو موضح بالصورة التالية :


    المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة Mharat8


    ستشاهد اطار باسم خصائص الصورة الموضح بالصورة التالية :


    المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة Mharat9


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


    المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة Mharat10


    انتهينا من طريقة ادراج الصورة المتحركة وايضا من طريقة سحب الصورة ببرنامج السويتش
    يتبقى لنا الان طريقة ادراج الملف الفلاشي ببرنامج الفرونت بيج والطريقة كما هو بالصورة التالية :


    المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة Mharat11


    ---------------------------------------------------------------------------

    === المرحلة الثالثة ===


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


    المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة Mharat12


    وهذا كود الشاشة الاسمية :


    كود:




    .................................................. ...................


    === المرحلة الرابعة ===


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


    المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة Mharat13


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


    المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة Mharat14


    والآن نشاهد شكل الجدول الذي ادرجناه في الصورة التالية :


    المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة Mharat15


    شرح الصورة :
    1- الفقرة رقم 1 هذا شكل الجدول بعد ادراجه
    2- الفقرة رقم 2 نضع المؤشر على العمود الأوسط ونسحبه الى اليمين حتى ان يصبح شكله كالصورة التالية :


    المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة Mharat16


    يتبقى الان ادراج الصور الصغيرة المتحركة او ثابته والصور التي استخدمتها موضحة بالصورة التالية :


    المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة Mharat17


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


    المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة Mharat18


    يتبقى علينا الان كتابة النص واضافة ارتباط له والطريقة هي :

    نكتب النص المطلوب ثم نضلل عليه كما في الصورة التالية :


    المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة Mharat19


    نضغط الماوس يمين على النص وهو مضلل ونختار ارتباط تشعبي كما في الصورة التالية :


    المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة Mharat20


    ستجد اطار باسم ادراج ارتباط تشعبي كما في الصورة التالية :


    المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة Mharat21


    شرح فقرات هذه الصورة :

    1- الفقرة الاولى ضع الرابط في هذا الحقل طبعا يجب ان تكون مجهز الرابط وطريقة لصقه من لوحة المفاتيح تضغط على
    Ctrl>>> ثم حرف C

    2- الفقرة الثانية اذا انت تحب ان يفتح الرابط في صفحة جديده اضغط على الاطار الهدف ثم اختر اطار جديد ثم موافق .

    3- الفقرة الثالثة اثناء تصفح الزائر ومروره على
    الرابط بيطلع له نص يعبر عن محتوى الرابط وطريقته اضغط على تلميح الشاشة
    بيطلع لك مستطيل اكتب ماتريد ثم اضغط موافق..

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



    --------------------------------------------------------------------------

    اسلام مغربي
    اسلام مغربي
    v-i-p
    v-i-p


    الاسم الحقيقي : سمسم
    الدولة : مصر
    ذكر
    عدد المشاركات : 457
    عدد النقاط : 1164
    تاريخ التسجيل : 12/12/2009
    العمل : مصمم
    مزاجي : سيبك يا عم

    عاجل رد: المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة

    مُساهمة من طرف اسلام مغربي الإثنين 14 ديسمبر 2009 - 11:18

    المهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة 317627

      الوقت/التاريخ الآن هو الإثنين 20 مايو 2024 - 9:49