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

[صائد الأفكار]

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

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



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



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



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



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



اضغط هنا



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



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



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 فسيتم شرح الغرض من انشاء هذا المجلد



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







تم فتح الموقع ببرنامج الفرونت بيج وهو مجموعة من الصور بلغ عددها 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">

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