إتصل بنا القوانين الإعلانات الإستضافة الأوسمة والجوائز رفع الملفات المدونات المجموعات مكتبة الفيديو مكتبة الصور مكتبة الملفات النادي الصفحة الرئيسية
::SyRiAn BoY::
 
مواعظ وأذكار:
العودة   ::SyRiAn BoY CluB:: > ..:: مساحات إدارية والدعم الفني ::.. > [ نـــــــادي المواضيع المكررة والأرشيف ]

          
    
Share This Forum!  
[ نـــــــادي المواضيع المكررة والأرشيف ] هنا مواضيع مكرره ومخالف لقوانين وأنظمة النادي.
ملاحظة : يتم تفريغ الأرشيف بشكل دوري كل فترة.


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

بسم الله الرحمن الرحيم •“{دورة تصميم موقع شخصي}“•۫ انتهيت من إعداد هذه الدورة { و هي أول دورة أقوم بها } مؤخرا و أتمنى أن تكون هذه

 
 
  #1 (permalink)  
قديم 04-18-2008, 02:23 AM


______________

من مواضيعــي إبداعاتــي

أوسمــتي

Foto4design غير متواجد حالياً

الملف الشخصي
رقــــم العضويـــــــــة: 4975
تاريــخ التسجيـــــــل: Aug 2007
الجنــــــــــــــــــــس:
مكان الإقـــــامـــــــة: Bahrain
مجموع المشاركــات : 3  [ ؟ ]
صور الجاليــــــــــــري: 0  [ ؟ ]
النقـاط / قـوة التقـييم: 50 / 39
مستــوى الســـمعة: Foto4design will become famous soon enough
آخــــر تواجـــــــــــد: 07-05-2009 [ 02:03 PM ]

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


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


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


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


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

ماذا نحتاج ؟


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

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



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

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


تصميم الموقع

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

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

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


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


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


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

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

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

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

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

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

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


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


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


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



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

