سلام. در این آموزش شما با نحوه ساخت منوی افقی و عمودی در 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 منو را باز کرده و مقادیر آن را تغییر دهید.
برای تغییر فونت، سایز فونت، تراز بندی متن، تعیین فاصله منو و… هم میتوانید از این راه استفاده کنید.
امیدوارم از این آموزش استفاده کرده باشید، چنانچه هر گونه سوالی در رابطه با این آموزش دارید از قسمت نظرات آن را مطرح کنید.
موفق باشید.
salam saite khobi dari age be saite manam biai mamnon misham .
با سلام
من یک قالب وبلاگ طراحی کردم فقط نمی دونم چهطوری آپلود و لینک سی اس اس رو به سند اچ تی ام الم بدم.خواهش میکنم کمکم کنید.؟
ممنونم عالی بود
با تشکر فراوان از پسر گلم بخاطر این آموزش مفید و ضروری.
چنانچه برداشت منفی نداشته باشی مایلم مبلغی بعنوان سپاسگزاری برایتان ارسال کنم.
لطفاً شماره کارتتو به ایمیلم ارسال کن.
ضمناً آدرس و تلفن من در سایتم موجود است
با سلام. پاسخ به ایمیل شما ارسال شد.
در صورت عدم مشاهده ایمیل بخش Spam ایمیل خود را نیز بررسی نمایید.
پیروز و موفق باشید
من هم سوالی دارم و اینکه چگونه در addobe DW2018میتوانیم این کار را بکنیم؟
سلام من یک مشکل داشتم ممنون میشم کمکم کنید (وقتی موسم روی کشوی منو ها قرار میگیره پرش دارد یعنی نمی توانم کشوی بقیه منو ها را باز کنم یا با موس رویشان قرار بگیرم) ممنون میشم کمکم کنید
سلام خسته نباشید من همه ی این کار هایی که گفتید رو انجام دادم ولی رنگ spry menu bar تغییری نکرد.
باید چیکار کنم؟لطفا جواب بدید ممنون از سایت خوبتون.
سلام عالی بود /// …..
با سپاس فراوان
سلام ممنون بابت راهنمایی و توضیحات بسیار خوبتون
این منو در سمت چپ قرار می گیره ولی می خوام در وسط قرار بگیره چی کاری باید انجام بدم ؟
سلام مرسی بابت راهنمایی خوبتون
این منو در سمت چپ قرار می گیره ولی می خوام در وسط قرار بگیره چی کاری باید انجام بدم ؟
سلام کدام نسخه دریم وریم ورک این خاصیت را دارد چون نسخه دریم وریم ورک من دارم چنین گزینه ای در Insert نیست
سلام. ممنون از توضیح خوبتون.
من به مشکلی برخوردم که ممنون میشم راهنمایی و کمکم کنید.
وقتی در قسمت spry منو را میسازم. چه افقی یا عمودی ، روی صفحه مثل توضیحات شما قرار میگیرد.
ولی در نتیجه کار که میخواهم داخل یک مرورگر مشاهده کنم کاملا منو بهم ریخته است. و فقط در خود نرم افزار دریم ویور درست نمایش داده میشود.
ممنون میشوم کمکم کنید تا این قسمت را یاد بگیرم.
با سلام و خسته نباشید
مرسی از مقاله خوبی که نوشتین
فقط جسارتا اگر ممکنه پست رو آپدیت کنین و تصاویر رو تغییر بدین
دریم ویور تو نسخه های جدیدی کاملا تغییر کرده و خیلی جذاب تر شده …
ممنون…