ملاحظة:

لإنشاء معارض ويب باستخدام Photoshop CS5، راجع إنشاء معرض صور ويب في تعليمات Adobe Bridge. لاستخدام الأداة الإضافية القديمة الاختيارية Web Photo Gallery التي يرد وصفها في الموضوعات أدناه، قم أولاً بتنزيلها وتثبيتها لنظام التشغيل Windows أو Mac OS.

حول معارض صور ويب

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

الصفحة الرئيسية لمعرض صور الويب في Photoshop
الصفحة الرئيسية لمعرض صور الويب

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

يتميز كل قالب لأنماط المعرض بخيارات مختلفة. إذا كنت تستخدم نمطًا سابق الإعداد، فقد تكون بعض الخيارات خافتة، أو غير متوفرة في ذلك النمط المعين.

إنشاء معارض ويب باستخدام Adobe Bridge

يوفر Adobe Bridge ميزات معارض ويب المحدّثة. للحصول على إرشادات، راجع إنشاء معرض صور ويب في تعليمات Adobe Bridge، أو قم بعرض المقاطع التعليمية أدناه.

استخدام أداة Photoshop الإضافية الاختيارية القديمة

  1. قم بتنزيل الأداة الإضافية Web Photo Gallery القديمة وتثبيتها لنظام التشغيل Windows أو Mac OS.

  2. (اختياري) حدد الملفات أو المجلد الذي تريد استخدامه في Adobe Bridge.

    سيتم عرض صورك بالترتيب الذي تم عرضها به في Bridge. إذا كنت تفضل استخدام ترتيب مختلف، فغيّر الترتيب في Bridge.

  3. قم بأحد الأمور التالية:

    • في Adobe Bridge، اختر Tools >‏ Photoshop >‏ Web Photo Gallery.

    • في Photoshop، اختر File >‏ Automate >‏ Web Photo Gallery.

  4. اختر نمطًا للمعرض من قائمة Styles المنبثقة. تظهر معاينة للصفحة الرئيسية للنمط المختار في الشاشة.

  5. (اختياري) أدخل عنوان بريد إلكتروني كمعلومات اتصال خاصة بالمعرض.

  6. اختر ملفات المصدر لمعرضك من قائمة Use.

    Selected Images From Bridge

    يستخدم الصور التي حددتها قبل فتح شاشة Web Photo Gallery.

    Folder

    يستخدم الصور من مجلدات تحددها باستخدام الزر Browse (في Windows) أو Choose (في Mac OS). حدد Include All Subfolders لتضمين الصور في أي مجلدات فرعية للمجلد المحدد.

  7. انقر فوق Destination، ثم حدد مجلدًا لتخزين الصور وصفحات HTML للمعرض. ثم انقر فوق OK (في Windows) أو Choose (في Mac OS).

  8. حدد خيارات التنسيق لمعرض الويب. اختر من قائمة Options لعرض كل مجموعة من الخيارات. راجع خيارات معرض صور الويب.

  9. انقر فوق OK. يدرج Photoshop ملفات HTML وJPEG التالية في مجلد الوجهة:

    • صفحة رئيسية لمعرضك تسمى index.htm أو index.html، تبعًا لخيارات Extension. افتح هذا الملف في أي متصفح ويب لمعاينة معرضك.

    • صور JPEG داخل مجلد الصور الفرعي.

    • صفحات HTML داخل مجلد الصفحات الفرعي.

    • صور مصغرات JPEG داخل مجلد المصغرات الفرعي.

التأكد من تطابق الألوان

إذا كنت تعمل مع الصور في مساحة عمل بنطاق لوني واسع مثل ProPhoto RGB أو Adobe RGB، فقد تتغير ألوان الصور عند عرضها في معرض ويب بواسطة متصفح لا يقرأ ملفات تعريف اللون المضمّنة. إذا حدث ذلك، فحاول تحويل ملفات تعريف الصور إلى sRGB (والتي تستخدمها معظم المتصفحات كافتراضي) قبل تحسينها أو تضمينها في معرض صور الويب. يمكنك تحويلها إلى sRGB باستخدام إحدى الطرق التالية. يُعد استخدام نسخة من الصور فكرة جيدة.

عند استخدام Image Processor، يمكنك حفظ الملفات مباشرة بتنسيق JPEG بالحجم الذي تريده. إذا قمت بذلك، فتأكد من إيقاف تشغيل Resize Images في خيارات Large Image.

General

خيارات لملحقات أسماء الملفات والترميز والبيانات الأولية.

