تحديث : دروس تصميم المواقع الاحترافية ::+

[Dr-Design]

السلام عليكم

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

وهذه الروابط الأصلية للموضوع

+:: الدرس الاول في دورة : تصميم المواقع الاحترافية ::+

+:: الدرس الثاني في دورة : تصميم المواقع الاحترافية ::+

+:: الدرس الثالث في دورة : تصميم المواقع الاحترافية ::+

ولكن للأسف روابط الصور لا تظهر

فقمت بتحديثها ... لكي يستفيد منها الأعضاء الجديد ...

[Dr-Design]

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

اقسم بالله العظيم بان لاا استغل ما اتعلمه من هذه الدورة فيما يغضب الله ورسوله او يسيئ للاسلام والمسلمين ... والله على ما اقول شهيد


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

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

تم التوصل من قبل المهتمين وشركات الجرافيكس الى ما يسمى بالالوان الامنه !

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

ثانيا :

مقاسات التصميم : ايضا هنا مشكله وهي اختلاف مقاسات الشاشة حيث انه يوجد منها ماهو 15 - 17 - 19 بوصة ... الخ والقياس 15 بوصة هو الاكثر استعمالا

فماهو حل هذا الاختلاف ؟
بما ان النصيب الاكبر للمقاس 15 بوصة من حيث كثرة الاستخدام من قبل المتصفحين سوف نجعل هذا القياس هو الارتكاز الاساسي لقياسات التصميم
وهو ( 775 بكسيل عرض .. و .. 438 بكسيل ارتفاع ) اي ما يسمى بدقة الشاشة 800*600

سوف يدور في اذهاننا مباشرة هذا السؤال .
كيف سيظهر التصميم على الشاشات 17 و 19 ... الخ ؟ وايضا ما هو مصير التصميم في حال كانت دقه شاشة الزائر اعلى من 800*600 بكسيل ؟؟

في حال كانت الشاشة اكبر من 15 بوصة وبدقة 800*600 سيكون التصميم في الناحية اليسرى من شاشة الزائر من ما يسبب فراغ بسيط في الناحية اليمنى من شاشتة .

اما اذا كانت شاشة الزائر اعلى من دقة 800*600 يسظهر التصميم في الناحية اليسرى مع ترك فراغ كبير جدا في الناحية اليمنى مما يسبب تشوه لمظهر الموقع .

اذا ما هو حل هذه العقيبه ؟؟؟
الحل هو احد امرين :

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

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

2/ باستخدام النسبة المئوية للجداول حيث ان هذا الاسلوب يجعل التصميم يتمدد حسب قياس او دقة شاشة الزائر كما هو متبع في اغلب البرمجيات مثال : منتديات vb او مجلة النيوك ... الخ

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


ثالثا :
الدقة .. نلاحظ مواقع كثيره عند تصفحها يوجد بها بطئ في التحميل , وهذا البطئ ناتج عن كبر حجم الصفحه حيث انها تحتوى معلومات كثيره يجب على المتصفح قرائتها ومنثما ترجمتها الى لغة HTML حتى يتم عرضها على شاشة الزائر .
ماهي هذه البيانات ؟
هي الشفره البرمجيه للموقع بالاضافه الى الاستعلاامات وانتضار النتائج من قواعد البيانات بالاضافة الى الفلاش والصور في الصفحه ‍‍! ما يهمنا هنا هي الصور .. لماذا الصور تسبب بطئ في التصفح ؟ جواب بديهي لان احجامها كبيره اذا ما هو الحل ؟

هو تقليل الحجم
كيف يتم ذلك ؟
يتم من خلال تحديد الدقه في بداية التصميم لهذه الصور , فالدقة الصحيحه للانترنت هي 72 بكسيل في الانش بالاضافة الى حفظ الصور بصيغة gif او jpg




الان بعد ان تعرفنا على النقاط الاساسية في التصميم ماذا يتوجب علينا عمله ؟

اولا: قم باختيار الالوان التى تفضلها او تناسب فكره التصميم الذي ستقوم بتنفيذه

