Der Code unserer Startseite - Jugendparlament Oberaargau

Transcription

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50


das mit den Farben hat sich geändert:

Die Kommentare sind grau.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

53
<link href="adinterim/css/jpo.css" rel="stylesheet" type="text/css" />
54

55
56
<title>JPO aktuell</title>
57

58
59

64
65
<style type="text/css">
66
.auto-style1
67
{
68
color: blue;
69
}
70
</style>
71

72
</head>
73
<body>
74 <!-Was Du auf einer Internetseite lesen kannst, steht immer im Body der Seite.
75
Die Seitenstruktur wird durch div geschaffen. div ist ein Behälter. Der div "wrapper"
76
hält die ganze Seite zusammen. Innerhalb des div "wrapper" findest du den div "header".
77
In diesem Behälter befindet sich das JPO-Logo, ein Bild mit dem Namen JPO_temp.png.
78
Innergalb des div "header" hat es noch den div "menue". Schau selbst, was er beinhaltet.
79
Auf gleicher hierarchischer Ebene wie der div "header" sind die div "spalte01", "spalte02" und "footer"
80
(für eine eventuelle Fusszeile).
81
Das ergibt die Seitenstruktur:
82
83
<div id="wrapper">
84
<div id="header">
85
<div id="menue"></div>
86
</div>
Hier wird der div header wieder geschlossen
87
<div id="spalte01"></div>
88
<div id="spalte02"></div>
89
<div id="footer"></div>
90
</div>
Hier wird der div wrapper wieder geschlossen
91 -->
92
93
<div id="wrapper">
94
<div id="header">
95

96
<img alt="" height="122" width="375" src="templates/JPO_temp.png" />
97

98
<div id="menue">
99

100
<ul >
101
<li><span><a href="adinterim/formulare/kontaktformular_jpo/kontaktformular_jpo.php">Kontakt</a></span></li>
102
<li><span><a href="adinterim/mitglieder/index.html">Mitglieder</a></span></li>
103
<li><span><a href="adinterim/ausbildung/index.html">Ausbildung</a></span></li>
104
<li><span><a href="adinterim/fotoalbum/index.html">Bildergalerie</a></span></li>
105
<li><span><a href="adinterim/buecherbazar/index.php">Bücherbazar</a></span></li>
106
<li><span><a href="adinterim/iBlatt/iBlatt.html">iBlatt</a></span></li>
107
<li><span><a href="adinterim/ueberuns/ueberuns.html">Über uns</a></span></li>
108
<li><span><a href="adinterim/agenda/agenda.html">Agenda</a></span></li>
109
<li><span><a class="aktiv" href="#">Aktuell</a></span></li>
110
</ul>
111
</div>
112
</div>
113

114
<div id="spalte01">
115

116
<a href="adinterim/buecherbazar/index.php"><img alt="" height="535" src="images/buecherbazar/buecherbazar_original-transparent.png" width="400" /></a>
117
<h2>Neu: Bücherbazar auf jpo.ch</h2> 
<br /> 
<p class="lauftext">Gehst du im bzl zur Schule und brauchst Bücher für den Unterricht, wenn möglich billig?</p>
126
<p class="lauftext">Oder du hast gerade abgeschlossen und sitzt jetzt auf einem riesigen Berg Literatur, den du los werden willst?
127
Dann bist du auf diesen Seiten richtig!</p>
128
<p class="lauftext">Im  Bücherbazar wirst du jegliche Bücher finden, die am bzl benutzt werden. Oder du kann
st sie anbieten.
129
Den Preis für deine Bücher bestimmst du und die Übergabe führt ihr selbst durch. Aber diese Vermittlung sorgt dafür, dass sich zwei, die ein Bücherproblem haben, überhaupt
erst finden.</p>
130

