>>> دورة تصميم المواقع "مثال تصميم موقع استضافة" .

[sar17e]

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


::::::::::::::

::..(دورة تصميم المواقع)..::

::::::::::::::

بداية :-
بعد حمد الله والصلاة والسلام على رسول الله صلى الله عليه وسلم فقد ظهر في الأيام الاخيره كثرة بناء المواقع الالكترونية وذلك لم وصلت إليه الأسعار من انخفاض , وانتشار شركات بناء المواقع الالكترونية فمن الطبيعي إن تستمر هذه الأسعار إلى الانخفاض , ولقد أصبح الانترنت افصل وسيلة إعلاميه على الإطلاق حيث أصبح الكمبيوتر جزء أساسي في حياة معظم الأشخاص بل وبين أفراد الاسره .
لذلك فقد قمنا بالتخطيط لعمل هذه الدورة تحت رعاية شركة ميكروثيم MicroTheme CO وبالفعل تم اعتماد هذه الدورة وعمل الدروس والشروحات الخاصة بها تحت أشراف مجموعة من المصممين والمحترفين في هذا المجال لكي تصمم موقعك بنفسك وبشكل احترافي وينال إعجاب الآخرين .

وقد تم وضع فهرس مبسط لعناصر الدورة لسهولة المتابعة معنا وهو كالتالي :-

فهرس الدورة :-

1- مقدمة ال دورة
2- أدوات ال دورة
3- تحديد نوع التصميم وتصميمه عن طريق برنامج الفوتوشوب
4- تركيب التصميم في برنامج الفرونت بيج
5- رفع التصميم على الموقع عن طريق ال CPanel أو برنامج الFTP
6- شرح لأهم وظائف لوحة تحكم الموقعCPanel


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

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

وشكرا لكم

[sar17e]

مقدمة الدورة :-


بعد حمد الله والصلاة والسلام على رسول الله صلى الله عليه وسلم أما بعد , فسوف نقدم شرح مختصر لهذه الدورة في سطور قبل أن نبدأ في العمل , فمن اجل أن تبدأ في تصميم ناجح لابد من تحديد هدف الموقع فكل فرد له تفكير وهوايه معينه ولولا اختلافالأذواق لبارت السلع ولذلك يجب أن تختار هدف موقعك والمجال الذي من اجله قمت ببناء الموقع وهذه هي أهم خطوه في العمل على تصميم ناجح ومناسب للموقع .

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

أما بالنسبة للعنصر الثاني في دورتنا فسوف نوضح فيه بعض البرامج والأدوات التي سنحتاجها في الدورة مع وضع روابط تحميل لها على السيرفر الخاص بنا ومن أهم هذه البرامج برنامج الفوتوشوب Photoshop الغني عن التعريف وبرنامج الايمج ريدي ImageReady المصاحب لها وبرنامج الفرونت بيج FrontPage وبرنامج اف تي بي FTP , وغيرها من الأدوات التي سنحتاجها عند عمل التصميمات المختلفه .

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

نتقل إلي العنصر الرابع وهو تركيب التصميم في برنامج الفرونت بيج FrontPage حيث يتم تصميم كل صفحة على حدا عن طريق هذا البرنامج , وتأتي هذه المرحله بعد تقطيع التصميم في الفوتوشوب.


بالنسبة إلى العنصر الخامس وهو كيفية رفع التصميم على الموقع عن طريق ال CPanel أو عن طريق برنامج ال FTP.

وأخيرا ً وليس آخرا ً ننتقل إلى آخر عنصر في هذه الدورة وهو شرح لأهم وظائف لوحة تحكم الموقع CPanel حيث يتم وضع شرح بسيط لأهم العناصر مثل كيفية رفع أي ملف بصفه عامه وكيفية عمل ايميل خاص بالموقع وكيفية عمل قاعدة البيانات وطريقة اخذ نسخه احتياطية للموقع وقواعد البيانات وطريقة إنشاء حساب FTP طريقة إعطاء ترخيص للملفات والمجلدات وأشياء أخري نرجوا أن يوفقنا الله في شرحها .

