صفحات سایت شما به ویژه اگر حاوی اطلاعات متنی باشند یا شامل جدول و فرم و اطلاعات مفید باشند، ممکن است توسط بازدیدکنندگان روی کاغذ به چاپ برسند. همچنین ممکن است بخواهید برخی گزارش‌های مورد نیاز کاربران را به شکلی ایجاد کنید که هنگام چاپ شکل مناسبی داشته باشند. مرورگرهای جدید قابلیت‌های متعددی برای کنترل […]
بیشتر بخوانید...
طراحی سایت هرچند بیشتر یک کار تخصصی و خدماتی است که به مهارت فنی نیازمند است ولی بدون داشتن ابزارهای تخصصی انجام این کار با کیفیت و در زمان مناسب امکان‌پذیر نیست. بسته به اینکه سایت مورد نیاز چه کاری انجام بدهد و برای طراحی سایت از چه روش و چه زبان برنامه‌نویسی استفاده شود، […]
بیشتر بخوانید...
فضای در برگیرنده فلکس (flex container) ، برای پر کردن فضای خالی موجود یا جلوگیری از سرریز شدن آیتم ها، آنها را کوچک می کند و میتوان بلاک های عمودی و درون خطی افقی را با flex تولید کرد. Flexbox می تواند کارهایی را انجام دهد که Grid نمی تواند انجام دهد. گرید و فلکس […]
بیشتر بخوانید...
فونت یکان یکی از شناخته‌شده‌ترین فونت‌های مورد استفاده در تایپ فارسی است. این فونت در سال‌های طولانی برای استفاده در کارهای چاپی، تبلیغات و استفاده در رایانه‌ها کاربرد داشته است و نسخه‌های گوناگونی از آن نیز در اینترنت قابل دریافت است. استفاده از فونت‌ها در محیط وب به رعایت اصولی نیازمند است زیرا این فونت‌ها […]
بیشتر بخوانید...
یکی از دستورات CSS که به تنهایی یا به صورت ترکیبی در طراحی سایت کاربرد زیادی دارد، دستور background-size است. این دستور مشخص می‌کند که تصویر پس‌زمینه در چه ابعادی نمایش داده شود. با توجه به اینکه اندازه‌ی تصویر و اندازه‌ی عنصر نمایش‌دهنده‌ی تصویر مخصوصا در طراحی سایت واکنش‌گرا متغیر است، لازم است تا تصویر […]
بیشتر بخوانید...
در این مقاله به معرفی 4 فریم ورک مطرح و برتر می‌پردازیم. با استفاده از این فریم ورک‌ها می‌توانید پروژه‌های با کیفیت و قابل اطمینان و در زمان کوتاه‌تر تولید کنید. 1-فریم ورک بوت استرپ Bootstrap با محبوب ترین فریم ورک در جهان شروع می‌کنیم. در حالی که Bootstrap منحصرا یک فریمورک CSS نیست، ولی […]
بیشتر بخوانید...
دو تگ div و span در HTML از پرکاربردترین تگ‌ها به شمار می‌روند. این دو تگ از جمله تگ‌هایی هستند که صرفا برای قالب‌بندی کاربرد دارند و از نظر موتورهای جستجو و مرورگرهای وب مفهوم خاصی ندارند. به عبارت دیگر متخصصان طراحی سایت برای اینکه بتوانند شکل و طرح مورد نظر خود را در صفحات […]
بیشتر بخوانید...
وردپرس مکانیزم مشخصی برای بارگزاری فایل‌های CSS در بخش پابرگ قالب در اختیار طراح سایت قرار نمی‌دهد. با استفاده از کدهای زیر می‌توانید فایل‌های جانبی JS و CSS را در انتهای قالب درج کنید. درج کدهای CSS و JS در انتهای قالب سبب می‌شود تا سرعت نمایش سایت افزایش پیدا کند و وضعیت سئو سایت […]
بیشتر بخوانید...
طراحی سایت ریسپانسیو یا واکنش گرا از نیازهای اساسی در طراحی سایت‌های جدید به شمار می‌رود. بیشتر بازدیدکنندگان، با استفاده از گوشی‌های موبایل سایت‌ها را مرور می‌کنند و اگر سایت به درستی در موبایل و تبلت قابل مشاهده نباشد، بخش عمده‌ی مخاطبان حس ناخوشایندی را تجربه خواهند کرد. ابزارها یا فریم‌ورک‌های متعددی برای طراحی سایت […]
بیشتر بخوانید...
بوت استرپ مشهورترین فریمورک برای طراحی سایت ریسپانسیو است. در این نوشته می‌خواهیم روشی آسان برای دانلود و نصب بوت استرپ برای استفاده در طراحی سایت را آموزش بدهیم. ۱- دانلود بوت استرپ برای استفاده از بوت استرپ، روش‌های مختلفی وجود دارد. اگر می‌خواهید فایل‌های بوت استرپ را به ساده‌ترین شکل ممکن دانلود و استفاده […]
بیشتر بخوانید...
برای طراحی سایت از زبان‌های نشانه گذاری و زبان‌های برنامه نویسی مختلفی در سمت سرور و در سمت مشتری استفاده می‌شود. یکی از مهم‌ترین زبان‌های نشانه‌گذاری که وظیفه‌ی شکل‌دهی و زیباسازی ظاهر گرافیکی سایت را بر عهده دارد، شیوه‌نامه یا Stylesheet یا CSS نام دارد. CSS دقیقا چه کاری انجام می‌دهد ؟ برای اینکه بهتر […]
بیشتر بخوانید...
استفاده از فونت‌های سفارشی با استفاده از قانون @font-face بسیار متداول است. تقریبا میتوان گفت در طراحی سایت‌های جدید دیگر نمی‌توان به فونت‌های پیش‌فرض مرورگرها اطمینان داشت. با وجود اینکه این کار باعث بهبود شکل ظاهری سایت و بهبود تجربه کاربری می‌شود، ولی معایبی نیز به همراه دارد: باعث افزایش حجم صفحات وب می‌شود باعث […]
بیشتر بخوانید...
بوت استرپ یا Bootstrap یک فریمورک یا یک جعبه‌ابزار یا مجموعه‌ای از کدها است که برای طراحی رابط کاربری در طراحی سایت به کار می‌رود. بوت استرپ دارای امکانات مختلفی است: طراحی سایت واکنش‌گرا تایپوگرافی فرم‌ها دکمه‌ها منوها آیکون‌ها افزونه‌های jQuery و کامپوننت‌های کاربردی دیگر بوت‌استرپ شامل مجموعه‌ای از کدهای HTML، CSS و Javascript است […]
بیشتر بخوانید...
آموزش استفاده از ویژگی box-sizing برای تنظیم شیوه محاسبه دقیق اندازه حاشیه‌های عناصر در CSS
بیشتر بخوانید...
سرعت نمایش یک سایت تحت تاثیر عوامل متعددی قرار می‌گیرد. از مهم‌ترین عوامل موثر در سرعت سایت، تعداد فایل‌ها، حجم فایل‌ها و تعداد قوانین موجود در فایل‌های شیوه‌نامه( CSS ) است. بنابراین برای دستیابی به بهترین عملکرد لازم است بهینه‌سازی‌های زیر روی فایل‌های شیوه‌نامه به انجام برسند. کم کردن تعداد فایل‌های CSS فشرده‌سازی فایل‌های CSS […]
بیشتر بخوانید...
در هنگام طراحی سایت برای سازگاری با دستگاه‌های مختلف یا به عبارت دیگر طراحی سایت واکنش‌گرا، استفاده از ابزارهایی که بتواند تغییرات عرض صفحه‌ی نمایش را به صورت مداوم در نظر بگیرد و بر اساس آن تغییراتی در ظاهر سایت به انجام برساند سبب افزایش کیفیت و کاهش زمان مورد نیاز برای طراحی سایت خواند […]
بیشتر بخوانید...
یکی از ویژگی‌های جدید در CSS در طراحی سایت، امکان محدود کردن متن و قرار دادن سه نقطه در محل برش خورده است. به دلیل اینکه اندازه‌ی فونت و شرایط مرورگرهای مختلف می‌تواند با یکدیگر متفاوت باشد، بهترین روش برای برش متن و قرار دادن سه نقطه در محل برش، استفاده از این ویژگی CSS […]
بیشتر بخوانید...
تعیین شفافیت یا Transparency برای عناصر موجود در HTML باعث ایجاد جلوه‌های بصری زیبایی می‌شود که بدون وجود آن در دسترس نبوده‌اند. به طور سنتی در مرورگرهای قدیمی امکان شفاف کردن بخش‌های مختلف صفحه وجود نداشته است و با پیشرفت مرورگرها و تقویت قدرت پردازش گرافیکی و سخت‌افزاری سیستم‌های جدید، این امکان نیز به نسخه‌های […]
بیشتر بخوانید...
اندازه های پیکسل در دستگاه های مختلف، متفاوت است، برای مثال در نمایشگر رایانه، ۱۰ پیکسل، به مراتب بزرگتر از ۱۰ پیکسل در موبایل دیده می‌شود. این اختلاف اندازه به دلیل وضوح بیشتر در دستگاه‌های موبایل و تبلت است. بنابراین هرچند مروگرهای موبایل تلاش می‌کنند تا اندازه‌های پیکسل را با ضرب در اعدادی مناسب، قابل […]
بیشتر بخوانید...