تبلیغات
مقالات آموزشی برنامه نویسی و شبکه - مطالب آموزش طراحی وب و css

جذاب ترین فونت ها برای وب سایت

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

در زیر تعدادی فونت عالی رو معرفی کرده ام:

نوشته شده در تاریخ یکشنبه 5 بهمن 1393    | توسط: ح.م    | طبقه بندی: آموزش طراحی وب و css،     | نظرات()


آموزش css نمایش متن چشمک زن

با سلام

امروز می خوام آموزش نمایش متن چشمک زن با css رو آموزش بدم.

حتما در بسیاری از سایت ها متن های چشمک زن رو دیدین

این متن ها رو هم با HTML و هم با CSS میشه ایجاد کرد.

نوع HTML ممکنه توی برخی مرورگر ها کار نکنه ولی نوع CSS توی اکثر مرورگرها کار می کنه:

برای نمایش این چنین متن های چشمک زنی ، کافی است کل متن مورد نظرتون رو توی یک تگ (مثلا تگ p،تگ span،تگ div) بندازین و بر روی تگ کد css زیر رو اعمال کنین:

;text-decoration:blink

بدین ترتیب توی سایت می تونین یک متن چشمک زن داشته باشین.

نکته مهم و جالب دیگری که در مورد این دستور هست ، اینه که روی تگ های a هم می تونین اعمالشون کنین تا بدین صورت لینک های چشمک زن درون سایتتون داشته باشین.

با اعمال کد CSS بالا روی تگ هاتون ، در نهایت کدی بصورت زیر خواهید داشت:

نوشته شده در تاریخ جمعه 23 فروردین 1392    | توسط: ح.م    | طبقه بندی: آموزش طراحی وب و css،     | نظرات()


تقویت مهارت طراحی و برنامه نویسی وب با فایرفاکس !

با سلام

یکی از بهترین نرم افزارهایی که در امر طراحی قالب سایت ها و حتی برنامه نویسی سایت می تواند به برنامه نویسان و طراحان وب کمک کند ، نرم افزار فایرفاکس است!

بله درست متوجه شده اید ، همین مرورگر فایرفاکس امکاناتی داره که شاید تا به حال به آن دقت نکرده باشید.

امکانات این نرم افزار به چند درجه تقسیم میشه :
امکانات درجه نرمال مانند دیدن سورس صفحات ، دیدن تمامی تصاویر استفاده شده در صفحات و ....
امکانات درجه متوسط مانند تغییر درجای کد صفحات و مشاهده نتیجه تغییرات ، مشاهده اطلاعات مهم هر صفحه و ...
امکانات درجه پیشرفته مانند مشاهده لایه های سایت بصورت دو بعدی و سه بعدی! ، کار با لایه ها و ...

در این مقاله شما را با اسرار مرورگر فایرفاکس آشنا خواهم کرد و ناگفته های فایرفاکس را به شما یاد خواهم داد.

پس از مطالعه این مقاله خواهید دید که روز به روز مهارت طراحی و برنامه نویسی شما ارتقا خواهد یافت و روز به روز حرفه ای تر کد خواهید زد.

چه کد های کلاینت ساید و چه کد های سرور ساید!

در پایان این مقاله اصلی ترین موارد سئو را به شما یاد خواهم داد و در مقاله بعدی نیز کد نویسی سئو در ASP.NET را با یکدیگر تجربه خواهیم کرد.


نوشته شده در تاریخ شنبه 26 اسفند 1391    | توسط: ح.م    | طبقه بندی: آموزش طراحی وب و css،     | نظرات()


آموزش کد html قرار دادن آیکون برای سایت

favicon چیست و چه کاربرد هایی دارد ؟
یکی از کارهای جالبی که میشه با html انجام داد ، قرار دادن آیکون برای سایت و یا وبلاگ است.

اگر سایت بنده رو با فایرفاکس یا گوگل کروم مشاهده کنین ، آیکون سایت بنده با رنگ آبی  و حرف N در لبه تب مروگرتون خواهید دید.
به این آیکون فاویکون یا favicon می گویند که هر سایتی یک آیکون که معرفش باشه رو برای خودش در نظر می گیره ، معمولا شرکت ها در favicon لوگوی شرکتشونو قرار میدن.

علاوه بر کلاس کاریش مزیت خیلی مهمی که favicon داره اینه که وقتی کاربری یکی از صفحات شما رو به لیست علاقنمدی هاش اضافه می کنه (bookmark  مرورگرش) ، آیکون favicon سایت شما در کنار لیستش نمایش داده میشه که بدین صورت پیدا کردن لینک سایت شما مابین یه عالمه لینکی که در لیست علاقندی های کاربر است ، خیلی ساده و راحت تر میشه.

مزیت دیگر این کار برند سازی و شناساندن برند تجاری و لوگوی تجاری شرکت شماست ، بطوری که به مرور زمان کاربران لوگوی شما رو خواهند شناخت و لوگوی شما توی ذهن افراد نقش خواهد بست.
خوب ، توضیح و تفسیر و  ایجاد انگیزه دیگه کافیه