نرجوا من الله سبحانه وتعالى أن تنال الدورة إعجابكم وان يوفقنا في توصيل الشروحات والدروس إليكم بكل سهوله والدرس القادم إن شاء الله أدوات الدورة .
.MicroTheme CO

[sar17e]

أدوات الدورة :-
بعد أن قمنا بشرح مختصر للدورة في المقدمة سوف نضع في هذا الدرس البرامج التي سنحتاجها في الدورة مع وضع روابط تحميل لها على السيرفر الخاص بنا , وهذه البرامج هي :- Photoshop , FrontPage , FTP


نبدأ ببرنامج الفوتوشوب Photoshop :-

هناك العديد من الاصدارت لهذا البرنامج الرائع ولكن نفضل التصميم على الإصدار السابع Adobe Photoshop 7.0.1 ME والداعم للغه العربية ولان معظم الدروس مشروحة على هذا الإصدار .
تحميل البرنامج

================

برنامج الفرونت بيج FrontPage :-

يعتبر برنامج الفرونت بيج MICROSOFT OFFICE FRONTPAGE 2003 ARABICمن أهم البرامج التي تستخدم في إنشاء وتصميم صفحات الانترنت .
تحميل البرنامج


================
برنامج اف تي بي FTP :-

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


================
موعيدنا ان شاء الله في اللقاء القادم والعنصر الثالث في الدورة وهو تحديد نوع التصميم وتصميمه عن طريق برنامج الفوتوشوب .

[sar17e]

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

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

فلنبدأ بكيفية تصميم واجهة استضافة كمثال فقط لا غير , افتح برنامج الفوتوشوب ثم قم بفتح عمل جديد بمقاس 777 × 800 بيكسل وهذا هو المقاس المفضل لاي تصميم , بخلفية بيضاء كما هو موضح بالصورة :-

اختر هذه الأداة

أولا قم بإضافة لير جديد وذلك من قائمة الادوات اختر layer ثم new ثم layer او shft+ctrl+N ثم ارسم مستطيل بهذا الشكل واذهب إلى أداة التدرج اللوني ثم اختر اللون الأزرق مثلا وهو الأفضل بالنسبة لهذا النوع من المواقع ليصبح الشكل هكذا :-

ثم قم بإضافة لير جديد أيضا ثم حدد مستطيل آخر واعطه هذا التدرج اللوني مثلا :-

ثم أعطه stroke اسود وذلك عن طريق الأتي :-

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

قم إضافة لير جديد ثم عمل مستطيل بهذا المقاس , ثم اذهب إلى القائمة , واختر select ثم Modify ثم smooth وضع القيمة 15 مثلا , ثم أعطه هذا التدرج اللوني كما هو موضح في الصورة :-

ثم اختر هذه الأداة

وقم بعمل تحديد مثل هذا للفصل بين الازارير كما هو موضح بالصورة :-

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

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

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

=================
موعيدنا ان شاء الله في اللقاء القادم والجزء الثاني من العنصر الثالث في الدورة وهو تحديد نوع التصميم وتصميمه عن طريق برنامج الفوتوشوب .

[sar17e]

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

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

تصميم القوائم :-
اولا قم بتحديد عدد القوائم التي تريدها في الموقع , وسوف نقوم بتصميم ثلاث قوائم فقط في هذا الدرس .

نفرض أن أول قائمة هي عملاءنا , قم برسم ثلاث مستطيلات بهذا الشكل وهذه الألوان أو أي لون مناسب للون الواجهة .

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



نأتي إلى تصميم قائمة الخطط , نقوم بتصميم قائمة بنفس الخطوة السابقة ولكن بمساحه اكبر , ليصبح الشكل النهائي كما يلي :-

وفي النهاية التصميم قم بتصميم ال Footer وكتابة الحقوق الخاصة بك .

وبهذه الخطوة قد انتهينا من مرحلة التصميم , والمرحلة القادمة إن شاء الله هي كيفية تقطيع التصميم .

موعيدنا ان شاء الله في اللقاء القادم والجزء الثالث من العنصر الثالث في الدورة وهو تحديد نوع التصميم وتصميمه عن طريق برنامج الفوتوشوب

