دروس تصميم واجهة بسيطة و تقطيعها

[awtil.com]

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

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

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

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

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

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

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

كليك على الاختيار المحدد لتظهر لك النافدة التالية

لابد من كتابة الرابط مسبوق ب HTTP والا فان الرابط لن يعمل
الخانة التانية كما هو موضع يتعلق الامر بخصوص الرسالة التى تظهر عندما يكوت زر الفارة فوق الرابط
نقوم بنفس الامر على كل الروابط التى انشئناها
واخيرا وصلنا الى حفظ العمل من قائمة FILE نختار SAVE FOR WEB
وقد شرحة الامر مسبقا لدلك اضن الطريقة واضحة كل ما اريد اضافته
هو عند الحفظ نختار صيغة HTML+IMAGE
تم نحدد مكان الحفظ ونعطي اسم INDEX لمشروعنا
واخيرا نقول لك مبروك عليك واجهتك البسيطة لم يبقي الا التعديل بالفرونت بيجوهو موضوعنا القادم بادن الله

اتمنىىلكم الافادة و الى المواضيع القادمة بادن الله

والله الموفق