admin
11-01-2013, بتوقيت غرينيتش 12:15 AM
http://www.dzbatna.com/images/icons/iconrote.gif ][][آ§آ¤آ°^آ°آ¤آ§][ ط¯ظˆط±ط© طھطµظ…ظٹظ… ط§ظ„ظ…ظˆط§ظ‚ط¹ ط§ظ„ط¥ط*طھط±ط§ظپظٹط© ~ ط§ظ„ط¯ط±ط³ ط§ظ„ط«ط§ظ„ط« ~ ][آ§آ¤آ°^آ°آ¤آ§][] (http://www.dzbatna.com/t30494/)
بسم الله الرحمن الرحيم
http://aborenaz.com/my/my_smple.gif (http://aborenaz.com)
http://aborenaz.com/my/my_smple02.gif (http://aborenaz.com)
السلام عليكم ورحمة الله وبركاته ،،،،،، وبعد :
- الدرس مفصل الأول - حددّ تخصص موقعك وخطط لأمورك جيداً ! (http://www.aborenaz.com/dros/bena_web/aldorh/lesson_01.htm)
- الدرس مفصل الثاني - تصميم الموقع بالفوتوشوب (http://www.aborenaz.com/dros/bena_web/aldorh/lesson_02.htm)
تكلمنا في الدرس مفصل السابق عن طريقة تصميم الموقع ببرنامج الفوتوشوب .. ودرس مفصلنا اليوم تكملة للدرس مفصل السابق .. فسوف نتعلم اليوم بإذن الله كيفية تقطيع التصميم .. والأمور الخاصة به .. ثم حفظ التصميم على شكل صفحة ويب - يعني صفحة انترنت - ، لكن بصراحة .. تقطيع التصميم بحد ذاته .. فنّ سهل صعب ! .. سهلٌ في تطبيقه .. وصعب في إحتياجه لتفكير عميق حتى يظهر بأجمل صورة وأكملها ! .. لاأطيل عليكم في المقدمة .. وأترككم مع هذا الدرس مفصل .
--------------------------------------------------------------------------------
1
في الدرس مفصل السابق إنتهينا من التصميم بهذا الشكل :
http://www.aborenaz.com/dros/img/COURSE_lesson2_053.gif
الآن يجب علينا أن نقوم بإختيار هذا الأداة http://www.aborenaz.com/dros/img/COURSE_lesson3_001.gif من شريط الأدوات في برنامج الفوتوشوب .. حتى نقوم بعملية القص .
لكن .. أنتبه .. فهناك عدة أنواع من القص :
أولاً : قص الزوايا .
ثانياً : قص الصورة التي نريد أن نضع عليها رابطاً .. أي نجعل الزائر ينتقل إلى صفحة أخرى عندما يضغط عليها .
ثالثاً : قص الصورة التي نريد أن نحذفها ونضع في مكانها لوناً ؛ ليخف حجم الموقع .
رابعاً : قص الصورة التي نريد أن نحذفها ونضع مكانها صورة صغيرة تتمدد على كل الخلية ؛ ليخفّ حجم الموقع .
الآن نأتي للتفاصيل .
--------------------------------------------------------------------------------
2
أولاً : قص الزوايا
بعد أختيار أداة التحديد قم بقص جميع الزوايا وأحرص على أن تكون بنفس المقاسات .. شاهد الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_002.gif
بعد قص جميع الزوايا في الموقع يصبح لهذا الشكل :
http://www.aborenaz.com/dros/img/COURSE_lesson3_003.gif
--------------------------------------------------------------------------------
3
ثانياً : قص الصورة التي نريد أن نضع عليها رابطاً .. أي نجعل الزائر ينتقل إلى صفحة أخرى عندما يضغط عليها .
الآن نقوم بقص الأماكن التي تريد أن تضع عليها روابطاً فيما بعد .. كما في الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_004.gif
--------------------------------------------------------------------------------
4
ثالثاً : قص الصورة التي نريد أن نحذفها ونضع في مكانها لوناً ؛ ليخف حجم الموقع .
الآن نقوم بقص الأماكن التي تحتوي على لون واحد .. لكي نقوم بحذفها [ فيما بعد ] ثم نقوم باستبدالها بلون مطابق للون الصورة التي حذفنها ، الآن عليك فقط قص الصورة التي تحتوي على لون واحد .. كما في الصورة التالية ( قمت بتوضيح الحدود باللون الأحمر ) :
http://www.aborenaz.com/dros/img/COURSE_lesson3_005.gif
--------------------------------------------------------------------------------
5
رابعاً : قص الصورة التي نريد أن نحذفها ونضع مكانها صورة صغيرة تتمدد على كل الخلية ؛ ليخفّ حجم الموقع .
هذه بصراحة أصعب نقطة أواجهها في الشرح طريقة ! ، قم الآن بتحديد الصور التي ترى أنها يمكن أن تستبدل بصورة صغيرة [ فيما بعد ] .. لاأدري هل وضحت النقطة أم لا ! .. عموماً شاهدوا هذه الصورة المكبّرة :
http://www.aborenaz.com/dros/img/COURSE_lesson3_007.gif
وهذه صورة لكل الصور التي قمت بتحديدها في موقعي .. لأحذفها فيما بعد وأستبدلها بصورة صغيرة تتمدد على كامل الخلية ! :
http://www.aborenaz.com/dros/img/COURSE_lesson3_006.gif
--------------------------------------------------------------------------------
6
جميلٌ جداً .. الآن أنتهينا من مرحلة التقصيص .. ويجب علينا حفظ التصميم كـ [ صفحة ويب ] .. كيف ذلك ؟! .. تابع التالي .
--------------------------------------------------------------------------------
7
من قائمة :
File >> Save for Web
http://www.aborenaz.com/dros/img/COURSE_lesson3_008.gif
--------------------------------------------------------------------------------
8
من الزاوية اليمنى العلوية أختر ( Save ) .
http://www.aborenaz.com/dros/img/COURSE_lesson3_009.gif
--------------------------------------------------------------------------------
9
تظهر لك نافذة حفظ الملف .. وفي أسفلها شريط إعدادات .. طبقّ الإعدادات كما في الصورة التالية .
ثم أضغط زر Save .
http://www.aborenaz.com/dros/img/COURSE_lesson3_010.gif
ملاحظة : أنصحك بإنشاء مجلد جديد خاص للموقع .
--------------------------------------------------------------------------------
10
الآن أرجع إلى موقعك بالفوتوشوب .. وقم بمضاعفته .. من قائمة :
Image >> Duplcate
كما الصورة التالية .
http://www.aborenaz.com/dros/img/COURSE_lesson3_011.gif
--------------------------------------------------------------------------------
11
ستظهر لك نافذة مثل النافذة التالية .. لاتنس أن تضع علامة " صح " على العبارة الموجودة في الصورة :
http://www.aborenaz.com/dros/img/COURSE_lesson3_012.gif
--------------------------------------------------------------------------------
12
الآن .. يجب عليك أن تتذكر الأماكن التي قمت بقصها لتمسحها وتضع مكانها صورة ً صغيرة تتمدد على كامل الخلية .. ثم بعد ذلك قم بإختيار هذه الأداة http://www.aborenaz.com/dros/img/most6el.gif .. ثم قم بتحديد جزء صغير من الصورة .. كما في الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_013.gif
ثم اضغط على Ctrl + C لنسخها ..
ثم أضغط على Ctrl + N لفتح ملف جديد ( واترك المقاس كما هو ) .
ثم اضغط على Ctrl + V للصق الصورة في الملف الجديد .. لتصبح مثل الصورة التالية :
http://www.aborenaz.com/images/main_37.gif
ثم قم بحفظها في مجلد الصور images ..
File >> Save for Web
لكن أجعل إعدادات الحفظ كما في الصورة التالية ( سم الصورة بأي اسم تريد .. هنا اسميتها up ) :
http://www.aborenaz.com/dros/img/COURSE_lesson3_014.gif
هذه الصورة صغيرة الحجم .. وبإمكاننا إستخدامها لتخفيف حجم الموقع وزيادة سرعة تحميل الصفحة ! .. سندرس مفصل التفاصيل بعد قليل إن شاء الله ..
الآن عليك عمل مثل الذي عملنا قبل قليل ( قص صورة صغيرة ) مع كل الصور التي قمنا بتحديدها لنقوم بمسحها واستبدالها بصورة تتمدد على كل الخلية .. الصورة التالية توضح مناطق التمدد التي اقصدها :
http://www.aborenaz.com/dros/img/COURSE_lesson3_006.gif
--------------------------------------------------------------------------------
13
الآن قم بفتح برنامج الفرونت بيج ( http://www.aborenaz.com/images/front_icon.gif Microsoft Office FrontPage 2003 ) .. ثم قم بفتح صفحة Index التي حفظتها عن طريق الفوتوشوب قبل قليل ..
ثم قم بالضغط بالزر الأيمن على أي منطقة .. واختر ( خصائص الصفحة ) .. كما في الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_015.gif
--------------------------------------------------------------------------------
14
الآن قم بعمل مافي الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_016.gif
--------------------------------------------------------------------------------
15
ثم من القائمة الموجودة في الجهة اليسرى السفلية .. طبّق مافي الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_017.gif
ثم اعمل التالي :
http://www.aborenaz.com/dros/img/COURSE_lesson3_018.gif
ثم اضغط ( موافق ) ثم ( موافق ) ثم ( موافق ) .
ستجد أن التصميم أصبح في منتصف الصفحة ..
--------------------------------------------------------------------------------
16
جميلٌ جداً .. الآن سنعمل التالي :
أولاً : عمل روابط على الصور التي نريد أن نضع عليها روابط ! .
ثانياً : حذف الصور ذات اللون الواحد وإبدالها بلون ؛ ليخف حجم الموقع .
ثالثاً : حذف الصور التي يمكن استبدالها بصورة صغيرة متمدة ؛ ليخفّ حجم الموقع .
إلى التفاصيل :
--------------------------------------------------------------------------------
17
أولاً : عمل روابط على الصور التي نريد أن نضع عليها روابط :
أضغط على الصورة التي تريد وضع رابط عليها بالزر الأيمن .. ثم اختر ( خصائص الصورة ) .. كما في الصورة التالية .
http://www.aborenaz.com/dros/img/COURSE_lesson3_019.gif
--------------------------------------------------------------------------------
18
طبّق ما في الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_020.gif
--------------------------------------------------------------------------------
19
ثم من تبيويب ( عام ) طبّق الإعدادات التالية .
http://www.aborenaz.com/dros/img/COURSE_lesson3_021.gif
ثم اضغط ( موافق ) .
وأفعل هذا مع كل الصور التي تريد أن تضع عليها رابطاً .
--------------------------------------------------------------------------------
ملاحظة : البعض سألني عن أكواد جعل الموقع كصفحة رئيسية و إضافة الموقع للمفضلة .. سأضعها لكم هنا ..
- كود code جعل الموقع كـ صفحة رئيسية بموقغك ! :
رمز Code:
<img class="chlnk" style="CURSOR: hand" onclick="this.style.behavior='url(#default#homepag e)';this.setHomePage('http://www.aborenaz.com');" alt="إجعل الموقع صفحة البدء لديك" src="../images/main_17.gif" border="0" HREF width="32" height="31">
مع تغيير مايلزم .
- كود code إضافة الموقع للمفضلة :
رمز Code:
<img style="CURSOR: hand" onclick="javascript:window.external.AddFavorite('h ttp://www.aborenaz.com', ' ّّّ][ مــوقــع ابـــو ريــنـــاز ][ ')" alt="أضف موقع ابو ريناز لمفضلتك" src="../images/main_24.gif" border="0" HREF width="30" height="30">
مع تغيير مايلزم .
--------------------------------------------------------------------------------
20
ثانياً : حذف الصور ذات اللون الواحد وإبدالها بلون ؛ ليخف حجم الموقع .
اذهب الى الصور التي قمت بقصّها في الخطوة رقم 4 واضغط عليها بالزر الأيمن .. ثم اختر ( خصائص الخلية ) .. كما في الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_022.gif
--------------------------------------------------------------------------------
21
ثم اعمل مافي الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_024.gif
--------------------------------------------------------------------------------
22
الآن قم بسحب شافط الألوان .. وافلته على الصورة التي ضغطت عليها بالزر الأيمن قبل قليل ! .. كما في الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_023.gif
قم اضغط ( موافق ) ثم ( موافق ) .
--------------------------------------------------------------------------------
23
الآن قم بمسح الصورة وذلك بالضغط على زر Delete .. ولن يتأثر الشكل الخارجي .. وسبصبح التصفح أسرع ! .. التوضيح في الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_025.gif
أفعل هذه الخطوة مع باقي المساحات التي قمنا بتحديدها في الخطوة رقم 4 .
--------------------------------------------------------------------------------
24
ثالثاً : حذف الصور التي يمكن استبدالها بصورة صغيرة متمدة ؛ ليخفّ حجم الموقع .
اذهب الى الصور التي قمت بقصّها في الخطوة رقم 5 واضغط عليها بالزر الأيمن .. ثم اختر ( خصائص الخلية ) .. كما في الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_026.gif
--------------------------------------------------------------------------------
25
الآن اضغط على كلمة ( استعراض ) الموجودة في الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_027.gif
ثم اخترالصورة الصغيرة التي قمت بقصّها وحفظها في الخطوة رقم 12 .. كما في الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_028.gif
الآن قم بمسح الصورة وذلك بالضغط على زر Delete .. ولن يتأثر الشكل الخارجي .. وسبصبح التصفح أسرع ! .. التوضيح في الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_029.gif
أفعل هذه الخطوة مع باقي المساحات التي قمنا بتحديدها في الخطوة رقم 5 .
--------------------------------------------------------------------------------
26
الحمدلله .. أخيراً قمنا بالإنتهاء من الخطوات الأساسية في هذا الدرس مفصل .. والباقي عليك !!
أضف بعض لمساتك .. حتى يصبح الموقع بالشكل المطلوب ..
عن نفسي فقد قمت بإضافة بعض اللمسات البسيطة حتى أصبح الموقع بهذا الشكل :
http://www.aborenaz.com/dros/img/COURSE_lesson3_030.gif
ولمعاينة الموقع .. أضغط على هذا الزر http://www.aborenaz.com/dros/img/COURSE_lesson3_031.gif من شريط التنسيق .
--------------------------------------------------------------------------------
بهذا .. نكون قد انتهينا من الدرس مفصل الثالث بحمد الله .. أتمنى أن يكون الدرس مفصل وضجاً وبسيطاً عليكم .. وأعذروني على التقصير .. فقط أريد منكم الدعاء لي ولوالدي http://www.aborenaz.com/smilies/smilies2/3atfah_khjl/blushing.gif .
انتهى الدرس مفصل http://aborenaz.com/smilies/smilies2/bay/bye1.gif
http://aborenaz.com/my/my_smple02.gif (http://aborenaz.com)
http://aborenaz.com/my/my_smple.gif (http://aborenaz.com)
تحياتي .. ابو ريناز
www.AboRenaz.com (http://www.AboRenaz.com)
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
بسم الله الرحمن الرحيم
http://aborenaz.com/my/my_smple.gif (http://aborenaz.com)
http://aborenaz.com/my/my_smple02.gif (http://aborenaz.com)
السلام عليكم ورحمة الله وبركاته ،،،،،، وبعد :
- الدرس مفصل الأول - حددّ تخصص موقعك وخطط لأمورك جيداً ! (http://www.aborenaz.com/dros/bena_web/aldorh/lesson_01.htm)
- الدرس مفصل الثاني - تصميم الموقع بالفوتوشوب (http://www.aborenaz.com/dros/bena_web/aldorh/lesson_02.htm)
تكلمنا في الدرس مفصل السابق عن طريقة تصميم الموقع ببرنامج الفوتوشوب .. ودرس مفصلنا اليوم تكملة للدرس مفصل السابق .. فسوف نتعلم اليوم بإذن الله كيفية تقطيع التصميم .. والأمور الخاصة به .. ثم حفظ التصميم على شكل صفحة ويب - يعني صفحة انترنت - ، لكن بصراحة .. تقطيع التصميم بحد ذاته .. فنّ سهل صعب ! .. سهلٌ في تطبيقه .. وصعب في إحتياجه لتفكير عميق حتى يظهر بأجمل صورة وأكملها ! .. لاأطيل عليكم في المقدمة .. وأترككم مع هذا الدرس مفصل .
--------------------------------------------------------------------------------
1
في الدرس مفصل السابق إنتهينا من التصميم بهذا الشكل :
http://www.aborenaz.com/dros/img/COURSE_lesson2_053.gif
الآن يجب علينا أن نقوم بإختيار هذا الأداة http://www.aborenaz.com/dros/img/COURSE_lesson3_001.gif من شريط الأدوات في برنامج الفوتوشوب .. حتى نقوم بعملية القص .
لكن .. أنتبه .. فهناك عدة أنواع من القص :
أولاً : قص الزوايا .
ثانياً : قص الصورة التي نريد أن نضع عليها رابطاً .. أي نجعل الزائر ينتقل إلى صفحة أخرى عندما يضغط عليها .
ثالثاً : قص الصورة التي نريد أن نحذفها ونضع في مكانها لوناً ؛ ليخف حجم الموقع .
رابعاً : قص الصورة التي نريد أن نحذفها ونضع مكانها صورة صغيرة تتمدد على كل الخلية ؛ ليخفّ حجم الموقع .
الآن نأتي للتفاصيل .
--------------------------------------------------------------------------------
2
أولاً : قص الزوايا
بعد أختيار أداة التحديد قم بقص جميع الزوايا وأحرص على أن تكون بنفس المقاسات .. شاهد الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_002.gif
بعد قص جميع الزوايا في الموقع يصبح لهذا الشكل :
http://www.aborenaz.com/dros/img/COURSE_lesson3_003.gif
--------------------------------------------------------------------------------
3
ثانياً : قص الصورة التي نريد أن نضع عليها رابطاً .. أي نجعل الزائر ينتقل إلى صفحة أخرى عندما يضغط عليها .
الآن نقوم بقص الأماكن التي تريد أن تضع عليها روابطاً فيما بعد .. كما في الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_004.gif
--------------------------------------------------------------------------------
4
ثالثاً : قص الصورة التي نريد أن نحذفها ونضع في مكانها لوناً ؛ ليخف حجم الموقع .
الآن نقوم بقص الأماكن التي تحتوي على لون واحد .. لكي نقوم بحذفها [ فيما بعد ] ثم نقوم باستبدالها بلون مطابق للون الصورة التي حذفنها ، الآن عليك فقط قص الصورة التي تحتوي على لون واحد .. كما في الصورة التالية ( قمت بتوضيح الحدود باللون الأحمر ) :
http://www.aborenaz.com/dros/img/COURSE_lesson3_005.gif
--------------------------------------------------------------------------------
5
رابعاً : قص الصورة التي نريد أن نحذفها ونضع مكانها صورة صغيرة تتمدد على كل الخلية ؛ ليخفّ حجم الموقع .
هذه بصراحة أصعب نقطة أواجهها في الشرح طريقة ! ، قم الآن بتحديد الصور التي ترى أنها يمكن أن تستبدل بصورة صغيرة [ فيما بعد ] .. لاأدري هل وضحت النقطة أم لا ! .. عموماً شاهدوا هذه الصورة المكبّرة :
http://www.aborenaz.com/dros/img/COURSE_lesson3_007.gif
وهذه صورة لكل الصور التي قمت بتحديدها في موقعي .. لأحذفها فيما بعد وأستبدلها بصورة صغيرة تتمدد على كامل الخلية ! :
http://www.aborenaz.com/dros/img/COURSE_lesson3_006.gif
--------------------------------------------------------------------------------
6
جميلٌ جداً .. الآن أنتهينا من مرحلة التقصيص .. ويجب علينا حفظ التصميم كـ [ صفحة ويب ] .. كيف ذلك ؟! .. تابع التالي .
--------------------------------------------------------------------------------
7
من قائمة :
File >> Save for Web
http://www.aborenaz.com/dros/img/COURSE_lesson3_008.gif
--------------------------------------------------------------------------------
8
من الزاوية اليمنى العلوية أختر ( Save ) .
http://www.aborenaz.com/dros/img/COURSE_lesson3_009.gif
--------------------------------------------------------------------------------
9
تظهر لك نافذة حفظ الملف .. وفي أسفلها شريط إعدادات .. طبقّ الإعدادات كما في الصورة التالية .
ثم أضغط زر Save .
http://www.aborenaz.com/dros/img/COURSE_lesson3_010.gif
ملاحظة : أنصحك بإنشاء مجلد جديد خاص للموقع .
--------------------------------------------------------------------------------
10
الآن أرجع إلى موقعك بالفوتوشوب .. وقم بمضاعفته .. من قائمة :
Image >> Duplcate
كما الصورة التالية .
http://www.aborenaz.com/dros/img/COURSE_lesson3_011.gif
--------------------------------------------------------------------------------
11
ستظهر لك نافذة مثل النافذة التالية .. لاتنس أن تضع علامة " صح " على العبارة الموجودة في الصورة :
http://www.aborenaz.com/dros/img/COURSE_lesson3_012.gif
--------------------------------------------------------------------------------
12
الآن .. يجب عليك أن تتذكر الأماكن التي قمت بقصها لتمسحها وتضع مكانها صورة ً صغيرة تتمدد على كامل الخلية .. ثم بعد ذلك قم بإختيار هذه الأداة http://www.aborenaz.com/dros/img/most6el.gif .. ثم قم بتحديد جزء صغير من الصورة .. كما في الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_013.gif
ثم اضغط على Ctrl + C لنسخها ..
ثم أضغط على Ctrl + N لفتح ملف جديد ( واترك المقاس كما هو ) .
ثم اضغط على Ctrl + V للصق الصورة في الملف الجديد .. لتصبح مثل الصورة التالية :
http://www.aborenaz.com/images/main_37.gif
ثم قم بحفظها في مجلد الصور images ..
File >> Save for Web
لكن أجعل إعدادات الحفظ كما في الصورة التالية ( سم الصورة بأي اسم تريد .. هنا اسميتها up ) :
http://www.aborenaz.com/dros/img/COURSE_lesson3_014.gif
هذه الصورة صغيرة الحجم .. وبإمكاننا إستخدامها لتخفيف حجم الموقع وزيادة سرعة تحميل الصفحة ! .. سندرس مفصل التفاصيل بعد قليل إن شاء الله ..
الآن عليك عمل مثل الذي عملنا قبل قليل ( قص صورة صغيرة ) مع كل الصور التي قمنا بتحديدها لنقوم بمسحها واستبدالها بصورة تتمدد على كل الخلية .. الصورة التالية توضح مناطق التمدد التي اقصدها :
http://www.aborenaz.com/dros/img/COURSE_lesson3_006.gif
--------------------------------------------------------------------------------
13
الآن قم بفتح برنامج الفرونت بيج ( http://www.aborenaz.com/images/front_icon.gif Microsoft Office FrontPage 2003 ) .. ثم قم بفتح صفحة Index التي حفظتها عن طريق الفوتوشوب قبل قليل ..
ثم قم بالضغط بالزر الأيمن على أي منطقة .. واختر ( خصائص الصفحة ) .. كما في الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_015.gif
--------------------------------------------------------------------------------
14
الآن قم بعمل مافي الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_016.gif
--------------------------------------------------------------------------------
15
ثم من القائمة الموجودة في الجهة اليسرى السفلية .. طبّق مافي الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_017.gif
ثم اعمل التالي :
http://www.aborenaz.com/dros/img/COURSE_lesson3_018.gif
ثم اضغط ( موافق ) ثم ( موافق ) ثم ( موافق ) .
ستجد أن التصميم أصبح في منتصف الصفحة ..
--------------------------------------------------------------------------------
16
جميلٌ جداً .. الآن سنعمل التالي :
أولاً : عمل روابط على الصور التي نريد أن نضع عليها روابط ! .
ثانياً : حذف الصور ذات اللون الواحد وإبدالها بلون ؛ ليخف حجم الموقع .
ثالثاً : حذف الصور التي يمكن استبدالها بصورة صغيرة متمدة ؛ ليخفّ حجم الموقع .
إلى التفاصيل :
--------------------------------------------------------------------------------
17
أولاً : عمل روابط على الصور التي نريد أن نضع عليها روابط :
أضغط على الصورة التي تريد وضع رابط عليها بالزر الأيمن .. ثم اختر ( خصائص الصورة ) .. كما في الصورة التالية .
http://www.aborenaz.com/dros/img/COURSE_lesson3_019.gif
--------------------------------------------------------------------------------
18
طبّق ما في الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_020.gif
--------------------------------------------------------------------------------
19
ثم من تبيويب ( عام ) طبّق الإعدادات التالية .
http://www.aborenaz.com/dros/img/COURSE_lesson3_021.gif
ثم اضغط ( موافق ) .
وأفعل هذا مع كل الصور التي تريد أن تضع عليها رابطاً .
--------------------------------------------------------------------------------
ملاحظة : البعض سألني عن أكواد جعل الموقع كصفحة رئيسية و إضافة الموقع للمفضلة .. سأضعها لكم هنا ..
- كود code جعل الموقع كـ صفحة رئيسية بموقغك ! :
رمز Code:
<img class="chlnk" style="CURSOR: hand" onclick="this.style.behavior='url(#default#homepag e)';this.setHomePage('http://www.aborenaz.com');" alt="إجعل الموقع صفحة البدء لديك" src="../images/main_17.gif" border="0" HREF width="32" height="31">
مع تغيير مايلزم .
- كود code إضافة الموقع للمفضلة :
رمز Code:
<img style="CURSOR: hand" onclick="javascript:window.external.AddFavorite('h ttp://www.aborenaz.com', ' ّّّ][ مــوقــع ابـــو ريــنـــاز ][ ')" alt="أضف موقع ابو ريناز لمفضلتك" src="../images/main_24.gif" border="0" HREF width="30" height="30">
مع تغيير مايلزم .
--------------------------------------------------------------------------------
20
ثانياً : حذف الصور ذات اللون الواحد وإبدالها بلون ؛ ليخف حجم الموقع .
اذهب الى الصور التي قمت بقصّها في الخطوة رقم 4 واضغط عليها بالزر الأيمن .. ثم اختر ( خصائص الخلية ) .. كما في الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_022.gif
--------------------------------------------------------------------------------
21
ثم اعمل مافي الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_024.gif
--------------------------------------------------------------------------------
22
الآن قم بسحب شافط الألوان .. وافلته على الصورة التي ضغطت عليها بالزر الأيمن قبل قليل ! .. كما في الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_023.gif
قم اضغط ( موافق ) ثم ( موافق ) .
--------------------------------------------------------------------------------
23
الآن قم بمسح الصورة وذلك بالضغط على زر Delete .. ولن يتأثر الشكل الخارجي .. وسبصبح التصفح أسرع ! .. التوضيح في الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_025.gif
أفعل هذه الخطوة مع باقي المساحات التي قمنا بتحديدها في الخطوة رقم 4 .
--------------------------------------------------------------------------------
24
ثالثاً : حذف الصور التي يمكن استبدالها بصورة صغيرة متمدة ؛ ليخفّ حجم الموقع .
اذهب الى الصور التي قمت بقصّها في الخطوة رقم 5 واضغط عليها بالزر الأيمن .. ثم اختر ( خصائص الخلية ) .. كما في الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_026.gif
--------------------------------------------------------------------------------
25
الآن اضغط على كلمة ( استعراض ) الموجودة في الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_027.gif
ثم اخترالصورة الصغيرة التي قمت بقصّها وحفظها في الخطوة رقم 12 .. كما في الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_028.gif
الآن قم بمسح الصورة وذلك بالضغط على زر Delete .. ولن يتأثر الشكل الخارجي .. وسبصبح التصفح أسرع ! .. التوضيح في الصورة التالية :
http://www.aborenaz.com/dros/img/COURSE_lesson3_029.gif
أفعل هذه الخطوة مع باقي المساحات التي قمنا بتحديدها في الخطوة رقم 5 .
--------------------------------------------------------------------------------
26
الحمدلله .. أخيراً قمنا بالإنتهاء من الخطوات الأساسية في هذا الدرس مفصل .. والباقي عليك !!
أضف بعض لمساتك .. حتى يصبح الموقع بالشكل المطلوب ..
عن نفسي فقد قمت بإضافة بعض اللمسات البسيطة حتى أصبح الموقع بهذا الشكل :
http://www.aborenaz.com/dros/img/COURSE_lesson3_030.gif
ولمعاينة الموقع .. أضغط على هذا الزر http://www.aborenaz.com/dros/img/COURSE_lesson3_031.gif من شريط التنسيق .
--------------------------------------------------------------------------------
بهذا .. نكون قد انتهينا من الدرس مفصل الثالث بحمد الله .. أتمنى أن يكون الدرس مفصل وضجاً وبسيطاً عليكم .. وأعذروني على التقصير .. فقط أريد منكم الدعاء لي ولوالدي http://www.aborenaz.com/smilies/smilies2/3atfah_khjl/blushing.gif .
انتهى الدرس مفصل http://aborenaz.com/smilies/smilies2/bay/bye1.gif
http://aborenaz.com/my/my_smple02.gif (http://aborenaz.com)
http://aborenaz.com/my/my_smple.gif (http://aborenaz.com)
تحياتي .. ابو ريناز
www.AboRenaz.com (http://www.AboRenaz.com)
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