ثانيا : قم بختيار وجمع الصور التى تريد دمجها في التصميم وقم بقصها وتنظيفها لكي تكون جاهزه لدمجها مع التصميم

ثالثا : قم بتصميم شعار لموقعك


الان بعد ان قمنا بتجهيز المطلوب قم بتشغيل برنامج الفوتوشوب واتبع التالي :


1/ قم بعمل ملف جديد للمشروع كما هو موضح بالصورة التاليه تماما



2/ قم بتعبئه الخلفية باللون الذي تريد

3/ قم باظهار المسطرة في المفوتوشوب لكى تتمكن من تقسيم منطقة العمل من خلال الظغط على مفتاح Ctrl + R

4/ قم بتقسيم منطقة العمل كما هو موضح بالصورة التالية :



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

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


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


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



* همسة

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

فـ الله سبحانه وتعالى يحثنا على التفكر , تفكر في خلق الله انظر الى حسن خلق البديع في الوان الطيور والزهور والاشجار فالتفكر بها يولد لديك حسن اختيار وتنسيق الالوان مع بعضها
انظر في جسمك تفكر في حسن خلق الله لك كيف تناسق اعضائك مع بعضها

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



اسأل الله لي ولكم التوفيق والسداد لما يحبه ويرضاه


اثكو جرافيكس

[Dr-Design]

+:: الدرس الثاني في دورة : تصميم المواقع الاحترافية ::+

في هذا الدرس بمشيئة الله سنتعرف على كيفيه :

قص التصميم من خلال برنامج الايماج ريدي
ترتيب وتنظيف التصميم من خلال برنامج الفرونت بيج
اعداد ملف CSS للتمبلت .

...........

سنبدأ بشرح كيفية قص التصميم من خلال برنامج الايماج ريدي

وسنطبق الشرح علىالتصميم التالي :



1/ افتح التصميم من خلا برنامج الايماج ريدي الملحق مع الفوتوشوب من خلال قائمة البرامج ستجده في قائمة الفوتو شوب او من خلال برنامج الفوتو شوب من قائمة الادوات على يسار البرنامج اسفل وهو اخر خيار



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




3/ الارقام المبينه على التصميم وهي ( 1,2,3 ) سوف يتم حذفها من خلال الفرونت بيج ويتم ادراج المحتوى مكانها والصورة رقم 1 , 2 سوف نجعلها خلفية لمنطقتها لكي نتمكن من ادراج المحتوى الذي نريد بها

4/ المناطق التى ستمتد معنا الى اسفل كلما زاد طول المحتوى في الصفحه سنقتطع منها اجزاء الحواف ونجعلها خلفيه لكي تتمدد معنا دون ان يتاثر التصميم

5/ اذا اردت ان تعمل تاثير على الروابط عند مرور الماوس عليها يفترض انك حسبت حساب هذه النقطه من بداية التصميم بان تكون عملت الصور التى تريد ظهورها عند تمري الماوس او المؤثرات التى تريد تطبيقها على اسماء الروابط انظر الصورة التاليه :




1/ ملف التصميم
2/ مجلد اسمه Link 1 وهو يحتوي على مسميات الروابط بالشكل الافتراضي الافتراضيه للتصميم
3/ مجلد واسمه Link 2 وهو يحتوي على مسميات الروابط بالشكل الذي نريد ان تتغير اليه عند مرور الماوس عليها

* ان كنت متمكن من الفوتوشوب بامكانك عمل التاثيرات على الروابط من خلال برنامج الايماج ريدي نفسه حيث انه لا يختلف عن برنامج الفوتوشوب والتعامل مع ادواته نهائيا

4/ كيفيه تطبيق امر التغيير على الرابط عند مرور الماوس عليه ..
عندما تقوم بتحديد القص للايقونه التى تريدها ان تكون رابط يوجد اسفل البرنامج لوح تحكم في الروابط طبق ما هو مبين بالصورة التالية :



