آموزش طراحی قالب (فصل چهارم- جلسه سوم) : تکمیل محتوای HTML



visibility  
mode_comment   ۲۱

در این جلسه از آموزش طراحی قالب، محتوای HTML را تکمیل خواهیم کرد. در جلسه قبل تا ستون های کناری پیش رفتیم در این جلسه قسمت Content و Footer رو به html تبدیل خواهیم.

قسمت content

اگر به طرح نگاه کنید، این قسمت فقط شامل مطالب هست پس یک div با کلاس post اضافه میکنیم.

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

ابتدا قسمت عنوان را اضافه میکنیم.

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

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

قسمت footer

پس از قسمت content نوبت به footer می رسد که کد خاصی ندارد و فقط از تگ p برای قرار دادن متن copyright استفاده میکنیم.

پس از قرار دادن کد فوق، کار html تمام می شود، البته یک قسمت دیگه مونده اونم عنوان صفحه وبمان هست که تغییر ندادیم توی head صفحه title رو به شکل زیر تغییر بدین :

بسیار خب، کار ما به پایان رسید و کل طرح به html تبدیل شد، و فقط نیاز به style دادن دارد که آن را در فصل بعدی ادامه میدهیم.

اگر مشکلی توی آموزش این جلسه واستون پیش اومده در قسمت نظرات مطرح کنید

فایل index.html کامل شده رو نیز می تونید از لینک زیر دانلود کنید

متخصص وردپرس
قالب ها و پلاگین های حرفه ای وردپرس رو خودت بنویس! بازار طراحی قالب و پلاگین نویسی وردپرس به شدت داغه و اگر بلد باشید با برنامه نویسی اختصاصی، قالب ها و پلاگین های دلخواه بنویسید تو مارکت های مطرح دنیا و یا از طریق فریلنسری می تونید به درآمد بالا برید. دوره متخصص وردپرس سون لرن رو حتما ببینید: متخصص وردپرس arrow_back
comment دیدگاه کاربران
امیر

دستتون درد نکنه! خیلی زحمت کشیدید!!!

ارسال نظرات

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

1 2