في مستند Dreamweaver، ضع نقطة الإدراج حيث تريد ظهور الصورة، ثم قم بأحد الإجراءات التالية:
تاريخ آخر تحديث
25 أبريل 2024
استخدام Fireworks وDreamweaver لسير العمل السلس لتحرير رسومات الويب وتحسينها ووضعها في صفحات HTML.
ملاحظة
الميزة غير مدعومة في إصدارات Adobe Dreamweaver .
إدراج صورة Fireworks
يتعرف Dreamweaver وFireworks على العديد من الإجراءات المماثلة لتحرير الملفات، ويشتركا فيها، مثل إجراء تغييرات للارتباطات ومخططات الصور وشرائج الجدول، والمزيد. معًا، يوفر التطبيقان سير عمل انسيابي لإجراءات تحرير ملفات رسوم الويب وتحسينها ووضعها في صفحات HTML.
يمكنك وضع رسوم مصدرة من Fireworks مباشرة في مستند Dreamweaver باستخدام الأمر Insert Image، أو يمكنك إنشاء رسوم Fireworks جديدة من عنصر نائب للصور في Dreamweaver.
حدد Insert > Image.
في الفئة Category من لوحة Insert، انقر فوق الزر Image أو اسحبه إلى المستند.
انتقل إلى الملف المطلوب المصدر من Fireworks، وانقر فوق OK (Windows) أو Open (Macintosh).
ملاحظة
إذا لم يكن ملف Fireworks موجودًا في موقع Dreamweaver الحالي، فستظهر رسالة تطلب تحديد ما إذا كنت تريد نسخ الملف إلى المجلد الجذر أم لا. انقر فوق Yes.
تحرير صورة Fireworks أو جدول من Dreamweaver
عندما تفتح صورة وتحررها أو تفتح شريحة صورة تعد جزءًا من جدول Fireworks، يقوم Dreamweaver ببدء تشغيل Fireworks الذي يقوم بدوره بفتح ملف PNG الذي تم تصدير الصورة أو الجدول منه.
ملاحظة
يفترض هذا الإجراء أنه تم تعيين Fireworks بمثابة محرر الصور الخارجي الأساسي لملفات PNG. يتم تعيين Fireworks غالبًا أيضًا بمثابة المحرر الافتراضي لملفات JPEG وGIF، على الرغم من أنه يمكنك تعيين Photoshop بمثابة المحرر الافتراضي لهذه الأنواع من الملفات.
عندما تكون الصورة جزءًا من جدول Fireworks، يمكنك فتح جدول Fireworks بالكامل للتعديل، طالما أن التعليق <!--fw table--> موجود في كود HTML.إذا تم تصدير ملف PNG المصدر من Fireworks إلى موقع Dreamweaver باستخدام إعداد Style HTML And Images الخاص بـ Dreamweaver، فإنه يتم تلقائيًا إدراج تعليق جدول Fireworks في تعليمات HTML البرمجية.
في Dreamweaver، افتح Property inspector (Window > Properties) إذا لم يكن مفتوحًا بالفعل.
انقر فوق الصورة أو شريحة الصورة لتحديدها.
عندما تحدد صورة تم تصديرها من Fireworks، فإن عارض الخصائص يتعرف على التحديد بمثابة صورة أو جدول Fireworks ويعرض اسم ملف PNG المصدر.
لبدء تشغيل Fireworks لإجراء التحرير، قم بأحد الإجراءات التالية:
في عارض الخصائص، انقر فوق Edit.
اضغط باستمرار على Control (Windows) أو Command (Macintosh) وانقر نقرًا مزدوجًا فوق الصورة المحددة.
انقر بزر الماوس الأيمن (Windows) أو اضغط على Control -انقر بزر الماوس (Macintosh) على الصورة المحددة وحدد Edit With Fireworks من قائمة السياق.
ملاحظة
إذا لم يستطع Fireworks تحديد موقع ملف المصدر، فستتم مطالبتك بتحديد موقع ملف PNG المصدر. عندما تعمل مع ملف Fireworks المصدر، فإنه يتم حفظ التغييرات إلى كلٍ من الملف المصدر والملف الذي تم تصديره، وإلا فإنه يتم تحديث الملف الذي تم تصديره فقط.
في Fireworks، قم بتحرير ملف PNG المصدر وانقر فوق Done.
يقوم Fireworks بحفظ التغييرات إلى ملف PNG، وتصدير الصورة التي تم تحديثها (أو HTML والصور) ويعيد التركيز إلى Dreamweaver. في Dreamweaver، تظهر الصورة التي تم تحديثها أو الجدول الذي تم تحديثه.
للحصول على تدريب حول تكامل Dreamweaver وFireworks، راجع www.adobe.com/go/vid0188_ae.
تحسين صورة Fireworks من Dreamweaver
يمكنك استخدام Dreamweaver لإجراء تغييرات سريعة على صور وحركات Fireworks. من داخل Dreamweaver، يمكنك تغيير إعدادات التحسين وإعدادات الحركات وحجم ومساحة الصورة التي تم تصديرها.
في Dreamweaver، حدد الصورة المطلوبة وقم بأحد الإجراءات التالية:
حدد Command > Optimize Image
انقر فوق الزر Edit Image Settings في عارض الخصائص.
قم بإجراء عمليات التحرير في مربع الحوار Image Preview:
لتحرير إعدادات التحسين، انقر فوق علامة التبويب Options.
لتحرير حجم ومساحة الصورة التي تم تصديرها، انقر فوق علامة التبويب File.
عندما تنتهي، انقر فوق OK.
استخدام Fireworks لتعديل العناصر النائبة للصور في Dreamweaver
يمكنك إنشاء صورة عنصر نائب في مستند Dreamweaver ثم بدء تشغيل Fireworks لتصميم صورة رسوم أو جدول Fireworks ليحل محلها.
لإنشاء صورة جديدة من عنصر نائب للصورة، يجب أن يكون كل من Dreamweaver وFireworks مثبتين على نظامك.
تأكد من أنك قمت بالفعل بتعيين Fireworks بمثابة محرر صور لملفات PNG.
في نافذة Document، انقر فوق العنصر النائب للصورة لتحديده.
ابدء تشغيل Fireworks باستخدام وضع Editing From Dreamweaver من خلال القيام بأي مما يلي:
في عارض الخصائص، انقر فوق Create.
اضغط على Control (Windows) أو Command (Macintosh) ثم انقر نقرًا مزدوجًا فوق العنصر النائب للصورة.
انقر بزر الماوس الأيمن (Windows) أو اضغط على Control - انقر بزر الماوس (Macintosh) فوق العنصر النائب للصورة، ثم حدد Create Image In Fireworks.
استخدم خيارات Fireworks لتصميم الصورة.
يتعرف Fireworks على الإعدادات التالية للعنصر النائب للصورة والتي ربما تكون قد قمت بتعيينها أثناء العمل معه في Dreamweaver: حجم الصورة (المرتبط بحجم اللوحة القماشية في Fireworks) ومعرف الصورة (الذي يستخدمه Fireworks بمثابة اسم المستند الافتراضي لملف المصدر وملف التصدير الذي تقوم بإنشائه) ومحاذاة النص. يتعرف Fireworks أيضًا على ارتباطات وسلوكيات خاصة (مثل مبادلة الصورة والقائمة المنبثقة وتعيين النص) قمت بإرفاقها إلى العنصر النائب للصورة أثناء العمل في Dreamweaver.
ملاحظة
على الرغم من أن Fireworks لا يظهر الارتباطات التي قمت بإضافتها إلى العنصر النائب للصورة، فإنه يتم الاحتفاظ بها. إذا قمت برسم بقعة نشطة وإضافة ارتباط في Fireworks، فإنه لن يحذف الارتباط الذي قمت بإضافته إلى العنصر النائب للصورة في Dreamweaver، لكن، إذا قمت بقص شريحة في Fireworks في الصورة الجديدة، فإن Fireworks سيحذف الارتباط في مستند Dreamweaver عندما تستبدل العنصر النائب للصورة.
لا يتعرف Fireworks على الإعدادات التالية للعنصر النائب للصورة: محاذاة الصورة واللون ومساحة Vspace ومساحة Hspace والتخطيطات. فهذه الإعدادات تكون معطلة في عارض الخصائص الخاصة بالعنصر النائب للصورة.
عندما تنتهي من العمل، انقر فوق Done لعرض المطالبة بالحفظ.
في مربع النص Save In، حدد المجلد الذي قمت بتعريفه على أنه مجلد الموقع المحلي في Dreamweaver.
إذا قمت بتسمية العنصر النائب للصورة عندما قمت بإدراجه في مستند Dreamweaver، فإن Fireworks يقوم بتعبئة مربع File Name بهذا الاسم. يمكنك تغيير الاسم.
انقر فوق Save لحفظ ملف PNG.
يظهر مربع الحوار Export. استخدم مربع الحوار هذا لتصدير الصورة باسم ملف GIF أو JPEG، أو في حالة الصور ذات الشرائح، باسم HTML وصور.
بالنسبة إلى مربع النص Save In، حدد مجلد الموقع المحلي في Dreamweaver.
يعرض مربع Name تلقائيًا الاسم الذي استخدمته لملف PNG. يمكنك تغيير الاسم.
For Save AsType، حدد نوع الملف أو الملفات التي تريد تصديرها، على سبيل المثال Images Only أو HTML And Images.
انقر فوق Save لحفظ الملف الذي تم تصديره.
يتم حفظ الملف ويعود التركيز إلى Dreamweaver. في مستند Dreamweaver، يحل الملف الذي تم تصديره أو جدول Fireworks محل العنصر النائب للصورة.
مقدمة إلى القوائم المنبثقة في Fireworks
يسمح لك Fireworks بإنشاء قوائم منبثقة معتمدة على CSS بسرعة وسهولة.
بالإضافة إلى كونها موسعة وسرعة تنزيلها، فإن القوائم المنبثقة التي تقوم بإنشائها باستخدام Fireworks توفر لك الميزات التالية:
يمكن لمحرك البحث فهرسة عناصر القائمة.
يمكن لقراء الشاشة قراءة عناصر القائمة، مما يضفي مزيدًا من إمكانية الوصول إلى صفحاتك.
تتوافق التعليمات البرمجية التي يتم إنشاؤها باستخدام Fireworks مع المعايير ويمكن التحقق من صحتها.
يمكنك تحرير قوائم Fireworks المنبثقة باستخدام Dreamweaver أو باستخدام Fireworks، ولكن ليس باستخدام كلاهما. لا يقوم Fireworks بالاحتفاظ بالتغييرات التي يتم القيام بها في Dreamweaver.
تحرير قوائم Fireworks المنبثقة في Dreamweaver
يمكنك إنشاء قائمة منبثقة في Fireworks 8 أو الإصدار الأحدث منه ثم تحريرها باستخدام Dreamweaver أو باستخدام Fireworks (باستخدام تحرير roundtrip)، ولكن ليس باستخدام كلاهما. إذا قمت بتحرير قوائمك في Dreamweaver ثم قمت بتحريرها في Fireworks، فإنك ستفقد جميع عمليات التحرير السابقة فيما عدا تلك الخاصة بمحتوى النص.
إذا كنت تفضل تحرير قوائمك باستخدام Dreamweaver، فإنه يمكنك استخدام Fireworks لإنشاء القائمة المنبثقة ثم استخدام Dreamweaver على وجه الحصر لتحرير القائمة وتخصيصها.
وإذا كنت تفضل تحرير القوائم في Fireworks، فإنه يمكنك استخدام ميزة تحرير roundtrip في Dreamweaver، ولكن يجب ألا تحرر القوائم مباشرة في Dreamweaver.
في Dreamweaver، حدد جدول Fireworks الذي يحتوي على القائمة المنبثقة، ثم انقر فوق Edit في عارض الخصائص.
يتم فتح ملف PNG المصدر في Fireworks.
في Fireworks، قم بتحرير القائمة باستخدام Pop-Up Menu Editor ثم انقر فوق Done من على شريط أدوات Fireworks.
يرسل Fireworks القائمة المنبثقة التي تم تحريرها مرةً أخرى إلى Dreamweaver.
إذا قمت بإنشاء قائمة منبثقة في Fireworks MX 2004 أو إصدار أقدم منه، فإنه يمكنك تحريرها في Dreamweaver باستخدام مربع الحوار Show Pop-Up Menu، المتوفر من لوحة Behaviors.
تحرير قائمة منبثقة تم إنشاؤها في Fireworks MX 2004 أو إصدار أقدم منه
في Dreamweaver، حدد البقعة النشطة أو الصورة التي تشغل القائمة المنبثقة.
في لوحة Behaviors (Shift+F3)، انقر نقرًا مزدوجًا فوق Show Pop-Up Menu في قائمة Actions.
قم بإجراء التغييرات التي تريدها في مربع الحوار Pop-Up Menu ثم انقر فوق OK.
تحديد تفضيلات التشغيل والتحرير لملفات المصدر في Fireworks
عند استخدام Fireworks لتحرير الصور، يقوم Fireworks بشكل عادي بتصدير الصور الموجودة في صفحات الويب لديك من ملف PNG المصدر. عند فتح ملف صورة في Dreamweaver لتحريره، فإن Fireworks يفتح تلقائيًا ملف PNG المصدر، مع مطالبتك بتحديد موقع ملف PNG إذا لم يكن موجودًا. إذا كنت تفضل ذلك، يمكنك تعيين التفضيلات في Fireworks بحيث تجعل Dreamweaver يفتح الصورة المدرجة، أو يمكنك ضبط Fireworks بحيث يوفر لك خيار استخدام ملف الصورة المدرجة أو ملف المصدر من Fireworks في كل مرة تفتح فيها صورة في Dreamweaver.
ملاحظة
يتعرف Dreamweaver على تفضيلات التشغيل والتحرير الخاصة بـ Fireworks فقط في حالات معينة. بشكل محدد، يجب أن تفتح صورة ليست جزءًا من جدول Fireworks وتحتوي على مسار Design Notes صحيح إلى ملف PNG المصدر، وتقوم بتحسينها.
في Fireworks، حدد Edit > Preferences (في نظام التشغيل Windows) أو Fireworks > Preferences (في نظام التشغيل Macintosh) ثم انقر فوق علامة التبويب Lanuch And Edit (في نظام التشغيل Windows) أو حدد Launch And Edit من القائمة المنبثقة (في نظام التشغيل Macintosh).
حدد خيارات التفضيل التي ستستخدمها عند تحرير أو تحسين صور Fireworks المضمنة في تطبيق خارجي:
Always Use Source PNG
يفتح تلقائيًا ملف Fireworks PNG غير المحدد في Design Notes بمثابة مصدر الصورة المضمنة. يتم إجراء التحديثات إلى ملف PNG المصدر والصورة المضمنة المقابلة له.
Never Use Source PNG
يفتح تلقائيًا صورة Fireworks المضمنة، سواءً أكان ملف PNG المصدر موجودًا أم لا. يتم إجراء التحديثات إلى الصورة المضمنة فقط.
Ask When Launching
يعرض رسالة تسألك عما إذا كنت تريد فتح ملف PNG المصدر أم لا. يمكنك أيضًا تحديد تفضيلات تشغيل وتحرير عمومية من خلال هذه الرسالة.
إدراج التعليمات البرمجية Fireworks HTML في مستند Dreamweaver
من Fireworks، يمكنك استخدام الأمر Export لتصدير الصور المحسنة وملفات HTML إلى مكانٍ ما في مجلد موقع Dreamweaver، وحفظها. يمكنك بعد ذلك إدراج الملف في Dreamweaver. يسمح لك Dreamweaver بإدراج التعليمات البرمجية HTML التي تم إنشاؤها باستخدام Fireworks، بشكل كامل مع الصور والشرائح وتعليمات وبرامج JavaScript المقترنة، في مستند.
في مستند Dreamweaver، ضع نقطة الإدراج حيثما تريد إدراج تعليمات Fireworks HTML البرمجية.
قم بأحد الإجراءات التالية:
حدد Insert > Image Objects > Fireworks HTML.
في فئة Common من لوحة Insert، انقر فوق زر Images واختر Insert Fireworks HTML من القائمة المنبثقة.
انقر فوق Browse لتحديد ملف Fireworks HTML.
إذا لم تكن تنوي استخدام الملف في المستقبل، حدد Delete File After Insertion. لا يوجد لتحديد هذا الخيار أي تأثير على ملف PNG المصدر المقترن بملف HTML.
ملاحظة
إذا كان ملف HTML موجودًا على محرك أقراص الشبكة، فإنه يتم حذفه دائمًا - ولا يتم نقله إلى Recycle Bin أو سلة المحذوفات.
انقر فوق OK لإدراج تعليمات HTML البرمجية، مع صورها وشرائحها وبرامج JavaScript المقترنة بها، في مستند Dreamweaver.
لصق تعليمات Fireworks HTML البرمجية في Dreamweaver
توجد طريقة سهلة لتضمين الصور والجداول، التي تم إنشاؤها في Fireworks، في Dreamweaver وهي نسخ تعليمات Fireworks HTML ولصقها مباشرة في مستند Dreamweaver.
نسخ ولصق تعليمات Fireworks HTML البرمجية في Dreamweaver
في Fireworks، حدد Edit > Copy HTML Code.
اتبع المعالج أثناء تقديمه إعدادات تصدير تعليمات HTML والصور الخاصة بك. عند مطالبتك، حدد مجلد موقع Dreamweaver ليكون المجلد الوجهة للصور التي تم تصديرها.
يصدر المعالج الصور إلى الوجهة المحددة وينسخ تعليمات HtML البرمجية في الحافظة.
في مستند Dreamweaver، حدد نقطة الإدراج حيث تريد لصق تعليمات HTML البرمجية وحدد Edit > Paste Fireworks HTML.
يتم نسخ جميع تعليمات HTML وJavaScript المقترنة مع ملفات Fireworks التي قمت بتصديرها في مستند Dreamweaver ويتم تحديث جميع الارتباطات إلى الصور.
تصدير ولصق تعليمات Fireworks HTML البرمجية في Dreamweaver
في Fireworks، حدد File > Export.
حدد مجلد موقع Dreamweaver ليكون وجهة الصور التي قمت بتصديرها.
في قائمة Export المبثقة، حدد HTML And Images.
في قائمة HTML المنبثقة، حدد Copy To Clipboard ثم انقر فوق Export.
في مستند Dreamweaver، ضع نقطة الإدراج حيث تريد لصق تعليمات HTML البرمجية التي تم تصديرها وحدد Edit > Paste Fireworks HTML.
يتم نسخ جميع تعليمات HTML وJavaScript المقترنة مع ملفات Fireworks التي قمت بتصديرها في مستند Dreamweaver ويتم تحديث جميع الارتباطات إلى الصور.
تحديث تعليمات Fireworks HTML البرمجية المضمنة في Dreamweaver
في Fireworks، يعد أمر File > Update HTML أمرًا بديلاً لتقنية التشغيل والتحرير الخاصة بتحديث ملفات Fireworks المضمنة في Dreamweaver. مع أمر Update HTML، يمكنك تحرير صورة PNG المصدر في Fireworks ثم تحديث أي تعليمات HTML برمجية وملفات الصور المضمنة في مستند Dreamweaver تلقائيًا. يسمح لك هذا الأمر بتحديث ملفات Dreamweaver حتى عند عدم تشغيل Dreamweaver.
في Fireworks، افتح ملف PNG المصدر وقم بإجراء عمليات التحرير التي تريدها.
حدد File > Save.
في Fireworks، حدد File > Update HTML.
انتقل إلى ملف Dreamweaver المحتوي على HTML الذي تريد تحديثه، وانقر فوق Open.
انتقل إلى مجلد الوجهة الذي تريد تضمين ملفات الصور التي تم تحديثها فيه، وانقر فوق Select (Windows) أو Choose (Macintosh).
يقوم Fireworks بتحديث تعليمات HTML وJavaScript البرمجية في مستند Dreamweaver. كما يقوم Fireworks أيضًا بتصدير الصور التي تم تحديثها المقترنة بـ HTML وتضمينها في مجلد الوجهة المحدد.
إذا تعذر على Fireworks إيجاد تعليمات HTML البرمجية المطابقة لتحديثها، فإنه يوفر لك خيار إدراج تعليمات HTML البرمجية الجديدة في مستند Dreamweaver. يقوم Fireworks بتضمين قسم JavaScript من التعليمات البرمجية الجديدة في بداية المستند وتضمين جدول أو ارتباط HTML إلى الصورة في نهايته.
إنشاء ألبوم صور فوتوغرافية على الويب
تم تجاوز ميزة Create Web Photo Album من Dreamweaver CS5.
قم بإنشاء مواقع ويب جميلة في Dreamweaver
قم بتصميم مواقع الويب الديناميكية وبرمجتها وإدارتها في أداة قوية متكاملة.
