Tuesday, 15 October 2013

How to create a WebSite or Web Application Template in Html , Css on .Net Framaework

                2 comments   



This is a Study Template you can use it if you are creating e-book website or you can also modify it your own.


Coding and Css are Below :

Make a style sheet and add code in that :
Coding CSS  :
/*---------start---------------------*/


body {
}

 .header
 {
       

   
     height:290px;
     
     background: url(12.jpg) no-repeat bottom center; 
   
    
    
}
     
       
.header1
 {
       height:100px;
       background-color:White;
       
 }
       
 .div3
  {
            height:50px;
            background-color:Red;
            width :900px;
            float:right;
 }
  .header-text
 {
               
    width:250px;
    margin-left:100px;
    font-family:Times New Roman;
    font-size:20px;
    color:White;
   
    float:left;
   
               
}

 .menu
 {
    font-family:Times New Roman;
    font-size:20px;
 
}

.menu ul
 {
    margin:auto;
    width:auto;
   
    list-style:none;
}

.menu ul li
 {
    display:inline;
    padding:5px;
 
}

.menu ul li a
 {
     text-decoration:none;
     color:White;   
   
}
/*----------------------------------------Body of Template----------------------------------------------*/
.left-column
{
   
  
    width:260px;
    height:280px;
    margin-left:10px;
    margin-top :10px; 
    float:left;
  
 }


 .center-column
 {
  
     width:260px;
     height:280px;
     float:right;
     margin-right:40px;
     margin-top:10px; 

 }

 .rightcolumn
 {     
  border:1px solid White;
  width:270px;
  height:280px;
  float:right;
  margin-right:10px;
  margin-top:10px; 
    
 }

 .p1
 {
     width:220px;
     font-family:Calibri;
    
}

/*------------------------------------------------Footer---------------------------------------------------*/

.footer
{
   
  color :White;
  background-color:Red;
   
  height:50px; 
   
    }

 /*---------------Coding of Html on a Html page in .net */

 <!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>
    <title></title>
  
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div style ="margin-left:150px; width:900px; border :1px solid Red " >

<!--Head of template-->

<div class="header">

   <div class ="header1">
      <div class ="div3">

            <div class="header-text" align="center" style="margin-top:10px">

                   <p style="margin:0px;padding:0px"><strong>Tutorial</strong></p>
           
             </div>

            <div class="menu" style="float:right; margin-top:10px; margin-right:40px;"  >
               <ul>

                  <li><a href="#">Home </a> </li>
                
                  <li><a href="#" >Topic</a> </li>
                  <li><a href="#">About US</a> </li>
                  <li><a href="#">Contact US</a> </li>

               </ul>
           
            </div>

       </div>

     </div>
  




</div>
<!--    Center of template-->

   <div style="border:1px solid white; width:900px;height:300px;">
  
      
       <div class="left-column">
      
           <img src="dotnet-logo.jpg"  style="width:120px; height:70px;" alt =".net" />
        
          <p class="p1"> .Net is a poweful technology by "MICROSOFT" Here you can learn new features in .Net . Day-Today Updation in .Net
          to bring you compete in market.</p>
          <div style="float:right;">
          <a href="#">Read more  </a>
          </div>
       </div>
      
        <div class="rightcolumn">
            <img src="Html.jpg"  style="width:120px; height:70px;" alt ="Html" />
            <p class="p1"> Htmlis a poweful technology for web development . Here you can learn new
            features of HTML. </p>
          <div style="float:right;margin-top:60px;">
          <a href="#">Read more  </a>
          </div>
          
       </div>
      
        <div class="center-column">
            <img src="SQL.png" style="width:120px; height:70px;" alt ="Sql" />
            <p class="p1">Sql Server is a poweful technology by "MICROSOFT" Here you can learn new features in Sql Server .
             Day-Today Updation in Sql Server
             to bring you compete in market.</p>
           <div style="float:right;">
          <a href="#">Read more  </a>
          </div>
      
       </div>
  
  
   </div>




    <div style="border:1px solid White; width:900px;height:300px;" >

       <div class="left-column">
        <img src="Java1.jpg" style="width:120px; height:70px;" alt ="Java" />
             <p class="p1"> Java is a Open source technology provided by James-Gosling  . Here you can learn new features in Oracle.
             Day-Today Updation in Java
             to bring you compete in market.</p>
          <div style="float:right;">
          <a href="#">Read more  </a>
          </div>
      
       </div>

       <div class="rightcolumn">
           <img src="Adobe.jpg" style="width:70px; height:50px;" alt ="Adboe"/>
           <p class="p1"> Adobe ---> Here you can learn about Adobe.
             Day-Today Updation in Java
             to bring you compete in market.</p>
          <div style="float:right;margin-top:60px;">
          <a href="#">Read more  </a>
          </div>
      
       </div>
        <div class="center-column">
            <img src="oracle.jpg" style="width:120px; height:70px;" alt ="Oracle" />

             <p class="p1"> oracle database provided by oracle Corporation . Here you can learn new features in Oracle.
             Day-Today Updation in Oracle.
             to bring you compete in market.</p>
          <div style="float:right;margin-top:30px;">
          <a href="#">Read more  </a>
          </div>
      
       </div>

    </div>

    <div class="footer" align="center">
   
    <span> CopyRight by <strong>  Jaspreet Singh  </strong>  </span>
   
    </div>


</div>
</body>
</html>

Download the images from Below link :

Download Images 
or put the below link in URL

https://drive.google.com/folderview?id=0B-U8QYBZ9RGJSXV4MWxYbldOMXM&usp=sharing

Download Code

or you can get code from here if you cannot download the code



2 comments: