طراحی وب

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

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

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

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

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

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

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

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

در ادامه آموزش های مقدماتی آشنایی با زبان پایه برنامه نویسی وب یعنی html، این بار می خواهیم به دو تگ کلیدی، مخصوصا در زمینه لایه بندی (فرمت بندی) صفحات وب بپردازیم، این دو تگ div و span نام دارند و کمتر صفحه وبی وجود دارد که در سورس کدهای خود از آنها استفاده نکرده باشد، به طور خلاصه از div برای ایجاد بلاک های غیر هم سطح نگهدارنده (container) سایر عناصر صفحه و از span برای ایجاد بلاک های هم سطح (inline) و معمولا برای نگهداری محتوای متنی استفاده می شود که در ادامه آموزش، به طور جزئی تری...

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

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

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

در مطالب قبل از بخش آموزش های کاربردی با نحوه ساخت چند نوع منوی متفاوت مبتنی بر CSS و تگ های ul و li آشنا شدیم، همچنین به ضرورت استفاده از تگ های استاندارد ایجاد کننده لیست در HTML برای کدنویسی منوها و اهمیت آنها برای موتورهای جستجو و افزایش قابلیت های کاربری (Accessibility) و SEO صفحات وب اشاره کردیم، این بار و در ادامه آموزش ها می خواهیم با نحوه طراحی و ایجاد منوی آبشاری یا منوی عمودی (Vertical) با تگ ul li با استفاده صرف از خاصیت های زبان استایل نویسی CSS آشنا شویم، از نقاط مثبت این...

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

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