Webmaster Sweet-Swing.dk Websidens opbygning. Som eksempel er brugt siden om korets målsætning som den vises i editoren.

Transkript

1 Opbygning Som eksempel er brugt siden om korets målsætning som den vises i editoren. I editoren vises tabellinierne, selvom de på den færdige side i vores tilfælde er usynlige, bortset fra den sorte ramme omkring hele tabellen. Der er tale om en tabel med 3 rækker: Øverst en række med 3 celler med turkis baggrund, kaldet henholdsvis bannerleft, bannercenter og bannerright Nedenunder en række med kun én celle, med sort baggrund og hvid tekst, kaldet keywords Nederst en række med 3 celler, alle med hvid baggrund og sort tekst, kaldet henholdsvis bodyleft, bodycenter og bodyright Der er en lang række detaljer om tabellens og de enkelte cellers egenskaber, f.eks. Tabellens samlede bredde, kantliniens bredde og farve Cellernes baggrundsfarve, indrykning, centrering,.. webmaster-sidensopbygning-01, Sven Erik Iversen/hse@iversen.mail.dk 1

2 Teksterne - overskrifter, body tekst, menuknapper, keywords, opdateringsinfo,.. Samlet set danner alle disse elementer hele grundlaget for siden og for layout et! Elementerne kunne være lavet i html-regi, d.v.s. i selve hovedfilen for siden men de kan også ligge i en ekstern fil, såkaldt css-fil, som hovedfilen refererer til! Metoden med en css-fil er langt at foretrække først og fremmest, fordi man herved får en mulighed for at styre samtlige (måske 20) html-sider på én gang med hensyn layout, tekster, farver, alt muligt! Css betyder Cascading Style Sheet, eller på dansk Typografiark, fra tilsvarende grundtanke i typografibranchen. Man samler typografireglerne ét sted, så de ikke skal genopfindes hver gang. Ønsker man f.eks. en lyserød baggrundsfarve for banneret, en violet ramme om det hele, en anden skrifttype alle vegne o.s.v. er det hele gjort med ganske få ændringer ét sted! Til gengæld skal man tænke sig godt om, inden man retter lidt i css-filen med andre ord: Sørg for back up! Der er altså to filer i brug for hver webside: Hovedfilen html, og den tilknyttede css-fil! Sammenhængen fremgår af denne linie i html-filens head-section (Appendix 1): <LINK rel=stylesheet type=text/css href="sweetswing-01.css"> Her står, at der i hoveddokumentet (html) skal bruges alle de regler, der er fastlagt i den css-fil, der er refereret til! Dette link til css-filen står i samtlige html-filer! Til daglig behøver man overhovedet ikke at bekymre sig om indholdet i css-filen sålænge man er tilfreds med layout m.v. Almindelige opdateringer foregår nemt og smertefrit med editoren på nogenlunde sædvanlig vis lidt ligesom at udarbejde et worddokument eller lignende! Kun ved særlige ønsker/problemer skal man røre ved css-filen. Eksempelvis var den valgte skrifttype (Calibri) problematisk viste det sig efter et års tid! Den blev derfor erstattet af en anden skrifttype (arial/helvetica/sans-serif (prioriteret rækkefølge)) ved ganske få ændringer i css-filen. Uden en css-fil ville det have været et meget stort arbejde at lave denne ændring, fordi alle sider ellers skulle være skrevet om! En særlig brug af css på vores hjemmeside knytter sig til menuknapperne! De styres af css-filens afsnit om ul#navigation. webmaster-sidensopbygning-01, Sven Erik Iversen/hse@iversen.mail.dk 2

3 NB: Startsiden afviger en anelse fra de efterfølgende sider mht layout på grund af særlige layoutønsker. Afvigelserne er i størst muligt omfang lagt ind i css-filen med særlig reference til startsiden (indexsiden). Anvendelse af css-teknologi er nøje beskrevet i dette hæfte: Russ Weakly: CSS. Forlaget Libris, (findes også som e-bog) Den samlede programmering af websiden er vist i appendix 1 og 2, som viser udskrifter af henholdsvis html- og css-kodningen. Udskrifterne kan også bruges til at aflæse samspillet mellem de to kodninger. Sammenfatning Til almindelige opdateringer behøver man ikke at vide noget om html eller css! Editoren/composeren er let at gå til, og den danner selv html-siden uden at man ser den. Af og til er man alligevel nødt til at kende noget til html for at opnå det man vil (f.eks. at åbne et dokument i et nyt vindue uden at lukke det gamle). Css behøver man ikke at vide noget om, sålænge man ikke ønsker afgørende ændringer i layout et. For at forstå, hvordan det hele hænger sammen er man nødt til at kende både html og css. webmaster-sidensopbygning-01, Sven Erik Iversen/hse@iversen.mail.dk 3

