مشاهده منبع مطلب به زبان اصلی

وب سایت ما شامل موارد زیر است :

  • ناحیه سر صفحه یا header
  • ناحیه بازدید موقت یا preview
  • ناحیه مطالب سایت یا content
  • ناحیه پایین صفحه  یا footer

 

ما تمام موارد بالا را در یک تگ دایو والد با نام wrapper ایجاد می کنیم یعنی بلافاصله بعد از باز کردن تگ body تگ div با id برابر wrapper را باز می کنیم و تمام قسمت های سایت را در ان ایجاد می کنیم
نمای کلی سایت بصورت زیر خواهد بود :
<body>

<div id="wrapper">

 <!-- CODE FOR HEADER AREA -->

 <!-- CODE FOR PREVIEW AREA -->

<!-- CODE FOR CONTENT AREA -->

<!-- CODE FOR FOOTER AREA -->

</div> <!-- #wrapper -->

</body>
 
 حال نوبت به رنگ امیزی زمینه تگ div با ای دی wrapper است . می خواهیم برای ان رنگ ابی پر رنگ را به شماره #1D4D6B در نظر بگیریم
لذا در تگ head تگ style را باز کنید و اولین سبک را برای تگی که ای دی ان wrapper است تعریف نمائید :
 
#wrapper{

   background:#1D4D6B;

}
 
طراحی ناحیه header
 می خواهیم در این قسمت نام شرکت و منویی افقی را قرار دهیم
 

حال خوب به تصویر نگاه کنید .

اگر مستطیل بزرگ تر را لایه اصلی header در نظر بگیریم که رنگ ان ابی کم رنگ تر است و ای دی ان را header می گذاریم ، مستطیل یا لایه یا همان دایو دیگری وسط ان قرار دارد که رنگ زمینه ان تیره تر است و ای دی ان را center_header می گذاریم

 

حالا درون لایه وسطی که نام ان را center_header گذاشتیم  ، دو لایه دیگر نیاز داریم

یکی در سمت چپ قرار می گیرد و نام شرکت در ان نوشته می شود . این لایه ( تگ دایو) را با ای دی left_header نام گذاری می کنیم

در سمت دیگر لایه وسطی که نام ان header بود ، منو قرار دارد که این منو را نیز در یک لایه ( تگ دایو ) دیگر با ای دی به نام menu ایجاد می کنیم

 

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

 

 <div id="header">

   <div id="center_header" >

   
      <div id="left_header" >

         Company Name    

      </div><!-- #left_header -->


      <div id="menu" >

         <a href="home.html">Home</a>

         <a href="About.html">About Us</a>


         <a href="Services.html">Services</a>

         <a href="Partners.html">Partners</a>

         <a href="Contact.html">Contact Us</a>

      </div><!-- #menu -->


   </div><!-- #center_header -->

</div> <!-- #header -->

 

 حالا بیائید با هم ویژگیهای این لایه ها را تنظیم کنیم :

ابتدا تنظیم رنگ زمینه لایه اصلی که ای دی ان را header گذاشتیم به رنگ شماره 074266 است.

در ضمن عرض و ارتفاع این لایه ( دایو ) را مشخص نمی کنیم تا عرض ان هم اندازه صفحه وب باشد

در تگ style ویژگیهای این ای دی را نیز اضافه می کنیم

 #header{

      background:#074266;

}

 بعد نوبت به تعیین ویژگیهای لایه ای است که ای دی ان را با center_header نام گذاری کردیم

 می خواهیم رنگ زمینه ان رنگ شماره 053350 باشد

چون نمی خواهیم عرض ان و ارتفاع انبرابر عرض و ارتفاع لایه والد ان یعنی header باشد پس عرض و ارتفاع مورد نظر را برای این لایه ( دایو ) مشخص می کنیم

و برای اینکه لایه center_header دقیقا در راستای افقی وسط لایه والدش یعنی header قرار گیرد از ویژگی margin برابر auto استفاده می کنیم

درون تگ style ویژگیهای این لایه را نیز اضافه می کنیم :
 #center_header{
    background:#053350;
    height:100px;
    margin:auto;
    width:980px;
    }

 نوبت به تنظیم ویژگیهای لایه با ای دی left_header است

عرض ، ارتفاع ، اندازه متن و تراز متن  درون لایه و رنگ زمینه انرا مشخص می کنیم

برای اینکه لایه left_header در سمت چپ لایه menu قرار گیرد ویژگی float انرا left می کنیم