131
<p class="lauftext"><strong>Den JPO-Bücherbazar findest Du
132
<a href="adinterim/buecherbazar/index.php">hier</a>.</strong></p>
133
<p class="lauftext"><strong>Hinweis:</strong> <em>Dieser Bücherbazar
134
ist eine unentgeltliche Dienstleistung des Jugendparlamentes
135
Oberaargau. Wir verlangen also keinerlei Vermittlungsgebühren.
136
Verantwortlich für den JPO-Bücherbazar ist Jan Tellenbach.</em></p>
137
138
</div>
139
<!-140
Der div mit der id spalte02 hat hier einige style-Attribute verpasst bekommen. Wenn man das so macht, wie hier gezeigt, ist das ein
141
Inline-Style. Egal, was im CSS-Stylesheet oder oben auf dieser Seite im Header als style definiert ist, diese style-Anweisungen werden überschreiben
142
durch die folgende, weil sie vom Browser als letzte gelesen wird.
143
Das macht man immer, wenn eine Ausnahme gemacht werden soll gegnüber dem Standard-Layout zum Beispiel, das im CSS-Stylesheet definiert ist.
144
Die Ausnahme hier ist, dass die linke Spalte (spalte02) nur auf der Start-Seite mit einem etwas dunkleren Hintergrund unterlegt wird.
145 -->
146
<div id="spalte02" style="width:190px; height:822px; background-image:url('templates/hintergrund_spalte02.png')">
147
148
<h3>Duell der Maulhelden</h3>
149
<p class="lauftext_spalte02">Sukeina berichtet über ihre Erlebnisse am Jugend 150
Debattiercup. </p>
151
<p class="lauftext_spalte02">Jan sinniert über Zersiedelung und Aicha kriegt ihr Handy nicht mehr los.</p>
152
153

154
<p class="lauftext_spalte02">In der neusten Ausgabe vom<strong class="auto-style1"> iBlatt</strong>.</p>
155
156

