العودة   منتديات حروف الاردن > منتدى الالكترونيات والبرمجيات > منتدى تطوير المنتديات والمواقع > منتدى تطوير المواقع والمنتديات
اسم العضو
كلمة المرور
التسجيل التعليمـــات قائمة الأعضاء التقويم البحث مشاركات اليوم اجعل كافة الأقسام مقروءة

منتدى تطوير المواقع والمنتديات قسم يختص بتطوير المواقع والمنتديات بشكل عام

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

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

إضافة رد
 
أدوات الموضوع انواع عرض الموضوع
#1  
قديم 07-18-2010, 01:54 AM
بداية الطموح
مدير حروف الاردن
عمر العناسوة غير متواجد حالياً
Jordan     Male
SMS ~ [ + ]


من عَرَفَ الناس استراحَ
فلا يطربْ لمدحهم
ولا يجزعْ من ذمِّهم
لأنهم سريعو الرضا .. سريعو الغضبِ

والهوى يُحرِكُهم
قـائـمـة الأوسـمـة
التكريم

لوني المفضل Indianred
 رقم العضوية : 2
 تاريخ التسجيل : Aug 2009
 فترة الأقامة : 3348 يوم
 أخر زيارة : 11-04-2017 (01:14 PM)
 العمر : 35
 الإقامة : قلب الحروف
 المشاركات : 132,274 [ + ]
 التقييم : 12030
 معدل التقييم : عمر العناسوة will become famous soon enoughعمر العناسوة will become famous soon enoughعمر العناسوة will become famous soon enoughعمر العناسوة will become famous soon enoughعمر العناسوة will become famous soon enoughعمر العناسوة will become famous soon enoughعمر العناسوة will become famous soon enoughعمر العناسوة will become famous soon enoughعمر العناسوة will become famous soon enoughعمر العناسوة will become famous soon enoughعمر العناسوة will become famous soon enough
بيانات اضافيه [ + ]
افتراضي لمهارات والخطوات الإحترافيه لإنشاء موقع كالمجلة




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





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





ولاكن احببت ان اضيف بعض الخطوات واللمسات الرائعة في هذا الدرس


اولا وقبل كل شي شاهد الموقع الذي صممته لاجراء الشرح عليه اضغط هنـــا


وهذا نموذج اخر قمت بتصميمه




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


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


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


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

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


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


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


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

للنصوص .


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


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


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


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


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


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

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

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


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


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


الإحترافيه mharat1.jpg


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


الإحترافيه mharat2.jpeg


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

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


الإحترافيه mharat3.jpeg


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

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

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

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

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

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


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


الإحترافيه mharat4.jpeg


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


الإحترافيه mharat5.jpeg


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


الإحترافيه mharat6.jpg


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

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


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

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

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


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


الإحترافيه mharat7.jpg


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

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


الإحترافيه mharat8.jpg


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


الإحترافيه mharat9.jpg


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


الإحترافيه mharat10.jpg


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


الإحترافيه mharat11.jpg


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

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


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


الإحترافيه mharat12.jpg


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

كود:
<marquee direction="up" width="275" height="190" style="tahoma: 150%; font-size: 14pt; text-align: center; border-style: solid; border-width: 0px" bgcolor="#FFFFFF" scrolldelay="70" scrollamount="2">

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


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


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


الإحترافيه mharat13.jpg


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


الإحترافيه mharat14.jpg


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


الإحترافيه mharat15.jpg


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


الإحترافيه mharat16.jpg


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


الإحترافيه mharat17.jpg


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


الإحترافيه mharat18.jpg


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

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


الإحترافيه mharat19.jpg


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


الإحترافيه mharat20.jpg


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


الإحترافيه mharat21.jpg


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

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

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

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

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



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

=== المرحلة الخامسة ===

تم طرح شرح المرحلة الخامسة في الصفحة الثانية من هذا الموضوع وذلك للتخفيف من حجم الصور المشروحة





مواضيع : عمر العناسوة


رد مع اقتباس
قديم 07-24-2010, 03:45 PM   #2
مرهفة الاحساس
كبار اعضاء الحروف
I MiŞş &amp;#219; RAYNCOOPER


