Come trasformare un template in formato PSD in una pagina web?

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. //

restaurant-preview

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/

Letto 2302 volte