[درس] طريقة جعل عرض الموقع يتمدد مع المتصفح

[H.Y.M]

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


هذا الدرس مفيد جداً و مهم ، و في نفس الوقت بسيط إن شاء الله ..

مقدمة
أظن أغلبكم رأى مواقع يتمدد تصميمها مع تصغير و تكبير المتصفح ، فهل سألت نفسك يوماً ، كيف يمكن فعل ذلك ؟!
هذا ما سنتعلمه في هذا الدرس بإذن الله ، و هو كيفية جعل تصميم الموقع يتمدد تلقائياً ليتناسب مع متصفح الزائر ..


سنحتاج في تطبيق هذا الدرس إلى برنامجين :

1- الفوتوشوب ..
2- الفرونت بيج ..

---
مصطلحات يجب معرفتها قبل البداية

Header : الهيدر ، هو البانر العلوي الذي في أعلى الموقع .
Footer : الفوتر ، هو البانر السفلي الذي في أسفل الموقع .

---
خطوات برنامج الفوتوشوب

نقوم بتصميم الهيدر و الفوتر (الأفضل أن يكون كل واحد لحاله) .

و سنكتفي في هذا الدرس بالشرح على الفوتر ، لأنك إذا عرفت التطبيق على الفوتر فالتطبيق على الهيدر لا يختلف عنه ..

صمم الفوتر على ذوقك و بما يناسب موقعك ، و بعد الانتهاء من تصميم الفوتر نقوم باختيار الأداة التالية لنقوم بتقطيع الصورة ..
http://hym.jeeran.com/photoshop_1.gif

و نقطع الفوتر على الشكل التالي
http://hym.jeeran.com/photoshop_2.gif

تنبيه
اجعل القطعة اليمنى مساوية للقطعة اليسرى ..
(للدقة في القياس بإمكانك الاستعانة بالمسطرة عن طريق الضغط على Ctrl+r)

الأجزاء التي نحتاجها من الصورة السابقة هي 1 و 3 و 5

اضغط كلك يمين على رقم 1 ، ثم اختر Edit Slice Options ، و اكتب في خانة Name التالي : footer_left ،،، ثم اضغط على OK ..
و نفس الطريقة لرقم 3 ، و قم بتسميته footer_c ، ثم اضغط على OK
و كذلك نفس الطريقة لرقم 5 ، و قم بتسميته footer_right ، ثم اضغط على OK

الآن من قائمة File اختر Save for web ،،، ثم اضغط على save
و بالنسبة لخيار Save as type فاجعله Images Only (*.gif
http://hym.jeeran.com/photoshop_3.gif

كما ذكرت في البداية ، اقتصرت في هذا الشرح على منطقة الفوتر ، لأنك لو عرفت التطبيق على الفوتر فستعرف التعامل مع الهيدر ..

و هكذا انتهى دور الفوتوشوب


((لعل البعض يواجه بعض الصعوبات ، فمن باب التسهيل عليكم وضعت لكم في المرفقات ملف zip فيه ملف الـpsd للفوتر الذي طبقت عليه المثال السابق ، و صور الـgif أيضاً))

يتبع الدرس في الرد القادم ..

[H.Y.M]

خطوات برنامج الفرونت بيج

نفتح برنامج الفرونت بيج .. و نفتح صفحة جديدة ..

ننشئ جدولاً في كما في الصورة
http://hym.jeeran.com/front_1.gif

الآن في أي مكان من الجدول ، اضغط كلك يمين ثم اختر Table Properties ..
http://hym.jeeran.com/front_2.gif

طبق الإعدادات كما في الصورة ..
http://hym.jeeran.com/front_3.gif
ثم اضغط على OK ..

الآن ، اضغط Ctrl+a ،،، ثم اختر توسيط ..
http://hym.jeeran.com/front_4.gif

الآن ، في الحقل الأيمن من الجدول ، اضغط داخله ضغطة واحدة ، ثم اختر إدراج صورة ..
http://hym.jeeran.com/front_5.gif
و اختر الصورة footer_right ، ثم اضغط على OK ..

الآن اضغط على الصورة footer_right كلك يمين ثم اختر Cell Properties ..
و طبق الاعدادات التي في الصورة ..
http://hym.jeeran.com/front_7.gif
ثم اضغط على OK ..

و نفس الأمر مع الحقل الذي في اليسار ، فقط مع تغيير خيار Horizontal alignment إلى Left

بقي الآن الحقل الذي في الوسط ، انتبه ، لا تستعجل ، فهذا الحقل إعداده مختلف قليلاً عن الباقين ..

في هذا الحقل ، اضغط كلك يمين ثم Cell Properties ..
http://hym.jeeran.com/front_6.gif

و طبق الاعدادات التالية ..
http://hym.jeeran.com/front_8.gif
ثم اضغط على OK ..


اختر الآن Preview لترى نتيجة الدرس ^_^

صحيح أن الدرس طويل نوعاً ما ، لكن أتمنى أن يكون سهلاً ، و أي استفسار أنا حاضر ..

الدرس كاملاً ،، تجده في المرفقات على هيئة ملف وورد ..

[H.Y.M]

مممممممم :33:

توقعت ذلك ،،، أكثر من 30 مشاهدة و لا يوجد رد واحد :أفكر:

على العموم ، أتمنى أن تستفيدوا فعلاً من الدرس :)

