مکس آموز

طراحی صفحات سایت با فتوشاپ | درج url برای تصاویر در فتوشاپ

هر چند برای طراحی سایت نیاز به دانش کد نویسی لازم هست و برنامه های مدیریت محتوایی همچون وردپرس با قدرت تمام این وظیفه را بر عهده دارند اما با توسعه فتوشاپ توسط شرکت ادوبی ، امکاناتی به فتوشاپ اضافه گردیده است تا بتوان برخی مراحل طراحی سایت را با سرعت بیشتری در محیز این برنامه قدرتمند انجام داد.برای طراحی صفحات سایت با فتوشاپ از ابزار قدرتمند slice tool می توان بهره برد و همچنین style layer ها تولید کننده کد های css می باشند و می توان تحت شرایطی که در ادمه مقاله به آن اشاره خواهیم کرد طراحی صفحات سایت با فتوشاپ  انجام گردد.

اختصاص یک URL به یک تکه،  برش یک لینک در صفحه وب نتیجه می شود. هنگامی که یک کاربر روی لینک کلیک می کند، مرورگر وب به URL مشخص شده و فریم هدف هدایت می شود.ابزاری که در فتوشاپ این وظیفه مهم برا بر عهده دارد ابزار slice tool  می باشد و این گزینه تنها برای slice type از نوع image در دسترس است.

