beskrivning

En Minimalisisk Webbsida ”avancerad webbdesign”
Tabeller och Iframe metod
1
2
3 iframe
4
5
Bild 1
Om man bygger en index sida i Tabeller och med IFRAME, dvs. En ram i tabellen, man kan
dirigera – länka de övriga sidorna inom denna ram.
Beståndsdelar görs i både Photoshop och i FrontPage, men man måste även använda en
stränga dvs. en skript i Java som samordna länkarna med Iframe.
Metoden kräver att man anger ”exakta mått” på alla delar i webbsidan, och i tabellens celler.
Bild2.
FrontPage normalt läge
Här ser du
tabellformat
i Front Page
Cellerna innehåller
flera bilder och
Iframe
Tre bilder är tydliga
1. logon
2. Meny
3. dekorbild
Utöver dem
ser du även
tre nya bilder
Som skapar ett ram
runt om Iframe
streck linjer som är bilder som du kan forma i Photoshop
Metod Photoshop och Image Ready
DU kan även förbereda hela din webbsida via Photoshop
Det gäller att följa NOGA anvisningar om Verktyg Segment
Formge webbsidor med Photoshop och ImageReady
När du arbetar med webbsidor i Adobe Photoshop och Adobe ImageReady bör du tänka på
vilka verktyg och funktioner som är tillgängliga i respektive program.

Photoshop innehåller verktyg som du använder för att skapa och förändra statiska bilder
för webbsidor. Du kan dela upp en bild i segment, lägga till länkar och HTML-text,
optimera segmenten och spara bilden som en webbsida.

ImageReady innehåller också många av bildredigeringsverktygen i Photoshop.
Dessutom ingår verktyg och paletter som du använder för avancerad webbearbetning och för
att skapa dynamiska webbilder, t ex animeringar och rollovers.
När du sparar en bild för användning som en webbsida kan du välja att skapa en HTML-fil.
Den här filen innehåller information som informerar en webbläsare om vad som ska visas när
sidan hämtas. Den kan innehålla hänvisningar till bilder (i form av GIF-, PNG-, JPEG- och
WBMP-filer), HTML-text, länkinformation och JavaScript-kod för rollover-effekter.
Skapa och visa segment
Ett segment är ett rektangulärt område i en bild som du kan använda för att skapa länkar,
rollovers och animeringar på webbsidan. Genom att dela upp en bild i segment kan du
optimera den för webbvisning.
Skapa användarsegment
Du kan skapa användarsegment med segmentverktyget eller med hjälp av stödlinjer, och i
ImageReady med hjälp av en markering.
Så här skapar du ett segment med segmentverktyget:
1.
Markera segmentverktyget
. Alla befintliga segment visas automatiskt i
dokumentfönstret.
2.
Välj en stilinställning i alternativfältet.

Normal om du vill ange segmentets proportioner genom att dra.

Fastställda proportioner om du vill ange ett förhållande mellan höjd och bredd. Ange
heltal eller decimaltal för proportionerna. Om du t ex vill skapa ett segment som är dubbelt
så brett som högt anger du bredden 2 och höjden 1.

Fastställd storlek om du vill ange segmentets höjd och bredd. Ange pixelvärden i heltal.
3.
Dra med verktyget över det område där du vill skapa ett segment. Håll ned Skift medan
du drar om du vill att segmentet ska vara kvadratiskt. Håll ned Alt medan du drar om du vill
rita segmentet från mitten. Använd fästfunktionen om du vill justera ett nytt segment mot en
stödlinje eller ett annat segment i bilden.
Så här flyttar du ett användarsegment eller ändrar storlek på det:
1.
2.
Markera ett användarsegment. I ImageReady kan du markera och flytta flera segment.
Gör något av följande:

Om du vill flytta ett segment pekar du innanför segmentmarkerings ram och drar
segmentet till en ny plats. Håll ned Skift om du vill begränsa flyttningen till en lodrät, vågrät
eller 45° diagonal linje.

