ugrás a tartalomhoz

FRAMESET, IFRAME, ?

gell8 · 2010. Nov. 30. (K), 16.48
Tisztelt Válaszadók!

Én alap html és css imeretekkel rendelkezem. (Ezt fontosnak érzem már az elején leszögeznem.)
Ezzel a "tudással" szeretnék egy olyan weblapot elkészíteni, amiben az oldalam egyes elemei(/részei) állandók maradnak és az ezeken található hivatkozások segítségével változna egy másik részen a tartalom.
FRAMESET-tel próbálkoztam, de nem jött be. Nem tetszik, hogy a böngészőablakot osztja fel kisebb ablakokra. (Hagyományos (fejléc-tartalom-lábléc) elrendezés esetén nem tudom megvalósítani, hogy a header az oldalam alján legyen, ne pedig a böngészőén.)
Másodszor IFRAME-mel próbálkoztam, ami már közelített, ahhoz amit szeretnék, de ennek méretezése túlságosan kötött számomra. - Magyarul sehogy sem tudtam a tartalomhoz igazodóvá tenni. Próbálkoztam javascript kódokkal, de így is csak egy-két böngészővel működött normálisan.
Egyszerűbb lenne az életem ha div-ekre meg lehetne adni, hogy itt nyissa meg xy hivatkozást, hisz azokat tudom tartalomhoz igazodóvá tenni..... Úgy sejtem, nem erre lettek kitalálva. :-)
Ha valaki tud egy olyan megoldást, amit egy ilyen csekély ismeretekkel rendelkező is meg tud érteni/csinálni, szívesen fogadom.
Köszönet!
‹ Negatív margin - ie-ben nem látszik a tartalom IP tiltása weboldal elérésre ›
 ■
1

A frame-ek használata hosszú

kuka · 2010. Nov. 30. (K), 17.02
A frame-ek használata hosszú ideje ellenjavallt formatervezési szempontból. Szmantikai szempontból pedig 1 lap=1 dokumentum. Azaz a frame-ek eltérő tartalmak egymás mellé helyezésére szolgálnak, nem egyazon lapnak a szétfaricskálására.
Hagyományos (fejléc-tartalom-lábléc) elrendezés esetén nem tudom megvalósítani, hogy a header az oldalam alján legyen, ne pedig a böngészőén.
Akkor azt oldd meg, ne újabb gondokat okozz: CSS Sticky Footer.
4

lábléc

gell8 · 2010. Nov. 30. (K), 18.44
Bocsi. Úgy értettem, hogy frame-s elrendezés esetén nem tudom megoldani a láblécet.
"Szétfricskázásra" mit használnak?
5

"Szétfricskázásra" mit

kuka · 2010. Nov. 30. (K), 19.18
"Szétfricskázásra" mit használnak?

Mármint "szétfaricskálására"? Hát frame-eket: tartalmilag egyetlen dokumentum, de az egyes részeit levágták és külön rakják. Mint a te ötleted esetében a fejlécet és láblécet. Aztán csodálkoznak, hogy a keresők nem úgy fogják fel ahogy elképzelték, a külső hivatkozást követő látogatók eltévednek, a vakok meg nem találják meg egyes részeit.
8

Jaja. Ezt értem, eddig el is

gell8 · 2010. Nov. 30. (K), 23.31
Jaja. Ezt értem, eddig el is jutottam. És nem "szétfricskálásra"? :-)
2

position: fixed

Poetro · 2010. Nov. 30. (K), 17.33
<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Darabolás</title>
  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
    }
    html,
    #main {
      height: 100%;
    }
    #main {
      position: relative;
    }
    #content {
      padding: 100px 0 50px;
    }
    h1 {
      margin: 0;
      padding: 0;
    }
    #header {
      height: 100px;
      line-height: 100px;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: gold;
    }
    #footer {
      height: 50px;
      position: fixed;
      bottom: 0;
      left: 0;
      background: orange;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="main">
    <div id="header">
      <h1>Fejléc</h1>
    </div>
    <div id="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat aliquam tincidunt. Donec in iaculis sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec tempor vulputate consequat. Maecenas pretium molestie velit sed viverra. Proin porttitor elit tellus, id posuere lectus. Aliquam pulvinar, sem quis eleifend ornare, mauris tellus pharetra elit, id dapibus sem sem ut ante. Aenean sodales justo eu ligula pulvinar et sollicitudin lectus pulvinar. Nullam eu aliquet elit. Cras dapibus pharetra dolor, at pellentesque dolor consequat tincidunt. Sed fringilla ornare varius. Nunc imperdiet ipsum eu nisl interdum scelerisque. Quisque egestas justo eu mi dapibus tempus. In eu nunc lorem. Ut vulputate tortor quis nulla adipiscing vestibulum. Nunc felis nulla, iaculis sit amet mattis bibendum, aliquet eu felis.</p>
    </div>
    <div id="footer">
      Copyright
    </div>
  </div>
