Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

HTML und CSS Kurs (Fortsetzung) by ojp13483

VIEWS: 50 PAGES: 29

									                                          e   e
Agenda Grundelemente(2) DIVs Redundanzen R´sum´




                  HTML und CSS Kurs (Fortsetzung)

                                    Christoph Neumann
                                                              u
                        Student der Informatik, FAU Erlangen-N¨rnberg


                   Seminar Fit@Webdesign, THA Gummersbach,
                             17.-19. September 2004




                               Christoph Neumann   HTML und CSS Kurs (Fortsetzung)   1/29
                                          e   e
Agenda Grundelemente(2) DIVs Redundanzen R´sum´

Agenda

   1    Grundelemente(2)
          Wiederholung des ersten Teils
          Listen
          ¨
          Ubung
          Tabellen
          ¨
          Ubung
   2    Strukturierung
          DIV
                u
          CSS f¨r Fortgeschrittene
           ¨
          Ubung
   3    Redundanzen Vermeiden
          Editor Side Includes
          includeHTML
          ¨
          Ubung

                               Christoph Neumann   HTML und CSS Kurs (Fortsetzung)   2/29
Agenda Grundelemente(2) DIVs Redundanzen R´sum´
                                          e   e                        ¨              ¨
                                                   Wiederholung Listen Ubung Tabellen Ubung

Wiederholung des ersten Teils

    Im ersten Teil des Seminars haben wir kennengelernt:
       1                         u
           Doctype und Grundger¨st
       2            ¨
           Text und Uberschriften
       3   Bilder
       4                   u
           CSS – erste Einf¨hrung
       5   Links and Anchors
       6   HTML-Kit – Installation und erste Schritte
    Was fehlt?
         a
    Als n¨chstes kommen Listen und Tabellen.
    Dann DIVs und mehr CSS zur Strukturierung der Seite, z.B. f¨r
                                                               u
    Navigationsleisten.
    Ausserdem Tools (→ includeHTML) zur zentralen Speicherung von
    redundanten Inhalten, wie Header, Footer und NavBar.

                               Christoph Neumann   HTML und CSS Kurs (Fortsetzung)            3/29
Agenda Grundelemente(2) DIVs Redundanzen R´sum´
                                          e   e                        ¨              ¨
                                                   Wiederholung Listen Ubung Tabellen Ubung

Listen



    In jeder Textverarbeitung gibt es zwei Sorten von Listen:
               a
           Aufz¨hlungsliste – <ul>-Tag (engl. “unordered list”)
           Nummerierte Liste – <ol>-Tag (engl. “ordered list”)
                             a
    Die einzelnen Listeneintr¨ge sind innerhalb der ul/ol-Tags durch
    das <li>-Tag ausgezeichnet.
                                                     a
    Jenachdem in welcher Listenumgebung die Eintr¨ge stehen,
                                    u           o
    bekommen sie entweder einen f¨hrenden “B¨mmel” (ul), oder eine
    inkrementell aufsteigende Nummer (ol).




                               Christoph Neumann   HTML und CSS Kurs (Fortsetzung)            4/29
Agenda Grundelemente(2) DIVs Redundanzen R´sum´
                                          e   e                         ¨              ¨
                                                    Wiederholung Listen Ubung Tabellen Ubung

Bsp. “Unordered List”



    <u l>
                < l i >Hund</ l i >
                < l i >K a t z e</ l i >
    </ u l>


            a
    Anzeige ¨hnlich wie hier durch LTEX simuliert:
                                   A



            Hund
            Katze




                                Christoph Neumann   HTML und CSS Kurs (Fortsetzung)            5/29
Agenda Grundelemente(2) DIVs Redundanzen R´sum´
                                          e   e                         ¨              ¨
                                                    Wiederholung Listen Ubung Tabellen Ubung

