چینش صفحه – یک ستون – عرض ثابت

آموزش چینش صفحه با ساختار یک ستون با عرض ثابت به وسیله CSS


امیر سروری ۱۴ دیدگاه CSS , HTML , اصول طراحی وب سایت چهارشنبه, ۱۵ام تیر , ۱۳۹۰ 17654 بازدید

در این مجموعه آموزشی تلاش خواهد شد تا با ساختار و چینش های استاندارد و مختلف از صفحات وب سایت با استفاده از لایه ها آشنا شوید . مطالب به صورت کاملا کاربردی ، ساده و کوتاه ارائه خواهند شد و آشنایی اولیه با HTML و CSS مورد نیاز است. در این وبلاگ سعی شده است مطالب مورد نیاز برای یادگیری و درک این آموزشها نیز به صورت موازی ارائه شود. امیدوارم که این مجموعه آموزشی مورد توجه و استفاده شما دوستان و همراهان عزیز قرار گیرد . پیشنهادات و انتقادات سازنده شما می تواند در افزایش کیفیت مطالب بسیار تاثیر گذار باشد .

پیشنهاد میشود قبل از خواندن این مطلب آموزشهای ارائه شده در باره CSS را مرور کنید .

آموزش چینش صفحه با ساختار یک ستون با عرض ثابت به وسیله CSS

این نوع از ساختار را می توان به عنوان پایه ای برای تمامی ساختارهای متداول در نظر گرفت .

کلاسها و همچنین نحوه کد نویسی بر اساس استانداردهای W3C و روش های متداول در دنیا انتخاب شده است . چینش بر اساس زبان فارسی و از راست به چپ است ( rtl )

DEMO

ساختار HTML


در این نوع ساختار صفحه به چند قسمت اصلی تقسیم بندی شده است ( container , header , navigation , content , footer )

<div class="container">
	<div class="header">
        <h1><a href="http://www.webtarget.ir/">webtarget.ir</a></h1>
        <h2>یک ستون – عرض ثابت</h2>
	</div>
	<div class="navigation">
		<ul>
			<li><a href="#">خانه</a></li>
			<li><a href="#">درباره ما</a></li>
			<li><a href="#">خدمات</a></li>
			<li><a href="#">ارتباط با ما</a></li>
		</ul>
	</div>
	<div class="content">
		<h2>آموزش چینش صفحات وب سایت با استفاده از CSS</h2>
		<p>کد نویسی بر اساس استاندارد W3C انجام شده است</p>
        <p>چینش بر اساس زبان فارسی و از راست به چپ است - rtl </p>
	</div>
	<div class="footer">
		Copyright©webtarget.ir|2011
	</div>
</div>

کدهای CSS


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

نکات مهم در چینش صفحه


  • CSS Reset

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

  • استفاده از عرض ۹۶۰px

    در این نوع چینش از عرض ۹۶۰px استفاده شده است . این عرض با توجه رزولوشن ۱۰۲۴*۷۶۸ انتخاب شده است .

  • margin: 0 auto

    از این تکنیک برای در مرکز قرار دادن چینش در صفحه استفاده می شود . در استفاده از این تکنیک باید به خاطر داشته باشید که یک عرض برای چینش در نظر گرفته شود. به طور مثال در چینش فوق از عرض ۹۶۰px استفاده شده است .

  • اندازه فونت متغیر

    در این چینش از اندازه گذاری متغیر برای فونت استفاده شده است . برای آشنایی با این نوع از اندازه گذاری توصیه می شود مطلب اندازه فونت متغیر و ثابت

    را مطالعه نمائید .

@charset "utf-8";
/* CSS Document */
/*-------------------------*/
/* Design & Style by       */
/* Amir Sorouri            */ 
/* Sorouri.amir@gmail.com  */
/*-------------------------*/

/*--------- reset ---------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}
ol, ul {
	list-style: none;
}
body { font:62.5%/1.7em Tahoma, Arial, sans-serif;direction:rtl;}

/* ---------- Requirment ----------*/
.container {font-size:1.2em;}
.clearfloat {clear:both; height:1%;}
h1 , h2 , h3  { font-family:Arial, Helvetica, sans-serif;}
h1 { font-size:1.8em;}
h2 { font-size:1.6em;}
h3 { font-size:1.4em;}

/* ---------- Main -----------*/
.container
{
	margin: 0 auto;
	width: 960px;
	background:#fff;
}

