مدیریت هدرهای صفحه - Page Headers

• هدرها، بخش بالایی سایت هستند که معمولا شامل تصویر، منو، پنل جستجو، متن، لوگو و ... می باشند.
• مدیریت و طراحی هدرها در این سیستم دارای ویژگیهای زیر می باشد:
ایجاد هدرها به تعداد نامحدود و قابلیت انتخاب هر یک از آن ها در هنگام طراحی صفحات.
تعیین سایز هدر.
تعریف استایل های استاندارد برای هدر، توسط ابزار طراحی استایل (تصویر و رنگ پس زمینه، رنگ متن، نوع فونت و ...)
افزودن منو با امکان جابه جایی با ماوس.
افزودن محتوا شامل متن های دلخواه، تصویر، لینک، فلش و ... با امکان جابه جایی و ریسایز کردن آن ها با ماوس.
امکان جابه جایی، تعیین اولویت لایه ای (انتقال به لایه جلو یا پشت)، ویرایش، حذف، وسط چین و ... هر یک از آیتم های اضافه شده به هدر.
امکان برگشت تغییرات به عقب یا جلو (Redo, Undo) در تمامی مراحل طراحی (Ctrl Y) (Ctrl Z).

Header
 
• برای دسترسی به بخش مدیریت هدرها، روی منوی زیر کلیک کنید:

Header Menu

• با کلیک روی منوی بالا، به صفحه مدیریت هدرهای صفحه، هدایت می شوید:

Header List

Icon Design طراحی هدر.
Icon Delete حذف هدر.
• برای ایجاد هدر جدید روی آیکون Icon Add کلیک کنید:
 
Header Insert
 
• با وارد کردن نام و ارتفاع پیشفرض و کلیک روی آیکون Icon OK هدر جدید اضافه می شود.
• برای طراحی هدر، روی آیکون Icon Design کلیک کنید تا به صفحه زیر هدایت شوید:

Header Design

• با کلیک روی دکمه Icon Edit Button می توانید عنوان و ارتفاع هدر را به روز رسانی کنید:
 
Header Edit
 
• برای استایل دادن به هدر روی دکمه Icon Edit Css کلیک کنید تا پنجره ابزار طراحی استایل باز شود.
• با استفاده از این ابزار، شما می توانید استایل های استاندارد را به هدر اختصاص دهید.
• از جمله استایل های مهم برای هدر، تصویر پس زمینه (به همراه تنظیمات شامل تکرار تصویر، محل قرارگیری تصویر و ...)  می باشد:

Header Css

• با انتخاب تصویر پس زمینه و انجام تنظیمات مربوطه و کلیک روی دکمه OK، هدر به صورت زیر تغییر می کند:
 
Header Design Level 1
 
• با کلیک روی دکمه Icon Add Context پنجره ابزار ویرایشگر متن باز می شود و می توانید محتوا (متن، تصویر و ...) به هدر اضافه کنید:
 
Header Context

• به عنوان مثال می خواهیم لوگوی آبادیس را به هدر اضافه کنیم:
ابتدا لوگوی آبادیس رو به محتوا اضافه می کنیم (آموزش افزودن تصویر به محتوا در صفحه ابزار ویرایشگر متن).

Header Content Add Logo
 
با کلیک روی دکمه OK لوگوی آبادیس به هدر اضافه می شود:
 
Header Design Level 2

• محتوای اضافه شده به هدر را می توانید با ماوس جا به جا کنید:

Header Design Level 3
 
• به همین صورت می توانید محتواهای دیگری را نیز به هدر اضافه کنید:

Header Design Level 4

• با زدن کلید سمت راست ماوس روی هر محتوا منوی زیر باز می شود:

Header Context Menu

انتقال به لایه جلو : انتقال لایه محتوا به بالاترین لایه.

Header Change Layer

انتقال به لایه پشت: انتقال لایه محتوا به پایین ترین لایه.
وسط چین: قراردادن لایه در وسط (تراز افقی) هدر.
ویرایش: ویرایش محتوا.
حذف: حذف محتوا از هدر.

• اگر محتوای شما چند خط متن است و نیاز به نظم دادن (تعیین عرض برای نمایش متن) باشد، می توانید با ماوس لایه محتوا را ریسایز کنید:


• برای ریسایز کردن تصویر از روش بالا نمی توانید استفاده کنید و باید در ویرایشگر تصویر را انتخاب کرده و عمل ریسایز را انجام دهید.
• برای افزودن منو به هدر روی دکمه Icon Add Menu کلیک کنید تا پنجره زیر باز شود:
 
Header Add Menu

• در پنجره بالا، منوهایی که در بخش مدیریت منوها طراحی کردید لیست می شوند.
• هر نوع منویی (افقی، عمودی و محتوایی) را می توان به هدر اضافه کرد.
• با کلیک روی دکمه Icon Add منوی مورد نظر به هدر اضافه می شود.
• برای مثال منوی پیشفرض افقی را به هدر اضافه می کنیم:
 
Header Design Level 5

• با جا به جایی منو در محل مورد نظر، طراحی هدر ما به پایان می رسد:

Header Design Level 6
 
• با کلیک سمت راست ماوس روی لایه منو، منویی مشابه منوی کانتکست محتوا باز می شود، که امکان انجام عملیات مشابه را فراهم می سازد.
• هدرهای طراحی شده در بخش طراحی صفحه لیست می شوند و می توانید هدر دلخواه را برای صفحه انتخاب کنید:

Header Page Design


چند نمونه از هدرهای طراحی شده
 

Header Sample 1


Header Sample 2


Header Sample 3


Header Sample 4