حسب الارقام :
1/ تحديد المكان الذي نريده ان يكون رابط
2/ خيار امر Slice لاظهار خانه تسجيل مسار الصفحه التى سينتقل لها الزائر عند الضغط على الرابط
3/ خانة تسجيل مسار الصفحه التى سينتقل لها الزائر قم بتسجيله ان كنت مخطط لها مسبقا او ضع اي شيئ يدل عليه حتى يم تعديله على الفرونت بيج مثلا ضع رقم الرابط او اسم الرابط وفيما بعد غيره من الفرونت بيج للمسار الصحيح .



4/ فتح تحديد التحكم في التاثير على الرابط
5/ فتح لير جديد للصورة التى ستتغير عن مرور الماوس على الرابط

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

5/ الان اذهب الى صندوق الريلز او الشفائف على يمين البرنامج اسفل واخفي الصورة او خط الرابط الافتراضي واظهر الصورة التى تريدها ان تظهر خلال تمرير الماوس على الرابط كالتالي



طبعا انا جعلت الروابط الافتراضيه في المجلد Link1 في الصورة اخفيت العين المجاورة لاسم الرابط الافتراضق من المجلد Link 1 ومنثما اظهرت التاثير الذي اريده ان يظهر اثناء تمرير الماوس وذلك من المجلد Link2

يتبع

[Dr-Design]

6/ الان نفترض اننا انهينا عمليه القص والتأثيرات ونريد تصدير العمل على هيئة ملف انتر نت يجب علينا ضغط الصور لكي نقلل من حجمها كي لا تكون بطيئه التحميل على جهاز الزائر للموقع ويتم ذلك من خلال تحديد امتداد الصور ودقتها وهناك طريقتان وهما كالتالي :
1/ jpg وتستخدم في حال كان التصميم به مساحات تدرج لونى او صور اشخاص
2/ gif وتستخدم في حال كان التصميم بلا تدرجات لونيه وبلا صور اشخاص وهو بالعاده اقل حجم من سابقه

يكف يتم تحديد ذلك ؟

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



7/ الان نقوم بحفظ وتصدير العمل اتبع ماهو مبين بالصورتين التاليتين :



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

حدد الخيار كما هو موضح بالصورة التالية :



الان سوف يكون العمل على برنامج الفرونت بيج


1/ افتح الملف الذي قمنا بتصديره من خلال الفرونت بيج
سيظهر لك بهذا الشكل :



نلاحظ ان هناك مسافة بين حواف التصميم وحافة المتصفح لتعديلها بحيث يكون التصميم ملاصق في المتصفح اتبع الاتي
1/ اضغط كلك يمين في اي مكان في الصفحه ... سيظهر لك شريط الخيارات حدد الخيار التالي :



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



الان قم بحفظ الصفحة باسم جديد دون حذف الصفحة الحالية

3/ الان العمل في النسخه الجديده من الصفحة
*/ قم بتظليل كامل الصفحة
واضغط كلك يمين في اى جزء من الصفحه واختار Cut

الان اصبحت الصفحه لديك فارغه اعمل جدول مكون من خليه واحده وصف واحد كما هو مبين في الاعدادات التالية :



4/ الان ضع مؤشر الماوس داخل الخليه التى عملتها واضغط كلك يمين ومن القائمة اختر الخيار التالي :



5/ سوف يظهر لك ادوات التحكم في الخليه ما نحتاجه هو اسفل الصندوق وهو خيار الخلفية قم بعمل خلفية للخلية سواء كانت لون ام صورة قمت باعدادها مسبقا كالتالي:



6/ الان قم بوضع المؤشر في وسط الجدول واضغط كلك يمين واختار الامر Paste وذلك لكي تقوم بلصق التصميم كاملا داخل الخليه التى عملتها

* ما فائده هذه الخليه ؟؟؟
الفائده منها هو عند تصفح موقعك من قبل احد الزوار وتكون دقة شاشته اكبر من الدقه 800*600 سيظهر له موقعك في منتصف الشاشه وهذا هو الافضل دائما

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



الشرح حسب الارقام :

1/ سوف يتم حذف هذه الصورة وجعلها خلفيه لكي يتم ادارج صندوق دخول الاعضاء مكانها

2/ هذه الصورة سيتم اخذ نسخه منها وجعلها خلفيه للخليه التى هي بها لكى تتمدد معنا كل ما تمددت الصفحه الى اسفل

