s3cTur3.dll
°ˆ~*¤®§(*§الأداَره §*)§®¤*~ˆ°
المشاركات : 749
تاريخ الميلاد : 14/04/1998
تاريخ التسجيل : 13/09/2010
العمر : 26
الجنس : 
 |  موضوع: :: دوره تصميم أستايلات في بي :: الدرس الثالث :: توزيع الصور علي الفرونت بيج  السبت مارس 05 2011, 20:04 | |
|
الدرس الثالث: درس توزيع الصور على الفرونت بيج
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
نستكمل معكم مشوار الدورة
فى الجزء الاول كنا انتهينا من تقطيع الهيدر والفوتر, ونتج لنا ملف images بالصور
الحين راح نأتى للخطوة القادمة , وهى توزيع هذه الصور على الفرونت بيج, حتى
ننتج كود الهيدر والفوتر اللى راح نضعه فى الاستايل اللى راح ننتجه فى
النهاية
اولا: افتح برنامج الفرونت بيج2003 ,واول ما يفتح راح نقوم بحذف اى اكواد موجوده
شوف...........
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
ثم من أسفل اضغط على كلمة design
وانت على الصفحة اضغط كليك يمين , ثم خصائص الصفحة page properties
ثم راح نقوم بتغيير اتجاه الصفحة من اليمين لليسار , وحذف كل الحواف وجعلها صفر
شوف.......
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
شوف.........
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الحين لو تتذكر لما قمنا بالتقطيع, قمنا بتطقطيع الهيدر الى ثلاثة اجزء , والفوتر كذلك لثلاثة أجزاء
1-جزء ايسر
2-جزء أوسط
3-جزء أيمن
لذلك راح نقوم بأضافة ثلاثة جداول علوية , بحيث كل جدول يشمل كل جزء من صور الهيدر
وأيضا راح نقوم بأضافة ثلاثة جداول سفلية , بحيث كل جدول يشمل كل جزء من صور الفوتر
وبين الثلاثة جداول العلوية , والسفلية , راح نقوم بأضافة جدول ويمثل محتوى المنتدى
شوف كيف راح نسوى ذلك.........
اولا : نضيف الجداول العلوية للهيدر
شوف......
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
ثانيا: نضيف تحته مباشرة جدول واحد لمحتوى المنتدى
شوف..........
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
ثالثا: نضيف الجداول السفلية للفوتر
شوف.......
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
والشكل النهائى راح يكون هكذا
شوف.......
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الحين بدنا نرجع لمجلد images الذى نتج لما انتهينا من حفظ العمل فى الفوتوشوب
ولما نفتحه راح نجد الصور الاتية:
شوف............
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الحين راح نقوم باضافة كل صورة للجدول الخاص بها
شوف......
الجزء الايسر:
نضغط على الجدول الايسر العلوى, ثم نضغط على ايقونة اضافة صورة ونضيف صورة الجزء الايسر للهيدر
شوف........
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
بالمثل
الجدول الاوسط , ونضيف له صورة الجزء الاوسط (نقطة التمدد)
وراح يكون هيك الشكل النهائى:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الحين راح نترك الجدول الاوسط فاضى , الواقع بين الثلاثة جداول العلوية والسفلية
وننزل للثلاثة جداول السفلية الخاصة بالفوتر, ونطبق بالظبط مثل ما سوينا بالهيدر
شوف الشكل النهائى........
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الحين راح نقوم بظبط كل شىء حتى يتوافق ويركب على المنتدى....
اولا: نروح نزيل سمك الجداول
شوف...
نضغط على اى جدول علوى كليك يمين , ونختار table properties
ثم نظبط على الاعدادات الاتية:
شوف......
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
راح نجعل الاعدادات صفر مثل ما هو مشار بالسهم
ونطبق بالظبط هالكلام , على الجدول الاوسط الواقع بين الهيدر والفوتر
وايضا على جداول الفوتر
شوف الشكل النهائى
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الحين بعد ما سوينا هيك راح نقوم بتوزيع الصور لتصبح على شكل خلايا
اولا:
بالنسبة لصورة الجدول الايسر العلوى
دبل كليك على الصورة -- راح يطلع لك مقاسات الصورة احفظها فى بالك
شوف.......
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
ثم كليك يمين على الصورة اليسرى , ونختار cell properties
وبعدين راح نضيف هالمقاسات مثل اللى بالصورة:
شوف......
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
بعدين نطبق الكلام بالظبط على الصورة الاتية
صورة الجزء الايمن --هيدر
صورة الجزء الايسر--فوتر
صورة الجزء الايمن -- فوتر
( لاحظ اننا تركنا صورة الجزء الاوسط للهيدر والفوتر)
الحين , بعد ماطبقنا الكلام السابق على الصور اللى قلنا عليها,
وطبعا لا تنسى انه كل صورة ليه مقاس مختلف , راح نحفظه ونحطه فى cell -properties
المهم, راح نرجع الحين لصورة الجزء الاوسط للهيدر والفوتر
شوف بالنسبة صورة الجزء الاوسط للهيدر
راح نضغط على صورة الجزء الاوسط دبل كليك......
شوف......
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
بعدين راح ننسخ مسار الصورة
شوف........
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
ثم كليك يمين على الصورة, ونختار cell-properties
وراح نلصق مسار الصورة فى المكان الاتى:
شوف.......
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الحين نقوم بعمل ما قمنا به بالظبط على صورة الجزء الاوسط للفوتر
ويكون الشكل النهائى كالاتى:
شوف........
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الحين انتهينا والحمدلله من التوزيع
راح نقوم بأخذ كود الهيدر والفوتر
لكن قبل هذا
قم بالظغط على الجدول الاوسط بين الهيدر والفوتر ثم نضغط على التوسيط
شوف
........
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الحين نضغط فى اسفل البرنامج على كلمة code
وشوف كيف راح نأخذ كود الهيدر وكود الفوتر
شوف..........
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الحين تمام خلصنا من كل شىء
الحين نروح لمنتدانا
وندخل للوحة التحكم
ومن الاستايلات والقوالب -- ثم التحكم بالاستايلات ثم اذهب
بالنسبة للهيدر
راح نقوم بحذف كل الكود الموجود فوق كلمة
$spacer_open
$_phpinclude_output
ونترك هذول (مهم جدا)
شوف ......
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
بالنسبة للفوتر
راح نترك الكود الموجود كله
وراح نضع الكود اللى حفظناه بالمفكرة مباشرة بعد الكود الموجود
شوف....
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
بعدين انزل لتحت واحفظ......
الحين روح شوف المنتدى
مبروك على تركيب الهيدر والفوتر
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
ملحوظه: صور الهيدر والفوتر لن تظهر وانت على متصفح فايرفوكس لاننا لسه ما جينا لتعديل الروابط
لذلك بفضل تشغل الانترنت الاكسبلورر حتى تشوف ناتج العمل
[size=21]
ملاحـــــــــــــــــــــظـــــــــــــه
للذين يعانون من اللغة مع انى مو شايف فيها مشكلة [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
table properties=خصائص الجدول
cell properties =خصائص الخلية
page setup=اعدادات الصفحة
width=العرض
lenght=الطول
centre=المنتصف [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
هذا يمكن اللى راح نستخدمه فى شغلنا
غير هيك ما فى
بالتوفيق
انتظروا الدرس الثالث
اعدادات الcss
[/size] | |
|
