إضافة صور وتعديلها

حول الصور

تتوفر أنواع مختلفة من تنسيقات ملفات الرسومات، ولكن يتم استخدام ثلاثة أنواع من تنسيقات ملفات الرسومات بوجه عام في صفحات الويب؛ وهي GIF وJPEG وPNG. يعد تنسيقا الملفات GIF وJPEG من أفضل التنسيقات المدعومة التي يمكن عرضها في معظم المستعرضات.

GIF ‏(Graphic Interchange Format)‏‎

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

‏JPEG ‏(Joint Photographic Experts Group‏)‎

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

PNG ‏(Portable Network Group‏)‎

يعد تنسيق ملف PNG بديلاً لملفات GIF ومحررًا من براءات الاختراع، ويدعم هذا النوع الصور ذات الألوان المجدولة والتدرج الرمادي والألوان الحقيقية، كما يتضمن دعم قناة ألفا للشفافية. كما أن PNG هو تنسيق الملف الأصلي لتطبيق Adobe® Fireworks®. وتحتفظ ملفات PNG بكافة معلومات الطبقات والخطوط المتجهة والتأثيرات الأصلية (مثل الظلال المسقطة)، ويمكن تحرير كافة العناصر بالكامل في أي وقت. ويجب أن تحتوي الملفات على امتداد الملف ‎.png ليتعرف عليها Dreamweaver كملفات PNG.

إدراج صورة

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

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

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

‏‫للحصول على تدريب بالفيديو حول إدراج الصور، انظر إضافة صور.

  1. ضع نقطة الإدراج حيثما تريد ظهور الصورة في النافذة Document، ثم قم بأحد الإجراءات التالية:

    • في الفئة Common من اللوحة Insert، انقر فوق رمز Images .
    • في الفئة Common من اللوحة Insert، انقر فوق الزر Images وحدد الرمز Image. عند ظهور رمز Image في اللوحة Insert، يمكنك سحب الرمز إلى النافذة Document (أو إلى نافذة طريقة العرض Code إذا تعمل في التعليمة البرمجية).
    • حدد Insert > Image.
    • اسحب إحدى الصور من اللوحة Assets (Window > Assets) إلى الموقع المطلوب بالإطار Document ثم انتقل مباشرة إلى الخطوة 3.
    • قم بسحب صورة من اللوحة Files ‏إلى الموقع المطلوب في النافذة Document، ثم انتقل إلى الخطوة رقم 3.
    • قم بسحب صورة من سطح المكتب ‏إلى الموقع المطلوب في النافذة Document، ثم انتقل إلى الخطوة رقم 3.
  2. في مربع الحوار الذي يظهر، قم بأحد الإجراءات التالية:
    • حدد File System لاختيار ملف صورة.
    • حدد Data Source لاختيار مصدر صورة ديناميكي.
    • انقر فوق الزر Sites And Servers لاختيار ملف صورة في مجلد بعيد بأحد مواقع Dreamweaver.
  3. استعرض الخيارات لتحديد مصدر الصورة أو المحتوى الذي تريد إدراجه.

    إذا كنت تعمل في مستند لم يتم حفظه، فسوف يقوم Dreamweaver بإنشاء مرجع file://‎ لملف الصورة. وعند حفظ المستند في أي مكان بالموقع، يقوم Dreamweaver بتحويل المرجع إلى مسار مرتبط بالمستند.

    ملاحظة:

    عند إدراج صور، من الممكن أيضًا استخدام مسار مطلق إلى صورة موجودة على خادم بعيد (أي صورة غير متوفرة على محرك الأقراص الثابت المحلي). ومع ذلك، إذا واجهت مشاكل في الأداء أثناء العمل، قد ترغب في تعطيل عرض الصورة في طريقة العرض Design عن طريق إلغاء تحديد Commands > ‏Display External Files.

  4. انقر فوق OK. يظهر مربع الحوار Image Tag Accessibility Attributes عند تنشيط مربع الحوار في Preferences (Edit > Preferences).

  5. أدخل القيم في مربعي النص Alternate Text وLong Description، ثم انقر فوق OK.
    • في المربع Alternate Text، أدخل اسمًا أو وصفًا مختصرًا للصورة. عندئذٍ يقرأ برنامج قراءة الشاشة المعلومات التي أدخلتها هنا. ويجب ألا يزيد طول ما أدخلته عن 50 حرفًا تقريبًا. أما بالنسبة للأوصاف الأطول، جرّب إدخال ارتباط، في مربع النص Long Description، إلى ملف يوفر مزيدًا من المعلومات عن الصورة.
    • في المربع Long Description، أدخل موقع ملف يتم عرضه عندما ينقر المستخدم فوق الصورة، أو انقر فوق رمز المجلد للاستعراض وصولاً إلى الملف. ويوفر مربع النص هذا ارتباطًا إلى ملف مرتبط بالصورة أو يوفر مزيدًا من المعلومات عن الصورة.
    ملاحظة:

    يمكنك إدخال المعلومات في مربع نص واحد أو الاثنين حسب حاجتك. وعندئذٍ يقرأ برنامج قراءة الشاشة السمة Alt للصورة.

    ملاحظة:

    عند النقر فوق Cancel تظهر الصورة في المستند لكن Dreamweaver لا يربطها بعلامات تمييز أو سمات وصول.

  6. في Property inspector (Window > ‏Properties)‏، قم بتعيين خصائص الصورة.

