Ankündigung

Einklappen
Keine Ankündigung bisher.

CSS-Vorlagen responsive machen - Quick and Dirty

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • CSS-Vorlagen responsive machen - Quick and Dirty

    Hallo,

    CSS ist nicht mein Ding, also einfach CSS umschreiben, um die CSS_Vorlage responsiv zu machen, war nicht drin.

    Es gibt viele schöne, kostenlose und responsive Webtemplates (HP-Vorlagen) im Internet, also einfach eine aussuchen, aber mein Webeditor "KompoZer" ändert leider den HTML-Code so, dass die Webtemplates nach der Bearbeitung durch KompoZer nicht mehr richtig angezeigt werden.

    Was blieb war die einfache "Quick-and-Dirty"-Methode, die ich den anderen Usern nicht vorenthalten will. CSS-Profis können es evtl. noch verbessern.

    1) In allen HTML-Dateien ...

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

    HTML-Code:
    <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



    Die Punkte 1 und 2 basieren auf den Erfahrungen mit 2 Webseiten:

    - meine FindeLinks-Seite mit 1)a) sowie 2)a) und b)

    - testweise geänderte Webseite (Startseite) mit 1)a) sowie b) und c) wie auch 2)a) eines Niederländers zu "trekharmonica" (Ziehharmonika).

    Vielleicht sind diese Hinweise für den einen oder anderen User hilfreich.

    daniel5959


    FindeLinks.de - Kurzinfos mit Linkempfehlung
    Homepage-FAQs.de - bleibt als Archiv online

  • #2
    "nach der Bearbeitung durch KompoZer" - OMG, der ist ja komplett veraltet und wird längst nicht mehr gepflegt. Ich habe ihn vor gefühlten 30 Jahren verwendet und kann mich dunkel erinnern, dass er mit dem HTML und CSS machte was er wollte. Besser einen Editor verwenden, der auf der Höhe der Zeit ist, dann hat man solche Probleme nicht und muss es nicht "quick and dirty" gerade bügeln.

    Kommentar


    • #3
      Hallo,

      was gibt es an Webeditoren, die einfach und fehlerfrei vorhandene responsive Webtemplates bearbeiten können?

      Viele Webeditoren, die ich früher getestet habe, waren leider nicht so mein Ding - oder hatten "Macken".

      Bei KompoZer hatte ich freie Auswahl bei den fertigen CSS-Vorlagen - selber Designs erstellen nicht meine Sache.

      daniel5959
      Zuletzt geändert von daniel5959; 29.01.2020, 17:25.
      FindeLinks.de - Kurzinfos mit Linkempfehlung
      Homepage-FAQs.de - bleibt als Archiv online

      Kommentar


      • #4
        Zitat von daniel5959 Beitrag anzeigen
        Hallo,

        was gibt es an Webeditoren, die einfach und fehlerfrei vorhandene responsive Webtemplates bearbeiten können?

        Viele Webeditoren, die ich früher getestet habe, waren leider nicht so mein Ding - oder hatten "Macken".

        Bei KompoZer hatte ich freie Auswahl bei den fertigen CSS-Vorlagen - selber Designs erstellen nicht meine Sache.

        daniel5959
        Aptana Studio 3, Nusphere, Codelobster, So gut wie alle IDE können CSS Dateien aufmachen, ändern etc. Selbst sublime_text, notepad++ editieren ohne Probleme CSS
        https://arnego2.com <Webseiten, Umbau ab €80 und einiges mehr>

        VPS 8GB RAM 50 GB ROM < Server in der EU, 1rstes Jahr €37

        Kommentar


        • #5
          Hallo,

          wollte mal die 3 Programme testen:

          Aptana Studio 3 - Installation wurde unter Windows 10 mit einer Fehlermeldung während der Installation abgebrochen. Nusphere ist scheinbar ein reiner Code-Editor und kostenpflichtig, die Trial-Version (Download als EXE - 323 MB) für meine Zwecke wohl überdimensioniert. Codelobster (30-Tage-Testversion) ist wohl auch ein reiner Code-Editor mit Vorschau, bei der Installation sollte auch Microsoft Visual C++ 2015 installiert werden, was wegen Setup-Fehler nicht möglich war.

          Notepad++ habe ich, aber CSS-Dateien kann ich auch im KompoZer aufmachen und bearbeiten, ebenso in Wordpad oder Editor (beides Windows-Zubehör).

          Dann werde ich wohl vorerst beim KompoZer bleiben, der ist klein und startet schnell, er bietet bei HTML-Dateien 3 Ansichts- und Bearbeitungsmodi (WYSIWYG, Quelltext oder beide gleichzeitig) an.

          Die Quick-and-Dirty-Methode dürfte für Smartphone-User genügen, das Menü ist nutzbar, die Inhalte llesbar und es muss nur senkrecht gescrollt werden.

          daniel5959


          FindeLinks.de - Kurzinfos mit Linkempfehlung
          Homepage-FAQs.de - bleibt als Archiv online

          Kommentar


          • #6
            Nachtrag 1:

            Im "forum.kompozer-web.de" habe ich gelesen, dass CSS3 im HTML-Code entfernt wird und vermutlich auch weitere Codes, die damals noch unbekannt waren. Ich werde mir nochmal die responsive Webtemplates anschauen, vielleicht finde ich eine Lösung für KompoZer, damit ich auch die neuen responsive Webtemplates bearbeiten kann.

            Nachtrag 2:

            Vermutlich muss ich die neuen Elemente von HTML5 durch DIVs ersetzen, damit KompoZer sie nicht unbrauchbar macht.

            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:
            • <article>
            • <aside>
            • <dialog>
            • <figure>
            • <footer>
            • <header>
            • <nav>
            • <section>
            Quelle: https://www.html-seminar.de/html-5-s...e-elemente.htm
            Zuletzt geändert von daniel5959; 30.01.2020, 07:55.
            FindeLinks.de - Kurzinfos mit Linkempfehlung
            Homepage-FAQs.de - bleibt als Archiv online

            Kommentar


            • #7
              Nachtrag 3:

              Es hat geklappt und die neuen responsiven Webtemplates lassen sich jetzt auch mit KompoZer bearbeiten.

              Hier ein Beispiel für die Änderungen der neue HTML-Befehle in DIVs und die Anpassungen in der CSS-Datei:

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

              HTML-Code:
              <div id="header">
              ...weitere HTML-Befehle ...
              </div>
              und der entsprechende CSS-Teil

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

              HTML-Code:
              div#header { margin: 0 auto; padding: 0; background-color: #CC0000; }
              Im Prinzip ganz einfach, wenn man es weis.

              Ich hoffe, dass ich damit den KompoZer-Usern helfen kann, damit sie richtige responsive Webseiten mit den entsprechenden Webtemplates gestalten können. Und für die KompoZer-User, die bei ihren alten CSS-Vorlagen bleiben wollen, gibt es die Quick-and-Dirty-Methode.
              FindeLinks.de - Kurzinfos mit Linkempfehlung
              Homepage-FAQs.de - bleibt als Archiv online

              Kommentar


              • #8
                *kopfschüttel* In meinen Augen absolut verfehlt, die sinnvollen Neuerungen von HTML5 komplett zu ignorieren und in modernen Templates kaputt zu machen.
                "damit sie richtige responsive Webseiten mit den entsprechenden Webtemplates gestalten können." Das wichtigste wurde noch gar nicht angesprochen: Die besten Hilfsmittel für die Entwicklung von responsiven Layouts, die Stand der Technik sind, also Flex- und Grid-Layout, müssen außen vor bleiben, wenn man solch einen veralteten Editor verwendet. Ebenfalls absolut verfehlt.

                Selber benutze ich Visual-Studio-Code und bin sehr zufrieden damit.
                Zuletzt geändert von Sempervivum; 30.01.2020, 13:49.

                Kommentar


                • #9
                  Hallo,

                  "sinnvoll" ist relativ - für mich ist sinnvoll, wenn es mir nützt, aber ich bin lernfähig.

                  Kurze Zeit, nachdem das Flexbox-Modell die Runde gemacht hatte, erblickte mit CSS Grid das zweite neue Layoutmodell das Licht des Internets. Während Flexbox eher vergleichbar ist mit den lange sehr beliebten Float-Layouts, erinnert das Grid-Modell eher an die guten alten Tabellenlayouts.

                  Quelle: https://www.drweb.de/layouts-css-flexbox-grid/
                  Tabellenlayouts > Float-Layouts > Flexbox-Modell > Grid-Modell (erinnert ... an die guten alten Tabellenlayouts)

                  Scheinbar kann man einige Stufen auslassen und auf das übernächste Modell warten.

                  Die ganzen überladenen Editoren erspare ich mir - der kleine KompoZer bleibt weiterhin mein Favorit, um Seiten mit Inhalt zu füllen.

                  daniel5959
                  FindeLinks.de - Kurzinfos mit Linkempfehlung
                  Homepage-FAQs.de - bleibt als Archiv online

                  Kommentar


                  • #10
                    Wäre ja alles noch akzeptabel, wenn Du eine solche Vorgehensweise für dich im stillen Kämmerlein praktizieren würdest. Du postest das hier jedoch öffentlich und empfiehlst es anderen zur Anwendung. Es gibt sicher viele unerfahrene Benutzer in diesem Forum, die das noch nicht richtig bewerten und einschätzen können und in eine vollkommen falsche Richtung dirigiert werden. Das macht das Ganze sehr, vorsichtig ausgedrückt, fragwürdig.

                    Kommentar


                    • #11
                      Hallo,

                      habe den Linktipp von camouflage1984 bei forum.kompozer-web.de gefunden - siehe

                      RocketCake
                      free responsive website editor

                      >> https://www.ambiera.com/rocketcake/ (kostenlos, mit WYSIWYG-Modus, deutsche Programmoberfläche)

                      Werde ihn mal ausprobieren - vielleicht ersetzt er KompoZer, wenn ich damit gut klar komme.

                      Dann müsste ich auch die responsive Webtemplates nicht mehr umschreiben - @Sempervivum: Zufrieden?

                      Nachtrag:

                      Mit RocketCake kann man responsive Webseiten erstellen, aber keine HTML-Dateien öffnen und keine Webtemplates nutzen.

                      Um meine Webseite responsive zu machen, habe ich die Wahl zwischen Design selber erstellen oder meinen 2 "Notlösungen".

                      daniel5959
                      Zuletzt geändert von daniel5959; 30.01.2020, 21:52.
                      FindeLinks.de - Kurzinfos mit Linkempfehlung
                      Homepage-FAQs.de - bleibt als Archiv online

                      Kommentar


                      • #12
                        Letztes stabiles Release vom Juni 2019 - das ist ja immerhin ein gewisser Fortschritt.
                        Aber wenn man damit keine Templates und keine Quelltext bearbeiten kann, ist der Nutzen für dich natürlich stark eingeschränkt.
                        Es gibt auch leichtgewichtige Quellcode-Editoren: Selber benutze ich z. B. PSPad gelegentlich, wenn ich eine Datei "schnell mal eben" einsehen will.
                        Wahrscheinlich trifft das auch auf Notepad++ zu.

                        Kommentar


                        • #13
                          Hallo,

                          habe RocketCake noch nicht richtig getestet, aber es scheint so eine Art Baukasten für responsive Webseiten zu sein, bei dem man verschiedene Bausteine (darunter auch ein HTML-Element für eigenen HTML-Code), auf die Seite setzen kann und damit Stück für Stück die Seiten aufbaut.

                          Das Ganze wird dann im programmeigenen RocketCake-Format abgespeichert und bei nächsten Mal auch wieder in diesem Format geladen. Erst beim Hochladen auf den Webspace werden daraus (wie bei vielen Baukästen für den PC) erst HTML-, CSS- und die anderen Dateiformate generiert.

                          Ich habe es ja nicht eilig, meine FindeLinks-Seite ist durch die "Quick-and-Dirty"-Methode erstmal auch für Smartphones nutzbar.

                          Vielleicht findet sich ja noch ein Webeditor, der WYSIWYG- und Quelltextbearbeitung in einem Programm bietet, der übersichtlich und klein genug ist, um schnell zu starten. Schön wäre es, wenn er auch noch kostenlos ist.

                          daniel5959
                          FindeLinks.de - Kurzinfos mit Linkempfehlung
                          Homepage-FAQs.de - bleibt als Archiv online

                          Kommentar


                          • #14
                            Nachtrag zum Programm RocketCake:

                            Es können zwar keine fremdem responsive Webtemplates geladen werden, es sind aber 15 Webtemplates bereits im Programm verfügbar, so dass nicht unbedingt bei Null begonnen werden muss.

                            Es gibt englische Tutorials >> https://www.ambiera.com/rocketcake/tutorials.html - die einzelnen Texte kann man sich mit >> https://translate.google.de/ übersetzen lassen. Es ist mir aber nicht gelungen die ganze Tutorial-Seite von Google übersetzen zu lassen, also nur eine häppchenweise Übersetzung.

                            Man kann sich den HTML-Code anzeigen lassen, aber nicht bearbeiten.

                            Es gibt auch 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.

                            Auf der Download-Seite gibt es unten auch eine 64-Bit-Version (Windows und MacOS) für große Projekte mit viele Fotos.
                            FindeLinks.de - Kurzinfos mit Linkempfehlung
                            Homepage-FAQs.de - bleibt als Archiv online

                            Kommentar


                            • #15
                              Webseiten Builder haben ja Konjunktur, bis die Nutzer mitbekommen das es Grenzen gibt. Html5 ist nun wahrlich nicht so schwer. Es scheint jetzt schon schwer zu sein die Anfängerseiten von Professionellen Seiten im richtigen Verhältnis ranken zu lassen. Google hat es nicht leicht.
                              https://arnego2.com <Webseiten, Umbau ab €80 und einiges mehr>

                              VPS 8GB RAM 50 GB ROM < Server in der EU, 1rstes Jahr €37

                              Kommentar

                              homepage-forum.de - Hilfe für Webmaster! Statistiken

                              Einklappen

                              Themen: 56.688   Beiträge: 429.024   Mitglieder: 28.453   Aktive Mitglieder: 108
                              Willkommen an unser neuestes Mitglied, paul99.

                              Online-Benutzer

                              Einklappen

                              164 Benutzer sind jetzt online. Registrierte Benutzer: 3, Gäste: 161.

                              Mit 3.502 Benutzern waren am 23.01.2020 um 17:20 die meisten Benutzer gleichzeitig online.

                              Die neuesten Themen

                              Einklappen

                              Die neuesten Beiträge

                              Einklappen

                              Lädt...
                              X