اخبار سایت
گاهی شالوده و ریشه شکست های بزرگ، از اشتباهات بسیار ریز و کوچک سرچشمه می گیرد - ارد بزرگ
خانه / آموزش HTML / ساخت منوی افقی و عمودی در adobe dreamweaver

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

موفق باشید.

درباره محمدرضا مقدم

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

۱۳ دیدگاه

  1. salam saite khobi dari age be saite manam biai mamnon misham .

  2. با سلام
    من یک قالب وبلاگ طراحی کردم فقط نمی دونم چهطوری آپلود و لینک سی اس اس رو به سند اچ تی ام الم بدم.خواهش میکنم کمکم کنید.؟

  3. لوازم جانبی موبایل

    ممنونم عالی بود

  4. با تشکر فراوان از پسر گلم بخاطر این آموزش مفید و ضروری.
    چنانچه برداشت منفی نداشته باشی مایلم مبلغی بعنوان سپاسگزاری برایتان ارسال کنم.
    لطفاً شماره کارتتو به ایمیلم ارسال کن.
    ضمناً آدرس و تلفن من در سایتم موجود است

  5. سلام من یک مشکل داشتم ممنون میشم کمکم کنید (وقتی موسم روی کشوی منو ها قرار میگیره پرش دارد یعنی نمی توانم کشوی بقیه منو ها را باز کنم یا با موس رویشان قرار بگیرم) ممنون میشم کمکم کنید

  6. سلام خسته نباشید من همه ی این کار هایی که گفتید رو انجام دادم ولی رنگ spry menu bar تغییری نکرد.
    باید چیکار کنم؟لطفا جواب بدید ممنون از سایت خوبتون.

  7. با سپاس فراوان

  8. سلام ممنون بابت راهنمایی و توضیحات بسیار خوبتون
    این منو در سمت چپ قرار می گیره ولی می خوام در وسط قرار بگیره چی کاری باید انجام بدم ؟

  9. سلام مرسی بابت راهنمایی خوبتون
    این منو در سمت چپ قرار می گیره ولی می خوام در وسط قرار بگیره چی کاری باید انجام بدم ؟

  10. سلام کدام نسخه دریم وریم ورک این خاصیت را دارد چون نسخه دریم وریم ورک من دارم چنین گزینه ای در Insert نیست

  11. سلام. ممنون از توضیح خوبتون.
    من به مشکلی برخوردم که ممنون میشم راهنمایی و کمکم کنید.
    وقتی در قسمت spry منو را میسازم. چه افقی یا عمودی ، روی صفحه‌ مثل توضیحات شما قرار میگیرد.
    ولی در نتیجه کار که میخواهم داخل یک مرورگر مشاهده کنم کاملا منو بهم ریخته است. و فقط در خود نرم افزار دریم ویور درست نمایش داده میشود.
    ممنون میشوم کمکم کنید تا این قسمت را یاد بگیرم.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شدبخش های مورد نیاز علامت گذاری شده است *

*