3/ سوف يتم حذف هذه الصورة واقتصاص جزء منها وجعله خلفيه لخليتها لكي يتم ادراج اخبار الموقع مكانها

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

5/ هذه الصورة سوف تحذف نهائيا ويتم عمل خليه مكانها لكي يتم ادارج الامر البرمجي الذي يدرج المحتوى مكانها

6/ هذه الصورة سوف يتم اقتصاص جزء منها ويعمل خلفيه لخانتها وتحت الروابط لكي نخفف من حجم الصفحه واستغلا مكانها باي شيئ نحتاجه

انظر النتيجيه الان بعد الحذف والتنسيق :



الان انتهينا من تنظيف وتنسيق التصميم سوف نقوم الان باعداد ملف CSS لتنسيق محتوى الموقع

يتبع

[Dr-Design]

ماهي فائده هذا الملف ؟

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

سنكتفي بهذه الاوامر بدرسنا هذا لعده اسباب ومنها ان هذه هي الاوامر التى نحتاجه فقط في درسنا ولعدم تمكننا من هذه التقنيه كثيرا حيث اننا مبتدئين بها حديثا ( ورحم الله امرءٍ عرف قدر نفسه )

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


نبدأ الاعداد :

1/ افتح برنامج المفكره الملحق بالويندوز

2/ قم بكتابه الاوامر التاليه في ملف المفكره واحفظ الملف بهذا الاسم Style.css

//------------------------------------
التحكم في نوع ولون 
الخط في الجداول

Td    { 
//---- نوع الخط

   font-family:   Tahoma;
//---- حجم
الخط    
    font-size: 10px;
//---- تاثير الخط عريض
ام عادي    
    font-style: normal;
//---- لون
الخط    
   color: #1F4C63;
//---- لتنسيق حواف
الاسطر لكي تكون متساوية
    text-align: justify;
}
//------------------------------------

//------------------------------------
التحكم في نوع ولون 
وحجم الخط في خلايا الجداول

P    { 

   font-family:   Tahoma;
    font-size: 11px;
    font-style: normal;
   color: #1F4C63;
    text-align: justify;
}
//------------------------------------

//------------------------------------
التحكم في التاثير وخط&nb
sp;ولون الروابط 

a:link {
    font-family:  Tahoma;
    font-size: 11px;
    font-style: normal;
    color: #1F4C63;
   text-decoration: none;
}
a:hover {
    font-family: MS Sans Serif, Tahoma;
    font-size: 10px;
    font-style: normal;
    color: #FF7F50;
    text-decoration: none;

}
a:visited {
    font-family: MS Sans Serif, Tahoma;
    font-size: 10px;
    font-style: normal;
    color: #cccccc;
    text-decoration: none;
}
a:active {
    font-family: MS Sans Serif, Tahoma;
    font-size: 10px;
    font-style: normal;
    color: Red;
    text-decoration: none;
}

//------------------------------------<
br /> 

3/ كيف يتم ادراج هذا الملف الى ملف التمبلت او التصميم ؟

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

<HEAD>

<link href="Style.css" rel="stylesheet" type="text/css">


</HEAD> 

الى هنا يتم الانتهاء من الدرس الثاني في هذه الدورة المباركه باذن الله

الدرس القادم هو الانتقال الى السيرفر المحلى واعداد الشفره البرمجيه لتضمين ملفات الموقع للقالب من خلال لغة البرمجه PHP


اسأل الله لي ولكم التوفيق لما يحبه ويرضاه



اثكو جرافيكس

[Dr-Design]

+:: الدرس الثالث في دورة : تصميم المواقع الاحترافية ::+

هذا هو الدرس الثالث والاخير في هذه الدورة المباركه باذن الله

في هذا الدرس سوف نتعرف على التالي:

* تحويل التصميم الى تمبلت للموقع واعداد ملفاته PHP
* اعداد ملفات تصفح الموقع وجلب التمبلت لها PHP
* كيفيه فتح ملفات PHP من خلال برنامج الفرونت بيج


البرامج التى نحتاجها في هذا الدرس هي :