.header
{
	background:#ccc;
	padding: 20px;
}
.header h1 { text-align:left;}
.header h1 a{ text-decoration:none; color:#09F;} 
.navigation
{
	background:#333;
	height:30px;
	line-height:30px;
}

.navigation ul li
{
	float:right;
}

.navigation li a
{
	display: block;
	height:30px;
	padding:0 15px;
	color:#fff;
	text-decoration: none;
	border-left: 1px solid #fff;
}

.navigation li a:hover { background:#09F; }

.content
{
	padding: 20px;
	background:#eee;
}
.content p { text-align:justify; line-height:17px;}

.content h2
{
	color:#000;
	margin: 0 0 .5em;
}

.footer
{
	background:#ccc;
	padding: 20px;
	text-align:left;
}


نویسنده / مترجم : امیر سروری

امیر سروری هستم علاقه مند به بازاریابی و تبلیغات آنلاین , طراحی وب سایت و البته آموزش


۱۴ دیدگاه برای این نوشته ثبت شده است


  1. محسن هاشمی
    ۱۸ مرداد ۱۳۹۰

    سلام.

    در اینجا هیچ عنصری، float نشده.

    پس چرا از clearfloat استفاده شده؟




  2. محسن هاشمی
    ۲۲ مرداد ۱۳۹۰

    سوال: چرا به header. و footer. مقدار height داده نشده؟

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




    • امیر سروری
      ۲۲ مرداد ۱۳۹۰

      محسن @ ارتفاع بر حسب محتویات تعیین میشه و padding باعث شده که ارتفاع بیشتر از محتویات داخل box بشه . در header دو تا تگ h1 , h2 وجود داره اما در footer تنها یک خط متن .




  3. متین
    ۷ شهریور ۱۳۹۰

    سلام
    من کد شما رو اجرا می کنم ولی فارسی رو به صورت لوزی شکل یا ؟ نمایش میدهد ممنون میشم راهنمایی کنید




    • امیر سروری
      ۷ شهریور ۱۳۹۰

      متین @ این کد فقط قسمتی رو که باید در Body قرار بگیره نشون میده . شما باید کد Html این چینش رو در داخل Body در یک صفحه html قرار بدید .




  4. متین
    ۸ شهریور ۱۳۹۰

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




    • امیر سروری
      ۹ شهریور ۱۳۹۰

      متین @ صفحه ای که شما می ساختید unicode نداشته به خاطر همین فونت فارسی رو درست نمایش نمی داده .




  5. سامر
    ۷ مرداد ۱۳۹۱

    سلام چرا همش از کلاس استفاده کردید؟
    چه دلیلی داره ؟




    • امیر سروری
      ۸ مرداد ۱۳۹۱

      در این مورد که باید ار آی دی استفاده بشه یا کلاس مطالب طیادی نوشته شده . این که من فقط از کلاس استفاده کردم از روی عادت هست .
      اما شاید اکثرا از آی دی استفاده میشه برای سکشن های جنرال مانند header , footer , content .




  6. سامر
    ۷ مرداد ۱۳۹۱

    ببخشید یه سوال دیگه

    .navigation ul li
    {
    float:right;
    }
    ارجحیت داره به اینکه display رو inline کنیم یا
    فرقی نمیکنه ؟




    • امیر سروری
      ۸ مرداد ۱۳۹۱

      سلام . عملا فرقی نمیکنه . ممکنه خاصیت inline در بغضی از مرورگرها دچار مشکل بشه . هر دو در واقع یک کار رو در این مورد انجام میدن .




  7. ميلاد مغنياني
    ۱۸ اردیبهشت ۱۳۹۳

    سلام ، میخوام فوتر این قالب دقیقا در پایین صفحه قرار بگیره…چکار باید انجام بدم.و عرض این قالب نمی خوام ثابت باشه میخوام همه چیزش تمام صفحه مرورگر باشه.




  8. ميلاد مغنياني
    ۲۸ اردیبهشت ۱۳۹۳

    سلام ، جواب سوال قبلی بنده رو نداید ، من منتظرم خواهش می کنم جواب بدید.یک کاره دیگه اینکه برای اینکه بخش بالای سایت ثابت باشه و مقع اسکرول نا پدید نشه چه کار کنم.هدر و منو رو میگم؟



دیدگاه خود را بنویسید





نشانی ایمیل شما منتشر نخواهد شد.

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

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

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2017 وب‌تارگت

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