Responsive Navigation und Webseite mit Kompozer

Antworten
camouflage1984
Beiträge: 347
Registriert: Di 19. Aug 2014, 14:34

Responsive Navigation und Webseite mit Kompozer

Beitrag von camouflage1984 » Sa 18. Mai 2019, 04:58

Ich habe mich immer gefragt ob eine Responsive Navigation und Webseite mit Kompozer möglich ist, dies kann ich mit Ja beantworten!

Zwei Punkte gibt es die mit Kompozer nicht realisierbar sind, das sind die Responsive Web Design - Media Queries und ein HTML5 Grundgerüst, diese werden mit Bluefish oder Notepat++ erstellt!
Während Kompozer das HTML5 Grungerüst nicht verändert, würde es die Media Queries .css beim bearbeiten ändern! Warum? Weil Kompozer nur css2 beherrscht und alles was er nicht kennt gelöscht wird! Ergo darf man diese .css Datei nicht in Kompozer bearbeiten!

Ich habe eine "Komplette" Responsive Webseite mit Navigation, Bildern und div-Containern erstellt die wirklich Responsive ist!!!
Die eingesetzten Bilder werden automatisch proportional verkleinert, damit diese sich jedem Gerät(device) anpassen können, genauso werden die div-Container und Navigation angepasst!
Die Navigation wird über Javascript bis zu einer Breite von 600px Mobile freundlich angezeigt, das könnt Ihr hier selbst sehen wenn Ihr das Browserfenster verkleinert!

In dem .zip das ich hier zum Download anbiete sind folgende Seiten und .css Dateien enthalten:
  • Bilder im Ordner bilder
  • navi.css und device.css im Ordner css
  • index.html
  • kontakt.html
  • ueber-uns.html
  • neuigkeiten.html
  • .htaccess
Du darfst nicht die device.css mit Kompozer bearbeiten, sonnst wird der Komplette Inhalt beim Speichern gelöscht!
Die .htaccess Datei bewirkt das auch in HTML Dateien nach PHP durchsucht werden, das ist notwendig damit das Kontaktformular funktioniert!

Das Kontaktformular ist einsatzfähig, du musst nur deine Mail-Adresse eintragen wo der Inhalt des Kontaktformulars hin-geschickt werden soll!
Die Mail-Adresse kannst du in Kompozer eintragen, mit doppelklick auf das erste Symbol PHP öffnet sich ein Dialog, dort scrollst du so weit herunter bis du das hier

Code: Alles auswählen

//Hier trägst du deine e-mail adresse ein
   mail ( "<----------------->", 
siehst, und trägst dort deine Mail-Adresse ein!

Bitte bedenke das durch die neue DSVGO es notwendig ist noch einen Text unter das Formular zu setzen! Hier kannst du Nachlesen was genau gebraucht wird!

Alles was zum Download angeboten wird unter https://creativecommons.org/licenses/by-sa/4.0/deed.de Lizenz weitergeben, Diese Lizenz erlaubt es anderen, ein Werk zu verbreiten, zu remixen, zu verbessern und darauf aufzubauen, auch kommerziell, solange camouflage1984 als Urheber des Originals genannt wird und die auf diesem Werk basierenden neuen Werke unter denselben Bedingungen veröffentlicht werden.

Ich wünsche euch gutes gelingen mit meiner Webseiten Vorlage!

Camouflage1984
Dateianhänge
responsive-webseite.zip
(16.9 KiB) 105-mal heruntergeladen
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-webdesign

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

Re: Responsive Navigation und Webseite mit Kompozer

Beitrag von daniel5959 » Di 4. Feb 2020, 06:18

Hallo,

ich habe Media Queries mit KompoZer in meine CSS-Datei eingefügt - keine Probleme, sie werden nicht geändert oder gelöscht, siehe Beispiel

Code: Alles auswählen

#right {
float:right;
max-width:760px;
}

@media screen and (max-width:640px) {
#right { max-width:420px; }
}
Hinweis: Das @media für #right muss nach #right kommen, damit es die Einstellung überschreiben kann.

Die neuen HTML5-Befehle

Code: Alles auswählen

