ستخرج بمعلومات ، كتلك التي يمتلكها كبار مصممي مواقع الويب


- متطلبات انتاج مواد فنية ناجحة !

في الواقع ، إذا أردت أن تميّز موقعك ، وتخرجه بشكل ممتاز ومُبدَع عليك بالتقيّد بالشروط التالية :

  • الإلمام بأحد برامج الرسوم : يجب عليك أن تتحلى بهذا الأمر ، فأي موقع على الانترنت يجب أن يُضاف إليه بعض الصور والبنرات والتي تكون من صنعك أنت وقمت باخيارها وتنسيقها أنت . فهذه خطوة مهمة ، لمادة فنية ناجحة .
    من هذه البرامج : الفوتوشوب ، والفايروركس .
     

  • الإلمام بأحد برامج التحرير الصريحة : وهذه كثيرة ومتوفرة وهي التي تنتج لنا صفحة HTML  نستطيع ادراج الصور ، وتكوين الجداول فيها ، من هذه البرامج  :  الفرونت بيج ، الدريم ويفر.
     

  • الإلمام ببعض الأمور البرمجية : لا نطالبك بأن تكون مبرمجا ً فذا ً ، لا .. نريدك تكون ملما ً ببعض قواعد الـ HTML مثلا ً ولا مانع من قليل من فهم لأوامر الـ PHP ، كذلك يجب عليكأن تكون مستعدا ً لتركيب أي برنامج على سيرفر موقعك ، فهذه الأمور تزيد من موقعك فاعلية وقوة في حال ما إذا استعُملت الاستعمال الأمثل .
     

  • مراعاة الوضوح في المادة : لا أنصحك أن تجعل موقعك نصيًا فقط " إلا إذا كان طبيعته هكذا " ، دعّم مقالاتك بالصور التوضيحية وعروض الفلاش لو استلزم الأمر ، ولكن احذر من الاكثار من هذه الأمور لأنها تثقل سرعة تصفح الموقع .
     

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


- الحلول المقترحة لاختلاف القياسات

من الأمور التي يجب على مصمم مواقع الويب أن يحتاط لها هي اختلاف مقاس العرض من جهاز لآخر ، فليست جميع أجهزة العرض مضبوطة على قياس واحد ، وليست جميع الشاشات بمقاس واحد ! ، وهذه مشكلة تواجه مصمم مواقع الويب ، والقليل من المصممين من يحتاط لها ،
في البداية لكي تعرف الفرق بنفسك ، افتح أي صفحة ويب ولتكن صفحة موقعي ! ، بعد ذلك اتجه إلى سطح المكتب واضغط بالزر الأيمن على أي مكان فارغ واختر خصائص ، ستخرج لك نافذة ابحث عن تبويب عرض   وستجد قياس العرض قم بتغييره إلى 800 * 600 مثلا ً أو 1024 * 768
بالنسبة لي قمت بتغيير مقاس شاشتي إلى 800 * 600 وقمت بالتقاط صورة للشاشة في القياسين وأترك لك المقارنة في شكل ظهور الموقع

800 * 600

 1024 * 768