ویژگی line-heoght باعث قرار گیری متن در وسط راستای عمودی می شود

و ویژگیهای لایه با ای دی left_header را نیز به تگ style اضافه می نمائیم

 #left_header{
   float:left;
   font-size:40px;
   line-height: 100px;
   text-align: center;
   width:370px;
}

 نوبت تنظیم لایه ای است که دورن ان منو ی افقی قرار دارد

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

لذا به راحتی با استفاده از پیوندها ی تگ A این منو را ایجاد می کنیم

برای اینکه لایه menu در سمت راست لایه left_header قرار گیرد ویژگی float ان را right می کنیم

 عرض لایه menu برابر 530 پیکسل و ارتفاع ان برابر 30 پیکسل می شود .

و برای اینکه لایه menu درست در وسط لایه center_headaer قرار گیرد از margin استفاده شده است

 

 #menu{
    float:right;
    height: 30px;
    margin: 42px 0 0;
    width: 530px;
    }
 دقت کنید اگر float را برای دو لایه left_header , menu مشخص نکنید ، اینها زیر هم قرار می گیرند چون به طور پیش فرض لایه ها زیر هم قرار می گیرند نه جلوی هم

 تا این لحظه ناحیه header بصورت زیر شده است :

 

 
رنگ و اندازه متن پیوندهای تگ A در منوی ایجاد شده همان ویژگیهای پیش فرض را دارند

 می خواهیم فقط  ویژگیهای تگ های a که دورن تگ دایو با ای دی menu قرار دارند را تنظیم کنیم

پس برای مشخص کردن تگ های A درون لایه با ای دی menu بصور ت زیر عمل می کنیم :

 #menu a{
    color: #EEEEEE;
    font-size: 15px;
    font-weight: bold;
    padding: 8px 12px;
    }

 در قسمت بالا با ویژگی padding بین پیوندها فاصله ایجاد کرده ایم

در اینجا فضای خالی  بین منوها از چپ و راست برابر 12 پیکسل و از بالا و پائین برابر 8 پیکسل می شود

 در قسمت بعد می خواهیم مشخص کنیم با قرار گرفتن اشاره گر ماوس روی پیوندهای درون تگ دایو با ای دی menu ، تصویر زیر بعنوان زمینه این پیوندها نمایان شود
 
 پس ویژگی مربوط به رویداد hover ( قرار گیری اشاره گر ماوس روی چیزی ) تگ های a که دورن لایه با ای دی menu قرار دارند را بصورت زیر در تگ style  می نویسیم
 #menu a:hover{
   background: #1E90FF url(images/hover-menu-items.png) repeat-x;
}
 شما در قسمت url ادرس تصویر را  که در کامپیوتر خودتان  ذخیره کرده اید بنویسید 
 
 
طراحی ناحیه preview
 در این ناحیه ما 3 ناحیه مستطیلی شفاف داریم
 در این مستطیل ها 3 -4 خط از متن اصلی مشاهده می شود . با کلیک روی گزینه more به متن اصلی پیوند داده می شویم

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

برای ایجاد تصویر شفاف ، در فتوشاپ یک تصویر به صورت trancparency ایجاد کنید و سپس انرا با فرمت gid یا png ذخیره نمائید

 

 برای این کار ، یک لایه ( تگ div ) با ای دی به نام center_preview داریم که هر سه مستطیل شفاف را درون ان قرار می دهیم

و خود لایه center_preview درون لایه preview قرار می گیرد

هر سه لایه ( تگ دایو ) که درون انها مستطیلهای شفاف را قرار می دهیم با ای دی یکسان topic نام گذاری می کنیم . تا با هم تحت تاثیر استایل های css قرار بگیرند

 
 اول از همه لایه هایی را طراحی می کنیم که در انها سه چهار خط متن نوشته شده است
<div id="topic">
    <h2>Topic 1</h2>          
    <p>          
              خط اول                 
        خط دوم                 
        خط سوم                 
        
        <a href="#">[read more] </a>                
     </p>          
</div> <!-- #topic -->

<div id="topic">

                <h2>Topic 2</h2>             
    <p>             
        خط اول                  
        خط دوم                  
        خط سوم                  
        
        <a href="#">[read more] </a>                 
     </p>              
</div> <!-- #topic -->

<div id="topic">

    <h2>Topic 3</h2>               
    <p>               
        خط اول                      
        خط دوم                      
        خط سوم                      
        
        <a href="#">[read more] </a>                      
     </p>               
