في Dreamweaver (طريقة عرض التصميم أو الكود)، ضع نقطة الإدراج على الصفحة حيث تريد إدراج الصورة.
تاريخ آخر تحديث
27 أبريل 2021
تعرف على كيفية تكامل Photoshop مع Dreamweaver. قم بالعمل باستخدام Smart Objects في عمليات سير عمل Photoshop - Dreamweaver.
حول تكامل Photoshop
ملاحظة
تم إيقاف سير عمل تكامل Photoshop في Dreamweaver 21.0 والإصدارات الأحدث.
يمكنك إدراج ملفات صور Photoshop (بتنسيق PSD) في صفحات الويب في Dreamweaver والسماح لـ Dreamweaver بتحسينها كصور جاهزة للويب (بتنسيقات GIF وJPEG وPNG). عندما تقوم بذلك، يدرج Dreamweaver الصورة كـ Smart Object ويحافظ على اتصال مباشر بملف PSD الأصلي.
يمكنك أيضاً لصق كل أو جزء من صورة Photoshop متعددة الطبقات أو متعددة الشرائح في صفحة ويب في Dreamweaver. ومع ذلك، عند النسخ واللصق من Photoshop، لا يتم الاحتفاظ بأي اتصال مباشر بالملف الأصلي. لتحديث الصورة، قم بإجراء التغييرات في Photoshop، وانسخ والصق مرة أخرى.
ملاحظة
إذا كنت تستخدم ميزة التكامل هذه بكثرة، فقد ترغب في تخزين ملفات Photoshop في موقع Dreamweaver لسهولة الوصول إليها. إذا قمت بذلك، فتأكد من إخفائها لتجنب تعرض الأصول الأصلية، بالإضافة إلى عمليات النقل غير الضرورية بين الموقع المحلي والخادم البعيد.
للحصول على تدريب حول تكامل Dreamweaver مع Photoshop، راجع تكامل Dreamweaver مع Photoshop.
حول عمليات سير عمل Smart Objects وPhotoshop-Dreamweaver
يوجد سير عملان رئيسيان للعمل مع ملفات Photoshop في Dreamweaver: سير عمل النسخ واللصق، وسير عمل Smart Objects.
سير عمل نسخ/لصق
يتيح لك سير عمل النسخ/اللصق تحديد الشرائح أو الطبقات في ملف Photoshop، ثم استخدام Dreamweaver لإدراجها كصور جاهزة للويب. ومع ذلك، إذا كنت تريد تحديث المحتوى لاحقاً، فيجب عليك فتح ملف Photoshop الأصلي، وإجراء التغييرات، ونسخ الشريحة أو الطبقة إلى الحافظة مرة أخرى، ثم لصق الشريحة أو الطبقة المحدثة في Dreamweaver. يُنصح بسير العمل هذا فقط عندما تريد إدراج جزء من ملف Photoshop (على سبيل المثال، قسم من مخطط التصميم) كصورة في صفحة ويب.
سير عمل الكائنات الذكية
عند العمل مع ملفات Photoshop كاملة، توصي Adobe بسير عمل Smart Objects. Smart Object في Dreamweaver هو أصل صورة موضوع على صفحة ويب له اتصال مباشر بملف Photoshop (PSD) الأصلي. في عرض التصميم في Dreamweaver، يُشار إلى Smart Object برمز في الزاوية العلوية اليسرى للصورة.
عندما تكون صورة الويب (أي الصورة الموجودة على صفحة Dreamweaver) غير متزامنة مع ملف Photoshop الأصلي، يكتشف Dreamweaver أن الملف الأصلي قد تم تحديثه، ويعرض أحد أسهم رمز Smart Object باللون الأحمر. عند تحديد صورة الويب في عرض التصميم والنقر على زر التحديث من الأصل في مفتش الخصائص، تتحدّث الصورة تلقائياً، مما يعكس أي تغييرات قمت بها على ملف Photoshop الأصلي.
عند استخدام سير عمل Smart Objects، لا تحتاج إلى فتح Photoshop لتحديث صورة الويب. بالإضافة إلى ذلك، أي تحديثات تقوم بها على Smart Object في Dreamweaver غير مدمرة. أي أنه يمكنك تغيير إصدار الويب من الصورة على صفحتك مع الاحتفاظ بصورة Photoshop الأصلية سليمة.
يمكنك أيضاً تحديث Smart Object دون تحديد صورة الويب في عرض التصميم. تتيح لك لوحة الأصول تحديث جميع Smart Objects، بما في ذلك الصور التي قد لا تكون قابلة للتحديد في نافذة المستند (على سبيل المثال، صور خلفية CSS).
إعدادات تحسين الصورة
لكل من سير عمل copy/paste واSmart Objects يمكنك تعيين إعدادات تحسين في مربع الحوار Image Optimization. يتيح لك مربع الحوار هذا تحدد تنسيق الملف وجودة الصورة. إذا كنت تنسخ شريحة أو طبقة، أو تقوم بإدراج ملف Photoshop ككائن ذكي لأول مرة، يعرض Dreamweaver مربع الحوار هذا بحيث يمكنك إنشاء صورة الويب بسهولة.
إذا قمت بنسخ ولصق تحديث على شريحة أو طبقة معينة، يتذكر Dreamweaver الإعدادات الأصلية ويعيد إنشاء صورة الويب باستخدام تلك الإعدادات. بالمثل، عندما تقوم بتحديث كائن ذكي باستخدام مفتش الخاصية، يستخدم Dreamweaver نفس الإعدادات التي استخدمتها عندما قمت بإدراج الصورة أول مرة. يمكنك تغيير إعدادات الصورة في أي وقت بتحديد صورة الويب في عرض التصميم، ثم النقر فوق الزر Edit Image Settings في عارض الخصائص.
تخزين ملفات Photoshop
إذا قمت بإدراج صورة ويب، ولم تقوم بتخزين ملف Photoshop الأصلي في موقع Dreamweaver الخاص بك، يقوم Dreamweaver بالتعرف على المسار إلى الملف الأصلي على هيئة مسار ملف محلي مطلق. (هذا صحيح لكل من سير عمل النسخ/اللصق والكائن الذكي.) على سبيل المثال، إذا كان المسار في موقعك هو C:\Sites\mySite، وملف Photoshop الخاص بك مخزن في C:\Images\Photoshop، سيتعرف Dreamweaver على الأصل الأصلي كجزء من الموقع المسمى mySite. سيؤدي ذلك لمشاكل إذا كنت تريد أن تشارك ملف Photoshop مع أعضاء آخرين في الفريق لأن Dreamweaver سيتعرف فقط على الملف المتاح على قرص صلب محلي معين.
إذا قمت بتخزين ملف Photoshop في موقعك، على أي حال سيكون Dreamweaver مسار متعلق بالموقع إلى الملف. أي مستخدم لديه إمكانية وصول إلى الموقع سيتمكن أيضاً من بدء المسار الصحيح إلى الملف، مع افتراض أنك قمت أيضاً بتوفير الملف الأصلي لهم ليقوموا بتنزيله.
للحصول على تدريب بالفيديو حول تحرير roundtrip باستخدام Photoshop، راجع تحرير Roundtrip باستخدام Photoshop.
إنشاء كائن ذكي
عندما تدرج صورة Photoshop (ملف PSD) في صفحتك، ينشئ Dreamweaver Smart Object. Smart Object هو صورة جاهزة للويب تحافظ على اتصال مباشر بصورة Photoshop الأصلية. كلما تحدث الصورة الأصلية في Photoshop، يمنحك Dreamweaver خيار تحديث الصورة في Dreamweaver بنقرة زر واحدة.
حدد Insert > Image.
ملاحظة
يمكنك أيضًا سحب ملف PSD إلى الصفحة من لوحة الملفات إذا كنت تحفظ ملفات Photoshop في موقعك.إذا قمت بذلك، فإنك ستتخطى إلى الخطوة التالية.
حدد ملف صورة Photoshop PSD في مربع الحوار Select Image Source بالنقر فوق الزر Browse والانتقال إليه.
في مربع الحوار Image Optimization الذي يظهر، قم بتعديل إعدادات التحسين على النحو المطلوب وانقر فوق OK.
احفظ ملف الصورة الجاهز للويب في مكان داخل المجلد الجذر لموقعك.
ينشئ Dreamweaver الكائن الذكي استنادًا إلى إعدادات التحسين المحددة ويضع إصدارًا جاهزًا للويب من الصورة على صفحتك.يحافظ الكائن الذكي على اتصال مباشر مع الصورة الأصلية ويتيح لك معرفة متى يصبحان غير متطابقين.
ملاحظة
عند تقرير تغيير إعدادات التحسين للصورة المجلوبة في الصفحات لاحقًا، يمكنك تحدي الصورة والنقر فوق الزر Edit Image Settings في عارض الخصائص وإجراء التغييرات في مربع الحوار Image Optimization. يتم تطبيق التغييرات التي أجريت في مربع الحوار Image Optimization على نحو لا يتلف الصورة. لا يعدل Dreamweaver مطلقًا ملف Photoshop الأصلي ويقوم دائمًا بإعادة إنشاء صورة الويب بناءً على البيانات الأصلية.
للحصول على تدريب بالفيديو حول تحرير roundtrip باستخدام Photoshop، راجع تحرير Roundtrip باستخدام Photoshop.
تحديث كائن ذكي
إذا غيرت ملف Photoshop الذي يرتبط به الكائن الذكي، فسيخطرك Dreamweaver أن الصورة الجاهزة للويب غير متطابقة مع الأصل.في Dreamweaver، يُشار إلى الكائنات الذكية برمز في الزاوية العلوية اليسرى من الصورة.عندما تكون الصورة الجاهزة للويب في Dreamweaver متطابقة مع ملف Photoshop الأصلي، فإن كلا السهمين في الرمز يكونان أخضرين.عندما تكون الصورة الجاهزة للويب غير متطابقة مع ملف Photoshop الأصلي، يتحول أحد أسهم الأيقونة إلى اللون الأحمر.
لتحديث Smart Object بالمحتويات الحالية لملف Photoshop الأصلي، حدد Smart Object في نافذة المستند ثم انقر فوق الزر Update from Original بعارض الخصائص.
ملاحظة
لا تحتاج إلى تثبيت Photoshop لإجراء التحديث من Dreamweaver.
تحديث كائنات ذكية متعددة
يمكنك تحديث عدة كائنات ذكية في آن واحد باستخدام لوحة الأصول.تتيح لك لوحة الأصول أيضًا رؤية الكائنات الذكية التي قد لا تكون قابلة للتحديد في نافذة المستند (على سبيل المثال، صور خلفية CSS).
في لوحة الملفات، انقر فوق علامة تبويب الأصول لعرض أصول الموقع.
تأكد من تحديد عرض Images. إن لم يكن كذلك، انقر فوق الزر Images.
حدد كل أصل صورة في لوحة Assets. عندما تحدد كائنًا ذكيًا، سترى رمز الكائن الذكي في الزاوية العلوية اليسرى من الصورة.لا تحتوي الصور العادية على هذا الرمز.
لكل كائن ذكي تريد تحديثه، انقر بزر الماوس الأيمن فوق اسم الملف وحدد التحديث من الأصل.يمكنك أيضًا الضغط مع الاستمرار على Control والنقر لتحديد أسماء ملفات متعددة وتحديثها جميعًا في آن واحد.
ملاحظة
لا تحتاج إلى تثبيت Photoshop لإجراء التحديث من Dreamweaver.
تغيير حجم كائن ذكي
يمكنك تغيير حجم كائن ذكي في نافذة المستند تمامًا كما تفعل مع أي صورة أخرى.
حدد الكائن الذكي في نافذة المستند واسحب مقابض تغيير الحجم لتغيير حجم الصورة.يمكنك المحافظة على نسب العرض والارتفاع بالضغط باستمرار على مفتاح Shift أثناء السحب.
انقر فوق الزر Update from Original بعارض الخصائص.
عندما تحدّث الكائن الذكي، تعيد صورة الويب عرضها بطريقة غير مدمرة بالحجم الجديد، استناداً إلى المحتويات الحالية للملف الأصلي وإعدادات التحسين الأصلية.
تعديل ملف Photoshop الأصلي للكائن الذكي
بعد إنشاء كائن ذكي على صفحة Dreamweaver، يمكنك تعديل ملف PSD الأصلي في Photoshop.بعد إجراء التغييرات في Photoshop، يمكنك بعد ذلك تحديث صورة الويب في Dreamweaver بسهولة.
ملاحظة
تأكد من تعيين Photoshop كمحرر الصور الخارجي الأساسي لديك.
حدد الكائن الذكي في نافذة المستند.
انقر فوق الزر Edit في عارض الخصائص.
قم بإجراء التغييرات التي تريدها في Photoshop واحفظ ملف PSD الجديد.
في Dreamweaver، حدد Smart Object مرة أخرى وانقر فوق الزر Update from Original.
ملاحظة
إذا قمت بتغيير حجم الصورة لديك في Photoshop، فلا بد من إعادة تعيين حجم صورة الويب في Dreamweaver. يقوم Dreamweaver بتحديث الكائن الذكي بناءً فقط على محتويات ملف Photoshop الأصلي، وليس بناءً على حجمه. لمزامنة حجم صفحة ويب بحجم ملف Photoshop الأصلي، انقر بزر الماوس الأيمن فوق الصورة وحدد Reset Size To Original.
حالات الكائن الذكي
يسرد الجدول التالي الحالات المختلفة للكائنات الذكية.
|
حالة الكائن الذكي |
الوصف |
الإجراء الموصى به |
|
الصور متزامنة |
تكون صورة الويب في حالة مزامنة مع المحتويات الحالية لملف Photoshop الأصلي. سمتا العرض والارتفاع في تعليمات HTML البرمجية تطابقان أبعاد صورة الويب. |
لا شيء |
|
الأصل الأصلي معدل |
تم تعديل ملف Photoshop الأصلي بعد إنشاء صورة الويب في Dreamweaver. |
استخدم الزر Update From Original الموجود في عارض الخصائص لمزامنة الصورتين. |
|
يكون بعدا صورة الويب مختلفين عن العرض والارتفاع المحددين في HTML. |
تكون سمتا العرض والارتفاع في تعليمات HTML البرمجية مختلفتين عن بعدي العرض والارتفاع في صورة الويب التي أنشأها Dreamweaver عند الإدراج. إذا كان بعدا صورة الويب أصغر من قيمتي العرض والارتفاع المحددتين في HTML، فمن الممكن أن يظهر تقطيع في صورة الويب. |
استخدم الزر Update from Original في Property inspector لإعادة إنشاء صفحة الويب من ملف Photoshop الأصلي. يستخدم Dreamweaver بعدي العرض والارتفاع المحددين حاليًا في HTML عندما يقوم بإعادة إنشاء الصورة. |
|
بعدا الأصل الأصلي صغيرين جدًا بالنسبة لبعدي العرض والارتفاع المحددين في HTML |
تكون سمتا العرض والارتفاع في تعليمات HTML البرمجية أكبر من بعدي العرض والارتفاع لملف Photoshop الأصلي. من الممكن أن يظهر تقطيع في صورة الويب. |
لا تقم بإنشاء صور الويب باستخدام أبعاد أكبر من أبعاد ملف Photoshop الأصلي. |
|
الأصل الأصلي غير موجود |
تعذر على Dreamweaver إيجاد ملف Photoshop الأصلي المحدد في مربع النص Original من Property inspector. |
قم بتصحيح مسار الملف في مربع النص Original من Property inspector أو انقل ملف Photoshop إلى الموقع المحدد حاليًا. |
نسخ ولصق تحديد من Photoshop
يمكنك نسخ كل أو جزء من صورة Photoshop ولصق التحديد في صفحة Dreamweaver الخاصة بك كصورة جاهزة للويب.يمكنك نسخ طبقة واحدة أو مجموعة من الطبقات لمنطقة محددة من الصورة أو يمكنك نسخ شريحة من الصورة. عند القيام بذلك، مع ذلك، لا ينشئ Dreamweaver كائناً ذكياً.
ملاحظة
مع أن التحديث من الوظيفة الأصلية غير متوفر للصورة التي يتم لصقها، يمكنك فتح ملف Photoshop الأصلي وتحريره بتحديد الصورة التي تم لصقها والنقر فوق الزر Edit في عارض الخصائص.
في Photoshop، قم بأحد الإجراءات التالية:
- انسخ طبقة فردية بكاملها أو جزء منها باستخدام الأداة Marquee لتحديد الجزء المطلوب نسخه ثم اختر Edit > Copy. يؤدي هذا إلى نسخ الطبقة النشطة فقط من المساحة المحددة في الحافظة. إذا كان لديك تأثيرات معتمدة على الطبقات، فإنه لا يتم نسخها.
- انسخ طبقات متعددة وادمجها باستخدام الأداة Marquee لتحديد الجزء المطلوب نسخه ثم اختر Edit > Copy Merged. يؤدي هذا إلى تسوية جميع طبقات المساحة المحددة النشطة والسفلى ونسخها في الحافظة. إذا كان لديك تأثيرات معتمدة على الطبقات مقترنة بأي من هذه الطبقات، فإنه يتم نسخها.
- انسخ إحدى الشرائح باستخدام الأداة Slice لتحديد الجزء المطلوب نسخه ثم اختر Edit > Copy. يؤدي هذا إلى تسوية جميع طبقات الشريحة النشطة والسفلى ونسخها في الحافظة.
ملاحظة
يمكنك اختيار Select > All لتحديد صورة بكاملها سريعًا لنسخها.
في Dreamweaver (عرض التصميم أو الكود)، ضع نقطة الإدراج
في صفحتك حيث تريد إدراج الصورة.
حدد Edit > Paste.
في مربع الحوار Image Optimization، قم بتعديل إعدادات التحسين على النحو المطلوب وانقر فوق OK.
احفظ ملف الصورة الجاهزة للويب في موقع ضمن
مجلد الجذر لموقعك.
يحدد Dreamweaver الصورة وفقًا لإعدادات التحسين ويجلب إصدارًا منها جاهز للاستخدام على الويب في صفحتك. يتم حفظ معلومات حول الصورة، مثل موقع ملف PSD المصدر الأصلي، في Design Note بغض النظر عما إذا كنت قد قمت بتمكين سمة Design Notes لموقعك أم لا. تسمح Design Note لك بالعودة لتحرير ملف Photoshop الأصلي من Dreamweaver.
تحرير الصور الملصوقة
بعد لصق صور Photoshop في صفحات Dreamweaver الخاصة بك، يمكنك تعديل ملف PSD الأصلي في Photoshop. عند استخدام سير عمل النسخ/اللصق، توصي Adobe بأن تقوم دائماً بإجراء التعديلات على ملف PSD الأصلي (بدلاً من الصورة الجاهزة للويب نفسها)، ثم إعادة اللصق للحفاظ على المصدر الواحد.
ملاحظة
تأكد من أن لديك Photoshop مُعيّن كمحرر الصور الخارجي الأساسي لنوع الملف الذي تريد تعديله.
في Dreamweaver، حدد
صورة جاهزة للويب تم إنشاؤها أصلاً في Photoshop وقم
بأحد الإجراءات التالية:
- انقر فوق الزر Edit في عارض خصائص الصورة.
- اضغط على Control (Windows) أو Command (Macintosh) بينما تنقر نقراً مزدوجاً على الملف.
- انقر بالزر الأيمن (Windows) أو انقر مع الضغط على Control (Macintosh) على صورة، واختر Edit Original With من القائمة السياقية، ثم اختر Photoshop.
ملاحظة
هذا يفترض أن Photoshop مُعيّن كمحرر الصور الخارجي الأساسي لملفات صور PSD. قد تريد أيضاً تعيين Photoshop كالمحرر الافتراضي لأنواع ملفات JPEG وGIF وPNG.
قم بتحرير الملف في Photoshop.
ارجع إلى Dreamweaver والصق الصورة المحدثة أو التحديد في صفحتك.
عند الرغبة في إعادة تحسين الصورة في أي وقت، يمكنك تحديد الصورة والنقر فوق الزر Edit Image Settings في عارض الخصائص.
تعيين خيارات مربع الحوار Image Optimization
عند إنشاء Smart Object أو لصق تحديدًا من Photoshop، يعرض Dreamweaver مربع الحوار Image Optimization . (كما يعرض Dreamweaver مربع الحوار هذا لأي من أنواع الصور عند تحديد الصورة والنقر فوق الزر Edit Image Settings في عارض الخصائص.) يسمح لك مربع الحوار هذا بتحديد إعدادات الصور الجاهزة للويب ومعاينتها باستخدام المصفوفة الصحيحة من اللون والضغط والجودة.
الصورة الجاهزة للويب هي تلك الصورة التي يمكن لجميع مستعرضات الويب الحديثة عرضها وتبدو بشكل مماثل بغض النظر عن النظام أو المستعرض الذي يستخدمه المشاهد. بصفة عامة، تؤدي النتائج إلى حدوث مقايضة بين الجودة وحجم الملف.
ملاحظة
تؤثر الإعدادات التي تحددها أي ما كانت فقط على الصورة المستوردة من ملف الصورة. ويظل ملف Photoshop PSD أو Fireworks PNG الأصلي سليمًا دائمًا.
الإعداد المسبق
اختر إعدادًا مسبقًا يناسب متطلباتك بأفضل شكل. يتغير حجم ملف الصورة بحسب الإعداد المسبق الذي تختاره. يتم عرض معاينة فورية للصورة مع الإعداد المطبق في الخلفية.
على سبيل المثال، بالنسبة إلى الصور إلي يتم عرضها بدرجة وضوح عالية، اختر PNG24 for Photos (Sharp Details).حدد GIF For Background Images (Patterns) إذا كنت تدرج نمطاً سيعمل كخلفية للصفحة.
عند تحديد إعدادًا مسبقًا، يتم عرض خيارات الإعداد المسبق القابلة للتكوين. إذا كنت تريد تخصيص إعدادات التحسين أكثر، عدّل القيم لهذه الخيارات.
قم بإنشاء مواقع ويب جميلة في Dreamweaver
قم بتصميم مواقع الويب الديناميكية وبرمجتها وإدارتها في أداة قوية متكاملة.
