..:: دوره تصميم موقع شخصى ::..

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

•“{دورة تصميم موقع شخصي}“•۫

انتهيت من إعداد هذه الدورة { و هي أول دورة أقوم بها } مؤخرا و أتمنى أن تكون هذه الدورة مفيدة و ممتعة للجميع

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

ماذا نحتاج ؟

• برنامج تصميم جيّد { Adobe Photoshop} رابط التحميل

• برنامج الفرونت بيج { Front Page 2003} رابط التحميل

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

الخطوات التي سنتبعها في دورتنا

• تصميم الموقع

• تقطيع التصميم

• التعديل و الإخراج بالفرونت بيج

• رفع التصميم على الموقع

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

• أولا التصميم

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

~ و حتى نتجنب نفور الزائر من موقعنا يجب اختيار ألوان هادئة - منعشة او مقبولة لدى الغالبيّة من الناس ..

~ لا تكثر من استخدام الصور في التصميم و الفرش بصورة كبيرة , فالتصميم الهادئ هو الأفضل ..

~ أن كنت تود أن يتناسب التصميم مع جميع الشاشات باختيار عرض التصميم 778 او 777 و الطول متاح

و هنا سوف نقوم بتصميم يناسب شاشات بدقة 1024 × 768

قبل البدء في التصميم سوف أرشدك لبعض المخططات التي تساعدك في التصميم

و التي بناءًا عليها تستند في تصميمك ..

.المخطط الأول

.المخطط الثاني

.المخطط الثالث

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

كهذه المجموعة
..:: دوره تصميم موقع شخصى ::.. Layouts

سأقوم بالتصميم تبعا للمخطط الأول ..

{ يرجى من الجميع التطبيق تبعا للمخطط المختار في الدورة أولا ثم الرجوع للمخططات الثانية على حسب رغبتكم }

و الآن نبدأ بأول خطواتنا بسمِ اللّه ..

1. افتح عمل جديد بمقاس 900 × 900

..:: دوره تصميم موقع شخصى ::.. 1

2. قم بتصميم الموقع على حسب المخطط الأول الموضح هنا

..:: دوره تصميم موقع شخصى ::.. Layout-1

..:: دوره تصميم موقع شخصى ::.. M oz-screenshot-1

مثال قمت بعمل هذا التصميم ..

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

• ثانيا التقطيع

3. الآن نقوم باختيار أداة التقطيع

..:: دوره تصميم موقع شخصى ::.. 2

ونقوم بعمل مقارب لهذا

..:: دوره تصميم موقع شخصى ::.. 2-2

منطقة الكتابة من الضرورة ان يكون التقطيع دقيق حتى يضبط الموقع
استعن بالصورة ..

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

..:: دوره تصميم موقع شخصى ::.. 2-3

4. نقوم بعمل مجلد خاص للموقع لوضع جميع ملفاته فيه

..:: دوره تصميم موقع شخصى ::.. 4

مثلا اذهب إلى desktop سطح المكتب و اعمل مجلد جديد باسم

My site

5. نرجع للتصميم و نقوم بحفظ التصميم كالتالي :

نختار save for web

لا ننسى صيغة الصور يفضل أن تكون jpeg

6.ثم نقوم بتغيير نوع الحفظ إلى

html and images

..:: دوره تصميم موقع شخصى ::.. 5

داخل المجلد الذي عملناه في سطح المكتب

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

• ثالثا التعديل و الإخراج

8. نفتح برنامج الفرونت بيج

9. نقوم بفتح مجلد من القائمة file ثم

open file

10.نذهب الى مجلدنا my site من سطح المكتب

سنجد مجلدين index و

image

index= الصفحة الرئيسية

images =مجلد الصور التي قطعناها و هي صور الصفحة الرئيسية

11.سنتجاهل الآن مجلد الصور و نفتح

index

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

..:: دوره تصميم موقع شخصى ::.. 7

نأتي الآن للتعديل ..

13 . انقر في المساحة الخالية بجانب التصميم
..:: دوره تصميم موقع شخصى ::.. 8

14.و اختار توسيط للتصميم بنفس أداة توسيط الخط

..:: دوره تصميم موقع شخصى ::.. 9

15. سنقوم في هذه الخطوة بتغيير عنوان الموقع و وصفه و خلفيته , اتبع الصورة

اذهب الى منتطقة فاضية { باللون الأبيض } كالسابقة و رايت كلك

ثم

..:: دوره تصميم موقع شخصى ::.. 10

16. نذهب الى العناوين اعلى صندوق الحوار و نختار General , نغير عنوان الصفحة من title و الحقلين الآتيين لوصف الموقع و كلمات البحث

..:: دوره تصميم موقع شخصى ::.. 12

17.انتقل للعنوان التالي Formatting و اختر لونا يناسب صفحتك و اختر موافق

Ok
..:: دوره تصميم موقع شخصى ::.. 11