Bsp. “Ordered List”



    < o l>
                < l i >Hund</ l i >
                < l i >K a t z e</ l i >
    </ o l>


            a
    Anzeige ¨hnlich wie hier durch LTEX simuliert:
                                   A


       1     Hund
       2     Katze




                                Christoph Neumann   HTML und CSS Kurs (Fortsetzung)            6/29
Agenda Grundelemente(2) DIVs Redundanzen R´sum´
                                          e   e                        ¨              ¨
                                                   Wiederholung Listen Ubung Tabellen Ubung

Verschachtelte Listen

    Unter verschachtelten Listen verstehen wir einfach Listen
                                                           u
    unterschiedlicher Ebene, die sich meist durch ihre Einr¨ckung
    unterscheiden.
    Hier wieder eine LTEX-
                      A   “Simulation” als Beispiel:

       1   Hund
              1   Jagt Katzen
              2   ...
       2   Katze
              1   ...


    Mix ist erlaubt
    Wie aus Textverarbeitungen bekannt, lassen sich UL und OL Listen
    beliebig mischen!

                               Christoph Neumann   HTML und CSS Kurs (Fortsetzung)            7/29
Agenda Grundelemente(2) DIVs Redundanzen R´sum´
                                          e   e                             ¨              ¨
                                                        Wiederholung Listen Ubung Tabellen Ubung

Verschachtelte Listen in HTML

    < o l>
                < l i >Hund
                           < o l>
                                          < l i >J a g t K a tz e n</ l i >
                                          < l i > . . . </ l i >
                              </ o l>
                </ l i >
                < l i >K a t z e
                              < o l>< l i > . . . </ l i ></ o l>
                </ l i >
    </ o l>


    Attention Please!
    Man beachte, dass das LI-Tags die “eingeschachtelten” Listen
          a
    vollst¨ndig umschließen! Direkt unterhalb eines OL/UL-Tags
     u
    d¨rfen ausschließlich LI-Tags stehen!


                                Christoph Neumann       HTML und CSS Kurs (Fortsetzung)            8/29
Agenda Grundelemente(2) DIVs Redundanzen R´sum´
                                          e   e                        ¨              ¨
                                                   Wiederholung Listen Ubung Tabellen Ubung

¨
Ubung WYSIWYG – Nvu

           Spass machen tut die Eingabe von Listen nur mit
           WYSIWYG-Programmen wie Nvu. Dort hat man die ubliche ¨
                          u
           Eingabeunterst¨zung – es lassen sich geschachtelte Listen
           verschiedener Tiefe uber Tab (und Shift-Tab) sehr leicht
                               ¨
           eingeben.
                              , a                            ,
          Installation: “Next” w¨hle “I accept the agreement” “Next”,
          “Next”, “Next”, “Next” und “Install” ... “Finish”
          Erster Start: “Close” (Tip of the Day). Dann: “Edit”
          “Preferences...” && “General” “When Saving or Publishing
          Pages”: “retain original source formatting”

           Nvu erleichtert auch die Eingabe von normalen Paragraphen
               ¨
           und Uberschriften!


                               Christoph Neumann   HTML und CSS Kurs (Fortsetzung)            9/29
Agenda Grundelemente(2) DIVs Redundanzen R´sum´
                                          e   e                        ¨              ¨
                                                   Wiederholung Listen Ubung Tabellen Ubung

¨
Ubung WYSIWYG – Nvu – Achtung


                                                    u         o
           Besonders bei chaotisch wiederholtem Einf¨gen und L¨schen
                                                o
           von Zeilenwechseln und Paragraphen k¨nnen sich bei Nvu im
                                 u                        a
           HTML-Quelltext uberfl¨ssige Tag-Fragmente anh¨ufen.
                           ¨
                                          a
           Ausserdem wird in der Regel w¨hrend der Eingabe von
           verschachtelten Listen, gegen die “ausschließlich LI-Tags
           unterhalb von UL/OL”   -Regel verstoßen!
           ⇒ L¨sung:
              o
                            u a                  u a
            1 Dinge durch “R¨ckg¨ngig” (StrG-Z) r¨ckg¨ngig machen,

                               o
              und nicht durch L¨schen+Neuschreiben.
            2 Mindestens vor dem Speichern:

              “Tools” “Markup cleaner” “Clean up” aufrufen!!



                               Christoph Neumann   HTML und CSS Kurs (Fortsetzung)            10/29
