پيام خصوصي نقل قول تشکر کنيد حذف تشکر

سلام این اولین اموزشیه ک قرار میدم البته از خودم تو این اموزش یاد میگیرین چطوری ی قالب دو ستونه نیمه فلت بسازین! فلت یعنی صاف البته از نوع سادش و اگه استقبال بشه کم کم امکانات بصری رو بهش اضافه می کنیم !

اسپمم ندید باز این تارا میاد قفل میکنه ( ) بریم سراغ آموزش:

مواد مورد نیاز :

اشنایی مبتدی با اچ تی ام ال و سی اس اس

ی نرم افزار مث دریم ویور یا حتی نوت پد ساده !

ی سی دقیقه وقت و حوصله ! (البته اگه کار بعضیاتون ب درازا کشید منو مقصر ندونینا )

بریم سراغ آموزش: اول باید یک صفحه اچ تی ام ال ایجاد کنیم و تگ های اصلیشو قرار بدیم:

سادس دیگه، تگ html نوع فایل مارو مشخص می کنه، تگ head سربرگ قالب مارو مشخص می کنه همون هدر و بالاخره تگ body ک بدنه قالب ماست و قراره کارمونو اونجا انجام بدیم

من از استایل باز تو خود قالبمون استفاده می کنم، یعنی چی؟ یعنی ب جای این ک ی فایل سی اس اس رو بسازم و لینک بدم ب قالب، تو خود قالب میسازیم تا کارمون راحتر شه! برای این کار در بخش سربرگ یعنی بین تگ head این کد هارو مینویسیم:

style تگیه ک مشخص می کنه ما استایل قالبمون اینجاس! اول به بدنه قالبمون استایل میدیم، بهش جهت میدیم(direction: rt;) بهش پس زمینه میدیم(background) اندازه کلی فونت های صفحه رو مشخص می کنیم(font-size) چندتا مشخصه دیگه هم میتونیم بدیم ک بمون واسه بعد:

نکته: به اول body نباید نقطه بزارینا ! بادی ی تگ عمومیه نقطه نمی خواد !

من اینجا بهش رنگ طوسی کمرنگ رو دادم، و جهتشو راست چین کردم چون قالبمون فارسیه ! ~~> دمو

چیزی توش نیس فقط خواستم رنگشو ببینین حالا کارمون رو واقعا شروع می کنیم، اول باید ی فضایی رو درست کنیم ک داخل بادی قرار بگیره و محتویات مارو تو خودش جا بده تا قالب نظم داشته باشه! چجوری؟ اینجوری:

من اینجا ی کلاس ساختم به اسم center ک طولش 800 پیکسله و فاصلش از بالا 50 پیکسله! بهش ارتفاع نمیدیما! چون نمیدونیم قالبمون رو با مطالبش چقد ارتفاع میگیره! پس بهش ارتفاعی نمیدیم.

حالا باید توی این بخش center دوتا مکان سوا کنیم البته چون قالبمون دو ستونس دوتا می کنیم، سه ستونه سه تا و الا اخر! البته از دو ستون بیشتر یکم کار داره ک بعدا یاد میگیرین اول ما یک بخشی رو میسازیم به اسم post ک قراره بخش باشه ک مطالب ما اونجا نمایش داده میشه! پس مینویسیم ک :

من اول بهش طول دادم، 450 پیکسل! بازم بهش ارتفاع نمیدم چون ارتفاع پست ما مشخص نیست! بهش پس زمینه رنگ سفید دادم تا از بدنه مشخص باشه و بهش حاشیه دادم تا زشت نشه و از همه مهمتر ! من بهش float یا جهت دادم ! این یعنی چی؟ این یعنی مکان پست های مارو به سمتی ک قرار میدیم منتقل می کنه ! یعنی اگه من به کلس post بگم ک float:right پستا میرن سمت راست! سمت راست قالبمون ها ! اما اگه بهش بگم float:left پستا برعکس حالت قبلی میرن سمت چپ! این مشخصه ی خیلی مهمیه

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

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

ما کدمون تاحالا این شکلی شده:

ما تا الان فقط داشتیم استایل قالبمون رو میدادیم، البته نه همش حالا باید این کلش هایی ک ساختیم، یعنی center و post رو با روشی ک گفتم بیاریم تو body قالبمون ! دقت کنید، گفتم body ! یعنی فقط و فقط و فقط بین دو تگ و غیر این باشه یعنی هپروت ! اول کلس center رو میاریم :

بین و ی فضا خالی کردم تا بدونین باید تگ های بعدی مون رو بخاطر این ک نظم بگیرن و پخش و پلا نشن، بین این کلس بنویسیم! متوجه شدین ک؟! خداروشکر !

حالا تگ post مون رو هم درست عین بالا میاریم تو اچ تی ام ال ! البته بین تگ center :

حالا اگه طبق گفته های بالا عمل کرده باشین، ی همچین چیزی گیرتون میاد: ~~> دمو3

البته من به عنصر center حاشیه دادم تا بتونین ببینینش! البته ارتفاع هم دادم ک بعدا پاکش می کنم! الان ی چیزی تو چشم میزنه!

چرا قالبمون تو وسط نیست؟ :| چرا رفته چسبیده ب سمت راست؟! اهان! بخاطر این ک نیاوردیمش وسط !چجوری بیاریم وسط؟ با ی خط کد خیلی خیلی ساده :

دیو همون دیوه، ولی اینبار ی کلس رو معرفی نمیکنه، بلکه ب کمک align مکان محتوای دخلش رو مشخص می کنه، راست، وسط یا چپ ک ما وسط رو انتخاب می کنیم ! در کل میشه این:

خب میبینین ک من این کدو کجا ب کار بردم؟! دیگه توظیحی نمیدم! بعد از قرار دادن این کد: ~~> دمو 4

حالا اومد وسط ! تا اینجارو داشته باشین تا ظهر بقیشو یاد بگیرین فقط بدونین ک :

اولا این اموزش واسه افراد مبتدیه، یعنی کسایی ک کدنویسی رو تاحدودی بلدن ولی نمیدونن چجوری ب کار ببرن !

ثانیا کسایی ک فک کردن این اموزش سطح مهدکودکیه و بهشون داره خدایی نکرده توهین میشه، خط بالارو بخونن

و ثالثا، اگه مشکلی داشتین ک ب نظرتون میتونه واسه همه مفید باشه، اینجا بپرسین، درغیر اینصورت پ.خ بدین ! اسپمم

اسپمم اصلا ندین ک تارا حساسیت داره بهش

فعلا

امضاي کاربر :

کفشدوزک اسکین