كيف تبني موقعك الإلكتروني على الإنترنت بنجاح

بداية

هل بناء المواقع بالأمر الصعب ؟

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

الخطوات الرئيسية لبناء موقع :

• خطة العمل للموقع.
• حجز مساحة على الإنترنت وحجز النطاق (عنوان الموقع).
• بناء وتصميم الموقع.
• تعبئة محتوى الموقع وتحديثه بشكل مستمر.
• الإعلان والظهور الفعلي للموقع للحصول على الإنتشار المطلوب.
• طرح الإعلانات في الموقع.
• صيانة الموقع وتحديثه.

خطة العمل للموقع

لماذا تريد موقع ؟ ماذا سيفيدك الموقع ؟

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

1. لماذا أحتاج موقع إلكتروني ومالهدف منه؟
2. هل سأحتاج إلى تحديث الموقع بشكل دائم؟
3. هل سأبيع منتجات في الموقع؟
4. هل سأستخدم الموقع لأجذب إنتباه العملاء والزبائن؟
5. هل سيكون الموقع مجرد بروشور او كعرض نبذه عن الشركة فقط؟
6. ماذا سيتوقعون زوار الموقع أن يجدوا فيه؟
7. هل سأقوم بعمل نشرة إخبارية للموقع؟
8. ماذا أحتاج وكم سأدفع للموقع؟
9. هل سأبنيه بنفسي أو أكلف شركه تقوم به بالكامل أو تقوم بجزء وانا أقوم بجزء؟

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

قف! هناك شروط يجب توفرها في الموقع قبل البدء ويجب أن تكون في الحسبان

1. أن يكون مفيداً
2. أن يكون للموقع هدف واضح
3. أن يكون الموقع سريع الفتح سريع التعامل معه سهل إستخدامه
4. ان توفر السهولة في تصفح أقسام الموقع مع سهولة وقابلية الوصول السريع كإضافة الأقسام الرئيسية أعلى الصفحة وأسفل الصفحة وإضافة رابط الرجوع إلى الصفحة الرئيسية…ألخ
5. أهم ما في في الموقع هم الزوار والمستهدفين, اعطهم إهتمامك بوجود كل ما يمكنهم ليتفاعلوا مع الموقع.
6. الصور يجب أن يتم حفظها بأقل حجم ممكن لتحميل الصفحة بأسرع وقت ممكن مع الحفاظ طبعاً على دقة الألوان لكي لا يكون التصميم غير جميل.
7. أستخدم جزء علوي وسفلي ثابت لجميع صفحات الموقع لكي لا يضن الزائر انه دخل على موقع آخر أثناء التصفح ويسبب في تشتيته.
8. في المحتوى النصي يفضل أن تكون ألوان الخلفية بيضاء
9. أستخدم ستايل موحد للموقع كألوان نصوص وأنواع خطوط ثابته.

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

• بناء موقع تجاري (Business Websites)
  عادة يتكون الموقع من هوية الشركة وتعريف عنها مع الخدمات التي تقدمها الشركة.
• بناء موقع للتجارة (Online Business)
  هو موقع صمم ليقوم بهدف تجاري على الإنترنت مثل Amazon, Ebay …
• بناء موقع صحفي (Publishing Website)
  يتكون الموقع من صحيفة إلكترونية ونشرات أخبارية ومقالات متخصصة.
• بناء موقع يقدم خدمات إلكترونية (Services Website)
  مثل المواقع التي تقدم خدمات الـ Web 2.0 ومواقع البنوك التي تقدم خدمة التداول والخدمات الترفيهية وغيرها
• بناء موقع شخصي (Personal Website)
  موقع لشخصك يتكلم عن نفسك ولتضيف فيه مقالاتك وتتميز به

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

ومن الجيد القيام بعمل Blueprint وهي عبارة عن صورة توضح الموقع كـ Sketch أي تخطيط لشكل الصفحة وتنسيقها ( لكل صفحة )







حجز مساحة على الإنترنت وحجز النطاق



ما هي مساحة الإنترنت ؟

هل لديك فلاش مومري ؟ نعم, هذه مساحة تكون متصله على الإنترنت وفيها ملفات موقعك يشاهدها زوار الموقع.
فالمساحة عبارة عن مساحة متوفرة في الإنترنت وهي مساحة مأخوذة من جزء مساحة السيرفر من الإستضافة التي ستطلب منها حجز المساحة فلذالك لحجز مساحة إنترنت يجب عليك البحث عن مواقع الإستضافة لتستضيف موقعك لديهم بأخذ مساحة من السيرفر الخاص لهم, تختلف أسعارها ومواصفاتها ومميزاتها على حسب الشركات.
قد يضن البعض أن هذه هي آخر خطوه يتم تنفيذها لكن حجز النطاق يجب تنفيذه بأسرع وقت ممكن في حال توفره لأنه نادراً ما تجد النطاق المناسب وغير محجوز حيث أن هناك أكثر من 30 ألف دومين يتم تسجيله يومياً !
فمن الضروري حجز الدومين مباشرة في حال توفر الأسم المطلوب, وبالنسبه للمساحة قد تقول سأخسر عليها عدة أشهر فلماذا لا أحجز المساحة لاحقاً بعد ما أنتهي من العمل بشهر أو شهرين, لكني أرى أنه من الأفضل حجز المساحة مع الدومين في وقت واحد وتجديدهم مره واحده , وايضاً من الأفضل جعل الموقع شغال وكتابة (قريباً) ليتشجع الزائر لزيارة الموقع ويكون له ضهوره في الإنترنت مع التحديث المستمر وذالك في حين حجز الدومين.
 
كيف أختار شركة الإستضافة المناسبة ؟

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

1. مواصفات السيرفر الذي سيتم إستضافة موقعك فيه ( سرعة السيرفر , الرام , كم عدد المواقع التي ستكون في السيرفر , سرعة الإتصال بالإنترنت في السيرفر )
2. نوع نظام التشغيل الخاص بالسيرفر ( ويندوز سيرفر , لينكس )
   ويندوز سيرفر : يفضل اختيار للمواقع التي ستبرمج بتقنية ASP .NET , اما لينكس عند استخدام لغة البرمجة PHP يفضل حجز في سيرفر لينكس لأنه أرخص وهذا ما يستخدمه أكثر المواقع, ويدعمونه الناس بحكم انه يستخدم نظام تشغيل وبرنامج سيرفر ولغة برمجة وقواعد بيانات مجانية ومفتوحة المصدر وتسمى بـ LAMP إختصاراً لـ Linux و Apache و MySQL و PHP.
3. هل لديك ملفات كثيره وكبيرة الحجم تضيفها في موقعك إذاً ستحتاج إلى مساحة موقع كبيرة, أمثلة على مساحة الموقع ( 500 ميجا, 1 جيجا, 2 جيجا… ).
4. هل سيكون هناك ضغط كبير على الموقع مثلاً يكون هناك ملفات كثيره يتم تحميلها وتنزيلها في الموقع مثل مقاطع فيديو وصوتيات ؟ ستحتاج إلى باندويث شهري عالي والباندويث هو مساحة نقل البيانات يتم تصفيره شهرياً بحيث تكون محدوده لكل موقع لكي يكون الضغط على السيرفر متوازي لجميع المواقع ولا يسبب في إنهيار السيرفر من زيادة حجم نقل الملفات لديه, أمثلة على مساحات نقل البيانات ( 50 جيجا شهري, 100 جيجا شهري… ).
5. عدد قواعد البيانات المتاحة, بعض شركات الإستضافة تقدم لك عروض بسعر رمزي جداً وقد تندهش بدايةً ولكن في الأخير تتفاجئ انك لا تستطيع تركيب منتدى أو مدونة لأن ليس لديك العدد اللازم من قواعد البيانات المتاحة لموقعك , فعدد قواعد البيانات المتاحة للموقع مهمة على حسب إحتياجك.
6. يجب عليك أن تختار شركة الإستضافة عن تجربه سابقه من زملائك أو سؤال الشركة المستضيفة بالمواقع التي لديها والتواصل مع اصحاب المواقع للسؤال عن أداء السيرفر الخاص بالإستضافة وفي الدعم الفني للشركة المستضيفة في حال انه يعملون بالشكل المطلوب, لكي تزيد ثقتك بالشركة, وتستعلم عن عيوبها ومشاكله لو كانت هناك لديها اي مشاكل.

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

الدراسات التي قمت عليها هي من ناحية ( السعر , مواصفات وثبات وقوة السيرفر , الدعم الفني المتواصل .. )


