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

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

مساء الخير يامشاغبين

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

درس ممتع وسهل للغايه وقد سبق وان شرح بمنتدانا الغالي المشاغب

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

اولا وقبل كل شي شاهد الموقع الذي صممته لاجراء الشرح عليه اضغط [فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات . إضغط هنا للتسجيل]

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات . إضغط هنا للتسجيل]

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

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

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

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

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

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

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

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

للنصوص .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

كود:
<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">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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