آموزش طراحی قالب وب سایت – جلسه چهارم

0
  • نحوه قالب بندی سایت :

    به کمک دستور div در طراحی قالب، باکس ایجاد میکنیم و اجزای سایت را داخل این باکس ها load میکنیم

    یک div باید width  و height و رنگ ( background ) داشته باشد.

    میخواهیم عکس زیر را که در فتوشاپ ایجاد شده به کمک css و html به یک قالب سایت تبدیل کنیم :

    برای دیدن عکس در اندازه اصلی روی آن کلیک کنید

    homeword1

     

     

     

     

     

     

     

     

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

    نکته : طبق عکس فوق به هریک از بخش های قالب فوق box گفته میشود  مثل باکس  logo یا panel1 و …

    برای طراحی پروژه فوق نیاز به دانستن چند دستور مهم در css هست که به طور خلاصه توضیح میدم و بعد سراغ انجام پروژه میریم :

    1-نحوه تعیین فاصله عمودی بین باکس ها :

    در html از کد زیر به عنوان Enter استفاده میشود .

    همانطوری که در  عکس فوق مشاهده میکنید بین دو باکس lastnews و modtread فاصله هست و در بخش html نیز ما کد زیر را بین دو کد فوق قرار دادیم

    <div class="clear"> </div>

     

    .clear{
    	clear:both;
    	height:10px;
    }

    نکته : در طراحی قالب هیچ وقت از دستورات <br> و یا margin-top یا margin-bottom برای ایجاد فاصله بین باکس ها استفاده نکنید

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

     2- دستور Margin , Padding  :

    در کل 4 مدل margin و padding درایم : top – bottom – left – right

    به فاصله بین دو box به اصطلاح margin گفته میشود مثلا در عکس فوق برا ایجاد فاصله بین باکس panel1 , panel2  از دستور زیر استفاده شده

        <div class="panel1"><span>panel1</span></div>
        <div class="panel2"><span>panel2</span></div>

     

      div.panel2{
       margin-left:10px;
    }

    برای اطلاعات بیشتر و دیدن مثالها به این لینک مراجعه کنید

    ————————–

    و به فاصله محتوای درونی یک باکس با لبه داخلی آن padding گفته میشود

    مثلا در عکس فوق به فاصله بین کلمه logo و لبه سمت چپ آن paddding-left  گفته میشود

     

    span{
    
    	padding:30px;
    	color:#fff;
    	display: block;
    }
    

     

    <div class="logo"> <span>Logo</span></div>

    برای اطلاعات بیشتر به این لینک مراجعه کنید .

    3- دستور float  :

    با استفاده از خاصیت float می توان موقعیت یک عنصر را به سمت چپ یا راست تنظیم کرد.

    المان هایی که خاصیت float می گیرند، اندازه شان به اندازه محتوای داخلشون بستگی دارد و اگر محتوا کم باشد، المان مورد نظر کوچک میشه . به بعبارتی اگر خاصیت float بدهیم به تگ بلاک ، فضای خالی بعد آن تگ بلاک دیگر حفظ نمیشود

    • برای رفع این مشکل باید width رو به المانی که float دارد بدهید.

    کد بخش HTML  :

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Document</title>
    </head>
    <body>
        
        <div class="main">
            
            <div class="row-top">
                <div class="logo"> <span>Logo</span></div>
                <div class="header"><span> Header</span></div>
            </div>
    
            <div class="clear"></div>
    
              <div class="row-news">
          <div class="n-left">
            <div class="lastnews"><span>lastnews</span></div>
            <div class="clear"></div>
            <div class="mostread"><span>mostnews</span></div>
          </div>
          <div class="n-right">
            <div class="panel1"><span>panel1</span></div>
            <div class="panel2"><span>panel2</span></div>
          </div>
        </div>
    
        <div class="clear"></div>
    
        <div class="row-content">
         <div class="c-left"><span>c-left</span></div>
         <div class="component"><span>component</span></div>
         <div class="c-right"><span>c-right</span></div>
       </div>
    
       <div class="clear"></div>
    
       <div class="row-bottom">
         <div class="bottem1"><span>bottem1</span></div>
         <div class="bottem2"><span>bottem2</span></div>
         <div class="bottem3"><span>bottem3</span></div>
         <div class="bottem4"><span>bottem4</span></div>
         <div class="bottem5"><span>bottem5</span></div>
       </div>
    
       <div class="clear"></div>
    
       <div class="footer"> <span>footer</span></div>
    
       <div class="clear"></div>
    
     </div>
    
    
    
    </body>
    </html>

     

     

    کد بخش CSS :

    @import url(reset.css);
    
    body{
    	margin:0 auto;
    
    }
    
    span{
    
    	padding:30px;
    	color:#fff;
    	display: block;
    }
    
    .clear{
    
    	clear:both;
    	height:10px;
    }
    
    div.main{
    
    	margin:0 auto;
    	width:980px;
    	min-height: 500px;
    	background: #fff ;
    
    }
    
    
    div.logo{
    
    	margin-right:10px;
    	background: blue  ;
    	width:20%;
    	height:100px;
    	float:left;
    }
    
    div.header{
    	background: blue  ;
    	width:78%;
    	height:100px;
    	float:left;
    }
    
    
    div.n-left{
    
    	width:47%;
    	height:300px;
    	float:left;
    	margin-right:5px;
    
    }
    div.n-right{
    
    	width:47%;
    	height:300px;
    
    
    	float:left;
    }
    
    div.lastnews{
    	background: blue ;
    	height:145px;
    
    }
    
    div.mostread{
    	background: blue  ;
    	height:145px;
    
    }
    
    div.panel1{
    	height:300px;
    	background: blue  ;
    	width:48%;
    	float:left;
    	margin-left:15px;
    }
    
    div.n-right{
    
    	margin-left:35px;
    }
    
    div.panel2{
    	height:300px;
    	background: blue  ;
    	width:48%;
    	float:right;
    }
    
    div.c-left{
    
      width:200px;
      background: blue url() 0 0 no-repeat;
      height:300px;
      float:left;
      margin-right:40px;
    
    }
    
    div.component{
    
      width:500px;
      background: blue url() 0 0 no-repeat;
      height:300px;
      float:left;
    
    }
    
    div.c-right{
    
      width:200px;
      background: blue url() 0 0 no-repeat;
      height:300px;
      float:right;
    
    }
    
    
    div.bottem1,div.bottem2,div.bottem3,div.bottem4,div.bottem5{
      float:left;
      margin-right:18px;
      background: blue url() 0 0 no-repeat;
      width:18%;
    
      height:100px;
    }
    
    div.footer{
    
      width:980px;
      height: 50px;
      background: blue url() 0 0 no-repeat;
    }

     

    کل پروژه فوق را نیز میتوانید از اینجا دانلود کنید

    میانگین امتیازات ۵ از ۵
    از مجموع ۱ رای
    ارسال یک پاسخ

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

    این سایت توسط reCAPTCHA و گوگل محافظت می‌شود حریم خصوصی و شرایط استفاده از خدمات اعمال.

    The reCAPTCHA verification period has expired. Please reload the page.