1 مرفق
[درس] طريقة جعل عرض الموقع يتمدد مع المتصفح
بسم الله الرحمن الرحيم
هذا الدرس مفيد جداً و مهم ، و في نفس الوقت بسيط إن شاء الله ..
مقدمة
أظن أغلبكم رأى مواقع يتمدد تصميمها مع تصغير و تكبير المتصفح ، فهل سألت نفسك يوماً ، كيف يمكن فعل ذلك ؟!
هذا ما سنتعلمه في هذا الدرس بإذن الله ، و هو كيفية جعل تصميم الموقع يتمدد تلقائياً ليتناسب مع متصفح الزائر ..
سنحتاج في تطبيق هذا الدرس إلى برنامجين :
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 أيضاً))
يتبع الدرس في الرد القادم ..
1 مرفق
تابع : [درس] طريقة جعل عرض الموقع يتناسب مع متصفح الزائر
رد: [درس] طريقة جعل عرض الموقع يتناسب مع متصفح الزائر
مممممممم :33:
توقعت ذلك ،،، أكثر من 30 مشاهدة و لا يوجد رد واحد :أفكر:
على العموم ، أتمنى أن تستفيدوا فعلاً من الدرس :)
رد: [درس] طريقة جعل عرض الموقع يتناسب مع متصفح الزائر
السلام عليكم
هلا و الله أخوي HYM :)
مشكور و جزاك الله ألف خير
هو السر إنك تخليها Background زي ما تفضلت و قلت
بس لو تضبط عرض الـ Cell مضبوط
ما يحتاج إنك تضبط الـ Alignment
بس أتوقع بالـ CSS بتطلع أسهل
;)
اقتباس:
المشاركة الأصلية كتبت بواسطة H.Y.M
مممممممم :33:
توقعت ذلك ،،، أكثر من 30 مشاهدة و لا يوجد رد واحد :أفكر:
على العموم ، أتمنى أن تستفيدوا فعلاً من الدرس :)
أنا صارتلي مواقف تحطمت فيها :(
كنت أكتب مواضيع و نهايتها زوار بالهبل و لا رد :wow:
عشان كذا مواضيعي قليلة مرة ;)
تحياتي ،،
Cenrak
رد: [درس] طريقة جعل عرض الموقع يتناسب مع متصفح الزائر
رد: [درس] طريقة جعل عرض الموقع يتمدد مع المتصفح
طريقة بسيطة و سهلة للجميع شكرا لك
و بالمناسبة بالـسي اس اس مثل ما قال احد الاخوة اصعب من هذي الطريقة
1 مرفق
رد: [درس] طريقة جعل عرض الموقع يتمدد مع المتصفح
اقتباس:
المشاركة الأصلية كتبت بواسطة CHALLENGER
و بالمناسبة بالـسي اس اس مثل ما قال احد الاخوة اصعب من هذي الطريقة
:wow::wow::wow::wow::wow::wow::wow:
بالـ CSS أصعب !!!!!!:wow:
بالعكس ;)
شوف كود الصفحة و أعطيني رأيك
كود PHP:
<!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>
<meta 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>
:)
رد: [درس] طريقة جعل عرض الموقع يتمدد مع المتصفح
شكراً لكم جميعاً على مروركم الرائع ...
الأخ cenrak : قد يكون الـcss أسهل ،، لكنني لا أحب التعامل معه :p
نورتوا الموضوع بردودكم :)
رد: [درس] طريقة جعل عرض الموقع يتمدد مع المتصفح
شكراً لك... موضوع مفيد جداً
جزاك الله خير
رد: [درس] طريقة جعل عرض الموقع يتمدد مع المتصفح
اقتباس:
المشاركة الأصلية كتبت بواسطة MAXIM:JE
شكراً لك... موضوع مفيد جداً
جزاك الله خير
العفو اخوي MAXIM:JE ،، و تسلم على مرورك ،، نورت الموضوع :)
رد: [درس] طريقة جعل عرض الموقع يتمدد مع المتصفح
الســلام عليـــكم
الصراحة درس رائع ومجهود تشكر عليه H.Y.M :)
تســــلم أخــــوي -_^
رد: [درس] طريقة جعل عرض الموقع يتمدد مع المتصفح
اقتباس:
المشاركة الأصلية كتبت بواسطة Dark Gamer
الســلام عليـــكم
الصراحة درس رائع ومجهود تشكر عليه H.Y.M :)
تســــلم أخــــوي -_^
العفو اخوي Dar Gamer ... اسعدتني بتواجدك :)
رد: [درس] طريقة جعل عرض الموقع يتمدد مع المتصفح
اقتباس:
المشاركة الأصلية كتبت بواسطة Cenrak
:wow::wow::wow::wow::wow::wow::wow:
بالـ CSS أصعب !!!!!!:wow:
بالعكس ;)
شوف كود الصفحة و أعطيني رأيك
كود PHP:
<!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>
<meta 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 مع انه هو اساس الستايل في الموقع :)
