Responsive Webtemplates für KompoZer anpassen bzw. Alternative zu KompoZer

Antworten
daniel5959
Beiträge: 8
Registriert: Do 30. Jan 2020, 17:45
Kontaktdaten:

Responsive Webtemplates für KompoZer anpassen bzw. Alternative zu KompoZer

Beitrag von daniel5959 » Do 30. Jan 2020, 18:20

Hallo,

Inhalte meines Beitrages:

1) Anleitung A - resonsive Webtemplates ändern, damit sie im KompoZer benutzt werden können

2) Anleitung B - alte CSS-Vorlagen ändern, damit sie auf Smartphones nutzbar sein

3) Anleitung C - alte CSS-Vorlagen um das Hamburger Menü zu erweitern (als Ergänzung zu Anleitung B)

4) Programmvorstellungen - RocketCake, Mobirise (beides PC-Baukästen für responsive Webseiten) und BlueGriffon (KompoZer-Nachfoger)

5) Kostenlose responsive Webtemplates, z.B. für BlueGriffon oder mit Anpassungen (siehe Anleitung A) auch für KompoZer



Ich stand vor kurzen vor dem Problem, dass (kostenlose) responsives HTML5-/CSS3-Templates sich nicht mit KompoZer bearbeiten lassen, wenn man sie nicht unbrauchbar machen will.


________________ Anleitung A __________________

Neue HTML5-Befehle, die bei KompoZer zu Fehlern führen, siehe
neue strukturierende Elemente in HTML5

In HTML5 gibt es neue HTML-Befehle, um Bereiche einzuteilen. Was bisher immer mit <div> und einem Attribut gemacht wurde, kann nun direkt mit einem logischen HTML-TAG ausgezeichnet werden. Es gibt neue strukturierende Elemente – im Folgenden zur Übersicht alphabetisch aufgelistet:

Code: Alles auswählen

    <article>
    <aside>
    <dialog>
    <figure>
    <footer>
    <header>
    <nav>
    <section>
Quelle: https://www.html-seminar.de/html-5-stru ... emente.htm
Das bedeutet, dass man die neuen HTML-Befehle durch DIVs ersetzt.

CSS3-Dateien nicht mit der CSS-Funktion im Kompozer bearbeiten, sondern über "Öffnen" - Auswahl "Alle Dateien" - Doppelklick auf die CSS-Datei, wenn man @media-Angaben verwenden will.

Also werden die CSS- und die HTML-Datei des responsives HTML5-/CSS3-Templates mit einem Editor (und nicht mit KompoZer) bearbeitet, um später mit der HTML-Datei im KompoZer zu arbeiten.

Hier ein Beispiel für die Änderung des neuen HTML-Befehls header in ein normales DIV und die Anpassungen in der CSS-Datei:

HTML-Datei:

Code: Alles auswählen

<header>
...weitere HTML-Befehle ...
</header>
wird zu

Code: Alles auswählen

<div id="header">
...weitere HTML-Befehle ...
</div>
CSS-Datei:

Code: Alles auswählen

header { margin: 0 auto; padding: 0; background-color: #CC0000; }
wird zu

Code: Alles auswählen

div#header { margin: 0 auto; padding: 0; background-color: #CC0000; }
Hinweis: Diese Änderung so ähnlich auch bei allen anderen neuen HTML-Befehlen machen.

Im Prinzip ganz einfach, wenn man es weis.

Ich hoffe, dass ich damit den KompoZer-Usern helfen kann, damit sie die vielen responsiven Webtemplates aus dem Internet nutzen können.

Und für die KompoZer-User, die bei ihren alten CSS-Vorlagen bleiben wollen, gibt es die Quick-and-Dirty-Methode, um die Webseiten auch für Smartphones nutzbar zu machen - siehe


________________ Anleitung B __________________

1) In allen HTML-Dateien ...

a) ... im Head-Bereich - <head> ... </head> - diesen Code hinzufügen

Code: Alles auswählen

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
Evtl. noch folgenden Änderungen machen ...

b) ... feste Trennlinien _____________________ ändern in <hr>

c) ... bei Headergrafik die festen Größen - z.B. width="800" height="200" - ändern in width="100%" (height-Angabe weglassen)

