X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

دسترسی به حق بیمه رایگان

دسترسی به کتابخانه تمام ما از مقالات توپی حق بیمه ، فایل های پروژه و اولین 10 ٪ از هر یک از مقالات ویدئو از کتابخانه خودآموز آنلاین.

ایجاد حساب کاربری رایگان شما در حال حاضر!

اضافه کردن و ویرایش Accordions با هوش با استفاده از CSS در Dreamweaver
  • اضافه کردن و ویرایش Accordions با هوش با استفاده از CSS در Dreamweaver

ترجمه شده توسط گوگل ترجمه

Accordions چالاک راه لذت بخش است که در آن به ارائه مقادیر زیادی از اطلاعات را در یک فضای محدود. آنها همچنین به


گام 1 -- ایجاد یک DIV AP

من می خواهم برای کنترل موقعیت با هوش با قرار دادن آن در داخل DIV AP. برای ایجاد یک DIV AP برو به پنل قرار دادن و چیدمان (layout) را انتخاب کنید

AP Div Draw

AP DIV قرعه کشی


با استفاده از مکان نما یک جعبه بر روی صفحه رسم کنید. جعبه آبی که به نظر می رسد DIV خود AP است.


مرحله 2 -- موقعیت و اندازه DIV AP

برای حرکت DIV AP (که فقط یک تگ DIV است که برخی از CSS در کنترل قالب بندی آن) گرفتن دسته های کوچک سفید در بالا سمت چپ خود و کشیدن میان چیزهای دیگر گذارند خود را به صفحه خود پست کنید.

Re-size AP DiV

تغییر اندازه AP DIV


برای تغییر اندازه DIV AP شما می توانید از یکی از نقاط لنگر آن آبی و گرفتن و کشیدن به اندازه مورد نظر.


گام 3 -- اضافه کردن ، گذاشتن آکوردئون با هوش

با کلیک در داخل DIV AP داخل مکان نما را فعال و سپس از پانل درج را انتخاب کنید چیدمان

Spry inserted

با هوش درج شده


آکوردئون با هوش به نظر می رسد در داخل DIV AP که شما رسم کرده اید.


گام 4 -- اضافه کردن پانل های بیشتر

آکوردئون با هوش با استفاده از پانل اجازه می دهد تا به کاربران برای آشکار و یا پنهان کردن محتوای آن در یک حرکت مشابه به آکوردئون ، از این رو به نام. من اضافه کردن برخی بیشتر.

با آکوردئون زرنگ انتخاب شده (که شما می توانید با کلیک کردن بر روی برچسب رنگ فیروزه ای آکوردئون با هوش). با استفاده از پنل Properties برای اضافه کردن برچسب های بیشتر.

Labels in properties

برچسب در ملک و املاک


استفاده از را کلیک کنید برای اضافه کردن 2 بیشتر پانل بنابراین این را مشاهده می کنید :

More labels added to spry

بیشتر برچسب به زرنگ ارسال


مرحله 5 -- ویرایش مطالب از با هوش

زمانی که شما شناور مکان نما بر روی نوار برچسب در هر آکوردئون با هوش ، نماد چشم کمی ظاهر خواهد شد. کلیک کردن بر روی این نماد ، محتویات آن تب خاص را قادر می سازد به شما را ویرایش را باز کنید.

Eye and contents

چشم و محتویات


برجسته کردن متن از برچسب به شما اجازه می دهد برای تغییر نام برچسب را. تاکید متن "مطالب" اجازه می دهد تا شما را به ویرایش متن موجود در داخل با هوش است.

نکته : کپی و رب مقدار زیادی از متن را در اینجا.

Filled Spry

پر شده با هوش


تکرار این تا زمانی که شما محتوا و نام برای هر برچسب.

برای دیدن چگونگی آکوردئون با هوش عمل ، در نمایش زنده آن را تغییر و به نوبه خود با کلیک بر روی هر یک از زبانه پانل. خوب ، درست است؟

Live View Button

زنده! دکمه نمایش ها


نمایش زنده فعال نگه دارید از اینجا به آن ، بنابراین شما می توانید تغییرات شما به ما قول میدهید که نظارت.


گام 6 -- سبک زبانهها پانل را ویرایش کنید

نگاهی به پنل سبک CSS ، شما یک شیوه نامه به نام SpryAccordion.css را ببینید :

Spry CSS

با هوش CSS


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

Panel Tab Style

پانل سبک نوار


شما از خواص CSS را ببینید که به طور پیش فرض رنگ پس زمینه است # CCCCCC. تغییر این متن به خواندن # 00CC66 (نکته : این می تواند به # 0C6 کوتاه)

Green tabs

زبانه سبز


پانل به سبز تغییر دهید.

AccordionPanelOpen و. AccordionPanelTab و تنظیم رنگ پس زمینه را به # 0F9 .


گام 7 -- سبک زبانهها متمرکز بر را ویرایش کنید

سعی کنید کلیک کردن بر روی زبانهها پنل و شما خواهید دید که آنها به نوبه خود آبی است. این چرا CSS کنترل خواص متمرکز به آبی مجموعه :

Blue Spry

آبی با هوش


برای تغییر آنها را انجام موارد زیر در CSS :

برای ایجاد یک نماد برای تب که باز است :

  • Select .AccordionFocused, .AccordionPanelOpen and .AccordionPanelTab and set their background color to #9FC


برای اطمینان حاصل کنید که هر پانل بسته در حالی که آکوردئون با هوش فعال است سبز همان پانل بسته هنگامی که آکوردئون با هوش غیر فعال است :

  • Select .AccordionFocused and .AccordionPanelTab and set their background color to #0C6

Finished Spry

تمام شده با هوش


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


David Smith

David Smith | Articles by this author

David Smith is Scotland's most qualified Apple and Adobe certified trainer. Having completed his education at Edinburgh College of Art's BAFTA winning Film School, David moved straight into TV production, first as a Vision Mixer then quickly becoming, at the age of just 24, a director of live TV studio productions. In 2001 he moved into Higher Education where he became a lecturer in TV Production, specializing in post-production and live studio production. During this time, and working with the support of the BBC, Channel 4 and independent production companies, David was instrumental in the design, development and implementation of industry-approved vocational courses across Scotland's Colleges. In 2006, after working closely with Apple Computers to create a unique multimedia studio for education at the Music and Media Centre in Perth, David became Scotland's first Apple-Certified Trainer for Pro Apps. This led on to David forming the first Apple Authorized Training Centre for Education, north of Manchester. In 2008 David made the move to full time training and joined the ranks at Academy Class, Ltd. where he continues to train industry professionals as a certified trainer across the Adobe Creative Suite and Apple Pro Apps range.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link