عربياً :

• القافلة العربية ( لأنها شركه عريقه وتميزت بمده قصيرة وتتميز بالدعم والمواصفات القويه مع الأسعار المناسبه للجميع , وطبعاً لأن الشركة لناس اعرفهم )
• مربع
• بوابة العرب
• ترايدنت

أجنبية :

• Web Host 4 Life
• GoDaddy
• i Web
• Discount ASP.NET

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

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


لا يشترط لك حجز النطاق من الشركة المستضيفة للمساحة , بل يمكنك حجز النطاق عن طريق الشركات الأم التي تقوم بتسجيل النطاق بشكل مباشر بحيث أن شركات الإستضافة تعتبر شركات وسيطه لحجز النطاقات , ومن الشركات الرئيسية لحجز النطاقات :

• Godaddy
• Register
• Alregister (موقع عربي)

والتي تعتبر مرخصه من قبل هيئة الإنترنت للأسماء والأرقام المخصصة (ICANN) والمواقع التي تكون مرخصة تحمل الشعار التالي :

بعد حجز المساحة مع حجز النطاق للموقع سيتم تسليمك بيانات الموقع من اسم المستخدم وكلمة المرور ورابط لوحة التحكم للموقع من قبل الشركة المستضيفة ليمكنك من لوحة التحكم إدارة ملفاتك وإدارة بريدك الإلكتروني الخاص بالموقع وإدارة قواعد البيانات….ألخ.
طريقة حجز موقع ( إستضافة و نطاق ) بالتفصيل

حبيت اشرح كيفية حجز مساحة وعنوان إنترنت عن طريق الإنترنت للأشخاص الذين يودون معرفة ذالك بالتفصيل وبكل سهولة
وبحكم اني احب التعامل مع القافلة العربية فسأشرح لكم طريقة حجز مساحة ودومين بالصور والخطوات اللازمة
اولاً أفتح موقع القافلة العربية http://www.alqafelh.com هذا الموقع لم يعد يدعم الإستضافة يمكنك استخدام التوكيلات المحدودة أو مربع جميعهم يستخدمون نفس نظام الطلبات الموجود في الشرح
والشرح يعتبر لجميع مواقع شركات الإستضافة ولكن حسب طريقتهم الخاصة فيمكنك الإستفادة من الشرح بشكل خاص وبشكل عام لجميع الشركات للإستضافة
ستجد في الصفحة الرئيسية هذا النموذج اكتب عنوان موقعك واختر الأمتداد ثم اضغط Enter بالكيبورد او اضغط على زر الأسهم

سيطلب منك كتابة الكود الأمني

عندما يكون النطاق غير محجوز تظهر لك هذه الرسالة , أضغط ( أطلب الأن )

الأن تم إضافة طلب الدومين , ننتقل إلى حجز المساحة , إضغط على الرابط الأول لحجز الإستضافة

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

الأن تم حجز المساحة أضغط ( المحاسبه ) للإنتقال إلى الحساب

في حال انك لم تقم بتسجيل الدخول يمكنك تسجيل الدخول إذا كان لديك حساب سابق او التسجيل مباشره بحساب جديد

تم إنشاء الفاتورة , الأن يجب عليك تحويل المبلغ ثم تأكيد التحويل لتنفيذ الطلب.

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

بناء وتصميم الموقع

الأن نأتي إلى بناء وتصميم الموقع , وهو الجزء الأصعب في الموضوع,


يتم بناء الموقع وتصميمه على أسس أوليه يجب عليك تحديدها :

• هل سيكون الموقع عبارة عن برنامج منتج جاهز
  تقوم بتركيبه أو تكلف أحد بتركيبه لك ؟
  مثل :
  – مدونة Wordpress
  – منتديات vBulletin
  – منتديات phpbb
  – مجلة Joomla
  – ألخ …
  تقوم بتحميل ملفات البرنامج وتركيبها في موقعك وعمل Install أو Setup من خلال الموقع هناك إعدادات لازمة يجب عليك عملها مثل إنشاء وربط قواعد البيانات,
  ((سأتطرق إلى طريقة تركيب كل برنامج بالتفصيل لاحقاً في موضوع آخر))
  لكن في هذا الموضوع سأتطرق لكيفية عمل موقع او مدونة خاصة بك عن طريق البرنامج الشهير Wordpress.
  
• أم سيكون برمجة خاصة تقوم ببرمجة الموقع من الصفر حتى النهاية , سواء أنت أو شركة برمجة خاصة.

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

لغات البرمجة كثيرة منها :

• PHP
• ASP .NET
• Python
• Ruby
• …..

تتميز PHP بأنها لغة برمجة مفتوحة المصدر ومجانية الإستخدام سهلة التعلم وبسيطة.
اما ASP .NET غير مجانية وغير مفتوحة المصدر لكنها لغة برمجة قوية وسهلة في نفس الوقت لوجود برنامج خاص لها من إضافة أدوات جاهزة لتعديل في الخصائص بها لعمل موقعك.
أختر ما يناسبك حسب إحتياجك وابدأ في برمجة الموقع.
اعمل موقع مدونة Wordpress مع تصميم ستايل خاص بك بالفوتوشوب وتركيبه

بسم الله نبدأ
المساحة في موقعك
طبعاً أنا أعتقد بأن لديك مساحة على الإنترنت أما في حال ليس لديك يمكنك زيارة الموضوع السابق من سلسلتنا لتتعرف على أسس حجز مساحة على الإنترنت وحجز نطاق دومين بشكل عام
تحميل ملفات مدونة Wordpress
الأن قم بتحميل آخر نسخة معربة من مدونة Wordpress من الموقع الرسمي العربي الخاص بالبرنامج :
http://ar.wordpress.org
اضغط على (( Download WordPress )) لتحميل آخر نسخة من المدونة
سيكون الملف مضغوط بإسم (( wordpress-2.6.1-ar.zip ))
قم بفك الضغط سيظهر مجلد بداخل الملف المضغوط بإسم (( wordpress ))
داخل المجلد ملفات كثيرة خاصة بالبرنامج , الأن كل ما يهمك هو ملف (( wp-config-sample.php ))
أولاً قم بتغيير اسمه إلى (( wp-config.php )) ثم افتح الملف
كل ما يهمك في هذا الملف هو الثلاث سطور التالية :
define(’DB_NAME’, ‘putyourdbnamehere‘); // اسم قاعدة البيانات
define(’DB_USER’, ‘usernamehere‘); // اسم المستخدم لقاعدة البيانات
define(’DB_PASSWORD’, ‘yourpasswordhere‘); //كلمة المرور لقاعدة البيانات
هذه البيانات يجب عليك تعبئتها بعد إنشاء قاعدة البيانات في موقعك عن طريق لوحة تحكم موقعك المقدم من شركة الإستضافة التي إستضفت فيها
لذالك يجب علينا الأن إنشاء قاعدة بيانات جديدة وإنشاء مستخدم جديد لقاعدة البيانات أو إستخدام مستخدم سابق تم إنشاءه وربط المستخدم بقاعدة البيانات ,
قد تكون أمور قاعدة البيانات لديك صعبه حالياً لكن لا تخف , سنقوم خطوه بخطوه تفصيليه بإذن الله لطريقة إنشاء قاعدة البيانات وربطها بمستخدم لكتابتها في ملف wp-config.php
ولأي إستفسارات لا تتردد بالرد هنا
إنشاء وربط قاعدة البيانات
أفتح لوحة تحكم موقعك التي تم إرساله لك عن طريق الإستضافة , في الغالب يكون هو العنوان التالي : http://www.????.com:2082
بعد تسجيل الدخول إلى لوحة تحكم الموقع, ستظهر لك لوحة التحكم إبحث عن قائمة إدارة قواعد البيانات MySQL وفي حالة تستخدم لوحة التحكم نفس التي أستخدمها فستكون الصور واضحه لك لأن لوحة التحكم تختلف من إستضافة إلى أخرى ولكن المتعارف عليها هي لوحة التحكم CPanel

أضغط على ((إنشاء قاعدة MySQL وإسم مستخدم وربطهما))
في الخطوة الأولى ستظهر لك صفحة تطلب منك كتابة أسم قاعدة البيانات , طبعاً نكتبها بالإنجليزي بأي أسم نريده , فمثلاً انا كتبت wpdb ثم أضغط على الخطوة التالية

في الخطوة الثانية اكتب اسم المستخدم وكلمة المرور ثم أضغط (( الخطوة التالية ))

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

