{دورة تصميم موقع شخصي}الجزء الثانى

من طرف eng_haysem السبت أغسطس 09, 2008 5:48 pm

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/
----------------------------------------------------------------------------------------------------------------------------------------------------
• الملحقات

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

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

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

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

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

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

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

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