ورود

View Full Version : نحوه تقسم کردن صفحه به قسمت های مختلف


asghar2008
دوشنبه 24 تیر 1392, 12:33 عصر
سلام

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

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

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

پیشاپیش از همه عزیزان متشکرم.:لبخندساده:


107269


همانطور که در عکس مشاهده میکنید میخوام تو صفحه 4 باکس بذارم(با DIV طراحی کنم) که نحوه چینش اونا به صورت عکس باشه! ولی هرکاری میکنم بهم میریزه ! :ناراحت:
اسکلت اصلی طراحی این صفحه به چه صورتی است ؟
dbdbdb
دوشنبه 24 تیر 1392, 12:38 عصر
دوست عزیز در مورد طراحی صفحه به صورت Tableless و بر اساس Div کار کن

در مورد قالب بندی صفحه با Div و float مطالعه بفرمایید
IamOverlord
دوشنبه 24 تیر 1392, 14:16 عصر
سلام!

ببین منظورت یه همچین چیزیه؟


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
* {
margin:0;
direction:rtl;
}

#header {
min-width:933px;
min-height:100px;
background-color:#00C0C0;
}

#main-div {
min-width:933px;
background-color:#F5FFFF;
min-height:600px;
/*padding:10px;*/
/*overflow:auto;*/
}

#middle-div{
width:933px;
background-color:#60C090;
margin:0 auto;
overflow:auto;
}

#footer {
min-width:933px;
min-height:100px;
background-color:#00C0C0;
}

.box-1 {
background-color:#6C9;
width:291px;
height:180px;
margin:10px;
float:right;
}
</style>
</head>

<body>
<div id="header">
</div>
<div id="main-div">
<div id="middle-div">
<div class="box-1">

</div>
<div class="box-1">

</div>
<div class="box-1">

</div>
<div class="box-1">

</div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
asghar2008
دوشنبه 24 تیر 1392, 14:36 عصر
سلام!

ببین منظورت یه همچین چیزیه؟



سلام

ممنون دوست عزیز.

واقعا متشکرم ، دقیقا منظورم همین بود.

اگه میشه لطف کنید ودر مورد style دهی و نحوه مقدار دهی margin و overflow توضیحاتی بگین.

آیا این مقدار دهی ها از استاندارد خاصی پیروی میکنه ؟؟
IamOverlord
دوشنبه 24 تیر 1392, 15:33 عصر
سلام دوست عزیز!
یه توضیح مختصری در مورد بعضی خطوط می دم ولی خودتون باید لینک هایی که گذاشتم رو بخونید تا بهتر متوجه بشید...
7: همه ی اجزای صفحه رو انتخاب می کنه...
8: فاصله ی بین div ها رو برای همه ی اجزای صفحه حذف می کنه...
13: حداقل مقدار width رو برای header تعیین می کنه ولی اگه اندازه ی پنچره بزرگ تر بود، width خودش مقداردهی می شه به صورت خودکار تا اندازه اش دو طرف صفحه رو رو پرو کنه...
18: بین header و footer این div قرار داره...
19: حداقل مقدار width مشخص می شه...
26: middle-div که قراره وسط main-div قرار بگیره و 4 تا div دیگه هم توش...
27: این دفعه width این div بر خلاف والدش ثابت هست...
29: حالا می گیم که middle-div از نظر عرضی وسط والدش که main-div هست قرار بگیره...
30: با توجه به این که فرزند هایی داره که خاصیت float اشون برابر right تنظیم شده، خصوصیت overflow رو برابر auto قرار دادیم که یه موقع محتواش نریزه بیرون...
39: این دفعه یه class رو انتخاب کردیم... box-1 رو class در نظر گرفتیم نه id... که بیش از یه div بتونن ازش استفاده کنن...
43: فاصله ی box ها از چهار طرف 10px در نظر گرفته می شه...
44: با این کار box هامون از راست شروع به چیده شدن کنار هم می کنن تا وقتی که جا نباشه و box چهارم بیاد پایین...

اگه توجه کنی به چند شکل مختلف می شه به margin مقدار داد، این جا رو ببین: http://www.w3schools.com/css/css_margin.asp
برای درک تفاوت margin و padding و border این جا رو هم ببین: http://stackoverflow.com/questions/2189452/when-to-use-margin-vs-padding-in-css
ضمنا برای اطلاعات بیش تر در مورد overflow این جا رو ببین چند تا مثال هم گذاشته: http://www.w3schools.com/cssref/pr_pos_overflow.asp
این مقداردهی ها باید بر اساس مستندات CSS باشه که گاهی بعضی مرورگرها این استاندارد ها رو رعایت نمی کنن... مثلا IE که تو این زمینه تک بود، البته الان اوضاعش یه مقدار بهتر شده!