Extension

يستخدم html. أو htm. كملحق اسم الملف.

Use UTF 8 Encoding For URL

يستخدم تشفير UTF‑8.

Add Width And Height Attributes For Images

يحدد الأبعاد، ويختصر وقت التنزيل.

Preserve All Metadata

يحافظ على معلومات البيانات الأولية.

Banner

خيارات النص لإعلان البانر الذي يظهر على كل صفحة في المعرض. أدخل نصًا لكل مما يلي:

Site Name

اسم المعرض.

Photographer

اسم الشخص أو المؤسسة التي تتلقى التصديق للصور الموجودة في المعرض.

Contact Info

معلومات الاتصال الخاصة بالمعرض، مثل رقم الهاتف أو عنوان العمل.

Date

التاريخ الذي يظهر على كل صفحة من المعرض. بشكل افتراضي، يستخدم Photoshop التاريخ الحالي.

Font and Font Size

(متوفر لبعض أنماط الموقع) خيارات لنص إعلان البانر.

Large Images

خيارات للصور الرئيسية التي تظهر على كل صفحة في المعرض.

Add numeric links

(متوفر لبعض أنماط الموقع) يضع تسلسلاً رقميًا (يبدأ بـ 1، وينتهي بالعدد الإجمالي لعدد الصفحات في المعرض) يُعرض أفقيًا في أعلى كل صفحة في المعرض. يشكّل كل رقم رابطًا إلى الصفحة المعنية.

Resize Images

يغير حجم الصور المصدر لإدراجها في صفحات المعرض. اختر حجمًا من القائمة المنسدلة أو أدخل الحجم بوحدات البكسل. في Constrain، اختر أبعاد الصورة التي تريد تقييدها أثناء تغيير الحجم. لخيار JPEG Quality، حدد خيارًا من القائمة المنبثقة، قم بإدخال قيمة بين 0 و12، أو اسحب المنزلق. كلما زادت القيمة، كانت جودة الصورة أفضل وحجم الملف أكبر.

ملاحظة:

يستخدم Photoshop طريقة إقحام الصورة الافتراضية المعينة في التفضيلات. اختر Bicubic Sharper كافتراضي للحصول على أفضل النتائج عند تغيير حجم الصورة.

Border Size

يحدد العرض، بوحدات البكسل، للحدود حول الصورة.

Titles Use

(متوفر لبعض أنماط الموقع) يحدد خيارات لعرض تعليقات تحت كل صورة. حدد Filename لعرض اسم الملف، أو حدد Description وCredits وTitle وCopyright لعرض نص وصفي مستقى من شاشة File Info.

Font and Font Size

(متوفر لبعض أنماط الموقع) يحدد حجم التعليق وخطه.

Thumbnails

خيارات لصفحة المعرض الرئيسية، بما في ذلك حجم صور المصغرات.

Size

يحدد حجم المصغر. اختر من القائمة أو قم بإدخال قيمة بوحدات البكسل لعرض كل مصغر.

Columns and Rows

حدد عدد الأعمدة والصفوف التي تعرض بها المصغرات على الصفحة الرئيسية. لا ينطبق هذا الخيار على المعارض التي تستخدم Horizontal Frame Style أو Vertical Frame Style.

Border Size

يحدد العرض، بوحدات البكسل، للحدود حول كل مصغر.

Titles Use

(متوفر لبعض أنماط الموقع) يحدد خيارات لعرض تعليقات تحت كل مصغر. حدد Filename لعرض اسم الملف، أو حدد Description وCredits وTitle وCopyright لعرض نص وصفي مستقى من شاشة File Info.

Font and Font Size

(متوفر لبعض أنماط الموقع) يحدد حجم التعليق وخطه.

Custom Colors

خيارات لألوان العناصر في المعرض. لتغيير لون عنصر، انقر فوق مربعه اللوني، ثم حدد لونًا جديدًا من Adobe Color Picker. يمكنك تغيير لون الخلفية لكل صفحة (خيار Background ) وإعلان بانر (خيار Banner).

Security

يعرض نصًا فوق كل صورة كمانع للسرقة.

Content

يحدد النص الذي يجب عرضه. حدد Custom Text لإدخال النص المخصص. حد Filename أو Description أو Credits أو Title أو Copyright لعرض النص المستقى من شاشة File Info.

Font, Color, and Position

حدد خط التعليق ولونه ومحاذاته.

Rotate

إدراج النص على الصورة بزاوية.

ملاحظة:

