مقدمه : یادش بخیر. استادی داشتیم و هنوز هم داریم البته. چون الان ترم هشتم و فقط یه درسم مونده دیگه باهاش واحدی ندارم. همیشه می گفت برید خدا رو شکر کنید که این رشته رو قبول شدید چون بهترین رشته دانشگاهیه. البته سر کلاس طراحی و پیاده سازی و مهندسی نرم افزار کمی نظرش عوض شده بود. چون می گفت ما مهندسان نرم افزار برای خودمون حق امضا نداریم و مثل مهندسان مثلا عمران نیستیم که نتونه کسی غیر ما پروژه رو ور داره و تایید کنه. راست هم می گفت وقتی هر کی با دو تا ترم درس خوندن تو آموزشگاه ادعای برنامه نویسی C# و ASP.net می کنه در حالیکه اصلا اصول اولیه برنامه نویسی رو نمی دونه خیلی ناراحت کنندست.
یادمه تابستون دو سال پیش بود که کتاب HTML ناقوس و خریدم و موقع استراحت سر کار می خوندم. خیلی ازش خوشم اومد بویژه تکنیک برنامه نویسی با css. راستش به نسبت خیلی چیز ها آسونتر بود. اونروز ها خیلی با وبلاگ نویسی آشنا نبودم. ولی با همون چیز های که یاد گرفته بودم چند تا سایت استاتیک درست کردم.
من طراح وب هستم و امیدوارم خیلی ها بدونند این کار با طراحی قالب فرق داره. چیدن یه سری کد css نهایتا کنار هم بدون برنامه نویسی کار بچه های ترم یکی کامپیوتر هم نمی تونه باشه چون بیشتر شبیه یک بازیه. طراحی قالب هم برای من فقط یک سرگرمیه. چون از ور رفتن با css خیلی خوشم می آد. تقلید کردن از کد های یک طراح بیشتر شبیه یک شوخیه.
خیلی از تکنیک های css ثابت اند و خیلی ها ازشون استفاده می کنند مثل همین تکنیک دکمه های ناوبر. اینکه شخصی با چند خط css یاد گرفتن بقیه رو متهم به تقلید از اون کنه اصلا نمی تونه برام جدی باشه. هیچ کس حق نداره بگه حق کپی رایت ناوبر با تکنیک لیست نامرتب مثلا برای منه. من روز های بعد هم بقیه تکنیک های Css رو که در این وبلاگ بکار رفته رو آموزش می دم تا خدای css ایران زحمت افشا کردن کد های کسی رو نکشه. در ضمن امیدوارم کسی که ادعای طراحی داره در باره کد باز و اوپن سورس هم چیزکی بداند. راستی لینک هم ندادم تا بگم من دنبال تحقیر شخص خاصی نیستم و هر قدر اون تلاش برای ضایع بازی در بیاره من دم به تله اش نمی دم و اجازه نمی دم وجهه ای که برای این وبلاگ به زحمت بدست آوردم فدای ماجرا جویی های سخیف کسی بشه. امیدوارم به او توهین هم نکرده باشم چون این یه مورد کار اصلا تو کت من یکی نمی ره.
نکته آخر اینکه من قالبم رو برای IE طراحی کردم و برام مهمه که تو اون درست نشون داده بشه اگه به کم تو اندازه با FF مشکل داره خیلی مهم نیست. حدودا کمتر از 6 درصد خواننده های اینجا از FF استفاده م کنند و تازه به نسبت خیلی سایت و وبلاگ ها با اون همخونی بیشتری داره. درست کار کردن یک قالب در یک مرورگر مشخص اصلا نشونه کار درستی نیست. امیدوارم به اندازه کافی مفهوم باشه
اگر به بالای قالب وبلاگ من نگاه کنید, دکمه هایی را می بینید که با حرکت موس بر روی آن رنگشان عوض می شود. من به این دکمه ها ناوبر می گویم, چون در واقع برای انتقال بین صفحات مختلف وبلاگ بکار می روند- البته وبلاگ صفحات جانبی زیادی ندارد و این دکمه ها را بیشتر برای زیباتر شدن قرار داده ام - .همین Home, About, Xml, Messageو About. در این پست می خواهم نحوه ساخت چنین دکمه هایی را به شما آموزش بدهم. تکنیک بکار رفته در این پست لیست های نامرتب Unorder List است. البته تکنیک های دیگری هم برای ساخت چنین ناوبر هایی وجود دارد که من در قالب قبلی ام از آن تکنیک استفاده کرده بودم. به هر حال در این پست همان تکنیک جدید را آموزش می دهم.
مراحل ساخت
قبل از اینکه css هم وارد کار شود و طراحان سعی کنند بجای تگ های منسوخ شده html از css استفاده کنند, این تگ ها وجود داشتند و خیلی آنها را با نام لیست می شناسند. به تکه کد زیر نگاه کنید. سعی کنید در هر مرحله این کد ها را در Note Pad با پسوند .html ذخیره کنید و با مرورگرتان نتیجه کار را ببینید.
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5 we'll make a bit longer so that it will wrap</li></ul> |
حالا سعی می کنیم این کد ها را در داخل تگ div قرار بدهیم. آی دی Button را هم به div اعمال می کنیم.
<div id="Button"><ul> <li><a href="<$BlogURL$>">Home</a></li> <li><a href="http://amirfs.blogspot.com/atom.xml">Xml</a></li> <li><a href="mailto:amirfs@gmail.com">Email</a></li> <li><a href="ymsgr:sendim?sarzaminshomali">Message</a></li><li><a href="">About</a></li> </ul></div> |
در این پست سعی می کنم از استایل شیت خارجی استفاده کنم. بنابراین کد های مربوط به آی دی Button را در قسمت style بالای صفحه تعریف می کنم. برای این کار در بالای صفحه قبل از تگ بسته </head> باید در میان تگ های باز و بسته <style> و </style> کد های زیر را قرار دهید. چون در قالب من این دکمه بالای دو ستون لینک ها و لینکدونی قرار می گیرند, بنابراین عرض کلی ستون 300 در نظر گرفته شده است. دقت کنید من این اندازه و نوع فونت رو بر اساس علاقم انتخاب کردم. اگر سایز فونت شما بزرگتر باشه ممکن عرض کل دکمه ها از 300 بیشتر بشه و بنابراین دکمه تو یه خط جا نگیرن و بنابراین انوقت باید سایز 300 را بیشتر کنید تا تو یه خط جا شوند.
#Button { width: 300px; font-size:10px; font-family:tahoma; margin-top:10px; }} |
کد ها را دوباره ذخیره کنید و نتیجه را ببینید. به بولت های سمت چپ نگاه کنید. چنین بولت هایی برای ما که قصد داریم با استفاده از این کد ها دکمه های ناوبر درست کردیم, چندان مناسب نیست. پس با اضافه کردن این کد به استایل آن بولت را حذف می کنیم. دقت کنید این کد را در همان محدوده استایل اضافه کنید.
#Button Ul{list-style: none;} |
حالا با توجه به اینکه دکمه های ناوبر ما باید خطی کنار هم قرار بگیره. کافیه به css بگیم که این لیست رو خطی نشون بده. برای این کار به #Button Li کد نمایش خطی رو اضافه کنیم.
#Button li { DISPLAY: inline; } |
حالا نتیجه را مجددا مشاهده کنید.می بینید که براحتی تونستیم این دکمه ها رو خطی کنیم. اگه نتیجه کار خیلی راضی تون نمی کنه. زیاد ناراحت نشید. چون با چند تا اضافه کردن آی دی اون قضیه هم حل میشه. بنابراین اصل تکنیک همینی بود که تا اینجا گفته شد. حالا در ادامه سعی می کنیم دکمه ها رو به شکل زیبایی در بیاریم.
با توجه به اینکه محتویات هر یک از این دکمه ها یک لینکه, سعی می کنیم کاری کنیم که هر لینک در داخل یک کارد قرار بگیره. درست شبیه وبلاگ خودم. البته رنگ کادر دور این دکمه خیلی کمرنگه باید خوب نگاه کنید. برای این کار این آی دی را به بخش استایل ها اضافه کنید.
#Button li a } padding: 5px; border: 1px solid #DAE0D2; color: #000000; font-weight:bold; text-decoration: none; { |
برنامه دوباره اجرا کنید. تنها چیزی که مونده اینکه کاری کنیم با حرکت موس بر روی این دکمه رنگشون عوض شه. ما می خواهیم با حرکت موس رنگشون سبز کمرنگ شه.
#Button li a:hover { border: 1px solid #f3f3f3; background-color: #f3f3f3; color: #000000; { |
این پست رو خیلی سریع و در عرض چند دقیقه و برای پاسخ دادن به شخصی که فکر می کنه خدای css هست نوشتم تا بگم کار کردن با css چقدر آسونه و اینقدر پز دادن نداره. برادر عزیز تکنیک هایی که ما بکار می بریم همگی تکنیک های شناخته شده ای هستند که قبل از ما صد ها نفر ممکنه از اونا استفاده کرده باشند. من هم این تکنیک رو از سایت ALA یاد گرفتم . هر چند کار خیلی مشکلی نبود. در روز های بعد درباره سایر تکنیک های css باز هم خواهم نوشت و هر چی بلدم رو سعی می کنم به بقیه یاد بدم تا اونا هم استفاده کنم و اصلا اگه بخواد باز هم صحبت های محترمانه من با خودش رو با بی ادبی و لحن تحقیر آمیز جواب بده اصلا می رم و یه کتاب css می نویسم. اصلا حاضرم با هات مسابقه بزارم برای طراحی. هر چند اصلا دوست ندارم این وبلاگ به حاشیه کشیده بشه. و بجای کارکرد اصلی محلی باشه برای پاسخ به پست های توهین آمیز شما.
هیچ نظری موجود نیست:
ارسال یک نظر