Web dizajn (css) (Razvoj web-stranica) @ Bug.hr Forum

15 godina

neaktivan

offline

pet 18.7.2008 11:37

Odgovori Citiraj

Web dizajn (css)

Bilo mi dosadno pa sam odlučio napraviti jedan dizajn. Stranica nije objavljena na internetu, zapravo je i nisam radio za internet nego za hobi (onako bezveze). Sav sadržaj (text) što piše sam kopirao sa Wikipedia jer mi se nije dalo pisati nešto svoje.

Što mislite kako vam se čini ovaj dizajn?

trajni link

0 0 hvala 0

The Acacia Strain

15 godina

neaktivan

offline

pet 18.7.2008 11:43

Odgovori Citiraj

RE: Web dizajn (css)

Nice... minimalistički. Nego, to si u Linuxu radio? Koje si programe koristio?

trajni link nadporuka

0 0 hvala 0

hudo

16 godina

offline

pet 18.7.2008 11:46

Odgovori Citiraj

Web dizajn (css)

Nemoj me krivo shvatiti, ali ovo je 20% gotov dizajn. Izgleda kao osnovno CSS/HTML layout sa apliciranih neoliko css stilova, 15 min posla. Ali nastavi dalje, nemoj stati sada, dobroti je krenulo (iako nemogu vidjeti html kod)!

"A developer is a machine that converts coffee into code"

Moj PC

trajni link

0 0 hvala 0

Duh

15 godina

neaktivan

offline

pet 18.7.2008 11:49

Odgovori Citiraj

RE: Web dizajn (css)

Kostur stranice (HTML) i stil (CSS) sam radio u Macromedia Dreamweaver 8, slike sam radio pomoću ArcSoft PhotoStudio i Paint.NET.

Nisam to radio u linuxu, samo sam tako nazvao stranicu, nisam imao druge ideje pa eto zove se linux.

Ovo još nije gotovo, to je samo primjer, kad bi to radio za web, tu bi bilo još posla....

trajni link nadporuka

0 0 hvala 0

The Acacia Strain

15 godina

neaktivan

offline

pet 18.7.2008 12:08

Odgovori Citiraj

RE: Web dizajn (css)

Kad smo već kod dizajna, koje programe preporučujete za Linux (ako ima ovdje linux usera koji dizajniraju). Ja koristim Screem, Kompozer, ali još uvijek mi nije to to. Screem ja čak i dobar, ali mi se neki put ruši, što mi nije jasno zašto.

trajni link nadporuka

0 0 hvala 0

unknown

16 godina

neaktivan

offline

pet 18.7.2008 12:14

Odgovori Citiraj

RE: Web dizajn (css)

E imaš neki tutorial oko stvaranja CSS ili java scrip ili PHP ja koristim ubuntu pa bi napravio nešto takvo samo s softwearom recenzijama i to...

Viva la vida

trajni link nadporuka

0 0 hvala 0

unknown

16 godina

neaktivan

offline

pet 18.7.2008 12:26

Odgovori Citiraj

RE: Web dizajn (css)

The Acacia Strain kaže...

Kad smo već kod dizajna, koje programe preporučujete za Linux (ako ima ovdje linux usera koji dizajniraju). Ja koristim Screem, Kompozer, ali još uvijek mi nije to to. Screem ja čak i dobar, ali mi se neki put ruši, što mi nije jasno zašto.

evo imaš ovdje neke

http://www.linuxzasve.com/download/8/programiranje

Viva la vida

trajni link nadporuka

0 0 hvala 0

Duh

15 godina

neaktivan

offline

pet 18.7.2008 12:47

Odgovori Citiraj

RE: Web dizajn (css)

hudo kaže...

Nemoj me krivo shvatiti, ali ovo je 20% gotov dizajn. Izgleda kao osnovno CSS/HTML layout sa apliciranih neoliko css stilova, 15 min posla. Ali nastavi dalje, nemoj stati sada, dobroti je krenulo (iako nemogu vidjeti html kod)!

Evo kod, pa da cujem ako sam negdje nešto fulao.

CSS kod:

body { background-image:url(mainwrap-bg.gif);
       margin:0px;
       font-family:Arial;
       font-size:11px;
       color:#FFFFFF;
   }
#stranica { margin-left:50px;
            margin-right:50px;
           width:900;
           background-color:#000000;
           z-index:auto;

          }
#header { margin-left:3px;
          margin-right:3px;
          height:100px;
          background-color:#333333;
          background-image:url(header_bg.jpg);
          background-repeat:repeat-x;
       }
#logo { width:210px;
       height:100px;
       float:left;
      }
