• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

آموزش طراحی قالب (فصل پنجم – جلسه اول) : کدهای css پیشفرض

24213 ۲۰ تیر ۹۲

در این جلسه از آموزش طراحی قالب، شروع به نوشتن کدهای css و استایل دهی به  قالب خواهیم کرد، مرحله ای که قالب شکل پیدا می کنه، و مانند طرح PSD میشه. جذاب ترین  مرحله (برای من) و البته مهمترین در طراحی یک قالب.

مقدمه

استفاده مناسب از خصوصیت های css کار بسیار مهمی است، که اگر به درستی انجام نشه، باعث به هم ریختگی صفحه در مرورگر های مختلف میشه، پس این کار بسیار با دقت باید انجام بشه، تا قالب در همه مرورگرها به یک شکل نمایش دربیاد.البته قالب اگه به درستی style دهی بشه، بجز ورژن های قدیمی مرورگر IE در همه مرورگرها به درستی نمایش داده خواهد. پس لازم نیست که نگران بشید و فکر کنید کار بسیار سختیه.

البته بعضی از طراحان، برای درست نمایش دادن قالب در مرورگر ie یک فایل style دیگر که فقط برای مرورگر ie نوشته شده استفاده می کنند که کار بسیار مناسبی هست که در اون فایل، به قسمت هایی که به درستی نمایش داده نمیشه، یک style ، جدا از style اصلی می میدن. یه عده طراح دیگه از کدهای هک css برای ie استفاده می کنند، که کار بسیار اشتباهیه، و باعث دیر لود شدن style میشه، و ممکنه توی نمایش قالب در دیگر مرورگرها باعث اشکال بشه.

 

css reset چیست؟

اگر فایل index.html قالبمون رو در سایر مرورگرها باز کنید، مشاهده می کنید که قالب در هر مرورگر به شکل متفاوتی نمایش داده شده، فاصله بین نوشته ها، bulletها، لینک ها و...

این تفاوت ها به این دلیل هست که هر مرورگر به طور پیشفرض یک style برای تگ ها در نظر دارد، و چونکه این style در همه آن ها به یک شکل نیست، باعث این متفاوت نمایش دادن ها شده، ما برای اینکه یک استایل پیشفرض برای همه تگ ها در نظر بگیریم، که به یک شکل در همه مرورگرها نمایش داده بشه از یک css reset استفاده می کنیم.

معروف ترین css resetی که وجود دارد، mayer css reset نام داره که در این صفحه میتونید style رو مشاهده کنید

اما به خاطر قدیمی بودن، (2011) استفاده از اون رو توصیه نمیکنم، چونکه در این دو سال مرورگرها تغییرات بسیاری کرده اند و این css reset به تنهایی کارش رو به درستی انجام نمیده،

توصیه می کنم از این css reset استفاده کنید، که خودم اونو تلفیق کردم، از چند css reset معروف مانند html5 blank، mayerو 960gride.

ابتدا فایل css زیر رو دانلود کنید

سپس کدهای فایل رو درون فایل style.css قالبمان کپی کنید

در خط های 4 و 5 کد، راست به چپ بودن  و راست چین بودن صفحه html را تعیین می کرده ایم

در خط 21 نیز فونت استفاده شده در صفحه وب، که ما بجز متن پست ها بقیه متون رو با فونت b nazanin نوشته ایم پس این خط را به شکل زیر تغییر دهید :

حال اگر فایل style.css رو ذخیره و فایل index.html رو در مرورگر اجرا کنیم، شاهد تغییری نمی شویم! چونکه هنوز فایل style را به فایل index لینک نداده ایم.

برای اینکار فایل index.html رو در ویرایشگر کد باز کنید و کد زیر را در head بعد از title قرار دهید :

حال اگر فایل رو ذخیره کنید باید صفحه راست به چپ شده، و فونت نیز به b nazanin تغییر کرده باشد.

فونت

