Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 18

Webseiten mit Stylesheets gestalten

Erstellt von a_2, 19.09.2006, 17:20 Uhr · 17 Antworten · 1.022 Aufrufe

  1. #1
    a_2
    Avatar von a_2

    Re: Die Trennung von Code und Design ... Fragen und Antworte

    Dreamweaver, GoLive und so weiter sind nette aber sehr nervenaufreibende Spielzeuge, wenn man nicht ungefähr weiss wie HTML funktioniert.
    Man kann zwar in HTML so gut wie alles layouten, nur muss man sich vorher genau überlegen wie man es mit den in HTML zur Verfügung stehenden Mitteln umsetzen kann.
    Denn jeder grafische Web Editior wandelt alles das was man am Bildschirm entwirft in HTML um.
    Wie gut und effizient er das tun kann, liegt immer auch mit am Konzept des Benutzers.

    HTML wurde grundsätzlich mal als Strukturierungssprache für Texte entwickelt.
    Die Möglichkeiten damit komplexe Layouts zu entwerfen hat HTML erst viel später bekommen.

    Mit den Grundelementen Überschrift, Absatz, Horizontale Linie, Bild und Tabelle kann man mit ein paar Tricks schon sehr ansehnliche Layouts erstellen.

    Mittels CSS kann man die HTML Grundelemente in weiten Bereichen umgestalten.
    Das Resultat des ganzen, ein durch HTML strukturierter und noch gut lesbarer Quelltext, der durch CSS Befehle dann schliesslich sein Layout bekommt.

    Beispiel: CSS Zengarden, nur mit HTML strukturiert

    Beispiel: CSS Zengarden zusätzlich mit CSS layoutet

  2.  
    Anzeige
  3. #2
    a_2
    Avatar von a_2

    Re: Die Trennung von Code und Design ... Fragen und Antworte

    Beispiel: Eine einfacher Text, strukturiert durch einfache HTML Befehle, allerdings noch ohne Layout.

    Code:
    <HTML>
    <HEAD>
    <TITLE>
    Lorem ipsum dolor sit amet  
    </TITLE>
    </HEAD>
    <BODY>
    <H1>
    Lorem ipsum dolor sit amet
    </H1>
    <H2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </H2>
    
    
    
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </P>
    
    
    
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </P>
    </BODY>
    </HTML>
    Was auf den ersten Blick recht verwirrend ausschaut erscheint nachdem man sich ein wenig mit den grundlegenden HTML Befehlen befasst hat schon etwas logischer und strukturierter.

    Der Inhalt einer Webseite befindet sich immer im Dokumentenkörper, dem sogenannten BODY.

    HTML Befehle werden durch spitze Klammern eingeschlossen, so kann der Browser die HTML Befehle vom eigentlichen Text unterscheiden.

    Hier mal eine Auflistung der im obigen Beispiel verwendeten HTML Befehle:

    H1 - Heading 1 - Größte Überschrift
    H2 - Heading 2 - Zweitgrößte Überschrift
    P - Paragraph - Absatz

    In einem Browser geöffnet wird aus dem Beispiel eine Text, der wie ein Zeitungsartikel ohne Bild strukturiert ist.
    Er besteht aus einer Überschrift, einem Kurztext und nachfolgend aus zwei Absätzen mit Text.



    Bisher noch ganz unspektakulär, aber das wird noch. Text, sprich Inhalt ist vorhanden, jetzt kommt das Layout dran.

  4. #3
    a_2
    Avatar von a_2

    Re: Die Trennung von Code und Design ... Fragen und Antworte

    Um Ralf nicht ins Thema zu pfuschen, werde ich mich mit meinen Ausführungen kurz halten.

    Hier noch mal der Quelltext der HTML Seite von vorhin. Nur habe ich diesmal einen Bereich für die Layoutgestaltung eingefügt, die sogenannten Styles.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
    <HTML>
    <HEAD>
    <TITLE>
    Lorem ipsum dolor sit amet 
    </TITLE>
    <STYLE TYPE="text/css">
    <!--
    /* Hier stehen später die Formate */
    -->
    </STYLE>
    </HEAD>
    <BODY>
    <H1>
    Lorem ipsum dolor sit amet
    </H1>
    <H2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </H2>
    
    
    
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </P>
    
    
    
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </P>
    </BODY>
    </HTML>
    In diesem Bereich des Dokuments werden wir durch die sogenannten Styles das Aussehen der einzelnen Bereiche des HTML Dokuments anpassen.

    Code:
    (...)
    <STYLE TYPE="text/css">
    <!--
    /* Hier stehen später die Formate */
    -->
    </STYLE>
    (...)
    Damit das ganze nicht unübersichtlich wird, werde ich den Rest des Dokuments erstmal weglassen und erstmal auf die sogenannten Style Definitionen eingehen.

    Was sind eigentlich Style Definitionen?

    Bisher wurde das Layout unseres Beispieldokuments durch die HTML Befehle bestimmt. Die Schriftarten, Schriftgrößen, Farben, usw. sind im Browser festgelegt, sodas wenn man keine grossen Ansprüche an das Layout stellt, einfach durch die Anwendung von HTML Befehlen schon ein strukturiertes Layout entsteht.

  5. #4
    a_2
    Avatar von a_2

    Re: Die Trennung von Code und Design ... Fragen und Antworte

    Als erstes gestalten wir die Überschrift und den Artikel Kurztext ein wenig anders.

    Die Schriftfamilie für die Überschrift und den Kurztext soll von einer Serifen Schriftart in eine Schriftart ohne Serifen geändert werden.

    (Serifen Schriften sind Schriftarten, die ein wenig mehr Abgerundet sind, wie z.B. die Schriftart "Times New Roman". Serifenlose Schriften wirken kantiger, wie Beispielsweise "Arial")

    Um das Layout entsprechend zu modifizieren, legen wir fest das die beiden Abschnitte in der Schriftfamilie (font-family) Serifenlos (sans-serif) dargestellt werden sollen.

    Code:
    (...)
    <STYLE TYPE="text/css">
    <!--
    h1 { font-family:sans-serif; }
    h2 { font-family:sans-serif; }
    -->
    </STYLE>
    (...)


    Wie auf dem Screenshot zu sehen hat sich die Schriftart der Überschrift und des Kurztexts geändert.

    Als nächstes soll der Kurztext etwas kleiner dargestellt werden als bisher. Die Schriftgröße (font-face) soll also kleiner (smaller) werden als bisher.

    Code:
    (...)
    <STYLE TYPE="text/css">
    <!--
    h1 { font-family:sans-serif; }
    h2 { font-family:sans-serif; 
         font-size: smaller }
    -->
    </STYLE>
    (...)

  6. #5
    a_2
    Avatar von a_2

    Re: Die Trennung von Code und Design ... Fragen und Antworte

    Um zum Beispiel die Überschrift ein wenig hervorzuheben, kann diese auch eingefärbt werden. In unserem Beispiel soll die Überschrift (h1) in der Farbe (color) rot (red) dargestellt werden.

    Zudem soll um die Lesbarkeit des Artikeltexts zu erhöhen, jeweils die erste Zeile eines Abschnitts (p) eingerückt (text-indent) werden.
    Der Wert um den der Text eingerückt werden soll

    Code:
    (...)
    <STYLE TYPE="text/css">
    <!--
    h1 { font-family:sans-serif;
         color:red; }
    
    h2 { font-family:sans-serif; 
         font-size: smaller; }
    
    p  { text-indent:1em; }
    -->
    </STYLE>
    (...)

  7. #6
    a_2
    Avatar von a_2

    Re: Die Trennung von Code und Design ... Fragen und Antworte

    Um jetzt den Fliesstext (p) der Artikelabsätze etwas ruhiger wirken zu lassen, soll dieser in Blocksatz (justify) ausgerichtet (text-align) werden.
    Zudem wird der Randabstand (margin) aller Inhalte des Dokuments (body) etwas größer eingestellt werden.

    Code:
    (...)
    <STYLE TYPE="text/css">
    <!--
    body { margin:3em; }
    
    h1   { font-family:sans-serif;
           color:red; }
    
    h2   { font-family:sans-serif; 
           font-size: smaller; }
    
    p    { text-indent:1em;
           text-align:justify }
    -->
    </STYLE>
    (...)

  8. #7
    a_2
    Avatar von a_2

    Re: Die Trennung von Code und Design ... Fragen und Antworte

    Durch das Festlegen der Styles, der einzelnen HTML Befehle haben wir bis auf die grundlegenden Strukturinformationen alle Layoutinformationen an einer Stelle im HTML Dokument zusammengefasst.
    Soll das aussehen eines Elementtyps geändert werden, so reicht es das jeweils zugehörige Style anzupassen.
    Des weiteren wird das Dokument einfacher les- und editierbar, da man beim ändern der Inhalte sich nicht um die Layout- und Formatierungsangeben kümmern muss.
    Eine Überschrift erscheint immer so, wie es vorher festgelegt wurde.
    Gleiches gilt für aller weiteren Elemente des HTML Dokuments.

    Besonders deutlich wird das, wenn man dem HTML Dokument einen weiteren Artikel hinzufügt.



    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
    <HTML>
    <HEAD>
    <TITLE>
    Lorem ipsum dolor sit amet 
    </TITLE>
    <STYLE TYPE="text/css">
    <!--
    body { margin:3em; }
    h1   { font-family:sans-serif;
           color:red; }
    h2   { font-family:sans-serif; 
    	   font-size: smaller; }
    p    { text-indent:1em;
           text-align:justify }
    -->
    </STYLE>
    </HEAD>
    <BODY>
    <H1>
    Artikel #1 - Lorem ipsum dolor sit amet
    </H1>
    <H2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </H2>
    
    
    
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </P>
    
    
    
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </P>
    <H1>
    Artikel #2 - Lorem ipsum dolor sit amet
    </H1>
    <H2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </H2>
    
    
    
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </P>
    
    
    
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </P>
    
    </BODY>
    </HTML>

  9. #8
    a_2
    Avatar von a_2

    Re: Die Trennung von Code und Design ... Fragen und Antworte

    Mehrspaltigen Text kann man durch den Einsatz von Tabellen erzeugen.
    Das Erzeugen von Tabellen in HTML ist etwas komplizierter, da zum erzeugen einer Tabelle mehrere HTML Befehle notwendig sind.

    Zuerst muss der Bereich festgelegt werden, der die Elemente der Tabelle enthält. Dieser wird durch den Befehl TABLE festgelegt.
    Danach werden die Zeilen der Tabelle durch den Befehl TR festgelegt, danach die einzelnen Zellen durch den Befehl TD.

    Code:
    <TABLE>
    
    <TR><TD>Zeile1,Zelle1</TD> <TD>Zeile1,Zelle2</TD></TR>
    <TR><TD>Zeile2,Zelle1</TD> <TD>Zeile2,Zelle2</TD></TR>
    
    </TABLE>
    Die oben aufgezeigten HTML Befehle erzeugen eine Tabelle mit zwei Zeilen, die jeweils zwei Zellen enthalten.



    Ein mittels einer Tabelle zweispaltig aufgebauter Artikel schaut dann wie folgt aus:



    Der HTML Quelltext dazu:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
    <HTML>
    <HEAD>
    <TITLE>
    Lorem ipsum dolor sit amet 
    </TITLE>
    <STYLE TYPE="text/css">
    <!--
    body { margin:3em; }
    h1   { font-family:sans-serif;
           color:red; }
    h2   { font-family:sans-serif; 
    	   font-size: smaller; }
    p    { text-indent:1em;
           text-align:justify }
    -->
    </STYLE>
    </HEAD>
    <BODY>
    <H1>
    Lorem ipsum dolor sit amet
    </H1>
    <H2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </H2>
    
    <TABLE>
    <TR>
    <TD>
    
    
    
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </P>
    
    
    
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </P>
    </TD>
    <TD>
    
    
    
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
    </P>
    
    
    
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </P>
    
    </TR>
    </TABLE>
    </BODY>
    </HTML>

  10. #9
    a_2
    Avatar von a_2

    Re: Die Trennung von Code und Design ... Fragen und Antworte

    Da HTML die Inhalte von Tabellen immer Horizental, sowie Vertikal zentriert, muss zunächst die Ausrichtung in den einzelenen Zellen (td) festgelegt (vertical-align) werden um wieder ein korrektes Layout zu erhalten.

    Code:
    (...)
    td   { vertical-align:top; }
    (...)
    Zudem darf eine Spalte, oder in diesem Fall eine Zelle (td) nicht breiter als 50% sein, damit beide Spalten gleich breit sind.

    Code:
    (...)
    td   { vertical-align:top;
           table-layout:fixed;
           width:50%; }
    (...)

  11. #10
    a_2
    Avatar von a_2

    Re: Die Trennung von Code und Design ... Fragen und Antworte

    Leider ist der Abstand zwischen den beiden Spalten jetzt zu gering als das ein problemloses lesen der beiden Spalten möglich wäre.
    Um mit möglichst geringem Aufwand den Abstand der beiden Spalten zu erhöhen kann der Abstand der Tabellen (padding) Zellen auf 1% eingestellt werden.

    Code:
    (...)
    td   { vertical-align:top;
           table-layout:fixed;
           width:50%; 
           padding:1%; }
    (...)
    Einen Nachteil hat diese Vorgehensweise allerdings, das Padding wirkt sich nicht nur auf den Abstand der beiden Spalten zueinander aus, sondern verschiebt auch die beiden äusseren Ränder der Spalten etwas nach innen.
    Somit ist auch der Anfang der linken Spalte um 1% der Zellenbreite gegenüber dem Artikelkurztext nach links verschoben.



    1% Versatz ist zwar sehr wenig, aber für mache Betrachter doch zu auffällig. Ein kleiner Trick umgeht das Problem.
    Da ein Versatz am linken Rand mehr auffällt, als beim rechten Rand, kann anstatt dem padding das padding-right verwendet werden. Somit haben alle Zellen nur an ihrer rechten Seite einen Randabstand.
    Auf den ersten Blick stimmt somit die Geometrie wieder.


Seite 1 von 2 12 LetzteLetzte

Ähnliche Themen

  1. Webseiten gehen nicht auf
    Von Tschaang-Frank im Forum Computer-Board
    Antworten: 44
    Letzter Beitrag: 12.04.08, 18:47
  2. Aufgefallen in den bekannten Webseiten
    Von wingman im Forum Ehe & Familie
    Antworten: 102
    Letzter Beitrag: 19.07.07, 20:03
  3. Langsame Webseiten ausThailand
    Von TwinLotus im Forum Treffpunkt
    Antworten: 5
    Letzter Beitrag: 02.01.07, 22:09
  4. Laden von Webseiten beschleunigen?
    Von Mith im Forum Computer-Board
    Antworten: 4
    Letzter Beitrag: 07.05.06, 01:57
  5. Handy-webseiten-bilder
    Von DisainaM im Forum Sonstiges
    Antworten: 2
    Letzter Beitrag: 21.06.02, 14:02