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

[abohmam]

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

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

تكملة للجزء الثاني ..

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

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

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

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

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

ستظهر لك نافذه اختر منها التبويب هوامش واعمل كما مبين لك بالصوره ثم اضغط على موافق

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

ثم اضفط على صورة اضافة الجداول وتضيف جدول ذو 9 خانات بحيث يكون 3 بالاعلى و 3 بالمنتصف و 3 بالاسفل شاهد الصوره

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

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

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

ثم اعمل خصائص الجدول كما مبين لك بالصوره التاليه

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

سوف يصبح الجدول هكذا وبدون حدود

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

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

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

وسيصبح شكل الجدول هكذا

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

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

بالضغط على الرمز هذا
http://www.abc4web.net/vb/imgcache/8012.abc4web.jpg

ثم ستظهر نافذة ادراج الصوره ابحث عن الصور اللي حفظناها واختر الصوره hr واضغط ادراج

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

ثم اذهب وحط الماوس فوق الخليه العلويه اليسرى للجدول واضغط ضغطه واحده علشان يصير المؤشر بداخلها واختر اداة ادراج الصور
http://www.abc4web.net/vb/imgcache/8012.abc4web.jpg

ثم اختر الصور اللي عطيناها اسم hl

والآن عزيزي حط الماوس فوق الخليه العلويه بالمنتصف ومن الأعلى اضغط على اداة التوسيط
http://www.abc4web.net/vb/imgcache/8016.abc4web.jpg

ثم اضغط كلك يمين بالخليه اللي بالنص العلويه واختر خصائص الخليه

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

ثم اضغط على استعراض واختر الصوره اللي بإسم hback

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

والحين حبيبي خلي مؤشر الماوس بالخليه اللي بالنص العلويه واضغط على اداة ادراج الصوره
http://www.abc4web.net/vb/imgcache/8012.abc4web.jpg

واختر الصوره اللي قلنا عليها تعتبر بنر للشكل العلوي وتكتب عليها اسم موقعك >>> هل تتذكرها ؟؟
تحمل الاسم hb قم باختيارها واضغط على ادراج
والآن انتهينا من تركيب صور الشكل العلوي وستظهر لك كما الشكل التالي :

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

والآن اضغط كلك بالخليه اليمنى اللي بالمنتصف واختر خصائص الخليه ... ثم اضغط على استعراض واختر الصوره اللي حفظناها بإسم

right وهذه الخليه تفيدنا بأن (( مهما زاد ارتفاع الصفحخ سيتم تعبأة الخليه بهذه الصوره )) .

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

بإسم left .
وشاهد كيف أصبح التصميم :

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

والآن نذهب للخليه اليمنى بالأسفل ونحط الماوس فوق الخليه ونضغط بالماوس ضغط واحده حتى يصبح المؤشر بداخل الخليه ثم نختار

اداة ارداج الصور
http://www.abc4web.net/vb/imgcache/8012.abc4web.jpg

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

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

بعدها اذهب وضع الماوس فوق الخليه اليسرى السفليه تمانا واضغط مره واحده في منتصف الخليه حتى يصبح المؤشر بداخل الخليه ثم

اضغط على اداة ادراج الصور
http://www.abc4web.net/vb/imgcache/8012.abc4web.jpg

ثم اختر الصوره اللي تحمل الاسم fl واضغط على ادراج ... وشاهد الآن كيف أصبح الشكل :

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

ثم بنتصف الخليه السفليه اضغط بالماوس مره واحده حتى يصبح المؤشر بداخل الخليه ثم اذهب واضغط على اداة التوسيط
http://www.abc4web.net/vb/imgcache/8016.abc4web.jpg

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

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

مهما تمدد التصميم او كبرت مقاسات الشاشه راح يتمدد تلقائيا وبدون مشاكل ان شاء الله >>> شاهد الصوره :

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

والحين طال عمرك اترك المؤشر بمنتصف الخليه السفليه واضغط على أداة ادراج الصور
http://www.abc4web.net/vb/imgcache/8012.abc4web.jpg

واختر الصوره اللي تحمل الأسم fb واذا تتذكر ترانا قلنا هالصوره راح تكون بمثابة بنر سفلي نستطيع كتابة نص الحقوق مثلا او اسم

المصمم او المبرمج وهكــذا ... شاهد الآن كيف أصبح شكل التصميم

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

والآن ولله الحمد انتهينا من تركيب الإطار كاملا للمجله >>> وراح تلاحظ بأن لون الصفحه أبيض ومغاير عن لون التصميم !! فما الحل ؟


افتح الفوتوشوب ثم افتح التصميم اللي عملناه ثم من صندوق الأدوات بالاسفل اضغط على اداة ادارة الألوان التي تحمل الرقم 1 بالصوره

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

الكود المحدد بالصوره التاليه

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

ثم اذهب للفرونت بيج بالصفحه الخاصه بتصميمنا واضغط على HTML

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

ستجد الكود التالي:

bgcolor="#FFF7DE"

هو لاضافة لون الخلفيه للصفحه ... كل ما عليك فعله هو حذف كود اللون بالكود السابق ولصق كود اللون اللي نسخناه من الفوتوشوب
لاحظ أن كود اللون هو المحدد باللون الأزرق بالصوره التاليه :

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

ثم ارجع لتصميمنا وستلاحظ انه تم تغيير لون الخلفيه

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


ملاحظه : اذا لم تجد كود اللون تستطيع انت كتابته بالشكل التالي :

bgcolor="#FFF7DE"

وضعه بعد كلمة BODY العلويه بحيث سيصبح هكذا كامل الكود :

<body topmargin="0" leftmargin="0" bgcolor="#FFF7DE">


والآن اصبح الاطار جاهزا وأصبحت الألوان متناسقه مع صور التصميم ... كلااااااااام حلو وجميل ويشجع اننا نكمل مع بعض التطبيق .


انتهى الجزء الثالث وانتظروا الجزء الرابع ...

=====/ روابط جميع الدروس \=====
: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:

[البغرامي]

السلام عليكم

جزاك الله ألف خير وجعل لك من هذه العمل

حسنات بإذن الله واصل بدون أن تحرمنا من جديدك

تحياتي ...

[فلسطيني]

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