اخبار سایت
بزرگترین لذت در زندگی انجام کاریست که دیگران میگویند: تو نمیتوانی! - رومن پولانسکی
خانه / آموزش CSS / راهنمای استفاده از کدهای css و html
put-css-html-cover

راهنمای استفاده از کدهای 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> نسبت داده ام که نشان گر عنوان مطالب است وبلاگ است، شما میتوانید این روش را در دیگر سرویس دهندگان وبلاگ مانند: میهن بلاگ،پرشین بلاگ و.. هم انجام دهید.

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

put-css-html-01

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

put-css-html-02

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

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

put-css-html-03

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

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

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

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

موفق باشید.

درباره محمدرضا مقدم

خوشحالم که از وب سایت آموزشی دیجیتال آرت دیدن میکنید

۳۵ دیدگاه

  1. سلام دوست عزیز.توسط find گشتم ولی قالب من اصلا تگ style نداره پس کد css رو کجا بزارم؟

    چندتا فایل (نه کد) فلش (swf) میخوام بزارم تو وبلاگ چجوری تبدیلش کنم به کد اسکریپت؟

    اصلا نرم افزار هایی که باهاشون کار میکنم خروجی شون فقط کد html یا فایل swf هستش.چطور به اسکریپت تبدیل کنم یا بدون تبدیل بزارم تو وبلاگ؟

    واقعا خیلی معطل این موضوع هستم(منتظر لطفت هستم)

    • سلام دوست عزیز.
      ۱) سیستم وبلاگدهی که شما در اون وبلاگ ساختید بخشی به نام “ویرایش قالب” داره؟ اگر داره حتما در اون تگ style وجود داره، اگر این تگ وجود نداشته باشه ظاهر سایت شما به هم میریزه
      ۲) برای گذاشتن فایل های فلش (swf) هم میتونید از کدهایی شبیه به کد زیر استفاده کنید:

      به جای نوشته های banner.swf در کد بالا باید آدرس فایل swf که در اینترنت آپلود کردید رو وارد کنید.
      با تغییر عددهای داخل این کد: width=”468″ height=”60 هم میتونید سایز فایل swf خودتون رو تعریف کنید

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

      پیشنهاد میکنم حداقل برای این کار با تگ های html و css آشنایی پیدا کنید.
      چون برای به کار بردن پروژه های html و css در وبلاگ و یا حتی وبسایت باید حداقل با تگ ها آشنا باشید و کدهای html رو در جای مناسبی درون تگ های html ( یا در مکان مناسبی قرار بدید)، و همچنین در وبلاگ باید کدهای css رو درون تگ Style قرار بدید.
      یعنی بین

  2. دوباره مزاحمت شدم داداش.من از لوکس بلاگ
    استفاده میکنم.تو کد قالبش داره <"rel="stylesheet
    ولی و اصلا نداره.
    از کدهای بالا ومشابه اون بیش از۱۰ مورد استفاده کردم ولی نشد.البته چون قالبم استایل نداشت در جای دیگه استفاده کردم.
    دور نریم از Flash Design Studio استفاده میکنم برا ساخت بنر واسلایدشو و منو …دوتا خروجی میده:html و swf البته تو properties مینویسه
    (swf & flv player) فرض کن اینا رو میخای تو قالب وبلاگ جا بدی چه کار میکنی؟الان کد قالبم رو میفرستم.(شرمنده من مبتدی وقت عزیزتو گرفتم)

    • سلام. ببینید این آدرس رو میتونید پیدا کنید؟
      http://themeupload.theme-designer.com/62/c.css
      این آدرس فایل css قالب شماست که کدهای css از این آدرس لود میشند.

      برای اینکه بتونید در این فایل چیزی رو اضافه کنید، باید این فایل css رو دانلود کرده و کدهای جدید رو بهش اضافه کنید و بعد در یک آپلوسنتر آپلود کنید. و بعدش آدرس جدید فایل css ( که آپلود سنتر به شما میده) رو به جای همین آدرسی که براتون نوشتم تغییر بدید

      …………..

      به طور کلی ( با توجه به اطلاعات داده شده شما) برای نمایش دادن فایل های فلش در وبلاگ، کافیه تک تک محتویات و فایل های پروژه فلش رو در یک آپلود سنتر آپلود کنید و بعد فایل html داده شده نرم افزار رو باز کرده و آدرس تمام فایل هایی که در اون ها رو در آپلود سنتر آپلود کرده بودید رو تغییر بدید و سپس محتویات فایل html رو در جای مناسب از قالبتون قرار بدید تا فایل های swf به نمایش در بیاد.

  3. سلام داداش.دستتون درد نکنه /مشکل فلش حل شد/ولی مشکل css هنوز باقیست /میخواستم بعضی از عکس های داخل css قالب رو تغییر بدم/ابتدا css قالب رو تو آدرس مرورگر گذاشتم و کد حاصله رو در notepad با فرمت css سیو کردم/بعد آدرس عکس مورد نظرم در css رو پیدا و عکس دلخواه خودم رو با همان اندازه آپلود کرده وآدرس رو جایگزین کردم/بعدفایل css جدید رو آپلود کردم و لینک مستقیم اون رو جایگزین لینک css داخل قالبم کردم.

    نتیجه:عکس جدید در مکان مورد نظر اومد اما اولا دو تکه اومد ثانیا سایر عکس های قالب رو ناپدید یا بهم ریخته کرد.

    آیا روشم مشکل داشت؟راه حل چیست؟
    ممنون که سوالاتم رو بی پاسخ نمیذاری.

    • سلام دوست عزیز
      ظاهرا که این کار رو درست انجام دادید، اما در مورد مشکل به وجود آمده برای شما من نمیتونم به صورت تئوری شما رو راهنمایی کنم،ممکنه تداخل به وجود اومده باشه یا یه کاری رو اشتباه انجام داده باشید…

  4. با عرض سلام و احترام
    من می خوام یه جدول در html بسازم به صورت ۲ ردیفه . ردیف اول ۳ تا خونه و ردیف دوم ۲ تا خونه (به طو ر متناسب و فقط {یک جدول} نه ۲ جدول ) هر چی سعی کردم نتونستم. ممنون می شم کدشو برام بفرستید.
    از آموزش هایی که تو سایتتون میذارید فوق العاده سپاس گزارم

    • سلام دوست عزیز. یه نمونه از این نوع جدول رو بدون استایل بندی براتون قرار دادم:

      
      <table border="1" bordercolor="#000000" style="background-color:#FFFFFF" width="100%" cellpadding="10" cellspacing="10">
      
      	<tr>
      		<td>digital-art.ir</td>
      		<td>Table Cell</td>
      		<td>Table Cell</td>
      	</tr>
      	<tr>
      		<td>Table Cell</td>
      		<td>Table Cell</td>
      	</tr>
      </table>
      
      

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

  5. سلام
    جدولی که می خواستم به صورت (بالا ۳ خونه که درسته) اما پایین ۲ خونه بزرگ طوری که خونه اول از (ابتدای) سمت چپ تا دقیقاً وسط خونه دوم بالا کشیده بشه و خونه دوم از دقیقاً وسط خونه دوم بالا تا (انتهای) سمت راست.
    مثلاً اگر خونه های ردیف بالا ۲ سانتیه، خونه های ردیف پایین ۳ سانتی باشه (اندازه مثال بود)
    البته عکس اون چیزی که می خوامو به info ایمیل زدم.

  6. چیزی شبیه این جدول (۱ جدول نه ۲ جدول روی هم قرار گرفته).
    _______________________________
    [________][_________][__________]
    [_____________][_______________]

    مرسی

    • اگر ۴ سلول در بالا باشه به راحتی میشه این کار رو کرد. مثلا مثل این کد:

       <table border="1"> 
          <tr>
              <td width="150" >Cell 1</td>
              <td width="150">Cell 2</td>
              <td width="150">Cell 2</td>
              <td width="150">Cell 3</td>
          </tr>
          <tr>
               <td colspan="2" >Cell 3</td>
              <td colspan="2" >Cell 4</td>
          </tr>
      </table> 

      ولی برای داشتن ۳ سلول در ردیف اول و ۲ سلول در ردیف دوم میتونید از CSS هم استفاده کنید. ولی کدی که در بالا گذاشتم فقط html هست.

  7. واقعاً با HTML نمیشه یه چنین جدولی طراحی کرد؟؟ خیلی جاها دنبالش گشتم ولی نتونستم.
    عجیبش اینجاست که وقتی یه جدول ۶*۲ کشیدم و خونه های ردیف بالا colspan=2 و خونه های پایین جدول colspan=3 گذاشتم باز هم فایده ای نداشت. هر وقت جواب دقیقش رو پیدا کردید بهم میل بزن.
    از لطفت فوق العاده سپاسگزارم.

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

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

  10. salam mishe ye rahnemaii be man bokonid lotfan
    mikhastam ye film ya ye ahngo k roye sait mizarim ghesmathaye mokhtalefesho tag gozari konim age mishe ye rahnemaii bokonid ya begid az koja mishe amoozesh bebinam
    mamnooon

  11. سلام من میخوام طراحی سایت یادبگیرم وبعنوان یه شغل ادامه بدم .به اینکارا خیلی علاقه دارم بنظر شما ازطریق سی دی های آموزشی و مطالبی که داخل اینترنت هست میتونم یادبگیرم؟؟ ممنون میشم دراین زمینه راهنماییم کنید.

  12. چگونه در htmlمیتونیم صفحات جداگانه درست کرد و لینک بشون بدیم تا با کلیلک روی اون به صفحه ی مورد نظر رفت.

    • اول چند فایل html ایجاد کنید و محتوای مورد نظر رو درون هر کدوم قرار بدید (به عنوان صفحات)
      بعد مثلا در فایل html اول کد زیر رو در جای مناسبی قرار بدید

      <a href="example1.html">صفحه ۱</a>
      <a href="example2.html">صفحه ۲</a>
      <a href="example3.html">صفحه ۳</a>
      <a href="example4.html">صفحه ۴</a>

      به جای example1.html و… هم اسم فایل html یا آدرس وب مورد نظر رو قرار بدید.
      این یه کد ساده فقط جهت مثال بود. برای قابلیتهای بیشتر باید بعضی چیزها بهش اضافه بشه.

  13. وقتی یک htmlساختیم چگونه آن را ثبت و برای آن لینک بگیریم؟

    • منظورتون انتشار اون هست و اینکه چطوری مثل یک سایت برای عموم نمایش داده بشه؟
      شما باید دامنه و هاست داشته باشید و فایل های html تون رو در اون آپلود کنید و لینک بگیرید.

  14. سلام دوست عزیز ببخشید من یک سری سایت خارجی دارم که میخوام بک لینک سایتمو توشون قرار بدم وقتی میخوام با تگ مثلا (دانلود فیلم) بک لینک بدم زبان فارسی رو ساپورت نمیکنه و نمیتونم با تگ فارسی لینک بدم و مجبور میشم ادرس خود سایتو به عنوان تگ بهش بدم کد utf 8 رو هم امتحان کردم ولی بازم نشد ممنون میشم کمکم کنید

  15. سلام
    من قالبم جوریه که جداول وقتی موس روشون میره جدول کلا رنگی میشه
    میخوام بدونم نمیشه کاری کرد که در قسمتی از قالب تمام چنین استایل هایی برداشته بشه و فقط استایلی که من میخوا رو بپذیره ؟
    مدیریت محتوا وردپرس هست
    ممنون از سایت خوبتون

  16. سلام من دانلود آموزشhtmlرومیخوام وبعدهرچی گزینه دانلودرومیزنم نمیشه اگه بگین که چه جوری دانلودکنم ممنون میشم…

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

  18. سلام
    ممنون از سایت خوبتون
    ادمین عزیز برای سایت مورد نظر کد تگ کلمات کلیدی اشکال داره؟
    وقتی از سیستم انالیز سئو استفاده می کنم تگ کلمات کلیدی رو نمیشناسه…

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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شدبخش های مورد نیاز علامت گذاری شده است *

*