[sar17e]

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

انتهينا في الدرس السابق من مرحلة التصميم وسوف نتكلم في هذا الدرس عن كيفية تقطيع هذا التصميم .

اختر هذه الأداة :-

ثم قم بقطع الجزء الأول من التصميم وهو الهيدر كما هو موضح بالصورة الاتيه :

بعد ذلك نأتي إلى تقطيع قائمة من عملاءنا بهذا الشكل :



وبنفس الخطوات كذلك قم بتقطيع قائمة الدعم الفني ,

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



بعد يتم تقطيع ال Footer إلى ثلاث قطع ليصيح الشكل النهائي بعد التقطيع كما يلي :-





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

نرجوا أن يكون وقفنا الله في توصيل هذه الخطوة إليكم وانتظرونا في الخطوة القادمة وهي تركيب التصميم في برنامج الفرونت بيج .

===========

موعيدنا ان شاء الله في اللقاء القادم و العنصر الرابع في الدورة وهو تركيب التصميم في برنامج الفرونت بيج .

[sar17e]

السلام عليكم ورحمة الله وبركاتة

انتهينا في الدرس السابق من العنصر الثالث في الدورة ونبدأ في هذا الدرس ان شاء الله في العنصر الرابع في الدورة وهو :-
تركيب التصميم في برنامج الفرونت بيج :-

بعد الانتهاء من مرحلة التصميم والتقطيع قم بعمل مجلد خاص على الجهاز الخاص بك بأسم الموقع وليكن newdesign ثم قم بحفظ العمل في هذا المجلد وذلك عن طريق الضغط على file ثم save for web ثم save ثم اختر مجلد newdesign وقم بالضغط على save كما هو موضح بالصوره الاتيه :-





افتح مجلد newdesign ستجد ملف images وهو يحتوي على صور التصميم وملف بصيغة html كما هو في الصورة الآتية :-

افتح برنامج الفرونت بيج FrontPage وافتح عمل جديد ثم اضغط في أي مكان بزر الماوس الأيمن ثم page properties ثم ضع هذه القيم كما بالصوره الاتية :-




بعد ذلك من قائمة البرنامج قم بإدراج جدول كما هو موضح بالصورة :-



بعد إدراج الجدول اضغط بزر الماوس الأيمن ثم اختر table properties وضع القيم التالية :-






بعد ذلك قم بإدراج الصورة الخاصة بالهيدر وذلك كما يلي :-

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

================

موعيدنا ان شاء الله في اللقاء القادم والجزء الثاني من العنصر الرابع في الدورة وهو تركيب الاتصميم في برنامج الفرونت بيج.

[sar17e]

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

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

كيفية ادارج القوائم :-

قم بإدراج جدول أخر أيضا ثم اضغط بزر الماوس الأيمن ثم اختر table properties وضع القيم التالية :-

بعد ذلك قم بتقسيم هذا الجدول إلى قسمين وذلك بالضغط على الجدول بزر الماوس الايمين ثم اختر insert columns

ضع زر الماوس في القسم الأيمن ثم إدراج جدول أخر بنفس القيم ليصبح بهذا الشكل :-

بعد ذلك قم بتقسيم هذا الجدول إلى ثلاث صفوف وذلك بالضغط بزر الماوس الأيمن ثم اختار split cells واختر هذه القيم :-

أو اضغط على زر ال Tab في الكيبورد مرتين متتاليتين لاختصار الخطوة السابقة .

ضع الماوس في الصف الأول ثم ادارج صوره ثم قم بإدراج الصورة الأولى من قائمة " من عملاءنا " ليصبح بهذا الشكل

بعد ذلك اضغط بزر الماوس الأيمن في الصف الثاني ثم اخترcell properties ثم اضغط علىBrowse ثم اختر الجزء الثاني من قائمة " من عملاءنا " وذلك لإدراجها كخلفية لكي تستطيع الكتابة عليها , كما في الصورة آلاتية :-

ثم أدرج الجزء الثالث من قائمة " من عملاءنا " كصوره ليصبح الشكل النهائي كما يلي :-



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

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