لإنشاء معارض ويب باستخدام Photoshop CS5، راجع إنشاء معرض صور ويب في تعليمات Adobe Bridge. لاستخدام الأداة الإضافية القديمة الاختيارية Web Photo Gallery يرد وصفها أدناه، قم أولاً بتنزيلها وتثبيتها لنظام التشغيل Windows أو Mac OS.

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

يتم تخزين أنماط معرض صور الويب التي يوفرها Photoshop في مجلدات فردية في المواقع التالية:

Windows

Program Files/Adobe/Adobe Photoshop CS5/Presets/Web Photo Gallery.

Mac OS

Adobe Photoshop CS5/Presets/Web Photo Gallery.

يظهر اسم كل مجلد في هذا الموقع كخيار في قائمة Styles في شاشة Web Photo Gallery. يحتوي كل مجلد على ملفات قوالب HTML التالية، التي يستخدمها Photoshop لإنشاء المعرض:

Caption.htm

يحدد تخطيط التعليق الذي يظهر تحت كل مصغر على الصفحة الرئيسية.

FrameSet.htm

يحدد تخطيط مجموعة الإطارات لعرض الصفحات.

IndexPage.htm

يحدد تخطيط الصفحة الرئيسية.

SubPage.htm

يحدد تخطيط صفحات المعرض ذات الصور كاملة الحجم.

Thumbnail.htm يحدد تخطيط المصغرات التي تظهر على الصفحة الرئيسية.

يحتوي كل ملف قالب على شفرة HTML وعلامات مميزة. العلامة المميزة عبارة عن سلسلة نصية يتم استبدالها من قبل Photoshop عندما تقوم بتعيين خيارها المطابق في شاشة Web Photo Gallery. على سبيل المثال، قد يحتوي ملف قالب على عنصر TITLE الذي يستخدم علامة مميزة كنص مضمّن:

<TITLE>%TITLE%</TITLE>

عندما يقوم Photoshop بإنشاء المعرض باستخدام ملف القالب هذا، فإنه يستبدل العلامة المميزة %TITLE% بالنص الذي أدخلته في مربع Site Name في شاشة Web Photo Gallery.

لفهم أفضل لنمط موجود، يمكنك فتح ودراسة ملفات قالب HTML الخاص به باستخدام محرر HTML. لأن حروف ASCII القياسية فقط هي المطلوبة لإنشاء وثائق HTML، يمكنك فتح تلك الوثائق وتحريرها وإنشاؤها باستخدام محرر نص عادي مثل Notepad (في Windows) أو TextEdit (في Mac OS).

يمكنك تخصيص نمط معرض صور ويب موجود بتحرير ملف قالب HTML أو أكثر. عند تخصيص نمط ما، يجب اتباع هذه الإرشادات لتمكين Photoshop من إنشاء المعرض بشكل صحيح:

  • يجب أن يحتوي مجلد النمط على هذه الملفات: Caption.htm وIndexPage.htm وSubPage.htm وThumbnail.htm وFrameSet.htm.

  • يمكنك إعادة تسمية مجلد النمط لكن ليس ملفات قالب HTML في المجلد.

  • يمكن أن يكون لديك ملف Caption.htm فارغ، وأن تدرج شفرة HTML والعلامات المميزة التي تحدد تخطيط التعليق في ملف Thumbnail.htm.

  • يمكنك استبدال علامة مميزة في ملف قالب بالنص المناسب أو شفرة HTML المناسبة، بحيث يتم تعيين خيار عبر ملف القالب بدلاً من تعيينه عبر شاشة Web Photo Gallery. على سبيل المثال، قد يحتوي ملف قالب على عنصر BODY بسمة لون الخلفية التالية التي تستخدم علامة مميزة كقيمة لها:

    bgcolor=%BGCOLOR%

    لتعيين لون خلفية الصفحة إلى الأحمر، يمكنك استبدال العلامة المميزة %BGCOLOR% بـ “FF0000”.

  • يمكنك إضافة شفرة HTML وعلامات مميزة إلى ملفات القالب. يجب أن تكون كل العلامات المميزة بالحروف الكبيرة، وتبدأ وتنتهي بالرمز (%).

  1. حدد مكان المجلد الذي يخزن أنماط معرض صور الويب الموجودة.
  2. قم بأحد الأمور التالية:
    • لتخصيص نمط، أنشئ نسخة من مجلد النمط، وخزّنها في الموقع نفسه الذي توجد فيه مجلدات النمط الموجودة.

    • لإنشاء نمط جديد، أنشئ مجلدًا جديدًا للنمط الجديد، وخزّنها في الموقع نفسه الذي توجد فيه مجلدات النمط الموجودة.

    يظهر النمط الجديد أو المخصص (يحمل اسم مجلده) في قائمة Styles في شاشة Web Photo Gallery.

  3. باستخدام محرر HTML، قم بتنفيذ أحد الإجراءات التالية:
    • خصص ملف قالب HTML.

    • أنشئ ملفات قالب HTML الضرورية وخزّنها في مجلد النمط.

    عند إنشاء ملفات القالب، تأكد من أنك تتبع إرشادات التخصيص المحددة في حول تخصيص أنماط معرض صور الويب.

    ملاحظة:

    عند تخصيص قالب لنمط المعرض أو إنشائه، يجب إدراج كل علامة من العلامات المميزة التالية على سطر منفصل في ملف HTML‏: %CURRENTINDEX% و%NEXTIMAGE% و%NEXTINDEX% و%PAGE% و%PREVIMAGE% و%PREVINDEX%. عند إنشاء صفحات معرض معينة، يتجاوز Photoshop أسطر القالب التي تحتوي على العلامات المميزة التي لا تنطبق على هذه الصور. على سبيل المثال، عندما يقوم Photoshop بإنشاء أول صفحة من المعرض، فإنه يتجاوز أي سطر في القالب يحتوي على العلامة المميزة %PREVIMAGE%، والتي تحدد الرابط إلى صفحة المعرض السابقة. عند الإبقاء على العلامة المميزة %PREVIMAGE% على سطر منفصل، فإنك تضمن عدم تجاهل Photoshop العلامات المميزة الأخرى في القالب.