الصورة الرمزية مرهفة الاحساس
مرهفة الاحساس غير متواجد حالياً

بيانات اضافيه [ + ]
 رقم العضوية : 179
 تاريخ التسجيل :  Jan 2010
 العمر : 25
 أخر زيارة : 08-27-2012 (05:33 PM)
 المشاركات : 2,165 [ + ]
 التقييم :  102
 الدولهـ
Canada
 الجنس ~
Female
 MMS ~
MMS ~
لوني المفضل : Darkviolet
افتراضي



الف شكر لك ع المواضيع المميزة


يسلمووووووووووووووووووووووووو


 

رد مع اقتباس
قديم 07-26-2010, 06:49 PM   #3
كبار اعضاء الحروف
أعز الناس أمــــــــي


الصورة الرمزية ميناس
ميناس غير متواجد حالياً

بيانات اضافيه [ + ]
 رقم العضوية : 258
 تاريخ التسجيل :  Feb 2010
 أخر زيارة : 11-04-2017 (03:44 AM)
 المشاركات : 8,987 [ + ]
 التقييم :  423
 الدولهـ
Jordan
 الجنس ~
Female
لوني المفضل : Purple
افتراضي



شكرا كتيييييييييييير


 

رد مع اقتباس
قديم 08-07-2010, 03:33 AM   #4
ابن الشريف
كما تدين تدان
أسيــر الشــوقـ


الصورة الرمزية ابن الشريف
ابن الشريف غير متواجد حالياً

بيانات اضافيه [ + ]
 رقم العضوية : 36
 تاريخ التسجيل :  Sep 2009
 أخر زيارة : 05-01-2016 (06:36 PM)
 المشاركات : 11,446 [ + ]
 التقييم :  89
 الجنس ~
Male
لوني المفضل : Chartreuse
افتراضي



مشكووووور ياغالي

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

تحياتي لك


 

رد مع اقتباس
قديم 08-08-2010, 09:40 AM   #5
كبار اعضاء الحروف
أعز الناس أمــــــــي


الصورة الرمزية ميناس
ميناس غير متواجد حالياً

بيانات اضافيه [ + ]
 رقم العضوية : 258
 تاريخ التسجيل :  Feb 2010
 أخر زيارة : 11-04-2017 (03:44 AM)
 المشاركات : 8,987 [ + ]
 التقييم :  423
 الدولهـ
Jordan
 الجنس ~
Female
لوني المفضل : Purple
افتراضي



يسلمووووووووووووو موضوع مميز


 

رد مع اقتباس
قديم 05-20-2018, 04:45 PM   #6
meraextra72
كاتب نشيط


الصورة الرمزية meraextra72
meraextra72 غير متواجد حالياً

بيانات اضافيه [ + ]
 رقم العضوية : 14982
 تاريخ التسجيل :  May 2018
 أخر زيارة : 05-20-2018 (04:48 PM)
 المشاركات : 51 [ + ]
 التقييم :  10
لوني المفضل : Cadetblue
افتراضي



يعطيك العافية


 

رد مع اقتباس
إضافة رد

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


الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 
أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة

الانتقال السريع

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
موسوعة منتدى حروف الاردن لمواقع السيارات أشــــرقـــــت منتدى السيارات 2016 ـ صور سيارات 2016 11 02-06-2017 06:20 PM
مكتبة خاصة للانمي أشــــرقـــــت صور انمي , كرتون ورسوم متحركة 13 12-16-2014 06:14 PM
مكتبة الطالب مهمه جداً ومفيدة عمر العناسوة منتدى طلاب المدارس 3 05-07-2013 11:25 AM
الموسوعة العربية للأبحاث شامل لاستفساراتكم عمر العناسوة منتدى الابحاث والدراسات 18 03-02-2012 03:06 AM


الساعة الآن 02:24 AM


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd. TranZ By Almuhajir

التعليقات المنشورة لا تعبر عن رأي المنتدى بل تعبر عن رأي كاتبهاو الادارة غير مسؤلة عن اي علاقة غير شرعية مع الاعظاء