مراحل درج url برای تصاویر در فتوشاپ

  • یک برش  از تصویر  را انتخاب کنید برای این کار در فتوشاپ با ابزار Slice Select دوبار کلیک بر روی تکه را کلیک کنید تا کادر محاوره ی Slice Options را نمایش دهد.
  • در جعبه محاوره Slice Options یک URL را در کادر متن URL وارد کنید. شما می توانید URL مربوطه یا مطلق (کامل) URL را وارد کنید. اگر شما یک URL مطلق وارد کنید، مطمئن شوید که پروتکل مناسب را شامل می شود (به عنوان مثال، http://www.maxamooz.ir ، و نه www.maxamooz.ir).
  • در صورت لزوم، نام یک قاب هدف را در کادر متن هدف وارد کنید:
    blank :فایل پیوند را در یک پنجره جدید نمایش می دهد و پنجره مرورگر اصلی را باز می کند.
    self : فایل مرتبط را در همان فریم به عنوان فایل اصلی نمایش می دهد.
    parent : فایل مرتبط را در مجموعه فریم اصلی خود نمایش می دهد. از این گزینه استفاده کنید اگر سند HTML حاوی فریم ها باشد و کادر فعلی یک کودک است. فایل پیوند در کادر اصلی فعلی ظاهر می شود.
    top : پنجره کل مرورگر با فایل پیوند شده را حذف می کند و تمام فریم های فعلی را حذف می کند. نام باید با یک نام فریم که قبلا در فایل HTML برای سند مشخص شده است، مطابقت داشته باشد. هنگامی که یک کاربر روی لینک کلیک کند، فایل مشخص شده در کادر جدید ظاهر می شود.

پیام های مرورگر و متن Alt را مشخص کنید

شما می توانید مشخص کنید چه پیام هایی در مرورگر برای تصویر مربوطه نمایش داده می شود. این گزینه ها فقط برای تکه های تصویر در دسترس هستند و تنها در فایل های HTML صادراتی ظاهر می شوند.در کادر محاوره ای گزینه Slice، متن مورد نظر را تایپ کنید.

اضافه  کردن متن HTML به یک برش

هنگامی که شما یک تکه از نوع No Image را انتخاب می کنید، می توانید متن را که در ناحیه برش صفحه وب حاصل شده است، وارد کنید. این می تواند متن ساده یا متن با تگ های استاندارد HTML فرمت شده باشد. شما همچنین می توانید گزینه های عمودی و افقی را انتخاب کنید.

طراحی-صفحات-وب-در-فتوشاپ

طراحی-صفحات-وب-در-فتوشاپ

فتوشاپ متن HTML را در پنجره سند نمایش نمی دهد؛ شما باید از یک مرورگر وب برای پیش نمایش متن استفاده کنید. مطمئن شوید که متن HTML را در مرورگرهای مختلف، با تنظیمات مرورگر مختلف و در سیستم عامل های مختلف، پیش نمایش کنید تا تأیید کنید که متن شما به طور صحیح در وب نمایش داده شده است.

  • یک برش را انتخاب کنید برای نمایش کادر انتخاب گزینه Slice Options دوبار کلیک بر روی تکه با ابزار Slice Select کلیک کنید. برای تنظیم گزینه های قالب بندی اضافی، می توانید بر روی برش در کادر محاوره ی ذخیره ی وب و دستگاه ها دوبار کلیک کنید.
  • در جعبه گفت و گو گزینه برش، نوع ، بدون تصویر از منوی نوع برش انتخاب کنید.
  • متن مورد نظر را در کادر متن تایپ کنید.
  • (فقط برای کادر محاوره ی ذخیره برای وب و دستگاه ها) اگر متن حاوی برچسب های قالب بندی HTML باشد، گزینه Text Is HTML را انتخاب کنید. اگر این گزینه را انتخاب نکنید، تگ های HTML نادیده گرفته می شوند و تمام متن به عنوان متن ساده ی غیر متن در صفحه وب ظاهر می شود.
  • Default :با استفاده از پیش فرض مرورگر برای تراز افقی استفاده می شود.
    Left : متن را به سمت چپ ناحیه برش متصل می کند.
    Center : متن را به مرکز منطقه تکه ای تقسیم می کند.
    Right : متن را به سمت راست منطقه تکه ای تقسیم می کند.
    Default :با استفاده از پیش فرض مرورگر برای تطبیق عمودی استفاده می شود.
    Top : متن را به بالای قسمت برش متصل می کند.
    Baseline : یک خط پایه مشترک برای خط اول متن را در سلولهای همان ردیف (از جدول HTML به دست آمده) تعیین می کند. هر سلول در ردیف باید از گزینه Baseline استفاده کند.
    Middle : متن را عمودی در ناحیه برش متمرکز می کند.
    Bottom : متن را به انتهای منطقه تکه ای تقسیم می کند.

نهایتا با کلید های ترکیبی shift +crtl + alt  به پنجره save for web منتقل خواهید شد.

طراحی-صفحات-وب-در-فتوشاپ

طراحی-صفحات-وب-در-فتوشاپ

پس از کلیک بر روی save پنجره ای گشوده می شود که اینبار آدرس محل ذخیره سازی فایل و فرمت فایل یا فایل های ذخیره شده را مطالبه میکند.محل ذخیره سازی را مطابق میل خود ذخیره نمایید اما برای نوع ذخیره سازی فایل ها گزینه image and html file را انتخاب کنید.با این کار علاوه بر تصاویر تقسیم بندی شده که هر کدام تحت یک فایل جدید ذخیره خواهند شد فایل کد های html ساخته شده توسط فتوشاپ نیز ایجاد می گردد.می توان فایل  html را توسط مرورگرها باز کنید تا مشاهده نمایید که تمامی تصاویر تجزیه شده کنار همدیگر قرار گرفته اند درست مانند قبل از کار با  slice tool با این تفاوت که این تصویر به یک صفحه وب تبدیل گردیده و اگر موس را روی بخش هایی که برای آنها url در نظر گرفته اید را ببرید خواهید دید که علامت نشان موس تغییر می کند که خود نشانه لینک دار بودن آن بخش از تصویر است. نهایتا با تزریق تصاویر و کد html ایجاد شده به سامانه مدیریت محتوایی نظیر وردپرس می توانید از آن در طراحی سایت خود استفاده کنید.

 

سجاد

نوشته‌های مرتبط

دیدگاه‌ها