pátek 29. dubna 2011

ITW (Tvorba webových stránek) - projekt č. 2 (VUT FIT)

Kdyby se chtěl někdo inspirovat pro tvorbu druhého projektu do předmětu ITW (Tvorba webových stránek), tak může. Mějte ovšem na zřeteli, že v zadání je napsáno:
Veškerý kód musí být vlastním dílem studenta. Při návrhu vzhledu je možno se inspirovat existujícími stránkami, nelze však převzít žádný kód z cizích webů ani z volně dostupných knihoven. Totéž platí i pro JavaScriptový kód.
 Tedy nekopírujte celé kusy kódu, mohlo by se vám to vymstít.
Odkaz na stránky je ZDE. Stránky jsou umístěny na fakultním serveru, takže by tam měly vydržet snad docela dlouho. (http://www.stud.fit.vutbr.cz/~xmarec12/ITW/proj2/index.html).

Pro ty, co neumí efektivně prohlížet zdrojové kódy přímo v prohlížeči tu ještě přidávám JavaScript, který se stará o cookies v sekci "aktuality". Snad k tomu nemusím přidávat komentáře, dá se to pochopit na první pohled. V zásadě se jen testuje několik podmínek a klasicky se "rozsekávají sušenky".

JavaScript pro práci s cookies:

function ShowHideFunc(el_ID){
    el_css = document.getElementById(el_ID).style;
     
    if (el_css.display == 'none')    {  
        el_css.display = 'block';      
        if (el_ID == "aktualita1")
            document.cookie = "PARAGRAPH1=show;expires=Sun, 29 Nov 2015 20:00:00 GMT";
        if (el_ID == "aktualita2")
            document.cookie = "PARAGRAPH2=show;expires=Sun, 29 Nov 2015 20:00:00 GMT";
     
    }
    else{
          el_css.display = 'none';
     
        if (el_ID == "aktualita1")
            document.cookie = "PARAGRAPH1=hidden;expires=Sun, 29 Nov 2015 20:00:00 GMT";
        if (el_ID == "aktualita2")
            document.cookie = "PARAGRAPH2=hidden;expires=Sun, 29 Nov 2015 20:00:00 GMT";
    }
}
function SetSetting(){    
    splitedCookies = document.cookie.split("; ");
    var aktual_1='hidden';
    var aktual_2='hidden';
     
    for (i in splitedCookies){
       cookName = splitedCookies[i].split("=");
       if (cookName[0] == "PARAGRAPH1")
            aktual_1 = cookName[1];
       if (cookName[0] == "PARAGRAPH2")
            aktual_2 = cookName[1];
    }
 
    if (aktual_1 == "on"){
        styl_p = document.getElementById("aktualita1").style;
        styl_p.display = 'block';
    }  
    if (aktual_1 == "hidden"){
        styl_p = document.getElementById("aktualita1").style;
        styl_p.display = 'none';
    }
 
    if (aktual_2 == "show"){
        styl_p = document.getElementById("aktualita2").style;
        styl_p.display = 'block';
    }  
    if (aktual_2 == "hidden"){
        styl_p = document.getElementById("aktualita2").style;
        styl_p.display = 'none';
    }  
}

CSS kód:

Někdy může být zádrhel i CSS, tak se popřípadě můžete inspirovat následujícími konstrukcemi (z důvodů úspory místa jen prvních pár řádků. Celé CSS naleznete ZDE). Samozřejmě neručím za správnost a některé prvky jsou zatím čistě experimentální a podporují je jen některé prohlížeče.

btw: text-align: left je v body jen kvůli IE.
body {
background-color: #232323;
text-align: center;
}
#omni {
font-family: Arial, calibri, Helvetica,  sans-serif;
width: 850px;
margin: 0 auto;
text-align: left
}
#head {
height: 100px;
border: 1px solid rgb(155, 155, 155);
border: 1px solid rgba(255, 255, 255, 0.1);    
border-radius: 7px;
box-shadow: 2px 2px 7px rgba(10, 10, 10, 0.8);
background-image: url(imgs/logo/txt_logo_01.png);
background-color: #292929;
color: #6C6C6C;
}