•“{دورة تصميم موقع شخصي}“•۫ بالصور [الأرشيف]

osama

13-03-2009, 11:47 PM

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

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

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

ماذا نحتاج ؟

• برنامج تصميم جيّد { Adobe Photoshop} رابط التحميل ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات])

• برنامج الفرونت بيج { Front Page 2003} رابط التحميل ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات])

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.المخطط الأول ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات])

.المخطط الثاني ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات])

.المخطط الثالث ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات])

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

كهذه المجموعة
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
سأقوم بالتصميم تبعا للمخطط الأول ..

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

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

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

file:///C:/DOCUME%7E1/TESTIN%7E1/LOCALS%7E1/Temp/m oz-screenshot-1.jpg

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

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

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

My site

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

نختار save for web

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

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

html and images

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

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

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

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

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

open file
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

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

image

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

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

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

index

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

13 . انقر في المساحة الخالية بجانب التصميم
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

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

ثم

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

Ok
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

18. انظر إلى النتيجة الآن

يتبع..

توقيع : aaaahmaddddتم التحرير من قبل الادارة بسبب كبر حجم التوقيع

شروط و أحكام و قوانين منتديات المشاغب (جديد 2008) ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات])

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات] [فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات] ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]) [فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات] ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]) [فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات] ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]) [فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات] [فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات] ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]) [فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات] ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]) [فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات] ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]) [فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات] ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات])
aaaahmaddddمشاهدة ملفه الشخصي ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات])إرسال رسالة خاصة إلى aaaahmadddd ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات])زيارة موقع aaaahmadddd المفضل ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات])البحث عن المشاركات التي كتبها aaaahmadddd ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات])إضافة aaaahmadddd إلى الإتصالات الخاصة بك ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات])
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات] 31-01-2009, 10:59 AM #2 ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]) aaaahmadddd ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات])
عضو
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات] ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات])

تاريخ التسجيل: Oct 2007
المشاركات: 94

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
18. انظر إلى النتيجة الآن
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

و نضغط زر

new page

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

images
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

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

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

Show border

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

25. هذه الخطوة سنقوم بعمل صفحات الموقع الفرعية .. افتح صفحة جديدة خالية
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

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

28 . بعد ذلك نقوم بحفظ الصفحة داخل مجلدنا My site { لا تحفظه داخل images }
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

browse

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

30. انظر النتيجة
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

34. احفظ الصفحة كالتالي ..
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

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

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

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

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

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

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

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

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

hyperlink

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

my site

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

46

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

47

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

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

سجل الزوار

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

اتصل بي

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

50. الصورة المحددة اضغط بداخلها مرة واحدة
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

Pictures

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

من

veiw - tools - pictures

52. نختار الأداة المحددة
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

و نحدد كلمة من أنا فقط { اذا لم يتحدد الكلام فيعني انك لم تقم بالضغط على الصورة }
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
ثم نختار new window

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

تصاميمي

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

ثم نختار new window

الموسيقى
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

ثم نختار new window

اصدقائي

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

ثم نختار new window

سجل الزوار

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

ثم نختار new window

اتصل بنا

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

ثم نختار new window

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

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

hyperlink

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

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

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
اضغط preview في الأسف لرؤية التصميم كما لو عرض في متصفح

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

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

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

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

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

لتحميله اضغط هنا ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات])

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

نقل الملفات بالاف تي بي }
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات] ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات])
ستجد الموقع و ألف مبروك عليك

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]
----------------------------------------------------------------------------------------------------------------------------------------------------

• الملحقات

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

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

• ملف مفتوح للتصميم ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات])

• ملفات الموقع ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات])

• ملفات الدورة ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات])

• ادوات مساعدة للتصميم ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات])

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

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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات] ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات])

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات] ([فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات])

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

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

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

تحياتي ~ ليلى

في دعة الله