ورود به اکانت شما

نام کاربری *
رمز عبور *
مرا بخاطر بسپار

ایجاد حساب کاربری

فیلد های ستاره دار را پر کنید.
نام *
نام کاربری *
رمز عبور *
تکرار رمز عبور *
ایمیل *
تکرار ایمیل *
کپچا *
بارگذاری کپچا

ساخت یک منوی باز شو با HTML وCSS مطلب ویژه

توسط 07 فروردين, 1392 10975 0

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

head


با توجه به تیکت هایی که به پشتیبانی بخش آموزش ارسال شده است  و از ما خواسته بودند که آموزش طراحی سایت رادر بخش آموزش فعال کنیم ، با تایید نظر مدیریت شرکت طلوع فن آوران آسا ، قرار شد فقط آموزش CSS, HTML در قالب طراحی سایت به طور عملی توضیح داده شود .به این صورت که یک روز قالب در محیط فتوشاپ طراحی و روز بعد همان قالب با HTML وCss طراحی بشود . به امید خدا از هفته آینده به مدت یک ماه حدود 10 قالب با مدلهای مختلف در فتوشاپ طراحی و سپس آن را به صورت کاملا تصویری و قابل فهم کد نویسی می کنیم تا علاقه مندان به طراحی وب سایت از این آموزشها استفاده کنند .

برای شروع می خواهیم یک منوی باز شو یا Pop UP را با  HTML وCSS طراحی کنیم .
نحوه کار به این صورت هست که ابتدا آیکون های مورد نظر خودمان را در فتوشاپ طراحی می کنیم . اینکار بسیار زمان بر هست و با توجه به وقت محدود ما غیر ممکن ، به همین دلیل من آیکون های آماده ای که می خواهم در فتوشاپ طراحی کنم را برای شما جهت دانلود قرار می دهم .(پایان آموزش)

 

1. فتوشاپ را باز کنید .
2. آیکون هایی که دانلود کرده اید را با زدن کلیدهای Ctrl+O وارد فتوشاپ نمایید.

Menu-Pop-Up-CSS--ASARAYAN-1

3. در مرحله دوم بعد از وارد کردن آیکون های اندازه آنها را به 48×48 پیکسل تغییر سایز میدهیم . برای انجام اینکار از نوار ابزار بالای صفحه منوی Image > Image size را انتخاب کنید .شورتکات ctrl+alt+i

Menu-Pop-Up-CSS--ASARAYAN-2

4. بعد از تغییر سایز هر 10 آیکون یک صفحه به ابعاد 50×500 ایجاد کنید .شورتکات ایجاد صفحه جدید Ctrl+N
4.1 . هر 10 آیکون را به ترتیب درگ کرده و روی صفحه جدید قرار دهید

Menu-Pop-Up-CSS--ASARAYAN-3

4.2. برای تراز کردن تمام آیکون ها در یک خط کافیست کلید Ctrl را پایین نگاه داشته و تمام آیکون ها را انتخاب کنید سپس از نوار ابزار بالای صفحه بترتیب یکبار آیکون Align Top Edge و یکبارDestribute Left Edge را انتخاب کنید . از تصاویر زیر کمک بگیرید.

Menu-Pop-Up-CSS--ASARAYAN-4

نکته : بعد از قرار دادن آیکون ها در کنار هم یکبار این لایه را با نام Icon2 ذخیره کنید .در مراحل بعدی می خواهیم از آن استفاده نماییم

5. در مرحله بعد باید نصف آیکون ها را با ابزارRectangular Marquee Tool حذف کنیم . برای اینکه کادر کشیده شده دقیق در بیاید از نوار ابزار بالای صفحه گزینه Style را برابر با Fixed Size قرار داده و اعداد 500.25 را وارد کنید .
بعد از وارد کردن اعداد مورد نظر کافیست پایین لایه ایجاد شده کلیک کنید . برای راحتی کار که نیاز نباشد برای هر آیکون یکبار کلید Delete را بزنید تمام آیکون ها را با کلید Ctrl انتخاب و کلیدهای Ctrl+E را بزنید .

Menu-Pop-Up-CSS--ASARAYAN-5

Menu-Pop-Up-CSS--ASARAYAN-6

6. در مرحله بعد ابزار Line Tool را انتخاب و یک خط با درصد رنگی 8e8e8e بکشید.
بعد از کشیدن خط اول یک کپی از آن بگیرید و زیر همه آیکون ها قرار دهید

Menu-Pop-Up-CSS--ASARAYAN-7

Menu-Pop-Up-CSS--ASARAYAN-8

7. ابزار Eliptical Marquee Tool را انتخاب کرده و یک بیضی مشکی رنگ همانند تصویر زیر در یک لایه جدید بکشید .
بعد از کشیدن ناحیه مشکی رنگ از فیلتر Blur>Gussion Blur پیکسل را برابر با 5 پیکسل قرار دهید

سپس ناحیه پایین حاله کشیده شده را با ابزار پاک کن پاک می کنیم

Menu-Pop-Up-CSS--ASARAYAN-9

Menu-Pop-Up-CSS--ASARAYAN-10

Menu-Pop-Up-CSS--ASARAYAN-11

8. بعد از کشیدن حاله مشکی رنگ با زدن کلیدهای Ctrl+J یک کپی گرفته و روی تمام آیکون ها قرار میدهیم

Menu-Pop-Up-CSS--ASARAYAN-12

9.بسیار خوب یک لایه جدید با ابعاد 85×500 بدون بک گراند ایجاد کنید .

