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



visibility  
mode_comment   ۴۴

در این جلسه از آموزش طراحی قالب، شروع به نوشتن کدهای 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 قرار دهید،

info نکته :

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

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

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

comment دیدگاه کاربران
محسن

مرسی عالی بود

yamur

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

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

سجاد دریس

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

سجاد دریس

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

میلاد

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

سجاد دریس

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

میلاد

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

elyas ahmadi

ممنون از آموزش خوبتون 🙂

سعید

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

لقمان آوند

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

ارسال نظرات

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

1 2 3