دليل المستخدم إلغاء

ميزة Extract في Dreamweaver

بحث

تاريخ آخر تحديث 30 ديسمبر 2021

تعرف على كيفية تحويل ملفات PSD سريعًا إلى تصميمات ويب مستندة إلى HTML للهواتف المحمولة وأجهزة سطح المكتب. قم باستخراج CSS والصور والقياسات والخطوط والألوان والتدرجات اللونية وغير ذلك الكثير من Photoshop مباشرةً إلى Dreamweaver.

ملاحظة:

بدءًا من 1 يوليو 2022، سيتم إيقاف الميزات الموجودة في لوحة Extract في Dreamweaver 21.2 والإصدارات السابقة. يمكنك استخدام Adobe Photoshop لأجل الحصول على معلومات النمط، والأصول من مكونات PSD، وإعادة استخدامها في Dreamweaver.

يتيح تكامل Extract مع Dreamweaver لمصممي ومطوري الويب تطبيق معلومات التصميم واستخراج الأصول المحسنة للويب مباشرة في بيئة كتابة التعليمات البرمجية. يوفر ‏‫Extract حلاً كاملاً قائمًا بذاته لاستخراج معلومات الأنماط والأصول من تركيبات PSD، مما يقلل الحاجة إلى الانتقال ذهابًا وإيابًا بين Photoshop وDreamweaver.

باستخدام ‏‫لوحة Extract في Dreamweaver‬، يمكنك استخراج CSS والصور والخطوط والألوان والتدرجات اللونية، والقياسات إلى صفحة الويب الخاصة بك مباشرة. بالإضافة إلى ميزات Extract الرئيسية هذه، يقدم برنامج Dreamweaver الميزات الفريدة التالية:

يمكنك الوصول مباشرة إلى ملفات PSD على Creative Cloud وملفات PSD المشاركة معك في مجلد تعاوني
تلميحات التعليمات البرمجية السياقية لتحديد الخطوط والألوان والتدرجات اللونية بسهولة في CSS
دعم السحب والإسقاط لإنشاء علامات صور من طبقات PSD
لصق الأنماط مباشرة في طريقة العرض Live (على سبيل المثال، CSS Designer وElement Display)

‏‫بدء استخدام Extract‎

استخراج CSS‏‎

تعيين تفضيلات Extract

نسخ النص

استخراج الصور

استخراج الخطوط والألوان والتدرجات اللونية

استخراج القياسات

‏‫بدء استخدام Extract‎

يتيح لك Extract في Dreamweaver الوصول إلى ملفات PSD الخاصة بك مباشرة من داخل ‏‫لوحة Extract في Dreamweaver‬. اقرأ الموضوعات التالية لمعرفة المزيد عن لوحة Extract ومساحة العمل، وعن تحميل ملفات PSD الخاصة بك في لوحة Extract:

لوحة Extract ومساحة العمل

تم تصميم مساحة العمل Extract لمساعدتك في استخدام Extract مع Dreamweaver بشكل فعال. في مساحة العمل هذه، تظهر لوحة Extract على اليسار وتظهر صفحتك على الويب على اليمين في عرض مقسم (طريقتا العرض Live وCode). يمكنك تخصيص مساحة العمل بسحب اللوحات أو تثبيتها أو طيها أو توسيعها لتناسب احتياجاتك. يمكنك أيضًا حفظ مساحة العمل المخصصة للاستخدام في المستقبل.

ملاحظة:

إذا أغلقت لوحة Extract دون قصد، فاستخدم اختصار لوحة المفاتيح: Ctrl + K ‏(Win)؛‏ Cmd + K ‏(Mac) أو حدد ‎Window > Extract‎‎ لفتح اللوحة مرةً أخرى.

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

بعد استخدام التدريب، يمكنك النقر فوق Get Started لبدء استخدام Extract في Dreamweaver. تُظهر لوحة Extract عرضًا مصغرًا للمجلدات وملفات PSD الموجودة في حسابك على Creative Cloud. هذه الملفات هي إما التي يتم رفعها أو مزامنتها من الكمبيوتر المكتبي الخاص بك أو تلك التي تتم مشاركتها معك عبر مجلد تعاوني على Creative Cloud.

تُظهر لوحة Extract ملفات PSD المحفوظة في Creative Cloud

ملاحظة:

لإعادة تشغيل التدريب، انقر فوق القائمة المنبثقة الموجودة في الزاوية العلوية اليمنى من اللوحة وحدد Launch Tutorial.

تحميل ملفات PSD إلى Creative Cloud