Agenda Grundelemente(2) DIVs Redundanzen R´sum´
                                          e   e                        ¨              ¨
                                                   Wiederholung Listen Ubung Tabellen Ubung

¨
Ubung CSS – TopStyle




           Die Eingabe von CSS kann von einem Programm wie TopStyle
           durch Auto-Completion ungemein vereinfacht werden
           (StrG-Space, wie in Programmierumgebungen ublich).
                                                      ¨
                               ,     ,      ,
           Installation: “Next” “Yes” “Next” “Next” ... “Finish”
                             .       a                        :
           Erster Start: “OK” Dann: w¨hle im “Style Inspector” “CSS
           Level 2”




                               Christoph Neumann   HTML und CSS Kurs (Fortsetzung)            11/29
Agenda Grundelemente(2) DIVs Redundanzen R´sum´
                                          e   e                                     ¨              ¨
                                                                Wiederholung Listen Ubung Tabellen Ubung

¨
Ubung CSS – Beispiele



     ul {
                  l i s t −s t y l e −t y p e : s q u a r e ;
     }

     u l ul , o l u l {
                l i s t −s t y l e −t y p e : d i s c ;
     }

     ol {
                  l i s t −s t y l e −t y p e : uppe r −roman ;
     }




                                   Christoph Neumann            HTML und CSS Kurs (Fortsetzung)            12/29
Agenda Grundelemente(2) DIVs Redundanzen R´sum´
                                          e   e                          ¨              ¨
                                                     Wiederholung Listen Ubung Tabellen Ubung

Tabellen

    < t a b l e>
       < t r>
           <t d>P e r s o n a l i n f o r m a t i o n</ t d>
       </ t r>
       < t r>
           <t d>Name</ t d>
           <t d>C h r i s t o p h P e t e r Neumann</ t d>
       </ t r>
    </ t a b l e>


       1   Das Basis Tag nennt sich <table>
       2                                                 ,
           Es werden zuerst die Reihen (engl. “table row” tr) angegeben.
       3   Spalten werden nicht angegeben. Stattdessen werden pro
           Reihe mehrere Datenfelder (             ,
                                       “table data” td) angegeben, die
                                                     u
           implizit zu einer gewissen Spaltenanzahl f¨hren.


                               Christoph Neumann     HTML und CSS Kurs (Fortsetzung)            13/29
Agenda Grundelemente(2) DIVs Redundanzen R´sum´
                                          e   e                                 ¨              ¨
                                                            Wiederholung Listen Ubung Tabellen Ubung

Tabellen(2)

    < t a b l e b o r d e r= ’ 0 ’ c e l l s p a c i n g= ’ 0 ’ c e l l p a d d i n g= ’ 0 ’
        summary=”E u r o p e a n C u r r i c u l u m V i t a e ”>
       < t r>
           <t d c l a s s=”h e a d i n g 3 ”>P e r s o n a l i n f o r m a t i o n</ t d>
       </ t r>
       < t r>
           <t d c l a s s=” l e f t H a l f ”>
               <u l>< l i >Name</ l i ></ u l>
               </ t d>
           <t d>C h r i s t o p h P e t e r Neumann</ t d>
       </ t r>
    </ t a b l e>


       1   Eine “blinde Tabelle” (ohne Gitternetzlinien)
       2   Auch Listen, oder Bilder et al., sind als Inhalt erlaubt.
       3   Zwei Datenfelder sind auf CSS-Formatierung vorbereitet!


                                   Christoph Neumann        HTML und CSS Kurs (Fortsetzung)            14/29