</div> <!-- #topic -->

 سپس دستورات مربوط به سه لایه topic را درون لایه ای به نام center_preview قرار می دهیم

و این لایه center_preview را درون لایه دیگری به نام preview قرار می دهیم

این یک کار سلیقه ای است زیرا می خواهیم رنگ لایه preview با رنگ زمینه لایه ای که سه مستطیل شفاف درون ان است ،  فرق داشته باشد 

 <div id="preview">
   <div id="center_preview" >
<div id="topic">
    <h2>Topic 1</h2>
    <p>
         خط اول
        خط دوم    
        خط سوم
        
        <a href="#">[read more] </a>
     </p>
</div> <!-- #topic -->

<div id="topic">

    <h2>Topic 2</h2>
    <p>
        خط اول
        خط دوم    
        خط سوم
        
        <a href="#">[read more] </a>
     </p>
</div> <!-- #topic -->

<div id="topic">

    <h2>Topic 3</h2>
    <p>
        خط اول
        خط دوم    
        خط سوم
        
        <a href="#">[read more] </a>
     </p>
</div> <!-- #topic -->
</div><!-- #center_preview -->
</div> <!-- #preview -->
 
 نوبت ان است تا ویزگیهای css را برای لایه های topic , center_preview , preview تنظیم کنیم

 لایه preview و سه لایه topic از تصویر زمینه استفاده می کنند

همانطور که قبلا گفتیم باید فرمت تصویر زمینه شفاف  png باشد  و تصاویر با فرمت jpg نمی توانند از زمینه شفاف پشتیبانی کنند . اگر بخواهید تصویر با فرمت jpg را شفاف نمایش دهید مجبورید از ویژگی  opacity سی اس اس  استفاده نمائید

 برین تو فتوشاپ

یه تصویر مثلا 1 در 1 سانتی متر یا هر چند در هر چند که دلتو می خواد  با زمینه شفاف باز کنید

یه لایه درست کنین

توش رنگ ابی پر رنگ بریزین

opacity اونو کم کنین تا شفاف بشه

بعد با قالب png ذخیرش کنین

 

 

1:

برای لایه ای که ای دی ان preview است ، ویژگیهای زیر را تنظیم می کنیم :

color : رنگ متن های درون لایه preview را مشخص می کند

height : ارتفاع لایه preview را مشخص می کند

این ویژگیها را برای تگی که ای دی ان preview است درون تگ style اضافه نمائید

 #preview{
    color:#EEEEEE;
    height: 300px;
    }
 توجه داشته باشید با اینکه متن ها دورن لایه به نام topic هستند ، اما تحت تاثیر ویژگی color لایه preview قرار می گیرند به خاطر اینکه تگ preview والد تگهای topic حساب می شود پس تگ های فرزند از تگ والد شان ارث می برند

 2:

مشخص کردن ویژگیهای لایه center_preview

عرض و ارتفاع ان را مشخص می کنیم

برای اینکه دقیقا لایه در راستای افقی وسط لایه preview ( لایه والد ) قرار گیرد از margin برابر auto استفاده می کنیم

تصویر شفافی را نیز که قبلا ایجاد کرده ایم بعنوان زمینه کار در نظر می گیریم

برای لایه ای که ای دی ان center_preview است ، ویژگیهای سی اس اس را درون تگ style اضافه نمائید

 #center_preview{
    height:300px;
    width:980px;
    margin:0 auto;
    background: url(images/wave.png) ;
    }

3:

مشخص نمودن ویژگیهای تگ های topic

تصویر شفاف برای  زمینه لایه ( حتما تصویر فرمت png ) داشته باشه

عرض برابر 300 پیکسل

برای اینکه هر لایه topic  سمت چپ لایه بعدی خود قرار گیرد از float برابر left استفاده می شود

اندازه متن های دورن لایه های topic

تعیین فاصله هر لایه topic از بالا پائین چپ راست لایه والدش یعنی center_preview با margin

مشخص کردن خط حاشیه برای هر لایه topic با  border و گرد کردن ان با border_radiuse

( ویژگی گرد کردن را برای تمام انواع مرورگرها می نویسیم )

 

 #topic{
    background: url(images/topic.png) repeat;
    width:300px;
    float:left;
    font-size: 13px;
    margin:40px 10px 10px 10px;
    border: 1px solid #444;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }

 4 :

تعیین ویژگیهای تمام تگ های h2 ای که دورن لایه ای با ای دی topic قرار دارند