يستخدم Photoshop العلامات المميزة في ملفات قالب HTML لتعريف نمط معرض صور الويب الافتراضي. ويستخدم Photoshop هذه العلامات المميزة لإنشاء معرض بالاستناد إلى إدخال المستخدم في شاشة Web Photo Gallery.

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

يمكنك استخدام العلامات المميزة التالية في ملفات قالب HTML:

%ALINK%

لتحديد لون الروابط النشطة.

%ALT%

لتحديد اسم ملف الصورة.

%ANCHOR%

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

%BANNERCOLOR%

لتحديد لون إعلان البانر.

%BANNERFONT%

لتحديد خط نص إعلان البانر.

%BANNERFONTSIZE%

لتحديد حجم خط نص إعلان البانر.

%BGCOLOR%

لتحديد لون الخلفية.

%CAPTIONFONT%

لتحديد خط التعليق الذي يظهر تحت كل مصغر على الصفحة الرئيسية.

%CAPTIONFONTSIZE%

لتحديد حجم خط التعليق.

%CAPTIONTITLE%

لإدخال عنوان الوثيقة للتعليق من معلومات الملف.

%CHARSET%

لتحديد مجموعة الأحرف المستخدمة على كل صفحة.

%CONTACTINFO%

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

%CONTENT_GENRATOR%

للتوسع إلى “Adobe Photoshop CS5 Web Photo Gallery.”

%COPYRIGHT%

لإدخال معلومات حقوق النسخ لتعليق من معلومات الملف.

%CREDITS%

لإدخال التصديق لتعليق من معلومات الملف.

%CURRENTINDEX%

لتحديد الرابط للصفحة الرئيسية الحالية.

%CURRENTINDEXANCHOR%

تبقى هذه العلامة في SubPage.htm وتشير إلى صفحة الفهرس الأولى.

%DATE%

لتحديد التاريخ الظاهر على إعلان البانر.

%EMAIL%

لتحديد معلومات الاتصال بواسطة عنوان البريد الإلكتروني الخاص بالمعرض.

%FILEINFO%

لتحديد معلومات ملف الصورة للتعليق.

%FILENAME%

لتحديد اسم ملف الصورة. استخدم هذه العلامة للبيانات الأولية التي تظهر كنص HTML.

%FILENAME_URL%

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

%FIRSTPAGE%

لتحديد الرابط لصفحة المعرض الأولى التي تظهر في الإطار الأيمن من مجموعة الإطارات.

%FRAMEINDEX%

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

%HEADER%

لتحديد عنوان المعرض.

%IMAGEBORDER%

لتحديد حجم الحدود للصور الكاملة الحجم على صفحة المعرض.

%IMAGE_HEIGHT%

لتمكين خانة الاختيار Add Width And Height Attributes For Images. يتيح ذلك للمستخدم تنزيل السمات، واختصار وقت التنزيل.