159
160
<p class="lauftext_spalte02" style="text-align:right"><a href="adinterim/iBlatt/iBlatt.html" ><strong>Weiterlesen>></strong></a></p>
161
162
<br />
163
<h3>Internet? Wir auch!</h3>
164
<p class="lauftext_spalte02">Wir wollen das Internet mitgestalten - und nicht nur konsumieren.
165
</p>
166
<p class="lauftext_spalte02">Jetzt büffeln wir HTML und CSS...</p>
167
<p class="lauftext_spalte02" style="text-align:right"><a href="adinterim/ausbildung/index.html"><b>Weiterlesen >></b></a></p>
168
<br />
169
<h3>Das bin ich. Oder so ähnlich...</h3>
170
<p class="lauftext_spalte02">Unsere Mitglieder stellen sich vor. Auf
171
Seiten, die sie selber gestaltet haben.</p>
172
<p class="lauftext_spalte02" style="text-align:right" ><a href="adinterim/mitglieder/index.html"><b>Weiterlesen >></b></a></p>
173
<br />
174
<h3>Zwischen Stuhl und Bank</h3>
175
<p class="lauftext_spalte02">An unserem nächsten Plenum (16. Mai
176
2013) reden wir über das Projekt <em>adinterim</em>.</p>
177
<p class="lauftext_spalte02" style="text-align:right"><a href="adinterim/agenda/agenda.html">
178
<b>Weiterlesen >></b></a></p>
179
</div>
180
<div id="footer">
181
<p class="footer">Letzte Revision 04.05.2013</p>
182
<p class="footer">Was es mit dem untenstehenden W3C-Siegel auf
183
sich hat, erfährst Du, wenn Du den Quelltext dieser Seite
184
studierst oder diesen <a href="adinterim/ausbildung/lektionen/musterseiten/startseite.pdf">hier</a> anschaust.</p>
185
<p class="footer"><img src="adinterim/img/w3C validation/valid-xhtml10.png" alt="Valid XHTML 1.0 Transitional" height="20" width="59"/></p>
186
187
</div>
188
</div> 
189
</body>
190 </html>
191
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/*###############
CSS-Stylesheet
##############
Du findest in diesem Stylesheet verschiedene Massangaben. Meistens sind es Pixel (px).
Manchmal kommt aber auch em vor. Em ist ein relatives Mass zur Standardschriftart des
jeweiligen Browsers. Da die meisten Browser eine Standardschriftart von 16px Höhe haben,
kann man sagen, dass 1 em 16 Pixeln entspricht.
1 em = 16px
Zum ersten Eintrag mit dem Stern:
Das mit dem Stern ist gewissermassen ein Joker.
Alle Style-Anweisungen innerhalb der gewschweiften Klammern (also von { bis } gleich unterhalb
des Stens gelten zunächst mal für alles, was im Browserfenster erscheint.
Da CSS sich an die Hierarchie von HTML anlehnt, bedeutet das, dass die Style-Angaben
des obersten Elements (und das ist beim Browser immer das Browserfenster) auch für
die hierarchisch untergeordneten Elemente gelten SOLANGE, WIE AUF DEN UNTEREN
EBENEN NICHTS NEUES DEFINIERT WIRD. In der Hierarchie kommt nach dem Browserfenster
alles unterhalb des <html>-Tags usw.
Diesen Joker setzt man üblicherweise, um das Browsereigene Stylesheet zu überschreiben.
Dass jeder Browser bereits ein Stylesheet integriert hat, siehst Du dann, wenn Du ohne
jegliche Style-Angaben (also auch ohne ein eigenes Style-Sheet) zum Beispiel ein Bild
auf deiner Internetseite darstellen lässt. Du wirst bemerken, dass es schmale Ränder
oben (top) und auf der linken Seite (margin-left) hat.
Diese Ränder wurden im Browsereigenen Style-Sheet definiert.
Deshalb überschreibt unser Joker hier vor allem Style-Anweisungen von Rändern. Wir wollen
sie jeweils von Fall zu Fall im Stylesheet neu festlegen.
BARRIEREFREIHEIT
Und wenn wir schon beim Grundsätzlichen sind: Wer sich mit seinem Webbrowser ein bisschen
auskennt, kann Stylesheets ausser Kraft setzten und eigene Stylesheets einsetzen.
Das ist für Menschen, die eine schwache Sehkraft haben sehr nützlich. Sie benutzen meistens
eigene Stylesheets, welche die Darstellung einer Internetseite so verändern, dass sie besser
lesbar sind (vor allem betrifft das natürlich die Grösse der Schriften).
Wir sind also beim Thema BARRIEREFREIHEIT im Internet. Eine Internetseite
sollte deshalb grundsätzlich so konzipiert werden, dass sie auch ohne CSS (Cascading StyleSheet)
ansprechend aussieht.
*/
*
{
border-style: none;
border-width: 0px;
C:\xampp\htdocs\jpo.ch\adinterim\css\jpo_Kommentiert.css: 1/8
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
margin: 0px;
padding: 0px;
color:black;
}
/*Dies nächsten Style-Attribute beeinflussen alle Elemente im <body>, ausser es wird weiter unten
etwas Neues definiert. CSS ist wie gesagt hierarchisch.
*/
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:0.8em;
}
/*Hier findest du das Rautezeichen. Es definiert eine Id für einen HTML-Tag. Der Name einer Id
darf auf einer Seite nur einmal vorkommen.
*/
div#wrapper
{
position:absolute;
height: 1150px;
width: 730px;
left: 50%;
margin: 0px 0px 0px -365px;
top: 0px;
background: url('../../templates/originale/Papier.jpg');
background-repeat:repeat-y;
}
div#header
{
float:left;
height:186px;
width:730px;
margin-top: 0px;
}
div#menue
{
font-family:Arial, Helvetica, sans-serif;
float:left;
width: 730px;
height:40px;
}
/*Beim nächsten Style-Block siehst Du, wie man Tags beeinflussen kann, die innerhalb (und damit hierarchisch auch unterhalb)
eines anderen Tags mit id liegen:
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
Man fügt nach dem div und seiner id einfach das element an, das beeinflusst werden soll: div#menue span
Die folgenden Style-Anweisungen beeinflussen also alle <span>-Elemente, die im div mit der
Id "menue" liegen, aber nicht <span> Elemente, die in anderen div liegen.
Das siehst du zum Beispiel bei den <span> Elementen im div "spalte02" auf der index-Seite der
Rubrik Ausbildung. Dort hat es ebenfalls Menue-Elemtente, die jedoch vertikal angeordner sind, während
die Menueelemente im div "menue" eine horizontale Anordnung haben.
Entscheidend ist hier das Attribut display mit dem Wert inline. Warum?
Du findest auf jeder Seite zuächst eine Liste mit den Links, wie sie
oben auf der Seite im Internet angezeigt werden (Aktuell, Agenda, Über uns, iBlatt usw.).
Hier ein Beispiel:
<li><span><a class="aktiv" href ="../agenda/agenda.html">Agenda</a></span></li>
(Wenn Du ganz clever bist, findest Du sogar heraus, welcher Seite ich dieses Beispiel entnommen habe...)
Die Links (<a> </a>) sind in Listenelemente eingebettet (<li> und </li>).
Diese Listenelemente wiederum sind eingebettet in einen <span> </span>.
Span ist ebenfalls ein Behälter oder Container, ähnlich wie ein div. Diese Einbettung in den <span> </span>-Container
sorgt zusammen mit der Anweisung display:inline; , dass eine Liste angezeigt wird, die horizontal
ihre Listenelemente anordnet und nicht (wie üblich) vertikal. Eine normale Liste sähe so aus:
- Aktuell
- Agenda
- Über uns
- iBlatt
Gleich in der übernächsten Style-Definition werden die einzelnen Listenelemente <li> angesprochen, welche im
div menue liegen. Also jene Listenelemente, die ich soeben erwähnt habe.
Dort siehst Du, dass auch der Typ der Liste definiert ist. Es heisst: list-style-type:none;
Das bedeutet, dass diese Liste auch keine Zeichen hat wie die Bindestriche (oben im Beispiel für eine Liste).
Listenelemente könnten auch einen Punkt am Anfang haben oder eine Nummerierung.
Das alles fällt hier weg und deshalb sieht man unserem Menue zuoberst auf der Seite gar nicht mehr an,
dass es eigentlich eine Liste ist.
Uff! Das geht ja ganz schön in die Details!*/
div#menue span
{
float:right;
display:inline;
padding: 0em 0em 0em 1em;
}
div#menue li
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
{
display: inline;
list-style-type: none;
}
div#menue a
{
display:inline;
font-size:14px;
font-weight:400;
text-decoration: none;
color:black;
}
div#menue a:hover
{
color: #0000FF;
}
div#menue a.aktiv
{
color:#0000FF;
font-weight:700;
}
div#spalte01
{
float: left;
width:540px;
height: 843px;
/* Bei den einzelnen Seiten wird die Höhe mit Inline-Style individuell angepasst.
Dies hier ist die Standard-Höhe, die durch Style-Anweisungen im <head>-Element einer Webseite
oder später durch sogenannt Inline-Styleanweisungen beim einzelnen Tag überschrieben werden.
Auch das ist gewissermassen eine Hierarchie der Befehle. */
color: black;
}
div#spalte02
{
float:left;
width:170px;
height: 822px;
}
div#footer
{
clear:both;
}
table#galerie{
border-width: 0px;
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
width:500px;
padding:5px;
}
table#galerie td{
width:125px;
}
/*Es folgen Style-Anweisungen für die Tabelle, die ausgegeben wird, wenn
die BenutzerInnen der Bücherbazar-Datenbank ihre Eingaben anschauen und
redigieren wollen. Die Markierung mit #### dient diesmal mir persönlich,
damit ich diese Angaben im Stylesheet rascher finde.
Interessant wäre im Detail, dass die einzelnen Zeilen der Tabelle einen
unterschiedlich gefärbten Hintergrund haben. Das macht die Tabellen leichter
lesbar.
Das bezieht sich auf die Anweisungen table#buecher tr.odd und
table#buecher tr.even. <tr> ist eine Tabellenzeile. Je nachdem die Tabellenzeile
eine "gerade" ist (also die zweite, vierte, sechste usw.) oder eine
"ungerade" (also die erste, dritte, fünfte usw.), wird eine andere Farbe
im Hexadezimal-Code (#FFFFCC) definiert. Solche Farbcodes kann man im Internet
nachschauen, die muss man nicht kennen oder auswendig wissen.
Und für FORTGESCHRITTENE (wohin fort auch diese schreiten mögen..):
Die Ausgabe der Tabellen auf den Internetseiten erfolgt
mit PHP. Ich kann jetzt nicht wissen, wieveiele Bücher in der Datenbank sind. Je
nachdem gibt es mehr Tabellenzeilen oder weniger.
Im PHP-Code auf der entsprechenden Seite wird festgelegt, dass PHP die Tabelle in
HTML dynamisch (also jedes Mal, wenn die Seite von einem User aufgerufen wird)
quasi à la minute herstellt. Ein Zeilenzähler sorgt dafür, dass die einzelnen
Spalten je nachdem ob gerade oder ungerade den entsprechenden Hinweis auf das
Stylesheet angehängt bekommen.
Der PHP-Code dazu sieht so aus:
if($rowcounter == 1)
{
echo "<tr class='even'>";
}
elseif($rowcounter == 2)
{
echo "<tr class='odd'>";
}
*/
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
/*#####################*/
table#buecher
{
font-size:0.85em;
width:680px;
margin-left:2em;
}
table#buecher th{
text-align:left;
height:40px;
}
/*Im nächsten Style-Block kommt etwa Neues:
Der <tr>-Tag (für Table row, also Tabellenzeile) hat einen Punkt und daran
anschliessend die Benennung odd.
Während das Rautezeichen # eine Id einleitet, definiert der Punkt einen
KLASSENNAMEN, den man fast jedem Tag verpassen kann. Anders als eine id darf
ein Klassenname mehrmals auf einer Seite vorkommen.
Im HTML-Code ist der Klassenname ein Attribut wie jedes andere auch. Ich zeige
dir ein Beispiel, das auf unseren Seiten oft vorkommt:
<p class="lauftext"></p>
Es handelt sich zunächst also um einen <p>-Tag (Absatz-Tag). Diesem wurde zusätzlich
der Klassenname "lauftext" zugewiesen. Hier in diesem Stylesheet findest Du gegen den
Schluss die Styleanweisungen für alle <p>-Tags der Klasse "lauftext", während die nächstfolgende
Styleanweisung alle <tr>-Tags betrifft, die in einer Tabelle vorkommen, der die id "buecher"
zugewiesen sind.
Klar, der Kopf muss schon bei der Sache sein, sonst wird es dir sturm. Arbeite also oft mit
Stylesheets und Du kannst Dir stundenlange Meditationen über das Hier und Jetzt sparen...
SOWEIT MEINE KOMMENTARE. DIE FOLGENDEN STYLEANWEISUNGEN SOLLTEST DU JETZT VERSTEHEN KÖNNEN.
*/
table#buecher tr.odd
{
background:#FFFFCC;
}
table#buecher tr.even
{
background:#FFCC99;
}
table#buecher td.buchtitel{
width:200px;
}
table#buecher td.autor{
width:200px;
}
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
table#buecher td.preis{
width:20px;
}
table#buecher td.bemerkungen{
width:200px;
}
table#buecher td.bestellnummer{
width:25px;
text-align:right;
color:red;
}
table#buecher td.freigegeben{
width:45px;
}
tr.hinweise{
font-size:small;
}
/*
###################
*/
ul.links
{
list-style:none;
}
ul.links li
{
height:1.5em;
}
input.buecher{
width:150px;
}
select{
background:#FFCC99;
}
p{
color:black;
}
p.rechte_spalte{
margin-bottom:0.5em;
}
p.lauftext
{
margin-bottom:1em;
margin-right:1.5em;
color: #000000;
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
}
p.lauftext_spalte02{
margin-bottom:1em;
}
p.agenda
{
}
p.footer{
text-align:center;
font-size:xx-small;
}
h2{
margin-right:1.5em;
}
h3{
margin-right:1.5em;
color:black;
}
h4
{
color:black;
}
h5{
margin-right:1.5em;
font-size:1.2em;
color:black;
}

Der Code unserer Startseite - Jugendparlament Oberaargau

Transcription

Similar documents

Wer profitiert von 64-Bit Computing?

Kurzportrait - Krebsinformationsdienst, Deutsches

Whitepaper zur Performance-Optimierung mit OXID

eAntrag-FAQs - eAntrag - Registrierung

Vorwort

Interessantes aus Deko, Zubehör und Technik

Unabhängige Zeitschrift der Gemeinde, des