أساسيات التعامل مع الصور(شامل)

السلام عليكم أخواني , هذا الشرح بناء على المشاكل التي تواجه المستخدمين بالصور فأرجوا ان يفيدكم او يساعدكم في مشاكلكم مع الصور <?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><o:p> </o:p>

أساسيات الصور والرسومات<o:p></o:p>

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

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

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

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

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

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

إضافة الصور باستخدام فرونت بيج<o:p></o:p>

لإضافة صورة إلى صفحة الويب :<o:p></o:p>

1- في فرونت بيج ، افتح صفحة جديدة داخل الموقع الخاص بك .<o:p></o:p>

2- من قائمة Insert ، حدد خيار File ثم Picture لتفتح مربع حوار Picture ( انظر الشكل 9-1 )<o:p></o:p>

<?xml:namespace prefix = v ns = "urn:schemas-microsoft-com:vml" /><v:shapetype id=_x0000_t75 stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><v:stroke joinstyle="miter"></v:stroke><v:formulas><v:f eqn="if lineDrawn pixelLineWidth 0"></v:f><v:f eqn="sum @0 1 0"></v:f><v:f eqn="sum 0 0 @1"></v:f><v:f eqn="prod @2 1 2"></v:f><v:f eqn="prod @3 21600 pixelWidth"></v:f><v:f eqn="prod @3 21600 pixelHeight"></v:f><v:f eqn="sum @0 0 1"></v:f><v:f eqn="prod @6 1 2"></v:f><v:f eqn="prod @7 21600 pixelWidth"></v:f><v:f eqn="sum @8 21600 0"></v:f><v:f eqn="prod @7 21600 pixelHeight"></v:f><v:f eqn="sum @10 21600 0"></v:f></v:formulas><v:path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"></v:path><o:lock aspectratio="t" v:ext="edit"></o:lock></v:shapetype><v:shape id=_x0000_i1025 style="WIDTH: 371.25pt; HEIGHT: 276.75pt" alt="" type="#_x0000_t75"><v:imagedata o:href=\"http://www.almozaina.com/images/1-9.gif\" src="file:///C:WINDOWSTEMPmsohtml1\01clip_image001.gif"></v:imagedata></v:shape><o:p></o:p>

1-9 <o:p></o:p>

3- حدد ملف الصورة التي تريد إدراجها في صفحتك .<o:p></o:p>

4- انقر زر ok وستظهر الصورة في صفحة الويب ( انظر الشكل 9-2 ) .<o:p></o:p>

5- من قائمة File ، حدد أمر save لتفتح مربع حوار save as ( انظر الشكل 9-3 ) لتتأكد من أن ملف الصورة قد تم حفظه مع موقع الويب إلى جانب حفظه في مجلد /IMAGES .<o:p></o:p>

6- إذا لم يكن المجلد المحدد لحفظ ملف الصورة هو مجلد IMAGES ، فانقر زر Changes ثم حدد مجلد IMAGES ثم انقر زر ok .<o:p></o:p>

7- انقر زر ok لتحفظ ملف الصورة مع موقع الويب الخاص بك .<o:p></o:p>

<v:shape id=_x0000_i1026 style="WIDTH: 419.25pt; HEIGHT: 243.75pt" alt="" type="#_x0000_t75"><v:imagedata o:href=\"http://www.almozaina.com/images/2-9.gif\" src="file:///C:WINDOWSTEMPmsohtml1\01clip_image002.gif"></v:imagedata></v:shape><o:p></o:p>

2-9<o:p></o:p>

<v:shape id=_x0000_i1027 style="WIDTH: 444.75pt; HEIGHT: 282.75pt" alt="" type="#_x0000_t75"><v:imagedata o:href=\"http://www.almozaina.com/images/3-9.gif\" src="file:///C:WINDOWSTEMPmsohtml1\01clip_image003.gif"></v:imagedata></v:shape><o:p></o:p>

3-9<o:p></o:p>

تعديل ملفات الصور لديك<o:p></o:p>

من الإعدادات التي يمكنك القيام بها لتعديل ملفات الصور ما يلي :<o:p></o:p>

× التحكم في أبعاد الصورة داخل الصفحة<o:p></o:p>

× التحكم في طريقة محاذاة النص بالنسبة للصورة<o:p></o:p>

× تحديد إذا ما كان سيتم عرض الصورة داخل الحدود<o:p></o:p>

× إضافة ارتباط تشعبي إلى الصورة<o:p></o:p>

ولتعديل طريقة عرض الصورة داخل صفحة الويب :<o:p></o:p>

1- حدد الصورة التي تريد تعديلها .<o:p></o:p>

2- من قائمة Format ، حدد أمر Properties لتفتح مربع حوار PictureProperties ( انظر الشكل 9-4 )<o:p></o:p>

3- لإضافة ارتباط تشعبي إلى الصورة ، اكتب عنوان URL الخاص بالارتباط التشعبي الذي تريد ربطه مع الصورة ، وذلك باستخدام جزء Default Hyperlinks . في مربع الحوار قد يكون عنوان URL أحد المواقع الأخرى على الويب أو ملفاً أخر على الموقع الخاص بك ، ويمكنك استخدام Browse لتحدد عنوان URL إذا لم تستطع أن تتذكره .
4- لتعديل ابعاد الصورة appearance حدد علامة تبويب لتفتح النافذة الخاص بك (انظر الشكل 9-5) . <o:p></o:p>

