إنشاء معارض صور ويب

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

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

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

إنشاء معرض صور الويب

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

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

استخدام المكوّن الإضافي الأقدم والاختياري Photoshop

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

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

• لتحويل صورة فردية، اختر Edit > ‏Convert To Profile ثم اختر sRGB. راجع تعيين ملف تعريف الألوان أو إزالته (في Illustrator, Photoshop).

• لتحويل مجلد من الصور، استخدم Image Processor. اختر File > ‏Scripts ‏> Image Processor. راجع تحويل ملفات باستخدام Image Processor.

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

خيارات معرض صور الويب

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

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

Uses UTF‑8 encoding.

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

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

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

اسم المعرض.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

أنماط معرض صور الويب

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

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

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

Adobe Photoshop CS5/Presets/Web Photo Gallery.

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

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

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

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

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

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 وعلامات مميزة إلى ملفات القالب. يجب أن تكون كل العلامات المميزة بالحروف الكبيرة، وتبدأ وتنتهي بالرمز (%).

تخصيص نمط معرض صور الويب أو إنشاؤه

العلامات المميزة لنمط معرض صور الويب

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

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

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

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

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

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

يحدد لون الشعار.

يحدد خط نص الشعار.

يحدد حجم خط نص الشعار.

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

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

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

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

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

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

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

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

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

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

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

لتحديد التاريخ الظاهر على الشعار.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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