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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

موفق باشید.

:: اگر کدهای html یا CSS رو نگاه کرده باشید ، در قسمت هایی که برای تنظیم رنگ متن ، پس زمینه ، حاشیه و ... وجود داره معمولا رنگ رو با یک کد خاص به کار بردند . چیزی شبیه rrggbb# . امروز می خوایم به صورت کامل و مفصل در مورد نام و کد رنگ ها در زبان های html و CSS صحبت کنیم .
:: معمولا رنگ ها رو به سه طریف در میون کدهای html و css استفاده می کنند . این سه شیوه رو براتون در جدول زیر آوردم :

:: نکته در مورد اعداد مبنای 16 یا همون Hexadecimal
:: رقم های اعداد مبنای r ، از 0 هستند تا r-1 . مثلا در مبنای پرکاربرد 10 که روزانه ازش استفاده می کنید ، رقم ها 0 تا 9 هستند . و مبنای 16 دارای ارقام 0 تا 15 هست . برا اینکه ابهامی در خوندن اعداد مبنای 16 پیش نیاد ، رقم های 10 تا 15 رو در مبنای 16 با حروف الفبای لاتین از A تا F نشون میدن . اگر اینکار صورت نمی گرفت در خواندن اعداد مبنای 16 ابهامات زیادی بود . مثلا عدد 112 رو به سه شکل می شد تفسیر کرد . اینکه از سه رقم 1 و 1 و 2 ایجاد شده یا از دو رقم 11 و 2 و یا اینکه از دو رقم 1 و 12 !!! وقتی از حروف به جای ارقام بزرگتر از 9 در مبنای 16 استفاده کنیم این سه تفسیر رو به صورت سه عدد 112 و B2 و 1C داریم که اعداد کاملا واضح و مشخصی در سیستم مبنای 16 هستند .
:: پس شانزده رقم مبنای 16 عبارتند از 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , F , E , D , C , B , A

:: برای اینکه بیشتر آشنا بشید در جدول زیر چند رنگ معروف رو با سه روش گفته شده آوردم . خوب دقت کنید که چطور کدها با ترکیب سه رنگ قرمز و سبز و آبی ساخته شدند :

:: به طور مثال در جدول فوق کد رنگ مشکی 000000# هست . یعنی هیچ رنگی موجود نیست (سیاهی !) . و وقتی که همه ی رنگ ها مقدارشون حداکثر باشه سفید (FFFFFF#) رو داریم !

:: نام های استاندارد تعریف شده برای رنگ ها در CSS و HTML
برای تعداد ‍147 رنگ در CSS و HTML نام استاندارد تعریف شده که اونها رو با رنگ و کد معادلشون در زیر می بینید :

:: در انتها هم یک انتخاب کننده رنگ رو در زیر براتون تهیه کردم که میتونید به راحتی رنگ مورد نظرتون رو انتخاب کنید و کد و مقادیر استفاده شده ی هر کدوم از رنگ های قرمز و سبز و آبی رو برای ایجاد اون رنگ ببینید