تبدیل قالب PSD به کد ریسپانسیو

با سلام خدمت بازدیدکنندگان عزیز ! یه پیشنهاد خوب !  من قالب های PSD شما را به کد html5 و css3 تبدیل میکنم ؛ با هدیه! ریسپانسیو سازی قالب و تبدیل رایگان آن به بلاگ بیان! کافیست که فقط فقط زیر همین مطلب فایل خود را از قسمت نظرات برام ارسال کنید.

ویژگی طرح تبدیل شده :

کاملا استاندارد W3C

استفاده از میکرودیتا ( اهمیت میکرودیتا در سئو)

کد بهینه و لود سریع

استفاده از فونت آیکون

و انجام افکت های درخواستی شما

هزینه بسیار مناسب + ریسپانسیو و ترجمه رایگان به بلاگ

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

بخش اول -دوره ی آموزش ایجاد یک سایت شخصی با html5 و css3

مقدمه

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

فیلم آموزش ایجاد ساختار صفحه عریض با html و css

دراین فیلم آموزشی یک صفحه عریض را با html و css کدنویسی می کنیم. امیداورم براتون مفید باشه ! در مطالب بعدی با html5  عزیز آشنا می شویم  و به همرا آن با فیلم آموزشی یک صفحه با ساختار دو ستونه ایجاد می کنم.

آموزش ساخت منو با html5 و css3

سلام ، امروز فایل html5 و css منو سایت که در این پست طراحی کردم  رو براتون آماده کردم و آموزششو براتون میذارم.

اول ساختار منوی سایت خودمون رو کدنویسی میکنیم. (فایل html)

قالب PSD منوی وبسایت

امروز براتون فایل قالب PSD منوی وبسایت را آماده کردم ، امیدوارم براتون کابردی باشه ! در مطلب بعدی آموزش کدنویسی را میذارم! موفق باشید.

سورس کد صفحه پنل خرید ریسپانسیو

سبک دهی به متن در سی اس اس

در این مطلب میخوام به چگونگی استایل دادن به متن در css بپردازم ، امیدوارم براتون مفید باشه و نظر هم یادتون نره!

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

با تگ font در html حتما آشنایی دارید! برای آموزش html به این صفحه مراجعه کنید. خب میخواهیم دستورات font  را با css بنویسیم!

<p>
   <font color="black" face="tahoma,arial"> 
     lorem ipsum matnist azmayeshi
   </font>
</p>

برای اینکه به هر پاراگراف خود رنگ و فونت مشخصی بدهید باید دستورات فونت را به همراش تکرار کنید! و این کار ...! دوست داشتنی نیس! برای این کار از سی اس اس استفاده کنیم. به این صورت

آموزش سی اس اس - شروع کار با css

شاید فکر کنید که استفاده از css احتیاج به کدنویسی پیچیده دارد! در حالی که اینطور نیست ، css یکی از آسان ترین و برترین ابزار برای طراحان وب هست! 

سلکتور(گزینشگر ، انتخاب کننده! همون سلکتور خوبه! :)).

سلکتورهای سی اس اس (CSS selectors)

هر سبک css دو بخش دارد. اولین بخش سلکتور مورد نظر ماست که می خواهیم استایل را بهش اعمال کنیم. بخش دومم هم خصوصیات(propertis) مورد نظرمون که میخاهیم رو سلکتور اعمال بشن.که خصوصیات و مقدار آنها بین دو { } قرار میگیرند.

selector
{
propertis:value;
}

  

آموزش CSS

بخش اول آموزش سی اس اس CSS

 

تاریخچه مختصر

در سال 1995 توسط کنسرسیوم جهانی وب (W3C) معرفی شد.

سال 1996 این استاندارد به طراحان وب توصیه شد.

سال 1998 نیز نسخه دوم این استاندارد نیز منتشر شد.

اولین سایتی که طراحی قدیمی را کنار گذاشت و در طراحی قالب از  css  استفاده کرد، سایت ورزشی ESPN بود و سایت دیگری هم بودند

که از این استاندارد استفاده کردند همچون GAMESPOT که بعنوان بزرگترین سایت مرتبط با بازی های کامپیوتری شناخته میشود.

 

Microdata و تاثیر آن بر سئو

سئو وبسایت برای تمام دارندگان وب سایت های حتما مهم هست و دوست دارند که سئو وبسایت خود را افزایش بدهند که باعث می شود رتبه وبسایت در موتورهای جست و جوگر بالا بره.

وقتی که کاربر وارد سایت میشه با خواندن مطالب متوجه این میشه که موضوع مطالب چی هست! اما موتورهای جست و جوگر همه مطالب سایت رو متن (text) در نظر میگیرند و اینکه مرتبط با چه موضوعی هست رو نمیتونند تشخیص بدهند. با استفاده از تگ های microdata به موتورهای جست و جوگر میفهمونیم که موضوغ مطلب چی هست! به عنوان مثال که این مطلب در مورد شخص هست یا یک محصول یا یک مکان و ...! این تگ ها در html5  استفاده میشه و شما میتونید توی سایت http://sechma.org (توسط همین سایت تعریف و استاندارد شده هست) ببینید.

چگونه از microdata استفاده کنیم ؟