Keskustelu: Nettisivujen teko: Divillä taitettujen sivujen linkit

Mikä on paras tapa linkittää div-elementeilllä taitetuilla sivuilla? Elementtiinhän ei voi linkittää target-attribuutilla kuten frameihin (as far as i know), joten mikä on yleisesti ottaen paras tapa saavuttaa sama lopputulos? Tähän asti olen linkannut main tiedostoon, josta sitten URL:n mukana tulleen tiedon perusteella olen sisällättänyt halutun tiedoston.

Eli onko muita/parempia tapoja?

Ohjeita www-julkaisemiseen löytyy esimerkiksi Jyväskylän yliopiston tarjoamista materiaaleista osoitteesta http://appro.mit.jyu.fi/www/luennot/. Ohjeet käyvät läpi hakemistorakenteisen verkkosivun rakentamisen, mukaanlukien linkityksen.

Ihmettelen suuresti miksi olet julkaissut "kirjan" Verkkosivujen käytännön ohjelmointi, jos tällaiset perusasiat eivät ole hallinnassa?

"Kirja" oli tällainen eräs päähänpisto, kuten nuo sivut joilta sen löysitkin. Sehän ei edes mene HTMLää ja CSSää pidemmälle, ja muistaakseni verkkoon päätynyt kappale oli vielä se kappale, jota ei ollut korjattu :) Tarkoituksena ollut jo pitkään pistää sivut kokonaan uusiksi, mutten ole siihen ennättänyt.

Kiitos kuitenkin avusta.

Kävin läpi tuon linkittämäsi luentosarjan. Suurin osa oli minulle ihan tuttua juttua, enkä löytänyt vastausta kysymykseeni (Jos kuitenkin olen sokea niin linkkaa sieltä kohta mistä se löytyy). Alkuperäinen kysymys oli ehkä hiukan epäselvä, joten selvennetään vähän:
Minulla on sivu, joka on jaettu diveillä neljään (wrapper) pääelementtiin: yläosa, sivupalkki ja sisältö.

Nyt minulla on kuitenkin tarve linkittää esimerkiksi tiedostoon forum.php. Linkittäessäni suoraan siihen se kuitenkaan ei tietenkään avaudu suoraan main-elementin sisälle, vaan se avautuu erillisenä tiedostona. Nyt siis haluan saada tuon forum.php-tiedoston avattua main-elementin sisällä.

Tähän mennessä olen linkannut href="main.php?page=forum, ja main.php tiedoston sisällä tehnyt seuraavan:

switch($_GET['page']) {
case 'forum': include 'forum.php'; break;
}

Eli kysymys kuuluukin onko tämän päämäärän saavuttamiseen jotenkin järkevämpi tapa tai teenkö kaiken jotenkin perusteellisesti aivan väärin, ja jos teen niin miten sitten pitäisi tehdä? Huomioikaa, että minulla ei ole välttämättä varsinkaan suomenkieliset termit täysin hallussa (tähän luentosarja ainakin tarjoaa apua), koska olen täysin "itseoppinut".

En tiedä myöskään, onko yleensä tapana jokaisen materiaalia sisältävän tiedoston alussa muotoilla/rakentaa sivu uudestaan, vai tehdä se pelkästään index tiedostossa (tai vastaavassa), kuten olen sen itse tehnyt.

Mod. lisäsi kooditagit!

Käyttäen (x)html:ää oikea tapa on kopioida kaikki olemassaolevan sivun määrittelyt valikoineen päivineen ja muokata sivulle uudet asiat. Perinteisesti homma toteutetaan laittamalla uusi sivu uuteen hakemistoon polussa, esimerkiksi

.
|-- images
|-- index.html
`-- oppaat
    |-- images
    `-- index.html

Sivuston osoitteet toimivat nyt muodossa ../oppaat/. Asiaa on käyty läpi ensimmäisissä harjoitustehtävissä: http://appro.mit.jyu.fi/www/demot/demo1/.

Kiitos. Tuo "Kopioida kaikki olemassaolevan sivun määrittelyt..." oli juuri se tärkein pointti.

PHP:tä käytettäessä oma lähestymistapanikin vaikutti olleen ihan toimiva, ja tuota hakemistoperiaatetta sillä voi soveltaa aivan yhtä hyvin, mutta se vienee enemmän kaistaa ylimääräisen sivulatauksen takia. Isot sivustot ainakin vaikuttavat toimivan mainitsemallasi periaatteella.

PHP:ssä usein hyvä ratkaisu on tehdä jokainen sivu omaan tiedostoonsa. Erillisten tiedostojen käyttö eri sivuille on tyylikkäämpää kuin sellaiset kikkailut kuin index.php?sivu=xyz&alasivu=abc. Yhdestä index-tiedostosta seuraa myös ongelmia, jos pitäisi saada tulostettua tyylikkäitä virheilmoituksia ongelmatilanteissa.

Yksi sivu voisi siis näyttää tältä:

<?php
require_once("funktiot.php");
ylaosa("Otsikko");
?>

<h1>Otsikko</h1>
<p>Höpö höpö</p>

<?php
alaosa();

Sivujen yhteiset osat (yläpalkki ja sivupalkki) tulostetaan tässä funktioilla ylaosa ja alaosa. Funktiot ovat parempi ratkaisu kuin suora include, koska näin ei satu virheitä globaalien muuttujien kanssa. Olio-ohjelmointifriikit tietenkin tekevät aivan saman asian luokilla ja luulevat, että koodi on silloin automaattisesti jotenkin laadukkaampaa. ;)

Funktiot voisivat olla suunnilleen tällaiset:

<?php
function ylaosa($otsikko = null) {
  if ($otsikko == null) {
    $otsikko = "Sivusto";
  } else {
    $otsikko = "Sivusto: {$otsikko}";
  }
  ?>
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8" />
    <title><?php echo htmlspecialchars($otsikko); ?></title>
  </head>
  <body>
  <div id="head">plaa</div>
  <div id="navi">plaa</div>
  <div id="main">
  <?php
}

function alaosa() {
  ?>
  </div>
  </body>
  </html>
  <?php
}

Jep. Tuota ajattelinkin, mutta funktioiden käyttö ei heti olisi tullut mieleen.