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

**H.Y.M** · 03-08-2006, 04:25 PM

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

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

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

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

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

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

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

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

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

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

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

و نقطع الفوتر على الشكل التالي

تنبيه
اجعل القطعة اليمنى مساوية للقطعة اليسرى ..
(للدقة في القياس بإمكانك الاستعانة بالمسطرة عن طريق الضغط على 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

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

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

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

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

**H.Y.M** · 03-08-2006, 04:31 PM

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

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

ننشئ جدولاً في كما في الصورة

الآن في أي مكان من الجدول ، اضغط كلك يمين ثم اختر Table Properties ..

طبق الإعدادات كما في الصورة ..

ثم اضغط على OK ..

الآن ، اضغط Ctrl+a ،،، ثم اختر توسيط ..

الآن ، في الحقل الأيمن من الجدول ، اضغط داخله ضغطة واحدة ، ثم اختر إدراج صورة ..

و اختر الصورة footer_right ، ثم اضغط على OK ..

الآن اضغط على الصورة footer_right كلك يمين ثم اختر Cell Properties ..
و طبق الاعدادات التي في الصورة ..

ثم اضغط على OK ..

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

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

في هذا الحقل ، اضغط كلك يمين ثم Cell Properties ..

و طبق الاعدادات التالية ..

ثم اضغط على OK ..

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

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

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

**H.Y.M** · 05-08-2006, 04:44 PM

مممممممم

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

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

**Cenrak** · 05-08-2006, 06:27 PM

السلام عليكم
هلا و الله أخوي HYM

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

المشاركة الأصلية كتبت بواسطة H.Y.M

مممممممم

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

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

أنا صارتلي مواقف تحطمت فيها

كنت أكتب مواضيع و نهايتها زوار بالهبل و لا رد

عشان كذا مواضيعي قليلة مرة

تحياتي ،،
Cenrak

**عمر** · 08-08-2006, 06:28 PM

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

**CHALLENGER** · 09-08-2006, 12:31 PM

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

**Cenrak** · 09-08-2006, 02:50 PM

المشاركة الأصلية كتبت بواسطة CHALLENGER

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

بالـ CSS أصعب !!!!!!

بالعكس

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

كود 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>

**H.Y.M** · 09-08-2006, 06:41 PM

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

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

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

**الخيال** · 09-08-2006, 07:40 PM

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

**H.Y.M** · 10-08-2006, 07:35 PM

المشاركة الأصلية كتبت بواسطة MAXIM:JE

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

العفو اخوي MAXIM:JE ،، و تسلم على مرورك ،، نورت الموضوع

**Dark Gamer** · 10-08-2006, 09:12 PM

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

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

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

**H.Y.M** · 11-08-2006, 07:19 PM

المشاركة الأصلية كتبت بواسطة Dark Gamer

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

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

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

العفو اخوي Dar Gamer ... اسعدتني بتواجدك

**CHALLENGER** · 12-08-2006, 12:04 AM

المشاركة الأصلية كتبت بواسطة Cenrak

بالـ CSS أصعب !!!!!!

بالعكس

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

كود 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 مع انه هو اساس الستايل في الموقع

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

أدوات الموضوع

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

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

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

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

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

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

رد: [درس] طريقة جعل عرض الموقع يتمدد مع المتصف&#1581

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

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

رد: [درس] طريقة جعل عرض الموقع يتمدد مع المتصف&#1581

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

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

رد: [درس] طريقة جعل عرض الموقع يتمدد مع المتصف&#1581

ضوابط المشاركة