طراحی وب

در این یادداشت می خواهیم نحوه ایجاد افکت های رنگی زیبا و در عین حال سبک و کم حجم را با برنامه نویسی جاوا اسکریپت آموزش دهیم، افکت هایی که به صورت محو و آشکار شدن رنگ یا تحت عنوان Fadein و Fadeout شناخته می شوند و جلوه ی خاصی به سایت و وبلاگمان می دهند و به همین دلیل بین کاربران وب محبوبیت زیادی دارند، برای ایجاد این نوع امکانات برخی ترجیح می دهند به جای استفاده از زبان های مستقل و صرف (Pure) از توابع آماده در کتابخانه های جاوا اسکریپتی مانند جی کئوری (jQuery) و موارد مشابه...

از کدها و استایل CSS علاوه بر کاربردهای معمول و روزمره برای خلق جلوه های خاص در بستر وب نیز استفاده می شود، یکی از این جلوه ها که محبوبیت زیادی نیز بین طراحان وب دارد خلق منوهای کشویی (بازشونده) یا به اصطلاح Dropdown مبتنی بر تگ های ul li و CSS است، عملکرد این امکان به این صورت است که لیستی از منوها با قابلیت داشتن زیر مجموعه هنگام بردن نشانه گر ماوس روی تگ والد ظاهر و با خارج کردن ماوس از محدوده تگ والد مجددا به طور خودکار محو می شوند، نوع پیشرفته تر این منوها با...

یکی از مسائلی که طراحان وب باید همیشه به آن توجه داشته باشند استفاده از المان های گرافیکی سبک و از جمله تصاویر کم حجم در قالب ها و پروژه های وب است، علاوه بر این سایر کاربران هم در برخی مواقع نیاز دارند که حجم تصاویر خود را برای انتشار در وب یا ارسال به دیگران به فرض از طریق ایمیل کاهش دهند، البته برنامه های زیادی در زمینه کاهش حجم تصاویر و مناسب کردن آنها برای انتشار در فضای وب وجود دارد اما برنامه قدرتمند فتوشاپ تقریبا ما را از تمام آنها بی نیاز می کند، ابزارهای بسیار...

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

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

در طراحی صفحات وب گاهی مواقع موقعیت هایی پیش می آید که باعث سردرگمی و به زحمت افتادن طراح می شود به طور مثال فرض کنیم قالبی را برای وبلاگ یا سایتمان کدنویسی کرده ایم و انتظار داریم مطابق با سلیقه ما محتوا را نمایش دهد اما ناغافل متوجه می شویم که یک جای کار ایراد دارد و اسکرول افقی در انتهای صفحه دیده می شود، همان طور که می دانیم اسکرول افقی در صفحات وب چندان مطلوب نیست و در پیمایش صفحه و سهولت استفاده از رابط کاربری مشکل ایجاد می کند، به هر ترتیب با مطالبی که در...

باکس های گوشه گرد لایه هایی به صورت مستطیل یا مربع با کناره های گرد یا به اصطلاح نرم هستند که محتوایی را در خود نشان می دهند، این نوع باکس ها کاربردهای زیادی در طراحی صفحات وب دارند به عنوان مثال در قسمت سایدبار کناری قالب ها، فیلد جستجو یا در نمایش تبلیغات متنی به وفور از این تکنیک استفاده می شود، باکس گوشه گرد در مقایسه با باکس های عادی (با گوشه های مربعی) در شرایط یکسان و در صورت استفاده به جا، معمولا زیبایی خاصی به طرح مورد نظر می دهد و باعث حرفه ای تر به...

یکی از کاربردهای جاوا اسکریپت (JavaScript) در صفحات وب امکان ساخت دکمه های کنترلی برای ایجاد رابط کاربری (User Interface) بهینه است، طراحان وب جهت زیباسازی و تجهیز قالب ها معمولا از امکانات مبتنی بر قابلیت های سمت کاربر و مرورگر استفاده می کنند که یکی از این قابلیت های پرکاربرد ساخت دکمه رفتن به بالای صفحه یا در اصطلاح اسکرول به بالا (Scroll to Top) در گوشه پائین نمایشگر است که بخصوص در مورد صفحات با ارتفاع خیلی زیاد می تواند ابزاری خوب و کاربردی باشد، خوشبختانه برای ایجاد این قابلیت چند روش مختلف از قبیل لینک ساده، کدهای صرف...

امروزه در طراحی صفحات وب استفاده از بلاک ها و تصاویر شفاف یا به اصطلاح Transparent امری مرسوم است، به طور مثال طراحان قالب سایت ها و وبلاگ ها می توانند در طراحی هایشان پس زمینه مطالب را کمی شفاف در نظر بگیرند تا تصویری که در زیر بلاک مطالب قرار دارد به صورت نیمه شفاف و در واقع مخلوط با رنگ پس زمینه دیده شود، پیاده سازی این تکنیک پیشتر با تصاویر فرمت png صورت می گرفت اما مشکل و مانع همیشگی، مرورگر غیر استاندارد و ضعیف اینترنت اکسپلورر (IE) بود که قادر به نمایش این تصاویر با زمینه...

بعد از آشنایی اولیه با CSS، تعریف کلاس (Class) و آی دی (ID)، نوبت به فراگیری ویژگی های مربوط به خاصیت Background در این زبان است، Background از جمله اولین خاصیت هایی است که در هنگام طراحی صفحات وب از آن استفاده می کنیم چرا که می تواند نقطه شروع طراحی ظاهر رابط کاربری ما باشد و به نوعی رنگ بندی پایه پروژه را مشخص کند، خوشبختانه قابلیت های CSS در این خصوص تقریبا کامل و بدون نقص است و هرآنچه که در طراحی وب مورد انتظار ما باشد با کدهای آن دست یافتنی است، در ادامه خواهیم گفت که...

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

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