راهنمای استفاده از کدهای css و html

در این آموزش که راهنمای استفاده از کدهای css و html  نام دارد، خواهید آموخت که چگونه میتوان از کدهای css و html و یا پروژه های طراحی وب در سایت و یا وبلاگ خود استفاده کنید. این آموزش صرفا جهت آشنایی شما با نحوه به کاربردن کدهای html و css در قالب وبلاگ و یا وبسایتتان میباشد.

اگر کد یا پروژه ای دارید که در آن از کدهای css و html استفاده شده ، برای گذاشتن آن در وبسایت خود از روش های زیر استفاده کنید:

1.سطح حرفه ای

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

اما این کار به چه صورت انجام خواهد گرفت؟

به طور مثال فرض کنید که یک پروژه طراحی وب دارید (مثلا این پروژه یک منوی افقی برای سایتتان است) و این منو از 2 فایل تشکیل شده است. یک فایل html و یک فایل css (برای تشخیص این که این فایل css است یا html فقط کافیست به فرمت فایل مورد نظر نگاه کنید) اگر بخواهید این منو را در وب سایتتان به کار ببرید باید کدهای مربوط به css پروژه را در قسمتی از فایل css اصلی قالب کپی کنید. به طور مثال فایل style.css که در اکثر قالبهای وبسایت به این نام است.

بعد از اینکه کدهای مربوط به سی اس اس را کپی کردید به قسمت اصلی ماجرا میرسیم. حالا باید کدهای html پروژه را در جای مناسبی از قالب قرار دهیم، برای اینکه بدانید کجای قالب جای موردنظر شماست یا اینکه این کد در کجا بهتر نمایش داده میشود یا در کجا میتوان قرار داد که قالب به هم نریزد نیاز به حداقل آشنایی شما با برنامه نویسی css و html میباشد. ولی حداقل به شما میگوییم که به طور معمول فایل header.php موجود در قالب مربوط به قسمت بالایی سایت که اصطلاحا به آن (هدر) گفته میشود ،میباشد. یا مثلا sidebar.php مربوط به ستون های کناری قالب شما و فایل footer.php مربوط به قسمت زیرین سایت (فوتر) میباشد. اگربعد از گذاشتن کد html در قالب، قالبتان به هم ریخت ممکن است 2 مشکل وجود داشته باشد:

•  کدها را در جای مناسب وارد نکردید و باعث اختلال در قالب شده

• یا هم نامی کلاس ها و آیدی های (class & id) شما با class و id کد های موجود در قالب است که باعث بروز چنین مشکلاتی میشود

• یا اینکه از تگ body و تگ های html نا به جا در css استفاده کرده باشید.

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

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

اما یک روش ساده تر هم برای این کار وجود دارد…

2.سطح ساده

برای این کار کافیست کدهای css قالب را بین تگ <style> <style/> قرار داده،با این کار این کدهای بدون نیاز به فایل css عمل میکنند حال کدهای مربوط به html پروژه را در مکان مناسبی از قالب قرار دهید. از این طریق شما میتوانید با راحت ترین روش این کار را انجام دهید.(توجه:1-این روش بیشتر در طراحی قالب وبلاگ کاربرد دارد 2- توجه داشته باشید که استفاده بیش از حد از این روش باعث بالا رفتن زمان لود شدن وب سایت شما میشود)

اگر میخواهید از این کد در وبلاگ استفاده کنید:

به طور کلی وبلاگ ها چون مانند سایت ها فایل جداگانه برای هر بخش ندارند، کدنویسی و تغییر در قالب وبلاگ فقط از 1 طریق انجام میشود. یعنی فقط 1 بخش وجود دارد که در آن میتوان از کدهای html و css را در کنار هم استفاده کرد.

به طور مثال اگر از بلاگفا استفاده میکنید:

کافیست از ستون ست راست مدیریتی روی نوشته “تنظیمات و دیگر امکانات” کلیک کنید و در صفحه باز شده بر روی  “ویرایش قالب وبلاگ” کلیک کنید و وقتی کدهای قالب را مشاهده کردید از روش زیر استفاده کنید یعنی:

.(سطح ساده) برای این کار کافیست کدهای css مورد نظر را بین تگ <style> <style/> قرار دهید. با این کار این کدهای بدون نیاز به فایل css عمل میکنند حال کدهای مربوط به html پروژه را در مکان مناسبی از قالب قرار دهید.(توجه داشته باشید کدهای html را بین تگ <style> قرار ندهید.این بخش فقط مخصوص کدهای css میباشد)(توجه: استفاده بیش از حد از این روش باعث بالا رفتن زمان لود شدن وب سایت شما میشود)

به طور مثال من در این بخش میخواهم به شما نشان دهم که چگونه میتوان با کد css که در اختیار دارم، به عنوان های مطالب در قالب بلاگفا سایه داد. در واقع من این کد ساده را به تگ <h2> نسبت داده ام که نشان گر عنوان مطالب است وبلاگ است، شما میتوانید این روش را در دیگر سرویس دهندگان وبلاگ مانند: میهن بلاگ،پرشین بلاگ و.. هم انجام دهید.

کدهای قالب من به صورت زیر میباشد:

حالا طبق گفته های قبلی من،کد css مورد نظر را زیر تگ <style> قرار میدهم.(همانند تصویر زیر)

حالا تغییراتی که داده ام را ذخیره میکنم.

همان طور که در تصویر پایین مشاهده میکنید عنوان های مطالب در وبلاگ سایه دار شدند

برای درک بیشتر مطالب فوق و آگاهی از ساختار فایلهای css و html میتوانید از کتاب های الکترونیکی زیر استفاده کنید:

1.آموزش html     مترجم: عبدالصمد کرامت فر         برای دانلود این کتاب اینجا کلیک کنید

2.مرجع فارسی css         مترجم: احمد عادلی            برای دانلود این کتاب اینجا کلیک کنید

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

موفق باشید.