%IMAGE_HEIGHT_NUMBER%

يتم استبدال هذه العلامة المميزة برقم (فقط) يمثل عرض الصورة.

%IMAGEPAGE%

لتحديد الرابط لصفحة المعرض.

%IMAGE_SIZE%

إذا كان مربع Resize Images محددًا، فستحتوي هذه العلامة المميزة على قيمة بكسل الصورة المستخدمة في لوحة Large Images. إذا لم يكن هذا المربع محددًا، فستحتوي هذه العلامة المميزة على سلسلة فارغة. تُعد هذه العلامة المميزة مفيدة لـ JavaScript في القوالب، نظرًا لقدرتها على عرض قيم العرض والارتفاع القصوى لكل الصور للموقع الذي تم إنشاؤه.

%IMAGESRC%

لتحديد عنوان URL لصورة كاملة الحجم على صفحة معرض.

%IMAGE_WIDTH%

لتمكين خانة الاختيار Add Width And Height Attributes For Images. يتيح ذلك للمستخدم تنزيل السمات، واختصار وقت التنزيل.

%IMAGE_WIDTH_NUMBER%

يتم استبدال هذه العلامة المميزة برقم (فقط) يمثل عرض الصورة.

%LINK%

لتحديد لون الروابط.

%NEXTIMAGE%

لتحديد الرابط لصفحة المعرض التالية.

%NEXTIMAGE _CIRCULAR%

لتعيين الرابط من صورة المعاينة الكبيرة إلى صورة المعاينة الكبيرة التالية.

%NEXTINDEX%

لتحديد الرابط للصفحة الرئيسية التالية.

%NUMERICLINKS%

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

%PAGE%

لتحديد موقع الصفحة الحالية (على سبيل المثال، صفحة 1 من 3).

%PHOTOGRAPHER%

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

%PREVIMAGE%

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

%PREVINDEX%

لتحديد الرابط للصفحة الرئيسية السابقة.

%SUBPAGEHEADER%

لتحديد عنوان المعرض.

%SUBPAGETITLE%

لتحديد عنوان المعرض.

%TEXT%

لتحديد لون النص.

%THUMBBORDER%

لتحديد حجم حدود المصغرات.

%THUMBNAIL_HEIGHT%

لتمكين خانة الاختيار Add Width And Height Attributes For Images. يتيح ذلك للمستخدم تنزيل السمات، واختصار وقت التنزيل.

%THUMBNAIL_HEIGHT_NUMBER%

يتم استبدال هذه العلامة المميزة برقم (فقط) يمثل ارتفاع الصورة.

%THUMBNAILS%

يتم استبدال هذه العلامة المميزة بمصغرات باستخدام ملف Thumbnail.htm لأنماط الإطار. يجب إدراج هذه العلامة المميزة وحدها على سطر واحد متصل في ملف HTML.

%THUMBNAIL_SIZE%

تحتوي على قيمة وحدات البكسل للمصغر في لوحة Thumbnails. تُعد هذه العلامة المميزة مفيدة لـ JavaScript في القوالب، نظرًا لقدرتها على عرض قيم العرض والارتفاع القصوى لكل المصغرات للموقع الذي تم إنشاؤه.

%THUMBNAILSRC%

لتحديد الرابط إلى مصغر.

%THUMBNAILSROWS%

يتم استبدال هذه العلامة المميزة بصفوف من المصغرات باستخدام ملف Thumbnail.htm لأنماط بدون إطار. يجب أن تدرج هذه العلامة المميزة وحدها على سطر واحد متصل في ملف HTML.

%THUMBNAIL_WIDTH%

لتمكين خانة الاختيار Add Width And Height Attributes For Images. يتيح ذلك للمستخدم تنزيل السمات، واختصار وقت التنزيل.

%THUMBNAIL_WIDTH_NUMBER%

يتم استبدال العلامة المميزة برقم (فقط) يمثل عرض المصغر.

%TITLE%

لتحديد عنوان المعرض.

%VLINK%

لتحديد لون الروابط التي تمت زيارتها.

تم ترخيص هذا العمل بموجب الترخيص العام غير المعدل الخاص بالإسناد وعدم التجارة والمشاركة الإصدار 3.0 ‏من ‏‏Creative Commons‏‏  إن بنود Creative Commons لا تشمل منشورات Twitter™‎ وFacebook.

إشعارات قانونية   |   سياسة الخصوصية على الإنترنت