موعيدنا ان شاء الله في اللقاء القادم والجزء الثالث من العنصر الرابع في الدورة وهو تركيب الاتصميم في برنامج الفرونت بيج.

[sar17e]

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

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

إدراج قائمة خطط الاستضافة :-

ضع زر الماوس على القسم الأيسر ثم قم بإدراج جدول وبنفس القيم

ثم قم بتقسيمه إلى ثلاث أعمده بهذا الشكل :-



ثم قم بإدراج الجزء الأول من قائمة "خطط الاستضافة " كالتالي :-

العمود الاول صوره والثاني خلفيه والثالث صوره كما يلي :-

نأتي إلى إدراج الجزء الثاني من قائمة "خطط الاستضافة"

قم بإدراج جدول اخر بنفس القيم اسفل الجزء الاول من القائمة

ثم قم بتقسيمه ايضا الى ثلاث اعمده كما يلي :

بعد ذلك قم بإدراج الثلاث صور الخاصة بالجزء الثاني من قائمة "خطط الاستضافة" كخلفية كما يلي :-

نأتي إلى إدراج الجزء الثالث من قائمة "خطط الاستضافة" ,

قم بإدراج جدول مره اخري ثم قم بتقسيمة الى ثلاث اعمده

ثم قم بإدراج الجزء الثالث كما يلي :-




وبهذه الخطوة قد انتهينا من مرحلة إدراج القوائم

نأتي إلى آخر مرحلة وهي إدراج ال Footer ,

قم بإدراج جدول بهذه القيم :-





ثم قم بتقسيمه إلى ثلاث أعمده

وقم بإدراج الثلاث صور الخاصه بال Footer كما يلي :-

وبهذه الخطوة قد انتهينا من إدراج جميع الصور الخاصه بالتصميم , والمرحلة القادمة إن شاء الله هي كيفية إدراج الروابط الخاصه بكل زر وتصميم الصفحات الفرعية .

==================

موعيدنا ان شاء الله في اللقاء القادم والجزء الرابع من العنصر الرابع في الدورة وهو تركيب الاتصميم في برنامج الفرونت بيج.

[sar17e]

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

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

سوف نقوم بإدراج الروابط الخاصه بكل زر :-

اختر من قائمة البرنامج view ثم ثم Toolbars ثم Pictures كما في الصوره :-

ستظهر لك هذه النافذة اختر منها الاداه الآتية :-

ثم قم بالتحديد بها على زر الرئيسية سيظهر لك نافذه اكتب بها رابط الرئيسية وهوindex.htm كما بالصوره :-

وكذلك نفس الخطوات في زر المنتدى لكن الرابط حسب رابط المنتدى الخاص بك vB مثلا ,

أما بالنسبة لزر الاستضافة فقم بتسميته بإسم الصفحه الفرعية التي تريدها وليكن host.htm , وأيضا زر اتصل بنا .

نأتي بعد ذلك الى تغيير رابط الصوره اضغط على Code وهو أسفل البرنامج كما يلي

ثم غيرجميع روابط الصوره من
file:///C:/--------s%20and%20Settings/MicroTheme%20™/Desktop/newdesign/images

الى images فقط وذلك كما في الصوره :-

افعل ذلك مع جميع الصور ,

وللاختصار وتغيير جميع الصوره مره واحده اضغط من الكيبورد Ctrl + f ثم replace

كما يلي :-

ثم اضغط Replace All

بعد ذلك ارجع إلى التصميم نفسه ثم قم بحفظ العمل كما يلي

اضغط من قائمة البرنامج file ثمsave as ثم اختر المجلد الخاص بنا وهو newdesign بأسم index.htm

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

أما بالنسبة لصفحة الاستضافة فقم بتصميمها بالشكل الذي تريده عن طريق برنامج الفرونت بيج وبعد الانتهاء منها قم بحفظها في المجلد الخاص بنا وهو newdesign بأسم host .htm

وكذلك نفس الخطوات مع زر اتصل بنا وبذلك أصبح لدينا ألان في مجلد newdesign مجلد Images وثلاث صفحات