دروس الفرونت بيج

بسم الله الرحمن الرحيم
درس تصميم موقع شخصي بالفوتوشوب والفرونت بيج Photoshop - Front Page 2003
•“{درس تصميم موقع شخصي}“•?

------------------------------------------------
ماذا نحتاج ؟

• برنامج تصميم جيّد { Adobe Photoshop}• برنامج الفرونت بيج { Front Page 2003}

------------------------------------------------
الخطوات التي سنتبعها في تصميم موقع


• تصميم الموقع
• تقطيع التصميم
• التعديل و الإخراج بالفرونت بيج
• رفع التصميم على الموقع

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

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

~ في تصميم الموقع يجب أن تراعي الدقة في التنسيق و الألوان لإخراج الموقع بشكل ممتاز
~ و حتى نتجنب نفور الزائر من موقعنا يجب اختيار ألوان هادئة - منعشة او مقبولة لدى الغالبيّة من الناس ..
~ لا تكثر من استخدام الصور في التصميم و الفرش بصورة كبيرة , فالتصميم الهادئ هو الأفضل ..
~ أن كنت تود أن يتناسب التصميم مع جميع الشاشات باختيار عرض التصميم 778 او 777 و الطول متاح
و هنا سوف نقوم بتصميم يناسب شاشات بدقة 1024 × 768
قبل البدء في التصميم سوف أرشدك لبعض المخططات التي تساعدك في التصميم
و التي بناءًا عليها تستند في تصميمك ..

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

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

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

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

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

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



التصميم





رقم 1 هو الهيدر

رقم2هو الفوتر

رقم3هو وضع البنر


رقم 4 توضع بها الوصلات


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

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





وبعد ذالك طريقة حفظها نقوم بحفظ التصميم كالتالي :
نختار save for web م تفتح لك صفحه نضغط على حفظ

ثم تفتح لك كما في الصور ونعمل زي اللي في الصوره

لا ننسى صيغة الصور يفضل أن تكون jpeg
6.ثم نقوم بتغيير نوع الحفظ إلى

html and images






نذهب الى كما في الصوره ونغير اسمها ونضع كما في الصوره

ثم نفتحها عن طريق ضغط يمن الموس ثم تحرير

ويفتح معك البرنامج الفرنت بيج



وهنا نقف شرح تصميم موقع وان شاء الله سوف اقوم بشرحه في الغدمقول للفائدة

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


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



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

ماذا نحتاج ؟


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

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



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

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


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

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

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

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


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


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


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

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

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

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

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

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

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


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


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


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



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

كهذه المجموعة

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

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


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


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





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







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




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


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


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. انظر إلى النتيجة الآن




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

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


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


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


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






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


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

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

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