برای این کار باید ابتدا یک آیکون با پسوند ico. برای سایتتون ایجاد کنین ؛ دقت کنین که اندازه اش باید 15 در 15 و یا 16 در 16 باشه که البته 15 در 15 استاندارد تره.

سپس باید آیکون رو در روت سایتتون قرار بدین و سپس کد زیر رو باید در داخل تگ head صفحاتتون قرار بدین :



دقت کنین که در اینجا من اسم فایلم رو netnic.ico گذاشته ام ، استانداردش اینه که اسم فایلتونو favicon.ico بذارید.

آموزش کد html قرار دادن آیکون برای سایت

خوب امیدوارم که از این آموزش هم لذت برده باشید.
"نت نیک"

نوشته شده در تاریخ پنجشنبه 14 دی 1391    | توسط: ح.م    | طبقه بندی: آموزش طراحی وب و css،     | نظرات()


کد css گرد کردن دور عناصر

گرد کردن دور عناصر با css

با سلام
کد css گرد کردن دور عناصر
انسانها از اشیاء نوک تیز ، زیاد خوششون نمیاد و بیشتر اشیائی ببا دور گرد رو بیشتر دوست دارن و احساس می کنن که شیک تر و مدرن ترند.

در رابطه با سایت هم همین موضوع صادقه .

وقتی یه سایت با منو های گرد  رو می بینید ، میگین عجب سایتی ولی اگر همون سایت رو بصورت کاملا مستطیل و نوک تیز ببینین ، احساس خوبی بهتون دست نمیده ....

گرد کردن دور عناصر به دو صورت انجام میشه :

  • بوسیله عکس
  • بوسیله کدهای CSS
مورد اول روش قدیمیه و مشکل اون ، کد نویسی نسبتا زیاد و کند شدن صفحه است. (لود شدن تصاویر گوشه ها)

امروز می خوام گرد کردن دور عناصر رو بوسیله CSS رو بهتون یاد بدم.


پست به روز شده است

نوشته شده در تاریخ یکشنبه 7 آبان 1391    | توسط: ح.م    | طبقه بندی: آموزش طراحی وب و css، آموزش HTML5 و CSS3،     | نظرات()


آموزش ساخت منوی کرکره ای با css (بدون نیاز به جاوا اسکریپت!)

با سلام
آموزش ساخت منوی کرکره ای با css (بدون نیاز به جاوا اسکریپت!) - netnic.ir

منو بخش اساسی یک سایت رو تشکیل میده و تقریبا همه سایت ها یک منو دارن که حالا این منو می تونه بصورت افقی و یا بصورت عمودی باشه.

منوی افقی رو به سه صورت می توان ساخت :

  1. با CSS خالی
  2. با جاوا اسکریپت
  3. با جی کوئری
که مورد سوم حرفه ای ترین و بهترین روش است که بسیار انعطاف پذیر هم هست .

امروز می خوایم با هم یک منوی کشویی افقی ساده با CSS بسازیم

(در مقالات بعدی ساخت منوی افقی با جاوا اسکریپت و جی کوئری رو آموزش میدم.)


نوشته شده در تاریخ سه شنبه 7 شهریور 1391    | توسط: ح.م    | طبقه بندی: آموزش طراحی وب و css، پروژه های کلاینت ساید،     | نظرات()


تکنیک CSS Reset

cross browser compatibility

سازگار کردن یک صفحه وب با مرورگرهای گوناگونی مانند IE , FireFox , Opera , Chrome و ... ، یکی از مشکلات و چالش های جدی برای طراحان وب سایت بوده و هست.

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

این چالش تا به ابنجا پیش رفته است که ، توانایی در طراحی وب سایت ، به طوری که در تمامی مرورگرها به طور یکسان نمایش داده شود ( Cross Browser ) ، یک امتیاز بسیار خوب برای یک طراح وب است.

بسیاری از گروه ها و طراحان وب سایت برای راحتی در استفاده از کدهای CSS به این منظور راه حل ها و تکنیکهای گوناگونی را بررسی کرده اند ، و به نظر میرسد استفاده از تکنیک CSS Reset به این منظور از محبوبیت بیشتری برای طراحان وب سایت بر خوردار است .

CSS Reset چیست ؟

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

بهتراست در استفاده از این تکنیک نکات زیر را در نظر داشته باشید

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

برای استفاده از این تکنیک ، کافی است کدهای CSS که نمونه هایی از آن را در زیر ملاحظه خواهید نمود در ابتدای سند و فایل CSS وب سایت خود قرار دهید.

در لیست زیر تعدادی از محبوب ترین CSS Reset ها و همچنین Css Reset مورد استفاده در این وبلاگ را ملاحظه می فرمائید


نوشته شده در تاریخ یکشنبه 14 خرداد 1391    | توسط: ح.م    | طبقه بندی: آموزش طراحی وب و css،     | نظرات()


چند لینک مهم برای طراحان قالب

چگونه حجم صفحمو کم کنم ؟



جواب :

Javascript Compression Services

CSS Compression Services

نوشته شده در تاریخ یکشنبه 3 اردیبهشت 1391    | توسط: ح.م    | طبقه بندی: آموزش طراحی وب و css، آموزش HTML و XHTML،     | نظرات()