Agenda Grundelemente(2) DIVs Redundanzen R´sum´
                                          e   e                        ¨              ¨
                                                   Wiederholung Listen Ubung Tabellen Ubung

¨
Ubung


          Nvu bietet einen sehr gelungenen Mechanismus um Tabellen
          graphisch anzulegen und zu erweitern:
          “Table” “Insert” “Table...”

                    u
       Aber auch f¨r HTML-Kit gibt es ein
       sehr gutes Plug-In, das die Erstellung
       von Tabellen sehr erleichtert:
       hkTableStarter.
       Nach der Installation
       (“Tools” “Install” “Install
       Plugin...”), findet man es unter
       “Actions” “Tables”
       “hkTableStarter”.


                               Christoph Neumann   HTML und CSS Kurs (Fortsetzung)            15/29
Agenda Grundelemente(2) DIVs Redundanzen R´sum´
                                          e   e                    u                   ¨
                                                          DIV CSS f¨r Fortgeschrittene Ubung

Das DIV Tag

    Das <div>-Tag erlaubt rechteckige Bereiche zu definieren. Diese
    dienen dazu spezielle Inhalte zu kapseln:
       <body>
         <d i v i d=”h e a d e r ”>
         </ d i v>

          <d i v i d=”n a v b a r C o n t a i n e r H a c k ”>
            <d i v i d=”n a v b a r C o n t a i n e r ”>
            </ d i v>
          </ d i v>

          <d i v i d=”c o n t e n t ”>
          </ d i v>

         <d i v i d=” f o o t e r ”>
         </ d i v>
       </ body>




                                 Christoph Neumann        HTML und CSS Kurs (Fortsetzung)      16/29
Agenda Grundelemente(2) DIVs Redundanzen R´sum´
                                          e   e                   u                   ¨
                                                         DIV CSS f¨r Fortgeschrittene Ubung

DIV(2)



     u
    F¨r DIVs gibt es praktisch immer durch CSS eine Definition, die
      o
    Gr¨ße, Position und Ausrichtungsverhalten der DIVs bestimmen.
    Bsp.:
    #h e a d e r {
                     background−c o l o r : t r a n s p a r e n t ;
                     margin: 0;
                     p a d d i n g : 10 px 0 px ;
                     w i d t h : 100%;
                     h e i g h t : 50 px ;
                     position: absolute ;
     }




                                   Christoph Neumann     HTML und CSS Kurs (Fortsetzung)      17/29
Agenda Grundelemente(2) DIVs Redundanzen R´sum´
                                          e   e             u                   ¨
                                                   DIV CSS f¨r Fortgeschrittene Ubung

DIV(3)




    Offline Information
                                                   u
    Eine genaue Diskussion der CSS-Definitionen f¨r die DIVs findet
    ausserhalb der Folien, auf Basis der Bsp.-Seiten statt!




                               Christoph Neumann   HTML und CSS Kurs (Fortsetzung)      18/29
Agenda Grundelemente(2) DIVs Redundanzen R´sum´
                                          e   e                u                   ¨
                                                      DIV CSS f¨r Fortgeschrittene Ubung

     u
CSS f¨r Fortgeschrittene

                           u
    Durch CSS kann man f¨r verschiedene Ausgabemedien die
    Anzeigeeigenschaften einstellen.
    Die w3c hat verschiedene Medientypen definiert. Das wichtigste
    (und mit das einzige, dass im Moment schon von Browsern
    zus¨tzlich verstanden wird) ist der Typ “print” Es bestimmt die
       a                                           .
    Druckansicht, wenn man die HTML-Seite aus dem Browser heraus
    druckt.
     @media p r i n t {
             body {
                  c o l o r : Black ;
                  b a c k g r o u n d − c o l o r : White ;
                  p a d d i n g : 0em 0em 0em 0em ;
             }
     }




                                Christoph Neumann     HTML und CSS Kurs (Fortsetzung)      19/29
Agenda Grundelemente(2) DIVs Redundanzen R´sum´
                                          e   e                 u                   ¨
                                                       DIV CSS f¨r Fortgeschrittene Ubung

     u
