یکشنبه ۰۳ مرداد ۱۴۰۰

Sunday, July 25, 2021 GMT +4:30
label مطالب برچسب

طراحی وب


more چینش مطالب به ترتیب از جدیدتر به قدیمی تر است.
»

آشنایی با مفهوم Semantic در HTML

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

»

آنچه برای شروع طراحی قالب یک وبلاگ باید بدانیم

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

»

ساخت پنل چند سربرگی (Tabbed Panel) با جاوا اسکریپت و CSS

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

»

ساخت بلاک شناور عمودی با CSS

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

»

قابلیت های کاربردی CSS3 در طراحی وب

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

»

چسبیدن فوتر قالب به پائین صفحه با CSS

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

»

طراحی باکس جستجو با فتوشاپ و CSS

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

»

مخفی کردن عناصر وب با CSS

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

»

لایه بندی در HTML با تگ div و span

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

»

طراحی قالب سه بعدی وب با فتوشاپ و CSS

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

»

آموزش استفاده از فونت فارسی در وب با CSS

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

»

زیبا سازی فرم های وب با CSS

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

»

ساخت منوی آبشاری (عمودی) با تگ ul li و CSS

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

»

طراحی و کدنویسی هدر قالب با فتوشاپ، HTML و CSS

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

»

ساخت منوی هوشمند با PHP و CSS

php-css-smart-menu شاید عنوان این مطلب کمی اغراق آمیز به نظر برسد اما از عنوان که بگذریم در این آموزش می خواهیم با نحوه ایجاد منوهای صفحه به صفحه یا به عبارتی منوهای هوشمند آشنا شویم که با تغییر صفحات سایت، آیتم صفحه فعال را به صورت مشخص و متمایز از دیگر آیتم ها نمایش می دهند، احتمالا کم و بیش نمونه هایی از این سبک منو را در صفحات وب دیده ام که با پیمایش بین صفحات مختلف آیتم های فعال منو نیز به صورت خودکار تغییر می کنند اما شاید نحوه ساخت آنها برایمان جای سوال باشد، در این صورت...
دسته بندی: آموزش کاربردی » PHP
paged صفحه 1 از 2
labelslist سایر برچسب ها
» XML
» SEO
» PHP
» Ajax
» CSS
» HTML