Seite 2 von 2 ErsteErste 12
Ergebnis 11 bis 18 von 18

Webseiten mit Stylesheets gestalten

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

  1. #11
    a_2
    Avatar von a_2

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

    Der Quellcode bisher:

    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; }
    
    td   { vertical-align:top;
           table-layout:fixed;
           width:50%; 
           padding-right:2%; }
    
    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>
    </TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>

  2.  
    Anzeige
  3. #12
    a_2
    Avatar von a_2

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

    Links sind wichtige Elemente von Internetseiten.

    In HTML werden Links wie folgt erstellt:

    Code:
    (...)
    Link Text
    (...)
    Bei der grafischen Gestaltung des Link Text auf Internetseiten hat es sich als Quasistandart durchgesetzt diese als unterstrichenen Text darzustellen.
    Grundsetzlich haben Links aber 3 Zustände, die getrennt voneinander gestaltet werden können.

    * Link im Text, bisher noch nicht angeklickt.
    * Link im Text, nicht angeklickt, der Mauszeiger befindet sich über dem Link.
    * Link wurde zuvor vom Benutzer schon angeklickt, bezeihungsweise die Verlinkte Seite wurde schon vom Benutzer aufgerufen.

    Die folgenden Styles bestimmen das Aussehen für alle drei oben genannten Fälle.

    Code:
    (...)
    a         { color: red; }
    a:link    { text-decoration:none; }
    a:visited { text-decoration:line-through; }
    a:hover   { text-decoration:underline; }
    a:active  { text-decoration:underline; }
    (...)
    In der ersten Zeile wird generell Rot als Textfarbe für Links (a) festgelegt.

    In der nächsten Zeile wird das Aussehen für Links (a:link) im Text festgelegt. Links sind hier abweichend vom Standart nicht unterstrichen (text-decoration:none).

    Sobald der Benutzer mit der Maus über den Link fährt (a:hover), wird dieser unterstrichen dargestellt (text-decoration:underline), ebenso wenn der Benutzer den Link anklickt (a:active).

    Wurde die verlickte Seite vom Benutzer bereits aufgerufen (a:visited), so wird der Link durchgestrichen dargestellt (text-decoration:line-through).


  4. #13
    a_2
    Avatar von a_2

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

    Neben den grundlegenden Strukturierungselementen, wie Überschriften und Absätzen und den Links, sind Bilder wichtige Elemente einer Webseite.

    Ein Bild kann über den folgenden HTML Befehl in ein HTML Dokument eingebunden werden:

    Code:
    (...)
    [img]Bilddatei[/img]
    (...)
    Auch Bildelemente können über Styles Layoutet werden. Zwar kann deren Inhalt nicht über die Styles verändert werden, aber deren Position und der Bildausschnitt können über die Styles festgelegt werden.

    Code:
    (...)
    img       { margin-left:-1em; }
    (...)
    Damit das Bild mit dem linken Rand der Spalte abschliesst, muss das Bild ein wenig nach links verschoben werden.


  5. #14
    a_2
    Avatar von a_2

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

    Zusammengefasst, das HTML Dokument in diesem Beispiel wurde nur mit einigen wenigen HTML Befehlen erstellt.

    * H1 - Grosse Überschrift
    * H2 - Zweitgrößte Überschrift
    * P - Absatz
    * TABLE, TR, TD - Erstellen einer Tabelle
    * A - Link
    * IMG - Bild einfügen

    Diese HTML Befehle reichen aus um einen Text zu strukturieren, Links und Bilder einzufügen.

    Die Gestaltung der Webseite wurde durch Stylesheets bestimmt.

    Mit Hilfe der Stylesheets kann das Aussehen, sowie die Positionierung von Elementen bestimmt werden.

    Durch die Verwendung von Stylesheets wurde der Inhalt nahezu komplett vom Inhalt des Dokuments getrennt.
    Lediglich die Strukturierungselemente sind noch im Text vorhanden.
    Durch die Trennung von Text und Layout wird der Inhalt der Webseite leichter zu überabeiten und Änderungen im Layout können schnell und vor allem durchgängig umgesetzt werden.
    Weiterhin besteht die Möglichkeit die Styles in eine seperate Datei auf dem Server auszulagern und nur durch einen Hinweis in jeder HTML Datei auf die Styles zu verweisen.
    Der grosse Vorteil dieses Vorgehens liegt darin, das nu diese Datei geändert werden muss um das Layout in allen verbunden Seiten zu ändern.

    Mehr Informationen zu Stylesheets Link: Selfhtml - Stylesheets (CSS)

    Mehr Informationen zu HTML Link: Selfhtml - HTML

    Sorry für den Thread Spam....

  6. #15
    a_2
    Avatar von a_2

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

    Abschliessend der Quelltext der Beispielseite

    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; }
    img       { margin-left:-1em; }
    td        { vertical-align:top;
                table-layout:fixed;
                width:50%; 
                padding-right:2%; }
    h1        { font-family:sans-serif;
                color:red; }
    h2        { font-family:sans-serif; 
    	        font-size: smaller; }
    p         { text-indent:1em;
                text-align:justify }
    a         { color: red; }
    a:link    { text-decoration:none; }
    a:visited { text-decoration:line-through; }
    a:hover   { text-decoration:underline; }
    a:active  { text-decoration:underline; }
    a:focus   { text-decoration:blink; }
    -->
    </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>
    
    
    
    [img]picture.jpg[/img]
    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>
    Link: Mehr Informationen
    </TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>

  7. #16
    Avatar von HPollmeier

    Registriert seit
    27.08.2003
    Beiträge
    1.959

    Re: Webseiten mit Stylesheets gestalten

    Und zum Text eine schoene mundartliche Erlaeuterung:

    http://ksh.wikipedia.org/wiki/Blindtex

  8. #17
    a_2
    Avatar von a_2

    Re: Webseiten mit Stylesheets gestalten

    Super Link! Jetzt habe ich endlich einen Inhalt für meine Homepage!

  9. #18
    Avatar von HPollmeier

    Registriert seit
    27.08.2003
    Beiträge
    1.959

    Re: Webseiten mit Stylesheets gestalten

    ... written by Cicero in 45 BC

Seite 2 von 2 ErsteErste 12

Ä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