CSS f¨r Fortgeschrittene(2)

    Man kann auch die Ausgabe/Ausdruck von Elementen, wie z.B.
    Hilfs-DIVs (Header, Footer, NavBar), durch eine “display: none;”
                                u
    Anweisung komplett unterdr¨cken.
     @media p r i n t {
     body {
                  c o l o r : Black ;
                  b a c k g r o u n d − c o l o r : White ;
                  p a d d i n g : 0em 0em 0em 0em ;
     }
     h1 , h2 , h3 , h4 , h5 , h6 { c o l o r : B l a c k ; }
     a : l i n k { c o l o r : Black ; }

    #h e a d e r { d i s p l a y : none ; }
    . n a v b a r { d i s p l a y : none ; }
    #c o n t e n t { p a d d i n g : 0 0 0 0 ; }
    #f o o t e r { d i s p l a y : none ; }
    }




                                Christoph Neumann      HTML und CSS Kurs (Fortsetzung)      20/29
Agenda Grundelemente(2) DIVs Redundanzen R´sum´
                                          e   e             u                   ¨
                                                   DIV CSS f¨r Fortgeschrittene Ubung

¨
Ubung




    Vorschlag
           o          a
    Eine M¨glichkeit w¨re an dieser Stelle die beispielhaften
    CSS-Definitionen zu ubernehmen – und sie zu variieren.
                        ¨
    Oder: eigene Ideen? Fragen stellen!




                               Christoph Neumann   HTML und CSS Kurs (Fortsetzung)      21/29
Agenda Grundelemente(2) DIVs Redundanzen R´sum´
                                          e   e                                     ¨
                                                   Editor Side Includes includeHTML Ubung

Editor Side Includes



    Editor Side Includes bedeutet, dass HTML-Schnipsel in einer
    zentralen Datei (XML !) verwaltet werden, und in den
    XHTML-Dateien uber Kommentar-Referenzierungen eingebunden
                      ¨
    werden.

    Die genaue Syntax und Verwendung von Editor Side Includes sind
                                     a
    nicht standardisiert, sondern abh¨ngig vom Editor!

                 u                                        o
    Ein Plug-In f¨r HTML-Kit, das Editor Side Includes erm¨glicht, ist
    includeHTML → p.t.o.




                               Christoph Neumann   HTML und CSS Kurs (Fortsetzung)          22/29
Agenda Grundelemente(2) DIVs Redundanzen R´sum´
                                          e   e                                          ¨
                                                        Editor Side Includes includeHTML Ubung

includeHTML

    Bei includeHTML muss ein XML-Dokument angelegt werden:
    <? xml v e r s i o n=”1 . 0 ”?>
    < s n i p p e t c o l l e c t i o n>

       <s n i p p e t k e y=”h e a d e r ”>
       <! [CDATA[
          <d i v i d =”h e a d e r ”>
              <a i d =”h e a d e r A n c h o r ”></a>
              <h1 i d =”s i t e N a m e ”> C h r i s t o p h Neumann</h1>
          </ d i v >
       ] ]>
       </ s n i p p e t>

    </ s n i p p e t c o l l e c t i o n>

    Ein solches Snippet kann dann durch eine Kommentar-Referenz in
    einer XHTML-Datei verwendet werden → p.t.o.


                                    Christoph Neumann   HTML und CSS Kurs (Fortsetzung)          23/29
Agenda Grundelemente(2) DIVs Redundanzen R´sum´
                                          e   e                                     ¨
                                                   Editor Side Includes includeHTML Ubung

includeHTML(2)



    An der passenden Stelle im XHTML-Dokument wird folgender
    Kommentar geschrieben:
    <body>
    ...
      <!−−i h : i n c l u d e H T M L
         f i l e =” i n c l u d e / includeHTML . xml ”
        k e y=”h e a d e r ”−−     >
      <!−−/ i h : i n c l u d e H T M L−−>
    ...




                               Christoph Neumann   HTML und CSS Kurs (Fortsetzung)          24/29