تعیین عرض نوشته

با padding و اضافه کردن فضای خالی باعث می شویم متن h2 نسبت به وضعیت پیش فرضش مقداری به سمت راست جا به جا شود

 #topic h2{
    width:200px;
    padding: 10px 0 0 50px;
    }

 5:

مشخص کردن ویژگیهای تگ های p درون لایه هایی که ای دی انها topic است

اندازه فاصله خالی اطراف پاراگرافها

تعیین فاصله بین خطهای هر پارگراف

 #topic p{
    padding: 5px 10px 10px 10px;
    line-height: 20px;
    }

 6:

تعیین ویژگیهای پیوندهایی که با تگ A درون لایه های topic قراردارند

تعیین رنگ و سبک پیوندها

 

 #topic a{
    color:#FFFFFF;
    font-weight: bold;
    }
 
طراحی ناحیه محتوا یا content
 
 ناحیه محتوا دارای بخشی در سمت چپ ان است که دارای پیوندهایی به صفحات دیگر است اما لایه ای که در سمت راست ان قرار دارد حاوی مطالب این صفحه است

 لایه هایی که برای این بخش نیاز داریم :

لایه والد باای دی به نام container که تمام لایه های دیگر این بخش دورن ان قرار می گیرند

لایه ای که در وسط لایه container قرار می گیرد و نام ان center_container است

لایه sidebar که دورن لایه center_container قرار می گیرد و پیوندها به صفحات دیگر دورن ان نوشته می شوند

لایه با ای دی به نام title که برای نمایش متن sidebar درون لایه sidebar قرار می گیرد

لایه با ای دی content برای محتوای صفحه وب که دورن لایه center_container قرار می گیرد

( و نیز تگ ها و لایه های دیگری که دورن این تگ ها بصورت فرعی استفاده شده اشت )

 
<div id="container">
<div id="center_container">
<div id="sidebar">
<div id="title">Sidebar</div>
    <ul>
       <li><b>Website Link</b>
                    Links Description....<a href="#">[more] </a> </li>
       <li><b>Website Link</b>
                    Links Description....<a href="#">[more] </a> </li>
       <li><b>Website Link</b>
                    Links Description....<a href="#">[more] </a> </li>
       <li><b>Website Link</b>
                    Links Description....<a href="#">[more] </a> </li>
       <li><b>Website Link</b>
                    Links Description....<a href="#">[more] </a> </li>
       <li><b>Website Link</b>
                    Links Description....<a href="#">[more] </a> </li>
       <li><b>Website Link</b>
                    Links Description....<a href="#">[more] </a> </li>
    </ul>
</div> <!-- #sidebar -->
            
<div id="content">

<h2>Welcome to Our Website</h2>

<p>Description of the website. Description
 of the website. Description of the website.
 Description of the website. Description of
 the website. Description of the website. Description
  of the website. Description of the website.
  Description of the website. Description of the website.
  Description of the website. Description of the website.  </p>

   <div id="left_list">
   <ul>
      <li><a href="#" >Contents List Items</a></li>
      <li><a href="#" >Contents List Items</a></li>
      <li><a href="#" >Contents List Items</a></li>
      <li><a href="#" >Contents List Items</a></li>
   </ul>
   </div> <!-- #left_list -->
        
   <div id="right_list">
   <ul>
      <li><a href="#" >Contents List Items</a></li>
      <li><a href="#" >Contents List Items</a></li>
      <li><a href="#" >Contents List Items</a></li>
      <li><a href="#" >Contents List Items</a></li>
   </ul>
   </div> <!-- #right_list -->
</div> <!-- #content -->
</div> <!-- #center_conatiner -->
</div> <!-- #container -->
 تعیین ویژگیهای لایه ها و تگ های ناحیه محتوا :

 1:

تعیین ارتفاع لایه container

#container{
    height: 320px;
    }

 2:

تعیین ویژگیهای لایه center_container

تعیین  رنگ زمینه و عرض و ارتفاع و وسط چین کردن لایه نسبت به لایه والدش

 

#center_container{
    background:#DDD;
    height:320px;
    width: 980px;
    margin: 0 auto;
    }

 3:

تعیین ویژگیهای لایه sidebar

 

#sidebar{
    float:left;
    width:280px;
    margin:10px;
    padding-bottom: 10px;
    background:#EEE;

    }
 قبلا درباره این ویژگیها توضیح داده شده است

 4:

