Dreamweaver را آسان می کند برای ایجاد منوهای کشویی برای وب سایت شما. اما مانند تمام اشکال HTML، آنها می توانند کمی پیچیده باشند. این آموزش شما را از طریق مراحل ایجاد یک منوی کشویی در Dreamweaver راه اندازی می کند.
منوی پرش Dreamweaver
Dreamweaver 8 همچنین یک جادوگر برای ایجاد یک منوی پرش برای ناوبری در وب سایت شما فراهم می کند. بر خلاف منوی اصلی پایین کش، این منو در حقیقت وقتی کار شما تمام می شود انجام می شود. شما نیازی به نوشتن هیچ جاوا اسکریپت یا CGI برای نوشتن فرم کشویی خود ندارید. این آموزش همچنین توضیح می دهد چگونه از Dreamweaver 8 جادوگر برای ایجاد یک منوی پرش استفاده کنید.
01 از 20
ابتدا فرم را بسازید
نکته مهم درباره فرم های HTML و Dreamweaver:
به جز جادوگران خاص مانند منوی پرش، Dreamweaver به شما کمک نمی کند فرم های HTML را «کار» کنید. برای این شما نیاز به یک CGI یا جاوا اسکریپت دارید. لطفا برای دیدن اطلاعات بیشتر به آموزش من مراجعه کنید.
هنگامی که شما اضافه کردن یک منوی کشویی به وب سایت خود، اولین چیزی که شما نیاز دارید، یک فرم برای احاطه آن است. در Dreamweaver، به منوی Insert بروید و فرم را کلیک کنید، سپس "فرم" را انتخاب کنید.
02 از 20
فرم در نمای طراحی نمایش داده می شود
Dreamweaver محل نمایش فرم شما را به صورت بصری در نمای طراحی نشان می دهد، بنابراین شما می دانید کجا عناصر فرم را قرار دهید. این مهم است، زیرا برچسبهای منو کشویی معتبر نیستند (و کار نخواهند کرد) در خارج از عنصر فرم. همانطور که در تصویر می بینید، فرم خط قرمز نقطه در طراحی است.
03 از 20
لیست / منو را انتخاب کنید
منوهای کشویی در لیست Dreamweaver موارد "لیست" یا "منو" نامیده می شوند. بنابراین برای اضافه کردن یک به فرم خود، باید به منوی فرم در منوی Insert بروید و «لیست / منو» را انتخاب کنید. اطمینان حاصل کنید که مکان نما خود را در خط قرمز نقطه خالی جعبه فرم خود قرار دهید.
04 از 20
پنجره تنظیمات ویژه
در تنظیمات Dreamweaver یک صفحه نمایش در قابلیت دسترسی وجود دارد. من انتخاب می کنم که Dreamweaver به همه ویژگی های دسترسی مراجعه کند. و این صفحه نتیجه آن است. فرم ها جایی هستند که بسیاری از وب سایت ها در دسترس قرار می گیرند و با پر کردن این پنج گزینه، منو های کشویی شما بلافاصله قابل دسترسی خواهند بود.
05 از 20
دسترسی به فرم
گزینه های دسترسی:
برچسب
این نام برای این فیلد است. این به عنوان متن در کنار عنصر فرم شما نمایش داده خواهد شد.
نوشتن آنچه شما می خواهید با منوی کشویی خود تماس بگیرید. این می تواند یک سوال یا عبارت کوتاه باشد که منوی کشویی پاسخ دهد.
سبک
HTML شامل یک برچسب برچسب برای شناسایی برچسب های فرم شما به مرورگر است. گزینه های شما این است که منوی کشویی و متن برچسب را با برچسب بسته بندی کنید تا از ویژگی "for" در برچسب برچسب استفاده کنید تا مشخص شود کدام برچسب فرم آن را ارجاع می دهد یا از برچسب برچسب استفاده نمی کند.
من ترجیح می دهم از صفت استفاده کنم، به عنوان مثال اگر من به برخی دلیل نیاز داشته باشم که برچسب را به آن اضافه کنم، هنوز به فیلد فرم درست متصل می شود.
موقعیت
شما می توانید برچسب خود را قبل یا بعد از منوی کشویی قرار دهید.
کلید دسترسی
این کلید است که می تواند همراه با کلید های Alt یا Option برای مستقیما به آن فیلد فرم استفاده شود. این باعث می شود که فرم های شما بدون نیاز به یک موس بسیار آسان باشد. نحوه تنظیم یک کلید دسترسی در HTML
شاخص برگه
این ترتیب است که در هنگام استفاده از صفحه کلید، از طریق صفحه وب، فیلد فرم باید دسترسی پیدا کند. درک Tabindex
هنگامی که گزینه های قابلیت دسترسی خود را به روز می کنید، روی OK کلیک کنید.
06 از 20
منو را انتخاب کنید
هنگامی که منوی کشویی خود را در نمای طراحی نمایش می دهید، باید عناصر مختلف را به آن اضافه کنید. ابتدا منوی کشویی را با کلیک روی آن انتخاب کنید. Dreamweaver یک خط نقطه دیگر را فقط در منوی کشویی قرار می دهد تا نشان دهد که آن را انتخاب کرده اید.
07 از 20
خواص منو
منوی خواص به منوی لیست / منو برای این منوی کشویی تغییر خواهد کرد. در آنجا می توانید منوی خود را یک شناسه (که در آن می گوید "انتخاب") را بدهد، تصمیم می گیرد که آیا شما می خواهید یک لیس یا یک منو باشد، آن را یک کلاس سبک از جدول سبک خود قرار دهید و مقادیر را به کشویی اختصاص دهید.
تفاوت بین لیست و منو چیست؟
Dreamweaver یک منوی کشویی منو را هر کشویی که فقط برای انتخاب یک انتخاب می کند، تماس می دهد. "لیست" اجازه می دهد تا گزینه های متعدد در کشویی و می تواند بیش از یک مورد بالا است.
اگر می خواهید یک منوی کشویی دارای چندین خط بالا باشد، آن را به نوع "لیست" تغییر دهید و کادر "انتخاب" را بدون علامت گذاری کنید.
08 از 20
اضافه کردن آیتم های لیست جدید
برای اضافه کردن آیتم های جدید به منوی خود، بر روی دکمه "لیست مقادیر ..." کلیک کنید. این پنجره فوق را باز می کند. برچسب موردی خود را در کادر اول تایپ کنید. این چیزی است که در صفحه نمایش داده خواهد شد. اگر مقدار خالی را ترک کنید، این همان چیزی است که در فرم ارسال می شود.
09 از 20
اضافه کردن بیشتر و تنظیم مجدد
برای اضافه کردن آیتم های بیشتر، روی نماد افزوده کلیک کنید. اگر می خواهید آنها را در جعبه لیست دوباره مرتب کنید، از فلش های بالا و پایین سمت راست استفاده کنید.
10 از 20
به همه ارزش ها
همانطور که در مرحله 8 ذکر شد، اگر مقدار خالی را ترک کنید، برچسب به فرم ارسال می شود. اما شما می توانید تمام مقادیر خود را برای ارسال اطلاعات متناوب به فرم خود بدهید. شما برای چیزهایی مانند پرش منوها از این مقدار زیادی استفاده می کنید.
11 از 20
یک پیش فرض را انتخاب کنید
صفحات وب به طور پیش فرض به نمایش هر کدام از آیتم های کشویی به عنوان مورد پیش فرض لیست شده است. اما اگر میخواهید یک انتخاب دیگر انتخاب شود، آن را در جعبه "انتخاب شده" در منوی Properties برجسته کنید.
12 از 20
فهرست خود را در نمایش طراحی مشاهده کنید
هنگامی که ویرایش ها را انجام می دهید، Dreamweaver لیست کشویی خود را با مقدار پیش فرض انتخاب شده نشان می دهد.
13 از 20
فهرست شما در نمای کد نمایش داده شود
اگر شما به نمای کد بروید، می توانید ببینید که Dreamweaver منوی کشویی خود را با کد بسیار تمیز اضافه می کند. تنها ویژگی های اضافی آنهایی هستند که ما با گزینه های دسترسی اضافه کردیم. کد همه از هم جدا و بسیار آسان برای خواندن و درک آن است. حتی در ویژگی select = "selected" قرار می گیرد، زیرا به Dreamweaver گفته ام که پیش فرض نوشتن XHTML هستم.
14 از 20
ذخیره و مشاهده در مرورگر
اگر سند را ذخیره کرده و آن را در یک مرورگر وب مشاهده کنید، می توانید ببینید که منوی کشویی شما درست همانند انتظار می رود.
15 از 20
اما هیچ کاری انجام نداده
منوی ما بالا به نظر می رسد خوب است، اما هیچ کاری انجام نمی دهد. برای اینکه بتوانید آن را انجام دهید، باید یک عمل فرم را روی فرم خود تنظیم کنید، که کاملا یک آموزش دیگر است.
خوشبختانه Dreamweaver دارای یک فرم منو کشویی است که می توانید بلافاصله در سایت خود بدون نیاز به یادگیری در مورد فرم ها، CGI ها یا اسکریپت ها استفاده کنید. این یک منوی پرش است.
منوی پرش Dreamweaver یک منوی کشویی با نام ها و URL ها را تنظیم می کند. سپس شما می توانید یک آیتم را در منو انتخاب کنید و صفحه وب به آن مکان حرکت می کند، درست مانند اینکه یک پیوند را کلیک کرده اید.
به منوی Insert بروید و فرم را انتخاب کنید و سپس منوی پرش را انتخاب کنید.
16 از 20
پرش پنجره منو
بر خلاف منوی کشویی استاندارد، منوی Jump یک پنجره جدید برای شما می دهد تا آیتم های منو را نامگذاری کنید و جزئیات مربوط به نحوه کار فرم را اضافه کنید.
برای اولین مورد، متن «untitled1» را به آنچه میخواهید بخوانید و یک نشانی اینترنتی را که پیوند آن باید بروید اضافه کنید.
17 از 20
موارد را به منوی پرش اضافه کنید
بر روی آیتم اضافه کلیک کنید تا یک آیتم جدید به منوی پرش اضافه شود. به عنوان مواردی که مایلید اضافه کنید.
18 از 20
پرش گزینه های منو
پس از اضافه کردن تمام لینکهایی که می خواهید، باید گزینه های خود را انتخاب کنید:
URL ها را باز کنید
اگر یک مجموعه فریم داشته باشید، می توانید لینک ها را در یک قاب دیگر باز کنید. یا شما می توانید پنجره اصلی را به یک هدف خاص تغییر دهید به طوری که URL در یک پنجره جدید یا جایی دیگر باز شود.
نام منو
به منوی خود یک شناسه منحصر به فرد برای صفحه بدهید. این لازم است به طوری که اسکریپت به درستی کار خواهد کرد. همچنین به شما امکان می دهد که منوهای پرش را در یک فرم داشته باشید - فقط نامهای مختلف را به آنها بدهید.
دکمه برو پس از منو
من دوست دارم این را انتخاب کنم چون گاهی اوقات اسکریپت وقتی که منو تغییر می کند کار نمی کند. این نیز بیشتر در دسترس است.
انتخاب اول پس از تغییر URL
این گزینه را انتخاب کنید اگر یک فوری مانند "انتخاب یک" را به عنوان اولین آیتم منوی انتخاب کنید. این اطمینان حاصل می کند که این آیتم به طور پیش فرض در صفحه باقی می ماند.
19 از 20
پرش نمایش منوی طراحی
همانند منوی اول من، Dreamweaver منوی پرش را در نمای طراحی با موارد پیش فرض قابل مشاهده می کند. بعدا می توانید منوی کشویی را مانند هر کس دیگر ویرایش کنید.
اگر شما آن را ویرایش کنید، مطمئن شوید که هیچ یک از شناسه ها را در موارد تغییر ندهید، در غیر این صورت اسکریپت ممکن است کار نکند.
20 از 20
پرش منو در مرورگر
صرفه جویی در فایل و ضربه زدن به F12 صفحه نمایش را در مرورگر مورد نظر خود را نشان می دهد. در اینجا شما می توانید یک گزینه را انتخاب کنید، با کلیک بر روی "برو" و منوی پرش کار می کند!