romaissa
10-30-2013, بتوقيت غرينيتش 05:56 AM
بسم الله الرحمن الرحيم
•“{دورة تصميم موقع شخصي}“•۫
انتهيت من إعداد هذه الدورة { و هي أول دورة أقوم بها } مؤخرا و أتمنى أن تكون هذه الدورة مفيدة و ممتعة للجميع
----------------------------------------------------------------------------------------------------------------------------------------------------
ماذا نحتاج ؟
• برنامج تصميم جيّد { Adobe Photoshop} رابط التحميل (http://www.shajjar.net/site/modules.php?name=Downloads&d_op=getit&lid=302)
• برنامج الفرونت بيج { Front Page 2003} رابط التحميل (http://www.syrianboy.net/club/showthread.php?t=6608)
----------------------------------------------------------------------------------------------------------------------------------------------------
الخطوات التي سنتبعها في دورتنا
• تصميم الموقع
• تقطيع التصميم
• التعديل و الإخراج بالفرونت بيج
• رفع التصميم على الموقع
----------------------------------------------------------------------------------------------------------------------------------------------------
• أولا التصميم
~ في تصميم الموقع يجب أن تراعي الدقة في التنسيق و الألوان لإخراج الموقع بشكل ممتاز
~ و حتى نتجنب نفور الزائر من موقعنا يجب اختيار ألوان هادئة - منعشة او مقبولة لدى الغالبيّة من الناس ..
~ لا تكثر من استخدام الصور في التصميم و الفرش بصورة كبيرة , فالتصميم الهادئ هو الأفضل ..
~ أن كنت تود أن يتناسب التصميم مع جميع الشاشات باختيار عرض التصميم 778 او 777 و الطول متاح
و هنا سوف نقوم بتصميم يناسب شاشات بدقة 1024 × 768
قبل البدء في التصميم سوف أرشدك لبعض المخططات التي تساعدك في التصميم
و التي بناءًا عليها تستند في تصميمك ..
.المخطط الأول (http://www.foto4tech.com/tutorials/webdesign/layout-1.gif)
.المخطط الثاني (http://www.foto4tech.com/tutorials/webdesign/layout-2.gif)
.المخطط الثالث (http://www.foto4tech.com/tutorials/webdesign/layout-3.gif)
و هناك مخططات كثيرة و متنوعة حسب ابتكار المصمم ..
كهذه المجموعة
http://www.foto4tech.com/tutorials/webdesign/layouts.gif
سأقوم بالتصميم تبعا للمخطط الأول ..
{ يرجى من الجميع التطبيق تبعا للمخطط المختار في الدورة أولا ثم الرجوع للمخططات الثانية على حسب رغبتكم }
و الآن نبدأ بأول خطواتنا بسمِ اللّه ..
1. افتح عمل جديد بمقاس 900 × 900
http://www.foto4tech.com/tutorials/webdesign/1.gif
2. قم بتصميم الموقع على حسب المخطط الأول الموضح هنا
http://www.foto4tech.com/tutorials/webdesign/layout-1.gif
file:///C:/DOCUME%7E1/TESTIN%7E1/LOCALS%7E1/Temp/moz-screenshot-1.jpg
مثال قمت بعمل هذا التصميم ..
http://www.foto4tech.com/tutorials/webdesign/design-boy--foto.gif
----------------------------------------------------------------------------------------------------------------------------------------------------
• ثانيا التقطيع
3. الآن نقوم باختيار أداة التقطيع
http://www.foto4tech.com/tutorials/webdesign/2.gif
ونقوم بعمل مقارب لهذا
http://www.foto4tech.com/tutorials/webdesign/2-2.gif
منطقة الكتابة من الضرورة ان يكون التقطيع دقيق حتى يضبط الموقع
استعن بالصورة ..
لتسهيل التقطيع قمت بتلوين أغلب الأجزاء كتوضيح للعملية
http://www.foto4tech.com/tutorials/webdesign/2-3.gif
4. نقوم بعمل مجلد خاص للموقع لوضع جميع ملفاته فيه
http://www.foto4tech.com/tutorials/webdesign/4.gif
مثلا اذهب إلى desktop سطح المكتب و اعمل مجلد جديد باسم
My site
5. نرجع للتصميم و نقوم بحفظ التصميم كالتالي :
نختار save for web
http://www.foto4tech.com/tutorials/webdesign/3.gif
لا ننسى صيغة الصور يفضل أن تكون jpeg
6.ثم نقوم بتغيير نوع الحفظ إلى
html and images
http://www.foto4tech.com/tutorials/webdesign/5.gif
داخل المجلد الذي عملناه في سطح المكتب
----------------------------------------------------------------------------------------------------------------------------------------------------
• ثالثا التعديل و الإخراج
8. نفتح برنامج الفرونت بيج
9. نقوم بفتح مجلد من القائمة file ثم
open file
http://www.foto4tech.com/tutorials/webdesign/6.gif
10.نذهب الى مجلدنا my site من سطح المكتب
سنجد مجلدين index و
image
index= الصفحة الرئيسية
images =مجلد الصور التي قطعناها و هي صور الصفحة الرئيسية
11.سنتجاهل الآن مجلد الصور و نفتح
index
12. ستظهر لنا صفحة الويب التي قمنا بتصميمها .. ولكن بدون تعديل
http://www.foto4tech.com/tutorials/webdesign/7.gif
نأتي الآن للتعديل ..
13 . انقر في المساحة الخالية بجانب التصميم
http://www.foto4tech.com/tutorials/webdesign/8.gif
14.و اختار توسيط للتصميم بنفس أداة توسيط الخط
http://www.foto4tech.com/tutorials/webdesign/9.gif
15. سنقوم في هذه الخطوة بتغيير عنوان الموقع و وصفه و خلفيته , اتبع الصورة
اذهب الى منتطقة فاضية { باللون الأبيض } كالسابقة و رايت كلك
ثم
http://www.foto4tech.com/tutorials/webdesign/10.gif
16. نذهب الى العناوين اعلى صندوق الحوار و نختار General , نغير عنوان الصفحة من title و الحقلين الآتيين لوصف الموقع و كلمات البحث
http://www.foto4tech.com/tutorials/webdesign/12.gif
17.انتقل للعنوان التالي Formatting و اختر لونا يناسب صفحتك و اختر موافق
Ok
http://www.foto4tech.com/tutorials/webdesign/11.gif
{ العناوين التالية سنتركها لتكتشف مضمونها بنفسك ..=)
18. انظر إلى النتيجة الآن
http://www.foto4tech.com/tutorials/webdesign/13.gif
19. نقوم بحذف صورة منطقة الكتابة الزرقاء ( مكان الكتابة } كالتالي
20. نقوم بوضع مؤشر الفأرة داخل المنطقة المحذوفة
http://www.foto4tech.com/tutorials/webdesign/14.gif
21. من القائمة العلوية نختار insert ثم Inline frame
http://www.foto4tech.com/tutorials/webdesign/15.gif
و نضغط زر
new page
http://www.foto4tech.com/tutorials/webdesign/16.gif
22. نرجع إلى مجلدنا My site و نفتح مجلد
images
http://www.foto4tech.com/tutorials/webdesign/17.gif
23. الصورة التي حذفناها نبحث عنها و نضع مؤشر الفأرة على الصورة لأخذ الطول والعرض الخاص بها
http://www.foto4tech.com/tutorials/webdesign/18.gif
و نسجله في note pad أو أي شيء مناسب لك ..
24. نرجع للفرونت بيج و نضغط ضغطتين على Inline frame ليظهر لنا صندوق الحوار الخاص به ..
http://www.foto4tech.com/tutorials/webdesign/19.gif
و فيه سنوضع الأبعاد بالترتيب كما هو موضح .. مع ازالة علامة الصح من
Show border
ليظهر بالشكل هذا
http://www.foto4tech.com/tutorials/webdesign/20.gif
25. هذه الخطوة سنقوم بعمل صفحات الموقع الفرعية .. افتح صفحة جديدة خالية
http://www.foto4tech.com/tutorials/webdesign/21.gif
26. اول صفحة هي صفحة الإضافات و الاخبار الخ .. , اكتب ماتريد فيه و غير خلفية الصفحة الى خلفية الكتابة الزرقاء
http://www.foto4tech.com/tutorials/webdesign/22.gif
يمكنك اخذ كود code اللون من وضع صورة من البرواز في الصفحة الجديدة التي عملناها و اخذ لونها بأداة الالتقاط
و هناك طرق كثيرة اخرى .. كأخذ الكود code من برنامج Smart color او بالفرونت بيج ..
28 . بعد ذلك نقوم بحفظ الصفحة داخل مجلدنا My site { لا تحفظه داخل images }
http://www.foto4tech.com/tutorials/webdesign/23.gif
سم الصفحة updates.htm و احفظها بعد ذلك ..
http://www.foto4tech.com/tutorials/webdesign/24.gif
29. ارجع لـ Inline frame و اضغط مرتين عليه ثم اضغط
browse
http://www.foto4tech.com/tutorials/webdesign/25.gif
و اختر الصفحة updates.htm التي عملناها كي تظهر في كاول صفحة في الموقع ثم موافق
http://www.foto4tech.com/tutorials/webdesign/26.gif
30. انظر النتيجة
http://www.foto4tech.com/tutorials/webdesign/27.gif
31. نكمل عمل الصفحات الفرعية ..{ من أنا }..
نفتح صفحة جديدة
http://www.foto4tech.com/tutorials/webdesign/21.gif
32. لأخذ كود code الخلفية اذهب الى صفحة updates بالأسفل و اضغط Code كما هو موضح
http://www.foto4tech.com/tutorials/webdesign/28.gif
و انسخ الكود code المحدد باللون الأخضر .. الى الصفحة الجديدة من أنا
http://www.foto4tech.com/tutorials/webdesign/29.gif
33. اكتب ماتريد
http://www.foto4tech.com/tutorials/webdesign/30.gif
34. احفظ الصفحة كالتالي ..
http://www.foto4tech.com/tutorials/webdesign/23.gif
سم الصفحة me.htm و احفظه في نفس المجلد
http://www.foto4tech.com/tutorials/webdesign/31.gif
35. وصلنا الى صفحة تصاميمي .. و سنتعلم ادراج ايقونة تصميم في حال النقر عليها
سيظهر التصميم بالكامل عند المشاهد ..
36. افتح الفوتوشوب بهذه المعايير { كـأيقونة }
http://www.foto4tech.com/tutorials/webdesign/32.gif
37. افتح تصميمك و ادرجه في الايقونة ليظهر جزء منه فقط ..
38. قبل حفظ الأيقونة ارجع لمجلد My site ثم images
و انشأ ملف جديد بإسم designs لكي نضع التصاميم و الأيقونات داخله
{ خطوة لترتيب العمل لا غير }
http://www.foto4tech.com/tutorials/webdesign/33.gif
39. احفظ الأيقونة داخل مجلد designs الجديد ..
http://www.foto4tech.com/tutorials/webdesign/34.gif
و قم بنسخ تصميمك الكامل الى المجلد السابق designs أيضا
{ كرر الخطوات من 36 الى 39 } في حال ادراج اكثر من تصميم ..
40. الآن افتح صفحة فرعية جديدة بنفس لون الخلفية الزرقاء كما تعلمنا
و اكتب ما تريد ثم ادرج الأيقونة التي صممتها كالتالي
http://www.foto4tech.com/tutorials/webdesign/35.gif
http://www.foto4tech.com/tutorials/webdesign/36.gif
41. قم بـ عمل رايت كلك على الصورة و اختر اخر خيار
hyperlink
http://www.foto4tech.com/tutorials/webdesign/37.gif
42. ماهو التصميم الذي تريد ان يظهر لو نقر المتصفح لموقعك على الأيقونة ؟
اختر هذا التصميم الخاص بك { بحجمه الأصلي } والموجود في مجلد
designs
http://www.foto4tech.com/tutorials/webdesign/38.gif
43. اذهب للمحدد في الصورة
http://www.foto4tech.com/tutorials/webdesign/39.gif
44. اختر هذا الخيار لفتح نافذة جديدة عند النقر على الايقونة
http://www.foto4tech.com/tutorials/webdesign/40.gif
45.و موافق .. احفظ التصميم بإسم designs.htm داخل مجلد
my site
http://www.foto4tech.com/tutorials/webdesign/55.gif
46
. قم بعمل صفحة جديدة كالسابقات و اعمل صفحة الموسيقى
http://www.foto4tech.com/tutorials/webdesign/41.gif
47
. كـ مثال للارتباط التشعبي قمت بوضع { للاستماع } و سنتعلم كيف نعمله
ظلل كلمة للاستماع و رايت كلك من الفأرة
http://www.foto4tech.com/tutorials/webdesign/42.gif
و اختر hyperlink .. و ضع وصلة الموسيقى التي تريدها ..
http://www.foto4tech.com/tutorials/webdesign/43.gif
48. احفظ الصفحة بإسم music.htm بنفس المجلد
http://www.foto4tech.com/tutorials/webdesign/44.gif
49. الصفحات التالية { أصدقائي - سجل الزوار - اتصل بي } قم بعملها و حفظها
مثال لحفظ أصدقائي
http://www.foto4tech.com/tutorials/webdesign/45.gif
سجل الزوار
http://www.foto4tech.com/tutorials/webdesign/46.gif
اتصل بي
http://www.foto4tech.com/tutorials/webdesign/47.gif
50. الصورة المحددة اضغط بداخلها مرة واحدة
http://www.foto4tech.com/tutorials/webdesign/48.gif
51. و نظهر هذا الشريط و اسمه
Pictures
http://www.foto4tech.com/tutorials/webdesign/49.gif
من
veiw - tools - pictures
52. نختار الأداة المحددة
http://www.foto4tech.com/tutorials/webdesign/50.gif
و نحدد كلمة من أنا فقط { اذا لم يتحدد الكلام فيعني انك لم تقم بالضغط على الصورة }
http://www.foto4tech.com/tutorials/webdesign/51.gif
53. عملنا سابقا صفحة من انا و اسمها me.htm و الآن سنربطها بالكلام ! جميل ..؟
54. اتبع الصور ..
http://www.foto4tech.com/tutorials/webdesign/52.gif
ثم نختار new ******
55. نفس الخطوات نتبعها مع الكلمات الأخرى وبكل سهول وبساطة !
تصاميمي
http://www.foto4tech.com/tutorials/webdesign/54.gif
http://www.foto4tech.com/tutorials/webdesign/56.gif
ثم نختار new ******
الموسيقى
http://www.foto4tech.com/tutorials/webdesign/57.gif
ثم نختار new ******
اصدقائي
http://www.foto4tech.com/tutorials/webdesign/58.gif
ثم نختار new ******
سجل الزوار
http://www.foto4tech.com/tutorials/webdesign/59.gif
ثم نختار new ******
اتصل بنا
http://www.foto4tech.com/tutorials/webdesign/60.gif
ثم نختار new ******
انتهينا من الصفحات و ربطها ..
http://www.foto4tech.com/tutorials/webdesign/61.gif
56. في حال ان الصورة التي عملنا بها قد تحددت باللون الأزرق يمكننا ازالته بسهولة بالنقر مرتين عليها
http://www.foto4tech.com/tutorials/webdesign/62.gif
ثم نغير قيمة التحديد 2 الى 0
57. الصور الجانبية نستطيع عمل hyperlink لها بالنقر عليها بالزر الأيمن واختيار
hyperlink
http://www.foto4tech.com/tutorials/webdesign/63.gif
58. و اختيار الصورة .. اتبع الصورة
http://www.foto4tech.com/tutorials/webdesign/64.gif
انتهينا و بحمد الله من اعداد و اخراج الموقع بالفرونت بيج
----------------------------------------------------------------------------------------------------------------------------------------------------
• ملاحظات و خطوات هامة
http://www.foto4tech.com/tutorials/webdesign/66.gif
http://www.foto4tech.com/tutorials/webdesign/65.gif
اضغط preview في الأسف لرؤية التصميم كما لو عرض في متصفح
http://www.foto4tech.com/tutorials/webdesign/67.gif
----------------------------------------------------------------------------------------------------------------------------------------------------
• رفع الموقع على الويب
اذا كان لديك مساحة وتود ان ترفع الملفات عليها او حتى لديك مساحة مجاني freeة تدعم نقل الملفات
عليك باختيار برنامج لرفع الملفات ليسهل عليك الرفع بسرعه وسهولة
هناك برامج جميلة جدا و متميزة منها Global SCAP - CUTE FTP 8.0 PRO
و الذي سيتم الشرح طريقة عليه
وجدت لكم الاصدار السابع و لا يختلف كثيرا عن الجديد ..
لتحميله اضغط هنا (http://www.dzbatna.com/t8391/)
و نقوم الآن بالشرح طريقة
نقل الملفات بالاف تي بي }
http://www.foto4tech.com/tutorials/webdesign/ftp1.gif
http://www.foto4tech.com/tutorials/webdesign/ftp2.gif
http://www.foto4tech.com/tutorials/webdesign/ftp3.gif
و عاين الموقع بدخول موقعك مثلا
www.foto4tech.com (http://www.foto4tech.com)
ستجد الموقع و ألف مبروك عليك
لمشاهدة الموقع المستخدم في الدورة من هنا
http://www.foto4tech.com/tutorials/webdesign/web/
----------------------------------------------------------------------------------------------------------------------------------------------------
• الملحقات
ارفقت لكم التصميم هدية للجميع مع حفظ الحقوق اسفله لمن اراد استعماله لموقعه
و كذلك جميع ملفات الموقع لـ تسهيل الدرس مفصل عليكم
• ملف مفتوح للتصميم (http://www.foto4tech.com/tutorials/webdesign/design-boy-foto.rar)
• ملفات الموقع (http://www.foto4tech.com/tutorials/webdesign/webfiles.rar)
• ملفات الدورة (http://www.foto4tech.com/tutorials/webdesign/files.rar)
• ادوات مساعدة للتصميم (http://www.foto4tech.com/tutorials/webdesign/4design.rar)
و في النهاية اتمنى من الجميع الدعاء لي ولوالدي و تمني التوفيق لي
و أعتذر عن أي تقصير أو خطأ ..
في انتظار تطبيقاتكم واستفساراتكم .. لا تبخلوا علينا =)
تمت الدورة بواسطة { فوتو للتكنولوجيا - منتديات لوليتا كافيه }
www.foto4tech.com (http://www.foto4tech.com)
www.lolitto0o.com (http://www.lolitto0o.com)
جميع الحقوق محفوظة الى كلا الموقعين
الرجاء ذكر الحقوق في حال نقل الدورة
و جاهزة لأي استفسار منكم
تحياتي ~ ليلى
في دعة الله
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
•“{دورة تصميم موقع شخصي}“•۫
انتهيت من إعداد هذه الدورة { و هي أول دورة أقوم بها } مؤخرا و أتمنى أن تكون هذه الدورة مفيدة و ممتعة للجميع
----------------------------------------------------------------------------------------------------------------------------------------------------
ماذا نحتاج ؟
• برنامج تصميم جيّد { Adobe Photoshop} رابط التحميل (http://www.shajjar.net/site/modules.php?name=Downloads&d_op=getit&lid=302)
• برنامج الفرونت بيج { Front Page 2003} رابط التحميل (http://www.syrianboy.net/club/showthread.php?t=6608)
----------------------------------------------------------------------------------------------------------------------------------------------------
الخطوات التي سنتبعها في دورتنا
• تصميم الموقع
• تقطيع التصميم
• التعديل و الإخراج بالفرونت بيج
• رفع التصميم على الموقع
----------------------------------------------------------------------------------------------------------------------------------------------------
• أولا التصميم
~ في تصميم الموقع يجب أن تراعي الدقة في التنسيق و الألوان لإخراج الموقع بشكل ممتاز
~ و حتى نتجنب نفور الزائر من موقعنا يجب اختيار ألوان هادئة - منعشة او مقبولة لدى الغالبيّة من الناس ..
~ لا تكثر من استخدام الصور في التصميم و الفرش بصورة كبيرة , فالتصميم الهادئ هو الأفضل ..
~ أن كنت تود أن يتناسب التصميم مع جميع الشاشات باختيار عرض التصميم 778 او 777 و الطول متاح
و هنا سوف نقوم بتصميم يناسب شاشات بدقة 1024 × 768
قبل البدء في التصميم سوف أرشدك لبعض المخططات التي تساعدك في التصميم
و التي بناءًا عليها تستند في تصميمك ..
.المخطط الأول (http://www.foto4tech.com/tutorials/webdesign/layout-1.gif)
.المخطط الثاني (http://www.foto4tech.com/tutorials/webdesign/layout-2.gif)
.المخطط الثالث (http://www.foto4tech.com/tutorials/webdesign/layout-3.gif)
و هناك مخططات كثيرة و متنوعة حسب ابتكار المصمم ..
كهذه المجموعة
http://www.foto4tech.com/tutorials/webdesign/layouts.gif
سأقوم بالتصميم تبعا للمخطط الأول ..
{ يرجى من الجميع التطبيق تبعا للمخطط المختار في الدورة أولا ثم الرجوع للمخططات الثانية على حسب رغبتكم }
و الآن نبدأ بأول خطواتنا بسمِ اللّه ..
1. افتح عمل جديد بمقاس 900 × 900
http://www.foto4tech.com/tutorials/webdesign/1.gif
2. قم بتصميم الموقع على حسب المخطط الأول الموضح هنا
http://www.foto4tech.com/tutorials/webdesign/layout-1.gif
file:///C:/DOCUME%7E1/TESTIN%7E1/LOCALS%7E1/Temp/moz-screenshot-1.jpg
مثال قمت بعمل هذا التصميم ..
http://www.foto4tech.com/tutorials/webdesign/design-boy--foto.gif
----------------------------------------------------------------------------------------------------------------------------------------------------
• ثانيا التقطيع
3. الآن نقوم باختيار أداة التقطيع
http://www.foto4tech.com/tutorials/webdesign/2.gif
ونقوم بعمل مقارب لهذا
http://www.foto4tech.com/tutorials/webdesign/2-2.gif
منطقة الكتابة من الضرورة ان يكون التقطيع دقيق حتى يضبط الموقع
استعن بالصورة ..
لتسهيل التقطيع قمت بتلوين أغلب الأجزاء كتوضيح للعملية
http://www.foto4tech.com/tutorials/webdesign/2-3.gif
4. نقوم بعمل مجلد خاص للموقع لوضع جميع ملفاته فيه
http://www.foto4tech.com/tutorials/webdesign/4.gif
مثلا اذهب إلى desktop سطح المكتب و اعمل مجلد جديد باسم
My site
5. نرجع للتصميم و نقوم بحفظ التصميم كالتالي :
نختار save for web
http://www.foto4tech.com/tutorials/webdesign/3.gif
لا ننسى صيغة الصور يفضل أن تكون jpeg
6.ثم نقوم بتغيير نوع الحفظ إلى
html and images
http://www.foto4tech.com/tutorials/webdesign/5.gif
داخل المجلد الذي عملناه في سطح المكتب
----------------------------------------------------------------------------------------------------------------------------------------------------
• ثالثا التعديل و الإخراج
8. نفتح برنامج الفرونت بيج
9. نقوم بفتح مجلد من القائمة file ثم
open file
http://www.foto4tech.com/tutorials/webdesign/6.gif
10.نذهب الى مجلدنا my site من سطح المكتب
سنجد مجلدين index و
image
index= الصفحة الرئيسية
images =مجلد الصور التي قطعناها و هي صور الصفحة الرئيسية
11.سنتجاهل الآن مجلد الصور و نفتح
index
12. ستظهر لنا صفحة الويب التي قمنا بتصميمها .. ولكن بدون تعديل
http://www.foto4tech.com/tutorials/webdesign/7.gif
نأتي الآن للتعديل ..
13 . انقر في المساحة الخالية بجانب التصميم
http://www.foto4tech.com/tutorials/webdesign/8.gif
14.و اختار توسيط للتصميم بنفس أداة توسيط الخط
http://www.foto4tech.com/tutorials/webdesign/9.gif
15. سنقوم في هذه الخطوة بتغيير عنوان الموقع و وصفه و خلفيته , اتبع الصورة
اذهب الى منتطقة فاضية { باللون الأبيض } كالسابقة و رايت كلك
ثم
http://www.foto4tech.com/tutorials/webdesign/10.gif
16. نذهب الى العناوين اعلى صندوق الحوار و نختار General , نغير عنوان الصفحة من title و الحقلين الآتيين لوصف الموقع و كلمات البحث
http://www.foto4tech.com/tutorials/webdesign/12.gif
17.انتقل للعنوان التالي Formatting و اختر لونا يناسب صفحتك و اختر موافق
Ok
http://www.foto4tech.com/tutorials/webdesign/11.gif
{ العناوين التالية سنتركها لتكتشف مضمونها بنفسك ..=)
18. انظر إلى النتيجة الآن
http://www.foto4tech.com/tutorials/webdesign/13.gif
19. نقوم بحذف صورة منطقة الكتابة الزرقاء ( مكان الكتابة } كالتالي
20. نقوم بوضع مؤشر الفأرة داخل المنطقة المحذوفة
http://www.foto4tech.com/tutorials/webdesign/14.gif
21. من القائمة العلوية نختار insert ثم Inline frame
http://www.foto4tech.com/tutorials/webdesign/15.gif
و نضغط زر
new page
http://www.foto4tech.com/tutorials/webdesign/16.gif
22. نرجع إلى مجلدنا My site و نفتح مجلد
images
http://www.foto4tech.com/tutorials/webdesign/17.gif
23. الصورة التي حذفناها نبحث عنها و نضع مؤشر الفأرة على الصورة لأخذ الطول والعرض الخاص بها
http://www.foto4tech.com/tutorials/webdesign/18.gif
و نسجله في note pad أو أي شيء مناسب لك ..
24. نرجع للفرونت بيج و نضغط ضغطتين على Inline frame ليظهر لنا صندوق الحوار الخاص به ..
http://www.foto4tech.com/tutorials/webdesign/19.gif
و فيه سنوضع الأبعاد بالترتيب كما هو موضح .. مع ازالة علامة الصح من
Show border
ليظهر بالشكل هذا
http://www.foto4tech.com/tutorials/webdesign/20.gif
25. هذه الخطوة سنقوم بعمل صفحات الموقع الفرعية .. افتح صفحة جديدة خالية
http://www.foto4tech.com/tutorials/webdesign/21.gif
26. اول صفحة هي صفحة الإضافات و الاخبار الخ .. , اكتب ماتريد فيه و غير خلفية الصفحة الى خلفية الكتابة الزرقاء
http://www.foto4tech.com/tutorials/webdesign/22.gif
يمكنك اخذ كود code اللون من وضع صورة من البرواز في الصفحة الجديدة التي عملناها و اخذ لونها بأداة الالتقاط
و هناك طرق كثيرة اخرى .. كأخذ الكود code من برنامج Smart color او بالفرونت بيج ..
28 . بعد ذلك نقوم بحفظ الصفحة داخل مجلدنا My site { لا تحفظه داخل images }
http://www.foto4tech.com/tutorials/webdesign/23.gif
سم الصفحة updates.htm و احفظها بعد ذلك ..
http://www.foto4tech.com/tutorials/webdesign/24.gif
29. ارجع لـ Inline frame و اضغط مرتين عليه ثم اضغط
browse
http://www.foto4tech.com/tutorials/webdesign/25.gif
و اختر الصفحة updates.htm التي عملناها كي تظهر في كاول صفحة في الموقع ثم موافق
http://www.foto4tech.com/tutorials/webdesign/26.gif
30. انظر النتيجة
http://www.foto4tech.com/tutorials/webdesign/27.gif
31. نكمل عمل الصفحات الفرعية ..{ من أنا }..
نفتح صفحة جديدة
http://www.foto4tech.com/tutorials/webdesign/21.gif
32. لأخذ كود code الخلفية اذهب الى صفحة updates بالأسفل و اضغط Code كما هو موضح
http://www.foto4tech.com/tutorials/webdesign/28.gif
و انسخ الكود code المحدد باللون الأخضر .. الى الصفحة الجديدة من أنا
http://www.foto4tech.com/tutorials/webdesign/29.gif
33. اكتب ماتريد
http://www.foto4tech.com/tutorials/webdesign/30.gif
34. احفظ الصفحة كالتالي ..
http://www.foto4tech.com/tutorials/webdesign/23.gif
سم الصفحة me.htm و احفظه في نفس المجلد
http://www.foto4tech.com/tutorials/webdesign/31.gif
35. وصلنا الى صفحة تصاميمي .. و سنتعلم ادراج ايقونة تصميم في حال النقر عليها
سيظهر التصميم بالكامل عند المشاهد ..
36. افتح الفوتوشوب بهذه المعايير { كـأيقونة }
http://www.foto4tech.com/tutorials/webdesign/32.gif
37. افتح تصميمك و ادرجه في الايقونة ليظهر جزء منه فقط ..
38. قبل حفظ الأيقونة ارجع لمجلد My site ثم images
و انشأ ملف جديد بإسم designs لكي نضع التصاميم و الأيقونات داخله
{ خطوة لترتيب العمل لا غير }
http://www.foto4tech.com/tutorials/webdesign/33.gif
39. احفظ الأيقونة داخل مجلد designs الجديد ..
http://www.foto4tech.com/tutorials/webdesign/34.gif
و قم بنسخ تصميمك الكامل الى المجلد السابق designs أيضا
{ كرر الخطوات من 36 الى 39 } في حال ادراج اكثر من تصميم ..
40. الآن افتح صفحة فرعية جديدة بنفس لون الخلفية الزرقاء كما تعلمنا
و اكتب ما تريد ثم ادرج الأيقونة التي صممتها كالتالي
http://www.foto4tech.com/tutorials/webdesign/35.gif
http://www.foto4tech.com/tutorials/webdesign/36.gif
41. قم بـ عمل رايت كلك على الصورة و اختر اخر خيار
hyperlink
http://www.foto4tech.com/tutorials/webdesign/37.gif
42. ماهو التصميم الذي تريد ان يظهر لو نقر المتصفح لموقعك على الأيقونة ؟
اختر هذا التصميم الخاص بك { بحجمه الأصلي } والموجود في مجلد
designs
http://www.foto4tech.com/tutorials/webdesign/38.gif
43. اذهب للمحدد في الصورة
http://www.foto4tech.com/tutorials/webdesign/39.gif
44. اختر هذا الخيار لفتح نافذة جديدة عند النقر على الايقونة
http://www.foto4tech.com/tutorials/webdesign/40.gif
45.و موافق .. احفظ التصميم بإسم designs.htm داخل مجلد
my site
http://www.foto4tech.com/tutorials/webdesign/55.gif
46
. قم بعمل صفحة جديدة كالسابقات و اعمل صفحة الموسيقى
http://www.foto4tech.com/tutorials/webdesign/41.gif
47
. كـ مثال للارتباط التشعبي قمت بوضع { للاستماع } و سنتعلم كيف نعمله
ظلل كلمة للاستماع و رايت كلك من الفأرة
http://www.foto4tech.com/tutorials/webdesign/42.gif
و اختر hyperlink .. و ضع وصلة الموسيقى التي تريدها ..
http://www.foto4tech.com/tutorials/webdesign/43.gif
48. احفظ الصفحة بإسم music.htm بنفس المجلد
http://www.foto4tech.com/tutorials/webdesign/44.gif
49. الصفحات التالية { أصدقائي - سجل الزوار - اتصل بي } قم بعملها و حفظها
مثال لحفظ أصدقائي
http://www.foto4tech.com/tutorials/webdesign/45.gif
سجل الزوار
http://www.foto4tech.com/tutorials/webdesign/46.gif
اتصل بي
http://www.foto4tech.com/tutorials/webdesign/47.gif
50. الصورة المحددة اضغط بداخلها مرة واحدة
http://www.foto4tech.com/tutorials/webdesign/48.gif
51. و نظهر هذا الشريط و اسمه
Pictures
http://www.foto4tech.com/tutorials/webdesign/49.gif
من
veiw - tools - pictures
52. نختار الأداة المحددة
http://www.foto4tech.com/tutorials/webdesign/50.gif
و نحدد كلمة من أنا فقط { اذا لم يتحدد الكلام فيعني انك لم تقم بالضغط على الصورة }
http://www.foto4tech.com/tutorials/webdesign/51.gif
53. عملنا سابقا صفحة من انا و اسمها me.htm و الآن سنربطها بالكلام ! جميل ..؟
54. اتبع الصور ..
http://www.foto4tech.com/tutorials/webdesign/52.gif
ثم نختار new ******
55. نفس الخطوات نتبعها مع الكلمات الأخرى وبكل سهول وبساطة !
تصاميمي
http://www.foto4tech.com/tutorials/webdesign/54.gif
http://www.foto4tech.com/tutorials/webdesign/56.gif
ثم نختار new ******
الموسيقى
http://www.foto4tech.com/tutorials/webdesign/57.gif
ثم نختار new ******
اصدقائي
http://www.foto4tech.com/tutorials/webdesign/58.gif
ثم نختار new ******
سجل الزوار
http://www.foto4tech.com/tutorials/webdesign/59.gif
ثم نختار new ******
اتصل بنا
http://www.foto4tech.com/tutorials/webdesign/60.gif
ثم نختار new ******
انتهينا من الصفحات و ربطها ..
http://www.foto4tech.com/tutorials/webdesign/61.gif
56. في حال ان الصورة التي عملنا بها قد تحددت باللون الأزرق يمكننا ازالته بسهولة بالنقر مرتين عليها
http://www.foto4tech.com/tutorials/webdesign/62.gif
ثم نغير قيمة التحديد 2 الى 0
57. الصور الجانبية نستطيع عمل hyperlink لها بالنقر عليها بالزر الأيمن واختيار
hyperlink
http://www.foto4tech.com/tutorials/webdesign/63.gif
58. و اختيار الصورة .. اتبع الصورة
http://www.foto4tech.com/tutorials/webdesign/64.gif
انتهينا و بحمد الله من اعداد و اخراج الموقع بالفرونت بيج
----------------------------------------------------------------------------------------------------------------------------------------------------
• ملاحظات و خطوات هامة
http://www.foto4tech.com/tutorials/webdesign/66.gif
http://www.foto4tech.com/tutorials/webdesign/65.gif
اضغط preview في الأسف لرؤية التصميم كما لو عرض في متصفح
http://www.foto4tech.com/tutorials/webdesign/67.gif
----------------------------------------------------------------------------------------------------------------------------------------------------
• رفع الموقع على الويب
اذا كان لديك مساحة وتود ان ترفع الملفات عليها او حتى لديك مساحة مجاني freeة تدعم نقل الملفات
عليك باختيار برنامج لرفع الملفات ليسهل عليك الرفع بسرعه وسهولة
هناك برامج جميلة جدا و متميزة منها Global SCAP - CUTE FTP 8.0 PRO
و الذي سيتم الشرح طريقة عليه
وجدت لكم الاصدار السابع و لا يختلف كثيرا عن الجديد ..
لتحميله اضغط هنا (http://www.dzbatna.com/t8391/)
و نقوم الآن بالشرح طريقة
نقل الملفات بالاف تي بي }
http://www.foto4tech.com/tutorials/webdesign/ftp1.gif
http://www.foto4tech.com/tutorials/webdesign/ftp2.gif
http://www.foto4tech.com/tutorials/webdesign/ftp3.gif
و عاين الموقع بدخول موقعك مثلا
www.foto4tech.com (http://www.foto4tech.com)
ستجد الموقع و ألف مبروك عليك
لمشاهدة الموقع المستخدم في الدورة من هنا
http://www.foto4tech.com/tutorials/webdesign/web/
----------------------------------------------------------------------------------------------------------------------------------------------------
• الملحقات
ارفقت لكم التصميم هدية للجميع مع حفظ الحقوق اسفله لمن اراد استعماله لموقعه
و كذلك جميع ملفات الموقع لـ تسهيل الدرس مفصل عليكم
• ملف مفتوح للتصميم (http://www.foto4tech.com/tutorials/webdesign/design-boy-foto.rar)
• ملفات الموقع (http://www.foto4tech.com/tutorials/webdesign/webfiles.rar)
• ملفات الدورة (http://www.foto4tech.com/tutorials/webdesign/files.rar)
• ادوات مساعدة للتصميم (http://www.foto4tech.com/tutorials/webdesign/4design.rar)
و في النهاية اتمنى من الجميع الدعاء لي ولوالدي و تمني التوفيق لي
و أعتذر عن أي تقصير أو خطأ ..
في انتظار تطبيقاتكم واستفساراتكم .. لا تبخلوا علينا =)
تمت الدورة بواسطة { فوتو للتكنولوجيا - منتديات لوليتا كافيه }
www.foto4tech.com (http://www.foto4tech.com)
www.lolitto0o.com (http://www.lolitto0o.com)
جميع الحقوق محفوظة الى كلا الموقعين
الرجاء ذكر الحقوق في حال نقل الدورة
و جاهزة لأي استفسار منكم
تحياتي ~ ليلى
في دعة الله
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©