نحوه طراحی این صفحه مایکروسافت چطوری؟

[shahab_ksh]

با سلام

http://www.microsoft.com/windows/windows-7/

این صفحه مایکروسافت رو ببینید

این صفحه از سه بخش تشکیل شده

1- بخش header که از تصویر پیس زمینه ای به نام header_bkg استفاده کرده

2- بخش میانی که مطالب درون اون قرار می گیرن باز هم برای پس زمینه از تصویر header_bkg استفاده کرده

3- بخش پایانیfooter که از تصویر bg_footer_image استفاده کرده


عکسی که برای footer استفاده کرده اینه

http://asemon.net/header_bkg.jpg

توجه کنید که ارتفاع این عکس 425 پیکسل هست
حال اگه این footer رو پس زمینه یک سطر از جدول در نظر بگیریم چطوری محتوی صفحه از اول این عکس شروع شده و بیشتر از 425 پیکس ارتفاع داره اما عکس تکرار نشده ؟ شاید بگید repeat-x زده ولی چطور ایم repeat-x از اول عکس شروع نشده؟ و ته عکس footer به عنوان عکس تکرار انجام وظیفه میکنه یعنی شما اگه وسط این صفحه برید و بخاید بک گروند رو save کنید می بینید همین فایل عکسbg_footer_image هستش ؟! این رو چطوری ساختن؟
یا بهتره اینطوری بگم این نوار قرمز رنگ زیر رو چطوری ساختن که هی تکرار میشه؟
http://asemon.net/navar.jpg

[Chabok]

سلام .

دنبال این میگردید ؟
http://www.microsoft.com/windows/Framework/images/bg_span.gif

چیز مبهمی توی این طراحی زیبا نیست . ولی چون میخوام پست 700 ام کامل باشه توضیح میدم :لبخند:

کد صفحات بصورت زیر می باشد :


<div id="top_bkg">
<div id="content_bkg">
<div id="basePageFrame">
Contents
</div>
</div>
</div>
<div id="footer_bkg">
<div id="base_page_footer">
Footer Contents
</div>
</div>
استایل این عناصر به این صورت تعریف شده است :


#top_bkg {
background-color:#DEE9F6;
background-image:url(../images/body_gradient_span.gif);
background-repeat:repeat-x;
clear:both;
}

#content_bkg {
background-image:url(../images/bg_span.gif);
background-repeat:repeat-y;
}

#basePageFrame {
background-image:url(../images/header_bkg.jpg);
background-repeat:no-repeat;
height:100%;
}

#base_page_footer {
background-image:url(../images/bg_footer_image.jpg);
background-repeat:no-repeat;
height:96px;
margin:0 auto;
padding:0;
}

#footer_bkg {
background-image:url(../images/bg_footer_gradient.gif);
background-repeat:repeat-x;
}
موفق باشید .