Blog slajder
Nov 04
Tutorijal spada u naprednu kategoriju, neću se osvratiti na osnove web dizajna. Naučićete kako da kreirate blog aplikaciju, odnosno blog slajder na kojem će biti poslednje vesti sa sajta.
Opšte:
Program: Adobe Dreamweaver (html, css), Adobe Photoshop
Verzija: CS5
Kategorija: Napredna
Potrebno vreme: 40 min.
Izvor: net.tutsplus.com
Prateći materijal: Preuzmite
Demo: Blog Slajder
Korak 1
Potrebno je da se napravi dizajn prozora, .psd fajl se nalazi u pratećem materijalu, pa po njemu možete da kreirate sopstveni dizajn, takođe u pratećem materiju možete pronaći dizajn dugmića napred-nazad.psd.
Korak 2
Neću se zadržavati na tome kako da isečete slike u Photoshop-u, zato što tutorijal spada u naprednu kategoriju. Napravite folder na desktop, gde ćete smeštati sve fajlove, ja ću ga imenovati “tutorijal”. Sve isečene slike smestite u folder “slike”(napravite folder u okviru foldera “tutorijal”). Na fotografiji ispod možete videti kako sam imenovala svaku sliku.
Korak 3
Kopirajte iz pratećeg materijala sledeće fajlove:
jquery-1.7.min.js, coda-slider.1.1.1.js, jquery-easing.1.2.js, jquery-easing-compatibility.1.2.js
Napravite folder “js” u okviru foldera “tutorijal” i nalepite sve ove fajlove.
Korak 4
U okviru foldera “tutorijal”, treba da se kreira index.html fajl i vaš kod treba da izgleda ovako:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Blog aplikacija</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src='js/jquery-1.7.min.js' type='text/javascript'></script>
<script src="js/jquery-easing.1.2.js" type='text/javascript'></script>
<script src="js/jquery-easing-compatibility.1.2.js" type='text/javascript'></script>
<script src="js/coda-slider.1.1.1.js" type='text/javascript'></script>
</head>
<body>
<div id="blogSlajderdva">
<div id="blogSlajder">
<div class="jedan">
<div class="panelContainer">
<div class="panel" title="POCETNA">
<div class="dvatri">
<!-- sadrzaj -->
</div>
</div>
<div class="panel" title="PHOTOSHOP">
<div class="dvatri">
<!-- sadrzaj -->
</div>
</div>
<div class="panel" title="FLASH">
<div class="dvatri">
<!-- sadrzaj -->
</div>
</div>
<div class="panel" title="EUCIONICA">
<div class="dvatri">
<!-- sadrzaj -->
</div>
</div>
</div>
</div>
</div>
<div id="pritisak"></div>
</div>
</body>
</html>
Korak 5
Sad je potrebno da napravimo .css fajl, kreirajte ime fajla style.css u folderu “tutorijal” i vaš kod treba ovako da izgleda:
* { margin: 0; padding: 0; }
body { font-family: Verdana, Arial, Helvetica, sans-serif;
background: url(slike/pozadina.jpg); font-size: 11px; }
a {
outline: none; text-decoration: none; }
ul { list-style: none; }
#blogSlajderdva { width: 320px; margin: 50px auto;
background: url(slike/dno.jpg) 7px bottom no-repeat;
padding-bottom: 50px; position: relative; }
#blogSlajder { margin-left: 15px; padding: 25px 18px 0px 18px; width: 263px;
background: url(slike/centar.jpg) center center repeat-y; }
.stripViewer { position: relative; overflow: hidden; clear: both; }
.stripViewer .panelContainer { position: relative; left: 0px; top: 0px; }
.stripViewer .panelContainer .panel { float: left; position: relative; width: 280px; }
.stripNav { margin-left: 22px; position: relative; top: 18px; z-index: 99;
width: 285px; }
.dvatri { padding: 10px; }
.jedan { width: 273px; overflow: hidden; }
#pritisak { height: 35px; }
.stripNav ul li { float: left; }
.stripNav li a {
display: block; height: 18px; text-indent: -9999px; }
.stripNav li.tab1 a { background: url(slike/tab-pocetna.jpg) top center no-repeat; width: 63px; }
.stripNav li.tab2 a { background: url(slike/tab-photoshop.jpg) top center no-repeat; width: 85px; }
.stripNav li.tab3 a { background: url(slike/tab-flash.jpg) top center no-repeat; width: 63px; }
.stripNav li.tab4 a { background: url(slike/tab-eucionica.jpg) top center no-repeat; width: 73px; }
.stripNav li a:hover,
.stripNav li a:active,
.stripNav li a:focus {
background-position: top center; }
.stripNav li.tab1 a.current { background: url(slike/tab-pocetna.jpg) bottom center no-repeat; }
.stripNav li.tab2 a.current { background: url(slike/tab-photoshop.jpg) bottom center no-repeat; }
.stripNav li.tab3 a.current { background: url(slike/tab-flash.jpg) bottom center no-repeat; }
.stripNav li.tab4 a.current { background: url(slike/tab-eucionica.jpg) bottom center no-repeat; }
.stripNavL a, .stripNavR a { display: block; position: absolute; width: 75px;
height: 22px; text-indent: -9999px; }
.stripNavL a { bottom: 35px; left: 45px; background: url(slike/prethodni.png); }
.stripNavR a { bottom: 35px; right: 45px; background: url(slike/sledeci.png);
}
/*
*/
.panel ul { width: 240px; }
.panel ul li a { border-bottom: 1px solid #C1B599; color: #303030;
display: block; padding: 7px 10px; }
.panel ul li:last-child a {
border: none; }
.panel ul#pocetna-list li a:hover { background: #1c05aa; color: white; }
.panel ul#photoshop-list li a:hover { background: #aa0510; color: white; }
.panel ul#flash-list li a:hover { background: #f1841a; color: white; }
.panel ul#eucionica-list li a:hover { background: #679e1e; color: white; }
Korak 6
Sada je potrebno u našem HTML fajlu, na početku dodamo liniju koda, koja će se nalaziti ispod <script src=”js/coda-slider.1.1.1.js” type=’text/javascript’></script>
<script type='text/javascript'>
$(function () {
$("#blogSlajder").codaSlider();
});
</script>
Korak 7
Potrebno je da omogućimo korišćenje ovog slajdera i za korisnike koji imaju IE, dodavajući sledeće linije koda u HTML fajlu, kod treba da se nalazi ispod <link rel=”stylesheet” type=”text/css” href=”style.css” />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="style-ie.css" />
<![endif]-->
Korak 8
Kreirajte drugi css, nazovite ga style-ie.css:
#blogSlajderdva {
background: white;
width: 285px;
position: relative;
overflow: hidden;
}
#blogSlajder{
background: white;
width: 285px;
padding: 0;
margin: 0;
}
.stripNav {
margin: 0;
top: 0px;
}
Korak 9
Na kraju dodajte vaše linkove ka određenim stranicama, te linkove stavite na mesto gde se nalazi komentar “sadržaj”, ja ću vam dati primer kako je urađeno za početnu stranicu, isti je princip kod svih ostalih, samo promenite linkove
<ul id="pocetna-list">
<li>
<a href="http://eucionica.rs/retusiranje-fotografije-i-sminkanje/"> Retuširanje fotografije i šminkanje(video)</a></li><li>
<a href="http://eucionica.rs/ozivite-tetovazu/"> Oživite tetovažu</a></li><li>
<a href="http://eucionica.rs/menjanje-boje-ociju-i-duga-efekat-video/"> Menjanje boje očiju i duga efekat (video)</a></li><li>
<a href="http://eucionica.rs/svet-astronomije/">Svet astronomije</a></li><li>
<a href="http://eucionica.rs/kreiranje-turbina/">Kreiranje turbina</a></li><li>
<a href="http://eucionica.rs/pravljenje-isecaka-na-slici/">Pravljenje isečaka na slici</a></li><li>
<a href="http://eucionica.rs/animacija-kise/">Animacija kiše</a></li><li>
<a href="http://eucionica.rs/kreirajte-polarnu-svetlost/">Kreirajte polarnu svetlost</a></li><li>
<a href="http://eucionica.rs/napravite-vampira-u-10-koraka/">Napravite vampira u 10 koraka</a></li><li>
<a href="http://eucionica.rs/napravite-pozadinu-harley-davidson/">Napravite pozadinu Harley Davidson</a></li><li>
<a href="http://eucionica.rs/efekat-okeana-u-casi/">Efekat okeana u čaši</a></li><li>
<a href="http://eucionica.rs/efekat-puzli/">Efekat puzli</a></li><li>
<a href="http://eucionica.rs/efekat-snega/">Efekat snega</a></li>
</ul>
Valerija Spasojević
Latest posts by Valerija Spasojević (see all)
- Mersin escort - January 1, 2013
- Bojenje kose (video) - October 31, 2012
- AdobeTV – Prilagođavanje sadržaja za druge ekrane - September 29, 2012