4 Appendix 1. maalsaetning-01.html <HTML> <HEAD><TITLE>Sweet & Swing</TITLE> <META content=0 http-equiv=expires> <META name=author content="sweet & Swing"> <META name=description content="blandet, rytmisk kor i Ballerup. Stort repertoire indenfor jazz, pop, rock, musicals, etc."> <META name=keywords content="rytmisk kor, stiftet 1975, jazz, pop, rock, musicals."> <SCRIPT type=text/javascript> speak1=new Image(); speak1.src="images/56pixelshoejttaleranimatogtekst.png"; speak2=new Image(); speak2.src="images/64pixelshoejttaleranimatogtekst.png"; </SCRIPT> <LINK rel=stylesheet type=text/css href="sweetswing-01.css"> </HEAD> <BODY> <TABLE class=table1 align=center> <TBODY> <TR> <TD class=bannerleft valign=middle align=center> <P align=center><img src="/images/sogs100pixels.png"></p></td> <TD class=bannercenter valign=middle align=center> </TD> <TD class=bannerright align=center><a href="/klikoglyt-01.html"><img onmouseover=this.src=speak2.src onmouseout=this.src=speak1.src border=0 src="/images/56pixelshoejttaleranimatogtekst.png"></a> </TD></TR> <TR> <TD class=keywords valign=middle colspan=3 align=center> <P align=center>- jazz - pop - rock - musicals - jazz - pop - rock - musicals - jazz - pop - rock - musicals - jazz - pop - rock - musicals - jazz - pop -</P></TD></TR> <TR> <TD class=bodyleft valign=top align=center> <UL id=navigation> <DIV align=center></div> webmaster-sidensopbygning-01, Sven Erik Iversen/hse@iversen.mail.dk 4

5 <DIV></DIV> <DIV align=center> </DIV> <DIV align=center><a href="/index.html">forside</a></div> <DIV align=center><a href="/intro-01.html">intro</a></div> <DIV align=center></div> <A href="/organisation-01.html">organisation</a> <DIV></DIV> <DIV align=center><a href="/maalsaetning-01.html">målsætning</a></div> <DIV align=center><a href="/repertoire-01.html">repertoire</a></div> <DIV align=center><a href="/koncerter-01.html">koncerter</a></div> <DIV align=center><a href="/vitilbyder-01.html">vi tilbyder..</a></div> <DIV align=center><a href="/blivmedlem-01.html">bliv medlem</a></div> <DIV align=center><a href="/galleri-01.html">galleri</a></div> <DIV align=center><a href="/kontakt-01.html">kontakt</a></div> <DIV align=center> <DIV align=center><a href="/pass-01.html">intern</a></div></div> <DIV align=center> </DIV> <DIV align=center></div> <DIV> </DIV></LI></UL> <DIV> </DIV> </TD> <TD class=bodycenter valign=top align=left> <P align=left> </P> <H1 align=left>målsætning</h1><span style="font-weight: normal"> <P align=left><span style="font-weight: normal">sweet & Swing er et rytmisk amatørkor på øvet musikalsk niveau med et stærkt fællesskab både fagligt og socialt.</span></p> <P align=left><span style="font-weight: normal">vi synger for at udvikle os stemmemæssigt, rytmisk, repertoiremæssigt og musikalsk med henblik på at optræde ved et antal årlige koncerter.</span></p><span style="font-weight: normal"> <P align=left><br></p></span> <P></SPAN><SPAN style="font-weight: normal"><br> </P></SPAN></TD> webmaster-sidensopbygning-01, Sven Erik 5

6 <TD class=bodyright valign=top align=center> <P><IMG style="border-bottom: 0px;BORDER-LEFT: 0px;BORDER-TOP: 0px;BORDER-RIGHT: 0px" src="/images/nodegruppegr%c5.png" width=118 height=99></p> <H1 align=left> </H1></TD></TR></TBODY></TABLE></BODY> (P.S. Der mangler en slutkode </HEAD p.g.a. fejl i editoren. One.com er blevet gjort opmærksom på det, men siger, at det er uden betydning) webmaster-sidensopbygning-01, Sven Erik Iversen/hse@iversen.mail.dk 6

7 Appendix 2. sweetswing-01.css /*Kommentar*/ body background-color: #c5c9cc; table,td,tr border-collapse:collapse; img border-width: 0px;.table1 width: 1000px; border-width: 20px; border-color: black; border-style:solid; padding-bottom: 0px;.bannerleft width: 25%; padding-top:20px; padding-bottom:20px; padding-left:20px; padding-right:20px; background: #00cccc; text-align: center;.bannercenter width: 50%; background: #00cccc; webmaster-sidensopbygning-01, Sven Erik 7

8 text-align: center;.bannerright background: #00cccc; text-align: left; padding-left:67px;.keywords background: black; text-align:center; font-size: 18px; color: white;.bodyleft vertical-align:top; padding-top:0px; background: white; font-size: 10px; color: black;.bodycenter vertical-align:top; padding-top:0px; padding-left:20px; padding-right:20px; background: white; color: black; webmaster-sidensopbygning-01, Sven Erik 8

9 .bodycenterindexpage vertical-align:top; padding-top:0px; padding-left:0px; padding-right:0px; padding-bottom:0px; background: white; color: black; Webmaster Sweet-Swing.dk.bodyright vertical-align:top; background: white; color: black;.opdatering font-size: 10px;.bottom font-size: 12px; color:#00cccc; h1,h2 webmaster-sidensopbygning-01, Sven Erik 9

10 h1 font-size: 14pt; font-weight: bold; text-indent: 0px; H2 font-size: 12pt; font-weight: bold; p, td font-size: 11pt; a color: black; a:hover font-weight: bold; ul#navigation margin-left: 0; padding-left: 0; list-style-type:none; ul#navigation a display: block; background: #c5c9cc; font-size:11pt; color:black; padding:.2em.5em; webmaster-sidensopbygning-01, Sven Erik Iversen/hse@iversen.mail.dk 10

11 border-bottom: 1px solid #fff; width: 7em; ul#navigation a:hover background: #00cccc; color: #000; ul#navigation li display: inline; Webmaster Sweet-Swing.dk webmaster-sidensopbygning-01, Sven Erik 11