:: مكتبة دروس التصميم ::

مكتبة دروس التصميم » تصميم المواقع والمنتديات » [توزيع الصور في الفرونت بيج لرباعي الاطراف-الجـ(D)ـزء]

 [توزيع الصور في الفرونت بيج لرباعي الاطراف-الجـ(D)ـزء]  ط£ط¶ظٹظپ ظپظٹ: 24-9-1427هـ
بسم الله الرحمن الرحيم
اخواني واخواتي حياكم الله في سلسلة الدروس المتتاليه
الان بعد ان صممنا بنر للهيدر وبنر للفوتر وقطعناها
ومثل ماقلت لكم احفظوها في مجلد خاص فيها
اللي بقى علينا حاجتين وبكذا نخلص من اتركيب الاستايل
باقي توزيعها في الفرونت بيج وتوزيعها في المنتدى

لمشاهدة هذا الدرس يجب عليك تغيير اعدادات الشاشه من 800 الى 1024

وننطلق الان مع الشرح

توجه الى سطح المكتب وفي اي مكان فاضي اضغط بطرف الماوس يمين راح يخرج لك مربع حوار و اختار منه خصائص >> اذهب الى اعدادات الشاشه وغير من حجم 800 الى 1024 والسبب ليكون تصفح الاستايل فيمات بعد راكب على قياس 800 و 1024

خلاص سوينا اعدادات الشاشه واللحين افتح برنامج الفرونت بيج FrontPage واختار من الاسفل كلمة اعدادات برمجيه كما في الصوره


http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-1-1.jpg

ستشاهد هذه الصفحه

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-1.jpg

امسح مابها لتكون بهذا الشكل

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-2.jpg

الان نضغط على كلمة تصميم

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-3.jpg


اضغط بطرف الماوس الايمن لتظهر لك خصائص الصفحه وغير اتجاه الصفحه الى اليمين


وننتقل لاعلى برنامج الفرونت بيج ونختار ادراج جدول ثلاث خانات فقط بالطول

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-4.jpg


نذهب الى الجدول ونضغط بطرف الماوس الايمن لتخرج لنا هذه القائمه

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-5.jpg

ونقوم بوضع هذه الاعدادات كما في الصوره بالضبط

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-6.jpg

فاصبح لدينا الجدول بهذا الشكل خانه علويه وخانه وسطيه وخانه سفليه

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-7.jpg

نضغط على الخانه رقم واحد وبطرف الاماوس الايمن لتخرج لنا قائمه ونختار منها خصائص الخليه

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-8.jpg

فيخرج لنا مربع حوار كما سنشاهد ونضغط منه استعراض

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-9.jpg

والان بعد ضغط كلمة استعراض سوف تخرج لنا مربع وفيها مجلد صور الهيدر والفوتر ومقطع كما تعلمناه
ونختار الصوره الوسطى اللي قلنا عنها خلفيه ونضغط فتح

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-10.jpg

اصبحت بهذا الشكل

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-11.jpg

نترك الخانه الوسطيهونتجه للخانه رقم ثلاثه (الفوتر)

ونضغط بطرف الماوس يمين ونختار خصائص الخليه... ونختار صوره الخلفيه.. وهي الصوره الثالثه للفوتر الوسطيه وليست الجانبيه ونضغط

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-12.jpg



اللحين نتجه للجدول الاول (تذكروا معانا ثلاث جداول ورقمتها قبل شوي 1 و2 و3)

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-13.jpg

المهم رحنا للخانه العلويه او الجدول الاول ونونضغط عليه ثم نضغط بطرف الماوس اليمين ونختار تقسيم الخلايا

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-14.jpg

راح يطلع لنا مربع صغير ونختار منه الاعمده ثلاثه

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-15.jpg

بيطلع الجدول او الخانه العلويه مقسمه بهذا الشكل

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-16.jpg

شوف بعد التقسيم وش راح تسوي
يمين صوره والوسط خلفيه واليسار صوره

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-17.jpg

نختار اول خانه يمين ونحط الماوس عليها ونتجه للجه اللي في اعلى الفرونت بيج ونختار ادراج صوره
(خلاص حنا انتهينا من شئ اسمه خلفيه واللي باقي الصور)

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-17-1.jpg

بمجرد الضغط على المربع الصغير حق ادراج الصوره راح يطلع لنا مربع الحوالي التالي وشئ طبيعي طالما انك ضغطت بالماوس على اول خانه يمين فراح تختار الصوره اللي في اليمين

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-18.jpg

اللحين نشوف بعد مانزلنا الصوره وكيف شكلها

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-19.jpg

