ساخت منوی افقی و عمودی در adobe dreamweaver

سلام. در این آموزش شما با نحوه ساخت منوی افقی و عمودی در adobe dreamweaver آشنا میشوید.

با ما همراه باشید.

ساخت منوی افقی و عمودی در adobe dreamweaver

برای ساخت منو افقی و عمودی spry ابتدا نرم افزار adobe dreamweaver را باز کنید و به مسیر Insert > Layout Objects > Spry Menu Bar بروید.

حالا برنامه از شما درخواست میکند که قبل از ساخت منو باید این پروژه را در محلی ذخیره کنید تا بتوانید منو بسازید

در اینجا بر روی نوشته OK کلیک کنید و مسیر ذخیره را مشخص کنید، مثلا من مسیر ذخیره را دسکتاپ کامپیوتر انتخاب کرده ام.

حالا در پنجره باز شده باید افقی یا عمودی بودن منو را انتخاب کنید.

Horizontal به معنی افقی بودن منو و Vertical به معنی عمودی بودن منو میباشد، ما در اینجا گزینه Horizontal  را انتخاب کرده ایم تا یک منوی افقی استاندارد داشته باشیم.

بعد از انتخاب نوع منو، بر روی نوشته OK کلیک کنید تا نرم افزار منوی مورد نظر را بسازد.

حالا مشاهده میکنید که یک منوی افقی با دسته بندی و نام های پیشفرض توسط برنامه ساخته شده است.

حال ما میخواهیم دسته بندی و بخش های مختلف این منو را با توجه به نیازمان تغییر دهیم.

برای این کار باید پنجره Properties زیرین نرم افزار باز باشد، اگر باز نبود به مسیر Windows>Propertis بروید و این گزینه را تیک دار کنید تا این پنجره فعال شود.

حال میخواهیم برای این منو دسته بندی تعریف کنیم، در تصویر زیر با اصول کلی دسته بندی آشنا خواهید شد

1.برای تغییر نام دسته بندی پیشفرض نرم افزار در پنجره Properties و در فیلد سمت چپ آن بر روی Item 1 کلیک کنید  و در کناری نوشته Text نامی جدید برای آن در نظر بگیرید. همین کار را میتوانید برای دسته بندی های دیگر انجام دهید. همچنین برای افزودن دسته بندی جدید بر روی شکل + و برای حذف دسته بندی انتخاب شده بر روی شکل – کلیک کنید.

2.اگر دسته بندی زیر مجموعه داشته باشد در فیلد وسط نمایش داده میشود ( در عکس پایین Item 1.1 و Item1.2 و Item 1.3 زیر مجموعه Item1 میباشد) که با کلیک بر روی زیر مجموعه مورد نظر میتوانید نام آن را از فیلد Text  تغییر دهید. برای افزودن زیر مجموعه جدید بر روی شکل + و برای حذف زیر مجموعه انتخاب شده بر روی شکل – کلیک کنید.

حالا برای لینک دادن به دسته بندی ها کافیست دسته بندی مورد نظر را از پنجره Properties انتخاب کنید (روی آن کلیک کنید) و  از فیلد Link آدرس مورد نظر خود را بنویسید

به طورمثال:http://www.digital-art.ir

حالا در اینجا ما میخواهیم برای دسته بندی تعیین کنیم که وقتی روی آن کلیک شد چگونه لینک آن باز شود. پس کنار فیلد Target نحوه باز شدن لینک مورد نظر خود را وارد کنید. مثلا با نوشتن Blank _ لینک مورد نظر در صفحه جدیدی باز میشود.

در عکس زیر من تمامی دسته بندی ها را به دلخواه خود تغییر داده ام:

حالا میتوانید از مسیر File > Save As پروژه منوی خود را ذخیره کنید.

تا این مرحله از کار توانستید یک منوی استاندارد افقی بسازید، اما حالا مختصری به نحوه زیبا کردن منو میپردازیم

استایل دهی به منوی افقی

برای استایل دهی به منوی ساخته شده و زیبا کردن آن باید با برنامه نویسی و نحوه استفاده از کدهای css آشنایی داشته باشید.

ولی برای آشنایی با نحوه کار من در اینجا به توضیح 1 بخش از استایل دهی میپردازم، یعنی تغییر رنگ منو.

قبل از تغییر رنگ منو ابتدا برای راحتی کار حالت Live Code و Design را فعال کنید

حالا بر روی یک دسته بندی کلیک کنید

و از پنجره css styles بر روی نوشته background-color دبل کلیک کرده و رنگ دسته بندی و زیر مجموعه های منو را تغییر دهید.

باز هم از قسمت css styles بر روی نوشته دیگری که هم نام background-color میباشد دبل کلیک کرده و رنگ پس زمینه و همچنین سایر قسمت های منو را تغییر دهید. (همانند تصویر بالا)

با کلیک بر روی بخش های مختلف این منو میتوانید مقادیر و خصوصیات این منو را تغییر دهید.

یک راه دیگر هم برای استایل دادن به منو وجود دارد، در این روش یکبار منو را ذخیره کرده و بعد به محل ذخیره منو رفته و فایل css منو را باز کرده و مقادیر آن را تغییر دهید.

برای تغییر فونت، سایز فونت، تراز بندی متن، تعیین فاصله منو و… هم میتوانید از این راه استفاده کنید.

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

موفق باشید.