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

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


امیر سروری 14 دیدگاه CSS , HTML , اصول طراحی وب سایت Wednesday, 6th July , 2011 30637 بازدید

در این مجموعه آموزشی تلاش خواهد شد تا با ساختار و چینش های استاندارد و مختلف از صفحات وب سایت با استفاده از لایه ها آشنا شوید . مطالب به صورت کاملا کاربردی ، ساده و کوتاه ارائه خواهند شد و آشنایی اولیه با 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 برای استاندارد سازی استفاده شده است .

  • استفاده از عرض 960px

    در این نوع چینش از عرض 960px استفاده شده است . این عرض با توجه رزولوشن 1024*768 انتخاب شده است .

  • margin: 0 auto

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

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

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

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

@charset "utf-8";
/* CSS Document */
/*-------------------------*/
/* Design & Style by       */
/* Amir Sorouri            */ 
/* [email protected]  */
/*-------------------------*/

/*--------- 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;
}


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

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


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


  1. محسن هاشمی
    9 August 2011

    سلام.

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

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




  2. محسن هاشمی
    13 August 2011

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

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




    • امیر سروری
      13 August 2011

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




  3. متین
    29 August 2011

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




    • امیر سروری
      29 August 2011

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




  4. متین
    30 August 2011

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




    • امیر سروری
      31 August 2011

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




  5. سامر
    28 July 2012

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



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




  6. سامر
    28 July 2012

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

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



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



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



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



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





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

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

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

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

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



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

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