2) In der CSS-Datei ...

a) ... die Wörter "width" ändern in "max-width"

b) ... evtl. einige der CSS-Angabe anpassen mit "@media screen and ..." für bestimmte minimale oder maximale Breiten

Nachtrag zu 2)b):

Nicht die CSS-Funktion von KompoZer verwenden, da hierbei offensichtlich @media-Angaben gelöscht werden.

Ich klicke im KompoZer auf "Öffnen" und wähle "Alle Dateien", dann doppelklicke auf die style.css, nun sehe ich den CSS-Code und da drinnen mache ich die Änderungen. Wenn ich dann auf "Speichern" klicke, wird das @Media übernommen und nicht gelöscht.

Hinweis: Die Punkte 1 und 2 basieren auf den Erfahrungen mit 2 Webseiten, die ich angepasst habe.


________________ Anleitung C __________________

Anleitungen für das Hamburger Menü gibt es viele im Internet, allerdings kam ich damit nicht zurecht - es wollte nicht klappen.

Hier eine einfache Version, die ich mir aus verschiedenen Quellen für meine Webseite zusammengestückelt habe und die bei anderen Usern evtl. angepasst werden muss.

HTML-Teil
(Anmerkung: Bei href="#" das # durch den Namen der HTML-Datei ersetzen)

Code: Alles auswählen

<div class="dropdown"><input id="checkbox_toggle" type="checkbox" />
<label for="checkbox_toggle" class="hamburger_icon">&nbsp;&#9776;&nbsp;</label>
<p class="menuhead">Navigation</p>
<ul>
  <li><a href="#">Seite 1</a></li>
  <li><a href="#">Seite 2</a></li>
  <li><a href="#">Seite 3</a></li>
  <li><a href="#">Seite 4</a></li>
</ul>
</div>
CSS-Teil

Code: Alles auswählen

/*----- Hamburger Menue -----*/

.hamburger_icon {
color:crimson;
background-color: gainsboro;
font-size: large;
}

.dropdown > input{
display: none;
}

label {
display:none;
}

@media screen and (max-width:480px) {

.menuhead {
display:none;
}

label {
display:inline;
}

.menu ul{
display: none;
}

input[type=checkbox]:checked ~ ul {
display: block
}

input[type=checkbox]:checked ~ .menuhead {
display: block
}

}

/*----- Ende Hamburger Menue -----*/
Es hängt von der Webseite ab, ob weitere Angaben mit @media screen in der CSS-Datei zu machen sind, das war bei mir der Fall.

Meine Webseite ist so aufgebaut:

[_____ Kopfbereich _____]

[ Menü ] [___ Inhalte ____]

[_____ Fußbereich ______]

Und der Inhaltsbereich wird mit kleiner werdenden Bildschirmbreite mit @media screen auch kleiner gemacht.


________________ Programmvorstellungen __________________

RocketCake - free responsive website editor >> https://www.ambiera.com/rocketcake/ (deutsche Programmoberfläche)

Mit RocketCake kann man ähnlich einem Baukasten responsive Webseiten erstellen, aber keine HTML-Dateien öffnen (nur Rocket-Dateien) und somit keine Webtemplates nutzen, aber es gibt im Programm bereits 15 Webtemplates, so dass nicht bei Null begonnen werden muss.

Man kann sich den HTML-Code anzeigen lassen, aber nicht bearbeiten. Es gibt eine "Professional Edition" für 39 Euro, hier können zusätzlicher HTML-Code im Header oder vor dem Header, zusätzliche Attribute im Body und zusätzliche CSS-Styles hinzugefügt werden. Und es gibt unten auf der Downloadseite auch eine 64-Bit-Version (Windows und MacOS) für große Projekte mit viele Fotos.

Ein ähnliches Programm wie RocketCake ist Mobirise >> https://mobirise.com/de/ (deutsche Programmoberfläche)

Der Nachfolger vom KompoZer ist BlueGriffon - http://bluegriffon.org/ (deutsche Programmoberfläche)


________________ Kostenlose responsive Webtemplates __________________

https://www.free-css.com/template-categories/responsive

https://html5up.net/

daniel5959 :)

Antworten