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

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

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

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

ایجاد Rollovers تصویر با استفاده از CSS در Dreamweaver
ترجمه شده توسط گوگل ترجمه

ارسال یک اخیرا توسعه یک پیام خصوصی به بی بی سی و شما یک مثال بسیار خوبی از CSS می تواند مورد استفاده قرار گیرد به تصویر بسیار ساده ای ایجاد رول اور بدون نیاز به ایجاد، و سپس وارد کردن 2 نسخه از تصاویر مشابه (که شما به هنگام را ببینید قرار دادن Rollovers). در این مقاله، ما یک navigation bar از تصاویر است که همه استفاده از CSS همان فعال اثرات هزینه های ساخته شده ایجاد کنید.


گام 1 - جمع آوری تصاویر

میرم انتخاب 3 عکس در اندازه بسیار شبیه است. با استفاده از فتوشاپ هر تصویر W 300 پیکسل پیکسل توسط H 200 در قطعنامه ای از 72 نقطه در اینچ ساخته شده است. که واقعا مهم در اینجا هر چند این است که تصاویر در اندازه با یکدیگر سازگار هستند.

3 images


مرحله 2 - ایجاد یک div شامل: یک navigation bar را به

باز کردن پانل را وارد کنید، آن را به طرح و انتخاب گزینه DIV AP قرعه کشی.

AP Div


قرعه کشی DIV AP را بر روی صفحه خود پست کنید، استفاده از پنل ملک را به اندازه به V 220px 930px.


مرحله 3 - قرار دادن 3 عکس

کشیدن هر تصویر به نوبه خود به DIV AP به طوری که آنها به صورت افقی در تراز وسط قرار دارد، با هیچ شکاف بین آنها را.

lined up images


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

با استفاده از CSS برای کنترل هزینه های چه اتفاقی می افتد به این معنی است که که همه rollovers، متن یا تصاویر خواهد شد همان مدل دهید. برای جلوگیری از این وضعیت، برای اولین بار به سبک کلاس به هر تصویر ایجاد کنید.

null


در پانل سبک های CSS ایجاد قانون جدید CSS، مجموعه ای از نوع کلاس و آن را نوار پیمایش نام. استفاده از سبک گزینه های مرزی ایجاد چپ


گام 5 - به کار بردن سبک کلاس

هر تصویر را انتخاب کنید و با استفاده از منوی کشویی کلاس در پنل Properties به تنظیم هر یک به طبقه ای به نام نوار پیمایش.

class applied


مرحله 6 - ایجاد یک سبک مرکب شناور

در حال حاضر به مجموعه ای از سبک هزینه های به کار گرفته شوند.

compound


نام سبک: شناور (: سبک شناور کنترل تنظیمات سبک برای لینک وقتی که ماوس بر روی آنها).


گام 7 - ایجاد شفافیت

برای به پایان رساندن اثر، و ایجاد تصاویر محو کدورت 50٪ هنگام نورد بر، به نظر کد سوئیچ (و یا تقسیم اگر youd ترجیح می دهند) و پارامتر شناور هستند که نزدیک به ابتدای کد نوشته شده است.

code view


اضافه کردن کد زیر به سبک ترکیب 50٪ تغییر کدورت ایجاد کنید:

{

فیلتر: آلفا (تاری = 50).

کدورت: 0.5؛

}


گام 8 - ایجاد لینک ها

تصویر اول را انتخاب کنید و با استفاده از میدان به لینک موجود در پنل Properties یک لینک به ایجاد، سعی کنید با قرار دادن http://www.macprovideo.com/hub به آن به عنوان مثال.

link made


تکرار این برای همه 3 عکس به طوری که آنها تبدیل به لینک.


گام 9 - تست صفحه

در نهایت، ذخیره کردن پرونده روی صفحه

rollovers


رول را بیش از هر تصویر به تغییر کدورت و مرزهای روشن است.

سرد متعجب؟


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.
© 2017 macProVideo.com
a division of NonLinear Educating Inc.
Link