Autor Zpráva
vercaaa
Profil *
#1 · Zasláno: 1. 3. 2011, 15:41:41 · Upravil/a: Moderátor (editace znemožněna)
Odpovědět Citovat
Moderátor Petr ZZZ: Vkládej prosím kódy mezi značky [pre] a [/pre] (stačí kliknout na ).

Dobry den,
chtela jsem se zeptat.. udelala jsem si grafiku v Photoshopu CS5, rozrezala si obrazek a ulozila jako webovou stranku.
hodilo mi to takovyhle kod ( viz nize ) a ja se chci zeptat jestli s timhle kodem muzu pracovat , protoze jsem se docetla, ze vytvareni webu prez tabulky uz je zastarale. Mam si tedy vytvorit css soubor a jet napr. timhle zpusobem ke kazdemu obrazku ktery se mi v PS rozrezal?
#mece{position: absolute; width:100px; top:520px; left: 940px}
#kniha{position: absolute; width:100px; top:675px; left: 950px}
#knihovna {position: absolute; width:100px; top:785px; left: 935px}
#onas {position: absolute; width:100px; top:295px; left: 925px}
a jeste jsem se chtela zeptat, jestli photoshop umi rovnou vytvaret efekty po prejeti mysi. Ted jsem to delala tak, ze jsem si udelal jednu stanku tak jak vypada klasicky a ulozila ji.
Vytvorila jsem pak novou a vni zapla vsechny efekty u obrazcich, jak by vypadaly po prejeti mysi a znova ulouzila.
Jde to udelat vsechno v jedne strance, ze bych v photoshopu nastavila jak by ten obrazek vypadal po prejeti? abych to mela vsechno v jednom kodu? ..

Dekuji za odpoved


kod kterymi vygeneroval photoshop: 

<html>
<head>
<title>stranky5</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (stranky5.psd) -->
<table id="Table_01" width="901" height="1684" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="10">
            <img src="images/stranky5_01.gif" width="900" height="107" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="107" alt=""></td>
    </tr>
    <tr>
        <td rowspan="12">
            <img src="images/stranky5_02.gif" width="59" height="1576" alt=""></td>
        <td colspan="8">
            <img src="images/hlavicka.gif" width="781" height="224" alt=""></td>
        <td rowspan="12">
            <img src="images/stranky5_04.gif" width="60" height="1576" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="224" alt=""></td>
    </tr>
    <tr>
        <td colspan="8">
            <img src="images/stranky5_05.gif" width="781" height="10" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="10" alt=""></td>
    </tr>
    <tr>
        <td rowspan="10">
            <img src="images/stranky5_06.gif" width="2" height="1342" alt=""></td>
        <td colspan="2">
            <img src="images/uvod.gif" width="130" height="84" alt=""></td>
        <td colspan="2">
            <img src="images/novinky.gif" width="214" height="84" alt=""></td>
        <td rowspan="2" bgcolor="#000000">
            <img src="images/onas.gif" width="136" height="86" alt=""></td>
        <td>
            <img src="images/akce.gif" width="131" height="84" alt=""></td>
        <td>
            <img src="images/forum.gif" width="168" height="84" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="84" alt=""></td>
    </tr>
    <tr>
        <td colspan="4" rowspan="2">
            <img src="images/stranky5_12.gif" width="344" height="137" alt=""></td>
        <td colspan="2" rowspan="9">
            <img src="images/stranky5_13.gif" width="299" height="1258" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="2" alt=""></td>
    </tr>
    <tr>
        <td rowspan="8">
            <img src="images/stranky5_14.gif" width="136" height="1256" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="135" alt=""></td>
    </tr>
    <tr>
        <td rowspan="7">
            <img src="images/stranky5_15.gif" width="14" height="1121" alt=""></td>
        <td colspan="2">
            <img src="images/kniha.gif" width="140" height="126" alt=""></td>
        <td rowspan="7">
            <img src="images/stranky5_17.gif" width="190" height="1121" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="126" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="images/stranky5_18.gif" width="140" height="25" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="25" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="images/mece.gif" width="140" height="135" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="135" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="images/stranky5_20.gif" width="140" height="14" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="14" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="images/onas-leva.gif" width="140" height="156" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="156" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="images/forum-leva.gif" width="140" height="234" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="234" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="images/stranky5_23.gif" width="140" height="431" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="431" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/spacer.gif" width="59" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="2" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="14" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="116" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="24" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="190" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="136" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="131" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="168" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="60" height="1" alt=""></td>
        <td></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Moderátor Petr ZZZ: Vkládej prosím kódy mezi zn
jenikkozak
Profil
#2 · Zasláno: 1. 3. 2011, 16:12:40
Odpovědět Citovat
vercaaa:
„protoze jsem se docetla, ze vytvareni webu prez tabulky uz je zastarale.“
Zcela správně, zvlášť takovýmto způsobem se to nehodí.

