سنحاول تفادي استخدام الصور كخلفيات لاني اراها مجرد خدع قديمة وتعود بالسلب على صاحب التصميم لصعوبة تغيير اللون والستايل لذا ينلجأ الى اختيار الالوان والتدرج والضل.
ستكون اول الخطوات :
1-التصميم على الورق أو البوربونت
أ-سنقسم الصفحة الى:
1- هيدر
2-اللوجو
3-الاطار الجانبي
4-المحتوى
النتيجة كالتالي:
ب-سنبدأ بالهيدر:
الهيدر أو الهيدر بار يحوي مجموعة من الازرار هي عبارة عن أهم اقسام الموقع واهدافه فمثلا الموقع المراد تصميمه هو عبارة عن منتدى عام فهنا غالبا نتخلى عن الاطار الجانبي ونكتفي بالمحتوى.
اما نحن سنبدا بتصميم موقع تعليمي.وعليه فسيكون الهيدر بار كالتالي وهذه المحتويات يمكنك اختيار انت ماتراه مناسبا لموقعك لجلب ولنشروللوصول وتحقيقو....... الهدف المرجو من الموقع.
1-الرئيسية
2-المعلم
3-المرئيات
4-تجارب
5-ماذا تعرف
6-اتقن هذا
7-اتصل بنا
8-التسجيل/الدخول/الخروج
9-الملف الشخصي
وعليه النتيجة ستكون كالتالي:
تـ-اللوجو : ويجب اختيار الوجو بعناية فهو الذي تعطي لزائر ملخص كلي عن الموقع.
بما اننا سنصمم موقع تعليمي سيكون اللوجو عبارة عن كلام او صور لمجالات تعليمية
سنختار من المجالات المتعددة والكثيرة مجال الدورة وهو البرمجة بصفة عامة و HTMLو CSSو Javasc بصفة خاصة.
ثـ-الإطارالجانبي:
ونبرز فيه اهم اقسام الموقع والاخبار والاعلانات.لذا سيكون على الشكل التالي:
جـ-اما المحتوى فيكون على خلفية ثابتة غير مموهة مثلا:
وتكون المحصلة النهائية كالتالي:
بعد الانتهاء من التصميم على الورق نأتي للتصميم على أرض الواقع
2-التصميم الفعلي/التكويد/
أ-HTML:
لقد قمنا بتقسيم الصفحة الى اربع اقسام:
1- هيدر(header)2-اللوجو(logo)
3-الاطار الجانبي(s-bar)
4-المحتوى (body)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<body>
</body>
</html>
بـ-لنقوم بالتقسيم المخطط له:
.png)
تـ-لنقوم الان بالتدقيق اكثر وهذا سياخذ مناوقت لذا سيقسم الدرس حسب العمل:
1-العمل على الهيدر والازرارالتابعة له وهو الذي سنركزعليه
2-العمل الاطار الجانبي
3-اللوجو سكون امرا جد سهل
4-المحتوى جد سهل لذا سيكونمسك الختام لدرس ككل
5-تركالمجال مفتح لتعديل على الستيل النهائيوالاستعمال.
1-العمل على الهيدر:
الهيدر سيكون بحجم معين ولون معين والذي بداخله سيكون تابعا لاوصافه الا التي سنغير فيها تبعا للحاجة:
.png)
.png)
إضافة الازرار
التعديل عليها لتصبح اكثر تنسيقا.
الدرس القادم سنكمل التعديل على الازرار لتكون مثالية تماما
عند مرور الفارة على الزر
عند الضغط عليه
وكذلك ازلة الخط تحت الروابط
الالوان اختيرت من موقع خاص باكواد التلوين
راجع الدروس السابقة
لاتنسونا من صالح الدعاء
بقلم نبيل مسعي
أنا من الجزائر، احب أن أضع كل ما أعرف من معلومات حول الحاسوب ولاأبخل به عليكم، وخطرت لي فكرة عمل مدونة تضم كل المجالات التعليمية للكومبيوتر التي أستطيع إفادتكم بها، فأرجوا ان لاتبخلوا علي أيضا بمتابعتكم لمواضيعي كما ان تعليقاتكم تهمني وتزيد من عطائي لكم إخوتي الكرام وأي استفسار ان موجود وشكرا
0 التعليقات:
إرسال تعليق