<v:shape id=_x0000_i1028 style="WIDTH: 312pt; HEIGHT: 322.5pt" alt="" type="#_x0000_t75"><v:imagedata o:href=\"http://www.almozaina.com/images/4-9.gif\" src="file:///C:WINDOWSTEMPmsohtml1\01clip_image004.gif"></v:imagedata></v:shape><o:p></o:p>

4-9<o:p></o:p>

<v:shape id=_x0000_i1029 style="WIDTH: 315.75pt; HEIGHT: 322.5pt" alt="" type="#_x0000_t75"><v:imagedata o:href=\"http://www.almozaina.com/images/5-9.gif\" src="file:///C:WINDOWSTEMPmsohtml1\01clip_image005.gif"></v:imagedata></v:shape><o:p></o:p>

5-9<o:p></o:p>

5- قم بتغيير قيمتي العرض والارتفاع لتعدل أبعاد عرض الصورة .<o:p></o:p>

6- انقر زر ok لحفظ تغييراتك وإغلاق مربع حوار Picture Properties .<o:p></o:p>

المثال التالي يساعدك على فهم دور المحاذاة وفائدتها عندما يتفاعل النص مع الصورة داخل صفحة ويب :<o:p></o:p>

1- قم بإنشاء صفحة جديدة .<o:p></o:p>

2- اكتب الجملة التالية في الصفحة :<o:p></o:p>

الدرة دمه في رقاب المسلمين او اكتب ما تشاء مع الصورة التي ستختارها نحن اخترنا صورة الدرة والعبارة السابقة<o:p></o:p>

3- ضع مؤشر الفأرة قبل كلمة المسلمين ثم أدخل الصورة . إذا كان حجم الصورة يزيد عن 150 بكسل عرضاً ، فقم بتعديل هذا الحجم بحيث لا يزيد عن 150 بكسل . ينبغي أن تبدو الصورة لديك كما هو مبين في الشكل 9-6 .<o:p></o:p>

4- حدد الصورة التي قمت بإدراجها ثم افتح مربع حوار Picture Properties . حدد علامة تبويب Appearance لتفتح النافذة الخاصة بها .
5- لكي ترى كيف ان تغيير المحاذاة يؤدي الى التاثير على تدفق النص المجاور default ستاخذ الصورة المحاذاة الافتراضية للصورة قم بتغيير المحاذاة ثم لاحظ التغيير الذي يطرا على الصورة والنص<o:p></o:p>

<v:shape id=_x0000_i1030 style="WIDTH: 425.25pt; HEIGHT: 195pt" alt="" type="#_x0000_t75"><v:imagedata o:href=\"http://www.almozaina.com/images/6-9.gif\" src="file:///C:WINDOWSTEMPmsohtml1\01clip_image006.gif"></v:imagedata></v:shape><o:p></o:p>

الاستعداد لنشر موقع الويب الخاص بك<o:p></o:p>

ونشر موقع الويب عملية في غاية السهولة إذا استخدمت فرونت بيج . كل ما تفعله هو أن تحدد الموقع الذي تريد نشره ثم تحدد الموقع الذي تريد أن يتم عليه النشر . أما فرونت بيج ، فيتولى القيام بكل هذا . لكن قبل الإقدام على نشر موقع الويب الخاص بك ، ثمة مهام قليلة ينبغي عليك القيام بها :<o:p></o:p>

أولاً ، ينبغي أن تتأكد من وجود خادم ويب نشط على الإنترنت أو شبكة الإنترنت الخاصة بجهة عملك . فمن الضروري أن يتوافر خادم ويب حتى يتمكن الآخرون من استعراض موقعك . هذا وتوجد شركات عديدة تقوم بإنتاج برامج خادم الويب يمكنك الاستعانة بها ، حيث تعمل معظم هذه البرامج بصورة مرضية وجيدة .<o:p></o:p>

ثانياً ، ينبغي أن تتأكد من توافر كافة حقوق الأمان والوصول الضرورية . هذه الحقوق تتيح لك إنشاء ونسخ ملفاتك إلى خادم الويب . في هذا الشأن ، توفر عادة أجهزة خادم الويب للمستخدمين ما يسمى بالوصول " للقراءة فقط " read-only . هذا النوع من الوصول يتيح للمستعرضين عرض الملفات الموجودة على الخادم دون إدخال أي تغييرات عليها . ولكي تنشر موقع الويب الذي صممته على الخادم ، ستحتاج إلى الحقوق التي تمنحك حق القراءة والكتابة والإنشاء والحذف داخل مجلد موقعك الموجود على الخادم . ومدير الخادم هو المسئول عن منحك حقوق الوصول السليمة ، الأمر الذي يسمح لك بنشر عملك على الخادم .<o:p></o:p>

ثالثاً ، ينبغي أن تتأكد من أن خادم الويب الذي تنوي النشر عليه يدعم خدمة FTP لإرسال وربط ملفاتك بالخادم الذي قررت التعامل معه . وطالما أن هذا الخادم يدعم خدمة FTP ، فلن تحتاج إلى إجراء أي تغييرات أو إعدادات في فرونت بيج لكي تنشر مواقع الويب الخاصة بك .<o:p></o:p>