Autor Zpráva
Klarina
Profil *
Začínám tvořit web, ale zajímalo by mě, jak vlastně postupovat. Kde mám začít (mimo to, že mám přečíst tyto stránky). Co vlastně uděláte nejdříve.
Podle mě:
1) prostudovat jak psát web a jíné stránky o tvorbě webu, případně si to už zkoušet (jak změnit pozadí, vlažit odkaz atd.)
2) založit složku, do které budu vše ukládat
3) zajistit si programové vybavení
4) začít psát hlavičku (prostě všechny META atd...což už je někde napsáno co tam má být)
5).....................to už mám a teď už prostě nevím, jak postupovat při tvorbě stránky.

Když už mám rozmyšleno, jak stránky budou vypadat, tak bych si měla nejdříve vytvořit vzhled stránky? Pozicováním? Nebo layouty? Nebo čím vlastně?
Teď prostě nevím jak dál. Příjde mi jako blbost psát tam už to co chci mít na stránce. Asi bych si měla nejdřív vytvořit ty sloupce, hlavičku, patičky...vlastně celý vzhled a pak asi doplňovat text, odkazy, obrázky...
Když si vytvořím tyto základní oddíly, tak už bych pak měla upravovat ty ne? případně do nich vlažit další oddíl atd? Myslítě že o tom přemýšlím správně, nebo jsem úplně mimo.
S čím mám tedy pokračovat, když už mám hlavičku?
srigi
Profil
Klarina
Web sa zacina "robit" vytvorenim grafickeho navrhu. Vo Photoshope alebo gimpe sa webova stranka doslova nakresli. Ja zacnem tak, ze si pripravim platno 1160x1600px, umiestnim si vodiace linky vo vzdialenosti 100 a 1060px, cim sa mi vytvori pracovny priestor pre stranku 960px (optimalizacia pre rozlisenie 1024px). Nasledne hodiny a hodiny sa "serinkam" v editore.

Ked je gr. navrh hotovy, je treba ho rozrezat a nakodit z neho HTML/CSS sablonu. Vysledna sablona sa potom zakomponuje do redakcneho systemu (vlasnteho / OSS).
PHP_Nemaster
Profil
Srigi: Pokud si děláš opravdu návrh v GIMPu, asi ti trvá dost dlouho začít vytvářet opravdovou stránku. Ale pokud trváš na tomhle, návrh se přece dá udělat i v nějakém WYSIWYG editoru, který hlavičky, doctype a další věci (pouze u některých editorů.) nákoduje za tebe.

Moje doporučení:

Jako první si udělat složku.

Potom si stáhnout například Visual Web Developer (já mám od Microsoftu Visual C++ developer a jsem s ním spokojen, ty dva programy vypadají skoro stejně, jenom se používají na jiné věci...). Stáhnout se dá z adres: www.microsoft.com/express, www.asp.net.
Pokud ne Visual Web Developer, tak něco jiného, ale nic jiného a lepšího mě nenapadá. (Leda tak FrontPage, ale ten není lepší a není zadarmo.)

Pak si stáhnout něco na úpravu obrázků, například GIMP ( Pokud máte Mandrivu, už je tam nainstalovaný.) ale pokud nejste nároční, postačí i Malování. :D

No a pak se naučit nějaký skriptovací jazyk (PHP, JSP, C# apod.)


PS: Klidně si o mně říkejte že jsem začátečník, ale mě to vyhovuje.
srigi
Profil
PHP_Nemaster
Pri serioznom webdizajne sa graf. navrh skutocne vytvara v pokrocilom bitmapovom editore (myslim, ze mnoho ludi tu z fora to potvrdi). A nejake WYSIWYG editory by sa tiez nemali prehnane pouzivat. Ten kod co generuju je odstrasujuci. Napr. aj na blog, ktory si pripravujem, pisem HTML/CSS kod rucne.
Nox
Profil
PHP_Nemaster
Jenže ono je pak znát když někdo spěchá, pak se na ty weby nedá dívat. S malováním do koše a wysiwyg taky nevím...

Pokud to nemá být rychlokvaška a vytvořené jakkoliv, tak:
1) Plánování - word nebo papír a tužka a promyslet si obsah, cílovou skupinu, stylizaci atd. atd.
- tady si klidně můžeš udělat ty složky, pokud možno celou strukturu, abys měla odděleně věci k přípravě a obsah webu atp.
2) Grafický návrh - pro začátek GIMP...nakreslíme vzhled webu, včetně stylizace textu, nadpisů, tabulek atd. ...a dál viz srigi
3) Rozřezání grafického návrhu...leda by neobsahoval žádné obrázky, ale to se většinou nestává
4) Pak už se začíná samotná tvorba, nejdřív většinou kostra webu (ta část, která bude pro všechny stránky shodná) - html+css a doprovodné obecné php funkce (pokud nemáme z dřívějška)
5) Potom podstránky, php/js skripty a další nesmysly