> Mam si tedy vytvorit css soubor a jet napr. timhle zpusobem ke kazdemu obrazku ktery se mi v PS rozrezal?
> #mece{position: absolute; width:100px; top:520px; left: 940px}
CSS soubor vytvořit, ale bude lepší použít něco lepšího než absolutní pozicování. Například [http://www.jakpsatweb.cz/css/obtekani.html]obtékání[/url], nechceš? Když pochopíš, jak to funguje, ušetříš si spoustu práce s rozhozeným webem při absolutním pozicování. Ale nenutím ti to.

„a jeste jsem se chtela zeptat, jestli photoshop umi rovnou vytvaret efekty po prejeti mysi.“
Na to použij v CSS pseudotřídu hover, mohlo by to být snazší než se snažit do stránky zabudovávat nějaké vygenerované řešení.
vercaaa
Profil *
#3 · Zasláno: 2. 3. 2011, 08:19:29 · Upravil/a: Moderátor (editace znemožněna)
Odpovědět Citovat
1) dekuji moc .. myslela jsem, ze kdyz mi PS vygeneroval ty pozice tech obrazku, ze by to bylo snazsi na prepsani do CSS pomoci toho pozicovani.) ale urcite se na to obtekani podivam a vyzkousim.
2)jj hover znam :) slo spis jde o to, ze kdyz delam v PS ty efekty .. musim pak kazdy efekt ukladat pojednom, protoze se mi ty efekty kryji (napr. po prejeti mysi se mi kolem obrazku udela cervena zar, kdyz sou ale dva vedle sebe, prekryvaji se navzajem tou zari :) .. tak me zajimalo, jestli kdyz ukladam v photosopu webou stranku .. jestli tam neni nake nastaveni, kde by se ulozila stranka + efekty tech hoveru..

ja vim, ze se me da asi tezko pochopit :) ...

zkusim to jeste jednou popsat :)

navrhnu si stranku, rozrezu vsechny jeji casti (klikaci obrazky, hlavicku ...) a pak dam ulozit jako web .. photoshop mi vsechny rozrezany obrazky ulozi po jednom zvlast a hodi k tomu ten zdrojovy kod. A mam vlastne hotovou stranku bez vsech efektu ..
Otevru znova stranku v photoshopu ted ale zapnu vsechny efekty jak by vypadali po prejeti mysi ... tady je problem ze se nekdy trosku prekryvaj a nevypada to pekne takze to pak musim ukladat treba na 10x ..
tak me napadlo, ze kdyz je ten PS hodne podporovany pro teb web (muzes si tam nastavit u kazdeho rozrezaneho obrazku kam bude odkazovat (URL) dokonce si k nemu muzes nastavit Title a tak .. jestli PS nema nakou variantu ukladani pro stranku i se vsemi pripadnymi efekty :-) .. snad je to o neco srozumitelnejsi .. ale prez to ti dekuji za rady.

a kdyz jsme u toho hoveru .. :) nerozmim moc tomuhle kodu ktery jsem nasla na vasem webu. Vim, ze slouzi k nacitani obrazku predem do zalohy ale nerozumim moc te strukture :) to ,, promenna,, a ,,promenna.src,, tam musim taky psat? nebo co to presne vyjadruje v tom kodu :) ja to ctu jako ,,proměnná,, :) a tak to asi byt nema ze? :D .. dekuji moc

<script>
promenna = new Image();
promenna.src = "obrazek.gif";
</script>

Moderátor Petr ZZZ: Tvůj projev je špatně srozumitelný, piš prosím s diakritikou.
Moderátor Petr ZZZ: A vkládej kódy mezi značky [pre] a [/pre] (stačí kliknout na ).
jenikkozak
Profil
#4 · Zasláno: 2. 3. 2011, 10:44:15
Odpovědět Citovat
vercaaa:
„myslela jsem, ze kdyz mi PS vygeneroval ty pozice tech obrazku, ze by to bylo snazsi na prepsani do CSS pomoci toho pozicovani.)“
On nevygeneroval pozice, pouze rozměry obrázků, pozici by bylo nutno dopočítat.

„nerozmim moc tomuhle kodu ktery jsem nasla na vasem webu“
Na jakém webu?
Zápis „promenna.src=“ přiřazuje hodnotu vlastnosti (src) proměnné nazvané „promenna“.
Pravděpodobně toto nebudete potřebovat.

Možná bude lepší, když vytvoříte stránku v tom Photoshopu, uložíte ji na web a dáte sem odkaz. Někdo by se Vám na to kouknul a poradil blíže.

Mimochodem, diakritiku tady na diskusi většina lidí považuje za dobrý vynález. ;-)
vercaaa
Profil *
#5 · Zasláno: 2. 3. 2011, 13:02:11
Odpovědět Citovat
promiň :)
mimo jiné krom mých ,,dis,, vad mám jestě americkou klávesnici a dlouho hledám (ě,š,č,ř ... )

našla jsem to http://www.jakpsatweb.cz/javascript/preload-obrazku.html aby se mi obrázky načetly dopředu.

Ok dodělám je a dám je na web :)
jenikkozak
Profil
#6 · Zasláno: 2. 3. 2011, 14:22:51
Odpovědět Citovat
No vidíš, na uvedené stránce to máš krásně vysvětlené, jak se to používá. Ale pravděpodobně to nebudeš potřebovat.
Časová prodleva: 13 let

Vaše odpověď

Mohlo by se hodit

  • Pokud přikládáte obrázkové ukázky, dbejte prosím na jejich přijatelnou (datovou) velikost.
  • Uvádějte v titulku grafický program, na který se ptáte.

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

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

0