abohmam
14-10-2010, 08:07 AM
بسم الله الرحمن الرحيم
(4) تصميم موقع كالمجله بكل دقه واحتراف
تكملة للجزء الثالث ...
والحين راح تقول وتسأل نفسك هذااا يضحك علينااااااا ويحسبنا ما نعرف بالتصميم .. وين القوائم اللي يصير بداخلها الروابط واسمائها
وايضا اين اطار قائمة المحتوياااااات ؟
بس هذا !!
أبشر راح نكمل حديثنا ومااااااااااا قلنا لك ياخوي لا تستعجل على رزقك جايينك بالحجي لا تخاااااااف ..
روح للفوتوشوب وافتح صورة التصميم اللي عملناه أول شي
http://www.abc4web.net/vb/imgcache/8044.abc4web.jpg
ثم اختر الأداة التاليه :
http://www.abc4web.net/vb/imgcache/8046.abc4web.jpg
ثم قم بعمل مربع ليس كبير ولا صغير يعني متوسط الحجم حتى يكون بمثابة شكل للقائمه ثم نعطيه خصائص الاستايل اللي حفظناه
بنافذة الاستايلات
http://www.abc4web.net/vb/imgcache/8048.abc4web.jpg
وسيصبح شكل المربع كهذا
http://www.abc4web.net/vb/imgcache/8050.abc4web.jpg
ثم قم بحفظ العمل بالضعط على File ثم save as ثم قم بتسمية الصوره اي اسم ومن امام كملة format اختر الامتداه الموضح لك
بالصوره التاليه بالرقم 1 ثم اضغط على save
http://www.abc4web.net/vb/imgcache/8053.abc4web.jpg
ثم بعد ذلك افتح الصوره اللي حفظتها بالضغط على File ثم Open ثم اختر الصوره اللي قمت بحفظها للتو ... ثم من صندوق الأدوات
اختر أداة التحديد وقم بتحديد المربع اللي عملناااااااه بمثل هالتحديد
http://www.abc4web.net/vb/imgcache/8055.abc4web.jpg
ثم من قائمة Edit اختر Cut ثم اذهب الى قائمة File واختر New واضغط على ok مباشرة ولا تغيير بالمقاسات نهائيا ثم اضغط على
قائمة Edit واختر منها Paste وراح تشوف بأن تم لصق المربع اللي حددناه كما هو
http://www.abc4web.net/vb/imgcache/8056.abc4web.jpg
والآن طال عمرك نقوم بتقصيصه ... والتقصيص للمربع من اسهل ما يكون !!
قم بتحديد المربع من الأعلى
http://www.abc4web.net/vb/imgcache/8058.abc4web.jpg
ثم من قائمة Edit اختر Cut ثم اذهب الى قائمة File واختر New واضغط على ok مباشرة ثم اضغط على قائمة Edit واختر منها
Paste .
ثم قم بحفظ الصوره بإسم m1 ومن امام خيار format اختر الامتداد jpg .
http://www.abc4web.net/vb/imgcache/8060.abc4web.jpg
ثم قم بتحديد المربع من الاسفل
http://www.abc4web.net/vb/imgcache/8062.abc4web.jpg
ثم من قائمة Edit اختر Cut ثم اذهب الى قائمة File واختر New واضغط على ok مباشرة ثم اضغط على قائمة Edit واختر منها
Paste .
ثم قم بحفظ الصوره بإسم m2 ومن امام خيار format اختر الامتداد jpg .
http://www.abc4web.net/vb/imgcache/8064.abc4web.jpg
ثم قم بتحديد المربع من الوسط
http://www.abc4web.net/vb/imgcache/8066.abc4web.jpg
ثم من قائمة Edit اختر Cut ثم اذهب الى قائمة File واختر New واضغط على ok مباشرة ثم اضغط على قائمة Edit واختر منها
Paste .
ثم قم بحفظ الصوره بإسم m3 ومن امام خيار format اختر الامتداد jpg .
http://www.abc4web.net/vb/imgcache/8067.abc4web.jpg
الآن انتهينا من تصميم القائمه ... نرجع الى الفرونت بيج الى صفحتنا اللي قمنا بتركيب التصميم عليها
نضغط بالخليه اللي بالمنتصف حتى يصبح المؤشر بداخله ثم نضيف جدول ذو 3 صفوف
http://www.abc4web.net/vb/imgcache/8069.abc4web.jpg
ثم نضغط كلك يمين بداخل الجدول ونختار خصائص الجدول
http://www.abc4web.net/vb/imgcache/8071.abc4web.jpg
وتعمل القيم التاليه
http://www.abc4web.net/vb/imgcache/8073.abc4web.jpg
سيصبح شكل هكذا
http://www.abc4web.net/vb/imgcache/8076.abc4web.jpg
ثم بالخليه اللي بالنص اضغط كلك يمين واختر منها تقسيم الخلايا
http://www.abc4web.net/vb/imgcache/8078.abc4web.jpg
ثم ستظهر لك نافذه اعمل كما مبين لك بالنافذه التاليه ثم اضغط موافق
http://www.abc4web.net/vb/imgcache/8079.abc4web.jpg
وستلاحظ انه تم تقسيم الخليه اللي بالمنتصف الى خليتان !!
ثم قم بسحب العمود اللي يفصل الخليتان الى اليمين حتى يصبح عندنا كما بالشكل التالي :
http://www.abc4web.net/vb/imgcache/8081.abc4web.jpg
ثم اضغط كلك يمين بالخليه اليمنى اللي بالمنتصف واختر منها خصائص الخليه ثم ستظهر لك نافذه من امام الخيار محاذاة عموديه اختر
الخيار أعلى هو احفظ التعديل ... وايضا من الخليه اليسري اللي بالمنتصف اضغط كلك يمين واجعل الخيار محاذاة عموديه الى أعلى .
http://www.abc4web.net/vb/imgcache/8083.abc4web.jpg
والآن اجعل المؤشر بداخل الخليه اليمنى اللي بالمنتصف
http://www.abc4web.net/vb/imgcache/8086.abc4web.jpg
ثم اضف جدول ذو 3 خلايا
http://www.abc4web.net/vb/imgcache/8069.abc4web.jpg
ثم اضغط كلك يمين بداخل الجدول واختر خصائص الجدول واعمل كما مبين لك
http://www.abc4web.net/vb/imgcache/8073.abc4web.jpg
ثم ستلاحظ انه اصبح هكذا
http://www.abc4web.net/vb/imgcache/8087.abc4web.jpg
والآن بنفس الجدول ومن داخل الخليه السفليه اختر اداة ادراج الصور
http://www.abc4web.net/vb/imgcache/8089.abc4web.jpg
ثم اختر الصوره اللي حفظناها عندما قمنا بتقصيص المربع تبع القائمه اللي يحمل الاسم m2 سيصبح هكذا
http://www.abc4web.net/vb/imgcache/8091.abc4web.jpg
ثم من الخليه اللي بالنص اضغط كلك يمين من داخلها واختر خصائص الخليه ثم اضغط على استعراض واختر الصوره اللي قمنا بحفظها
بإسم m3 .
ثم ستلاحظ انه تم تعبئة الخليه بكاملها واصبحت الصوره خلفيه للخليه ومهما اصبح تمدد بالخليه فلن يظهر لك سوى الصوره اللي
حطيناها للتو يعني لاااااااااا تخاف من تشوه التصميم ولا اخترابه .
وسيصبح هكذا
http://www.abc4web.net/vb/imgcache/8092.abc4web.jpg
والآن من الخليه العلويه اضغط كلك يمين من داخلها واختر خصائص الخليه ثم اضغط استعراض واختر الصوره اللي تحمل الاسم m1
http://www.abc4web.net/vb/imgcache/8093.abc4web.jpg
جميل جدا >>> ولــكن لو تلاحظ ان الخليه العلويه فيها شي غلط !!! ان ارتفاعها مو نفس ارتفاع الصوره الاصليه !!
تعال معااااااي علشان نكتشف أين الخلل والمشكله ....
اذهب للفوتوشوب ثم اضغط على القائمه File ثم اختر Open ثم افتح الصوره اللي تحمل الاسم m1
http://www.abc4web.net/vb/imgcache/8060.abc4web.jpg
بعد فتح الصوره اضغط على القائمة image ثم اختر الخيار Image Size ثم ستظهر لك نافذة حجم الصوره ومقاساتها كما الصوره
التاليه
http://www.abc4web.net/vb/imgcache/8094.abc4web.jpg
وما يهمنا بهذه النافذه هو اكتشاف ارتفاع الصوره فقط !!! من الخيار Height المظلل ستجد مقاس ارتفاع الصوره المطلوبه ولاحظ ان
مقاس ارتفاع الصوره لدينا الآن هو 53 ولاحـــظ أيضا أنه لابد من وضع الخيار في القائمه اللي على جنب على pixles ....
كل ما عليك هو حفظ رقم ارتفاع الصوره في ذاكرتك !!
والآن نرجع للفرونت بيج والى الخليه العلويه ونضغط كلك يمين بداخلها ثم نختار خصائص الخليه ثم من امام الخيار تحديد الإرتفاع نضع
علامة صح ونكتب الرقم اللي حفظناه بذاكرتنا ثم نقوم بتأشير الخيار بالبكسل ... كما بالصوره
http://www.abc4web.net/vb/imgcache/8095.abc4web.jpg
ثم شاهد ماذا حدث
http://www.abc4web.net/vb/imgcache/8096.abc4web.jpg
والآن اترك المؤشر داخل الخليه واضغط على اداة التوسيط
http://www.abc4web.net/vb/imgcache/8097.abc4web.jpg
واكتب اي عباره مثلا القائمة الرئيسيه .
ثم بالخليه اللي بالنص اكتب بها روابط موقعك او روابط تحب ان تضيفها بالقائمه .
http://www.abc4web.net/vb/imgcache/8098.abc4web.jpg
والحين أكيد راح تسأل >> المجلة غالبا يصير لها اطارات بداخل الصفحه ؟؟ وللحين مااااااا شفنا هالاطارات ؟!
http://www.abc4web.net/vb/imgcache/8099.abc4web.jpg
راح أقولك أبشر راح نسوي الإطارات مع بعض ولكن في الجزء الخامس ان شاء الله ..
=====/ روابط جميع الدروس \=====
:abc4web:
( 1 ) تصميم موقع كالمجله بكل دقه واحتراف (http://www.abc4web.net/vb/showthread.php?t=12582)
( 2 ) تصميم موقع كالمجله بكل دقه واحتراف (http://www.abc4web.net/vb/showthread.php?t=12583)
( 3 ) تصميم موقع كالمجله بكل دقه واحتراف (http://www.abc4web.net/vb/showthread.php?t=12584)
( 4 ) تصميم موقع كالمجله بكل دقه واحتراف (http://www.abc4web.net/vb/showthread.php?t=12585)
( 5 ) تصميم موقع كالمجله بكل دقه واحتراف (http://www.abc4web.net/vb/showthread.php?t=12586)
:bar:
.
(4) تصميم موقع كالمجله بكل دقه واحتراف
تكملة للجزء الثالث ...
والحين راح تقول وتسأل نفسك هذااا يضحك علينااااااا ويحسبنا ما نعرف بالتصميم .. وين القوائم اللي يصير بداخلها الروابط واسمائها
وايضا اين اطار قائمة المحتوياااااات ؟
بس هذا !!
أبشر راح نكمل حديثنا ومااااااااااا قلنا لك ياخوي لا تستعجل على رزقك جايينك بالحجي لا تخاااااااف ..
روح للفوتوشوب وافتح صورة التصميم اللي عملناه أول شي
http://www.abc4web.net/vb/imgcache/8044.abc4web.jpg
ثم اختر الأداة التاليه :
http://www.abc4web.net/vb/imgcache/8046.abc4web.jpg
ثم قم بعمل مربع ليس كبير ولا صغير يعني متوسط الحجم حتى يكون بمثابة شكل للقائمه ثم نعطيه خصائص الاستايل اللي حفظناه
بنافذة الاستايلات
http://www.abc4web.net/vb/imgcache/8048.abc4web.jpg
وسيصبح شكل المربع كهذا
http://www.abc4web.net/vb/imgcache/8050.abc4web.jpg
ثم قم بحفظ العمل بالضعط على File ثم save as ثم قم بتسمية الصوره اي اسم ومن امام كملة format اختر الامتداه الموضح لك
بالصوره التاليه بالرقم 1 ثم اضغط على save
http://www.abc4web.net/vb/imgcache/8053.abc4web.jpg
ثم بعد ذلك افتح الصوره اللي حفظتها بالضغط على File ثم Open ثم اختر الصوره اللي قمت بحفظها للتو ... ثم من صندوق الأدوات
اختر أداة التحديد وقم بتحديد المربع اللي عملناااااااه بمثل هالتحديد
http://www.abc4web.net/vb/imgcache/8055.abc4web.jpg
ثم من قائمة Edit اختر Cut ثم اذهب الى قائمة File واختر New واضغط على ok مباشرة ولا تغيير بالمقاسات نهائيا ثم اضغط على
قائمة Edit واختر منها Paste وراح تشوف بأن تم لصق المربع اللي حددناه كما هو
http://www.abc4web.net/vb/imgcache/8056.abc4web.jpg
والآن طال عمرك نقوم بتقصيصه ... والتقصيص للمربع من اسهل ما يكون !!
قم بتحديد المربع من الأعلى
http://www.abc4web.net/vb/imgcache/8058.abc4web.jpg
ثم من قائمة Edit اختر Cut ثم اذهب الى قائمة File واختر New واضغط على ok مباشرة ثم اضغط على قائمة Edit واختر منها
Paste .
ثم قم بحفظ الصوره بإسم m1 ومن امام خيار format اختر الامتداد jpg .
http://www.abc4web.net/vb/imgcache/8060.abc4web.jpg
ثم قم بتحديد المربع من الاسفل
http://www.abc4web.net/vb/imgcache/8062.abc4web.jpg
ثم من قائمة Edit اختر Cut ثم اذهب الى قائمة File واختر New واضغط على ok مباشرة ثم اضغط على قائمة Edit واختر منها
Paste .
ثم قم بحفظ الصوره بإسم m2 ومن امام خيار format اختر الامتداد jpg .
http://www.abc4web.net/vb/imgcache/8064.abc4web.jpg
ثم قم بتحديد المربع من الوسط
http://www.abc4web.net/vb/imgcache/8066.abc4web.jpg
ثم من قائمة Edit اختر Cut ثم اذهب الى قائمة File واختر New واضغط على ok مباشرة ثم اضغط على قائمة Edit واختر منها
Paste .
ثم قم بحفظ الصوره بإسم m3 ومن امام خيار format اختر الامتداد jpg .
http://www.abc4web.net/vb/imgcache/8067.abc4web.jpg
الآن انتهينا من تصميم القائمه ... نرجع الى الفرونت بيج الى صفحتنا اللي قمنا بتركيب التصميم عليها
نضغط بالخليه اللي بالمنتصف حتى يصبح المؤشر بداخله ثم نضيف جدول ذو 3 صفوف
http://www.abc4web.net/vb/imgcache/8069.abc4web.jpg
ثم نضغط كلك يمين بداخل الجدول ونختار خصائص الجدول
http://www.abc4web.net/vb/imgcache/8071.abc4web.jpg
وتعمل القيم التاليه
http://www.abc4web.net/vb/imgcache/8073.abc4web.jpg
سيصبح شكل هكذا
http://www.abc4web.net/vb/imgcache/8076.abc4web.jpg
ثم بالخليه اللي بالنص اضغط كلك يمين واختر منها تقسيم الخلايا
http://www.abc4web.net/vb/imgcache/8078.abc4web.jpg
ثم ستظهر لك نافذه اعمل كما مبين لك بالنافذه التاليه ثم اضغط موافق
http://www.abc4web.net/vb/imgcache/8079.abc4web.jpg
وستلاحظ انه تم تقسيم الخليه اللي بالمنتصف الى خليتان !!
ثم قم بسحب العمود اللي يفصل الخليتان الى اليمين حتى يصبح عندنا كما بالشكل التالي :
http://www.abc4web.net/vb/imgcache/8081.abc4web.jpg
ثم اضغط كلك يمين بالخليه اليمنى اللي بالمنتصف واختر منها خصائص الخليه ثم ستظهر لك نافذه من امام الخيار محاذاة عموديه اختر
الخيار أعلى هو احفظ التعديل ... وايضا من الخليه اليسري اللي بالمنتصف اضغط كلك يمين واجعل الخيار محاذاة عموديه الى أعلى .
http://www.abc4web.net/vb/imgcache/8083.abc4web.jpg
والآن اجعل المؤشر بداخل الخليه اليمنى اللي بالمنتصف
http://www.abc4web.net/vb/imgcache/8086.abc4web.jpg
ثم اضف جدول ذو 3 خلايا
http://www.abc4web.net/vb/imgcache/8069.abc4web.jpg
ثم اضغط كلك يمين بداخل الجدول واختر خصائص الجدول واعمل كما مبين لك
http://www.abc4web.net/vb/imgcache/8073.abc4web.jpg
ثم ستلاحظ انه اصبح هكذا
http://www.abc4web.net/vb/imgcache/8087.abc4web.jpg
والآن بنفس الجدول ومن داخل الخليه السفليه اختر اداة ادراج الصور
http://www.abc4web.net/vb/imgcache/8089.abc4web.jpg
ثم اختر الصوره اللي حفظناها عندما قمنا بتقصيص المربع تبع القائمه اللي يحمل الاسم m2 سيصبح هكذا
http://www.abc4web.net/vb/imgcache/8091.abc4web.jpg
ثم من الخليه اللي بالنص اضغط كلك يمين من داخلها واختر خصائص الخليه ثم اضغط على استعراض واختر الصوره اللي قمنا بحفظها
بإسم m3 .
ثم ستلاحظ انه تم تعبئة الخليه بكاملها واصبحت الصوره خلفيه للخليه ومهما اصبح تمدد بالخليه فلن يظهر لك سوى الصوره اللي
حطيناها للتو يعني لاااااااااا تخاف من تشوه التصميم ولا اخترابه .
وسيصبح هكذا
http://www.abc4web.net/vb/imgcache/8092.abc4web.jpg
والآن من الخليه العلويه اضغط كلك يمين من داخلها واختر خصائص الخليه ثم اضغط استعراض واختر الصوره اللي تحمل الاسم m1
http://www.abc4web.net/vb/imgcache/8093.abc4web.jpg
جميل جدا >>> ولــكن لو تلاحظ ان الخليه العلويه فيها شي غلط !!! ان ارتفاعها مو نفس ارتفاع الصوره الاصليه !!
تعال معااااااي علشان نكتشف أين الخلل والمشكله ....
اذهب للفوتوشوب ثم اضغط على القائمه File ثم اختر Open ثم افتح الصوره اللي تحمل الاسم m1
http://www.abc4web.net/vb/imgcache/8060.abc4web.jpg
بعد فتح الصوره اضغط على القائمة image ثم اختر الخيار Image Size ثم ستظهر لك نافذة حجم الصوره ومقاساتها كما الصوره
التاليه
http://www.abc4web.net/vb/imgcache/8094.abc4web.jpg
وما يهمنا بهذه النافذه هو اكتشاف ارتفاع الصوره فقط !!! من الخيار Height المظلل ستجد مقاس ارتفاع الصوره المطلوبه ولاحظ ان
مقاس ارتفاع الصوره لدينا الآن هو 53 ولاحـــظ أيضا أنه لابد من وضع الخيار في القائمه اللي على جنب على pixles ....
كل ما عليك هو حفظ رقم ارتفاع الصوره في ذاكرتك !!
والآن نرجع للفرونت بيج والى الخليه العلويه ونضغط كلك يمين بداخلها ثم نختار خصائص الخليه ثم من امام الخيار تحديد الإرتفاع نضع
علامة صح ونكتب الرقم اللي حفظناه بذاكرتنا ثم نقوم بتأشير الخيار بالبكسل ... كما بالصوره
http://www.abc4web.net/vb/imgcache/8095.abc4web.jpg
ثم شاهد ماذا حدث
http://www.abc4web.net/vb/imgcache/8096.abc4web.jpg
والآن اترك المؤشر داخل الخليه واضغط على اداة التوسيط
http://www.abc4web.net/vb/imgcache/8097.abc4web.jpg
واكتب اي عباره مثلا القائمة الرئيسيه .
ثم بالخليه اللي بالنص اكتب بها روابط موقعك او روابط تحب ان تضيفها بالقائمه .
http://www.abc4web.net/vb/imgcache/8098.abc4web.jpg
والحين أكيد راح تسأل >> المجلة غالبا يصير لها اطارات بداخل الصفحه ؟؟ وللحين مااااااا شفنا هالاطارات ؟!
http://www.abc4web.net/vb/imgcache/8099.abc4web.jpg
راح أقولك أبشر راح نسوي الإطارات مع بعض ولكن في الجزء الخامس ان شاء الله ..
=====/ روابط جميع الدروس \=====
:abc4web:
( 1 ) تصميم موقع كالمجله بكل دقه واحتراف (http://www.abc4web.net/vb/showthread.php?t=12582)
( 2 ) تصميم موقع كالمجله بكل دقه واحتراف (http://www.abc4web.net/vb/showthread.php?t=12583)
( 3 ) تصميم موقع كالمجله بكل دقه واحتراف (http://www.abc4web.net/vb/showthread.php?t=12584)
( 4 ) تصميم موقع كالمجله بكل دقه واحتراف (http://www.abc4web.net/vb/showthread.php?t=12585)
( 5 ) تصميم موقع كالمجله بكل دقه واحتراف (http://www.abc4web.net/vb/showthread.php?t=12586)
:bar:
.