(5) تصميم موقع كالمجله بكل دقه واحتراف + نهاية الشرح

[abohmam]

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

(5) تصميم موقع كالمجله بكل دقه واحتراف

تكملة للجزء الرابع .... وهو تصميم الاطار للمحتوى

روح للفوتوشوب وافتح التصميم اللي سويناه

http://www.abc4web.net/vb/imgcache/8111.abc4web.jpg


ثم اختر هذه الأداة
http://www.abc4web.net/vb/imgcache/8113.abc4web.jpg

ثم اضف طبقه جديده ثم قم برسم مستطيل وقم بإعطائه الاستايل اللي حفظناه
وقد قمت برسم مستطيل واعطائه نفس الاستايل اللي حفظناه اصبح هكذا

http://www.abc4web.net/vb/imgcache/8116.abc4web.jpg


ثم قم بحفظ العمل بالضعط على File ثم save as ثم قم بتسمية الصوره اي اسم ومن امام كملة format اختر الامتداه الموضح لك

بالصوره التاليه بالرقم 1 ثم اضغط على save

http://www.abc4web.net/vb/imgcache/8119.abc4web.jpg


ثم قم بفتح الصوره اللي حفظناها للتو من الخيار file ثم open ثم اختر الصوره اللي حفناها .
ثم اختر اداة التحديد
http://www.abc4web.net/vb/imgcache/8121.abc4web.jpg


ثم قم بتحديد المستطيل اللي عملناه كما التحديد الموضح لك بالصوره
(( لاحظ ان التحديد يعطي فراغ بسيط من اليمين واليسار وذلك لظهور الظل اللي بالإطار واذا لم يكن هنا ظل للاطار قم بتحديد المستطيل

بدون ترك فراغات يمين ويسار المستطيل .. ويفضل ترك فراغ بسيط من اليمين واليسار كما بالصوره التاليه ))

http://www.abc4web.net/vb/imgcache/8123.abc4web.jpg


ثم
ثم من قائمة Edit اختر Cut ثم اذهب الى قائمة File واختر New واضغط على ok مباشرة ثم اضغط على قائمة Edit واختر منها

Paste ... وستلاحظ انه تم لصق المستطيل

ثم قم بتقسيم المستطيل الى 3 أجزاء (( تقطيع )) علوي وسفلي ومنتصف

http://www.abc4web.net/vb/imgcache/8125.abc4web.jpg


http://www.abc4web.net/vb/imgcache/8127.abc4web.jpg


http://www.abc4web.net/vb/imgcache/8129.abc4web.jpg


ثم قم بتحديد الجزء العلوي من اليسار (( لا بد من فتح نافذة info علشان نقدر نعيّن مقاسات التحديد وما يهمنا بالتحديد هو العرض فقط

احفظه بذاكرتك لأننا راح نرجع له بالتقصيص للمستطيل ))

http://www.abc4web.net/vb/imgcache/8130.abc4web.jpg


ثم من قائمة Edit اختر Cut ثم اذهب الى قائمة File واختر New واضغط على ok مباشرة ثم اضغط على قائمة Edit واختر منها

Paste ... ثم احفظ الصوره بأي إسم يدل على الصوره .
ثم حدد الجزء الأيمن بنفس عرض التحديد اللي عملناه ثم قم بقصه وحفظه بإسم يدل عليه .
وأيضا في المنتصف حدد عرض بسيط من الصوره حتى يصبح خلفيه وقم بقصه وحفظه بإسم يدل عليه .
وبعد ان قمت بقص الصوره العلويه للمستطيل نتج لي هذه الصور
http://www.abc4web.net/vb/imgcache/8132.abc4web.jpg


http://www.abc4web.net/vb/imgcache/8134.abc4web.jpg


http://www.abc4web.net/vb/imgcache/8135.abc4web.jpg


ثم اذهب للصوره السفليه للمستطيل وقم بعمل تحديد للجهه اليسرى ثم اليمنى ثم المنتصف كما فعلنا بالصوره العلويه واحفظ الصور

بأسماء تدل عليها . (( ولا تنسى أن عرض التحديد يجب ان يكون متساوي )) .
وقمت بتقصيص الجزء السفلي ونتج لي هذه الصوره

http://www.abc4web.net/vb/imgcache/8137.abc4web.jpg


http://www.abc4web.net/vb/imgcache/8138.abc4web.jpg


http://www.abc4web.net/vb/imgcache/8140.abc4web.jpg


ثم اذهب للصوره اللي بالمنتصف >>> ولا نحتاج منها سوى قص الجهه اليمنى واليسرى فقط (( ولاحظ ان العرض لابد أن يكون هو

نفسه بتحديدنا اللي حفظناه بذاكرتنا )) .
وقمت بالقص ونتج لي التالي :
http://www.abc4web.net/vb/imgcache/8141.abc4web.jpg


http://www.abc4web.net/vb/imgcache/8143.abc4web.jpg


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

تجعل المؤشر بداخله

http://www.abc4web.net/vb/imgcache/8145.abc4web.jpg


ثم اضف جدول ذو 3 أعمده رأسيه و 3 أعده أفقيه

http://www.abc4web.net/vb/imgcache/8147.abc4web.jpg


