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



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



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



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



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



اضغط هنا



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



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



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



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


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



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



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



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


للنصوص .



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



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



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



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



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



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


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


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



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



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



http://absba8.absba.org/abo_a_aziz/mharat1.jpg



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



http://absba8.absba.org/abo_a_aziz/mharat2.jpeg



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


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



http://absba8.absba.org/abo_a_aziz/mharat3.jpeg



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


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


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


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


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


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



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



http://absba8.absba.org/abo_a_aziz/mharat4.jpeg



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



http://absba8.absba.org/abo_a_aziz/mharat5.jpeg



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



http://absba8.absba.org/abo_a_aziz/mharat6.jpg



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

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


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


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



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



http://absba8.absba.org/abo_a_aziz/mharat7.jpg



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


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



http://absba8.absba.org/abo_a_aziz/mharat8.jpg



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



http://absba8.absba.org/abo_a_aziz/mharat9.jpg



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



http://absba8.absba.org/abo_a_aziz/mharat10.jpg



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



http://absba8.absba.org/abo_a_aziz/mharat11.jpg



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


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



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



http://absba8.absba.org/abo_a_aziz/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">

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

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



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



http://absba8.absba.org/abo_a_aziz/mharat13.jpg



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



http://absba8.absba.org/abo_a_aziz/mharat14.jpg



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



http://absba8.absba.org/abo_a_aziz/mharat15.jpg



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



http://absba8.absba.org/abo_a_aziz/mharat16.jpg



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



http://absba8.absba.org/abo_a_aziz/mharat17.jpg



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



http://absba8.absba.org/abo_a_aziz/mharat18.jpg



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


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



http://absba8.absba.org/abo_a_aziz/mharat19.jpg



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



http://absba8.absba.org/abo_a_aziz/mharat20.jpg



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



http://absba8.absba.org/abo_a_aziz/mharat21.jpg



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


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


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


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


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