دلیل اینکه شما فقط با نوشتن کلمه  b nazaninفونت صفحه html تغییر کرد این است که، شما این فونت را بر روی کامپیوترتان نصب کرده اید، اما به عنوان مثال اگر کسی از وبلاگتان بازدید کرد که این فونت را نداشته باشد چه اتفاقی می افتد؟ در این صورت قالب با فونت پیشفرض مرورگر که معمولا Arial هست نمایش داده می شود. برای جلوگیری از این اتفاق بهتر است، از @font-face استفاده کنید، و فونت استفاده شده که در اینجا b naznin است را لود کنید تا همیشه صفحه وبمان با این فونت نمایش داده شود.

همانطور که می دانید، هر مرورگر از یک فرمت از فونت پشتیبانی می کند،  پس برای اینکه فونتمان در همه مرورگرها کار کند، باید هر سه فرمت را لود کنید (eot و ttf و woff)

ابتدا سه فرمت فونت b naznin رو از لینک زیر دانلود کنید و در کنار فایل style.css قرار دهید،

نکته :

برای تبدیل فونت مورد نظرتان به سایر فرمت ها میتونید به این سایت مراجعه کنید

سپس کد زیر رو قبل از css reset قرار دهید :

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 44 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

    مرسی عالی بود

  • ‏‏

    با سلام و تشکر از آموزشهای عالیتون

    شما توی این بخش به فایل style.css اشاره کردین که من یه همچین فایل رو نمی دونم کی ایجاد شده یا تو کدوم بخشه ممنون می شم بگید این فایلو تو کدوم بخش آموزش ایجاد کردین یا کجاست ؟؟؟

    • ‏‏
      سجاد دریس(۱۸ شهریور ۱۳۹۲)

      سلام
      این فایل درون پوشه ی css قرار داره، اگر وجود نداره اون رو ایجاد کنید.

      • ‏‏
        سجاد دریس(۱۸ شهریور ۱۳۹۲)

        درضمن اینکار رو در فصل اول -جلسه دوم انجام دادیم.

  • ‏‏
    میلاد(۳ آذر ۱۳۹۲)

    سلام سجاد من فقط نمیدونم css رو کجای اچ تی ام ال قالبم بذارم؟ میشه راهنمایی ام کنید؟

    • ‏‏
      سجاد دریس(۴ آذر ۱۳۹۲)

      سلام. همانطور که گفتم باید فایل css reset رو دانلود کنید، وکدهای درونش رو به فایل style.css موجود درون پوشه css انتقال بدین.
      سپس فایل style.css رو در فایل html لود کنید.

  • ‏‏
    میلاد(۴ آذر ۱۳۹۲)

    سلام خب من این کار رو انجام دادم ولی همه ی کد های css روی مرورگر نشون داده میشوند مشکل از کجاست؟

  • ‏‏
    elyas ahmadi(۱۹ دی ۱۳۹۲)

    ممنون از آموزش خوبتون :smile:

  • ‏‏

    سلام
    میدونم که خیلی از وقته این آموزش گذشته ولی من الان دارم این آموزش خوبتون رو دنبال میکنم و چند تا سوال برام پیش اومده که ممنون میشم جواب بدین…
    1 به نظرتون لود کردن فونت سرعت سایت رو پایین نمیاره؟
    2 تو فایل css reset خط 21 font-family روی tahoma تنظیم شده آیا این درسته یا باید b nazanin باشه؟
    3 تعریف کردن یک فونت در font-family از نظر سئو موردی نداره؟

    • ‏‏
      لقمان آوند(۱۲ اسفند ۱۳۹۲)

      1- خوب بالاخره یه فایل جدید باید لود شه و در حد خودش زمان میبره . ولی کاهش سرعتش اونقدر نیست که نگرانش باشید . اگر از اون فونت زیاد استفاده می کنید باید لودش کنید .
      2- بستگی بخ خودتون داره . فونتی که می خواید پیشفرض باشه رو اونجا تعین کنید .
      3- خیر، مشکلی برای سئو نداره .

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram