WN - Alternativ till framset

Sidan 1 av 2

Visa 40 inlägg från det här ämnet på en sida

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Alternativ till framset (https://www.wn.se/forum/showthread.php?t=1039480)

erikcronberg

2009-12-07 17:33

Alternativ till frameset

Jag undrar om det finns några enkla mallar som motsvarar funktionen i en sida uppbyggd av framesets. I det här fallet en enkel sida med en meny och en del som ändras beroende på hur man navigerar i menyn. Helt enkelt en klassisk fotografportfolio med en meny med kategorier och en del med bilderna i kategorin man valt att kolla på.

Gärna någon enkel mall, eller en väldigt enkel guide!

qson	2009-12-07 19:00

Frameset är (som du säkert har förstått) inte alls bra i sökmotorvänlighet eller för synskadade eller annat maskinläsligt.

Bättre är när "allt innehåll ligger i samma fil".

Gör en sida med "boxar" (förslagsvis <DIV>-element), en för sidhuvudet, en för menyn, en för innehållet och en för sidfoten.

Läs på lite om <DIV> och CSS

CSS:
http://iwtjanster.idg.se/webbstudio/...ning.asp?id=27

Tabellfria designer (Wikipedia)
http://en.wikipedia.org/wiki/Tableless_web_design

Alistapart: (Mycket bra guide. Har själv räddat mig många gånger...)
http://www.alistapart.com/articles/practicalcss/

Har tyvärr ingen färdig mall, men alistapart borde hjälpa dig ett steg på vägen.

Haken är att "menyn" måste finnas med på varje undersida, och om du vill ha in en ny menyknapp måste du ändra i alla undersidor också. Såvida du inte använder någon form av webbverktyg (CMS), SSI (.shtml) eller PHP för att läsa in sidhuvud, menyer och sidfot mm...

taz76

2009-12-07 20:10

Lägg menyn i en extern fil och läs in den med <?php require_once 'meny.php'; ?> :) Kan göras samma med sidfot m.m också.

KarlRoos

2009-12-07 20:28

HTML:

Kod:

<ul id="menu">

<li><a href="sida1.html">Sida 1</a></li>

<li><a href="sida2.html">Sida 2</a></li>

</ul>

<div id="main">

</div>

CSS:

Kod:

ul

{text-align: center;}



ul li

{display: inline;}



#main

{width: 960px; margin: auto;}

JS (inom <head>)

Kod:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">

$("#menu li a").click(function(){

var file = $(this).attr("href");

$("#main").load(file);

return false;

});

</script>

Det här fungerar ungefär som med frames (fast mycket bättre och korrekt). Om du inte förstår själva koden så kan jag förklara den men det borde vara ganska straight forward.

JS koden använder biblioteket jQuery som även inkluderas. Den binder sedan klick på menyn till en funktion som kollar vilken fil som står i href och sedan laddar den till diven #main.

OBS: otestad kod, borde funka.

Alex	2009-12-08 12:55

Enda felet jag ser i KarlRoos kod är att all jQuery-kod bör köras när dokumentet är färdigt.

Kod:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

      $("#menu li a").click(function(){

            $("#main").load($(this).attr("href"));

            return false;

      });

});

</script>

erikcronberg

2009-12-08 15:54

Oj, tack så mycket! Det ser ut som något jag kan klara av när det blir dags. Annars kanske jag kan höra av mig så ordnar jag ersättning för det, om ni har F-skatt.

erikcronberg

2010-01-02 18:31

Tänkte försöka ta tag i det här själv innan jag anlitar någon.

Hur enkelt kan http://erikcronberg.se/nyasdfasdf/ konverteras? Är det kanske enklare att börja på nytt?

erikcronberg

2010-01-02 19:23

Måste man ha menyn som en lista förresten?

erikcronberg

2010-01-02 20:10

Oj vad jag spammar.

Nu hittade jag http://www.dynamicdrive.com/dynamici...jaxcontent.htm och har lyckats få ihop allt jättefint, förutom laddningen av CSS-filer. Som jag tolkar den guiden måste man klicka på en länk för att få CSS-filerna att laddas i sidan, hur gör man det automatiskt?

kw_wasabi

2010-01-04 05:24

Citat:

Ursprungligen postat av erikcronberg (Inlägg 20337395)

Nu hittade jag http://www.dynamicdrive.com/dynamici...jaxcontent.htm och har lyckats få ihop allt jättefint, förutom laddningen av CSS-filer. Som jag tolkar den guiden måste man klicka på en länk för att få CSS-filerna att laddas i sidan, hur gör man det automatiskt?

<head>
<link href="style.css" type="text/css" rel="stylesheet">
</head>

Länken du menar verkar bara vara en finess om man vill att besökarna ska kunna välja olika utséenden på sajten.

Alla tider är GMT +2. Klockan är nu 23:58.

Sidan 1 av 2

Visa 40 inlägg från det här ämnet på en sida