هل لاحظت الفرق ؟ ، هناك فراغات على يمين ويسار الموقع في قياس 1024 * 768 ، بينما لا نجد هذا الفراغ في قياس 800 * 600 ، والسبب في ذلك أن مقاس الشاشة اختلف ، فالبنسبة لموقعي قمت بتصميمه لمقاس 800 * 600 ، لكن ليس من المعقول أن أي زائر لا يكون مقاس شاشاته نفس المقاس الذي صممته لأجله لا يظهر موقعي لديه ؟ أو يخرج مشوها ً ... هذه هي المشكلة التي سنفرد لها الحلول التالية :

  • صمم لمقاس الشاشة الأكثر شيوعا ً:
    هذا هو أخصر الحلول وأيسرها بالنسبة لمصمم الموقع ، لا سيما إن كان الموقع ذو طابع جرافكسي - رسومي - ففي هذه الحالة يصعب استخدام التمدد في الجداول ، والدخول في تصميم نسختين لأكثر مقاسات العرض شيوعا ً أمر متعب في الواقع .
    الحاصل أن معظم مصممي المواقع يصممون مواقعهم لأجل أن تكون ملائمة لمقاس العرض 800 * 600 ، فهو الأكثر شيوعا ً في الوقت الراهن ، ولن يحتاج المستخدم صاحب مقاس الشاشة 1024 * 768  إلى استخدام شريط إطار الصفحة لأن الصفحة ستكون أصغر .
    إذا استعملت هذه الطريقة عليك أن تراعي عملية المحاذاة ! ، اجعل الموقع موسّطا ً عن طريق توسيط جدول موقعك  إن كان التوسيط يناسبه ، وإن كان موقعك يحتوي على قائمة خيارات في اليمين " المواقع العربية " فاجعل محاذاته في الجهة اليمنى ، وإن كانت القائمة على اليسار " موقع انجليزي " فاجعل المحاذاة على اليسار .
    لضبط هذا الأمر افتح صفحتك بواسطة برنامج الفرونت بيج ، وقم بتحدد الجدول الأكبر " أكبر جدول في تصميمك " واضغط بالزر الأيمن واختر خصائص الجدول Table properties  ستخرج لك نافذة خصائص الجدول قم بتغيير الخيار " المحاذاة - Alignments "

    مثال على هذا النوع :
    www.mazooo.com


  • استخدم الصفحات السائلة :
    هذه الطريقة تستخدم في الغالب في الصفحات الداخلية ، فهي مناسبة لهذا الغرض بشكل كبير ، والطريقة سهلة نسبيا ً وليس فيها تعقيد ، الطريقة تعتمد على " النسبة في عرض الجداول " ففي هذه الحالة يضبط عرض الجدول بالنسبة وليس بالبيكسل وبالتحديد بنسبة 100 % .
    مالذي سوف يحصل ؟
    يدخل زائر موقعك الموقع ، ويتم الكشف عن مقاس العرض المستخدم ، وتقوم الصفحة إما بالتمدد أو التقلص بحسب مقاس العرض في شاشة الزائر .
    أمور يجب مراعاتها !
    يجب عليك مراعاة استخدام لون في خلفية رأس الجدول ، أو استعمال صورة قابلة للتكرار كخلفية له !
    مثال يبيّن المقال :
    لنفرض أنك صممت هذا التصميم ليكون رأسا ً لصفحتي وصفحتي هذه سأصممها وفق طريقة الصفحات السائلة !
     

    اضغط هنا لرؤية التصميم كاملا ً

     ربما يكون هذا التصميم مناسبا ً لمن شاشاتهم 800 * 600 ، لكننا لن نستفيد من خاصية التمدد في الجدول إن تركنا التصميم هكذا !!
    الحل يكون بتجزي هذا البانر إلى أجزاء ثلاثة ، " يجب على المصمم أن يجعل خلفية التصميم قابلة للتكرار وهذا نناقشه في درس مستقل " الجزء الأول سيكون عبارة " مدرسة مازن " ، والجزء الثاني فراغ " وهي منقطة التمدد " والجزء الأخير " شعارمدرسة مازن " قمت بهذه المهمة وكونت الصور التالية :

     الجزء الأول
    " مدرسة مازن "

     الجزء الثاني
    " منطقة التمدد "

    قمت بتحديد وحدة ، لتكرارها وجعلها خلفية للجدول بحيث لو تمدد الجدول ستتمدد تبعا ً لذلك .

     مهم -------->

    الجزء الثالث
    " شعار المدرسة "

    بهذا أكون أنجزت جزئ كبير جدا ً من المهمة ، بقي الآن دور برنامج الفرونت بيج أو أي برنامج تحرير صفحات ، علي الآن أن أنشئ جدولا ً بثلاث خلايا ، الخلية الأولى سيكون فيها الجزء الأول والثانية الثاني والثالثة الثالث ، لعمل ذلك اتبع الخطوات التالية :

    • قم بإنشاء جدول بثلاث خلايا بالطريقة السريعة ( انظر الشكل )

    • بعد ذلك قم بالدخول إلى خصائص الجدول عن طريق تحديد الجدول والضغط بالزر الأيمن واختيار  خصائص الجدول Table properties
    • ستخرج لك نافذة خصائص الجدول ، قم بتغيير القيم كما هو مبين لك في الشكل

    • في أسفل هذه النافذة ستجد خيار  Use Background picture  معطل قم بتفعيله ، واختر الصورة التي قمنا بفصلها لجعلها خلفية للجدول " لا تنس وضع قيمة حدود الجدول بـ صفر " .
    • ستجد أن شكل الجدول أصبح شبيها ً بهذا
    • الآن وبسهولة قم بإدراج الجزء الأول في الخلية الأولى ، والجزء الثالث في الخلية الثالثة ، كما أني أنصحك " بمحاذاة الجزء الأيمن لليمين ، والجزء الأيسر لليسار " .

    لرؤية ما توصلنا إليه بعد هذه الخطوات اضغط هنا :)


لمتابعة الموضوع .. عليك التوجه للصفحة الثانية