Om du vill ändra storlek på ett segment klickar du på ett sid- eller hörnhandtag på
segmentet, håller ned musknappen och drar segmentet till den önskade storleken. Om du
markerar och ändrar storlek på intilliggande segment i ImageReady ändras storleken på
gemensamma linjer för flera segment samtidigt.
4.
Så här skapar du ett segment av stödlinjer:
1.
2.
Lägga till stödlinjer till en bild.
Gör något av följande:

(Photoshop) Markera segmentverktyget och klicka på Segment från stödlinjer i
alternativfältet.

(ImageReady) Välj Segment > Skapa segment från stödlinjer.
När du skapar segment av stödlinjer tas alla befintliga segment bort.
Så här skapar du ett segment av en markering (ImageReady):
1.
2.
Markera en del av bilden.
Välj Markera > Skapa segment från markering.
ImageReady skapar ett användarsegment med utgångspunkt i markeringsramen.
Om markeringen är luddig täcker segmentet hela markeringen (inklusive de luddiga
kanterna). Om markeringen inte är rektangulär omfattar segmentet ett rektangulärt område
som är tillräckligt stort för att omge hela markeringen.
Läs mera via Hjälp i Photoshop 6
HTML källan till Index sidan
HTMLs kodnings metod
Om du vill använda traditionell HTML kodning kan du kopiera
den här.
MEN
Tänk på bilder, ersätt bildnamn med egna bilders namn och tänk på
bildernas format/dimensioner, tänk på cellerna i tabellen dess storlek och innehåll
I min kodning förekommer även JavaScript, det är inte livsviktigt, det går även utan, men
jag använder det i två tillfällen:
Skript 1 skyddar kodning från läsning (skript påverkar höger pekdons funktioner)
Skript 2 anpassar sidan till Webbläsaren (Explorer 4 eller nyare alternativ Netscape 6 eller nyare)
En viktig Tagg är <base target="namniframe"> den anger Var länkarna skall visas.
Target är mål för länken och dess placering i tabellen och fönster för Iframe
Den återanvänds för alla länkar
exempel:
<area href="historia_1.htm" target="namniframe " coords="1, 29, 123, 44"
shape="rect">
Betydelsen av koderna i denna tagg
<area href = ”htlm sidans namn” ange Area= ytan där href = refereras till länken för
webbsidan historia 1.htm = sidans namn skall visas och var target="namniframe
coords="1, 29, 123, 44" är placering enligt koordinater som väljer den rätta plats på
fönster IFRAME enligt pixelplacering på skärmen,
shape = formen för ytan = ”rect ”= rektangulärt .
Varför väljs olika koordinater på varje länk?
Det görs för att alla skall få en egen plats , annars de skulle hamna på
samma stället på skärmen och skapa enbart kaos och oordningen.
Det är som du skulle ringa på en porttelefon och alla knappar vore kopplade på
samma adress eller slumpmässig ,
<map name="FPMap0"> det är den hjälp du kan få av FrontPage
jag använder det på bilden meny som jag gjorde i Photoshop
bilden innehåller alla de knappar som jag behöver, i FrontPage läggs
klickbara områden för bilden, läs om detta i boken eller via FP hjälp
FrontPAge skapar länkar via bilden och en mapp = FPMap0
<base target="namniframe"> namniframe blir den du vill
jag kunde lika gärna kallat den ”nicoiframe” eller bara iframe, det viktiga är att
ange det alltid med samma benämning
KOD (kopiera eller skriv av)
<html>
<head>
<title>min iframes sida</title>
<meta http-equiv="Content-Type" content="text/html;">
<base target="namniframe">
</head>
<SCRIPT language=JavaScript>
// skyddar HTML källan från läsning
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=click
NS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
</SCRIPT>
<SCRIPT language=JavaScript1.2>
//Disable select-text script (IE4+, NS6+)- By Andy Scott
//Exclusive permission granted to Dynamic Drive to feature script
//Visit http://www.dynamicdrive.com for this script
function disableselect(e){
return false
}
function reEnable(){
return true
}
//if IE4+ Anpassa sidan för visning i Internt Explorer4,5,6
document.onselectstart=new Function ("return false")
//if NS6 Anpassa sidan för visning i Netscape 6+ nya versioner
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</SCRIPT>
<body topmargin="0">
<table width="849" border="0" align="center" cellpadding="0" cellspacing="0"
height="550">
<tr>
<td height="3" width="135"><img src="images_3/spacer.gif" width="134"
height="1" border="0" alt=""></td>
<td height="3" width="16"><img src="images_3/spacer.gif" width="9"
height="1" border="0" alt=""></td>
<td height="3" width="373"><img src="images_3/spacer.gif" width="101"
height="1" border="0" alt=""></td>
<td height="3" width="1"><img src="images_3/spacer.gif" width="77"
height="1" border="0" alt=""></td>
</tr>
<tr>
<td rowspan="2" height="35" width="135"><img border="0"
src="images_3/logo22.jpg" width="135" height="41"></td>
<td colspan="3" height="17" width="178"></td>
</tr>
<tr>
<td colspan="3" height="18" width="562"><img name="home_r2_c2"
src="images_3/home_r2_c2.gif" border="0" alt="" width="655"
height="17"></td>
</tr>
<tr>
<td rowspan="2" bordercolor="#FFFFCC" height="408" width="135"><map
name="FPMap0">
<area href="storia_1.htm" target="namniframe" coords="1, 29, 123, 44"
shape="rect">
<area href="kurser_1.htm" target="namniframe" coords="0, 45, 125, 57"
shape="rect">
<area href="gko_1.htm" target="namniframe" shape="rect" coords="0, 65,
124, 71">
<area href="webb_1.htm" target="namniframe" coords="7, 78, 123, 91"
shape="rect">
<area href="mum_1.htm" target="namniframe" coords="7, 97, 123, 106"
shape="rect">
<area href="flash_1.htm" target="namniframe" coords="0, 114, 123, 121"
shape="rect">
<area href="frontpage_1.htm" target="namniframe" coords="0, 126, 124, 138"
shape="rect">
<area href="php6_1.htm" target="namniframe" coords="0, 142, 125, 152"
shape="rect">
<area href="indesign_1.htm" target="namniframe" coords="1, 161, 120, 169"
shape="rect">
<area href="lektioner_1.htm" coords="2, 178, 121, 184" shape="rect">
<area href="kontakt_1.htm" target="namniframe" coords="3, 194, 123, 202"
shape="rect">
<area href="http://members.chello.se/freni" target="_blank" coords="7, 229,
119, 272" shape="rect"></map><img border="0"
src="images_3/home_r3a_c1.gif" usemap="#FPMap0" width="124"
height="381"></td>
<td height="396" width="16"><img name="home_r3_c2"
src="images_3/home_r3_c2.gif" border="0" alt="" width="11"
height="500"></td>
<td colspan="2" bordercolor="#FFFFCC" height="396" width="527">
<IFRAME id=namniframe name=namniframe marginWidth=0 marginHeight=0
src="main_1.htm" frameBorder=0 width=600 height=500><area shape="rect"
coords="8, 136, 133, 151" href="javascript:blog()"></IFRAME>
</td>
</tr>
<tr>
<td colspan="3" height="12" width="545"><img name="home_r4_c2"
src="images_3/home_r4_c2.gif" border="0" alt="" width="636"
height="15"></td>
</tr>
<tr>
<td colspan="3" height="86" width="528"><img border="0"
src="images_3/nicmac.jpg" width="375" height="81"></td>
</tr>
<tr>
<td colspan="4" height="18" width="682"><img border="0"
src="images_3/nedreb5.png" width="755" height="13"></td>
</tr>
</table>
  
</body>
</html>