الأن تم إتمام العملية بنجاح , ستظهر لك هذه الرسالة

نحن انشأنا قاعدة بيانات واسم مستخدم بإسم wpdb فيكون اسمه althari_wpdb فما هو althari ? هو اسم المستخدم الذي دخلت به عن طريق لوحة التحكم فيتم ربط قاعدة البيانات بإسم المستخدم لكي يعرف بأن قاعدة البيانات خاصة بك , بحيث لا تنسى ان موقعك مستضاف في سيرفر الشركة التي تحتوي على مواقع كثيره فاسمك المستخدم يتم ربطه بقاعدة البيانات الخاصة بك.
الأن انتهينا من 1/ إنشاء قاعدة البيانات 2/ إنشاء اسم المستخدم لقاعدة البيانات وقمنا 3/ بربطهما مع بعض, هذه الثلاث خطوات الرئيسية في تركيب اي برنامج يستخدم قاعدة بيانات
طبعاً الأن بقي لدينا كتابة معلومات قاعدة البيانات في ملف wp-config.php الخاص بالإتصال بقاعدة البيانات
كالتالي :
define(’DB_NAME’, ‘althari_wpdb‘); // اسم قاعدة البيانات
define(’DB_USER’, ‘althari_wpdb‘); // اسم المستخدم لقاعدة البيانات
define(’DB_PASSWORD’, ‘dfsert34536df!*#‘); //كلمة المرور لقاعدة البيانات
قم بحفظ الملف
الأن علينا نقل ملفات البرنامج إلى الموقع … ناخذ استراحة ونرجع لكم ,
( اذكر الله , يذكرك , لا إله إلا الله , محمد رسول الله )
نقل الموقع إلى الإنترنت بالـ FTP
نرجع بعد الإستراحه القصيرة , الأن لكي نرفع الملفات هناك طريقتين, عن طريق لوحة تحكم الموقع أو عن طريق برنامج FTP
طبعاً أفضل طريقه هي عن طريق برنامج FTP لأنه أسرع بكثير ومريح جداً لعرض الملفات والمجلدات,
هناك برامج كثيره FTP لكن انا شخصياً أستخدم برنامج بالنسبه لي أفضل برنامج اولاً حجمه خفيف جداً جداً ثانياً سريع جداً جداً جداً ثالثاً مجاني جداً حلوه مجاني جداً , عموماً واللي عاجبني اكثر انه مو برنامج بل هو إضافة عن طريق متصفح FireFox الشهير, واسم الإضافة FireFTP يمكنك تحميله بالضغط على الأسم.
بعد تحميله قم بفتحه عن طريق (( الأدوات >> FireFTP ))
ستجد على يمينك مجلدات جهازك وعلى يسارك مجلدات موقعك لكن فارغه لأنه لا يوجد موقع متصل به أنت الأن لذالك يجب علينا إنشاء حساب لموقعك
الأن لإنشاء حساب جديد لموقعك أضغط على القائمة الثانية أعلى اليمين وأضغط على Create an account … كما هو موضح بالصورة

ثم ستظهر لك نافذه قم بتعبئة بيانات موقعك كما في الصورة التالية

ثم أضغط موافق
أختر اسم الحساب الذي أنشأته وأضغط Connect كما في الصورة

الآن ستظهر لك مجلدات على يسار البرنامج وهي مجلدات موقعك , لكن ليست المجلدات التي في www.???.com بل عند الإتصال بالإنترنت يجب عليك الدخول إلى مجلد www او public_html كلهم يودي إلى نفس المجلد لكن www مجرد إختصار لكي تفهم بأن داخل هذا المجلد هو الملفات الرئيسيه للموقع الذي تدخل به من هنا www.???.com
لذالك ندخل على www ثم سنجد هنا المكان الذي نضع فيه ملفات المدونة بإمكانك نقل الملفات التي بداخل مجلد wordpress من المدونه هنا لكي تفتح المدونه بهذه الطريقه
www.???.com
او يمكنك إدخالها داخل مجلد جديد بإسم myblog مثلاً لتصبح المدونه كالتالي
www.???.com/myblog
فلديك الخيار اين تضع مدونتك
فلو قلنا سنضعها في الموقع بشكل مباشر سنقوم بفتح مجلد wordpress من القائمة التي على اليسار ثم تحديد جميع ملفات ومجلدات داخل المجلد والضغط على السهم => يسار لكي يتم نقلها , وتأكد بأنك فاتح على مجلد www او public_html ليتم نقلها داخل الموقع, كما في الصورة التالية :

بعد الإنتهاء من النقل , الأن تم نقل جميع ملفات المدونة إلى موقعك لكن لا تعمل حتى الأن يجب علينا إجراء Install لها لكي تعمل
إعدادات تركيب المدونة
بكل سهوله نفتح الموقع تبعنا www.???.com راح ينقلنا مباشره من دون ما تشعر إلى www.???.com/wp-admin/install.php
اذا كانت هناك مشكلة في الإتصال بقاعدة البيانات ستظهر لك هذه الرسالة :
Error establishing a database connection
فيجب عليك التأكد من بيانات قاعدة البيانات وكتابتها بالشكل الصحيح
لكن في الغالب ستظهر لك هذه الصفحة

اكتب اسم مدونتك , وبريدك الإلكتروني

! انتهينا , تم تركيب مدونتك بنجاح والحمد لله , طبعاً تجد مكتوب اسم المستخدم admin وكلمة المرور ( أكيد غيرت الباسورد لا تحاولون تدخلون في موقعي ككككهههههههههه )
ويتم إرسال نسخه من معلومات الدخول إلى بريدك.
أضغط على ( دخول ) لكي تتجه إلى لوحة تحكم مدونتك ,

اكتب اسم المستخدم وكملة المرور , وسجل دخولك
ومرحباً بك في عرشك على الإنترنت

اعتقد كل شي في لوحة التحكم واضح وبالعربي , لو تبي تدون أضغط ( تدوين ) لو تبي تضيف أصناف إضغط ( إدارة المحتويات ) ثم ( تصنيفات ) ثم أضف تصنيف … ألخ

تطرقنا في الموضوع السابق في الجزء الثالث إلى تركيب مدونة ووردبريس والتعامل مع الـ FTP وكل ما يتضمن بدايتك لإنشاء موقع بسيط, وقبل التطرق إلى ( تصميم ستايل خاص بالمدونة فنياً ) بالفوتوشوب وبالـ CSS و XHTML و القوالب, سأتطرق إلى معرفة اساسيات التصميم أولاً كأفكار ومقاييس قبل أن نتطرق إليها فنياً وعملياً فمن المهم معرفة أصول التصميم واساسياته.
 
تصميم المواقع

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

Web 2.0 في تصميم المواقع الإلكترونية

من الأساسيات الأولى هي أن تصميم موقعك يجب أن يتوافق مع تصاميم الـ Web 2.0 الحديثه المحدثه
لماذا سميتها بالحديثه المحدثه ؟ , لأنه أي تقنيه جديده متطوره أو فكرة أو نظرية تدخل عالم النت يتم تصنيفها داخل Web 2.0 بحكم انه تم وصف هذا المعيار بمواصفات ثابته لمستقبل النت الذي تم دراسته بوضوح شامل
ولكي يكون موقعك موقع يعاصر التطورات الجديدة ويتميز بواجهة بسيطة وجذابة وعملية في نفس الوقت وهذه نوعية المواقع التي تدوم دائماً يجب عليك إتباع شروط Web 2.0
ماهي شروط Web 2.0

من الشروط والمقاييس التي يجب الإهتمام بها في التصميم للموقع لكي تتطابق مع مواقع الـ Web 2.0 هي :


كتصميم فني

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

ويمكنك الإبداع بعد ذالك كما تحب لكن على أن لا تكون مخالفه للأمور المذكوره أعلاه مثل إضافة صور كثيره ومزحومه في الموقع … الخ


كأكواد

• إعتماد عمل التصميم بإستخدام المعايير القياسية المعتمدة في كتابة وسوم لغة الترميز XHTML و خصائص لغة الأنماط CSS بالشكل الصحيح كاملاً
  وذالك لكي يعمل وينعرض التصميم بشكل صحيح في جميع المتصفحات Explorer و FireFox و Chrome و Safari .. ألخ
• عدم إستخدام الجداول (Tables) في تصميم وتنسيق الموقع بل إستخدام (Divs) وهذه نقطه مهمه جداً حيث ان الـ Divs يعطيك حرية في رؤية عناصر الـ XHTML بشكل سلس وسهل.
• فصل التصميم في ملف مستقل بأكواد CSS حيث يحتوي على جميع خصائص التصميم للموقع لكل الصفحات

وهنا مثال بسيط قمت بعمله يبين الشروط التي طرحتها من شروط Web 2.0 كتصميم

بالنسبه لعملية كتابة الوسوم والخصائص للغة الترميز XHTML ولغة الأنماط CSS التي تم إعتمادها في شروط Web 2.0
يمكنك رؤية الصورة التالية التي توضح بشكل أكبر وبشكل مختصر طريقة عملها واندماجهما بأسلوب أجده شيق وجميل.

ويمكنك مشاهدة مواقع أنشأت على أساس Web 2.0 من هذا الدليل go2web20.net
خطوات تصميم الموقع :

• التصميم الفني : يتم تصميم الموقع بالتصميم الفني بإستخدام أحد برامج التصميم كالبرنامج الشهير Photoshop.
• تقطيع التصميم : يتم تقطيع التصميم بإستخدام برنامج التصميم كذالك كالـ Photoshop.
• كتابة وتركيب التصميم بإستخدام لغة الترميز XHTML ولغة التصميم CSS في صفحة الإنترنت.

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

تعبئة محتوى الموقع وتحديثه بشكل مستمر أو توفير مسؤليين عن أقسام معينه لمتابعة الزوار وتنشيط الموقع


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

يجب عليك تحديد المواقع التي ستعلن فيها بشكل مدروس , فمثلاً لو كان الموقع موقع سياحة وسفر فمن الأفضل لك مثلاً أن تعلن عن موقعك في موقع كبير عن السفر مثل (العرب المسافرون) أما إذا كان موقعك عن تزيين السيارات مثلاً فالإعلان الأفضل سيكون في (شبكة السيارات العربية) وإذا كان الموقع عن محل جوالات مثلاً أو موقع لبيع الجوالات فالموقع الأفضل للإعلان فيه مثلاً (جوال العرب) أما إذا كان موقعك يعلن عن بيع أجهزة حاسب آلي وأجهزة تقنية فالإعلان الأفضل لك (عالم التقنية) مثلاً … وإلى آخره… , فالإعلان في المواقع المشهورة والكبيرة من الأمور المهمة لنشر الموقع , لكن من المهم جداً أيضاً أن يكون الموقع بتصميمه وبمحتواه و فكرته يجذب بها الزوار كذالك لكي لا تخسر أموالك بالإعلانات بدون نتيجة, فمثلاً لو كان الموقع بيع جوالات اولاً تسهيل عملية الشراء للزائر, ثانياً وضع عروض مخفضه جداً في البداية … ألخ
طرح الإعلانات في الموقع

من المهم جداً أن يتوفر في موقعك إعلانات للربح منها , قد يحصل ذالك بعد الإشتهار في الموقع لكن الإستفادة من إعلانات مثل إعلانات Google AdSense.
ما هي إعلانات Google AdSense؟

هو عبارة عن نظام إعلانات يقوم بعرض إعلانات الشركات المعلنة في قوقل سواء إعلانات نصية أو إعلانات صور وعند قيام احد الزوار بالضغط على الإعلان من موقعك يتم إحتساب مبالغ مادية تكسبها من خلال موقعك على حسبب عدد الزوار, فهذه خدمة جيدة لكسب المال من موقعك من دون عناء, في حال تعدى المبلغ 100 دولار يتم تحويل المبلغ لك شهرياً.
مثال على الإعلانات ( في عالم التقنية تجد إعلانات Google AdSense ) على يسار الموقع ويمكنك إضافته في أكثر من مكان والتحكم في تصميمه.
كالمثال التالي تم أخذ الكود وإضافته هنا لأريكم المثال

صيانة الموقع وتحديثه

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


يتكون الجزء الخامس من النقاط التالية :

• تصميم الموقع أو المدونة.
• تقطيع التصميم بعد تصميمه.
• تركيب التصميم في الموقع او المدونة.

بسم الله الرحمن الرحيم , نبدأ
تصميم الموقع أو المدونة

سنبدأ في هذا الجزء بتصميم الموقع أو المدونة.
هناك أمور يجب ان نحددها في تصميم الموقع مثل لون الموقع وتنسيق الموقع وأن نحدد العرض المناسب للموقع,
هل نريده متمدد بنسبة 100% او نريده ثابت بمقاس واحد ؟ أغلب المواقع المشهورة تستخدم تصاميم ذات عرض ثابت مثل Yahoo, Wordpress, Facebook, YouTube وطبعاً الموقع الشهير عالم التقنية
لذالك سنقوم بعمل تصميم ذات عرض مقاس ثابت , مقاسات العرض الثابته يفضل أن يكون أقصى عرض 1003px لكي تكون مناسبه لأكثر الشاشات المستخدمه حالياً وهذا ما يتم عمله لأكثر المواقع الشهيره, سابقاً كانت تستخدم مقاسات العرض 779px لكي تتناسب مع دقة الشاشة 800*600 لجميع المستخدمين لكن بدأت هذه الظاهره تنقرض وهذا لأن أغلب اذا ما كان كل المستخدمين يستخدمون حالياً مقاس دقة شاشة اكبر من 800*600 مثل 1280*800.
هذا هو تصميمي الذي سأشرح كيفية عمل مثله بالفوتوشوب وسأشرح طريقة تقطيعه وتركيبه كمدونه

أضغط على الصورة لتكبيرها

وطبعاً بعد ما نخلص من عمل وتقطيع الموقع راح أطرح الستايل مجاناً للجميع وكذالك مصدر الفوتوشوب موجود في هذا الموضوع
بعض الأجزاء في التصميم مثل اسم الموقع والجمله التي تحت اسم الموقع وعناوين المقالات وعناوين القوائم الجانبية والنصوص المختلفه توضيحيه للتصميم وهي عباره عن امثله بحيث تقوم بتصميمها لكي ترى النتيجه النهائيه وبعد تقطيع واخذ الصور من التصميم تكتب النصوص بصيغة HTML وتنسق نوع الخطوط وألوانها بإستخدام CSS بنفس الخطوط والألوان التي استخدمتها في التصميم لكي تتناسق بالشكل المطلوب.
الأن بسم الله نبدأ
نفتح الفوتوشوب
نفتح صفحة جديدة بالضغط من القائمة العلوية ( File -> New ) أو ( ملف -> جديد )

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

الان بعد إنشاء الصفحة نختار أداة المربع من هنا

ونرسم مستطيل كبير في أعلى الصفحة بهذا الشكل تماماً , لون المربع يمكنك وضعه أي لون تريده لا يهم

الان من نافذة الطبقات اضغط الزر الأيمن من الفأرة ثم اختر خيارات الدمج او Blending Options وهي على نفس الطبقه التي انشأناها قبل قليل التي تكون طبقة الشكل المستطيل
في حال ان نافذة الطبقات غير موجودة توجه لاعلى القائمة ثم اختر ( نافذة ثم طبقات ) او windows ثم layers

ثم عند فتح النافذة قم بإختيار تغشية متدرجة بالألوان 185ba2 إلى درجة اللون 92c7fd
كما رسمنا المستطيل الكبير في اعلى الصفحة نرسم مستطيل آخر تحته ولكن ارتفاعه اصغر بكثير
باستخدام اداة رسم الشكل المربع التالية :

و في هذه الحاله يفضل ان يكون اللون نفس اللون الموجود بالصورة وهو درجة اللون هذه ( 86c542 ) #

الأن نريد ان نضع على هذا المستطيل الأخضر تعبئة محشيه او قناع مثلاً نقاط بشكل جميل
فبالتالي نفتح صفحة جديدة بالضغط على ملف جديد او file new ثم نحدد المقاس العرض 7 والارتفاع 7 ثم نختار اداة القلم وليس الفرشاة وذالك بالضغط عليه من الأدوات الظاهره لك او اذا لم تكن ضاهرة فبالضغط على الزر الأيمن من الفأرة على اداة الفرشاة ثم اختيار اداة القلم

نختار اللون كما هو موجود في الشكل التالي بدرجة اللون هذه ( c7e4a7 ) # ثم نرسم شكلاً جميلاً بإمكانك عمل كما رسمت او الإبداع بنفسك بكل سهوله بالتنقيط
ولا تنسى ان تكون الخلفية شفافه لكي يضهر اللون الذي سنضع عليه القناع

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

الأن نرجع إلى مستطيلنا الطويل الأخضر ونختار نمط الطبقه بالضغط على الطبقه بالزر الأيمن ثم اختيار خيارات الدمج او Blending Options
نختار نمط تعبئة الحشو ونختار من انواع الحشو وسنجد الحشوه التي انشأناها سابقاً , نختار عليها ثم موافق

سترى ان الشكل المستطيل ظهرت عليه نقشة جميلة ,
الأن نريد ان نصمم خلفية الجزء السفلي من الموقع والذي يسمى بـ (Footer) نقوم بمضاعفة طبقتي المستطيلين بأختيار واحد منهم ثم من لوحة المفاتيح الضغط على CTRL مع اختيار الطبقات التي تريدها وفي حالتنا هذه يكون المستطيل الآخر
ثم نضغط بالزر الأيمن من الفأرة ونختار مضاعفة طبقات او Duplicate Layer

سنجد ان الطبقتين تضاعفت

الأن نختار اداة التحريك او الـ move من ادوات التحكم او بالضغط على لوحة المفاتيح حرف V

طبعاً بما انك قمت بمضاعفة الطبقتين ستكون الطبقتين المتضاعفة لا زالت محدده عليها كما في الصورة السابقه ولكن اذا لم تكن محدده قم بتحديد الطبقتين التي تضاعفت قبل قليل
ثم في الصفحة اسحب الطبقتين إلى الأسفل واقلبهما بالضغط على CTRL + T ثم الضغط على الزر الأيمن من الفأرة واختيار قلب افقي او دوران افقي او Flip Vertical
بعد ذالك نود ان نعكس تدرجات الخلفية التي في المستطيل الكبير لكي يكون تصميماً جميلاً بشكل افضل , فنختار طبقة المستطيل الكبير ونختار على خيارات الدمج او Blending Options ثم في نمط تعبئة متدرجة نضع صح على ( عكس ) او Reverse

ليصبح لدينا مثل هذا الشكل

الأن لدينا خلفية الجزء العلوي (Header) وخلفية الجزء السفلي (Footer) , ونريد ان نصمم خلفية جزء المحتوى او الجزء الوسطي (Content, Middle)
نختار اداة رسم الشكل المستطيل ذو الزوايا المائلة ونختار درجة الميلان 25 بكسل ( درجة الميلان تكون في أعلى القائمة )

نرسم شكل مستطيل كبير في وسط الصفحة يقطع جزء بسيط من الجزء العلوي والجزء السفلي على ان يكون درجة اللون له ( cdeaf9 ) # كما في الصورة التالية

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

مع اختيار خاصية الحدود بمقاس 13 بكسل واللون ( 70a7e1 ) #

لتظهر النتيجة كما في الشكل التالي :

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

والكتابة في اعلى الصفحة في مكان مناسب يكون موازي لبداية خلفية المحتوى ويكون خصائص الخط كالتالي

ومن ثم نكتب في اسفل عنوان الموقع هذا السطر ( الرئيسية | من أنا ؟ | سجل الزوار | إتصل بي ) والذي يمثل القائمة العلوية ونقوم بتحديد الكلمات ووضعها باللون 3372b6

وتحديد الخطوط ووضعها باللون 96c4db لتظهر بشكل جميل وجذاب

بكل بساطه نرسم مستطيل صغير تحت كلمة الرئيسية ( هذا المستطيل يمثل بأنك انت في هذه الصفحة عند الدخول على الموقع ) سنتطرق لكيفية عملها لاحقاً بإذن الله في درس عملية تقطيع وتركيب الستايل في المدونة

الأن بودي ان نضع في الجانب الأيسر من التصميم صورة للـ RSS ويمكنك أختيار صوره متنوعة كثيرة ومختلفة من محرك بحث قوقل للصور من هنا
rss icons - Google Images
ستجد الكثير والكثير من الصور الجميلة والرائعة والممتعة المتعلقة بأيقونات RSS او ما تسمى بالخلاصات
فمثلاً انا اخترت هذه الصورة

نقوم بنسخها بالضغط على الزر الأيمن ثم نسخ او نسخ الصورة من المتصفح ثم لصقها في الفوتوشوب بالضغط على CTRL + V او تحرير ولصق او Edit Paste
ونختار اداة العصا السحرية لنحدد الجزء الأبيض من الصورة بالضغط على الجزء الأبيض ثم من لوحة المفاتيح نضغط Delete

لتظهر النتيجة الجميلة التالية :

لكي يتناسق التصميم من الممكن تغيير لون الصورة بالضغط على CTRL + U ثم اختيار اللون المناسب كما في النافذة من الصورة التالية

لكي نزيد من جمالية التصميم ووضحه نكتب فوق الصورة RSS باللون الأبيض بكل بساطة

الأن خلصنا من محتوى الجزء العلوي باقي التشطيبات عليه مثل ما يقولون ,
فراح نستخدم الفراشي لزيادة تجميل الجزء العلوي او الـ Header
لتصبح النتيجة كالتالي :

ستجد الكثير والكثير من الفراشي من هنا Free Photoshop Brushes at Brusheezy!
وراح اضيف لكم الفراشي المستخدمة في التصميم في نهاية الموضوع
بعد تحميل الفراشي التي تناسبك ستجد طريقة تركيب الفرشاة من هنا
دامنا خلصنا من الجزء العلوي راح نتفرغ للجزء السفلي Footer عشان نتفرغ للجزء الوسطي المتعلق بمحتوى الموقع
نضيف هذا النص في الجزء السفلي في وسط الصفحة ( جميع الحقوق محفوظة powerd by Wordpress تصميم عبدالملك ) اللهم استبدال تصميم عبدالملك بأسمك

الأن نضيف على الجزء السفلي تأثيرات فراشي كما في الجزء العلوي لتصبح النتيجة كالتالي (وكما اوضحت بأن الفراشي ستكون مطروحة في أسفل الموضوع)

الأن ننتقل إلى تصميم الجزء المتعلق بمحتوى الموقع الذي يكون في وسط الموقع

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

الأن احب اوضح بأن القائمة الجانبية دائماً في المدونات تتكون من قوائم ( عنوان ) و ( قائمة خاصة بالعنوان ) او عنوان ( ومحتوى بسيط ) وهذا ما سنقوم بتصميمه
فنبدأ بالعنوان لنرسم خلفية جميله ونوع ولون نص مناسب للعنوان, نختار اداة الفرشاة

ثم نختار من الأعلى شكل الفرشاة من قسم الفراشي الأساسية ونختار شكل الفرشاة هذه

ننشأ طبقة جديدة فارغة من نافذة الطبقات لكي نرسم عليها بالفرشاة

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

لزيادة الجمالية في خلفية العنوان الخاص بالقائمة الجانبية اضفت بالفرشاة باللون الأخضر مستطيل جانبي كالتالي

الأن نكتب نص العنوان باللون الأبيض ونوع الخط Arial و حجم

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

ونرسم مستطيل كالتالي باللون cce7f4

ثم نرسم النقطه الخاصه بالقائمة والتي تسمى Bullet عن طريق اختيار اداة رسم الشكل المربع

ونختار اللون الأخضر 92e33a ونرسم الشكل التالي

هنا أحب أن أوضح بأننا في تصميم المواقع نعمل على تناسق الألوان دائماً وهو علم بحد ذاته ونقطة مهمة جداً في تصميم المواقع
الأن نكتب نص القائمة بكل سهولة ( Tahoma , لون أزرق غامق )

نقوم بمضاعفة الثلاث طبقات الأخيره التي أنشأناها الخط والنقطة والنص ( عملية المضاعفة شرحناها سابقاً ) ثم نحرك الطبقات المضاعفة للأسفل قليلاً كالتالي

نغير كلمة عام إلى برامج او اي قسم مثلاً

ونعيد الخطوتين الأخيرتين لكي نضيف اقسام وتصنيفات المدونة لتظهر كالتالي

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

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

ونفس العمل للخطوتين الأخيرتين لعنوان
روابط و منوعات

تلاحظون بأن تصميم الموقع ليس بالسهولة المتوقعة فتصميم الموقع يأخذ جهد ويأخذ وقت ويأخذ أفكار كثيرة ويأخذ ذوق ويأخذ خبرة !
نرجع لمحور حديثنا الحمد لله خلصنا من القائمة الجانبية وباقي المحتوى التي تكون المقالات من اجزائها عنوان المقالة معلومات عن المقالة ( التاريخ والكاتب والتعليقات ) ونص المقالة وزر ( اقرء المزيد … )
بسم الله نبدأ
نكتب نص ( عنوان مقالة جديدة ) بخط Arial ولون أزرق غامق بخط كبير كالتالي :

نرسم اسفله مستطيل بأستخدام أداة رسم الشكل المربع ويكون باللون الأبيض

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

نكتب داخل المستطيل الأبيض ( المدون : admin عدد التعليقات : 1 التصنيف : غير مصنف ) باللون a0c3ea
كالتالي :

ثم نكتب اسفل المستطيل الأبيض نص المقالة باستخدام نوع الخط Tahoma واللون الأزرق الغامق ( يفضل أن يكون نص المقالة نص صحيح لكي تكون الصورة اوضح لك في رؤية التصميم بشكله الجميل وتنسيقه في حال كان غير ذالك )

الأن نضع لمسة جمالية باستخدام الفرشاة في صندوق المقالة وذالك في المكان الفارغ بجانب عنوان المقالة لتصبح كالتالي ( وكما اعيد تجدون الفراشي في أسفل الموضوع )

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

نضع ( < السابق ) و ( التالي > ) في أسفل المقالات بنوع الخط Arial باللون 60a01b بالحجم 18pt لتصبح النتيجة كالتالي

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

لتحميل الفرشات من هنا

لتحميل مصدر الفوتوشوب من هنا

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

نقوماً أولاً بإخفاء طبقات النصوص مثل عنوان الموقع ( عبدالملك الثاري ) وعناوين المقالات … ألخ
وذالك عن طريق نافذة الطبقات بالضغط على صورة العين لتختفي

طبعاً لجميع الطبقات النصية وكذالك صورة الـ RSS مثلاً لأننا سنقطع الخلفيه
قم بعمل ذالك حتى يصبح التصميم في النهايه ليصبح كالتالي :

الأن قم بإختيار أداة التقطيع

بعد ذالك قم بتحديد الجزء العلوي في وسط الصفحة , كالتالي : ( ستلاحظ ان الفوتوشوب يساعدك في تسهيل عملية التحديد بإختيار المربع بشكل اتوماتيكي وسلس جداً )

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

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

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

ونحدد بقية الصور كذالك مثل صورة خلفية عنوان القائمة الجانبية

ثم نحدد صورة الزخرفة الخاصة بخلفية عنوان المقالة

ثم نحدد الجزء السفلي من التصميم

ونفس ما عملنا بالجزء العلوي من التصميم نقوم بقص الخلفية المتكررة أفقياً كالتالي

ليصبح تقطيعنا في الأخير كالتالي

الأن راح نحفظ الصور اللي حددناها راح يقطعها لنا الفوتوشوب ,
هناك أجزاء من الصور راح يقطعها لنا الفوتوشوب كذالك مثل المربعات المنتشره في التصميم التي لم تحددها , لكن بعد ما نقوم بحفظ جميع الصور المقطعه سنقوم بإختيار الصور التي نريدها ومسح الصور التي لا نريدها بكل بساطه
نكمل الموضوع , اختر File ثم Save For Web Or Devices كما في الصورة التالية

ستظهر لنا نافذة كبيرة , يمكننا عن طريقها تحديد كل صورة تم تقطيعها واختيار الإعدادات المناسبة لها فمثلاً الصور الكبيرة والتي فيه ألوان كثيره وتدرجات كثيره يجب ان تكون ذات صيغة JPG وبجودة 100% اما الصور التي تحتوي على الوان بسيطه من دون تدرجات وصور صغيره نجعلها GIF بعدد ألوان بسيط
هذه الخطوه خطوه مهمه جداً في تصميم المواقع تحديد اقل حجم ممكن مع طبعاً الحفاظ على الجودة
كما في الصور التالية :

في الأخير نضغظ على Save ستظهر لنا هذه النافذة , ننشأ مجلد جديد يكون اسم مجلد الستايل الذي تبنيه

نفتح المجلد نكتب images ثم نضغظ Save

الان تم تقطيع الستايل نتجه إلى المجلد الذي أنشأناه

نفتحه لنجد صور الستايل مقطعه الان علينا ان نحدد الصور التي لا نريدها ونحذفها

لتبقى لدينا فقط الصور التي نريد استخدامها في الستايل والتي حددناها سابقاً في الفوتوشوب

بعد ذالك قم بإعادة تسمية الصور حسب رؤيتك مثلاً
الصورة التي ستكون في أعلى المدونه التي هي images_04.jpg يمكنك تسميتها header.jpg
والصورة التي تكون الخلفيه لها بشكل متمدد التي هي images_2.jpg سمها header_bg.jpg
والصورة التي تكون أسفل المدونه والتي اسمها images_19.jpg سمها footer.jpg
والصورة التي تكون خلفيه لها والتي اسمها images_18.jpg سمها footer_bg.jpg
والصورة التي تمثل عنوان القائمه الجانبية التي اسمها images_14.gif سمها side_title_bg.gif
والصورة التي تمثل خلفية المحتوى والتي اسمها هنا images_08.gif سمها page_bg.gif
والصورة التي تمثل الزخرفه الخاصه بعنوان المقاله والتي باسم images_11.gif سمها title_bg.gif
الان علينا ان نأتي بملفات ستايل ووردبريس لكي ننشأ الستايل الخاص بنا وذالك بنسخ مجلد Default
داخل wp-content/themes/
يمكنك اخذها من مدونتك السابقه او تحميلها من ووردبريس http://ar.wordpress.org
وننقل ملفات الستايل من دون images داخل المجلد الذي انشأناه NiceeeStyle

2/ CSS & XHTML

الان نحذف الملف rtl.css داخل المجلد NiceeeStyle لأننا لا نحتاجه حيث سيكون جميع عملنا على الـ CSS في ملف style.css

الأن نفتح ملف style.css بأي برنامج تحرير

( فقط لكي نعمل إجراءات بسيطه وليس لكتابة الـ CSS ) هذه الإجراءات هي كتابة عنوان الستايل وبيانات تصميم الستايل , أولاً نقوم بحذف جميع أكواد الـ CSS

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

الأن نحفظ الملف ونغلقه
وننقل مجلدنا NiceeeStyle إلى المدونة داخل مجلد wp-content/themes
ثم ننتقل إلى لوحة تحكم المدونة ونختار قسم التصميم من أعلى القائمة ليظهر لنا الستايل الذي قمنا بنقله

راح نغير صورته في الأخير لكن اضغط على اسمه ستايل نايس

شكله حالياً Blank يعني فاضي بدون اي ستايل اضغط على تفعيل ستايل نايس عشان نفعله ثم اضغط تحرير القالب عشان نبدا نعدل على الـ CSS

راح نجد اول ما تضغط على تحرير القالب ملف style.css مفتوح , وطبعاً فاضي حالياً نبي نعدل على الـ XHTML فنروح لملف أعلى الصفحة

هذي الصورة للتوضيح

في ستايلنا ما نحتاج الـ div اللي بالآي دي headerimg لذالك راح نمسحه , ووننقل الـ div اللي بالآي دي page اسفل الهيدر بحيث راح نستخدمه في خلفية المحتوى كما في الصورة التالية

أحب اوضح لكم إذا فهمت التعامل مع الـ XHTML والـ CSS راح تقدر تصمم اي ستايل في العالم بكل سهوله
نكمل شرحنا
نروح لملف footer.php الخاص بأسفل الصفحة ونلقحه مثل الصوره التاليه اهم شي لا تنسون تسكيرة الـ div اللي بالآي دي page اللي سويناها في الهيدر وهي أول سطر في هذا الملف

الان نفتح ملف index.php اللي هو الصفحة الرئيسية , ونغير مثل اللي في الصورة , مجرد تغيير اماكن عشان نضبطها في نفس التصميم اللي سويناه مثلاً التعليقات نخليها فوق وبدال بواسطة نكتب المدون مثل ما سوينا في تصميمنا ومثل ما تم التخطيط عليه

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

الأن ننتقل إلى ملف الستايل style.css ملف التنسيق
المشوار طويل وقد يكون معقد لبعض من لا يعرف الكثير عن CSS
نبدأ بسم الله
أولاً نكتب ستايل اول وسم لدينا وهو body كالتالي

body {
margin:0px;
background:url(images/header_bg.jpg) repeat-x;
}

margin معناتها المساحة الخارجية إفتراضياً راح من دون وضع 0 بكسل راح يكون هناك مسافه بين اي عنصر في الصفحة وحائط المتصفح إن صحت التسميه لكن بوجود margin:0px تعني ان المساحة غير موجوده بين اي عنصر وحدود المتصفح
background: هو الخاصية المتعلقه بالخلفية سواء كان لون او صورة , في حالتنا هذه لون الخلفيه هو الأبيض فلن نكتب اي شي فقط سنضع خلفيه صوره بعنوان images/header_bg.jpg بعد ذالك اضفنا repeat-x هذا معناه ان التكرار أفقي فقط وليس أفقي وعمودي فلذالك ستكون الخلفية بالطول فقط
الأن بعد حفظ الملف ستظهر لدينا خلفية علوية بالصورة التي اخترناها
نكمل الكود المتعلق بالـ CSS
انتهينا من الـ Body ننتقل إلى اللي بعده
مثلاً نبي نخلص من الجزء العلوي اللي هو الهيدر نكتب الآي دي الخاص بالهيدر وهو

#header {

}