#trazilica {
             margin-right:5px;
           margin-top:50px;
             width:200px;
           float:right;
           text-align:right;
           }
.trazilica { border:#333333 solid 1px;
             background-color:#CCCCCC;
           font-size:9px;
           height:13px;
           padding:2px;
           color:#000000;
           width:150px;
           }

#nav { background-image:url(bg.JPG);
       margin-left:3px;
       margin-right:3px;
       padding:3px;
       border-bottom:1px #333333 solid;
       border-top:1px #333333 solid;
   }
#nav li {
    height: 25px;
}

#nav li a {
   color: #FFFFFF;
}

#nav a:hover {
   color: #FFFF00;
   background-image: url(nav_bg_hover.jpg);
}

#nav {
   padding: 0;
   height: 25px;
   text-align:center;
}

#nav ul {
   padding: 0;
   margin: 0;
}

#nav li {
   margin: 0;
   padding: 0;
   float: left;
   display: block;
}

#nav a {
   text-decoration: none;
   cursor: pointer;
   font-weight: bold;
}

#nav li.on li.on a {
   text-decoration: underline;
}

#nav li a {
   display: block;
   float: left;
   height: 25px;
   line-height: 25px;
   padding: 0 15px;
}
#glavna { margin-left:3px;
          margin-right:3px;
          margin-top:2px;
          padding:3px;
       }
#lijevi_stupac { float:left;
                 width:200px;
               }
#desni_stupac { float:right;
                 width:200px;
               }
#sadrzaj { float:left;
           width:480px;
           margin-left:4px;
           margin-right:4px;
               }
.box { border:#333333 1px solid;
       margin-bottom:7px;
   }
.naslov { background-image:url(bg.JPG);
          padding:3px;
          color:#CCCCCC;
          font-weight:bold;
       }
.naslov a{ color:#CCCCCC;
           font-weight:bold;
           text-decoration:none;
       }
.naslov a:hover{ color:#FFFF00;
                 font-weight:bold;
               text-decoration:none;
               }
.text { margin:3px;}
.izbornik { border-top:1px #666666 solid;
              padding:3px;
              font-size:12px;
              color:#33FF00;
              background-image: url(bg.JPG);
              text-decoration:none;
              width:100%;
              margin-top:2px;
           }
.izbornik a { border-top:1px #666666 solid;
              padding:3px;
              font-size:12px;
              color:#33FF00;
              background-image: url(bg.JPG);
              text-decoration:none;
              width:100%;
              margin-top:2px;
           }
.izbornik a:hover { border-top:1px #CCCCCC solid;
                    padding:3px;
                    font-size:12px;
                    color:#33FF00;
                   background-image:url(nav_bg_hover.JPG);
                   text-decoration:none;
                   width:100%;
                   margin-top:2px;
                  }
#foter { background-color:#333333;
         height:30px;
       padding:2px;
       text-align:center;
       margin-left:50px;
       margin-right:5opx;
       z-index:auto;
       }
.nav_s_a { text-decoration:none;
         color:#CCCCCC;
       background-image:url(bg.JPG);
       margin-bottom:4px;
       padding:3px;
       padding-left:8px;
       display:block;
       border:#333333 solid 1px;
       height:17px;
       font-size:12px;
       }
.nav_s_a:hover { text-decoration:none;
                 color: #FFFF33;
               background-image:url(nav_bg_hover.JPG);
               display:block;
               border:#CCCCCC solid 1px;
               height:17px;
               font-size:12px;
       }
a { text-decoration:underline;
     color:#CCCCCC;
   }
