Dizajn je najbolje da uradiš u CSS. Najlakše je ako koristiš master page, da u njega ubaciš CSS fajl u <head>, obično se koristi poseban CSS fajl, ako se ne varam dovoljno je samo da prevučeš CSS fajl u Sorce deo master page. Posle u body delu, tj. form delu, ubacuješ <div> elemente.
Evo npr. kako izgleda jedan gotov master page (neke delove koje dodaje visual studio sam izbacio).
Code:
head runat="server">
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="okvir">
<div id="gornji">
</div>
<div id="meni">
<ul>
<li><a href="Glavna.aspx">Glavna strana</a></li>
<li><a href="Pomocna.aspx">Pomocna strana</a></li>
<li><a href="Kontakt.aspx">Kontakt</a></li>
</ul>
</div>
<div id="levo">
<h1>Dobrodošli</h1>
</div>
<div id="srednji">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="donji">
autor programa...
</div>
</div>
</form>
</body>
</html>
CSS fajl StyleSheet.css
Code:
body {
margin: 0;
padding: 0;
background-image:url('./slike/Pozadina.jpg'); /*gradient pozadina*/
background-repeat:repeat-x; /*slika se ponavlja samo po horizontali*/
}
#okvir { /*ovo je okvir cele strane*/
margin: auto; /*glavni okvir cele strane ce biti centriran*/
width: 800px;
background-color: White;
}
#gornji { /*ovo je deo gde ce biti prikazana slika naslova*/
width: 800px;
height: 100px;
position: relative;
background-image: url(./slike/Naslov.jpg);
border-bottom: 2px solid #000000;
}
#meni { /*ovo je horizontalni meni*/
width: 800px;
height: 30px;
position: relative;
background-color: #3EB2DC;
border-bottom: 2px solid #000000;
}
#meni ul {
margin: auto;
margin: 0;
padding: 0;
list-style: none; /*ne prikazuje kruzic*/
}
#meni li {
float: left;
border-left: 1px solid #4E9CE9;
}
#meni li a {
display: block;
width: 132px;
height: 22px;
padding-top: 8px;
color: #000000;
text-align: center;
text-decoration: none; /*nece biti podvuceno*/
font-size: 14px;
font-family: Verdana;
}
#meni li a:hover{
color: #ffffff;
background-color: #68CEE5;
text-decoration: underline;
}
#srednji
{ /*ovo je deo gde ce biti prikazan glavni sadrzaj, s obzirom da koristimo master page stavili smo <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> i </asp:ContentPlaceHolder>*/
float: left;
width: 590px;
padding: 20px;
}
#levo
{ /*ovo je vertikalni meni, u njega nisam nista stavljao ali moze da se koristi umesto horizontalnog*/
float:left;
width: 130px;
padding: 20px;
background-color: #EFF3FB;
}
#donji { /*ovo je donji deo gde mogu biti prikazane informacije o autoru*/
clear: both;
background-color: Silver;
text-align: center;
border-top: 1px solid #000000;
}
Ove komentare u CSS možeš izbrisati, to sam dodao da bih pojasnio neke delove.
Na sledećem
linku ima jedan dobar primer za pravljenje menija u CSS.