نضيف صورة الخلفية الخاصة بالجزء العلوي من التصميم

#header {
background:url(images/header.jpg);
width:733px;
padding-right:30px;
height:218px;
margin:0 auto;
}

لو لاحظنا بأن الصورة header.jpg طولها الاساسي بالعرض 763 بكسل , واحنا كاتبين 733 بكسل ! ليش ؟ لأننا أضفنا padding الـ padding يعتبر من ضمن الطول الخاص بطول الوسم فـ padding-right يكون 30 بكسل و الطول 733 بكسل المجموع يساوي 763 بكسل وهكذا
لماذا وضعنا padding-right ? لكي نضبط مكان عنوان الموقع ويجب علينا وضع الإرتفاع لكي تظهر لنا صورة الخلفية كاملة وذالك بكتابة الـ Height
هناك نقطه أخيرة في هذا الوسم وهو margin:0 auto هذا السطر يعني توسيط الوسم في وسط الصفحة, هناك طريقه كتابه اخرى لكن هذه افضلها بحيث انها من المعايير القياسيه المعتمده كتابةً وجميع ما كتبت لكم في اكود هي خصائص سليمه تعمل في الفايرفوكس والإكسبلورر
ننتقل إلى الخطوة التالية
وقبل ان ننتقل إلى الخطوة التالية أود ان اوضح شيء دائماً في مجال تقطيع وتركيب الستايل يجب عليك ان تنتقل بين كود الـ XHTML و الـ CSS لكي تعرف أسامي الوسوم والآي دي تبعها فمثلاً
الجزء العلوي يحتوي على

انتهينا من الـ header وباقي h1 اللي داخل الهيدر وباقي كلاس description
بالنسبة لـ h1 هو الوسم الذي يحتوي على عنوان الموقع
وبالنسبه لكلاس description هو الوسم الذي يحتوي على النص الذي اسفل عنوان الموقع كجملة او شعار الموقع النصي
ننتقل إلى الـ CSS بكتابة الخصائص المتعلقة بوسم الـ h1 و الدسكريبشن

#header h1 {
margin:0px;
padding-top:25px;
}

#header h1 a {
color:#cee6ff;
}
#header h1 a:hover {
color:#ace15d;
}


الأن ماذا تعني هذه الأكواد
اول سطر هو وسم h1 الذي داخل #header لماذا وضعنا #header لماذا لم نستخدم h1 مباشرة كالتالي

h1 {

}

لأننا نريد تعديل h1 فقط الذي بداخل الهيدر وليس اي h1 آخر , فأحياناً في المقالات والمحتوى قد نكتب عنوان يتكون من الوسم h1 هكذا لن يتأثر لأنه ينطبق الستايل على h1 الذي بداخل header فقط
margin:0px كتبناها في h1 لان h1 بشكل إفتراضي يحتوي على مسافات كثيره ونحن لا نريد هذه المسافات المعقده فقط نريد المساحه التي نحددها فنكتب padding-top:25px لكي نظبط مكان عنوان الموقع ويكون هناك مسافه بين حدود المتصفح عنوان الموقع
قد يسأل شخص ويقول لماذا لم نكتب هذا الكود في داخل header مباشره وليس في h1 فأجيبه وأقول لا بأس بذالك فهناك عدة طرق أهم شي ان نصل إلى المطلوب وبطريقه صحيحة لا تسبب اي مشاكل
ننتقل إلى الجزء الثاني من h1 وهو الذي بجانبه الوسم a وهذا يعني الستايل الخاص بعنوان الموقع عندما يكون رابط او وصلة فسنحدد اللون بكتابة color: ثم رمز اللون المطلوب
وبعدها الجزء الثالث يوجد الوسم a مع :hover وهذا يعني عند مرور الفأرة على الرابط نفذ هذا الستايل وهو تغيير اللون قليلاً فقط
بعد تنفيذ هذا الكود وحفظه سترون بأن النتيجه اصبحت افضل لكن ليست كامله فلدينا مشوار طويل جداً جداً والله يكون بعونكم
هناك بعض الستايلات التي تنفذ على جميع الوسوم المحدده في الستايل مثلاً في روابط ووصلات الستايل جميعها لديها خط اسفل النص من ضمنها عنوان الموقع فعندما نريد في جميع صفحات الستايل ان تكون الروابط بدون خط سفلي ننكتب هذا الكود