</body>
</html>
Kipróbálható
3

Ezt gondolom a láblécemre

gell8 · 2010. Nov. 30. (K), 18.42
Ezt gondolom a láblécemre szántad. Igaz?
6

Oh, nem tudtam, hogy van

Poetro · 2010. Nov. 30. (K), 20.46
Oh, nem tudtam, hogy van lábléced, ezt ide a fórumra szándékoztam írni.
Ezzel a "tudással" szeretnék egy olyan weblapot elkészíteni, amiben az oldalam egyes elemei(/részei) állandók maradnak és az ezeken található hivatkozások segítségével változna egy másik részen a tartalom.

Lehet nem jól írtad le, mit is szeretnél. Nem írtad le, mit jelent az, hogy állandóak maradnak, és hogy egy másik részen változna a tartalom. Az IFRAME / FRAME dolgot én alapból elfelejteném.

Egyszerű a dolog, meg kell csinálni minden oldalt HTML-ben, minden oldalon rajta van a fejléc és lábléc és a közepére meg beírod a tartalmat. A linkekre kattintva meg betöltödik egy másik oldal. Ennyi az egész.

Amennyiben azt szeretnéd, hogy ne töltődjön újra az egész oldal, akkor már csak egy kis AJAX szükségeltetne (természetesen az összes oldalra továbbra is rá kellene rakni a fejlécet és láblécet). És amennyiben hajlandó vagy tanulni, írtam valamikor egy bejegyzést, hogyan lehetne ezt egyszerűen megvalósítani jQuery (JavaScript) segítségével.
7

Azt szeretném elkerülni, hogy

gell8 · 2010. Nov. 30. (K), 21.30
Azt szeretném elkerülni, hogy minden lapot meg kelljen írnom html-ben. Ennek két oka van, az egyik az, hogy a baloldalra raktam egy kis flash-t, aminek nem kéne mindig újraindulni, de ez a kisebbik..... A másik az, hogy a kb 6 fő menüpont mellett van egy termékek rész, amiből több van annál, minthogy egyesével megkapják az egész oldalszerkezetet.
Köszönöm válaszod, meg fogom nézni a bejegyzésed, bár nem értek a jQuery-hez!
12

Kezdés

Poetro · 2010. Dec. 1. (Sze), 18.24
Pedig minden lapot meg kell tanulnod megírni HTML-ben. Ennek több oka van. Lehet valaki az egyik al-oldalt új fülön / ablakban szeretné megnyitni, és ekkor nem szerencsés ha elveszne a további navigáció lehetősége. A felhasználó, ha hasznos az oldal által nyújtott tartalom, akkor szeretné könyvjelzőbe tenni, de ha nem tudja meglátogatni azt a tartalmat, amit néz, akkor szomorú lesz.

Ez a hátránya általában az olyan oldalaknak amik (i)frameket használnak ugyanis nem igazán van kontrollja a felhasználónak a fölött, hogy mit akar nézni. Az AJAX-os megközelítéssel is lehetnek problémák, ha nem felhasználó barát módon közelítik meg, például megfeledkezik arról, hogy a felhasználó esetleg új fülön akarna megnyitni egy linket, vagy könyvjelzőben akar eltárolni egy oldal hivatkozást.

Az imént említett bejegyzésemben levő kód ezt eléggé szépen valósítja meg, azaz az Előre / Vissza gombok továbbra is működnek, a linkeket meg lehet nyitni új fülön, el lehet tárolni könyvjelzőben, ugyanakkor csak akkor fog működni, ha a felhasználónál be van kapcsolva a JavaScript. Ez természetesen igaz a Flash-re is. Ha nincs JavaScript a böngészőben a fenti példaoldal működni fog, bár nem ugyanúgy ahogy JavaScript-tel működne, de működik, és a felhasználó továbbra is meg tudja látogatni az ott található tartalmakat.
13

Azt szeretném elkerülni, hogy

kuka · 2010. Dec. 2. (Cs), 10.36
Azt szeretném elkerülni, hogy minden lapot meg kelljen írnom html-ben.
Tehát az a célod, hogy új termék lap hozzáadásakor ne kelljen az erre mutató hivatkozást kézzel beszúrni az összes már létező termék lapjába? Emiatt tök fölösleges frame-eket használni.

És programozás sem szükséges, lévén sima szövegfeldolgozáshoz elegendő egy sima szövegfeldolgozó. Például cpp (C PreProcessor).

Lássunk egy példát. Adott az alábbi könyvtárszerkezet:
|- kesz                kész HTML állományok, a generálás eredményei
|  |- egy.htm
|  \- ketto.htm
|- Makefile            generálás menetének leírása
|- egy.darab.htm       első termék lapjának a darabja
|- ketto.darab.htm     második termék lapjának a darabja
\- menu.darab.htm      közös menü darab minden termék lap számára

Valamint az alábbi állományok a könyvtárban:
egy.darab.htm