Milion dotazů, ale...když máš v grafické aplikaci vzhled, tak pak vytvoříš kostru webu v html a css, většinou za pomoci
rozměrů, marginu a floatu, pozicování používej až si budeš jistá, že víš, co děláš...i position: absolute má své využití, ale ne vždy

Prostě když sis namyslela, že máš hlavičku, pod ní 1/3 levý panel 2/3 obsah a pod tím patičku, tak si uděláš jeden kontejner pro celý web,
pak jeden pro hlavičku, pod tím floatující panelový blok a obsahový blok a pod tím patička...a dovnitř jednotlivých už pak co chceš
PHP_Nemaster
Profil
Nox:

S tím malováním do koše máš pravdu. Ale nechápu, proč by se měl web navrhovat v grafickým editoru, udělat takovou "zmenšeninu webu" s obrázky, menu a vším designem by pro mně bylo o mnoho složitější než to nakódovat v reálné velikosti a udělat více verzí, to už i ten papír je lepší.

K tomu Visual Studiu: Kdyby to nebyl dobrý editor, jeho profesionální edice by nestála 24000 Kč. Souhlasím, že by se to s WYSIWYG nemělo přehánět, ale design by se v tom dělat mohl, aby se nemusel pokaždé otevírat kód, aby bylo vidět, jak to vypadá.
Jeho kód vypadá dobře, asi si to "generování nesmyslů" pamatuješ ještě z FrontPage, v tom by se opravdu nikdo nevyznal.

Ale to je jedno, jenom jsem řekl svůj názor a nechci se s nikým hádat.
Klarina
Profil *
No já si ten návrh navrhla zhruba na papíře. Mě šlo o to, co udělat jako první při té tvorbě. Správně jsem odhadla, že tu kostru webu. Tu už jsem si zkoušela udělat pozicováním.
Tady je můj první pokus něco vytvořit. Nekoukejte na barvy, rámečky, text...to jen byla zkouška, jestli to dokážu.
Myslíte, že bych tedy měla tu kostru udělat pomocí tagů float?
Je tady zatím něco, co tam je špatně nebo něco co by tam být nemělo?

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>nadpis v liště</title>
<meta NAME="description"Content=Honza a Klárka">
<meta NAME="keywords"Content=klicova, slova">

