Frame-Tag
Et frame-tag er en måde du kan dele din visning af hjemmesiden op i en række dele, eller "frames" på din hjemmeside, du kan selv bestemme hvor mange der skal være, og hvor meget de hver især skal fylde.
Ideen i det er, at du kan have dele af hjemmesiden, der går igen på alle undersider (Typisk ting som banner, menu og footer).
Frames i Kolonner
Koden til et frame-tag[1], som deler siden op i kolonner er:
<html> <frameset cols="25%,*,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset> </html>
Egenskaberne src henviser til hver deres fil (frame_a.htm osv), hvor filerne inderholder det der vises i de forskellige frames.
Hvis du skriver dette ind, vil dette blive resultatet.
Du kan ændre på hvor store dine koloner skal være ved at ændre på denne kode "<frameset cols="25%,*,25%">" du kan ændre den ved at sige hvor meget de forskellige koloner skal fylde.
for eksempel : <frameset cols="30%,40%,30%">
Du kan også skrive :<frameset cols="30%,*,30%">
Når du skriver * i tagget, fylder den automatisk det sidste ud med den frame.
Frames i rækker
Det er ikke kun kolonner man kan lave, men også rækker (rows), som kan laves på følgende måde:
<html> <frameset rows="25%,*"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> </frameset> </html>
Hvilket giver dette resultat:
Frames i kombinationer
Man kan kombinere kolonner og rækker ved at sætte et framesæt ind i stedet for en række eller en kolonne.
Det du simpelthen kan gøre er at lave en collage, eller lignende med dette tag, i stedet for de simple visninger der er angivet overstående, kan du putte menuer, tekstindhold og billeder af hvad du ønsker, der skal du bare skrive fil navnet, på det billede i stedet for "frame_a.htm" på denne måde har du en let og formem måde at gøre din html hjemmeside flottere.
En ret traditionel måde at gøre det på er følgende:
<html>
<!-- Hele framesættet i to rækker hvor den øverste indeholder Frame_a -->
<frameset rows="100px,*">
<frame src="frame_a.htm" />
<!-- I den anden række indsættes et framesæt med to kolonner, som indeholder Frame_b og Frame_c -->
<frameset cols="150px,*">
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset> <!-- Slut på kolonnerne -->
</frameset> <!-- Slut på rækkerne (hele framesættet) -->
</html>
Hvilket giver dette resultat:
Angivelser af størrelser
Som det kan ses, så er der anvendt 3 forskellige måder at angive størrelserne på:
- % angiver hvor mange procent rækken / kolonnen skal fylde af hele den viste størrelse
- px angiver hvor mange pixels rækken / kolonnen skal fylde
- * angiver at rækken / kolonnen skal fylde resten ud
Typisk vil man bruge procenterne, når man ønsker at fordele noget i forhold til hinanden - det kan være to tekstkolonner der skal vægte nogenlunde lige meget i forhold til hinanden.
Pixels vil man anvende til at styre bestemte størrelser, f.x. billeder (det kunne være et banner i toppen), eller en menu i siden, hvor man ønsker at den skal fylde en bestemt bredde ud, og at tekstindholdet skal udfylde resten af siden, evt. med en supplerende kolonne.
Framesæt på vej ud
En ulempe ved frame-sets er at W3 standarden angiver at koden er påvej ud - det er i hvert fald ikke understøttet af HTML5-standarden, så det er begrænset hvor længe browserne bliver ved med at understøtte koden.
Referencer
| Webdesign | |
|---|---|
| CSS | Placering - Egenskaber - Class - ID - Height - Width - Centrering - Margin - Border - Padding - Boksmodellen - Position - Text - Font - Farver - Backgruond - Table - List-style - Selectors - CSS3 - Media - Dropdown |
| HTML | <b> - <br> - <em> - <strong> - <i> - <cite> - <q> - <tt> - <code> - <samp> - <kbd> - <var> - <pre> - <sub> - <sup> - <h1> - <h6> - <p> - <br> - <li> - <ol> - <ul> - <a> - <a> på siden - <img> - <map> - <object> - <dd> - <dl> - <dt> - <hr> - <div> - <span> - <html> - HTML5 - <head> - <title> - <body> - <frame> - <frameset> - <iframe> - <style> - <table> - <td> - <tr> - <th> - <tbody> - <thead> - <tfoot> - <form> - <input> - <textarea> - <label> - <select> - <option> - Radio button - Checkbox - Dropdown - Input text - Input password - Submit knap - Billede - Embedding Youtube - Kommentarer - Omdirigere |