Honlap felszeletelése

December 22, 2009

Az lenne a problémám, hogy készítek egy layoutot Adobe Photoshopban. Ezt felszeletelem a programban található Slice Tool segítségével amely után megkapom a felszeletelt képeket és egy index.html fájlt.

A gondom itt lenne, hogy a Photoshop egy táblás szerkezetbe teszi össze az index.html fájlt és ez számomra elég össze-vissza értelmezhetetlen módon van.

A kód egy részlete: :ny íl:

IPB kép

Ezért az lenne a kérdésem, hogyan tudnám én ezeket a képrészleteket <div>-es felépítésbe integrálni ezen bonyolult táblázat rendszer felhagyásával.

Maga a layout így nézne ki: :ny íl:

IPB kép

Másik kérdésem pedig az lenne, hogy milyen módon lenne célszerû felszeletelni a layoutot?

Hogyan lenne célszerû divekre bontani?

Minden segítséget szívesen fogadok esetleg linkekkel megspékelve amelyek segítségemre lehetnek. :upsz:

December 23, 2009

Kezdjük ott, hogy ez a kép 1025 pixel széles. ??!??! Milyen weboldalt szeretnél csinálni? Mert ha fix méretűt, akkor teljesen rossz. Mondjuk 960-990 köré kéne belőni a szélességet.

Egyébként meg kell a tetején levő gombok mögötti szélesebb részből egy mondjuk 10 pixel széles kép, kell a gombok képe (lehetnek egyben is), a jobbra, keskenyebb részből szintén egy 10 pixel széles kép, a menügombok alatti részből egy gombnak a háttere (ha fix szélességű gombokat akarsz), a két körbe forgó gomb, szürke rész tetején és alján levő csíkból 10-10 pixel és az alján levő csíkból 10 pixel. Ja, és természetesen kell a háttér. Kb. ennyi.

Egy div az egész oldal, azon belül egy div a fejléc, azon belül egy ul a gombok, egy div a gondolom keresőmező formja, és még egy vagy több div vagy ul a tőle jobbra eső rész, attól függ, mi kerül oda. Egy div az oldal közepe, benne egy ul a menük, 1-1 div lehet a két körbeforgó gomb, a középső rész pedig megint attól függően, hogy ott mi lesz 1-3-sok külön div vagy más oldalelem. Egy külön div az alja.

December 23, 2009

Hello.

Igen ez egy korábbi kép volt ami még szélesebb volt mint 960px.

Az fent nem keresõ box hanem a zene nevének kiírásának helye mellette pedig funkció gombok.

Megpróbáltam már összerakni dives szerkezetben de nem értem hogy ha egy kép részletet beraktam a kódba akkor a következõ kép részlet már csak ugy tudom berakni, hogy van a 2 kép között egy 3px-nyi üres terület.

Megvásároltam Virginia DeBolt: HTML ás CSS webszerkesztés stílusosan címû könyvét remélem találok majd valamit a gondomra.

Most találtam meg a Websulis cikked elolvasom majd és remélem okosabb leszek.

Üdv.

December 24, 2009

Nem lenne célszerűbb imagemapet használni?

December 24, 2009

Szerintem ezt nem gondoltad át... :-)

December 24, 2009

Sikerült megoldanom a dolgot de végül maradtam a táblás szerkezetnél csak kicsit átláthatóbbá tettem az egészet.

Az lenne a kérdésem, hogy erre az oldalra szeretnék egy lenyíló menüt.

Mivel nekem a menü nem listával van kialakítva a menüszerkezete hanem táblás módszerrel az lenne a kérdésem, hogyan lehetne mégis erre egy lenyíló menüt írni JavaScriptben?

Jelenleg így néz ki a gomb kódja:

<tr>         
        <td id="csapat">
            <a class="menuszoveg" href="#">Csapat</a></td>
        <td id="stadion" colspan="2">
            <a class="menuszoveg" href="#">Stadion</a></td>
        <td id="sikerek">
            <a class="menuszoveg" href="#">Sikerek</a></td>
        <td id="videok">
            <a class="menuszoveg" href="#">Videok</a></td>
        <td id="kepek">
            <a class="menuszoveg" href="#">Képek</a></td>
        <td id="egyeb" colspan="2">
            <a class="menuszoveg" href="#">Egyeb</a></td>
        <td>
    </tr>

Ezt ki tudom egészíteni mégis valahogy mintha listával lenne megírva?

Erre gondolok:

<tr>
            [/b]<ul>[b]    
                <li><td id="csapat">
            <a class="menuszoveg" href="#">Csapat</a></td>[b]</li>[/b]
                [b]<li>IDE JÖNNE A CSAPAT ALMENÜJE<li>[/b]
        <td id="stadion" colspan="2">
            <a class="menuszoveg" href="#">Stadion</a></td>
        <td id="sikerek">
            <a class="menuszoveg" href="#">Sikerek</a></td>
        <td id="videok">
            <a class="menuszoveg" href="#">Videok</a></td>
        <td id="kepek">
            <a class="menuszoveg" href="#">Képek</a></td>
        <td id="egyeb" colspan="2">
            <a class="menuszoveg" href="#">Egyeb</a></td>
        <td>
    </tr>

Remélem érhetõ amit tudni szeretnék.

És át van gondolva a dolog csak nem értem annyira a dolgokat és más helyeken is nézegettem de sajnos félszavakból elég nehéz akármit is megtudni.

Kellemes ünnepeket!

Edited December 24, 2009 by HartaiBalazs

December 24, 2009

1. Nos, nem, így nem lehet lenyíló menüt csinálni. A

és a közé nem rakhatsz semmit.

2. A kódot code /code közé rakd be, ne quote-old.

3. Jó lenne a kódot valami formába önteni, mert az elsõ listán látható dolog minden, csak nem könnyen áttekinthetõ. A

nyilván nem a -hoz tartozik, hanem a -hez, tehát annak a szintjén kéne új sorban lenni. Alternatívaként az egész lehetne egy sorban:

3. Olvasgasd a könyvet, olvasgasd a websulit. Elõre megmondom: tanulás és rengeteg próbálkozás nélkül nem megy.

4. Vedd észre, hogy a hozzászólásod és a "nem gondoltad át" között volt még egy hozzászólás. Lehet, hogy nem neked írtam, hogy nem gondoltad át?

5. Boldog Karácsonyt! :-)

December 24, 2009

Köszönöm szépen a segítséget megfogadom a tanácsokat.

Jó a könyv és a Websuli is szóval próbálkozom.

Üdv.

December 26, 2009

Az imagemapes megoldást úgy gondoltam, hogy a gombokat szépen el lehet készíteni vele, az egész mehet egy divbe, a szövegrészeket meg pozicionáltan, div a divben megoldással meg lehet oldani. -> Eltűnik a táblázat.

Visual Studio Web Developerében még régebben kipróbáltam, müködik ez a megoldás is.

Azért írtam ezt a megoldást, mert a kérdés ez volt:

Hogyan lenne célszerű divekre bontani?

December 27, 2009

Ja, ok. Én azt hittem, az egész oldalra gondoltál. Elkezdtem rajta töprengeni, hogy akár meg is lehetne csinálni... ha olyan oldalt akarunk, amin semmi mást nem lehet, csak kattintani valahova...

December 29, 2009

Karácsonyi ajándék: egy komplett, 3 részes videotutorial arról, hogy hogyan terveznek meg a skacok egy weboldalt 0-ról Fireworksben, hogyan színezik ki Photoshopban és hogyan vágják azt fel és rakják össze belõle az oldalt.

Szerintem eszméletlen érdekes, és kiváltképp hasznos, hm?

December 29, 2009