<style>
#hlavicka {background-color: #FF9999; color: #660033; border-width: medium; border-style: double; border-color: #c71585}
#hlavicka {position: absolute; width: 840px; top: 0px; height: 120px; left: 200px}
#levy {background-color: lavender; color: #0033CC; border-width: medium; border-style: double; border-color: #008080}
#levy {position: absolute; width: 190px; top: 120px; left: 200px;}
#pravy {background-color: aqua; color: #00CC33; border-width: medium; border-style: double; border-color: #8b008b}
#pravy {position: absolute; width: 150; top: 120px ; left: 890px}
h1 {color: red; font-size: large}
body {background-color: #f4a460}
</style>

</head>

<body>


<div id="hlavicka">
<h1 align="center">Klára a Honza</h1>
</div>
<div id="levy">Levý sloupec kde bude plno dalších odkazů</div>
<div id="pravy">Pravý sloupec ... ten tu ale nemusí být jhjh jgh kugh hgjhg jhg j/div>
</body>

<html/>


Doufám, že jste se moc nenasmáli. Teprve se učím.
Nox
Profil
Klarina
V pohodě, no....většinou se hodí dát celý web ještě do jednoho divu
....může se to suplovat body, ale není to imho dobrá varianta
(už jen kvůli nekompatibilitě s lightboxama)

Jak jsem už psal - absolutní pozicování není dobrá cesta...pokud budeš chtít třeba měnit
velikost jednoho elementu, musíš pak ručně přepočítávat x dalších,
navíc pokud se bude element zvětšovat s obsahem, tak by pak překryl elementy pod ním

Zkus to s těma marginama a floatem....float není tag (tag je třeba <span></span>) ale css atribut

Styly je velmi vhodné mít v externím souboru (jinak postrádají podstatný díl svého smyslu),
ale pokud to jen zkoušíš, tak to není vyloženě nutné

Nevím jestli víš o možnosti zápisu barev rgb(r,g,b) kde r,b,g jsou v intervalu <0;255>
...nemusíš to pak převádět na hexadecimál a osobně se mi s tím pracuje líp, ikdyž je to trošku delší na zápis

Nastavení borderu jde sloučit - border: width style color -> border: 1px solid rgb(80,110,0); například

PHP_Nemaster
V pohodě...ale šlo mi o to, že ve wysiwygu neuděláš žádnou grafiku...jak by sis tam třeba přichystal takovýto web: http://ecoki.com/
(našel by se i mnohem vhodnější příklad, ale stačí; vybrané z http://bestwebgallery.com)
imploder
Profil

jestli nemá ten myšák pravdu...
... od psaní HTML v Poznámkovém bloku se taky upustilo.
shaggy
Profil
PHP_Nemaster
Ale nechápu, proč by se měl web navrhovat v grafickým editoru, udělat takovou "zmenšeninu webu" s obrázky, menu a vším designem by pro mně bylo o mnoho složitější než to nakódovat v reálné velikosti a udělat více verzí, to už i ten papír je lepší.
Bez urážky, ale nechceš si zmeniť meno na web_nemaster? Každý z nás bol raz začiatočníkom, ale aspoň sme ostatným neradili bludy.

Kto tu hovoril o zmenšenine webu? Videl si niekedy prácu webdizajnéra? Videl si ako sa navrhujú weby? Čo myslíš, že všetko sa to navrhne iba vo wysiwyg editore a je to hotové? To by potom celý web vyzeral ako jeden nepodarený žart.
Klarina
Profil *
TO NOX: díky za připomínky. Já vím, že styly se pak dají do jiného souboru (*.css), to pak předělám. Mě šlo o to, jestli umím pozicovat. Tohle je opravdu jen pokus. Pokusím se ale rozvrhnout stránku pomocí float. O těch barvách také vím, že se dají zapsat různě. To jsem tu vyčetla. Zatím ale používám toto, protože si s tím vystačím.

Takže myslím, že se vydám správnou cestou, když:
1) rozvrhnu stránku pomocí float
2) vytvořím soubor css, kde budu mít nadefinované styly a odkážu se na něj (tuším že v hlavičce)
3) rozhodnu se konečně jaké bude pozadí (líbí se mi takové to stínované - viz mé druhé téma v diskuzi) a zkusím ho vytvořit
4) pak do toho začnu cpát to co chci

Tak snad z toho něco udělám.
Ricci
Profil
Nox
Bodré podoledne,
chtěl bych poprosit o radu. Své stránky jsem si nechal udělat u firmy a celkem to šlo,ale pak náhle firma zdražila a to výrazně. Rozhodl jsem se tedy, že si raději úpravy, nové stránky, nové zboží atd budu vkládat sám. Že se to prostě časem nějak naučím. Je pravda, že jsem amatér a vše se teprve učím, ale k té žádosti.
Když si stahuju "čerstvý" ftp-čka, tak některé stránky se mi ve FrontPage nezobrazují s grafikou (většina ano), což mě, jako začátečníkovi, dělá velké problémy. Můžete mi prosím někdo poradit, co udělat,aby se mi zobrazovala ve Frontu i grafika??? Jako postavit krb není fakt problém, ale zobrazit grafiku mi prostě nejde... můžete mi někdo poradit???
Díky Ricci
www.max-mendl.cz
imploder
Profil
Ricci
Sice mě nenapadá příčina problému (třeba bude Nox nebo někdo jiný vědět), ale jestli můžu radit, tak raději frontpage nepoužívat, generuje nekvalitní kód. Jako WYSIWYG editor je zdarma dostupná např. Amaya, která je čístečně tvořená lidmi z W3C (organizace vytvářející standardy pro web) a je zaměřená na tvoření kódu validního a čistého.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0