a {
text-decoration:none;
color:#3372b6;
}

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

img {
border:none;
}

الأن نرجع للهيدر احنا خلصنا من h1 وباقي description

#header .description {
color:#cee6ff;
font-weight:bold;
}

اعتقد واضح جداً
كذا نكون خلصنا من الجزء العلوي بشكل اساسي ننتقل إلى الجزء السفلي

#footer {
width:763px;
height:121px;
background:url(images/footer.jpg);
margin:0 auto;
text-align:center;
}

#footer p {
margin:0px;
font-family:Tahoma;
font-size:9pt;
font-weight:bold;
padding-top:27px;
color:#3b7abf;
}
#footer p a {
color:#3b7abf;
}
#footer_bg {
background:url(images/footer_bg.jpg);
}
شرحنا معضم الأكواد اللي هنا سابقاً وواضح جداً
فبعد كتابة الكود السابق الخاص بالفوتر كذا تكون انتهيت من الفوتر بشكل كامل كتصميم مثل ما احنا عملناه بالفوتوشوب ممكن تكون بالنسبه لك سهله كذا لكن لما تصمم ستايل خاص اخر ياخذ وقت على بال ما تحدد الخصائص اللي تبي تختارها عشان يضبط معك الستايل غير كذا يعتمد الـ CSS على حسب تعقيد التصميم او بساطته
الأن تقريباً خلصنا الهيدر بشكل أساسي والفوتر بشكل نهائي ننتقل إلى محتوى الصفحة بداية بالخلفيه الخاصه بها وتوسيطها
مثل ما تذكرون احنا نقلنا الـ div اللي له الآي دي page بعد الهيدر وينتهي قبل الفوتر فهو يعتبر الوسم الخاص بمحتوى المدونة
فنكتب الكود