تعیین ویژگیهای لایه title درون لایه sidebar

 

#sidebar #title{
    line-height: 30px;
    padding: 0 0 0 15px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
    background: url(images/title.png) repeat-x;
    }

 5:

تعیین ویژگیهای لیست  ul دورن لایه sidebar

 

#sidebar ul{
    list-style: none;
    width:280px;
    }

 line-style  را برابر none قرار داده ایم تا بالت از کنار گزینه ها حذف شود

عرض هر گزینه لیست هم 280 پیکسل در نظر گرفته شده است

 6:

تعیین ویژگیهای گزینه ای li

#sidebar li{
    padding:5px 5px;
    font-size: 13px;
    }

 7:

تعیین ویژگیهای پیوند های دورن لایه sidebar

#sidebar a{
    color:#000;
    }

 8:

تعیین ویژگیهای لایه content

#content{
    width:670px;
    margin:10px 10px 10px 0;
    background: #EEE;
    height:300px;
    font-size:14px;
    float:right;
    }

 8:

تعیین ویژگیهای سایر تگ های درون لایه content

#content h2{
    padding: 10px 0 10px 20px;
    }
#content p{
    margin:15px;
    }
#left_list, #right_list{
    width:270px;
    float:left;
    margin: 10px 10px 20px 50px;
    }
#left_list ul, #right_list ul{
    list-style:url(images/li.png);
    }
#left_list a, #right_list a{
    line-height: 30px;
    }
طراحی ناحیه footer
 

 از دو لایه برای ایجاد footer استفاده می شود

لایه سمت چپ شامل پیوندهایی به سایت های خاص است

لایه سمت راست شامل پیوندها و نیز قانون کپی رایت است

 لایه ها عبارت اند از :

لایه با ای دی به نام footer که بقیه لایه های ناحیه footer در ان قرار می گیرند

لایه با ای دی به نام center_footer که در وسط لایه footer قرار می گیرد

لایه های left_footer , right_footer که دورن لایه center_footer قرار می گیرند

 <div id="footer">

 <div id="center_footer">

   <div id="left_footer"><b>Find Us On</b>
   <ul>
     <li> <a href="#"><img src="images/facebook.png"  /></a> </li>
     <li> <a href="#">  <img src="images/twitter.png"  />  </a> </li>
     <li> <a href="#"> <img src="images/youtube.png"  /> </a> </li>
     <li> <a href="#">     <img src="images/rss.png"  />     </a> </li>
     </ul>
   </div>
            
   <div id="right_footer">
       <a href="home.html">HOME</a>
       <a href="about.html">ABOUT US</a>
       <a href="services.html">SERVICES</a>
       <a href="partners.html">PARTNERS</a>
       <a href="contact.html">CONTACT US</a>
   </div>
   
   <span>© Your Website Name 2011 </span>
   
 </div>
</div>

 تعیین ویژگیهای لایه ها و تگ های درو ن لایه footer :

 1:

تعیین ارتفاع لایه footer

#foot

 footer{
    height:130px;
    }

 2:

تعیین عرض و ارتفاع و زمینه و وسط چین کردن لایه center_footer

 #center_footer{
    background:#000;
    height: 130px;
    width: 980px;
    margin:0 auto;
    }

 3:

تعیین ویژگیهای مشترک لایه های left_footer , right_footer

 #left_footer,#right_footer {
    width:450px;
    padding:20px;
    float:left;
    }

 4:

تعیین ویژگی رنگ متن که با تگ b ایجاد شده و دورن لایه left_footer است

 #left_footer b{
    color:#fff;
    }

 5:

تعیین ویژگیهای گزینه های li دورن لایه left_footer

 #left_footer li{
    float:left;
    margin:0 20px;
    }

6:

 تعیین ویژگی تصاویر دورن لایه left_footer

 #left_footer img{
    width:60px;
    height:60px;
    }

 7:

تعیین ویژگیهای لایه right_footer و قرار دادن ان در سمت راست لایه left_footer

 #right_footer{
    float:right;
    }

 8:

تعیین ویژگیهای پیوندهای دورن لایه right_footer

 #right_footer a{
    color:#aaa;
    padding:0 10px;
    line-height: 21px;
    font-size: 13px;
    font-weight:bold;
    }

 9:

تعیین ویژگیهای تگ span

 

 #footer span{
    color:#ccc;
    font-size: 13px;
    margin-left: 150px;
    }
 
 
 دانلود برنامه کامل