* السيرفر المحلى
* محرر سكربتات PHP او النوت باد الملحق بالويندوز
* الفرونت بيج


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

http://www.swalif.net/softs/showthre...threadid=46009


الان بفرض اننا قمنا بتنصيب السيرفر المحلى على اجهزتنا

1: قم بتشغيل السيرفر على جهازك
2: افتح مجلد موقعك وانشء به مجلد جديد واعطه الاسم include
3: قم بنقل مجلد موقعك كاااااملا بما يحتوي من مجلدات وملفات ( المجلد الذي يحتوي على التصميم الناتج لدينا عن الدرسيين الاول والثاني )
ويفترض انه يحتوي على التالي:

* مجلد images
* مجلد include
* ملف Styl.css
* ملف التصميم وهو HTML او HTM

قم بنقل مجلد موقعك الى السيرفر الى المجلد التالي WWW او htdocs اياً متوفر لديك في السيرفر وهذا حسب نوعيه السيرفر الذي تستخدمه

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


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



5 : افتح ملف التصميم HTML من خلال الفرونت بيج

6 : ضع علامة XXXXXXXXفي المكان الذي ستدرج به المحتوى لموقعك

7: احفظ الملف بنفس مجلد موقعك باسم جديد كالتالي template.php يتم ذلك عند ما تضغط على امز سيف از من خلال الفرونت بيج سوف تظهر لك نافذه تحديد مكان الحفظ وبها خانه تسميه الملف حدد مكان الحفظ بالمجلد الرئيسي لموقعك على السيرفر اي بنفس المكان الذي به ملف التصميم الاصلي كتالي :



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



8 : الان اذهب الى مجلد موقع في السيرفر وافتحه من خلال محرر PHP او من خلال النوت باد

9 : تحت الوسم بودي اكتب التالي

<?
function template($output) {
?>

10 : ابحث عن علامة XXXXXXX التى وضعناها قبل قليل في مكان ادراج المحتوى واستبدلها بالتالي :

 <?= $output;?>

11 : انزل الى اسف الملف قبل الوسم بودي وضع التالي :

<? } ?>

12 : الان احفظ الملف عن طريق الامر حفظ او سيف وليس حفظ باسم او سيف از

[Dr-Design]

الان ننتقل الى المرحله الثانية وهي اعداد ملف global.php التابع للتمبلت

1: افتح ملف جديد من خلال برنامج النوت باد او محرر php

2: ضع الكود التالي بداخل الملف واحفظه بالاسم التالي global.php في نفس المجلد الذي يحتوي على ملف template.php اى المجلد الرئيسي لموقعك :

<?

  include("template.php");

  ob_start();

  function send_output() {
       $output = ob_get_contents();
       ob_end_clean();
       template($output);
       ob_end_flush();
  }


?>

المرحله الثالثه هى تجهيز ملفات محتويات الموقع

1 : قم باعداد صفحات واقسام موقعك كما تشاء ولكن بدون اي تصميم اي فقط النصوص والصور التى تخص النصوص او الموضوعات التى بالصفحه فقط ولا تقم بتنسيق الخطوط او الروابط

2 : احفظ جميع محتويات موقعك الصفحات والاقسام في مجلد include سواء كانت صفحات عادية او مجلدات الاقسام

3 : احفظ جميع صور المحتوى داخل المجلد images سواء داخل المجلد مياشرة او من خلال انشاء مجلدات داخليه لها وهذا افضل لترتيب موقعك

ملاحظات مهمه للغايه :

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

2 :اجعل جميييييييع امتداد الصور في صفحات المحتويات لموقعك من مجلد images مباشره وليس من مجلد قبله اي ستلاحظ ان اي صورت تقوم باضافتها الى صفحات الموقع ستأخذ هذا المسار تلقائيا وهو :

../../images/Contact.gif

اجعلها كالتالي :
images/Contact.gif

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

المرحله الرابعة وهي اعداد ملف جلب محتويات الموقع والتمبلت الى متصفح الزائر

1 : افتح ملف جديد من خلال برنامج النوت باد او محرر php وضع بi التالي واحفظه باسم index.php في المجلد الرئيسي للموقع اي مع ملt تمبلت واخوانه :P :

