إدراج الصور وتحريرها في Dreamweaver

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

• في لوحة Insert حدد HTML من القائمة المنسدلة. انقر فوق Image. انقر نقرًا مزدوجًا فوق نافذة المستند (أو في نافذة عرض Code عند العمل باستخدام التعليمات البرمجية).

• حدد Insert > Image.

• اسحب إحدى الصور من اللوحة Assets (Window > Assets) إلى الموقع المطلوب في نافذة المستند، ثم انتقل مباشرة إلى الخطوة 3.

• قم بسحب صورة من اللوحة Files ‏إلى الموقع المطلوب في نافذة المستند، ثم انتقل إلى الخطوة رقم 3.

• قم بسحب صورة من سطح المكتب ‏إلى الموقع المطلوب في نافذة المستند، ثم انتقل إلى الخطوة رقم 3.

• في طريقة العرض Live، قم بسحب صورة من لوحة Extract اللوحة أو علامة تبويب Layers. قم بإفلات العنصر في أعلى العنصر أو أسفله أو يمينه أو يساره، استنادًا إلى أدلة Live. يمكنك بدلاً من ذلك إفلات العنصر في مكان دقيق من بنية المستند بالنقر فوق </> واستخدام طريقة العرض Element Quick View.

استعرض الخيارات لتحديد مصدر الصورة أو المحتوى الذي تريد إدراجه.

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

انقر فوق OK. 

لعرض عارض الخصائص لصورة محددة، انقر فوق الصورة وحدد Window > Properties.

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

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

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

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

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

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

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

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

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

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

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

عندما تكون الصورة على صفحة Dreamweaver خارجة عن التزامن مع ملف Photoshop الأصلي، فإن Dreamweaver يكتشف أن الملف الأصلي تم تحديثه. يعرض التطبيق أحد أسهم صور كائن Smart Object باللون الأحمر. عندما تقوم بتحديد صورة الويب في طريقة عرض Design والنقر فوق Update from Original في عارض الخصائص، يتم تحديث الصورة تلقائيًا. تعكس الصورة المحدّثة التغييرات التي قمت بها على ملف Photoshop الأصلي.

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

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

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

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

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

قم بأحد الإجراءات التالية لإدخال اسم أو وصف مختصر للصورة أقل من 50 حرفًا في المربع Alternate Text. عندئذٍ يقرأ برنامج قراءة الشاشة المعلومات التي أدخلتها هنا.  

• قم بتحرير سمات الصورة المناسبة في طريقة العرض Code.

• تحرير سمات الصور في طريقة العرض Live باستخدام Quick Property Inspector.

• قم بتحرير قيمة Alt في عارض الخصائص.

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

• لضبط عرض العنصر، اسحب مقبض التحديد الموجود على الجانب الأيمن.

• لضبط ارتفاع العنصر، اسحب مقبض التحديد السفلي.

• لضبط عرض العنصر وارتفاعه في نفس الوقت، اسحب مقبض التحديد الركني.

• للحفاظ على تناسب العنصر (نسبة العرض إلى الارتفاع) أثناء ضبط أبعاده، اسحب مقبض التحديد الركني مع الضغط على المفتاح Shift.

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

لإرجاع عنصر تم تغيير حجمه إلى أبعاده الأصلية، في عارض الخصائص، احذف القيم الموجودة في الحقلين W وH. يمكنك أيضًا النقر فوق زر Reset Size في عارض الخصائص الخاص بالصورة.

قم بتغيير حجم الصورة كما هو موضح في القسم تغيير حجم صورة.

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

حدد Edit > Image. يمكنك ضبط ميزات تحرير الصور التالية في Dreamweaver:

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

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

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

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

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

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

افتح الصفحة التي تحتوي على الصورة المطلوب اقتصاصها، ثم حدد الصورة وقم بأحد الإجراءات التالية:

• انقر فوق رمز الأداة Crop في عارض خصائص الصور.

• حدد Edit > Image > Crop.

• تظهر مقابض الاقتصاص حول الصورة المحددة.

يظهر مربع حوار يُعلمك بأن ملف الصورة التي تقوم باقتصاصها سوف يتغير على القرص. انقر فوق OK.

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

