campaign-edianeh-98

آموزش طراحی قالب (فصل پنجم – جلسه اول) : کدهای 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 دیدگاه کاربران
محمد رمضانی

سلام میخواستم خسته نباشید بگم سجاد جان از اموزش های عالیت!

shatel

سلام آقا سجاد
دستتون درد نکنه آموزش خیلی خوبی بود
در@font-face و قسمت url باید فونت رو آپلود کنیم و آدرسش رو بذاریم؟

سجاد دریس

سلام.
اگه روی لوکال کار میکنید، نه لازم نیست،
اما وقتی قالب رو روی هاست بردین باید فونت ها رو هم آپلود کنید.

لعیا

مطالب خوبی گذاشتین ممنون که به نظرات هم اهمیت میدین
http://www.fashnews.blogsky.com

hajian1

سلام
باتشکرازشماگرامی درصورت امکان درموردفایلcss resetلطقاًبیشترراهنمایی کنید
باتشکر

سجاد دریس

سلام.
css reset یه استایلیه برای از بین بردن، استایل پیشفرض مرورگرها، چونکه هر مرورگر به صورت پیشفرض یک استایل کلی برای تگ های html تعریف کرده، و در هر مرورگر متفاوته. css reset این استایل کلی رو در همه مرورگرها یکسان میکنه.

مهدی

سلام
زحمات و تلاش شما شایسته تقدیر و تشکر است.
پیروز و پایدار باشید.

hajian1

ممنون ازشمااستادگرامی موفق ترازهمیشه باشید

محسن

سلام وخسته نباشید خدمت همه عزیزان پروفایل خوبی گذاشتین امید وارم روز به روز موفق تر بشین 😉

usefrostami

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

سجاد دریس

سلام.
ممنونم دوست عزیز.
لازم نیست 😉

حسن

سلام سجاد جان! پس جلسه بعدی چی شد!

قاید

سلام سجاد جان،
ممنون از آموزش خوبت.

راستی “دانلود فایل css reset” مشکل داره. وقتی بازش میکنم کد ها رو خراب نشون میده. نمیدونم ممکن به فرمت utf-8 ذخیره نشده.
یه بار دانلودش کنید معلوم میشه.

دست تون درد نکنه
😆

سجاد دریس

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

علی

باسلام
ببخشید این فونت bnazanin را من هر سه تاش را دانلود کردم باید نصبم بکنم ؟ اگه باید نصب کنم فقط یکی اش نصب میشه.
باتشکر

سجاد دریس

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

Tesla

سلام، آقا سجاد واقعا عالیه،منتظر قسمت بعدی هستم 🙂

hajghasem

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

mahdi767

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

سجاد دریس

سلام.
ابتدا از طریق لینکی که گذاشتم فونت هاتون رو به سایر فرمت ها تبدیل کنید و سپس اونارو با خاصیت @font-face لود کنید
سپس به هر قسمت که رسیدیم و فونتش b nazanin نبود، با خاصیت font-family فونتش رو تغییر بدین.

hisory

با عرض سلام آقا سجاد عرض خسته نباشید دارم خدمتتان بنده با اینکه تازه کارم و هیج آشنایی قبلی با کده های HTML, CSS و … ندارم اما با این حال از آموزش خوب شما لذت می برم خیلی عالیه ممنونم و متشکرم از زحمات شما فقط یک سؤال داشتم مورد در همین فصل پنجم، جلسه اول و اونم اینکه وقتی این کد را:

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

سجاد دریس

سلام.
کدی که قرار دادین نمایش داده نشده و نمیدونم کدتون رو درست نوشتین یا نه اما با این کد میتونید قالب رو راست به چپ کنید

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

hisory

آقا با عرض سلام بنده همه ی این کارهارو انجام دادم ولی نشد که نشد.
اما سؤال اینه که این فایل style رو چجوری به html متصل کنم؟ و این کدی که اینجا گذاشتید کجا بذارمش هرجا باشه فرقی نمیکنه؟
با تشکر

سجاد دریس

سلام.
خب پس شما هنوز فایل استایل رو متصل نکردین به سند htmlT واسه همین styleها کار نمی کنند.
برای متصل کردن فایل style کد زیر رو توی قسمت head فایل html قرار بدین :

hisory

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

babakh

ممنونم از مطالبتون

iman_k26

آقا سجاد دستت درد نکنه عالی بود…

پری

سلام، ممنون بخاطر این مطلب، یه سوالی داشتم
قسمت آخرش رو متوجه نشدم! کد آخری که نوشته شده باید کجا قرار بگیره؟ تو فایل CSS Reset یا style.css ؟؟

لقمان آوند

فرقی نداره عملا . در ابتدای یکی از فایل ها بزارید

سبحان

سلام، باتشکر از زحمات شما. میشه یه راهنمایی کنید که فونت هایی با این فرمت ها (eot و ttf و woff) رو میشه از کجا پیدا کنیم؟ خودمون میشه درستش کنیم؟

کیوان علی محمدی

سلام اینجا می تونید web font بسازید http://www.fontsquirrel.com/tools/webfont-generator

sobhan0086

تشکر آقا کیوان، امیدوارم بتونم باهاش کار کنم 😆

حسین

سلام خیلی متشکرم بابت آموزشها.
یه سوالی داشتم چرا من وقتی استایل را بصورت اتچ ایمپورت میکنم بازم مثه این کد که شما دادین یعنی درنمیاد!!ممنون میشم بی زحمت تفاوت اتچ کردن با این کدی که شما دادین را هم بگین.خدا خیرتون بده 😳

کیوان علی محمدی

شما چه جوری اتچ کردین؟

محسن

مرسی عالی بود

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- خیر، مشکلی برای سئو نداره .

ارسال نظرات

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