Se hai scaricato un template in formato PSD e non sai come trasformarlo in una pagina web allora sei nel posto giusto Chiunque puo utilizzare i trucchi descritti in questo articolo per creare siti impressionanti. Ti mostrerò codice di una semplice pagina web, ma davvero cool realizzata da un template PSD. Quindi prima di tutto e necessario scaricare l'archivio con il progetto.
Lo puoi fare cliccando il link: free template for restaurant business.
// In oltre abbiamo realizzato il corso completto sulla tema: PASSA AL CORSO
Dove passo dopo passo vediamo ogni ellemento da vicino. //
Quando si apre l'archivio si vedra diverse cartelle tipo "Sito" "font". Nella cartella si possa trovare anche il nostro disegno in formato PSD del template. Potete liberamente modificarlo, o prendere in prestito alcuni ellementi di design. Nel "sito" troverete le pagine gia codificate. Quindi, diamo uno sguardo piu da vicino per capire come codificare un modello pulito. Prenderemo come esempio solo la home page, in archivio si chiama index.html
Questo modello e codificato utilizzando tecnologie HTML5/CSS3. Logicamente e diviso in tre parti: intestazione, parte dei contenuti e altro della pagina.
Fase 1 - HTML
Nell'intestazione si trova il logo e la navigazione principale
<header>
<div class="container_12">
<div class="grid_12">
<h1><a href="/index.html"><img src="/images/logo.png" alt="EXTERIOR"></a> </h1>
<div class="menu_block">
<ul class="sf-menu">
<li><a href="/index.html">Home</a></li>
<li class="current"><a href="/index-1.html">About Us</a>
<ul>
<li><a href="#"> cuisine</a></li>
<li><a href="#">Good rest</a></li>
<li><a href="#">Services</a></li>
</ul>
</li>
<li><a href="/index-2.html">Menu</a></li>
<li><a href="/index-3.html">Portfolio</a></li>
<li><a href="/index-4.html">News </a></li>
<li><a href="/index-5.html">Contacts</a></li>
</ul>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
Navigazione principale e animato con jQuery plugin Superfish, ha un menu a tendina con sottomenu.
Nella parte di contenuti si possa trovare cursore jQuery con punteggiata switcher. Qui di seguito potete trovare il suo codice:
<div class="slider-relative">
<div class="slider-block">
<div class="slider">
<ul class="items">
<li><img src="/images/slide.jpg" alt=""></li>
<li><img src="/images/slide1.jpg" alt=""></li>
<li class="mb0"><img src="/images/slide2.jpg" alt=""></li>
</ul>
</div>
</div>
</div>Fase2 - CSS3
/*Slider*/
.slider-relative {
position:relative;
overflow:hidden;
margin: 0 auto;
}
.items {
display: none;
}
.slider-block {
position:relative;
overflow:hidden;
height: 625px;
margin: 0 auto;
}
.slider {
z-index:2;
height: 625px;
position: absolute;
left: 50%;
margin-left: -800px;
width: 1600px;
}
.slider .banner{
position: absolute;
z-index: 1 !important;
background: url(../images/banner_bg.png) 0 0 repeat;
left: 0;
width: 210px;
color: #fff;
font-size: 14px;
line-height: 20px;
right: 0;
top: 402px;
width: 100%;
}
.banner h2 {
color: #fff;
font-size: 21px;
line-height: 38px;
padding: 0;
margin: 0;
text-transform: uppercase;
padding-bottom: 26px;
text-align: center;
padding: 11px 60px 10px ;
}
.banner h2 span {
color: #e5ad2a;
}
.pagination {
bottom: 0px;
position: absolute;
left: 50%;
margin-left: -51px;
z-index: 999;
}
.pagination li {
float: left;
}
.pagination li+li {
margin-left: 15px;
}
.pagination li a{
width: 24px;
display: block;
transition: 0s ease;
-o-transition: 0s ease;
-webkit-transition: 0s ease;
height: 23px;
background: url(../images/pagination.png) right 0 no-repeat;
}
.pagination li a:hover, .pagination li.current a {
background-position: 0 0;
}Fase 3 - Javascript
Javascript inizializzazione, descrizione dei parametri di base, la libreria si può trovare nel file TMS-0.4.1.
$(window).load(function(){
$('.slider')._TMS({
show:0,
pauseOnHover:false,
prevBu:'.prev',
nextBu:'.next',
playBu:false,
duration:800,
preset:'fade',
pagination:true,//'.pagination',true,'
<ul></ul>
'
pagNums:false,
slideshow:8000,
numStatus:false,
banners:false,
waitBannerAnimation:false,
progressBar:false
})
});Inoltre e possibile visualizzare la parte dei contenuti, link a pagine secondarie, i prezzi dei prodotti, ecc. Inoltre e possibile creare il blocco con pulsanti di social, media e altro .
La parte bassa della pagina e abbastanza standard - privacy policy, copyright ecc
Come si puo vedere non vi e nulla di difficile in codifica dei siti semplici. Tutto cio che serve e un po 'di pazienza e voglia di scoprire qualcosa di nuovo.
Solo provando si impara!
Fonte lezione:http://www.script-tutorials.com/how-to-code-simple-website-from-a-psd/