كهذه المجموعة
•“{حصريًا دورة تصميم موقع شخصي layouts.gif
سأقوم بالتصميم تبعا للمخطط الأول ..

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


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


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


•“{حصريًا دورة تصميم موقع شخصي 1.gif


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


•“{حصريًا دورة تصميم موقع شخصي layout-1.gif


[IMG]file:///C:/DOCUME%7E1/TESTIN%7E1/LOCALS%7E1/Temp/moz-screenshot-1.jpg[/IMG]

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

•“{حصريًا دورة تصميم موقع شخصي design-boy--foto.gif


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


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


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

•“{حصريًا دورة تصميم موقع شخصي 2.gif



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

•“{حصريًا دورة تصميم موقع شخصي 2-2.gif

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

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

•“{حصريًا دورة تصميم موقع شخصي 2-3.gif



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

•“{حصريًا دورة تصميم موقع شخصي 4.gif



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

My site



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

نختار save for web



•“{حصريًا دورة تصميم موقع شخصي 3.gif



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

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


html and images

•“{حصريًا دورة تصميم موقع شخصي 5.gif



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


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


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


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

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


open file
•“{حصريًا دورة تصميم موقع شخصي 6.gif






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

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

image


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


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


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


index




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


•“{حصريًا دورة تصميم موقع شخصي 7.gif



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



13 . انقر في المساحة الخالية بجانب التصميم
•“{حصريًا دورة تصميم موقع شخصي 8.gif


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

•“{حصريًا دورة تصميم موقع شخصي 9.gif



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

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

ثم

•“{حصريًا دورة تصميم موقع شخصي 10.gif




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

•“{حصريًا دورة تصميم موقع شخصي 12.gif



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

Ok
•“{حصريًا دورة تصميم موقع شخصي 11.gif




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



18. انظر إلى النتيجة الآن
•“{حصريًا دورة تصميم موقع شخصي 13.gif



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



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

•“{حصريًا دورة تصميم موقع شخصي 14.gif




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

•“{حصريًا دورة تصميم موقع شخصي 15.gif


و نضغط زر


new page

•“{حصريًا دورة تصميم موقع شخصي 16.gif



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



images

•“{حصريًا دورة تصميم موقع شخصي 17.gif





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



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


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

•“{حصريًا دورة تصميم موقع شخصي 19.gif



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

Show border

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

•“{حصريًا دورة تصميم موقع شخصي 20.gif



25. هذه الخطوة سنقوم بعمل صفحات الموقع الفرعية .. افتح صفحة جديدة خالية
•“{حصريًا دورة تصميم موقع شخصي 21.gif




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

•“{حصريًا دورة تصميم موقع شخصي 22.gif


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


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


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



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

•“{حصريًا دورة تصميم موقع شخصي 24.gif



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

browse

•“{حصريًا دورة تصميم موقع شخصي 25.gif



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

•“{حصريًا دورة تصميم موقع شخصي 26.gif



30. انظر النتيجة
•“{حصريًا دورة تصميم موقع شخصي 27.gif



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


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

•“{حصريًا دورة تصميم موقع شخصي 21.gif


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

•“{حصريًا دورة تصميم موقع شخصي 28.gif


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


•“{حصريًا دورة تصميم موقع شخصي 29.gif




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


•“{حصريًا دورة تصميم موقع شخصي 30.gif


34. احفظ الصفحة كالتالي ..
•“{حصريًا دورة تصميم موقع شخصي 23.gif



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

•“{حصريًا دورة تصميم موقع شخصي 31.gif




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

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



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


•“{حصريًا دورة تصميم موقع شخصي 32.gif


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


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

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

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

•“{حصريًا دورة تصميم موقع شخصي 33.gif



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

•“{حصريًا دورة تصميم موقع شخصي 34.gif


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



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


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


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

•“{حصريًا دورة تصميم موقع شخصي 35.gif


•“{حصريًا دورة تصميم موقع شخصي 36.gif



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


hyperlink

•“{حصريًا دورة تصميم موقع شخصي 37.gif



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


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

•“{حصريًا دورة تصميم موقع شخصي 38.gif


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


•“{حصريًا دورة تصميم موقع شخصي 39.gif




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

•“{حصريًا دورة تصميم موقع شخصي 40.gif





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

my site

•“{حصريًا دورة تصميم موقع شخصي 55.gif




46

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



•“{حصريًا دورة تصميم موقع شخصي 41.gif



47

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



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

•“{حصريًا دورة تصميم موقع شخصي 42.gif



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

•“{حصريًا دورة تصميم موقع شخصي 43.gif




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

•“{حصريًا دورة تصميم موقع شخصي 44.gif




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




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



•“{حصريًا دورة تصميم موقع شخصي 45.gif




سجل الزوار


•“{حصريًا دورة تصميم موقع شخصي 46.gif



اتصل بي


•“{حصريًا دورة تصميم موقع شخصي 47.gif



50. الصورة المحددة اضغط بداخلها مرة واحدة
•“{حصريًا دورة تصميم موقع شخصي 48.gif



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


Pictures


•“{حصريًا دورة تصميم موقع شخصي 49.gif

من


veiw - tools - pictures



يتبع ---




•“VpwvdWh >> ],vm jwldl l,ru aowd C“•۫

  #2 (permalink)  
قديم 04-18-2008, 02:23 AM


______________

من مواضيعــي إبداعاتــي

أوسمــتي

Foto4design غير متواجد حالياً

الملف الشخصي
رقــــم العضويـــــــــة: 4975
تاريــخ التسجيـــــــل: Aug 2007
الجنــــــــــــــــــــس:
مكان الإقـــــامـــــــة: Bahrain
مجموع المشاركــات : 3  [ ؟ ]
صور الجاليــــــــــــري: 0  [ ؟ ]
النقـاط / قـوة التقـييم: 50 / 39
مستــوى الســـمعة: Foto4design will become famous soon enough
آخــــر تواجـــــــــــد: 07-05-2009 [ 02:03 PM ]

رد: •“{حصريًا .. دورة تصميم موقع شخصي }“•۫


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
و الذي سيتم الشرح عليه

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


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


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


نقل الملفات بالاف تي بي }






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


www.foto4tech.com

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

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

http://www.foto4tech.com/tutorials/webdesign/web/
----------------------------------------------------------------------------------------------------------------------------------------------------
• الملحقات


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

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


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


ملفات الموقع


ملفات الدورة


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


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


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


www.foto4tech.com

www.lolitto0o.com


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


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


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

تحياتي ~ ليلى



في دعة الله
  #3 (permalink)  
قديم 04-18-2008, 02:29 AM
الصورة الرمزية Pasim


______________

من مواضيعــي إبداعاتــي

أوسمــتي

Pasim غير متواجد حالياً

الملف الشخصي
رقــــم العضويـــــــــة: 358
تاريــخ التسجيـــــــل: Dec 2006
الجنــــــــــــــــــــس:
مكان الإقـــــامـــــــة: دبــــــــــــ سوريا ــــي
مجموع المشاركــات : 12,746  [ ؟ ]
صور الجاليــــــــــــري: 0  [ ؟ ]
النقـاط / قـوة التقـييم: 6218 / 291
مستــوى الســـمعة: Pasim has a reputation beyond repute Pasim has a reputation beyond repute Pasim has a reputation beyond repute Pasim has a reputation beyond repute Pasim has a reputation beyond repute Pasim has a reputation beyond repute Pasim has a reputation beyond repute Pasim has a reputation beyond repute Pasim has a reputation beyond repute Pasim has a reputation beyond repute Pasim has a reputation beyond repute
آخــــر تواجـــــــــــد: 03-22-2016 [ 08:04 PM ]
برجي : Pisces

رد: •“{حصريًا .. دورة تصميم موقع شخصي }“•۫


شكرا الك اخي العزيز ،،،

بس الموضوع مخالف لشروط وقوانين النادي

الصور غير مرفوعة على مركز النادي ،،، بالاضافة الى حجم الصور

يحول للادراة
 


الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 
أدوات الموضوع

تعليمات المشاركة
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are معطلة
Pingbacks are معطلة
Refbacks are معطلة



جميع الأوقات بتوقيت جرينتش +3 . الساعة الآن » [ 06:34 AM ]


Powered by vBulletin® Version 3.8.6
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd , SyRiAn BoY
[ SyRiAn BoY Club ], Developed by [ GS-IT Co.].
SyRiAn BoY CluB
For Best Browsing, Use Mozilla Firefox v17.0
       
Copyright © 2005-2018 syrianboy.net. All rights reserved