Wird ein Codeschnipsel aus einer anderen Website übernommen, sei es aus dieser Website, sei es aus dem Weblica-Forum, oder z. B. aus Stackoverflow oder Alsacréations (siehe
Codeschnipsel Informationsquellen), so kann es nötig sein, den Code dem gewünschten Geltungsbereich anzupassen.
Hier werden drei Anpassungsmöglichkeiten und -bedarfe vorgestellt.
Klassennamen und Element-Ids (z. B.
#mainNavigation
) in CSS-Codeschnipseln müssen beim Einbau an die Klassennamen und Element-Ids des jeweiligen Weblica-Design-Layouts (z. B. Argon, Lithium usw.) angepasst werden.
Unterlässt man die Anpassung, funktioniert der Codeschnipsel nicht.
zurück | nach oben
Ressourcenfelder - das sind Referenzen auf Dateien in der Weblica-Dateiablage - müssen nach der Übernahme eines Codeschnipsels
immer angepasst werden.
In den Codeschnipseln sind Ressourcenfelder immer farblich markiert.
Das Einfügen von Ressourcenfeldern wird hier in
Einfügen von Datei-Referenzen in HTML-Code und in der
Weblica Online-Hilfe erklärt.
zurück | nach oben
Die BaBox-Website ist zu grossen Teilen eine Experimentier-Website.
Viele Codeschnipsel haben z. B. einen Bezug zu einen bestimmten Absatz, der korrigiert werden muss, wenn der Codeschnipsel für mehr als einen Absatz gelten soll.
Zwei Bespiele:
- einmal mit einem Bezug zu nur einem Absatz
- einmal mit der Anpassung einer Weblica-CSS-Klasse (
.textParagraph
).
Beim Einbau in eine andere Website muss der Codeschnipsel an den gewünschten
Geltungsbereich bzw. den passenden
Einbauort mit korrespondierendem Wirkungsbereich angepasst werden.
Soll der 'Abstand oben vor einem Absatz' für die gesamte Website gelten, baut man folgenden Code ins
globale CSS (Menüpunkt "Projekt") ein:
.textParagraph { margin-top: 16px; }
Soll der 'Abstand oben vor einem Absatz' für eine Seite und ihre untergeordneten Seiten gelten, baut man folgenden Code in die
Seiteneigenschaften, Rubrik "HTML/CSS" ein:
<style type="text/css">
.textParagraph { margin-top: 16px; }
</style>
Soll der 'Abstand oben vor einem Absatz' für einen bestimmten Absatz gelten, baut man folgenden Code in den
Seiteneigenschaften (Rubrik "HTML/CSS") der Seite ein, die den Absatz enthält:
<style type="text/css">
.pannn { margin-top: 16px; }
</style>
mit
nnn = der Nummer (Id) des betreffenden Absatzes.
Alternativ kann der Code mit der angepassten Absatznummer auch in einen
HTML-Absatz eingebaut werden (mehr dazu in
Merkmale der Einbauorte, Abschnitt E3):.
Nun nehmen wir an, im zweiten Beispiel sollen nicht nur ein Bild, sondern drei von fünf Bildern auf einer Seite mit einem einseitigen Rahmen versehen werden.
Hier gibt es zwei Anpassungsalternativen:
1. Erweiterung um die Paragraphen-Ids der beiden anderen Bilder-Absätze, Einbau in den
Seiteneigenschaften:
<style type="text/css">
#pa2590, #pa2593, #pa2598 { margin-left: 200px;
width: 200px;
border-bottom: 10px solid #ADBAC7;
padding-bottom: 12px; }
</style>
2. Definition einer
eigenen Klasse z. B. in den
Seiteneigenschaften der Seite mit den Bildern, Rubrik "HTML/CSS":
<style type="text/css">
.bildRahmenUnten { margin-left: 200px;
width: 200px;
border-bottom: 10px solid #ADBAC7;
padding-bottom: 12px; }
</style>
Dann wird jedem Absatz mit dem unten zu rahmenden Bild in den
Absatzeigenschaften, Rubrik "CSS/HTML", die
selbstdefinierte Klasse
bildRahmenUnten
(hier ohne Punkt)
zugewiesen.
Solche Änderungen des Wirkungsbereichs von Codeschnipseln nehmen wir vergleichsweise häufig vor.
Die Möglichkeiten, die Weblica bietet, sind unbegrenzt.
zurück | nach oben
Will man ein Seitenelement individuell gestalten, steht man vor der Wahl,
- eine eigene CSS-Klasse, z. B.
.infoBoxCs
, zu definieren, und diese Klasse dem oder den Textabsätzen in den Absatzeigenschaften zuzuweisen, oder
- den Absatz mit zwei HTML-Absätzen zu umschliessen, deren erster einen Bereich div (div = division = Bereich) mit style-Anweisungen enthält und deren zweiter den Bereich abschliesst.
Beispiel für die zweite Variante:
1. HTML-Absatz mit folgenden Inhalt:
<div style="color:red; font-size: 90%; text-align: center; padding: 20px; margin: 24px">
2. Textabsatz
3. HTML-Absatz, der den Bereich schliesst:
</div>
Welche Methode man anwendet, hängt davon ab, wie viele Elemente individuell gestaltet werden sollen.
Für das Beispiel der Infoboxen, die auf mehreren Seiten eingesetzt werden sollen, ist die erste Methode die beste.
Für die Formatierung von Elementen in HTML-Absätzen ist die zweite Methode die einzig mögliche, siehe z. B.
Button / Bild / Grafik mit Link an fixer Position.
Weitere Anwendungsbeispiele für die zweite Methode:
Schwebener Absatz,
Zweispaltiger Absatz.
Mehr zu Klassen und IDs bei
W3C Selectors (zu diesem Thema gibts auch hier später mehr).
zurück | nach oben