hamiii
پنج شنبه 01 مهر 1389, 09:52 صبح
سلام ،سعی میکنم این آموزش رو در 3 الی 4 قسمت بصورت خلاصه و قابل فهم ارائه بدم.
در پایان هر آموزش به سوالات دوستان بصورت کامل پاسخ خواهم داد.
شدیدا از انتقادات شما (البته بهمراه پیشنهادات) استقبال می کنم.
از دوستان با تجربه هم دعوت میکنم اگر اشکالی در آموزشها بود یا راه ساده تری وجود داشت حتما تذکر بدن تا این چند قسمت آموزش که خیلی از دوستان مبتدی بهش نیاز دارن با کمترین اشکال ارائه بشه.
با تشکر
قسمت اول :آموزش نحوه ی چینش باکس ها
تعداد قابل توجهی از مشکلاتی که دوستان در این تالار مطرح میکنن برمیگرده به نحوه ی چینش اشتباه باکسها در وبسایتشون.
برای چینش باکسها در یک طراحی روشهای مختلفی وجود دارد.من یکی از این روشها رو مرحله به مرحله انجام میدم تا دوستانی که تو این زمینه مشکل دارند متوجه
بشن.
برای مثال فرض کنید می خواهیم یک قالب 3 ستونه معمولی طراحی کنیم.یعنی یک سایدبار در سمت راست،یک ساید بار در سمت چپ و یک باکس هم در مرکز
داشته باشیم و تمامی این باکس ها در باکسی به نام main قرار گیرند. طرحی مانند تصویر زیر:
http://barnamenevis.org/forum/attachment.php?attachmentid=56936&stc=1&d=1285222354
برای اجرای این طرح شما می توانید تمامی باکسهایی را که در main قرار می گیرند به یک سمت float دهید. در اینصورت همه ی اونها از یک سمت شروع به چیده
شدن می کنند و کم و زیاد شدن ارتفاع اونها باعث جابجا شدنشون نمیشه (مشکلی که ممکن است شما در سایتهای داینامیک با آن برخورد کنید.)
*نکته ای که باید رعایت کنیم اینه که مجموع عرض تمام باکسها + حاشیه هاشون + ضخامت کاردها (border) شون باید برابر عرض main باشد.
برای شروع کدنویسی بهتر است اول کدهای HTML رو بنویسیم تا بدانیم دقیقا چه چیزهایی در صفحه داریم
*در این آموزش فقط قسمت main رو طراحی میکنیم.در آموزش بعدی header , navigation و footer را اضافه خواهیم کرد.
کدهای HTML:(فقط قسمت body)
<body>
<center>
<div id="main">
<div id="sidebar1"></div><!--sidebar-->
<div id="content"></div><!--content-->
<div id="sidebar2"></div><!--sidebar-->
</div><!--main-->
</center>
</body>
توضیح :
1.تمامی کدها را در تگ center قرار می دهیم تا وسط چین بشوند.
2.باکسی که همه ی محتویات سایتمون را در بر میگیره و نیاز به توضیحات اضافه ندارد.container
3.یک باکس کلی داریم که سه باکس مورد نظر را در بر می گیرد.به این باکس آی دی main را می دهیم.
دو استفاده از این باکس می کنیم؛ یکی اینکه باکسهای زیرمجموعه را در کنار هم نگه دارد و دیگر اینکه بتونیم حاشیه درونی را کنترل کنیم و فاصله ی باکس ها از چهار طرف را کنترل کنیم.
4.سه تا باکس مورد نظر را به ترتیب از یک سمت می نویسیم و آی دی می دهیم.
استایل دهی :
*{
margin:0;
padding:0;
}
body{
font-family:tahoma;
font-size:8pt;
color:#333;
background:#efefef;
direction:rtl;
text-align:right
}
C#ontainer{
width:900px;
border:1px solid C#cc;
background:#fff;
height:auto;
overflow:hidden;
margin:20px 0 20px 0;
}
#main{
min-height:300px;
margin:10px;
border:1px solid red;
float:right
}
#sidebar1{
width:150px;
float:left;
border:1px solid blue;
margin:0;
height:400px
}
C#ontent{
width:542px;
float:left;
height:400px;
margin:0 0 0 15px;
border:1px solid blue
}
#sidebar2{
width:150px;
float:left;
border:1px solid blue;
margin:0 0 0 15px;
height:400px
}
توضیحات:
1.استایلی که به ستاره می دهیم مربوط به کل سند HTML میشه.
2.یکسری خصوصیات وراثتی مورد نیاز در کل صفحه را به body می دهیم تا نیازی به تکرار در همه باکس ها نباشه.
3.باکس container که معرف حضور شما هست.تنها چیزی که تو این باکس قابل توضیح دادن هست خصوصیات height و overflow هستند.
ترکیب height:auto و overflow:hidden باعث میشه شما در سایتهای داینامیک مشکلی نداشته باشین و ارتفاع باکس براحتی همراه با افزایش ارتفاع محتویات سایت تغییر کنه. همچنین باعث میشه که تو همه ی مرورگرها نمایش یکسانی داشته باشه.
*اگر دقیقا تاثیر این دو خصوصیت را متوجه نشدید می توانید مقادیر را عوض کنید و تو مرورگرها ی مختلف تست کنید،به نحوی که محتویات درون باکس ارتفاعی بیشتر از ارتفاع خود باکس داشته باشد.
4.همونجور که اول آموزش توضیح دادم و این روش همه ی باکسها را به یک سمت شناور میکنیم.
استایل باکسهای sidebar1 ، content و sidebar2 رو ببینید.همگی به سمت چپ شناور شده اند.
یکی از قسمتهای مهم استایل دهی در این سه باکس نوشتن عرض مناسب برای هرکدومه.که قبلا یه اشاره ای بهش کردم.باید توجه کنید که padding ، margin و border جزء عرض باکس نیستند و باید اونا رو هم در محاسبه عرض هر کدوم از باکسها لحاظ کرد.
می تونید عرض یکی از باکسها را یک پیکسل اضافه کنید ببینید چه اتفاقی می افته.
*یک نکته بسیار مهم: margin در سمت مخالفی که باکس را شناور کرده ایم بی اثر میشود و نمیشه روش حساب کرد.
مثلا در این مثال که باکسها را به سمت چپ شناور کرده ایم margin-right هیچ اثری ندارد و همیشه برابر صفر قرار میگیره.
فکر کنم دیگه توضیحی لازم نداره.سعی کنید کدها رو خودتون بنویسید و اصلا کپی پیست نکنید.چون تو نوشتن به خیلی نکات توجه خواهید کرد که تو کپی پیست متوجه نمی شوید.
سعی کنید کلا بفهمید چیکار کردیم بعد به تنهایی شروع به نوشتن کنید.اینجوری خیلی چیزها رو جا میندازید و وقتی مرورگر را ریفرش میکنید متوجه کمبودها و در نتیجه اثر هر ویژگی استایل خواهید شد.
موفق و موید باشید تا آموزش بعدی.
در پایان هر آموزش به سوالات دوستان بصورت کامل پاسخ خواهم داد.
شدیدا از انتقادات شما (البته بهمراه پیشنهادات) استقبال می کنم.
از دوستان با تجربه هم دعوت میکنم اگر اشکالی در آموزشها بود یا راه ساده تری وجود داشت حتما تذکر بدن تا این چند قسمت آموزش که خیلی از دوستان مبتدی بهش نیاز دارن با کمترین اشکال ارائه بشه.
با تشکر
قسمت اول :آموزش نحوه ی چینش باکس ها
تعداد قابل توجهی از مشکلاتی که دوستان در این تالار مطرح میکنن برمیگرده به نحوه ی چینش اشتباه باکسها در وبسایتشون.
برای چینش باکسها در یک طراحی روشهای مختلفی وجود دارد.من یکی از این روشها رو مرحله به مرحله انجام میدم تا دوستانی که تو این زمینه مشکل دارند متوجه
بشن.
برای مثال فرض کنید می خواهیم یک قالب 3 ستونه معمولی طراحی کنیم.یعنی یک سایدبار در سمت راست،یک ساید بار در سمت چپ و یک باکس هم در مرکز
داشته باشیم و تمامی این باکس ها در باکسی به نام main قرار گیرند. طرحی مانند تصویر زیر:
http://barnamenevis.org/forum/attachment.php?attachmentid=56936&stc=1&d=1285222354
برای اجرای این طرح شما می توانید تمامی باکسهایی را که در main قرار می گیرند به یک سمت float دهید. در اینصورت همه ی اونها از یک سمت شروع به چیده
شدن می کنند و کم و زیاد شدن ارتفاع اونها باعث جابجا شدنشون نمیشه (مشکلی که ممکن است شما در سایتهای داینامیک با آن برخورد کنید.)
*نکته ای که باید رعایت کنیم اینه که مجموع عرض تمام باکسها + حاشیه هاشون + ضخامت کاردها (border) شون باید برابر عرض main باشد.
برای شروع کدنویسی بهتر است اول کدهای HTML رو بنویسیم تا بدانیم دقیقا چه چیزهایی در صفحه داریم
*در این آموزش فقط قسمت main رو طراحی میکنیم.در آموزش بعدی header , navigation و footer را اضافه خواهیم کرد.
کدهای HTML:(فقط قسمت body)
<body>
<center>
<div id="main">
<div id="sidebar1"></div><!--sidebar-->
<div id="content"></div><!--content-->
<div id="sidebar2"></div><!--sidebar-->
</div><!--main-->
</center>
</body>
توضیح :
1.تمامی کدها را در تگ center قرار می دهیم تا وسط چین بشوند.
2.باکسی که همه ی محتویات سایتمون را در بر میگیره و نیاز به توضیحات اضافه ندارد.container
3.یک باکس کلی داریم که سه باکس مورد نظر را در بر می گیرد.به این باکس آی دی main را می دهیم.
دو استفاده از این باکس می کنیم؛ یکی اینکه باکسهای زیرمجموعه را در کنار هم نگه دارد و دیگر اینکه بتونیم حاشیه درونی را کنترل کنیم و فاصله ی باکس ها از چهار طرف را کنترل کنیم.
4.سه تا باکس مورد نظر را به ترتیب از یک سمت می نویسیم و آی دی می دهیم.
استایل دهی :
*{
margin:0;
padding:0;
}
body{
font-family:tahoma;
font-size:8pt;
color:#333;
background:#efefef;
direction:rtl;
text-align:right
}
C#ontainer{
width:900px;
border:1px solid C#cc;
background:#fff;
height:auto;
overflow:hidden;
margin:20px 0 20px 0;
}
#main{
min-height:300px;
margin:10px;
border:1px solid red;
float:right
}
#sidebar1{
width:150px;
float:left;
border:1px solid blue;
margin:0;
height:400px
}
C#ontent{
width:542px;
float:left;
height:400px;
margin:0 0 0 15px;
border:1px solid blue
}
#sidebar2{
width:150px;
float:left;
border:1px solid blue;
margin:0 0 0 15px;
height:400px
}
توضیحات:
1.استایلی که به ستاره می دهیم مربوط به کل سند HTML میشه.
2.یکسری خصوصیات وراثتی مورد نیاز در کل صفحه را به body می دهیم تا نیازی به تکرار در همه باکس ها نباشه.
3.باکس container که معرف حضور شما هست.تنها چیزی که تو این باکس قابل توضیح دادن هست خصوصیات height و overflow هستند.
ترکیب height:auto و overflow:hidden باعث میشه شما در سایتهای داینامیک مشکلی نداشته باشین و ارتفاع باکس براحتی همراه با افزایش ارتفاع محتویات سایت تغییر کنه. همچنین باعث میشه که تو همه ی مرورگرها نمایش یکسانی داشته باشه.
*اگر دقیقا تاثیر این دو خصوصیت را متوجه نشدید می توانید مقادیر را عوض کنید و تو مرورگرها ی مختلف تست کنید،به نحوی که محتویات درون باکس ارتفاعی بیشتر از ارتفاع خود باکس داشته باشد.
4.همونجور که اول آموزش توضیح دادم و این روش همه ی باکسها را به یک سمت شناور میکنیم.
استایل باکسهای sidebar1 ، content و sidebar2 رو ببینید.همگی به سمت چپ شناور شده اند.
یکی از قسمتهای مهم استایل دهی در این سه باکس نوشتن عرض مناسب برای هرکدومه.که قبلا یه اشاره ای بهش کردم.باید توجه کنید که padding ، margin و border جزء عرض باکس نیستند و باید اونا رو هم در محاسبه عرض هر کدوم از باکسها لحاظ کرد.
می تونید عرض یکی از باکسها را یک پیکسل اضافه کنید ببینید چه اتفاقی می افته.
*یک نکته بسیار مهم: margin در سمت مخالفی که باکس را شناور کرده ایم بی اثر میشود و نمیشه روش حساب کرد.
مثلا در این مثال که باکسها را به سمت چپ شناور کرده ایم margin-right هیچ اثری ندارد و همیشه برابر صفر قرار میگیره.
فکر کنم دیگه توضیحی لازم نداره.سعی کنید کدها رو خودتون بنویسید و اصلا کپی پیست نکنید.چون تو نوشتن به خیلی نکات توجه خواهید کرد که تو کپی پیست متوجه نمی شوید.
سعی کنید کلا بفهمید چیکار کردیم بعد به تنهایی شروع به نوشتن کنید.اینجوری خیلی چیزها رو جا میندازید و وقتی مرورگر را ریفرش میکنید متوجه کمبودها و در نتیجه اثر هر ویژگی استایل خواهید شد.
موفق و موید باشید تا آموزش بعدی.