أساسيات الصور والرسومات :

يشير مصطلح الرسومات graphics عادة إلى أي عنصر مرئي غير نصي يظهر على صفحة الويب . في حين يشير مصطلح الصور في الغالب إلى الملفات الرسومية الساكنة التي توجد في صيغتين هما GIF و JPEG .

من أهم القواعد التي يجب أن تنتبه لها عند استخدام الصور في الويب وهي :

1-  استخدم صوراً صغيرة الحجم : الصور كبيرة الحجم تأخذ وقتاً عند تحميلها أما الصور صغيرة الحجم فتكون سريعة وتؤدي إلى استعراض صفحاتك بشكل سريع .

2-  اجعل كل صفحة ويب لديك تحتفظ بأقل عدد من الصور : وجود عدد كبير من الصور في صفحة الويب أمر سيء ، لأنه يؤدي إلى بطء التحميل كثيراً .

3-  لا تضف الصور إلى صفحة الويب لمجرد أنك تملك صوراً كثيرة : تأكد من أن الصور التي تضيفها إلى صفحاتك سوف تضيف شيئاً ما إلى محتواها .

" ثمة طريقة تسهل عليك إنشاء صفحات الويب الخاصة بك ، تقوم هذه الطريقة على إنشاء مجلد للصور – اسمه  IMAGES داخل مجلد Web الخاص بك حيث تخزن فيه كل ملفات الصور لديك فعند إنشاء موقع ويب يتم في الوضع الافتراضي إنشاء مجلد -/ IMAGES ليستخدم في تخزين ملفات الصور الخاصة بك .

إضافة الصور باستخدام فرونت بيج :

لإضافة صورة إلى صفحة الويب :

1-     في فرونت بيج ، افتح صفحة جديدة داخل الموقع الخاص بك .

2-     من قائمة إدراج Insert ، حدد خيار صورة Picture ثم من ملف From File  لتفتح مربع حوار صورة Picture .

3-     حدد ملف الصورة التي تريد إدراجها في صفحتك .

4-     انقر زر ok وستظهر الصورة في صفحة الويب انظر الشكل .

5-  من قائمة ملف File ، حدد أمر حفظ save لتفتح مربع حوار حفظ باسم save as انظر( الشكل 6 - 1 ) لتتأكد من أن ملف الصورة قد تم حفظه مع موقع الويب إلى جانب حفظه في مجلد IMAGES .

( الشكل 6 - 1 )

6-  إذا لم يكن المجلد المحدد لحفظ ملف الصورة هو مجلد IMAGES ، فانقر زر تغيير المجلد Changes  ثم حدد مجلد IMAGES ثم انقر زر ok .

7-     انقر زر ok لتحفظ ملف الصورة مع موقع الويب الخاص بك .

تعديل ملفات الصور لديك :

من الإعدادات التي يمكنك القيام بها لتعديل ملفات الصور ما يلي :

×      التحكم في أبعاد الصورة داخل الصفحة

×      التحكم في طريقة محاذاة النص بالنسبة للصورة

×      تحديد إذا ما كان سيتم عرض الصورة داخل الحدود

×      إضافة ارتباط تشعبي إلى الصورة

ولتعديل طريقة عرض الصورة داخل صفحة الويب :

1-     حدد الصورة التي تريد تعديلها .

2-     بعد ذلك إضغط بالزر الأيمن للفأرة ثم إختار خصائص الصورة ليفتح لك مربع خصائص الصورة انظر ( الشكل 6 - 2 ) .

( الشكل 6 - 2 )

3-  لإضافة ارتباط تشعبي إلى الصورة ، اضغط بالزر الأيمن على الصورة ثم اضغط على إرتباط تشعبيفي مربع العنوان أكتب رابط الموقع أو الصفحة التي تريد إرتباط الصورة بها

4-  لتعديل أبعاد الصورة ، حدد علامة تبويب  المظهر Appearance  من خصائص الصورة لتفتح النافذة الخاصة بها .

5-     قم بتغيير قيمتي العرض والارتفاع لتعدل أبعاد عرض الصورة .

6-     انقر زر ok لحفظ تغييراتك وإغلاق مربع حوار خصائص الصورة Picture Properties  .

التحكم في الصور داخل فرونت بيج 

التحكم في الصور باستخدام الجداول :

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

1-     قم بإنشاء صفحة جديدة .

2-     قم بإنشاء جدول داخل صفحة بحيث يتكون من خليتين.

3-     أدرج صورتك في الخلية اليسرى .

 إنشاء نماذج مصغرة للصور :

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

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

لإنشاء نموذج مصغر لإحدى الصور :

1-     قم بإنشاء صفحة جديدة .

2-     أدرج أي صورة في الصفحة .

3-  تأكد من ظهور شريط أدوات الصورة داخل النافذة الرئيسية لفرونت بيج ، إن لم يكن هذا الشريط ظاهراً ، فحدد خيار أشرطة الأدوات Toolbars من قائمة عرض View وتأكد من تحديد أمر صور Picture

4-  حدد الصورة التي أدرجتها في الصفحة ، ثم اضغط الزر الأيمن واضغط على صورة مصغرة تلقائية سيتم على الفور استبدال نموذج مصغر بالصورة الأصلية انظر ( الشكل 6 - 3 ) .

( الشكل 6 - 3 )

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

1-     من قائمة أدوات Tools ، حدد أمر خيارات الصفحة Page Options لتفتح مربع حوارPage Options.

2-     حدد علامة تبويب التصغير التلقائي Auto Thumbnail لتفتح اللوحة الخاصة بها انظر ( الشكل 6 - 4 ) .

( الشكل 6 - 4 )

3-  هنا تستطيع التحكم في حجم النماذج المصغرة للصورة إلى جانب التحكم في حجم ونوع الحدود التي تظهر حول هذه النماذج داخل صفحات الويب .

 إنشاء الخلفيات :

توجد طريقتان لاستخدام ملفات الصور كخلفيات . الأولى هي استخدام الصورة لإنشاء خلفية عادية ، والثانية هي إنشاء ما يسمى بـ " العلامة المائية " watermark .

 إنشاء خلفية عادية :

لإنشاء خلفية :

1-     اختر أمر خصائص Properties من قائمة ملف File لتفتح مربع حوار خصائص الصفحة Properties Page  .

2-     انقر علامة تبويب الخلفية Background  .

3-  حدد مربع العلامة صورة الخلفية Picture Background ، ثم أدخل إسم ملف الصورة التي تريد استخدامها كخلفية . إن لم تتذكر جيداً اسم ملف الصورة ، فاستخدم زر إستعراض Browse للبحث عنه وتحديد موقعه .

4-     انقر زر ok ، وستظهر الصورة التي حددتها كخلفية للصفحة التي تتعامل معها حالياً  .

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

 إنشاء العلامة المائية :

لتعيين صورة الخلفية كعلامة مائية :

1-     من قائمة File ، حدد أمر Properties لتفتح مربع حوار Properties Page  .

2-     انقر علامة تبويب Background لتفتح اللوحة الخاصة بها .

3-     حدد مربع العلامة علامة مائية watermark .

4-     انقر زر ok ، لتصبح بذلك الصورة التي حددتها للخلفية علامة مائية لصفحة الويب التي تصممها .