Hm, és mi az az inline js ott a végén? Amúgy tényleg rendkívül érdekes videó. Ezer éve nem kódoltam, most megint kedvet kaptam hozzá.

January 1, 2010

Érdekes videó volt kár, hogy még nem tudok teljesen angolul.

January 1, 2010

Miért van az, hogy megcsináltam a DVD-m kódját és mikor szeretnék felvinni valami tartalmat akkor az egész oldal szétcsúszik. Mármint megvan a tartalom, helye de amikor szeretnék ráírni akármit akkor csúszik szét minden.

<!-- TARTALOM START -->
    
    <tr>
        <td colspan="3" rowspan="2">
            <img src="images/tartalom_bal.gif" width="49" height="477" alt=""></td>
        <td colspan="12">
            <img src="images/tartalom_felett.gif" width="864" height="11" alt=""></td>
        <td colspan="2" rowspan="2">
            <img src="images/tartalom_jobb.gif" width="47" height="477" alt=""></td>
    </tr>
    <tr>
        <td id="tartalom" colspan="12">
            
        
        
            <img src="images/tartalom.gif" width="864" height="466" alt=""></td>
    </tr>
    <tr>
        <td colspan="17">
            <img src="images/tartalom_alatt.gif" width="960" height="9" alt=""></td>
    </tr>
    
<!-- TARTALOM END -->

Itt a kód. Valami baj van vele?

Elõre is köszönöm a segítséget.

January 2, 2010

Nem értem: ha a teljes táblád minden mezõjébe képet raksz, akkor hova fogsz írni tartalmat? Még jó, hogy elcsúszik...

January 2, 2010

Hát ezt nem tudtam, hogy nem lehet. Sajnos így lett megtervezve maga a layout és ezek utan akkor most nem tudom mi lesz

Valami ötlet, hogy ne keljen ezt a kinézetett kidobnom de mégis lehessen valami tartalmat alá rakni?

January 4, 2010

Rakd be a képeket háttérképnek és akkor tudsz rájuk írni.

January 4, 2010

Megcsináltam régebben háttérképként de szétment úgyis, majd holnap tripla infón rátérek erre a tanárral.

January 5, 2010

Most én értetlenkedek: fent van a pcworld.hu-n a Websuli, ha átveszed a leckéket, meg kell tudnod csinálni, a tanárt pedig hanyagolnám, veszélyes lehet.

January 6, 2010

A tanárt azért ne írjuk le látatlanban. Én sem érzem magam a weboldalkészítés egy igaz útja felkent apostolának.

January 6, 2010

A triplainfóból középiskolára tippelek, ott pedig sokkal nagyobb az esélye, hogy nem hozzáértõ a tanár. Gyanítom, hogy volt már szó náluk is webszerkesztésrõl, mivel nem sikerült megcsinálni, így azt hiszem, egészen helytálló a hanyagolás. :hmm:

Hehheh, lehet nem érzed magad annak, de attól még lehet, hogy az vagy, azok vagytok. A websuli a legjobb húzása a PC Worldnek (szerintem), bár én elmaradtam az ûrlapoknál, de most már újra lesz ~ 1 hónapom tanulgatni. :oké:

January 6, 2010

Websulit is pörgetem és beszéltem a tanárral is, egy kezdõ számára azért jövedelmét ebbõl kiegészítõ ember biztosan tud segíteni.

Infó suliba járok 14. éven. Aki lett a konzulensem az nem ad nekem semmilyen órát, csak volt választási lehetõségem arra, hogy év végi szakdogám kísérõjét a DVD-t milyen módszerrel szeretném megcsinálni. Tanultuk flasht, photoshopott, directort, corelt, de a html kimaradt. Mondhatom, hogy ezt kivéve a többiben jártas vagyok, talán a flash téma gyengébb de meg tudnám csinálni ezt a multis DVD-t abban a fejlesztõi környezetben is, mint az összes társam. De én arra gondoltam, hogy megcsinálom html-ben mivel ezt nem tanultuk, és így meg kell, hogy tanuljam legalább az alapokat, hogy ebben készítem el a munkát.