<!DOCTYPE html>
<head>
<title>Első termék</title>
</head>
<h1>Első termék</h1>
<div>Első leírás</div>
<nav>
#include "menu.darab.htm"
</nav>
</body>
</html>
ketto.darab.htm

<!DOCTYPE html>
<head>
<title>Második termék</title>
</head>
<h1>Második termék</h1>
<div>Második leírás</div>
<nav>
#include "menu.darab.htm"
</nav>
</body>
</html>
menu.darab.htm

<a href="egy.htm">Első termék</a>
<a href="ketto.htm">Második termék</a>
Makefile

CPP=cpp -C -P

all: kesz/egy.htm kesz/ketto.htm

kesz/egy.htm: egy.darab.htm menu.darab.htm
        $(CPP) -o kesz/egy.htm egy.darab.htm

kesz/ketto.htm: ketto.darab.htm menu.darab.htm
        $(CPP) -o kesz/ketto.htm ketto.darab.htm
Ezzel a felállással már csak egy make parancsot kell kiadni, és a kesz/ könyvtárban ott is vannak a generált HTML dokumentumok. Ezeket aztán a webszerver keze ügyébe helyezed.

Ha megjelenik egy új termék:
  • létrehozol egy harom.darab.htm állományt a kívánt tartalommal, a menü helyére az #include "menu.darab.htm" sort írva
  • a menu.darab.htm állományba beírod a harom.htm-re mutató hivatkozást
  • a Makefile-ba beírod hogyan kell generálni a harom.htm állományt
  • ismét kiadod a make parancsot

Megjegyzések:
  • a make parancs és a Makefile használata mellékes és elhagyható/lecserélhető
  • a cpp nagyon elterjedt szövegfeldolgozó, a példához az egyszerűség kedvéért használtam
  • egyszerűen beszúrathatsz további, egységesen változó darabokat, például e-havi-ajanlott-termek.darab.htm
  • vannak teljes weboldal generálására szakosodott szövegfeldolgozók
14

Dreamweaver

Poetro · 2010. Dec. 2. (Cs), 12.31
Amire emlékszem, még akkori időkből, amikor megjelent a Dreamweaver 4 a cég megvette az egész Macromedia csomagot, és akkor ismerkedtem meg ezzel a programmal. Ebben akkoriban volt template készítés, és készíthettünk HTML fájlokat, amik ezeket a template-eket használták. Amikor egy template frissült, az összes HTML fájl ami használta azt a template-et kérhettük, hogy frissüljön. Mondjuk azóta a verzió óta - 2000-2001 ,- nem is használtam Dreamweavert, de hátha azóta is megvan benne ez a szolgáltatás, és valamelyik fejlesztő megvette valamelyik azóta megjelent változatot.

szerk: Találtam egy táblázatot, ami mutatja, mely szerkesztőkben van meg, ez a template szinkronizáció (Templates Update Sync)
9

Abszolut nem bántásból vagy

deejayy · 2010. Dec. 1. (Sze), 13.31
Abszolut nem bántásból vagy kötözködésből, sokkal inkább jótanácsként írom: a te tudásoddal egy dolgot lehet nagyon jól csinálni: tanulni. Bővítsd a látóköröd, kísérletezz a technikákkal, nézd meg, mások hogyan csinálják. (Majdnem) mindenre van megoldás, ami elfogadott, és a célnak megfelel.

Fát vágni baltával, fűrészelni fűrésszel, szöget beverni kalapáccsal (esetleg HDD-vel ;P).
10

Merre tovább?

gell8 · 2010. Dec. 1. (Sze), 17.42
Oké. Nem vagyok a tanulás / új dolgok megismerése ellen, de melyik az az irány? (Az én tudásommal még ezt sem könnyű eldönteni.)
JavaScriptre gondoltam, de arról azt olvastam például, hogy elég böngészőfüggő....
PHP-hez meg nagy programozási alapismeretek szükségesek.
Flash-sel is lehet szép lapokat csinálni,de arról meg azt mondják halálra ítéltetett.

Én nem világváltó honlapokat szeretnék csinálni, csak egyszerű jól működőket. :-)
11

HTML

Poetro · 2010. Dec. 1. (Sze), 18.11
Akkor előbb tanuld meg részletesen a HTML-t és CSS-t, mint nyelveket. Ismerd meg azok böngészőfüggő aspektusait. Tanulj meg élni a korlátaikkal. Már csak ezzel el fog menni legalább fél éved, és még mindig nem tudtad megvalósítani azt, amit szeretnél, mert nem arra lett kitalálva, amire használni szeretnéd.
Ha ez tökéletesen megy, akkor tanul meg programozni. A JavaScript sem könnyebb programozási nyelv, mint a PHP, sőt egyesek szerint sokkal bonyolultabb. Mindenesetre teljesen más szemléletet igényel a kettő, és teljesen máshogy is működnek.