a:hover { text-decoration:none;
    color:#FFFF33;}

HTML kod:

<table border="0" width="900" cellpadding="0" cellspacing="0" id="stranica">
<tr>
    <td height="348" valign="top"><div id="header">
      <div id="logo"><a href="http://www.igre.izhr.com"><img src="linux_logo.jpg" alt="Igre - Početna" width="300" height="100" border="0" title="Linux" /></a></div>

      <div id="trazilica">
      <form action="" method="get">

      Tražilica:<input type="text" class="trazilica" />
      </form>
      </div>
   </div>
<div id="nav">
<ul>
<li><a href=""">Naslovnica</a></li>

<li><a href=""">Novosti</a></li>
<li><a href=""">Recenzije</a></li>
<li><a href=""">Linux</a></li>
<li><a href=""">Linkovi</a></li>
<li><a href=""">O meni</a></li>
<li><a href=""">Kontakt</a></li>
<li><a href=""">Login</a></li>
</ul>
</div>

<div id="glavna">
<div id="lijevi_stupac">
<div class="box">
<div class="naslov">Glavni izbornik </div>
<div class="text">
<a href="#" class="nav_s_a"><div>Naslovnica</div></a>
<a href="#" class="nav_s_a"><div>Novosti</div></a>
<a href="#" class="nav_s_a"><div>Recenzije</div></a>

<a href="#" class="nav_s_a">
<div>Linux</div>
</a>
<a href="#" class="nav_s_a">
<div>Forum</div>
</a>
<a href="#" class="nav_s_a"><div>O meni</div></a>

</div>
</div>
<div class="box">
<div class="naslov">Lijevi stupac </div>
<div class="text">
   Linux je jezgra, ali također i popularan naziv slobodnog unixoidnog operacijskog sustava GNU/Linux. Ime Linux, jezgra je dobila po svom izvornom autoru Linusu Torvaldsu. Prije nego što je Linus Torvalds napravio novu jezgru za Intelov mikroprocesor 80386, unixoidi - operacijski sustavi kompatibilni s Unixom - u pravilu nisu bili primjenjivi ni korišteni za kućnu upotrebu, već samo za istraživačke i uredske poslove.
   </div>
</div>
<div class="box">

<div class="naslov">Najnovije vijesti </div>
<div class="text">
   Stupac za prikaz najnovijih vijesti... </div>
</div>
</div>
<div id="sadrzaj">
<div class="box">
       <div class="naslov">
         Povijest i sadašnja pozicija Linuxa
         <a href="#"></a></div>

       <div class="text">
         Linux je nastao <a href="http://hr.wikipedia.org/wiki/5._listopada" title="5. listopada">5. listopada</a> <a href="http://hr.wikipedia.org/wiki/1991" title="1991">1991</a>. Tog je dana izašla prva službena verzija Linuxa - 0.02. Od tada broj ljudi koji radi na Linuxu, bilo kao programeri (razvijatelji <a href="http://hr.wikipedia.org/wiki/Kernel" title="Kernel">kernela</a> ili Linux <a href="http://hr.wikipedia.org/w/index.php?title=Aplikacija&action=edit&redlink=1" title="Aplikacija (još nije napisano)">aplikacija</a>) stalno raste. No, jezgra nije operativni sistem. Pojedinci sa raznih sveučilišta i programeri diljem svijeta spojili su linux jezgru sa programima iz nikad dovršenog GNU sistema i tako dobili funkcionalan operativni sistem. U tim ranim danima u linuxu se uglavnom radilo u tekstualnom promptu, ali već 1995-te je utemeljen KDE projekt koji je dao linuxu (ali i drugim UNIX-ima) vrhunski grafički desktop.
         <p>U ranim danima linux je služio kao eksperimentalni sistem koji su koristili studenti, hakeri, programeri i općenito ljudi jako orjentirani na rad s kompjutorima. Nije bilo šire komercijalne upotrebe. To se promjenilo sa nastankom Apache web servera, koji je zajedno sa linuxom pružio pouzdano i besplatno rješenje za tjeranje velikog broja web stranica. Napredovanje linuxa na desktopu ide puno sporije te je linux još uvijek rijetka pojava na kućnim i uredskim kompjutorima. Ipak, s vremenom je nastalo mnogo programa za linux (ali i ostale UNIXe) za razne svrhe: uredski paketi, web, razmjena datoteka i mail, PDF, gledanje i manipulaciju slikama, multimedija, prženje CD/DVDa te mnogi specijalizirani programi. Može se reći da danas za linux postoje svi potrebni programi za prosječnog kućnog i uredskog korisnika koji se ne igra i ne koristi svoj kompjutor za visoko specijaliziranu profesionalnu svrhu.</p>
         <p>Prednosti Linuxa u usporedbi sa Windowsima su sve ono što jedan operativni sistem mora imati: brzina, stabilnost i sigurnost. Nedostatak upotrebe linuxa je slaba podržanost od strane informatičke industrije. Nažalost, drajveri za egzotični hardver nisu napravljeni, a tu je i veliki nedostatak profesionalnog softvera i igrica.</p>

         <p>Prodor linuxa na desktop usporava činjenica da se igre uglavnom ne rade za linux, kao ni mnogi profesionalni programi, jer se korisnici linuxa ne doživljavaju kao tržište. Tu su i mnoge predrasude. Drugi veliki problem je prilično zatvorena i prema početnicima neprijateljski nastrojena linux zajednica. Osim pogrešnog stava prema početnicima, linux zajednica teško surađuje i sa velikim komercijalnim tvrtkama koje bi itekako mogle pomoći u podršci i širenju linuxa. Za to su zaslužni ekstremni stavovi po pitanju slobodnog softvera, kao i postojanje velikog broja distribucija (vidi dolje) i manjak standarda.</p>
         <p>Ipak, polako ali sigurno, linux prodire na desktop. Do danas (ožujak 2007) je nastalo više linux distribucija prilagođenih početnicima. Izmišljen je i LiveCD, linux sistem koji se diže sa CD-a (ili DVD-a) te omogućuje isprobavanje linuxa bez pisanja po disku. Mnoge distribucije dolaze kao liveCD. U svijetu je linux postao veliki posao, i to ne samo među serverima. Nažalost, Hrvatska tu jako zaostaje za svijetom...</p>
       </div>
</div>
</div>
<div id="desni_stupac">
<div class="box">
       <div class="naslov">Desni stupac </div>

       <div class="text">
Linux je jezgra, ali također i popularan naziv slobodnog unixoidnog operacijskog sustava GNU/Linux. Ime Linux, jezgra je dobila po svom izvornom autoru Linusu Torvaldsu. Prije nego što je Linus Torvalds napravio novu jezgru za Intelov mikroprocesor 80386, unixoidi - operacijski sustavi kompatibilni s Unixom - u pravilu nisu bili primjenjivi ni korišteni za kućnu upotrebu, već samo za istraživačke i uredske poslove.
         <p align="center"><img src="180px-Tux.png" width="180" height="212" /></p>
       </div>
</div>
</div>
</div></td>
</tr>
<tr>
    <td height="10" valign="top"> </td>

</tr>
<tr>
    <td valign="top" id="foter">Copyright © 2007 - 2008. Sva prava pridržana.</td>
</tr>
</table>

trajni link nadporuka

0 0 hvala 0

The Acacia Strain

15 godina

neaktivan

offline

pet 18.7.2008 13:15

Odgovori Citiraj

RE: Web dizajn (css)

unknown kaže...

The Acacia Strain kaže...

Kad smo već kod dizajna, koje programe preporučujete za Linux (ako ima ovdje linux usera koji dizajniraju). Ja koristim Screem, Kompozer, ali još uvijek mi nije to to. Screem ja čak i dobar, ali mi se neki put ruši, što mi nije jasno zašto.

evo imaš ovdje neke

http://www.linuxzasve.com/download/8/programiranje

Hvala, koje ti koristiš?

trajni link nadporuka

0 0 hvala 0

unknown

16 godina

neaktivan

offline

pet 18.7.2008 13:17

Odgovori Citiraj

RE: Web dizajn (css)

ja koristim blufish jako je dobar a webdesigne i programiranje!

Viva la vida

trajni link nadporuka

0 0 hvala 0

M4r10

16 godina

neaktivan

offline

pet 18.7.2008 23:21

Odgovori Citiraj

Web dizajn (css)

Dobar početak, slijedi daljnji rad i usavršavanje... I da, nek ti stranice budu po standardima, to lako možeš provjeriti na

http://validator.w3.org

http://jigsaw.w3.org/css-validator/

Ja sam među onih 92 posto. Ako si i ti, kopiraj ovo u potpis.

trajni link

0 0 hvala 0

Jazzfan

16 godina

neaktivan

offline

sub 19.7.2008 16:42

Odgovori Citiraj

Web dizajn (css)

Ja koristim Geany.... brz, lagan, jednostavan ali ima vise manje sve sta pozelim....

e, da.... dobro si zapoceo, vidim da pratis stil divovima, a ne nacin tablica kao mnogi pocetnici, i takodjer, koliko vidim kod ti je po standardu sta je odlicno....
moj ti je savjet da pocnes polako ucit skripte, kako one kljentske (JavaScript), tako i one serverske (PHP, ASP, JSP itd)....

Poruka je uređivana zadnji put sub 19.7.2008 16:47 (Jazzfan).

trajni link

0 0 hvala 0

Val

16 godina

neaktivan

offline

sub 19.7.2008 18:09

Odgovori Citiraj

RE: Web dizajn (css)

Jazzfan kaže...

Ja koristim Geany.... brz, lagan, jednostavan ali ima vise manje sve sta pozelim....

e, da.... dobro si zapoceo, vidim da pratis stil divovima, a ne nacin tablica kao mnogi pocetnici, i takodjer, koliko vidim kod ti je po standardu sta je odlicno....
moj ti je savjet da pocnes polako ucit skripte, kako one kljentske (JavaScript), tako i one serverske (PHP, ASP, JSP itd)....

pa i ja kad sam početnik (počeo sam učit html prije godinu i pol) pa oduvijek koristim divove, a ne tablice.

zaboravih napisat da je jako uredna i lijepa stranica. samo nastavi

Poruka je uređivana zadnji put sub 19.7.2008 18:10 (Val).

Moj PC

trajni link nadporuka

0 0 hvala 0