Remélem érthetõ

January 7, 2010

Tanultuk flasht, photoshopott, directort, corelt, de a html kimaradt.

A "photoshopott" azért két t, mert múlt idő? :huh: Corelről mit? Cowpland Research Lab, ~~Toronto~~ Ottawa, meg ilyenek?

January 7, 2010

[OFF]

Én speciel "Labs"-ra emlékeztem, és ebben erősített egy kanadai enciklopédia is, de a Wikipedia szerint Cowpland Research Laboratory.

Én inkább Corel Painterre, Corel DESIGNER-re, vagy ha már Flash-ből indultunk ki, akkor Corel R.A.V.E-re tippelnék. :upsz:

Vagy ha a szeletelés :ny íl: vágás, akkor Corel Lumiere-re.

[ON]

January 7, 2010

A Corel az Corel Draw volt.

De nem is ezeknek a programoknak a használata volt számottevõ hanem inkább az Adobes cuccoknak.

Most, hogy kibeszéltük az iskolát lenne még egy kérdésem.

Megcsináltam a layoutot "dives" rendszerben. Szépen megy is minden böngészõ alatt de az Internet Explorer valamiért nem szereti.

Képek:

Firefoxban

Safariban

IEben

HTML Kód:

<html>
<head>
<title>Manchester United: A csapat!</title>

<link href="manchester.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">

</head>
<body>
    <div id="wrapper">
        <div id="header_wrapper">
            <div id="header_teteje">
            </div>
            
            <div id="header_eleje">
            </div>
            
            <div id="header_bal">
            </div>
            
            <div id="header_stop">
            </div>
            
            <div id="header_play">
            </div>
            
            <div id="header_jobb">
            </div>
            
            <div id="header_kicsi">
            </div>
            
            <div id="header_kijelzo">
            </div>
            
            <div id="header_nagy">
            </div>
            
            <div id="header_alja">
            </div>
        </div>
        <div id="header">
        </div>
        <div id="navigation">
        
            <div id="menu">
            </div>
        
        </div>
        
        <div id="tartalom">
            
            <div id="tartalom_bal">
            </div>
        
            <div id="tartalom_feletti">
            </div>
            
            <div id="tartalom_1">
            </div>
            
            <div id="tartalom_jobb">
            </div>
            
            <div id="tartalom_alatt">
            </div>
        </div>
        
        <div id="footer">
            <div id="alja">
            </div>
        </div>    
    </div>


</body>
</html>

CSS

