طريقك الى صناعة موقعك بنفسك ►►

[اميرة عبد الدايم]

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

الجزء الاول يسمى الهيدر Header : و هو يكون في اعلى الموقع وبه يوضع ازرار الموقع و أزرار الموقع تسمى ناف بار Nav Bar

الجزء الثاني يسمى Body : و هو جسم الصفحة ويكون به محتوى الموقع.

الجزء الثالث هو الفوتر Footer : و هو ذيل الصفحة و يكون به الحقوق و ما الى ذالك..


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

اساسيات تصميم المواقع (http://www.youtube.com/watch?v=OlI_JzdV1ho&feature=player_embedded)
للتحميل (http://www.mediafire.com/?mf1dqeos07i0f5q)

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

تصميم الهيدرو الناف بار (http://www.youtube.com/watch?v=jZOxQLAIp7w&feature=player_embedded)


للتحميل (http://www.mediafire.com/?tya1uwnqbnaqud4)


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

تصميم الفوتر (http://www.youtube.com/watch?v=dTQBwbUQmgQ&feature=player_embedded)

للتحميل (http://www.mediafire.com/?560mjt81nrv4vyr)


و المحتوى يكون حسب ذوقك انت
================================================== ===


نصيحة اخيرة في التصميم

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


كل ما مضى فقط تصميم بالفوتوشوب
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------


مرحلة التكويد

اولا احب ان اوضح لكم شيء يغفل عن الكثيير:

اي صفحة وب WEB في العالم لا تخلو من 3 اشياء ←„ ↓

1- structure وهي هيكلة الصفحة و مسؤل عنها الـ HTML .

2- presentation و هو زينة الصفحة او مايزين به الصفحة من الوان وحدود و اشياء اخرى و مسؤل عنها الـ CSS .

3- Behavior و هي الحركة في الصفحة و مسؤل عنها ال Java Script ..


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


↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ ↓↓

اولاً لغة HTML

هي هيكلة صفحة الويب كما ذكرت سابقاً و هيكلة معنا ترتيب يعني وضع الفقرات والكلام و العناوين http://www.absba.org/images/smilies/smile.gif ترتيب الموقع بمعنى اصح.

تعريف بسيط للغة

html هي لغة وليست لغة كيف http://www.absba.org/images/smilies/biggrin.gif هي لغة وصفية و ليست لغة برمجية مثل الجافا و غيرها..
وهي اختصار لـ Hyper Text MarkUp Language بمعنى: وصف النص التشعبي http://www.absba.org/images/smilies/smile.gif

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

تعلم html

دورة الاستاذ يوسف اسماعيل لـ html (https://www.youtube.com/playlist?list=PLYqjixHM5S4rjbtrLVL67hvjlVM6f7Ptb)

دورة الاستاذ ابراهيم قديح لـ html (https://www.youtube.com/playlist?list=PLED62DEC0994C7365)

دورة الاستاذ احمد سامح (http://www.youtube.com/playlist?list=PLF3A5808F4A79050F)

انظر الانسب اليك و ابدأ معه
وانا انصحكم بـ يوسف اسماعيل ليس تقليلا في الاخرين ولكن هو الي شرحه حاز رضاي على العموم انا تابعتهم كلهم http://www.absba.org/images/smilies/smile.gif

و للعلم هناك اصدار اخر نزل من لغة الـ html و هو html 5 و بعضهم يقول بانه لا يتبعها المهم انكم تقراو عنه لانه جميل جداا ::


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


ثانياً لغة CSS

مثل ماذكرت في البداية هي لتزيين عناصر الصفحة المهيكلة بـ html http://www.absba.org/images/smilies/biggrin.gif

وهي اختصار لـ cascading style sheets بمعنى ورقة الانماط الانسيابية http://www.absba.org/images/smilies/smile.gif

و نزل منها اصدارين 2 و 3 و سوف نتعلم الاثنين باذن الله

تعلم CSS
☼


دورة استاذ يوسف اسماعيل في (https://www.youtube.com/playlist?list=PLEE3A2A45FAA70C95)css2 (https://www.youtube.com/playlist?list=PLEE3A2A45FAA70C95)

دورة استاذ ابراهيم قديح في css2 (https://www.youtube.com/playlist?list=PLC6161A2D049594FB)

دورة استاذ احمد سامح في CSS2 (http://www.youtube.com/playlist?list=PLCFB62ABA15ED66D3)

+++++++++++++++++++++++++++++


تعلم CSS3
كما ذكرت يوجد نسختين من الـCSS

دورة استاذ احمد سامح في CSS 3 (http://www.youtube.com/playlist?list=PLofWNvS46CQw-HZOM-A86o-eU0a-eKcOF)


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

بكذا نكون تعلمننا لغتين مهمتين بهما نستطيع انشاء موقع جميل جداا تابع ╫

هذه دورة لبناء قالب موقع بسيط مقدمة من يوسف اسماعيل (http://www.youtube.com/playlist?list=PL2ED4F139286E96CC)

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ ▬▬▬▬▬▬▬▬▬▬

الان انت تتسائل ماذا بعد الان ماذا بعد ماتعلمت هذه اللغات وانشئت موقعي ؟!!

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

الاستضافة: هي المكان التي تشترك به لتستطيع مشاركة موقعك مع الناس.

ماذا تعطيك الاستضافة ؟!!
الاستضافة تعطيك اسم الدومين و الدومين هو الذي يكون بعد الـ www وقبل ال .com او .net ,,,

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

للاشتراك في استضافة ابحث اولا على استضافات مجانية مثل ابقى و غيرها الكثيير,,

بعد ماتسجل في استضافة تستطيع رفع ملفاتك عليها بواسطة ال FTB وهو بروتوكول نقل الملفات ,,

قريب ساضع هنا رابط لشرحي في التعامل مع الاستضافات


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

نصائح قبل تصميم اي موقع :

اول ابدأ ببسم الله الرحمن الرحيم

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

رابعا للحصول على ايقونات ووضعها في موقعك ادخل موقع ICONFINDER (http://www.iconfinder.com/)


خامسا لا تنسانا من الدعاء و اي سؤال لا تتردد ابداً ...


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


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