Agenda Grundelemente(2) DIVs Redundanzen R´sum´
                                          e   e                                     ¨
                                                   Editor Side Includes includeHTML Ubung

includeHTML(3)


    Wird jetzt includeHTML als Tool auf diese Datei angewendet,
    dann wird der Kommentar wie folgt ersetzt:
    <body>
    ...
      <!−−i h : i n c l u d e H T M L
         f i l e =” i n c l u d e / includeHTML . xml ”
        k e y=”h e a d e r ”−−     >
        <d i v i d=”h e a d e r ”>
            <a i d=”h e a d e r A n c h o r ”></ a>
            <h1 i d=”s i t e N a m e ”>C h r i s t o p h Neumann</ h1>
        </ d i v>
      <!−−/ i h : i n c l u d e H T M L−−>
    ...




                               Christoph Neumann   HTML und CSS Kurs (Fortsetzung)          25/29
Agenda Grundelemente(2) DIVs Redundanzen R´sum´
                                          e   e                                     ¨
                                                   Editor Side Includes includeHTML Ubung

             o
Alternative M¨glichkeiten



       1   Server Side Includes (SSI)
                 ¨
                 Ahnlicher Mechanismus wie Editor Side Includes
                 Standardisiert!
                 Ersetzung durch den WebServer (bei Anfrage der HTML-Seite)
       2   Dynamic Content Creation
                 Aus Datenbanken erzeugte Inhalte
                 Zum Beispiel: WebShops
                 (Dies ist die anspruchvollste Art HTML zu erzeugen ...)
                 (Auch Content Management Systeme (CMS) wie das
                 Open-Source Projekt Mambo basieren hierauf.)




                               Christoph Neumann   HTML und CSS Kurs (Fortsetzung)          26/29
Agenda Grundelemente(2) DIVs Redundanzen R´sum´
                                          e   e                                     ¨
                                                   Editor Side Includes includeHTML Ubung

¨
Ubung


       1   Download: includeHTML
       2                       ,     ,         , a
           Installation: “Next” “Yes” “Next” w¨hle “Full installation” ,
                                 ,
           “Next”, “Next”, “Next” “Install” ... (dann: deaktiviere “run” und
           “open help” Auswahl) “Finish”

    Plug-in versus Stand-alone
    V.a. die Funktion “rekursiv alle html-Dateien einer ganzen
                                      ,
    Verzeichnisstruktur abzuarbeiten” ist aus HTML-Kit nicht
        u                                  a
    verf¨gbar, sondern nur uber die eigenst¨ndige
                           ¨
    includeHTML-Programmober߬che!  a




                               Christoph Neumann   HTML und CSS Kurs (Fortsetzung)          27/29
                                          e   e
Agenda Grundelemente(2) DIVs Redundanzen R´sum´    Zusammenfassung Noch Fragen?

Zusammenfassung




    Im diesem zweiten Teil des Seminars haben wir kennengelernt:
       1   Listen
       2   Tabellen
       3   DIVs
       4        u
           CSS f¨r Fortgeschrittene
       5   Editor Side Includes (includeHTML)




                               Christoph Neumann   HTML und CSS Kurs (Fortsetzung)   28/29
                                          e   e
Agenda Grundelemente(2) DIVs Redundanzen R´sum´    Zusammenfassung Noch Fragen?

Noch Fragen?




       1   Folien erstellt mit LTEX (MiKTeX), TeXnicCenter Editor und
                               A
           den latex-beamer Klassen.
       2             a
           Folien erh¨ltlich unter http:
           //www.8ung.at/chr15t0ph/pdf/htmlSeminarPartB.pdf
       3      Christoph Neumann – Quellcode der Folien auf Anfrage:
           c.p.neumann@web.de




                               Christoph Neumann   HTML und CSS Kurs (Fortsetzung)   29/29

								
To top