<html>
<head>
<title>css</title>
    <style type="text/css">
    
    *
    {
    padding:0;
    margin:0;
    }
    
    body 
    {
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #fff; 
    background-color: #000;
    background-repeat: repeat-x; 
    }
    
    #wrapper
    {
    width: 960px;
    }
    
    #header_teteje
    {
    height: 10px; 
    width: 960px; 
    background-image: url("images/header_teteje.gif"); 
    background-repeat: no-repeat;
    }
    
    #header_eleje
    {
    height: 30px; 
    width: 14px; 
    background-image: url("images/header_eleje.gif"); 
    background-repeat: no-repeat;
    }
    
    #header_bal
    {
    height: 30px; 
    width: 29px; 
    background-image: url("images/header_bal.gif"); 
    background-repeat: no-repeat;
    margin-top: -30px;
    margin-left: 14px;
    }
    
    #header_bal
    {
    height: 30px; 
    width: 29px; 
    background-image: url("images/header_bal.gif"); 
    background-repeat: no-repeat;
    margin-top: -30px;
    margin-left: 14px;
    }
    
    #header_stop
    {
    height: 30px; 
    width: 30px; 
    background-image: url("images/header_stop.gif"); 
    background-repeat: no-repeat;
    margin-top: -30px;
    margin-left: 43px;
    }
    
    #header_play
    {
    height: 30px; 
    width: 30px; 
    background-image: url("images/header_play.gif"); 
    background-repeat: no-repeat;
    margin-top: -30px;
    margin-left: 73px;
    }
    
    #header_jobb
    {
    height: 30px; 
    width: 29px; 
    background-image: url("images/header_jobb.gif"); 
    background-repeat: no-repeat;
    margin-top: -30px;
    margin-left: 103px;
    }
    
    #header_kicsi
    {
    height: 30px; 
    width: 20px; 
    background-image: url("images/header_kicsi.gif"); 
    background-repeat: no-repeat;
    margin-top: -30px;
    margin-left: 132px;
    }
    
    #header_kijelzo
    {
    height: 30px; 
    width: 230px; 
    background-image: url("images/header_kijelzo.gif"); 
    background-repeat: no-repeat;
    margin-top: -30px;
    margin-left: 152px;
    }
    
    #header_nagy
    {
    height: 30px; 
    width: 578px; 
    background-image: url("images/header_nagy.gif"); 
    background-repeat: no-repeat;
    margin-top: -30px;
    margin-left: 382px;
    }
    
    #header_alja
    {
    height: 13px; 
    width: 960px; 
    background-image: url("images/header_alja.gif"); 
    background-repeat: no-repeat;
    margin-top: 0;
    }
    
    #header
    {
    height: 170px; 
    width: 960px; 
    background-image: url("images/header.gif"); 
    background-repeat: no-repeat;
    margin-top: 0;
    }
    
    
    #menu
    {
    height: 42px; 
    width: 960px; 
    background-image: url("images/menu.gif"); 
    background-repeat: repeat-x;
    margin-top: 0;
    margin-left: 0;
    }

    #tartalom_bal
    {
    height: 477px; 
    width: 49px; 
    background-image: url("images/tartalom_bal.gif"); 
    background-repeat: no-repeat;
    margin-top: 0;
    margin-left: 0;
    }
    
    #tartalom_feletti
    {
    height: 11px; 
    width: 864px; 
    background-image: url("images/tartalom_felett.gif"); 
    background-repeat: no-repeat;
    margin-top: -477;
    margin-left: 49;
    }
    
    #tartalom_1
    {
    height: 466px; 
    width: 864px; 
    background-image: url("images/tart.gif"); 
    background-repeat: no-repeat;
    margin-top: 0;
    margin-left: 49;
    }
    
    #tartalom_jobb
    {
    height: 477px; 
    width: 47px; 
    background-image: url("images/tartalom_jobb.gif"); 
    background-repeat: no-repeat;
    margin-top: -477;
    margin-left: 913;
    }
    
    #tartalom_alatt
    {
    height: 9px; 
    width: 960px; 
    background-image: url("images/alatt.gif"); 
    background-repeat: no-repeat;
    margin-top: 0;
    margin-left: 0;
    }
    
    #alja
    {
    height: 16px; 
    width: 960px; 
    background-image: url("images/footer.gif"); 
    background-repeat: no-repeat;
    margin-top: 0;
    margin-left: 0;
    }
    </style>
</head>
<body>
</body>
</html>

Mi lehet a probléma?

Sign In

Honlap felszeletelése

Recommended Posts

detoxin

payskin

HartaiBalazs

[OP]Destroy-man

payskin

HartaiBalazs

payskin

HartaiBalazs

[OP]Destroy-man

payskin

payskin

Fujitsu

HartaiBalazs

HartaiBalazs

payskin

HartaiBalazs

payskin

HartaiBalazs

Pjotr

payskin

Pjotr

HartaiBalazs

payskin

Giraffe1

HartaiBalazs

Create an account or sign in to comment

Create an account

Sign in

Browse