مدل جعبه

در قلب یك طراحی موثر، شناختن مدل جعبه در ‌CSS‌ قرار دارد. قطعا شما ممكن است حساب كتاب حاشیه و فاصله‌عناصرتان را بدانید، اما وقتی كه عنصری می‌خواهد با عنصر دیگر تعامل برقرار نكند، چه اتفاقی می‌افتد؟ ناگهان آن همه تصاویر بدیع و زیبا كه در یك مرورگر عالی به‌نظر می‌رسیدند، ‌در مرورگری دیگر به زلزله‌ای قوی بدل می‌شوند. بدین‌ترتیب، درك درست از دانستن مدل جعبه، تفاوت میان حالت چرخشی و حالت مستقیم مهم‌تر است. همچنین، بهتر است همواره مرورگرهای قدیمی همچون اینترنت اكسپلورر 6 را در نظر داشته‌باشید.

ستون‌های شناور

وقتی موقعیت‌دهی دقیق به نتیجه نمی‌رسد، مردم دو كار را انجام می‌دهند، فورا به‌حالت ویندوزی بازخواهند گشت، یا راه‌حل دیگری را انتخاب می‌كنند:

محتوای شناور در درهای بازشده احتمال آمد‌‌و‌رفت دارد. اگر بدانید كه چطور عناصر را می‌شود شناور كرد، تا حدزیادی موفق خواهید بود طراحی مدرن و سریعی داشته باشید، البته قبلش خوب یاد بگیرید كه چطور در صورت وجود بك‌گراند، شناور را تنظیم كنید یا به حالت قبل برگردانید كه درست نشان داده شود. ‌ ‌

اندازه‌گیری با اندازه‌های ‌EM‌

معیار ‌em‌ برای طراحی وب، بسیار مهم است. یادتان باشد كه حتما دو چیز را با ‌em‌ مقداردهی كنید: فونت‌ها و طرح‌بندی‌ها.

اینترنت اكسپلورر 6 و قبل از آن، تغییر اندازه متونی كه با مقیاس پیكسل طراحی شده‌اند را مجاز نمی‌داند. در این حالت حالت ‌Larger Text‌ برای كاربران كار نمی‌كند. اما وقتی با ‌em‌ مقداردهی می‌كنید، این مشكل حل می‌شود. یكی دیگر از اهمیت‌های اندازه‌دادن به متون با مقیاس ‌em‌، تا زمانی كه كاربران به مرورگرهای جدیدتر نرفته‌اند، از بین نمی‌رود. ‌ ‌

اندازه طرح‌بندی‌ها را با ‌em‌ مشخص كردن، مزایای بیشتری دارد و انعطاف بیشتری حاصل می‌شود. وقتی با اندازه متون بازی می‌كنید، حتما دیده‌اید كه در بسیاری از سایت‌ها، متن بزرگ می‌شود اما پس‌زمینه و بك‌گراند بزرگ نمی‌شود، این به‌این خاطر است كه متن را با مقیاس نسبی ‌pt(،(em‌،‌ مقدار دهی كرده‌اند و طرح‌بندی را با مقیاس مطلق (پیكسل.) در این حالت، متون از پس‌زمینه بیرون می‌زند و طرح درهم می‌رود. به‌سادگی می‌توان با مقدار دهی ‌em‌ این مشكل را حل كرد و به پایایی طراحی در مرورگرها، رزولوشن‌ها و محیط‌های مختلف، افزود.

جایگزینی عكس

عناصر متنی خسته كننده ما را خشنود نمی‌كنند. همه گرافیست‌ها به‌دنبال استفاده از عناصری چون گرادیان‌ها، شعله‌ها و جلوه‌های شیشه‌ای هستند و همه‌شان فونت‌های خاصی را برای نقاط خاصی می‌پسندند كه هنوز امكان پیاده‌سازی‌شان نیست. بنابراین، تكنیك جایگزینی عكس در نقاط مختلف صفحه، باعث می‌شود صفحه‌ها زنده‌تر، زیباتر و پویاتر به‌نظر برسد. اما باید در نظر گرفت كه ویژگی‌های داخلی هر المان تصویری را با دقت بنویسیم كه برای بهینه‌سازی موتورهای جستجو به مشكل برنخوریم.

منوهای شناور

اگر توانستید در ستون‌های شناور مهارت كافی را كسب كنید، بخش دیگری كه بسیار هم هنر می‌خواهد، منوهای شناور است. بسیاری از حرفه‌ای‌های دنیای طراحی وب، از لیست‌های مرتب‌نشده منوهای فوق‌العاده می‌سازند و می‌توانید منوهای ‌CSS‌ زیادی را به‌طور آماده پیدا كنید و آن‌ها را مطابق میل خود در آورید.

نوار مهم است

اگر به‌قدر كافی كنجكاو بودید و فایل‌های پس‌زمینه ‌(Texture)‌ بازی‌های ویدئویی را باز می‌كردید، قطعا متوجه می‌شدید كه تعداد زیادی از انواع مختلف پس‌زمینه را كنار هم قرار داده و یك‌جا لود می‌كنند و به‌ازای نیاز هر جسم، تكه‌ای از فایل را به جسم مورد نظر اختصاص می‌دهند. چسباندن چند عكس به یكدیگر و گذاشتن توی یك‌عكس دیگر به یك تكنیك محبوب برای حل مشكلات‌ ‌بدل شده است. بدین ترتیب، می‌توانید لوگو، آیكن‌ها، لبه‌های كناری منوها، لبه‌های بالا و پایین جعبه‌های اخبار و ... را توی یك فایل بگذارید و بعد با مقدار دهی مختصات، آنها را سر‌جای خود بگذارید.

بزرگترین مزیت این تكنیك را، در زمان بارگذاری صفحه‌ها و همچنین دكمه‌های چند‌حالته می‌توان حس كرد. به‌خاطر تك‌فایلی بودن تصاویر و عدم بارگذاری تكه‌های خرد زیاد، می‌توان زمان زیادی را در بارگذاری وب‌سایت صرفه‌جویی كرد، از طرف دیگر، وقتی دكمه لود شد، تصویر حالت‌های دیگرش هم لود می‌شود و بدین ترتیب، وقتی ماوس را روی دكمه می‌بریم، دیگر نیازی به انتظار كشیدن برای بارگذاری حالت بعدی دكمه وجود ندارد.