این wikiHow به شما آموزش می دهد که چگونه از Adobe Dreamweaver برای ایجاد یک کادر کشویی برای یک صفحه وب استفاده کنید. کادرهای بازشو منوهایی هستند که هنگام کلیک روی موردی در صفحه وب شما "باز می شوند" و گزینه های بیشتری در این فرایند ارائه می شود.
مراحل
مرحله 1. یک پروژه Dreamweaver را باز کنید
برای انجام این کار روی فایل پروژه دوبار کلیک کنید. اگر می خواهید یک پروژه Dreamweaver جدید ایجاد کنید ، در عوض Dreamweaver را باز کنید ، روی آن کلیک کنید فایل ، کلیک جدید ، و هرگونه درخواست روی صفحه را دنبال کنید.
مرحله 2. ایجاد یک لیست مرتب شده
برای ایجاد یک منوی کشویی ، باید حداقل یک مورد گلوله داشته باشید. با خاموش کردن CSS می توانید یک نقطه گلوله ایجاد کنید (روی چشم انداز مورد منو ، را انتخاب کنید رندر استایل ، و کلیک کنید نمایش سبک ها اگر علامت زده شده است) ، روی مکانی که می خواهید نقطه را اضافه کنید ، کلیک کنید ، روی نماد نقطه گلوله در پایین پنجره کلیک کنید و نام نقطه را تایپ کنید. سپس باید CSS را قبل از اقدام مجدد روشن کنید.
- نام نقطه در اینجا به عنوان فعال کننده منوی کشویی شما عمل می کند (به عنوان مثال ، دکمه ای که روی آن قرار دارد یا ضربه می زند تا منوی کشویی باز شود).
- اگر قبلاً موردی از لیست را دارید که می خواهید به منوی کشویی تبدیل کنید ، این مرحله را رد کنید.
مرحله 3. نام لیست خود را تعیین کنید
کلیک کنید بر روی کد و مطمئن شوید که در آن هستید کد منبع تنظیم کنید ، سپس به کد لیست سفارش داده شده خود بروید (بین یک"
"برچسب و یک"
"tag" و "" را در بالای "" جستجو کنید
tag. کلمه در نقل قول ها نام لیست شما است.
-
اگر نامی را نمی بینید ، برچسب (جایی که نام به نام دلخواه شما از لیست اشاره می کند) را مستقیماً بالای آن وارد کنید
برچسب زدن
مرحله 4. نقطه (های) گلوله را بردارید
با کلیک بر روی گزینه مطمئن شوید که در جای مناسب هستید طرح برگه و سپس کلیک بر روی طراح CSS در گوشه سمت راست بالای پنجره ، موارد زیر را انجام دهید:
- کلیک + در سمت راست عنوان "Selectors".
- #name ul را تایپ کنید که "name" نام لیست شماست.
- دکمه ↵ را دوبار فشار دهید.
- پایین بروید و کلیک کنید به سبک لیست در پنجره در پایین طراح CSS برگه
- کلیک هیچ یک در منوی بازشو ظاهر می شود.
مرحله 5. لیست مرتب شده خود را برای نمایش افقی تغییر دهید
برای انجام این کار:
- کلیک + در سمت راست عنوان "Selectors".
- #name li را تایپ کنید که "name" نام لیست شماست.
- عنوان "float" را در قسمت پایین قسمت پایین پیدا کنید طراح CSS برگه
- کلیک کنید بر روی ترک کرد بلافاصله در سمت راست عنوان "float" کلیک کنید.
مرحله 6. یک برچسب فعال برای لیست خود اضافه کنید
کلیک کنید بر روی + در سمت راست "Selectors" کلیک کنید ، سپس #name a (جایی که "name" نام لیست شما است) را تایپ کرده و ↵ Enter را دوبار فشار دهید.
مرحله 7. یک رنگ پس زمینه اضافه کنید
انتخاب کنید #نام الف در صورت لزوم ، روی برگه "رنگ پس زمینه" به شکل جعبه در بالای قسمت کلیک کنید طراح CSS پنجره ، را انتخاب کنید رنگ پس زمینه را انتخاب کنید ، و یک رنگ پس زمینه برای استفاده انتخاب کنید.
این همان رنگی است که موارد فهرست کشویی شما استفاده می کند
مرحله 8. موارد فهرست خود را از قالب "بلوک" استفاده کنید
این قالب تضمین می کند که وقتی شخصی برای کلیک یا ضربه زدن روی موردی در لیست می رود ، می تواند آن را با انتخاب کمی بالا یا زیر آن به جای انتخاب دقیق متن باز کند:
- مطمئن شوید که شما هستید #نام الف مورد در انتخاب می شود طراح CSS برگه
- به پایین به عنوان "نمایش" در پنجره بروید.
- روی سمت راست بالای عنوان "display" کلیک کنید ، سپس کلیک کنید مسدود کردن در منوی حاصله
مرحله 9. در صورت لزوم پد را اضافه کنید
اگر متوجه شدید که موارد لیست شما در مقابل هم قرار گرفته اند ، می توانید با انجام موارد زیر کمی فاصله بین آنها قرار دهید:
- مطمئن شوید که شما هستید #نام الف مورد در انتخاب می شود طراح CSS برگه
- به پایین به عنوان "padding" در پنجره بروید.
- قسمتهای بالا و پایین "px" را برای خواندن حداقل 5 تغییر دهید.
- قسمت های چپ و راست "px" را برای خواندن حداقل 10 تغییر دهید.
مرحله 10. ایجاد یک رنگ شناور
این رنگی است که وقتی نشانگر ماوس خود را روی یک مورد در منوی کشویی نشان می دهید ، ظاهر می شود:
- کلیک + در سمت راست عنوان "Selectors".
- #nave a: hover (جایی که "name" نام لیست شما است) را تایپ کرده و ↵ Enter را دوبار فشار دهید.
- روی برگه "رنگ پس زمینه" کلیک کنید.
- انتخاب کنید رنگ پس زمینه و سپس رنگ روشن تری را نسبت به رنگ زمینه انتخاب کنید.
مرحله 11. CSS را خاموش کنید
کلیک کنید بر روی چشم انداز مورد منو ، را انتخاب کنید استایل رندر ، و روی را کلیک کنید نمایش سبک ها گزینه در پنجره بازشو
اگر نمایش سبک ها گزینه خاکستری است ، در هر نقطه از سند Dreamweaver خود کلیک کنید و دوباره امتحان کنید.
مرحله 12. محتویات منوی کشویی را ایجاد کنید
شما می توانید این کار را با افزودن نقاط فرعی زیر نقطه گلوله که می خواهید از آنها به عنوان دکمه منوی کشویی استفاده کنید ، انجام دهید:
- در سمت چپ مورد لیست موردنظر برای تبدیل به منوی کشویی کلیک کنید ، سپس ↵ Enter را فشار دهید.
- زبانه را فشار دهید.
- نام اولین مورد منوی کشویی خود را وارد کنید ، سپس ↵ Enter را فشار دهید.
- نام منوی کشویی بعدی را وارد کنید ، سپس ↵ Enter را فشار دهید و در صورت نیاز تکرار کنید.
مرحله 13. محتویات منوی کشویی را به یک مورد گلوله گره بزنید
برای انجام این کار:
- کلیک + در کنار "Selectors" ، سپس #name ul ul را تایپ کرده و ↵ را دوبار فشار دهید.
- پایین بروید و کلیک کنید نمایش دادن ، سپس کلیک کنید هیچ یک در منوی بازشو
- پیدا کرده و کلیک کنید موقعیت ، سپس کلیک کنید مطلق در منوی بازشو
مرحله 14. خود منوی کشویی را ایجاد کنید
برای این کار باید یک انتخاب کننده دیگر اضافه کنید:
- کلیک + در کنار "Selectors" ، سپس #name ul li: hover> ul را تایپ کرده و ↵ را دوبار فشار دهید.
- پیدا کرده و کلیک کنید نمایش دادن ، سپس کلیک کنید مسدود کردن در منوی پاپ آپ به دست آمده
مرحله 15. محتویات منوی کشویی را به صورت عمودی نمایش دهید
به طور پیش فرض ، محتویات منوی کشویی در یک نوار افقی نمایش داده می شود ، اما می توانید با انجام موارد زیر آنها را به یک ستون عمودی وارد کنید:
- کلیک + در کنار "Selectors" ، سپس #name ul ul li را تایپ کرده و ↵ را دوبار فشار دهید.
- عنوان "float" را پیدا کنید.
- روی "هیچ" کلیک کنید () گزینه سمت راست عنوان "float".
مرحله 16. پروژه خود را ذخیره کنید
برای این کار Ctrl+S (Windows) یا ⌘ Command+S (Mac) را فشار دهید.