ثم اضغط كلك يمين بمنتصف الجدول واختر خصائص الجدول

http://www.abc4web.net/vb/imgcache/8148.abc4web.jpg

ثم اعمل القيم كما مبين لك بالصوره

http://www.abc4web.net/vb/imgcache/8149.abc4web.jpg


ثم اسحب العمود الأيمن الى أقصى اليمين واحسب العمود الأيسر الى أقصى اليسار وسيظهر كهذا

http://www.abc4web.net/vb/imgcache/8150.abc4web.jpg


ثم قم بتركيب الصور كما فعلنا سابقا وكل صوره بمكانها المناسب (( ألم أقل لك أن تضع اسم يدل على الصوره ))
شاهد كيف قمنا بتركيب الصور بالجدول

http://www.abc4web.net/vb/imgcache/8151.abc4web.jpg


والآن نقول لنفسنا هنئا لكي لقد قمتي بعمل شيء جميل ...

في أعلى الأطار أكتب مسمى لمحتوى الإطار >> مثلا (( جديد الموقع )) وفي المنتصف أكتب المحتويات كما في هالصوره :

http://www.abc4web.net/vb/imgcache/8152.abc4web.jpg


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

القائمه المنسوخه ... أو اذا كانت لك خبرة بالتعامل من اكواد HTML تستطيع نسخ كود جدول القائمه بالكامل ومن ثم لصقه أسفل

الكود اللي نسخته مباشرة (( واذا تبي تفصل بين القائمتين تستطيع وضع هالكود <BR> فهو يعني سطر بحيث سيتم الفصل بين

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

http://www.abc4web.net/vb/imgcache/8153.abc4web.jpg


ثم بنفس الطريقه تستطيع اضافة اطارات .

وبعد إضافة القوائم والإطارات اللازمه لموقعنا ... شاهد كيف اصبح الآن

http://www.abc4web.net/vb/imgcache/8154.abc4web.jpg


ولاحظ أن هناك خليه فارغه في الأعلى وايضا بالأسفل >>>
أما العلويه فتستطيع وضع صور للإعلانات بها او اي روابط او نصوص محببه لك .
وأما السفليه فهي لكتابة (( جميع الحقوق محفوظه لموقع بوادي )) أو كتابة اي جمله ترغبها أو وضع عداد زوار او عداد احصائيه .


وبهذا انتهينا من التصميم والتركيب بقي لدينا حفظ العمل كصفحة ويب HTM او HTML كلتا الجملتين تفي بالغرض ..


بعد الانتهاء من اضافة القوائم والاطارات اذهب للقائمة ملف من أعلى الفرونت بيج ثم اختر حفظ بإسم وستظهر لك النافذه التاليه :

http://www.abc4web.net/vb/imgcache/8155.abc4web.jpg


ثم سيتم حفظ الصفحه بنفس الإسم index .

والآن قم بتحميل مجلد الصور كاملا الى موقع والصفحه التي بجانبه الى موقعك ... وأصبح جاهزا للتصفح

ألف مبرووووووك عليك المجله الحلوه .

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


وتمنياتي لكم بالتوفيق

قام بالشرح كاملا الأخ ابو ليالي جزاه الله خيرا على مايقدمه لإخوانه من برمجيات مجانية وشروحات رائعة

ولاتنسونا من صالح دعائكم
.
أبوهمام


=====/ روابط جميع الدروس \=====
:abc4web:
( 1 ) تصميم موقع كالمجله بكل دقه واحتراف (http://www.abc4web.net/vb/showthread.php?t=12582)
( 2 ) تصميم موقع كالمجله بكل دقه واحتراف (http://www.abc4web.net/vb/showthread.php?t=12583)
( 3 ) تصميم موقع كالمجله بكل دقه واحتراف (http://www.abc4web.net/vb/showthread.php?t=12584)
( 4 ) تصميم موقع كالمجله بكل دقه واحتراف (http://www.abc4web.net/vb/showthread.php?t=12585)
( 5 ) تصميم موقع كالمجله بكل دقه واحتراف (http://www.abc4web.net/vb/showthread.php?t=12586)
:bar:
.

[أبو يوسف]

جزاك الله خيرا اخي ابو همام على هذا المجهود وبارك الله فيك

[أبو فارس]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[محمود عفيفى]

ما شاء الله شرح رائع
جزاك الله خيرا أخى أباهمام :abc_152:

[فارس اليراع]

عمل تشكر عليه
بس ياخي عندي ملاحظة
لماذا لا تستخدم بدل الداول
<div>
</div>
اليست أسهل في تقسيم أجزاء الصفحات ؟

والله الموفق

[abohmam]

بارك الله فيكم على المرور والتواصل


بس ياخي عندي ملاحظة
لماذا لا تستخدم بدل الداول
<div>
</div>
اليست أسهل في تقسيم أجزاء الصفحات ؟

والله الموفق

حياك الله اخانا الفارس

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

جزاك الله خيرا على المداخلة ومازلنا فى إنتظار ماتجود به علينا من دروس نافعة

[مهلهل]

جزاك الله خيرا

[سوسي مغربي]

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
بارك الله فيك على هذا الجهد الطيب
وجعله في ميزان حسناتك