Jump to content
GSForum - Segélyvonal

Honlap felszeletelése


detoxin
 Share

Recommended Posts

detoxin

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:

Link to comment
Share on other sites

payskin

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.

Link to comment
Share on other sites

HartaiBalazs

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.

Link to comment
Share on other sites

[OP]Destroy-man

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

Link to comment
Share on other sites

payskin

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

Link to comment
Share on other sites

HartaiBalazs

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 by HartaiBalazs
Link to comment
Share on other sites

payskin

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! :-)

 

 

 

 

Link to comment
Share on other sites

HartaiBalazs

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.

Link to comment
Share on other sites

[OP]Destroy-man

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?
Link to comment
Share on other sites

payskin

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... :)

Link to comment
Share on other sites

payskin

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?

 

 

Link to comment
Share on other sites

Fujitsu

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

Link to comment
Share on other sites

HartaiBalazs

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

Link to comment
Share on other sites

HartaiBalazs

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.

Link to comment
Share on other sites

payskin

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...

Link to comment
Share on other sites

HartaiBalazs

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?

Link to comment
Share on other sites

payskin

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

 

 

Link to comment
Share on other sites

HartaiBalazs

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.

 

 

Link to comment
Share on other sites

Pjotr

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.

Link to comment
Share on other sites

payskin

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.

Link to comment
Share on other sites

Pjotr

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é:

Link to comment
Share on other sites

HartaiBalazs

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õ:)

Link to comment
Share on other sites

payskin
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?

Link to comment
Share on other sites

Giraffe1

[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. 8)

[ON]

Link to comment
Share on other sites

HartaiBalazs

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?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...