تعيين خصائص الصورة

يتيح لك عارض خصائص الصور إمكانية تعيين الخصائص لصورة. إذا لم ترَ كافة خصائص الصور، فانقر فوق السهم الموسع في الركن السفلي الأيمن.


          خصائص الصور في عارض الخصائص.

  1. حدد Window > Properties لعرض Property inspector للصورة المحددة.

  2. في المربع النصي الموجود أنى الصورة المصغرة، أدخل اسمًا يمكنك الرجوع به إلى الصورة عند استخدام إحدى عمليات Dreamweaver (مثل Swap Image) أو عند استخدام لغة دليل برمجة مثل JavaScript أو VBScript.
  3. قم بتعيين أي من خيارات الصورة.

    W and H

    عرض الصورة وارتفاعها بالبكسل. يقوم Dreamweaver تلقائيًا بتحديث مربعات النص هذه مستخدمًا أبعاد الصورة الأصلية عند إدراج صورة في الصفحة.

    إذا قمت بتعيين قيمتين للخيارين W وH لا تتوافقان مع العرض والارتفاع الحقيقيين للصورة، فقد لا يتم عرض الصورة بشكل صحيح في المستعرض. (لاستعادة القيم الأصلية، انقر فوق تسميتي مربعي النص W وH، أو فوق زر إعادة تعيين حجم الصورة الذي يظهر إلى يمين مربعي النص W وH عند إدخال قيمة جديدة).

    ملاحظة:

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

    Src

    يحدد الملف المصدر للصورة. انقر فوق رمز المجلد للاستعراض وصولاً إلى الملف المصدر، أو اكتب المسار.

    Link

    يحدد ارتباطًا تشعبيًا للصورة. اسحب رمز الإشارة إلى الملف إلى ملف موجود في اللوحة Files، أو انقر فوق رمز المجلد للاستعراض وصولاً إلى مستند موجود في موقعك، أو اكتب عنوان URL يدويًا.

    Alt

    يحدد النص البديل الذي يظهر في موضع الصورة مع مستعرضات النصوص فقط أو المستعرضات التي تم تعيينها لتنزيل الصور يدويًا. بالنسبة للمستخدمين المعاقين بصريًا الذين يستخدمون مُصدرات الأصوات الرقمية مع مستعرضات النصوص فقط، يتم النطق بالنص بصوت عالٍ. وفي بعض المستعرضات، يظهر هذا النص فقط عند تمرير المؤشر فوق الصورة.

    Map Name وأدوات Hotspot

    تتيح لك تسمية مخطط صورة من جانب العميل وإنشاؤه.

    Target

    يحدد الإطار أو النافذة التي سيتم فيها تحميل الصفحة المرتبطة. (لا يتوفر هذا الخيار عندما لا تكون الصورة مرتبطة بملف آخر). وتظهر أسماء كافة الإطارات في مجموعة الإطارات الحالية في القائمة Target. يمكنك أيضًا الاختيار من أسماء الأهداف المحجوزة التالية:

    • يقوم _blank بتحميل الملف المرتبط في نافذة مستعرض جديدة غير مسماة.

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

    • يقوم _self بتحميل الملف المرتبط في نفس إطار أو نافذة الارتباط. وهذا الهدف هو الإعداد الافتراضي، لذا لا تحتاج عادة إلى تحديده.

    • يقوم _top بتحميل الملف المرتبط في نافذة المستعرض الكاملة، وبالتالي إزالة كافة الإطارات.

    Edit

    يعمل على بدء محرر الصورة الذي حددته في تفضيلات External Editors وفتح الصورة المحددة.

    Update from original

    عندما تكون الصورة على الويب (الصورة على صفحة Dreamweaver) خارجة عن التزامن مع ملف Photoshop الأصلي، فإن Dreamweaver يكتشف أن الملف الأصلي تم تحديثه، ويعرض أحد أسهم أيقونة الكائنات الذكية باللون الأحمر. عندما تقوم بتحديد صورة الويب في عرض التصميم ونقر زر تحديث من الأصل في مفتش الخاصية، يتم تحديث الصورة آلياً، عاكسة أي تغيرات تمت على ملف Photoshop الأصلي.

    Edit image settings

     لفتح مربع الحوار Image Optimization ولتتمكن من تحسين الصورة.

    Crop

       يقوم باقتطاع حجم الصورة وإزالة المناطق غير المرغوب فيها من الصورة المحددة.

    Resample

     يقوم بإعادة تشكيل صورة تم تغيير مقاسها، مع تحسين جودتها بمقاسها وشكلها الجديدين.

    Brightness and Contrast

     يقوم بضبط إعدادات درجة السطوع والتباين للصورة.

    Sharpen

     يقوم بضبط حدة الصورة.

