Návrh webstránky

nejakymarko

Zdravím páni

napadlo mi skúsiť sa trochu prezentovať na internete a teda zavesiť niekde moje portfólio a podobne

Zakúpil som si doménu a hosting na websupporte a teraz rozmýšľam, ako čo najefektívnejšie (a najefektnejšie) vytvoriť web.

Nemalo by to byť nič zložité (nejaké portfólio prác, základné údaje o mne a nejaký kontakt)

Otázka je, čo na to použiť. Nejakú predstavu mám, ale neviem ju "zhmotniť" . Páčia sa mi online riešenia ako je napríklad squarespace, alebo cargo (ak poznáte nejaké iné, podobné, sem s nimi) len sa mi do webu zatiaľ nechce moc investovať, keďže len začínam a peniaze sa zídu inde a tieto stránky začínajú niekde od 10e/mesiac, čo sa mi zatiaľ platiť nechce.

Ďalšia alternatíva je wordpress, kde by asi nemal byť veľký problém niečo také vyskladať, ale zatiaľ nemám žiadne skúsenosti a ako som pozeral v admine, tak to nie je úplne princíp klik sem klik tam a hotovo.

Takže prijímam akékoľvek rady a tipy, kde čo ako.

Ďakujem

Wordpress na vytvorenie stranky, daky template a potrebny plugin vies zvladnut a pochopit behom par dni. Alebo si stiahni nejaky flat template na ktorom mas nejake 3 "podstranky" a tam mozes mat uvod, referencie a kontakt. Cize web bude staticky, budes tam mat vlozene referencie a na zaciatok ti to postaci. Ak tam budes potrebovat nieco doplnit, tak rucne HTML/CSS/JS, nic zlozite. Tu mas 15 free templatov, par z nich je peknych a pouzitelnych: https://theultralinx.com/2014/09/15-fre ... templates/ Alebo nieco novsie: https://dcrazed.com/free-responsive-htm ... templates/ alebo: https://speckyboy.com/free-responsive-h ... templates/

nejakymarko

Vdaka Hojko, vobec mi nenapadlo, ze by nieco take existovalo aj free. Uplne mi satacia tie staticke templaty, dokonca som si uz aj jeden nasiel, ktory vyzera fajn

Posledna otazocka, existuje nejaky SW (urcite existuje, len neviem ako sa vola

), kde si viem ten web z kodu pustit na "necisto" a upravovat to tam a potom to len nahram na FTP?

Dakujem

heker

HTML neupravujes v nejakom editore typu Word, aj kedd sa to da. Jednoduchy mas napriklad cesky program PSpad, ten je zadarmo, rozlisuje farebne syntax. Potom si to ulozis a refreshnes v prehliadaci.

nejakymarko

A ešte otázočka, aj keď si myslím, že to také ľahké nebude, ale skúsim

Existuje niečo, kde by som si vedel ten web akoby vyskladat z nejakých predefinovaných kódov, a potom by mi z toho urobilo zlozku, kde by bol všetok potrebný obsah? nieco ako kedysi davno frontpage od microsoftu

Ak nie, tak sa trosku priucim kodom, ale chcel by som to co najjednoduchsie

Ďakujem

heker

Ked si otvoris v PSpade hlavny HTML subor, tak to uvidis a pochopis. Pohraj sa s tym hodinku, pohlafaj texty co si tam, pohladaj obrazky a sam zistis ako to funguje. Skusit mozes Adobe Dreamweaver.

skjerp-deg

ak ti stačí webstránka bez databázy a podobných vymožeností tak odporúčam nejaký statický page generator. Napríklad dá sa zadarmo na Githube hostovať cez Github Pages pomocou Jekyllu. Jediné, čo si platíš, je doména (ak chceš vlastnú, dá sa hostovať aj na tej ich na "nejakymarko.github.io"). Github je spoľahlivý, rýchly host. Nevýhoda je, že musíš ovládať základné Git príkazy, aj keď by som argumentoval, že je to ľahšie než naučiť sa celé HTML. A rovnako ako na HTML, aj naJekyll je kopec pekných tém za babku

nejakymarko

Vyuzijem uz tuto temu, ked som to sem načal

Neviete mi poradit, preco mam pod ikonkami socialnych sieti tie ciarky? neviem sa toho zbavit a lezie mi to na nervy

Ďakujem

index.html

Kód: Vybrať všetko

  <!--Footer-->

  <footer>

    <div class="footer-margin">
      <div class="social-footer">
        <a href="http://www.pinterest.com/xxx/"><i class="fa fa-pinterest"></i></a>
        <a href="https://www.instagram.com/xxx/"><i class="fa fa-instagram"></i></a>
        <a href="http://www.linkedin.com/in/xxx/"><i class="fa fa-linkedin"></i></a>   
        <a href="http://www.pinterest.com/xxx/"><i class="fa fa-pinterest"></i></a>
        <a href="https://www.instagram.com/xxx/"><i class="fa fa-instagram"></i></a>
        <a href="http://www.linkedin.com/in/xxx/"><i class="fa fa-linkedin"></i></a>   
        <a href="http://www.pinterest.com/xxx/"><i class="fa fa-pinterest"></i></a>
        <a href="https://www.instagram.com/xxx/"><i class="fa fa-instagram"></i></a>
        <a href="http://www.linkedin.com/in/xxx/"><i class="fa fa-linkedin"></i></a>   
      </div>     
      <div class="copyright">Â© Copyright 2018 xxx.com</div>
    
    </div>

  </footer>

style.css

Kód: Vybrať všetko

#footer-box{height:100px; margin-top:100px;}

footer{
  background: #f1f1f1;
  width:100%;0
  margin-top:100px;
  height:100px;
  overflow:hidden;
  position:relative;
  z-index:10;
}

.footer-margin{
  width:1140px;
  margin: 25px auto;
  line-height: 25px;
}

#footer-left{text-align:left;}

.footer-margin .copyright{
  color: #686868;
  letter-spacing: 1px;
  font-size: 12px;
  width: 100%;
  text-align:center;
  float: left;
}

.footer-margin .social-footer{
  color: #686868;
  letter-spacing: 1px;
  font-size: 13px;
  width: 100%;
  text-align:center;
  float: left;
}

.footer-margin .social-footer a{
  font-size:15px;
  color:black;
  padding: 20px;
}

.footer-margin .social-footer a:hover{
  color:#c3c3c3;
}

heker

Daj sem odkaz na celu sablonu co si pouzil, nech si to mozem skusit sam doma otvorit.

Skus v css tej casti co si sem dal zmazat tento riadok:
line-height: 25px;

Návrh webstránky

Návrh webstránky

Re: Návrh webstránky

Re: Návrh webstránky

Re: Návrh webstránky

Re: Návrh webstránky

Re: Návrh webstránky

Re: Návrh webstránky

Re: Návrh webstránky

Re: Návrh webstránky