Menu-Pop-Up-CSS--ASARAYAN-13

10. آیکون هایی که در مرحله سوم به نام Icon2 ذخیره کرده اید را باز کنید و کل آیکون ها را وارد لایه جدید بدون بک گراند نمایید . در مرحله بعدی آیکو هایی که به دو قسمت تقسیم کرده ایم را نیز بالای لایه جدید همانند تصویر زیر قرار دهید. لایه آیکون را بانام navigation.png و فرمت png درون پوشه tem ذخیره کنید

Menu-Pop-Up-CSS--ASARAYAN-14

11. در این مرحله می خواهیم صفحه HTML وCss خودمان را ایجاد کنیم . شما می توانید از چند نرم افزار برای کد نویسی استفاده کنید :
1.نوت پد ویندوز 2.Notepad++ و نرم افزار  Nusphere PhpEdکه می توانید از اینترنت نرم افزارهای نام برده شده را دانلود کنید

یک فولدر به نام Tem ایجاد کنید . در صورتیکه نرم افزارهای نام برده شده را ندارید نوت پد را باز کرده و از منوی File>Save as را انتخاب کنید . یکبار فایل را با نام Index.htmlویکبار با نام Style.css ذخیره کنید .

Menu-Pop-Up-CSS--ASARAYAN-15

Menu-Pop-Up-CSS--ASARAYAN-16

12. من نرم افزار Nusphere PhpEd را باز می کنم . برای شروع کدهای پایه HTML را در صفحه Index.html تایپ میکنم .لینک به فایل Css را نیز بین تگ head اضافه کرده ام

Menu-Pop-Up-CSS--ASARAYAN-17

13.  صفحه ای که می خواهیم ایجاد کنیم تشکیل شده از یک قسمت اصلی به نام container و زیر مجموعه آن Title
تگ های Html بین تگ <body> قرار می گیرد .
من ازتگ

همراه با Id='container استفاده میکنم
نکته : معیار را بر این قرار میدهم که با تگها کاملا آشنایی دارید .

14. یک لوگو بدون پس زمینه با نام title.png در فتوشاپ درست کردم و داخل فولدر tem قرار دادم . حالا در کد زیر مشاهده می کنید که با استفاده از تگ <img> به title.png لینک داده ام

Menu-Pop-Up-CSS--ASARAYAN-18

15. حالا با استفاده از تگ <ul> لینکهای صفحه اصلی را ایجاد میکنم .دقت داشته باشید که برای هر تگ <li> یک Class با نام آیکون مورد نظر را وارد میکنم

بر روی صفحه index.html کلیک کنید صفحه شما باید به شکل زیر نمایش داده شود .

Menu-Pop-Up-CSS--ASARAYAN-20

16. بسیار خوب فایل Style.css را باز کنید تا ظاهر صفحه را تغییر دهیم.
ابتدا دستورات مربوط به رنگ پس زمینه .فاصله از سمت راست .چپ . پایین.بالا را تغییر میدهیم .

Menu-Pop-Up-CSS--ASARAYAN-21

Menu-Pop-Up-CSS--ASARAYAN-22

17. برای اینکه مطالب صفحه اصلی در وسط صفحه قرار بگیرد از تگ margin: auto استفاده میکنم . عرض صفحه را نیز برابر با width:550px قرار میدهم .

Menu-Pop-Up-CSS--ASARAYAN-23

18. مشخصات تایتل صفحه را می خواهم تغییر دهم

Menu-Pop-Up-CSS--ASARAYAN-24

16. در این مرحله می خواهیم لینکها را از صورت عمودی به افقی تغییر داده و اشکال دایره را حذف کنیم

Menu-Pop-Up-CSS--ASARAYAN-25

Menu-Pop-Up-CSS--ASARAYAN-26

17. همانطور که می بینید لینکها به هم چسبیده اند حال می خواهم با استفاده از Class که برای لینک ها ایجاد کرده ایم فاصله بین لینکها را درست کنیم .

Menu-Pop-Up-CSS--ASARAYAN-27

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

Menu-Pop-Up-CSS--ASARAYAN-28

Menu-Pop-Up-CSS--ASARAYAN-29

19. حال این مرحله رو باید برای 9تا آیکون باقی مانده هم تکرار کنیم با این تفاوت که برای آیکون های بعدی به جر آیکون شماره 1 باید -50px جلوتر هم نمایش داده بشه .برای اینکه دقیق تر متوجه بشید به تصویر زیر دقت کنید .

نیازی نیست همه کدها را تایپ کنید ، کد لینک اول را 9 بار دیگر کپی کرده و اسم لینکها را به ترتیب تغییر دهید .

Menu-Pop-Up-CSS--ASARAYAN-30

Menu-Pop-Up-CSS--ASARAYAN-31

20. امیدوارم تا این مرحله خسته نشده باشید.نوبت میرسه وقتی ماوس را روی لینکها می بریم قسمت پایین تصویری که ساختیم نمایش داده بشه

Menu-Pop-Up-CSS--ASARAYAN-32

21. حالا باز کافیه عین مرحله قبل این دستور را 9 بار دیگه کپی و اسم کلیدها را تغییر بدهید

Menu-Pop-Up-CSS--ASARAYAN-33

Menu-Pop-Up-CSS--ASARAYAN-34

برای مشاهده دموی تمرین آموزش داده شده کلیک کنید

این مورد را ارزیابی کنید
(0 رای‌ها)
آخرین ویرایش در چهارشنبه, 13 خرداد 1394 ساعت 21:09
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz
تک وب دیزاین-قالب فارسی جوملا