تحرير سمات إمكانية الوصول للصورة في التعليمة البرمجية

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

  1. في النافذة Document، حدد الصورة.
  2. قم بأحد الإجراءات التالية:
    • قم بتحرير سمات الصورة المناسبة في طريقة العرض Code.
    • انقر بزر الماوس الأيمن (في نظام التشغيل Windows) أو انقر مع الضغط على Control (في نظام التشغيل Macintosh)، ثم حدد Edit Tag.
    • قم بتحرير القيمة Alt في عارض الخصائص.

تغيير حجم الصورة مرئيًا

يمكنك تغيير المقاس المرئي للعناصر مثل الصور أو البرامج الإضافية أو Shockwave أو ملفات SWF والتطبيقات الصغيرة وعناصر التحكم ActiveX في Dreamweaver.

يساعدك تغيير مقاس الصورة مرئيًا على رؤية كيفية تأثير الصورة على المخطط من عدة أبعاد، ولكنه لا يغير حجم ملف الصورة إلى النسب التي حددتها. عند تغيير المقاس المرئي لإحدى الصور في Dreamweaver بدون استخدام أحد تطبيقات تحرير الصور (مثل Adobe Fireworks) لتغيير مقاس ملف الصورة لتحصل على الحجم المطلوب، يقوم مستعرض المستخدم بتغيير مقاس الصورة عند تحميل الصفحة. وقد يتسبب ذلك في حدوث تأخير في وقت تنزيل الصفحة مع عرض الصورة في مستعرض المستخدم على نحو غير صحيح. ولتقليل وقت التنزيل وضمان ظهور كافة مثيلات الصورة بنفس الحجم، استخدم تطبيقًا لتحرير الصور لتغيير حجم الصور.

عند تغيير مقاس إحدى الصور في Dreamweaver، يمكنك إعادة إنشاء عينة لها resample لتتكيف مع الأبعاد الجديدة. وتؤدي عملية إعادة التشكيل إلى إضافة وحدات بكسل أو اقتطاعها من ملفات صور JPEG وGIF التي تم تغيير حجمها لتتوافق مع مظهر الصورة الأصلية قدر الإمكان. كما تقلل هذه العملية من حجم الملف وتحسّن من أداء التنزيل.

تغيير حجم عنصر مرئيًا

  1. حدد العنصر (على سبيل المثال، صورة أو ملف SWF) في النافذة Document.

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

  2. قم بتغيير حجم العنصر من خلال القيام بأحد الإجراءات التالية:
    • لضبط عرض العنصر، اسحب مقبض التحديد الموجود على الجانب الأيمن.
    • لضبط ارتفاع العنصر، اسحب مقبض التحديد السفلي.
    • لضبط عرض العنصر وارتفاعه في نفس الوقت، اسحب مقبض التحديد الركني.
    • للحفاظ على تناسب العنصر (نسبة العرض إلى الارتفاع) أثناء ضبط أبعاده، اسحب مقبض التحديد الركني مع الضغط على المفتاح Shift.
    • لضبط عرض عنصر وارتفاعه إلى حجم محدد (على سبيل المثال، 1 × 1 بكسل)، استخدم عارض الخصائص لإدخال قيمة رقمية. يمكن تغيير حجم العناصر مرئيًا إلى الحد الأدنى البالغ 8 × 8 بكسل.
  3. لإرجاع عنصر تم تغيير حجمه إلى أبعاده الأصلية، في عارض الخصائص، قم بحذف القيم الموجودة في مربعي النص W وH، أو انقر فوق الزر Reset Size الموجود في عارض خصائص الصور.