{ العناوين التالية سنتركها لتكتشف مضمونها بنفسك ..=)

18. انظر إلى النتيجة الآن
..:: دوره تصميم موقع شخصى ::.. 13

19. نقوم بحذف صورة منطقة الكتابة الزرقاء ( مكان الكتابة } كالتالي

20. نقوم بوضع مؤشر الفأرة داخل المنطقة المحذوفة

..:: دوره تصميم موقع شخصى ::.. 14

يتبع

21. من القائمة العلوية نختار insert ثم Inline frame

..:: دوره تصميم موقع شخصى ::.. 15

و نضغط زر

new page

22. نرجع إلى مجلدنا My site و نفتح مجلد

images
..:: دوره تصميم موقع شخصى ::.. 17

23. الصورة التي حذفناها نبحث عنها و نضع مؤشر الفأرة على الصورة لأخذ الطول والعرض الخاص بها
..:: دوره تصميم موقع شخصى ::.. 18

و نسجله في note pad أو أي شيء مناسب لك ..

24. نرجع للفرونت بيج و نضغط ضغطتين على Inline frame ليظهر لنا صندوق الحوار الخاص به ..

..:: دوره تصميم موقع شخصى ::.. 19

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

Show border

ليظهر بالشكل هذا

..:: دوره تصميم موقع شخصى ::.. 20

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

26. اول صفحة هي صفحة الإضافات و الاخبار الخ .. , اكتب ماتريد فيه و غير خلفية الصفحة الى خلفية الكتابة الزرقاء

..:: دوره تصميم موقع شخصى ::.. 22

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

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

28 . بعد ذلك نقوم بحفظ الصفحة داخل مجلدنا My site { لا تحفظه داخل images }
..:: دوره تصميم موقع شخصى ::.. 23

سم الصفحة updates.htm و احفظها بعد ذلك ..

..:: دوره تصميم موقع شخصى ::.. 24

29. ارجع لـ Inline frame و اضغط مرتين عليه ثم اضغط

browse

و اختر الصفحة updates.htm التي عملناها كي تظهر في كاول صفحة في الموقع ثم موافق

..:: دوره تصميم موقع شخصى ::.. 26

30. انظر النتيجة
..:: دوره تصميم موقع شخصى ::.. 27

31. نكمل عمل الصفحات الفرعية ..{ من أنا }..

نفتح صفحة جديدة

..:: دوره تصميم موقع شخصى ::.. 21

32. لأخذ كود الخلفية اذهب الى صفحة updates بالأسفل و اضغط Code كما هو موضح

..:: دوره تصميم موقع شخصى ::.. 28

و انسخ الكود المحدد باللون الأخضر .. الى الصفحة الجديدة من أنا

..:: دوره تصميم موقع شخصى ::.. 29

33. اكتب ماتريد

..:: دوره تصميم موقع شخصى ::.. 30

34. احفظ الصفحة كالتالي ..
..:: دوره تصميم موقع شخصى ::.. 23

سم الصفحة me.htm و احفظه في نفس المجلد

..:: دوره تصميم موقع شخصى ::.. 31

35. وصلنا الى صفحة تصاميمي .. و سنتعلم ادراج ايقونة تصميم في حال النقر عليها

سيظهر التصميم بالكامل عند المشاهد ..

36. افتح الفوتوشوب بهذه المعايير { كـأيقونة }

..:: دوره تصميم موقع شخصى ::.. 32

37. افتح تصميمك و ادرجه في الايقونة ليظهر جزء منه فقط ..

38. قبل حفظ الأيقونة ارجع لمجلد My site ثم images

و انشأ ملف جديد بإسم designs لكي نضع التصاميم و الأيقونات داخله

{ خطوة لترتيب العمل لا غير }

..:: دوره تصميم موقع شخصى ::.. 33

39. احفظ الأيقونة داخل مجلد designs الجديد ..

و قم بنسخ تصميمك الكامل الى المجلد السابق designs أيضا

{ كرر الخطوات من 36 الى 39 } في حال ادراج اكثر من تصميم ..

40. الآن افتح صفحة فرعية جديدة بنفس لون الخلفية الزرقاء كما تعلمنا

و اكتب ما تريد ثم ادرج الأيقونة التي صممتها كالتالي

41. قم بـ عمل رايت كلك على الصورة و اختر اخر خيار

hyperlink

..:: دوره تصميم موقع شخصى ::.. 37

42. ماهو التصميم الذي تريد ان يظهر لو نقر المتصفح لموقعك على الأيقونة ؟

اختر هذا التصميم الخاص بك { بحجمه الأصلي } والموجود في مجلد
designs

43. اذهب للمحدد في الصورة

..:: دوره تصميم موقع شخصى ::.. 39

44. اختر هذا الخيار لفتح نافذة جديدة عند النقر على الايقونة

..:: دوره تصميم موقع شخصى ::.. 40

45.و موافق .. احفظ التصميم بإسم designs.htm داخل مجلد

