Hier
meine Tipps für alle Fälle.
Ubuntu auf
USB-Stick kopieren und installieren.
Wie erstelle
ich einen USB-Bootstick für Linux –
speziell Ubuntu? Man könnte denken, dass
das eine wirklich einfache Sache ist und
innerhalb von ein paar Minuten erledigt
sein sollte. Ist es auch, kann es auch.
Ganz einfach geht das mit dem praktischen
Tool UNetbootin,
dass sowohl für Windows, als auch für
Linux verfügbar ist.
Schritt 1:
UNetbootin
herunterladen und starten. Unter Linux
muss die Datei noch ausführbar gemacht
werden. In der Konsole mit:"chmod
+x ./unetbootin-linux ", oder im Datei
Ordner mit der rechten Maustaste
anklicken
EIGENSCHAFTEN:BERECHTIGUNGEN:PROGRAMM:AUSFUEHRBAR
MACHEN
Schritt 2: Mit dem ersten
Schritt ist eigentlich schon das
komplizierteste erledigt. Anschließend
sieht man das Interface des Programms
und kann ganz einfach seine Distribution
seiner Wünsche herunterladen oder wählt
ein bereits heruntergeladenes ISO-Image
aus. Vorher sollte natürlich noch
ausreichend großer USB-Stick eingesteckt
werden, auf dem Ubuntu gespeichert
werden soll. Ein auf den USB-Stick
kopiertes Ubuntu ist sogar in der Lage
automatisch Dateien zwischen zwei
Reboots zu speichern, obwohl es sich im
Live-Modus befindet. Das kann besonders
praktisch werden, wenn Daten gerettet
werden sollen und derzeit kein weiteres
Speichermedium zur Verfügung steht.
Schritt 3:
Nachdem das
Ubuntu ISO-Image erfolgreich auf den
USB-Stick kopiert worden ist, genügt in
der Regel ein einfacher Neustart des
Computers und schon kann das
Betriebssystem installiert werden.
Sollte der Computer nicht automatisch
vom USB-Stick booten, dann muss noch die
Bootreihenfolge im Bios verändert
werden. Wie das geht, kann hier
nachgelesen werden.
Viel Spaß mit
deinem neuen Ubuntu.
Sprung-Links in der News-Box
Mit Sprung-Links sind hier sogenannte Anker-Links
gemeint. Denn diese verlinken nicht nur wie
üblich auf eine Seite, sondern springen dort
auch eine vorher festgelegte Position
innerhalb dieser Seite an. Man ist dann
sozusagen thematisch genau an der richtigen
Stelle. Die Weiter-Links in der News-Box
(sie führen auf die Seite "news.html" anbei)
haben wir ja bereits für Sie verlinkt. Wenn
Sie diese klicken, erkennen Sie, das jeweils
eine Sprungmarke gesetzt ist.
Das geht wie folgt:
An den Linkverweis wird einfach das
Raute-Zeichen (#) angehängt sowie ein
beliebiges Wort oder Textzeichen (hier bei
uns: #07nov).
<a href="news.html#07nov">Weiter...</a>
Sie können einen Anker innerhalb der selben Seite setzen oder auch in
einer anderen Seite so wie wir es hier bei
den Weiter-Links in der News-Box getan
haben. Innerhalb der anzuspringenden Seite
(news.html) wird dann wie folgt der Anker
gesetzt:
<a name="07nov"></a>
Und zwar genau dort im Quellext, wo das
Sprungziel sein soll.
Die Hintergrund-Grafik
Sie können hier die Hintergrundfarbe
(background-color) oder die
Hintergrundgrafik (background-image) ändern,
der Schatten beim Rahmen bleibt trotzdem
erhalten bzw. passt sich Ihrer gewählten
Hintergrundgrafik oder Ihrer gewählten
Hintergrundfarbe an. Wie geht das?
...Nun, so haben wir es angelegt: Der
Schatten-Rahmen besteht aus mehreren PNG-Grafiken,
welche transparent gesetzt wurden.
Zu ändern in der Datei format.css bei:
body
{margin-top:20px; margin-left: 0px;
margin-right: 0px;margin-bottom: 10px;
background-color: #477b98;
background-image : url(images/back.png);
background-repeat : repeat-y;
background-position : 50% 0%;
font-family:verdana,trebuchet ms, arial, helvetica,
georgia, "times new roman", sans-serif;
}
Die Kalenderblätter
Die Kalenderblätter finden Sie in der
News-Box sowie auf der Seite "news.html".
Wir haben hier für Sie eine Version ganz
ohne Grafiken ausgearbeitet, damit diese
leicht änderbar sind.
Zu ändern in der Datei kalender.css bei:
/* kalenderblatt*/
div.kalender {float:left;
border:1px solid #852D3B;
width:50px;
height:65px;
margin:0px 10px 0px 0px;;
text-align:center;
}
usw. bis ....
/* ende kalenderblatt*/
Die Unterseiten
Durch Kopieren können Sie beliebig viele
Seiten anlegen. Als Beispielseiten sehen Sie
ja unsere Seiten index.html, tipps.html und
news.html.
Sprung an den Seitenanfang
Links unten sehen Sie einen nach oben
gerichteten Doppelpfeil. Damit können Sie
immer an den Seitenanfang der jeweiligen
Seite springen. Wer es etwas versteckter
mag, löscht den darunterliegenden Text, der
da lautet: TOP.
Breite der Gesamt-Konstruktion
Zu ändern in der Datei format.css bei:
/* breite der gesamtkonstruktion*/
#breite {width:980px}
Für eine Prozentkonstruktion (Breite der
Seite in Prozent bezgl. der eingestellten
Monitor-Breite) schreiben Sie dort anstelle
der Pixelwerte (px) alternativ auch
beliebige Prozentwerte, z.B:
/*breite der gesamtkonstruktion*/
#breite {width:84%}
Egal ob Sie die Breite in Pixel oder Prozent
ändern, das Layout ist flexibel angelegt,
d.h. der Rahmen mit Schatten-Effekt passt
sich immer Ihrer Änderung an und wandert
mit.
Höhe des Inhaltsfeldes
Zu ändern in der Datei format.css bei:
#inhalt {height:1400px;}
Hinweis: Bei mehr Inhalt verlängert sich das
Inhaltsfeld sowieso automatisch. Die Höhe
läßt sich aber auch verstellen, wie oben
gezeigt, für den Fall, daß Sie sehr wenig
Inhalt haben.
Verbreitern der linken Spalte
Zu ändern in der Datei format.css bei:
/* breite der linken spalte
- hier beliebig andere px-werte */
.breite_hauptspalte_li {width:280px;}
Hinweis: Wenn Sie die Breite der linken Spalte verändern, sollten Sie
auch in der Datei menue.css bei den linken
Menüs die Breite (width) anpassen, damit die
Unterstriche der Buttons dort über die ganze
Breite gehen.
Inhaltsfeld-Formatierung
Die wesentlichen Anpassungen bezgl. des
Textes/Inhaltsfeldes, wie Schriftgrösse
(font-size), Zeilenhöhe (line-height),
Schriftart (font-family), Abstände zum Rand
hin (padding), Buchstabenabstand
(letter-spacing), Hintergrundfarbe
(background-color) bwz. Hintergrundgrafik
(background-image) sowie Höhe (height) des
Feldes finden Sie in der Datei "format.css"
bei
#inhalt {height:1400px;
background-color:#fff;
background-color: #dae2e7;
background-image : url(images/back_inhalt.png);
background-repeat : repeat-y;
background-position : 100% 0%;
text-align:justify;
vertical-align:top;
padding-top: 60px; padding-bottom: 0px;
padding-left: 30px;padding-right:26px;
width:100%;
font-size: 14px;line-height: 24px;
letter-spacing:1px;
color:#5C93B2;
border-left: solid 1px #fff;
}
Der Blocksatz
Der Text ist hier als Blocksatz gestaltet,
d. h. gleiche Ausrichtung der Buchstaben an
linker und rechter Kante des Textes. Wer das
nicht mag, ersetzt in der Datei "format.css"
bei #inhalt
den Wert text-align:justify durch
text-align:left.
Die Grafiken - so eingebaut ...
In den meisten unserer Vorlagen bauen wir
die Grafiken als Hintergrund-Grafiken
(background-image) ein. Das hat den großen
Vorteil, daß man über diese
Hintergrund-Grafik dann nicht nur Text legen
kann, wie z.B. den Homepagenamen oder die
Adresse sondern ggflls. noch weitere
Grafiken.
Das kann z.B. so ähnlich aussehen, hier als
"id-Befehl" mit dem Zeichen # im
CSS-Bereich und der Angabe
"id="beispielname" im HTML-Bereich.
#beispielname {
background-color:#fff;
background-image:url(images/beispielgrafik.jpg);
background-repeat:no-repeat;
background-position:100% 0%;
}
oder aber so ähnlich, nämlich
als "class-Befehl" mit dem
Punkt-Zeichen im CSS-Bereich und dem Befehl
"class="beispielname" im HTML-Bereich.
.beispielname {
background-color:#fff;
background-image:url(images/beispielgrafik.jpg);
background-repeat:no-repeat;
background-position:100% 0%;
}
Die "class-Angabe" lässt sich gleichzeitig für mehrere Objekte verwenden,
die "id-Angabe" nur für ein bestimmtes
Objekt innerhalb der Webseite. Das ist
eigentlich der wesentliche Unterschied.
Ansonsten ist der Quelltext ja nahezu
identisch.
Wichtiger für Sie zum Verständnis
sind vielmehr die folgenden Parameter:
1. background-image:url
(images/beispielgrafik.jpg)
= Name der Grafik, ggflls. vorangestellt der
Ordner-Name, hier bei uns "images".
2. background-position:100% 0%
= Ausrichtung der Hintergrund-Grafik in
horizontaler Richtung (von links nach
rechts) sowie in vertikaler Richtung (von
oben nach unten).
Die erste Angabe steht für horizontal, die
zweite Angabe für vertikal. Je nachdem an
welcher Stelle der Wert steht, gilt: Die
Angabe 0% bedeutet links oder oben. Die
Angabe 100% bedeutet rechts oder unten. Die
Angabe 50% 50% zentriert genau mittig in
beiden Richtungen.
In dem vorstehenden Beispiel (100% 0%) ist
die Grafik rechts (horizontal) und oben
(vertikal) ausgerichtet.
3. background-repeat:repeat
Dies ist der Befehl für die Wiederholung
(Kachelung) der Grafik.
Andere Parameter sind:
"no-repeat" = keine Wiederholung der Grafik.
"repeat-x" = Wiederholung der Grafik auf der
horizontalen Ebene.
"repeat-y" = Wiederholung der Grafik auf der
vertikalen Ebene.
4. background-color:#fff
Generell fügen wir eine Angabe der
Hintergrund-Farbe (background-color) immer
hinzu, obwohl in vielen Fällen die Angabe
der Hintergrund-Grafik (background-image)
ausreicht.
Denn immer dann, wenn der Inhalt eines
Objektes (z.B. einer Tabellenzelle oder
eines div-Bereiches) grösser ist als die
Grafik, greift die Hintergrundfarbe
zusätzlich.
* * * * * * *
Unsere drei Beispiel-Seiten:
* * * * * * *
|