لتحميل ملف PSD إلى Creative Cloud، اختر Window > Extract ثم انقر فوق Upload PSD. إذا كانت تركيبات PSD مطورة بواسطة شخص آخر أو فريقٍ آخر، يمكنك مشاركتها على Creative Cloud. يمكنك بعد ذلك تنزيل الملفات، وتحميلها إلى حسابك إما مباشرةً بتسجيل الدخول في Creative Cloud أو من خلال لوحة Extract في Dreamweaver.

ملاحظة:

إذا كنت تستخدم Dreamweaver 21.2 أو إصدارات أحدث على جهاز macOS، فقم بتمكين نوع ملف PSD من نافذة Finder وقم بتحميل الملف الخاص بك.

بالنسبة لنظام التشغيل macOS

اتبع الخطوات التالية لتمكين ملف PSD وتحميله:

انقر فوق Upload PSD في لوحة Extract.
في نافذة Finder، انقر فوق Options وحدد *.psd من القائمة المنسدلة التي تظهر.
حدد ملف PSD ثم انقر فوق Open لتحميل الملف.

فتح ملفات PSD في لوحة Extract

انقر فوق الصورة المصغرة لملف PSD المطلوب في لوحة Extract. إذا أصبحت النسخة المحدثة من ملف PSD متاحة على Creative Cloud بعد فتحها، فأعد تحميل ملف PSD في لوحة Extract. للقيام بذلك، انقر فوق اسم ملف PSD أو انقر فوق Reload PSD في القائمة المنبثقة في أعلى اليمين. للعودة إلى العرض المصغر وتحديد ملف مختلف، انقر فوق أيقونة Creative Cloud في الزاوية العلوية اليسرى من اللوحة.

لتكبير العرض وإلقاء نظرة أكثر قربًا على التصميم، قم بتغيير مستوى التكبير/التصغير أعلى لوحة Extract أو استخدم Alt +/-. استخدم علامة التبويب Layers أو القائمة المنسدلة Layer Comp لعرض العناصر الموجودة في ملف PSD أو إخفائها.

أنت الآن مستعد تمامًا لتحويل تركيبة PSD إلى موقع ويب.

تعيين تفضيلات Extract

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

حدد ‎Edit >Preferences‎ ‏(Win)‏ أو ‎Dreamweaver > Preferences‎ ‏(Mac).
حدد Extract في القائمة Category.
(اختياري) قم بتغيير التنسيق الافتراضي الذي يجب استخراج الصور به.

تنسيق الصورة المستخرجة
(اختياري) في القسم Extract For Devices، حدد الدقة المطلوبة. سيتم استخدام هذه الإعدادات عند اختيار حفظ الصورة في إصدارات دقة وضوح متعددة.
- لحفظ الإصدارات مع الملحقات، انقر فوق الصف المطابق ضمن العمود Suffix واكتب النص.
- لحفظ عدة إصدارات من الدقة في مجلدات إخراج منفصلة، انقر فوق الصف المطابق ضمن العمود Folder وحدد المسار النسبي.
Extract للأجهزة
(اختياري) انقر فوق Clear Cache لحذف البيانات المخزنة مؤقتًا المرتبطة باستخدام Extract.
انقر فوق Apply، ثم أغلق مربع الحوار Preferences.
لرؤية التغييرات في لوحة Extract، أعد تحميل ملف PSD (القائمة المنبثقة > PSD).

خيار Reload PSD في لوحة Extract

استخراج CSS من ملفات PSD

يمكنك نسخ كل خصائص CSS الخاصة بالعناصر أو عدد محدد منها في تركيبة PSD ولصق الأنماط مباشرةً في CSS Designer، أو Element Display في Live View، أو في تعليماتك البرمجية (مصدر CSS أو مستند HTML).

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

في لوحة Extract‏ ‎‏(‎Window > Extract‎‎)، انقر فوق ملف PSD المطلوب. يتم توسيع العرض المصغر لملف PSD، مما يتيح لك عرض التركيبة بوضوح.
في ملف PSD، انقر فوق العنصر أو الأصل المطلوب. تظهر قائمة منبثقة تحتوي على خصائص CSS للعنصر وتقدم لك خيار تحديدها ونسخها. يمكنك عرض العرض والارتفاع للعنصر المحدد بالبكسل أو بالنسبة المئوية.

ملاحظة: إذا قمت باختيار النسبة المئوية، فسوف يتم عرض القياسات أيضًا بالنسبة المئوية.

خيار Copy CSS في لوحة Extract

لنسخ CSS، حدد الخصائص التي تريد نسخها، ثم انقر فوق Copy CSS.
الصق خصائص CSS في المستند باستخدام إحدى الطرق التالية:
- للصق خصائص CSS في CSS Designer، انقر بزر الماوس الأيمن فوق المحدد المطلوب، وانقر فوق Paste Styles.
- للصق خصائص CSS باستخدام Element Display، انقر بزر الماوس الأيمن فوق محدد، وانقر فوق Paste Styles.
- للصق خصائص CSS في التعليمة البرمجية، ضع نقطة الإدراج في الموقع المطلوب، وانقر بزر الماوس الأيمن، ثم انقر فوق Paste.

لاستخدام تلميحات التعليمات البرمجية لاستخراج CSS، قم بإجراء الخطوات التالية:

افتح مصدر CSS الملحق بمستندك أو انتقل إلى طريقة العرض Code الخاصة بمستند HTML.
في لوحة Extract، انقر فوق ملف PSD المطلوب، ثم فوق العنصر المطلوب في التركيبة.
في المستند الخاص بك، ضع نقطة الإدراج في الموقع المطلوب في التعليمة البرمجية.
ابدأ كتابة اسم خاصية CSS لرؤية تلميحات التعليمات البرمجية المحتوية على خصائص CSS للعنصر المحدد في تركيبة PSD. انقر فوق خاصية CSS المطلوبة لإدراجها في التعليمة البرمجية.

تلميحات التعليمات البرمجية مع خاصية CSS لعنصر في ملف PSD
لاستخراج عدة خصائص CSS، حدد الخصائص المطلوبة في النافذة المنبثقة للوحة Extract. ثم انقر فوق Insert Selected في تلميحات التعليمات البرمجية.

إدراج خصائص CSS المجمّعة

نسخ نص من ملفات PSD

يمكن إدراج النصوص أو المحتويات في تركيبات PSD في صفحة الويب بنقرة واحدة. لنسخ نص من تركيبة PSD في لوحة Extract، حدد عنصر نص وانقر فوق Copy Text. يتم نسخ النص إلى الحافظة الخاصة بك. يمكنك عندئذ لصق النص حيثما يكون مطلوبًا.

ملاحظة:

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

استخراج الصور من ملفات PSD

يمكنك ببساطة سحب أي طبقة في تركيبات PSD من لوحة Extract إلى موقع دقيق في طريقة العرض Live لصفحة الويب الخاصة بك. تساعد المساعدات البصرية في طريقة العرض Live مثل أيقونة Live Guides وDOM في سحب العناصر ووضعها. عند التوقف لفترة من الوقت قبل إسقاط العنصر، تظهر أيقونة DOM (</>). يتم عرض بنية DOM عند تمرير الماوس فوق أيقونة </> ويمكنك إسقاط العنصر داخل البنية. إذا كنت تفضل التعليمات البرمجية، يمكنك استخدام التلميحات السياقية للتعليمات البرمجية واستخراج الصور. تتيح لك تلميحات التعليمات البرمجية استخراج الألوان والتدرجات اللونية كصور.

ملاحظة:

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

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

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

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

في اللوحة Extract، انقر فوق ملف PSD الذي تريد تنزيل الصور منه.
انقر فوق الصورة المطلوبة في ملف PSD.

ملاحظة:

استخدم علامة التبويب Layers والقائمة المنسدلة Layer Comps في اللوحة Extract لعرض الصور الموجودة في تركيبة PSD أو إخفائها. إذا كانت الصورة تتكون من طبقات متعددة، يمكنك تحديد طبقة فردية من الصورة لاستخراجها.

لاحظ أن القائمة المنبثقة للتلميحات البرمجية في طريقة العرض Code على الجانب الأيمن من مساحة العمل.
لاستيراد صور متعددة، اضغط باستمرار على مفتاح Shift أو Command، وانقر فوق الصور المطلوبة. يتم استخراج الصور المحددة كصورة واحدة.
قم بأحد الإجراءات التالية:
- في القائمة المنبثقة التي تظهر عند النقر فوق الصورة، انقر فوق . حدد المسار واسم الملف وتنسيق الملف وعامل التصغير/التكبير (إذا كان مطلوبًا). ثم، قم بأحد الإجراءات التالية:
  
  انقر فوق حفظ لحفظ الصورة بدقة 1 x. لتغيير حجم الصورة، قم بتحديد Scale At وحدد عامل التصغير/الكبير.
  
  انقر فوق Save Multiple لحفظ العديد من إصدارات دقة وضوح الصورة. لا يتعين بالضرورة أن يحتوي ملف PSD على هذه الإصدارات؛ حيث أنه يمكن لبرنامج Dreamweaver حفظ الصورة بعدة إصدارات دقة أثناء الاستخراج.