لاهي اللي جت في مكانها الزين ولاهي جت في النص يعني خلف خلاف :evil_lol:

نطنشها عادي ونروح للجدول الثالث اللي في اليسار ونضغط بالماوس عليه ونضغط على ادراج صوره

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-17-1.jpg

ونختار الصوره اللي في اليسار للهيدر

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-20.jpg

ونشوف كيف صارت

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-21.jpg

يعني نقدر نقول تعدلت بشئ بسيط .. بس يبيلها

مالك الا شئ واحد (((((شد الاطراف)))))) :msn-wink:

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-22.jpg

اللحين خلصنا من شئ اسمه هيدر واللي باقي فوتر

نترك الجدول اللي في النص ونروح للجدول اللي تحت حق الفوتر

ونضغط عليه بالماوس ونختار تقسيم الخلايا

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-23.jpg

مايحتاج كم اقول اكيد 3

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-24.jpg

بعد ماقسمنا راح تكون منشده باشباب ان حنا شدينا الاطراف حقت الهيدر من شوي

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-25.jpg

اضغط على اول خانه بجدول الفوتر يمين وادرج الصوره اليمنى للفوتر

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-26.jpg

ادرجناها ولكن شكلها مش ولابد يعني يبيلها

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-27.jpg

نتركها وندرج الصوره اللي في اليسار

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-27-1.jpg

طبعاً تحط الماوس على اخر خانه بجدول اليسار وتدرج الصوره

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-28.jpg

اللحين وش تشوفون؟؟
كل شئ تمام الا مافي تنسيق


وعشان ننسق الجدول ككل
كل اللي ابيك تسويه شئ بسيط
تضغط على كل صوره يمين سواء في الهيدر او في الهيدر

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-29.jpg

ومن اعلى الفرونت بيج تعطيها محاذاه لليمين


http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-30.jpg

وكذلك اي صوره يسار تضغط عليها وتعطيها محاذاه لليسار

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-31.jpg


وهذا الاستايل الرباعي (اربع صور) تم الانتهاء منه وبالتوفيق

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-32.jpg

بعد ماخلصنا روح لسطح المكتب وغير اعدادات الشاشه الى 800

وهذا شكل الاستايل بعد حجم 800

http://www.traidnt.net/vb/images/Style/dros/header/FrontPage/hed-33.jpg

ط§ظ„ظƒط§طھط¨: تركي الودعاني ط§ظ†ظ‚ط± ظ‡ظ†ط§ ظ„ظ…ط±ط§ط³ظ„ط© تركي الودعاني ط£ظ†ظ‚ط± ظ‡ظ†ط§ ظ„ظ„ط¥ظ†طھظ‚ط§ظ„ ط¥ظ„ظ‰ ظ…ظˆظ‚ط¹ تركي الودعاني ط¥ط¶ط§ظپط© ظ„ظ„ظ…ظپط¶ظ„ط© ط¥ط¶ط§ظپط© ظ„ظ…ظپط¶ظ„ط© Google ط¥ط¶ط§ظپط© ظ„ظ…ظپط¶ظ„ط© Delicious ط¥ط¶ط§ظپط© ظ„ظ…ظپط¶ظ„ط© Digg ط¥ط¶ط§ظپط© ظ„ظ…ظپط¶ظ„ط© Facebook
ط®ظٹط§ط±ط§طھ ط§ظ„ط¯ط±ط³ : ط§ط±ط³ظ„ ط§ظ„ط¯ط±ط³ ظ„طµط¯ظٹظ‚ ط§ط±ط³ظ„ ط§ظ„ط¯ط±ط³ ظ„طµط¯ظٹظ‚  ط·ط¨ط§ط¹ط© ط§ظ„ط¯ط±ط³ ط·ط¨ط§ط¹ط© ط§ظ„ط¯ط±ط³  ط­ظپط¸ ط§ظ„ط¯ط±ط³ ظƒظ…ظ„ظپ Word ط­ظپط¸ ط§ظ„ط¯ط±ط³ ظƒظ…ظ„ظپ Word  ط­ظپط¸ ط§ظ„ط¯ط±ط³ ظƒظ…ظ„ظپ PDF ط­ظپط¸ ط§ظ„ط¯ط±ط³ ظƒظ…ظ„ظپ PDF

ط§ظ„طھط¹ظ„ظٹظ‚ط§طھ
آ»..! نـــبـــوض !..
  ط£ط¶ظٹظپ ظپظٹ: 11-11-1427هـ
مشكور اخوي

والله يعطيك الف عافيه
شرحك واضح ما شاء الله عليك

^_^ الله لا يحرمنا منك

بالتوفيق اخوك نبوض