<?
//هذا هو الملف الرئيسي للموقع ويتم تصفح
جميع اقسام وصفحات الموقع من خلاله

//امر
جلب التمبلت لهذا الملف
include("global.php");

//---------------------------
//بداية اوامر جلب اقسام وصفحات الموقع

if($display){
switch ($display){

//جلب الصفحة الرئيسية
case "main";
include("include/main.php");
break;
//جلب قسم او ملف استبدل العلامه xxx
بالاسم الذي تريد للقسم او الصفحة
case "xxxxx";
//
مسار ملف القسم او الصفحة استبدل علام xxxxx بالمسار
الصحيح 
include("xxxxxxxxxxx");
break;

//------------- 
// مثلا كالتالي

case "Profile";
include("include/Profile/index.html");
break;


case "Products";
include("include/Products/index.html");
break;


case "Contact";
include("include/Contact/index.html");
break;
}

//-----------------------------
//الامر التالي وضيفته جلب ملف
// main.php
//بحيث يكون هو واجهة الموقع

} else {
include("include/main.php");
}

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

//نهاية امر جلب الستايل للملف
 send_output();

?>

//------------------------------
// كرر الشفرة التاليه بعدد الملفات التى تريد عرضها في
موقعك

case "xxxxxxxxxx";
include("xxxxxxxxxxxxx");
break;
//------------------------------

//بعد اخر امر ادراج ضع العلامة التاليه وهي
تعنى اغلاق الصناديق

}

//------------------------------ 

[Dr-Design]

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

1 : شغل برنامج الفرونت بيج

2 : افتح ملف template.php من خلال الفرونت بيج بالطريقة التالية :
اضغط كلك يمين على ملف تمبلت واختر من القائمة التالي



سوف تظهر لك نافذه تحديد البرنامج الذي سيفتح الملف اختر الموضح بالصورة التالية :



سوف يتم فتح الملف من خلال الفرونت بيج

3 : الان قم بعمل الروابط بين صفحات واقسام موقعك بحيث تكون كالتالي :

index.php?display=main >>> رابط الصفحة الرئيسية

index.php?display= xxxxxxxx >>> استبدل علامة xxxxx باسم الصفحة التى تريد كما سميته في ملف index.php

4 : احفظ التغييرات الان

5 : قم بتشغيل السيرفر على جهازك وافتح هذا العنوان
http://127.0.0.1/xxxxxxx >>> استبدل العلامة xxxx باسم المجلد الذي يحتوي على ملفات موقعك

وانظر المفاجأه


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

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

[العبقري]

الله يسقي ذيك الايام


ايام المبدع athco جرافيكس

الي ماعاد شفناه



Dr-Design
يعطيك الف عافية الدروس مفيدة جدا للمبتدأ والمتوسط وحتى المحترف:1power:

وكل عام وانت بخير يالغالي

[Remano]

جزاك الله خير ... شرح متعوب عليه
لكن هناك مشكلة
ماهي الألوان الأمنة ؟
اذكر ان هناك مربع لوني خاص بها
ثانيا الفوتوشوب cs2 والفرونت بيج
اضن انها برامج اصبحت قديمة نسبيا وخاصة الفرونت بيج
لو تعتمد في شرحك الدريم ويفر افضل
على العموم شكرا لك وننتظر جديدك

[نعمان]

آه والله أيام .. الله يجزاك خير دكتور ديزاين
بس في نقطة
لعمل الموقع في السيرفر لابد من تفعيل دالة
register_global
وأغلب السيرفرات معطلين هالدالة لأمور أمنية ..
دمتم

[أنس بن مالك]

دروس رررائعة حقا

استمريت بالقراءة و نسيت نفسي

بارك الله فيك علي اعادة الرفع ...

[Dr-Design]

لا شكر على واجب أخواني

أتمنى أن تكونو قد أستفدتم من هذه الدروس

[عماد قدري]

اخى برجاء تحديث روابط الصور للأهمية جزاك الله خير

[M. Al-Dhafeeri]

يعطيك العافيه اخوي ديزاين