يمكنك تحديد إصدارات الدقة المطلوبة ومجلد الإخراج المناظر في Preferences.
استخراج صورة باستخدام أيقونة Extract Asset
- اسحب الصورة في طريقة العرض Live لمستندك. تظهر الأدلة النشطة في طريقة العرض Live لتساعدك في وضع الصورة.
عند إسقاط الصورة، يعرض Dreamweaver اسم الصورة. لا يمكنك فقط تحرير اسم الصورة، لكن يمكنك أيضًا تحرير الملحق والضغط فوق Enter لحفظ الصورة. يتم حفظ الصورة في المجلد الجذر للموقع بصورة افتراضية. لحفظ الصورة في موقع مخصص، أدخل المسار مع اسم الملف.
خيار تحرير اسم الملف والملحق عند سحب صورة من لوحة Extract
- عند النقر فوق الصورة، تتم تعبئة تلميحات برمجية سياقية في Dreamweaver. في طريقة العرض Code لمستند HTML أو في مستند CSS، ضع المؤشر في نقطة الإدراج. بعد كتابة اسم خاصية صورة الخلفية أو علامة <img>، يظهر اسم الصورة المحددة في التلميحات البرمجية. حدد الصورة وقم بتعديل الاسم والملحق إذا كان ضروريًا، واضغط فوق Enter.
بشكل افتراضي، يتم حفظ الصورة في المجلد الجذر للموقع. لحفظ الصورة في موقع مخصص، أدخل مسار الملف المخصص مع اسم الملف.
استخراج صور باستخدام تلميحات التعليمات البرمجية

استخراج القياسات من ملفات PSD

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

في ملف PSD في لوحة Extract، انقر فوق العناصر المطلوبة بالضغط مع الاستمرار على المفتاح Shift أو Command.

تعرض لوحة Extract المسافة الأفقية والرأسية بين العنصرين.

القياسات في لوحة Extract

ملاحظة:

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

خطوط Extract والألوان والتدرجات اللونية من ملفات PSD

باستخدام اللوحة Extract، يمكنك استخراج خصائص CSS للخطوط أو الألوان أو التدرجات اللونية المستخدمة في تركيبة PSD.

في اللوحة Extract انقر فوق Styles.
لاستخراج الخطوط، قم بالإجراءات التالية في القسم Fonts.
1. قم بتوسيع نوع الخط المطلوب.
  
  لمعرفة المزيد عن الخط، انقر فوق أيقونة Adobe Fonts ().
2. انقر فوق التنسيق والحجم اللذين تريد نسخهما، وفي القائمة المنبثقة التي تظهر، انقر فوق Copy CSS. استخلص علامات عناصر النص التي تستخدم خيارات الخط والتنسيق والحجم التي نقرت فوقها.
  
  ملاحظة:
  
  يمكنك تغيير وحدة الخط إلى "em" أو rem" في تفضيلات Extract ‏‏(Extract < ‏Preferences). انقر فوق Reload PSD في القائمة المنبثقة في الزاوية العلوي اليمنى من لوحة Extract لرؤية التغييرات.
  
  استخراج الخطوط
3. الصق CSS حيثما يكون ذلك مطلوبًا، على سبيل المثال في التعليمة البرمجية أو في CSS Designer.
لاستخراج الألوان، قم بالإجراءات التالية في القسم Colors:
1. انقر فوق عينة اللون المطلوبة. استخلص علامات العناصر التي تستخدم اللون المحدد.
  
  ملاحظة: يمكنك أيضًا انتقاء أي لون آخر من تركيبة PSD باستخدام أداة color picker.
2. في القائمة المنبثقة التي تظهر عند النقر فوق عينة اللون، حدد نموذج اللون المطلوب (RGB، أو Hex، أو HSL)، ثم انسخ (Ctrl+c; Cmd+c) قيمة اللون.
  
  استخراج الألوان
3. الصق قيمة اللون حيثما يكون ذلك مطلوبًا، على سبيل المثال في التعليمة البرمجية أو في CSS Designer.
لاستخراج التدرجات اللونية، انقر فوق عينة التدريج اللوني في القسم Gradients. في القائمة المنبثقة التي تظهر، انقر فوق Copy CSS. الصق CSS حيثما يكون ذلك مطلوبًا، على سبيل المثال في التعليمات البرمجية أو في CSS Designer.

يتم أيضًا لصق بادئات المورد المحددة في التفضيلات (‎Preferences > CSS Styles‎) جنبًا إلى جنب مع التدرجات اللونية. إذا قمت باستخراج تدرج لوني قطري، يتم إدخال CSS المقابل بدون بادئة المورد حيث إن التدرجات اللونية القطرية غير مدعومة.

استخراج التدرجات اللونية