[Cenrak]

السلام عليكم
هلا و الله أخوي HYM :)
مشكور و جزاك الله ألف خير
هو السر إنك تخليها Background زي ما تفضلت و قلت
بس لو تضبط عرض الـ Cell مضبوط
ما يحتاج إنك تضبط الـ Alignment
بس أتوقع بالـ CSS بتطلع أسهل
;)


مممممممم :33:

توقعت ذلك ،،، أكثر من 30 مشاهدة و لا يوجد رد واحد :أفكر:

على العموم ، أتمنى أن تستفيدوا فعلاً من الدرس :)
أنا صارتلي مواقف تحطمت فيها :(
كنت أكتب مواضيع و نهايتها زوار بالهبل و لا رد :wow:
عشان كذا مواضيعي قليلة مرة ;)

تحياتي ،،
Cenrak

[عمر]

درس مفيد وشكرا لك.

[CHALLENGER]

طريقة بسيطة و سهلة للجميع شكرا لك
و بالمناسبة بالـسي اس اس مثل ما قال احد الاخوة اصعب من هذي الطريقة

[Cenrak]

و بالمناسبة بالـسي اس اس مثل ما قال احد الاخوة اصعب من هذي الطريقة :wow::wow::wow::wow::wow::wow::wow:
بالـ CSS أصعب !!!!!!:wow:
بالعكس ;)

شوف كود الصفحة و أعطيني رأيك

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
****** http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Test for Montada.com</title>
<style type="text/css">
<!--
.right {
background-color: #CCCCCC;
float: right;
width: 100px;
height:30px;
}
.container {
background-color: #666666;
width:100%;
height:30px;
}
.left {
background-color: #CCCCCC;
float: left;
width: 100px;
height:30px;
}
-->
</style>
</head>

<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>


:)

[H.Y.M]

شكراً لكم جميعاً على مروركم الرائع ...

الأخ cenrak : قد يكون الـcss أسهل ،، لكنني لا أحب التعامل معه :p

نورتوا الموضوع بردودكم :)

[الخيال]

شكراً لك... موضوع مفيد جداً
جزاك الله خير

[H.Y.M]

شكراً لك... موضوع مفيد جداً
جزاك الله خير
العفو اخوي MAXIM:JE ،، و تسلم على مرورك ،، نورت الموضوع :)

[Dark Gamer]

الســلام عليـــكم


الصراحة درس رائع ومجهود تشكر عليه H.Y.M :)


تســــلم أخــــوي -_^

[H.Y.M]

الســلام عليـــكم


الصراحة درس رائع ومجهود تشكر عليه H.Y.M :)


تســــلم أخــــوي -_^
العفو اخوي Dar Gamer ... اسعدتني بتواجدك :)

[CHALLENGER]

:wow::wow::wow::wow::wow::wow::wow:
بالـ CSS أصعب !!!!!!:wow:
بالعكس ;)

شوف كود الصفحة و أعطيني رأيك

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
****** http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Test for Montada.com</title>
<style type="text/css">
<!--
.right {
background-color: #CCCCCC;
float: right;
width: 100px;
height:30px;
}
.container {
background-color: #666666;
width:100%;
height:30px;
}
.left {
background-color: #CCCCCC;
float: left;
width: 100px;
height:30px;
}
-->
</style>
</head>

<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>


:)



فعلا و شكرا للكود و لكن انا قصدت مثل ما قال بعض الاخوان الكثر ما يحبوا يتعاملوا مع الـcss مع انه هو اساس الستايل في الموقع :)