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

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


امیر سروری ۱۴ دیدگاه CSS , HTML , اصول طراحی وب سایت چهارشنبه, 6th جولای , 2011 25578 بازدید

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

    سلام.

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

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




  2. محسن هاشمی
    13 آگوست 2011

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

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




    • امیر سروری
      13 آگوست 2011

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




  3. متین
    29 آگوست 2011

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




    • امیر سروری
      29 آگوست 2011

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




  4. متین
    30 آگوست 2011

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




    • امیر سروری
      31 آگوست 2011

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




  5. سامر
    28 جولای 2012

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




    • امیر سروری
      29 جولای 2012

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




  6. سامر
    28 جولای 2012

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

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




    • امیر سروری
      29 جولای 2012

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



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



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



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





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

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

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

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

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



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

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