عرض مشاركة واحدة
  #1 (permalink)  
قديم 04-18-2008, 02:23 AM

Foto4design


______________

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

أوسمــتي

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“•۫