<header> ... </header> (nicht verwechseln mit <head>!)
<nav> ... </nav>
<section> ... </section>
<article> ... </article>
<aside> ... </aside>
<footer> ... </footer>
werden bei KompoZer zwar nicht gelöscht, aber der Inhalt, der sich dazwischen befindet, deshalb stattdessen DIVs nutzen.

Siehe auch meinen Forenbeitrag >> https://forum.kompozer-web.de/viewtopic.php?f=12&t=311

daniel5959 :)

camouflage1984
Beiträge: 347
Registriert: Di 19. Aug 2014, 14:34

Re: Responsive Navigation und Webseite mit Kompozer

Beitrag von camouflage1984 » Di 4. Feb 2020, 07:38

Hallo daniel5959,

danke für deine Beiträge!

Ich habe das ausprobiert mit den Media Queries und deiner Beschreibung.
Solange Ich an der css Datei nichts verändert habe wird auch nichts gelöscht, sobald Ich aber in dieser css Datei eine neue Klasse mit KomPozer einfüge und diese abspeichere werden die Media Queries gelöscht!

Ich verwende 0.8b3

camouflage1984
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-webdesign

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

Re: Responsive Navigation und Webseite mit Kompozer

Beitrag von daniel5959 » Di 4. Feb 2020, 18:00

Hallo,

habe die gleiche Version von KompoZer.

Ich verwende nicht die CSS-Funktion von KompoZer, da meine style.css von einer CSS-Vorlage stammt, vielleicht liegt es daran.

Ich klicke 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.

daniel5959 :)

camouflage1984
Beiträge: 347
Registriert: Di 19. Aug 2014, 14:34

Re: Responsive Navigation und Webseite mit Kompozer

Beitrag von camouflage1984 » Di 4. Feb 2020, 20:49

Hallo daniel5959,
daniel5959 hat geschrieben:
Di 4. Feb 2020, 18:00
Ich klicke 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.
So funktioniert das auch, das hast leider nicht dabei geschrieben ;)


camouflage1984
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-webdesign

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

Re: Responsive Navigation und Webseite mit Kompozer

Beitrag von daniel5959 » Di 4. Feb 2020, 23:13

Hallo camouflage1984,

sorry - habe schon lange keine Tutorials für Einsteiger mehr geschrieben, damals habe ich meine Anleitungen immer wieder um noch detailiertere Angaben erweitert, damit möglichst auch der letzte User sie umsetzen konnte. Diese Zeit war von 2003 bis 2012.

Meinen anderen Forenbeitrag habe ich um den betreffenden Hinweis erweitert und die Nachträge wieder ans Ende des Forenbetrags gesetzt.

Vorerst bleibe ich bei meiner alten CSS-Vorlage, bei deren CSS-Datei ich die "width" in "max-width" geändert und einige @media-Angaben hinzugefügt habe, damit sie auch auf Handys und Smartphones genutzt werden können. Javascript nutze ich dabei nicht.

Tutorials möchte ich nur noch ausnahmsweise erstellen und auch mit der Forenhilfe will ich es nicht übertreiben - 9 Jahre x 365 Tage x mehrere Stunden pro Tag und etwa 1000 kleinere und größere Anleitungen auf meiner FAQs-Seite (seit 2012 im Archivmodius) plus Forenhilfe in x Foren dürften auch reichen.

Jetzt lasse ich Andere schreiben und sammle Links, versehen mit einer kleinen Beschreibung, auf meiner neuen Webseite, privat und werbefrei.

daniel5959 :)

camouflage1984
Beiträge: 347
Registriert: Di 19. Aug 2014, 14:34

Re: Responsive Navigation und Webseite mit Kompozer

Beitrag von camouflage1984 » Mi 5. Feb 2020, 06:42

Hallo daniel5959,

daniel5959 hat geschrieben:
Di 4. Feb 2020, 23:13
Jetzt lasse ich Andere schreiben und sammle Links, versehen mit einer kleinen Beschreibung, auf meiner neuen Webseite, privat und werbefrei.
da hast du aber einiges an Arbeit investiert in deine alte und neue Webseite :o

Ich freue mich das du den Weg zu uns ins Forum gefunden hast!

auf einige neue Tut´s bin ich trotzdem gespannt ;)

camouflage1984
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-webdesign

Antworten