body #page {
width:738px;
padding-right:25px;
background:url(images/page_bg.gif);
margin:0 auto;
padding-top:10px;
padding-bottom:10px;
}

اول شي يمكن تستغرب ليش وضعت اول شي body وليس #page فقط , انا جربت #page اول شي بدون اي سبب ما رضى يتنفذ الكود ليش ما ادري لكن احياناً في عالم الكمبيوتر تجيك اشياء مالها معنى وغريبه ماكانت تصير لك اول حتى اني جربت الكود باستخدام #page فقط بدون body في برنامج تحرير خاص واشتغل طبيعي لكن في المدونة ما رضت معي فالحلول اللي جربتها واشتغلت معي اني اضع body قبل الآي دي وهو الوسم الذي يحتوي على الوسم آي دي page او اغير اسم page عموماً اذا اشتغلت معاكم #page من دون body ممتاز او استخدم هالطريقه او غير الآي دي مثل ما تحب اهم يشتغل عندك
انا قد واجهتني مشاكل غريبه مثلاً ستايل وسم معين ما رضى يشتغل اذا كتبته في مكان معين لكن اذا نقلته إلى مكان آخر في نفس الملف اشتغل !
عموماً نكمل الموضوع
الان داخل المحتوى يوجد هنا المقالات والقائمة الجانبية , راح تلاحظ انها صايره تحت بعض واحنا نبيها تكون جمب يعض
الطريقه كالتالي
الوسم الخاص بالمقالات راح تلاحظ اسمه content في ملف الصفحة الرئيسية فنبدأ فيه بالتالي في ملف التنسيق