إرجاع صورة إلى حجمها الأصلي

  1. انقر فوق الزر Reset size في عارض خصائص الصورة.

إعادة تشكيل صورة تم تغيير مقاسها

  1. قم بتغيير مقاس الصورة كما موضح أعلاه.
  2. انقر فوق الزر Resample في عارض خصائص الصورة.
    ملاحظة:

    لا يمكنك إعادة تشكيل العناصر النائبة للصور أو عناصر أخرى بخلاف الصور النقطية.

إدراج عنصر نائب لصورة

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

  1. في النافذة Document، ضع نقطة الإدراج حيثما تريد إدراج رسم عنصر نائب.
  2. حدد Insert > Image Objects > Image Placeholder.

  3. بالنسبة لمربع النص Name (اختياري)، أدخل النص الذي تريد ظهوره كتسمية لعنصر الصورة النائب. واترك مربع النص فارغًا إذا لم تكن تريد ظهور تسمية. ويجب أن يبدأ الاسم بحرف ويمكن أن يحتوي على أحرف وأرقام فقط، ولا يُسمح بإدخال مسافات أو أحرف ASCII عالية.
  4. بالنسبة لمربعي النص Width وHeight (مطلوبان)، اكتب رقمًا لتعيين حجم الصورة بالبكسل.
  5. بالنسبة لمربع النص Color (اختياري)، قم بأحد الإجراءات التالية لتطبيق أحد الألوان:
    • استخدم Color Picker لتحديد أحد الألوان.
    • أدخل قيمة اللون السداسية عشرية (على سبيل المثال، #FF0000).
    • أدخل اسمًا للون ويب آمن (على سبيل المثال، red).
  6. بالنسبة لمربع النص Alternate Text (اختياري)، أدخل نصًا لوصف الصورة للمشاهدين الذين يستخدمون مستعرض نصوص فقط.
    ملاحظة:

    يتم إدراج علامة صورة تلقائيًا في علامة HTML البرمجية التي تحتوي على سمة src فارغة.

  7. انقر فوق OK.

    يظهر لون العنصر النائب وسمات خصائصه وتسميته كالتالي:

    
          العنصر النائب للصورة مع سماته.

    عند عرض العنصر النائب في مستعرض، لا يظهر نص التسمية والحجم.

استبدال عنصر نائب لصورة

لا يعرض العنصر النائب لصورة صورة في المستعرض. لذا قبل نشر موقعك، يجب استبدال أي عناصر نائبة للصور قمت بإضافتها بملفات صور مألوفة للعرض على الويب، مثل ملفات GIF أو JPEG.

عند وجود Fireworks، يمكنك إنشاء رسمًا جديدًا من العنصر النائب لصورة Dreamweaver. ويتم تعيين الصورة الجديدة على نفس مقاس صورة العنصر النائب. يمكنك تحرير الصورة ثم استبدالها في Dreamweaver.

  1. في النافذة Document، قم بأحد الإجراءين التاليين:
    • انقر نقرًا مزدوجًا فوق العنصر النائب للصورة.
    • انقر فوق العنصر النائب للصورة لتحديده ثم انقر فوق رمز المجلد المجاور للمربع النصي Src الموجود في عارض الخصائص (Window > Properties).
  2. في مربع الحوار Image Source، انتقل إلى الصورة التي تريد استبدال العنصر النائب للصورة بها، ثم انقر فوق OK.

تعيين خصائص العناصر النائبة للصور

لتعيين خصائص العنصر النائب لإحدى الصور، حدد العنصر النائب في الإطار Document؛ ثم حدد Window > Properties لعرض عارض الخصائص. لرؤية كافة الخصائص، انقر فوق السهم الموسع في الركن السفلي الأيمن.

استخدم عارض الخصائص لتعيين الاسم والعرض والارتفاع ومصدر الصورة ووصف النص البديل والمحاذاة واللون لصورة العنصر النائب.

عارض خصائص العنصر النائب للصورة.

في عارض خصائص العنصر النائب، يتم تعطيل مربع النص الرمادي ومربع النص Align. يمكنك تعيين هذه الخصائص في عارض خصائص الصور عند استبدال العنصر النائب بصورة.

  1. قم بتعيين أي من الخيارات التالية:

    W and H

    يقوم بتعيين عرض العنصر النائب للصورة وارتفاعه بالبكسل.

    Src

    يحدد الملف المصدر للصورة. بالنسبة لصورة العنصر النائب، يكون مربع النص هذا فارغًا. انقر فوق الزر Browse لتحديد صورة بديلة لرسم العنصر النائب.

    Link

    يحدد ارتباطًا تشعبيًا لعنصر الصورة النائب. اسحب رمز الإشارة إلى الملف إلى ملف موجود في اللوحة Files، أو انقر فوق رمز المجلد للاستعراض وصولاً إلى مستند موجود في موقعك، أو اكتب عنوان URL يدويًا.

    Alt

    يحدد النص البديل الذي يظهر في موضع الصورة مع مستعرضات النصوص فقط أو المستعرضات التي تم تعيينها لتنزيل الصور يدويًا. بالنسبة للمستخدمين المعاقين بصريًا الذين يستخدمون مُصدرات الأصوات الرقمية مع مستعرضات النصوص فقط، يتم النطق بالنص بصوت عالٍ. وفي بعض المستعرضات، يظهر هذا النص فقط عند تمرير المؤشر فوق الصورة.

    Create

    يعمل على بدء تشغيل Fireworks لإنشاء صورة بديلة. يتم تعطيل الزر Create ما لم يتم تثبيت Fireworks على الكمبيوتر.

    Update from original

    عندما تكون الصورة على الويب (الصورة على صفحة Dreamweaver) خارجة عن التزامن مع ملف Photoshop الأصلي، فإن Dreamweaver يكتشف أن الملف الأصلي تم تحديثه، ويعرض أحد أسهم أيقونة الكائنات الذكية باللون الأحمر. عندما تقوم بتحديد صورة الويب في عرض التصميم ونقر زر تحديث من الأصل في مفتش الخاصية، يتم تحديث الصورة آلياً، عاكسة أي تغيرات تمت على ملف Photoshop الأصلي.

    Color

    يحدد لونًا لعنصر الصورة النائب.

تحرير صور في Dreamweaver

يمكنك إعادة تشكيل الصور واقتصاصها وتحسينها وزيادة حدتها في Dreamweaver. ويمكنك أيضاً ضبط سطوع الصور وتباينها.

ميزات تحرير الصور

يوفر Dreamweaver الميزات الأساسية لتحرير الصور والتي تتيح لك تعديل الصور بدون الاستعانة بتطبيق خارجي لتحرير الصور مثل Fireworks أو Photoshop. تم تصميم أدوات تحرير الصور في Dreamweaver بحيث يتسنى لك العمل بسهولة مع مصممي المحتويات المسئولين عن إنشاء ملفات الصور لاستخدامها على موقع الويب.

ملاحظة:

لا تحتاج إلى تثبيت تطبيق Fireworks أو تطبيقات أخرى لتحرير الصور على الكمبيوتر حتى يتسنى لك استخدام ميزات تحرير الصور في Dreamweaver.

  1. حدد Modify > Image. قم بتعيين أي من ميزات تحرير الصور هذه في Dreamweaver:

    Resample

    تقوم بإضافة وحدات بكسل أو اقتطاعها من ملفات صور JPEG وGIF التي تم تغيير حجمها لتتوافق مع مظهر الصورة الأصلية قدر الإمكان. كما تقلل هذه العملية من حجم الملف وتحسّن من أداء التنزيل.

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

    Crop

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

    Brightness and Contrast

    تقوم بتعديل التباين أو السطوع بالبكسل في الصورة. ويؤثر ذلك على التمييزات والظلال والألوان المتوسطة للصورة. ويتم استخدام Brightness/Contrast عادةً عند تصحيح الصور شديدة الظلمة أو الإضاءة.

    Sharpen

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

    ملاحظة:

    تنطبق ميزات تحرير الصور هذه في Dreamweaver فقط على تنسيقات ملفات الصور JPEG وGIF وPNG. ولا يمكن تحرير تنسيقات ملفات الصور النقطية باستخدام ميزات تحرير الصور هذه.

اقتصاص صورة

يتيح لك Dreamweaver اقتصاص (أو اقتطاع) صور الملفات النقطية.

ملاحظة:

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

  1. افتح الصفحة التي تحتوي على الصورة المطلوب اقتصاصها، ثم حدد الصورة وقم بأحد الإجراءين التاليين:
    • انقر فوق رمز الأداة Crop  في عارض خصائص الصور.
    • حدد Modify > Image > Crop.
    • تظهر مقابض الاقتصاص حول الصورة المحددة.
  2. قم بضبط مقابض الاقتصاص حتى يطوق مربع الإحاطة مساحة الصورة التي تريد الاحتفاظ بها.
  3. انقر نقرًا مزدوجًا داخل مربع الإحاطة أو اضغط على Enter لاقتصاص التحديد.
  4. يظهر مربع حوار يُعلمك بأن ملف الصورة التي تقوم باقتصاصها سوف يتغير على القرص. انقر فوق OK. وتتم إزالة كل وحدة بكسل في الصورة النقطية المحددة تقع خارج مربع الإحاطة، وتبقى الكائنات الأخرى داخل الصورة.
  5. قم بمعاينة الصورة وتأكد من أنها تلبي توقعاتك. وإلا فحدد Edit > Undo Crop للعودة إلى الصورة الأصلية.

    ملاحظة:

    يمكنك التراجع عن تأثير الأمر Crop (والعودة إلى ملف الصورة الأصلية) حتى وقت الخروج من Dreamweaver أو تحرر الملف في تطبيق خارجي لتحرير الصور.

تحسين صورة

يمكنك تحسين الصور في صفحات الويب من داخل Dreamweaver.

  1. افتح الصفحة التي تحتوي على الصورة المطلوب تحسينها، ثم حدد الصورة وقم بأحد الإجراءين التاليين:
    • انقر فوق الزر Edit Image Settings الموجود  في عارض الخصائص.
    • حدد Modify > Image > Optimize.
  2. قم بإجراء التحريرات في مربع الحوار Image Optimization وانقر فوق OK.

زيادة حدة صورة

تؤدي زيادة الحدة إلى زيادة تباين وحدات البكسل حول حواف الكائنات لزيادة تعريف الصورة أو حدتها.

  1. افتح الصفحة التي تحتوي على الصورة المطلوب زيادة حدتها، ثم حدد الصورة وقم بأحد الإجراءين التاليين:
    • انقر فوق الزر Sharpen الموجود  في عارض خصائص الصورة.
    • حدد Modify > Image > Sharpen.
  2. يمكنك تحديد درجة حدة Dreamweaver المطبقة على الصورة بسحب عنصر التحكم في مربع التمرير أو إدخال قيمة بين 0 و10 في المربع النصي. في الوقت الذي تقوم فيه بضبط حدة الصورة باستخدام مربع الحوار Sharpness، يمكنك معاينة التغيير الذي تم إدخاله على الصورة.
  3. انقر فوق OK عندما تكون راضيًا عن الصورة.
  4. احفظ التغييرات التي أجريتها بتحديد File > Save أو يمكنك العودة إلى الصورة الأصلية بتحديد Edit > Undo Sharpen.

    ملاحظة:

    يمكنك التراجع عن تأثير الأمر Sharpen (والإرجاع إلى ملف الصورة الأصلية) فقط قبل حفظ الصفحة التي تحتوي على الصورة. فبعد حفظ الصفحة، يتم حفظ التغييرات التي تم إجراؤها على الصورة نهائيًا.

ضبط السطوع والتباين لصورة

يقوم الخيار Brightness/Contrast بتعديل التباين أو السطوع بالبكسل في الصورة. ويؤثر ذلك على التمييزات والظلال والألوان المتوسطة للصورة. ويتم استخدام Brightness/Contrast عادةً عند تصحيح الصور شديدة الظلمة أو الإضاءة.

  1. افتح الصفحة التي تحتوي على الصورة المطلوب ضبطها، ثم حدد الصورة وقم بأحد الإجراءين التاليين:
    • انقر فوق الزر Brightness/Contrast  الموجود في عارض خصائص الصورة.
    • حدد Modify > Image > Brightness/Contrast.
  2. اسحب شريطي التمرير Brightness وContrast لضبط الإعدادات. وتتراوح القيم بين 100- و100.
  3. انقر فوق OK.

إنشاء صورة تمرير

يمكنك إدراج صور تمرير في صفحتك. والتمرير هو عبارة عن صورة تتغير عندما يتحرك المؤشر فوقها في أحد المستعرضات.

يجب أن يكون لديك صورتان لإنشاء التمرير: صورة رئيسية (الصورة المعروضة عند تحميل الصفحة في الأول) وصورة ثانوية (الصورة التي تظهر عند تحريك المؤشر فوق الصورة الرئيسية). ينبغي أن تكون كلتا الصورتين في التمرير بنفس المقاس، وإن لم يكونا كذلك، يقوم Dreamweaver بتغيير مقاس الصورة الثانية لتطابق خصائص الصورة الأولى.

يتم تعيين صور التمرير تلقائيًا لتستجيب إلى الحدث onMouseOver. يمكنك تعيين صورة لتستجيب إلى حدث مختلف (على سبيل المثال، نقرة الماوس) أو تغيير صورة التمرير.

  1. في النافذة Document، ضع نقطة الإدراج حيثما تريد ظهور التمرير.
  2. قم بإدراج التمرير باستخدام أي من الطريقتين التاليتين:
    • في الفئة Common من اللوحة Insert، انقر فوق الزر Images وحدد الرمز Rollover Image. عند عرض الرمز Rollover Image في اللوحة Insert، يمكنك سحب الرمز إلى النافذة Document.
    • حدد Insert > Image Objects > Rollover Image.
  3. قم بتعيين الخيارات ثم انقر فوق OK.

    Image Name

    اسم صورة التمرير.

    Original image

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

    Rollover Image

    الصورة التي تريد عرضها عند تمرير المؤشر فوق الصورة الأصلية. أدخل المسار أو انقر فوق Browse لتحديد الصورة.

    Preload Rollover Image

    يقوم بإعادة تحميل الصور في ذاكرة التخزين المؤقت للمستعرض بحيث لا يحدث أي تأخير عندما يمرر المستخدم المؤشر فوق الصورة.

    Alternate Text

    (اختياري) النص الذي يصف الصورة للمشاهدين الذين يستخدمون مستعرض نصوص فقط.

    When clicked, Go to URL

    الملف الذي تريد فتحه عندما ينقر المستخدم فوق صورة التمرير. أدخل المسار أو انقر فوق Browse وحدد الملف.

    ملاحظة:

    عند عدم تعيين رابطًا للصورة، يقوم Dreamweaver بإدراج رابطًا فارغًا (#) في كود HTML المصدر يتم ربط عملية التمرير به. عند إزالة الرابط الفارغ، لن تعمل صورة التمرير.

  4. حدد File > Preview in Browser أو اضغط على F12.

  5. في المستعرض، حرك المؤشر فوق الصورة الأصلية لرؤية صورة التمرير.
    ملاحظة:

    لا يمكنك رؤية تأثير صورة التمرير في طريقة العرض Design.

استخدام محرر صور خارجي

عندما تكون موجودًا في Dreamweaver، يمكنك فتح صورة محددة في محرر صور خارجي عند العودة إلى Dreamweaver بعد حفظ ملف الصورة التي تم تحريرها يمكنك رؤية أي تغييرات أجريتها على الصورة في الإطار Document.

يمكنك إعداد Fireworks ليكون محرر الصور الخارجي الرئيسي. ويمكنك أيضًا تعيين أنواع الملفات التي يفتحها المحرر، مع إمكانية تحديد برامج تحرير متعددة للصور. على سبيل المثال، يمكنك تعيين التفضيلات لبدء Fireworks عندما تريد تحرير ملف GIF، وبدء محرر صور مختلف عندما تريد تحرير ملف JPG أو JPEG.

تشغيل محرر الصور الخارجي

  1. قم بأحد الإجراءات التالية:
    • انقر نقرًا مزدوجًا فوق الصورة التي تريد تحريرها.
    • انقر بزر الماوس الأيمن (Windows) أو انقر مع الضغط على الزر Control (Macintosh) فوق الصورة المطلوب تحريرها ثم حدد Edit With > Browse وحدد أحد برامج التحرير.
    • حدد الصورة التي تريد تحريرها، وانقر فوق Edit في عارض الخصائص.
    • انقر نقرًا مزدوجًا فوق ملف الصورة في اللوحة Files لبدء تشغيل محرر الصور الرئيسي. إذا لم تحدد أي محرر صور، يقوم Dreamweaver بتشغيل المحرر الافتراضي لنوع الملف.
    ملاحظة:

    عندما تقوم بفتح صورة من اللوحة Files، لا تكون خصائص تكامل Fireworks نشطة، فلا يفتح Fireworks ملف PNG الأصلي. ولاستخدام ميزات تكامل Fireworks، افتح الصور من داخل النافذة Document.

    عند عدم رؤية الصورة المحدثة بعد العودة إلى إطار Dreamweaver، حدد الصورة وانقر فوق الزر Refresh الموجود في عارض الخصائص.

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

يمكنك تحديد محرر صور لفتح ملفات الرسومات وتحريرها.

  1. افتح مربع الحوار File Types/Editors Preferences من خلال القيام بأحد الإجراءين التاليين:
    • حدد Edit > Preferences (Windows) أو Dreamweaver > Preferences (Macintosh) وحدد File Types/Editors في القائمة Category الموجودة يسارًا.
    • حدد Edit > Edit with External Editor وحدد File Types/Editors.
  2. في القائمة Extensions، حدد امتداد الملف الذي تريد تعيين محرر خارجي له.
  3. انقر فوق زر الإضافة (+) الموجود أعلى القائمة Editors.
  4. في مربع الحوار Select External Editor، استعرض وصولاً إلى التطبيق المطلوب تشغيله كمحرر لنوع الملفات هذا.

  5. في مربع الحوار Preferences، انقر فوق Make Primary إذا أردت أن يكون هذا المحرر هو الرئيسي لنوع الملفات هذا.

  6. إذا أردت إعداد محرر إضافي لنوع الملف هذا، فكرر الخطوتين 3 و4.

    يستخدم Dreamweaver تلقائيًا المحرر الرئيسي عند تحرير هذا النوع من الصور. يمكنك تحديد برامج التحرير المسرودة الأخرى من قائمة السياق الخاصة بالصورة في النافذة Document.

إضافة نوع ملف جديد إلى القائمة Extensions

  1. افتح مربع الحوار File Types/Editors Preferences من خلال القيام بأحد الإجراءين التاليين:

    • حدد Edit > Preferences (Windows) أو Dreamweaver > Preferences (Macintosh) وحدد File Types/Editors في القائمة Category الموجودة يسارًا.
    • حدد Edit > Edit with External Editor وحدد File Types/Editors.
  2. في مربع الحوار File Types/Editors Preferences، انقر فوق الزر Add (+) أعلى القائمة Extensions.

    يظهر عندئذٍ مربع نص في القائمة Extensions.

  3. اكتب امتداد الملف لنوع الملف الذي تريد بدء المحرر له.
  4. لتحديد محرر خارجي لنوع الملف، انقر فوق زر الإضافة (+) أعلى القائمة Editors.
  5. في مربع الحوار الذي يظهر، حدد التطبيق الذي تريد استخدامه لتحرير نوع الصورة هذا.
  6. انقر فوق Make Primary إذا أردت أن يكون هذا المحرر هو المحرر الرئيسي لنوع الصورة.

تغيير تفضيلات محرر موجود

  1. افتح مربع الحوار File Types/Editors Preferences من خلال القيام بأحد الإجراءين التاليين:

    • حدد Edit > Preferences (Windows) أو Dreamweaver > Preferences (Macintosh) وحدد File Types/Editors في القائمة Category الموجودة يسارًا.
    • حدد Edit > Edit with External Editor وحدد File Types/Editors.
  2. في مربع الحوار File Types/Editors preferences بالقائمة Extensions، حدد نوع الملف الذي تقوم بتغييره لعرض المحرر (المحررات) الموجودة.

  3. في القائمة Editors، حدد المحرر الذي تريد تفعيله، ثم قم بأحد الإجراءين التاليين:
    • انقر فوق زر الإضافة (+) أو الإزالة (–) أعلى القائمة Editors لإضافة محرر أو إزالته.
    • انقر فوق الزر Make Primary، لتغيير المحرر الذي سيتم بدء تشغيله افتراضيًا لإجراء عمليات التحرير.

تطبيق سلوكيات على الصور

يمكنك تطبيق أي عملية متوفرة على أي صورة أو نقطة فعالة لصورة. عند تطبيق سلوك على منطقة عمل، يقوم Dreamweaver بإدراج كود HTML المصدر في علامة التمييز area . يتم تطبيق ثلاثة سلوكيات بالتحديد على الصور: Preload Images وSwap Image وSwap Image Restore.

Preload Images

يقوم بتحميل الصور التي لا تظهر في الصفحة على الفور (مثل تلك الصور التي ستتم مبادلتها مع السلوكيات أو عناصر AP أو JavaScript) في ذاكرة التخزين المؤقت للمستعرض. وسيؤدي ذلك إلى منع حدوث حالات تأخير بسبب التنزيل عندما يحين وقت ظهور الصور.

Swap Image

يقوم مبادلة صورة بأخرى من خلال تغيير السمة SRC للعلامة img. استخدم هذا الإجراء لإنشاء تمريرات أزرار وتأثيرات صور أخرى (بما في ذلك مبادلة أكثر من صورة في وقت واحد).

Swap Image Restore

يقوم باستعادة آخر مجموعة من الصور التي تمت مبادلتها إلى ملفات المصدر السابقة لها. وتتم إضافة هذا الإجراء تلقائيًا متى تقوم بإرفاق الإجراء Swap Image بكائن افتراضيًا، ولن تحتاج أبدًا إلى تحديده يدويًا.

يمكنك أيضًا استخدام السلوكيات لإنشاء أنظمة تنقل أكثر تعقيدًا، مثل قوائم الانتقال.

شعار Adobe

تسجيل الدخول إلى حسابك