قم بمعاينة الصورة وتأكد من أنها تلبي توقعاتك. وإلا فحدد Edit > Undo Crop للعودة إلى الصورة الأصلية.

افتح الصفحة التي تحتوي على الصورة التي تريد تحسينها. حدد الصورة وقم بأحد الإجراءات التالية:

• انقر فوق الزر Edit Image Settings الموجود في عارض خصائص الصورة.

• حدد Edit > Image > Optimize.

قم بإجراء التحريرات في مربع الحوار Image Optimization وانقر فوق OK.

• انقر فوق الزر Sharpen الموجود في عارض خصائص الصورة.

• حدد Edit > Image > Sharpen.

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

احفظ التغييرات التي أجريتها بتحديد File > Save أو يمكنك العودة إلى الصورة الأصلية بتحديد Edit > Undo Sharpen.

• انقر فوق الزر Brightness and Contrast الموجود في عارض خصائص الصورة.

• حدد Edit > Image > Brightness/Contrast.

• في لوحة Insert حدد HTML من القائمة المنسدلة. حدد Rollover Image، من قائمة الخيارات.

• حدد Insert > HTML > Rollover Image.

في مربع الحوار Insert Rollover Image حدد الصور وقم بتعيين خصائص التمرير. يمكنك تعيين الخصائص التالية:

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

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

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

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

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

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

لمعاينة صورة التمرير، حدد File > Real-time Preview، أو اضغط F12.

لفتح محرر خارجي، قم بأحد الأمور التالية:

• انقر نقرًا مزدوجًا فوق الصورة التي تريد تحريرها.

• انقر بزر الماوس الأيمن (Windows) أو انقر مع الضغط على الزر Control ‏(Macintosh) فوق الصورة المطلوب تحريرها. ثم انقر فوق Edit With > Browse وحدد محررًا.

• حدد الصورة التي تريد تحريرها، وانقر فوق Edit في عارض الخصائص.

• انقر نقرًا مزدوجًا فوق ملف الصورة في اللوحة Files لبدء تشغيل محرر الصور الرئيسي. إذا لم تحدد أي محرر صور، يقوم Dreamweaver بتشغيل المحرر الافتراضي لنوع الملف.

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

حدد Edit > Preferences ‏(Windows) أو Dreamweaver > Preferences ‏(macOS)، ثم حدد File Types/Editors من القائمة Category في الجزء الأيسر.

في القائمة Extensions، حدد امتداد الملف الذي تريد تعيين محرر خارجي له.

في مربع حوار Select External Editor استعرض للوصول إلى التطبيق المطلوب تشغيله كمحرر لنوع الملفات هذا.

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

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

حدد Edit > Preferences ‏(Windows) أو Dreamweaver > Preferences ‏(macOS)، ثم حدد File Types/Editors من القائمة Category في الجزء الأيسر.

في مربع الحوار File Types/Editors Preferences، انقر فوق الزر Add (+) أعلى القائمة Extensions.

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

حدد ملحق الملف لنوع الملف الذي تريد بدء المحرر له.

لتحديد محرر خارجي لنوع الملف، انقر فوق زر الإضافة (+) في أعلى قائمة Editors.

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

انقر فوق Make Primary إذا أردت أن يكون هذا المحرر هو المحرر الرئيسي لنوع الصورة.

حدد Edit > Preferences ‏(Windows) أو Dreamweaver > Preferences ‏(macOS)، ثم حدد File Types/Editors من القائمة Category في الجزء الأيسر.

في مربع الحوار File Types/Editors preferences بالقائمة Extensions، حدد نوع الملف الذي تقوم بتغييره لعرض المحررات الموجودة.

في القائمة Editors، حدد المحرر الذي تريد تفعيله، ثم قم بأحد الإجراءات التالية:

• لإضافة محرر أو إزالته، انقر فوق زر Add (+) أو Delete (–) أعلى قائمة Editors.

• لتغيير المحرر الذي سيتم بدء تشغيله افتراضيًا لإجراء عمليات التحرير، انقر فوق الزر Make Primary.