#content {
float:right;
width:471px;
}

فيه خاصيه جديده هنا ما شرحناها في اي من الخصائص السابقه وهي خاصية float هذه الخاصيه تجعل الوسم يكون كالنص بحيث اي وسم بعده راح يكون بجانب هذا الوسم لأنه float وليس اسفله بشرط ان يكون الذي بعده ايضاً يحمل خاصية float او هو اساساً نص او اي عنصر يكون inline يعني يسمح ان يكون في نفس السطر اما الوسوم التي لا تسمح تكون block اي انها تأخذ العرض كامل لوحدها
حالياً أضفنا float على content وراح نضيف float على القائمه الجانبيه لكي تصبح المقالات والقائمة الجانبيه جنب بعض
والكود الخاص بالقائمة الجانبية كالتالي :

#sidebar {
float:right;
width:226px;
margin-right:15px;
border-right:1px #70a7e1 solid;
padding:10px;
}

دائماً حط في بالك إذا استخدمت float عشان اي عنصر بعده يجي جمبه بعد نهاية مكان العناصر اللي تبيها خلاص توقف يعني ما يكون جمبه شي لازم تضيف كود clear يعني يوقف عملية الـ float بحيث ان اي وسم آخر يصير تحت الوسم اللي يحتوي على float ويكون بشكل متناسق
فمثلاً بعد الـ content وال sidebar نبي نوقف الـ float ونضع هذا الكود بعدهما , وافضل مكان هو في الفوتر بحيث انه قبل ما نسكر الوسم آي دي page نضع كود الـ clear كالتالي

مدار بواسطة
ووردبريس المعرب

خلاصة التدوينات
– خلاصة التعليقات
عملية. ثانية. –>

clear يعتبر كلاس CSS لذالك يجب ان نضعه في ملف التنسيق كذالك كالتالي :

.clear {
clear:both;
}

الأن لننتهي من القائمة الجانبية نريد ان نعمل القوائم وعنوان القوائم والكود كالتالي :
الخاص بعنوان القائمة

#sidebar ul h2 {
width:205px;
height:22px;
font-size:12pt;
background:url(images/side_title_bg.gif);
color:#f2f8ff;
padding-top:3px;
padding-right:18px;
margin:0px;
margin-top:10px;
margin-bottom:4px;
}

الخاص بالقائمة

#sidebar ul li ul li {
padding-top:6px;
padding-bottom:6px;
padding-right:5px;
border-bottom:1px #cce7f4 solid;
font-family:Tahoma;
font-size:8pt;
font-weight:bold;
}
#sidebar ul li ul {
margin:0px;
list-style:square inside;
color:#92e33a;
}
#sidebar ul {
margin:0px;
padding:0px;
list-style:none;
}

الأن انتهينا من القائمة الجانبية ننتقل إلى المقالات

.post h2 {
margin:0px;
height:35px;
padding-top:4px;
background:url(images/title_bg.gif) no-repeat left;
}

.post h2 a {
color:#205c9b;
}
.post small {
display:block;
background:white;
padding:4px;
border-top:1px #70a7e1 solid;
border-bottom:1px #70a7e1 solid;
font-family:tahoma;
font-size:9pt;
font-weight:bold;
color:#a0c3ea;
}
.post small a {
color:#a0c3ea;
}
.postmetadata {
font-family:tahoma;
font-size:9pt;
text-align:left;
margin:0px;
margin-bottom:5px;
}
.entry {
font-family:Tahoma;
font-size:9pt;
font-weight:bold;
color:#457bb4;
}
اترككم تحللونها بنفسكم صراحه العمليه سهله كلها نفس الخصائص اللي شرحناها سابقاً
كذا نكون خلصنا من المقالات برضوا التي في الصفحة الرئيسية
الأن لننهي الجزء العلوي فهناك قائمة علوية تحتوي على ( الرئيسية | نبذه | اتصل بنا | سجل الزوار ) اي صفحات تضيفها عن طريق لوحة التحكم
يجب علينا اولاً إضافة الوسم الخاص بالقائمة العلوية في الـ XHTML لذالك لنذهب إلى ملف أعلى الصفحة header.php
لاحظ الفروقات في وسم header التي سنضيفها هنا في الكود وهي باللون الازرق

• الرئيسية

تحتوي على وسم pages ووسم search الذين بداخل الوسم header_bar والذي يعتبر كـ container او holder للأثنين بحيث يبقيهما في سطر واحد بتناسق
لاحظ الكود المتعلق بعرض الصفحات مكتوب فيه sort_column=menu_order وهذا يعني ان ترتيب عرض الصفحات معتمداً على ترتيب الصفحات من لوحة التحكم , يمكنك ترتيب عرض القائمة حسب آخر تحديث بتاريخ الصفحة كالتالي sort_column=post_date
ويمكنك كتابة ‘exclude=17,38′ اي لا تعرض هذه الصفحات في القائمة
يمكنك معرفة جميع الأوامر في هذه الدالة عن طريق هذه الصفحة
http://codex.wordpress.org/Template_Tags/wp_list_pages
فمثلاً كتبنا depth=1 وذالك يعني انه يتم عرض فقط الصفحات الرئيسية وليس الفرعية و title_li= ولا شي لأننا لا نريد عنوان لهذه القائمه من الصفحات
الان ستجد وسم الآي دي search قررت فجأه ان اضع صندوق البحث هنا لأنني في التصميم لم اضع له مكان وكان هذا المكان كأنه مخلوق عشانه فقلت فرصه حلوه
بعد ما اضفنا الأكواد السابقه في XHTML الخاصه بملف أعلى الصفحة نرجع لملف التنسيق
ونكتب الأكواد الخاصة بتنسيق القائمة وصندوق البحث كالتالي :

#header_bar {
margin-top:83px;
}

#pages {
float:right;
width:300px;
font-family:Tahoma;
font-size:9pt;
font-weight:bold;
}
#pages ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-right:6px;
float:right;
width:530px;
margin-top:6px;
overflow: hidden;
}
#pages ul li
{
float: right;
margin: 0 -.8em 0 .8em;
padding: 0 .8em 0 .8em;
border-right:1px #96c4db solid;
}
#pages ul a
{
font-weight:bold; color:#3372b6;
}
#pages ul a:hover
{
color:#d8ffac;
}
#search {
float:left;
text-align:left;
width:250px;
margin-left:35px;
}
#search #searchform #s {
width:150px;
border:2px #5395da solid;
}
#search #searchform #searchsubmit {
background:#2e6daf;
color:white;
border:none;
font-family:tahoma;
width:50px;
padding:2px;
cursorointer;
}
#search #searchform #searchsubmit:hover {
background:#5296db;
}
كذا وضعنا القائمة العلويه مع صندوق البحث
في الهيدر باقي شيء واحد فقط وننتهي منه ومن الصفحة الرئيسية بشكل كامل والباقي هو زر الـ RSS
نرجع لملف أعلى الصفحة header.php ونضيف الصورة كالتالي ( لاحظ الإضافات بالخط الازرق )

• الرئيسية

بعد ذالك نتوجه إلى ملف التنسيق لكي نضع خصائص الوسوم التي أنشأناها لكي تكون header_right بالخاصية float:right ويكون الوسم header_left بالخاصية float:left لكي يكون عنوان الموقع والشرح تحته في header_right وتكون صورة الـ RSS في header_left وهكذا يكونان بجانب بعض

#header_right {
width:300px;
float:right;
height:150px;
}

#header_left {
width:150px;
float:left;
height:150px;
margin-top:15px;
}
أخيراً انتهينا بأغلب أساسيات تصميم الستايل
باقي اشياء بسيطه جداً راح اتركها لكم لأن أولاً وأخيراً التخطيط والتنسيق يمكن عمله بطرق كثيره على حسب جهدكم فيه
هذا هو التصميم بعد الإنتهاء ويمكنكم تحميل الستايل كذالك هنا

لتحميل ستايل المدونة بعد الإنتهاء منها كامله باللون الأزرق أضغط هنا

قمت بتعديل بسيط في خلفية التصميم وتجهيز الستايل خاص للبنات باللون الوردي
ما اخذ وقت كبير لان كل شي جاهز ( التقطيع والـ CSS ) فقط تغيير الوان بالفوتوشوب وألوان النصوص
ليصبح كالتالي

لتحميل ستايل المدونة بعد الإنتهاء منها كامله باللون الوردي أضغط هنا

منقول من منتديات http://www.world-gd.com