my site

46

. قم بعمل صفحة جديدة كالسابقات و اعمل صفحة الموسيقى

..:: دوره تصميم موقع شخصى ::.. 41

47

. كـ مثال للارتباط التشعبي قمت بوضع { للاستماع } و سنتعلم كيف نعمله

ظلل كلمة للاستماع و رايت كلك من الفأرة

و اختر hyperlink .. و ضع وصلة الموسيقى التي تريدها ..

48. احفظ الصفحة بإسم music.htm بنفس المجلد

49. الصفحات التالية { أصدقائي - سجل الزوار - اتصل بي } قم بعملها و حفظها

مثال لحفظ أصدقائي

..:: دوره تصميم موقع شخصى ::.. 45

سجل الزوار

..:: دوره تصميم موقع شخصى ::.. 46

اتصل بي

..:: دوره تصميم موقع شخصى ::.. 47

50. الصورة المحددة اضغط بداخلها مرة واحدة
..:: دوره تصميم موقع شخصى ::.. 48

51. و نظهر هذا الشريط و اسمه

Pictures

..:: دوره تصميم موقع شخصى ::.. 49

من

veiw - tools - pictures

52. نختار الأداة المحددة
..:: دوره تصميم موقع شخصى ::.. 50

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

53. عملنا سابقا صفحة من انا و اسمها me.htm و الآن سنربطها بالكلام ! جميل ..؟

54. اتبع الصور ..

..:: دوره تصميم موقع شخصى ::.. 52

ثم نختار new window

55. نفس الخطوات نتبعها مع الكلمات الأخرى وبكل سهول وبساطة !

تصاميمي

..:: دوره تصميم موقع شخصى ::.. 56

ثم نختار new window

الموسيقى
..:: دوره تصميم موقع شخصى ::.. 57

ثم نختار new window

اصدقائي

..:: دوره تصميم موقع شخصى ::.. 58

ثم نختار new window

سجل الزوار

ثم نختار new window

اتصل بنا

..:: دوره تصميم موقع شخصى ::.. 60

ثم نختار new window

انتهينا من الصفحات و ربطها ..

..:: دوره تصميم موقع شخصى ::.. 61

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

..:: دوره تصميم موقع شخصى ::.. 62

ثم نغير قيمة التحديد 2 الى 0

57. الصور الجانبية نستطيع عمل hyperlink لها بالنقر عليها بالزر الأيمن واختيار

hyperlink

58. و اختيار الصورة .. اتبع الصورة

..:: دوره تصميم موقع شخصى ::.. 64

انتهينا و بحمد الله من اعداد و اخراج الموقع بالفرونت بيج

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

• ملاحظات و خطوات هامة

..:: دوره تصميم موقع شخصى ::.. 66

اضغط preview في الأسف لرؤية التصميم كما لو عرض في متصفح

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

• رفع الموقع على الويب

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

هناك برامج جميلة جدا و متميزة منها Global SCAP - CUTE FTP 8.0 PRO
و الذي سيتم الشرح عليه

وجدت لكم الاصدار السابع و لا يختلف كثيرا عن الجديد ..

لتحميله اضغط هنا

و نقوم الآن بالشرح

نقل الملفات بالاف تي بي }
..:: دوره تصميم موقع شخصى ::.. Ftp1

و عاين الموقع بدخول موقعك مثلا

www.foto4tech.com
ستجد الموقع و ألف مبروك عليك

لمشاهدة الموقع المستخدم في الدورة من هنا

http://www.foto4tech.com/tutorials/webdesign/web/

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

• الملحقات

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

و كذلك جميع ملفات الموقع لـ تسهيل الدرس عليكم

• ملف مفتوح للتصميم

• ملفات الموقع

• ملفات الدورة

• ادوات مساعدة للتصميم

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

تمت الدورة بواسطة { فوتو للتكنولوجيا - منتديات لوليتا كافيه }

www.foto4tech.com

www.lolitto0o.com

جميع الحقوق محفوظة الى كلا الموقعين

الرجاء ذكر الحقوق في حال نقل الدورة

و جاهزة لأي استفسار منكم

تحياتي ~ mohmmmed

في دعة الله

» تصميم موقع
» 600 تصميم فلاشي + فوتوشب للجميع مجاناً
» تصميم شريط تحميل
» ممكن تصميم استايل
» =درس طريقه عمل تصميم مثل خطوط التلفزيون ..#

..:: دوره تصميم موقع شخصى ::..

}المنتدى العام{

}منتدى البرامج{

}الفوتوشوب Photoshop{

}تطوير المواقع{

}منتدى الانمي {

}منتدى الالعاب{

}فيديو برامج ويب{

}منتدى السيارات{

}منتدى التعليم{

}المنتدى الرياضى{

}منتدى الجوال{

}منتدى الاستراحه{

}منتدى المرأه والطفل{

}طلب التصاميم{