Tutorial:Kapitel4
aus NvuWiki, der freien Wissensdatenbank
zurück zu Tutorial:Kapitel3
Inhaltsverzeichnis |
Einfügen von Grafiken und Tabellen
Einfügen von Grafiken
Relative Pfade zu verwenden, sollte bevorzugt werden gegenüber absoluten Pfade.
Jetzt haben wir Text in unserem HTML-Dokument verwendet und mit verschiedenen Formatierungswerkzeugen gearbeitet, um den Text für den Besucher Ihrer Webseite anziehend zu gestalten. Wir haben auch Links verwendet, um unsere Webseite mit anderen Webseiten zu verbinden. Nach Text sind Grafiken das zweithäufigste Element welches zum Gestalten von Webseiten verwendet wird. Grafiken oder Fotos bringen Ihre Webseite zum Leben, da es viel leichter ist, eine Grafik oder ein Foto von etwas zu zeigen, anstatt es mit Worten erklären zu müssen.
Fig.4.1 Grafik Eigenschafts Dialog
Um eine Grafik an der Position des Cursors einzufügen, klicken Sie auf die "Grafik"-Schaltfläche in der Bearbeitungs Symbolleiste. Dies öffnet den Grafik Eigenschafts Dialog.(siehe Fig 4.1). In diesem Dialog können Sie den Pfad zu der Grafik entweder von Hand eingeben, oder auswählen indem Sie auf die Schaltfläche Durchsuchen klicken. Sie sollten auch einen Text in das Feld Alternativtext eingeben. Der alternative Text wird angezeigt, falls die Grafik nicht vom Besucher Ihrer Webseite heruntergeladen werden kann. Dieser Text läßt den Besucher Wissen, was für eine Grafik dort sein sollte, und dass mit der verlinkten Grafik etwas nicht in Ordnung ist (hilfreich beim Berichten von Problemen mit der Webseite).
Die Größe einer Grafik in einem Bildbearbeitungsprogramm zu ändern ist besser als die Änderung durch den Browser
Sie können durch Wechseln der Tabs Anpassungen an der Grafik vornehmen. Im Tab "Größe 2“, können Sie die Größe der Grafik ändern, wenn sie in einem Browser angezeigt wird. Eine bessere Methode als die Größe der Grafik durch den Browser zu ändern, ist die Größe der Grafik in einem entsprechendem Bildbearbeitungsprogramm zu ändern, und zwar so dass sie die Größe hat, welche der Browser anzeigen soll. Das Redimensionieren der Grafik durch den Browser führt nämlich im Allgemeinen zu einer Verminderung der Qualität der Grafik, und es sollte daher vermieden werden, es sei denn, es ist notwendig. Im Tab "Erscheinungbild" können Sie Einstellungen für den Rand um die Grafik vornehmen. Es gibt eine Option, wie man die Abbildung in Bezug auf den Text, der sie umgibt einstellen kann. Der Tab "Link" erlaubt uns, die Abbildung, genau wie Text als Hyper Link zu verwenden.Wir haben Grafiken in unserem Beispiel-Text unten eingeführt. Die Grafiken befinden sich in Zellen einer Tabelle unter dem Produkt, welches sie repräsentieren. Um die Grafiken (ohne Tabelle und andere Formatierungen) zu sehen, klicken Sie hier, um den unformatierten Beispiel-Text in einem neuen Fenster zu betrachten. Er zeigt auch, wie alternativer Text ins Spiel kommt, (die zweite Grafik, das Mozilla Emblem, fehlt), wenn ein Grafik-Link tot ist oder die Grafik nicht heruntergeladen werden kann.
Da die in eine Webseite eingefügten Grafiken Links zu Dateien sind, vergessen Sie nicht, die Grafiken auf den Web-Server zu laden. Auch sollten Sie darauf achten, dieselbe Verzeichnisstruktur auf dem Web-Server zu haben, wie Sie sie für Ihre Webseiten und andere Dateien haben, die mit diesen Webseiten verbunden sind. Dies ist notwendig, weil sonst tote Links für Dateien oder Grafiken auf Ihrer Webseite entstehen wenn sie in einen Browser betrachtet wird.
Erstellen von Tabellen
Nach einer Einführung, Abbildungen in Ihre Webseite einzufügen, zeigen wir hier ein weiteres praktisches Element von HTML: Tabellen. Tabellen werden in HTML durch Verwenden des tabellarischen Umgebungss Tags <table> ... </table> erstellt. Zusätzlich zum eigentlichen Zweck von Tabellen für tabellarische Datenaufstellung können wir Tabellen auch verwenden, um Daten in unserer Webseite zu platzieren. Jedoch konzentrieren wir uns in diesem Abschnitt darauf, Tabellen nur für Text/Grafiken zu erstellen.
Um eine Tabelle an der Cursorposition einzufügen:
- Klicken Sie auf die Schaltfläche "Tabelle" der Bearbeitungs-Symbolleiste (öffnet "Tabelle einfügen" Dialog Fig 4.2)
- Fahren Sie mit der Maus über die Matrix um die Größe der Tabelle festzulegen.
- Klicken Sie auf die Zelle unterhalb der Maus, um die Tabelle mit der ausgewählten Größe zu erstellen.
Fig4.2 Tabelle einfügen Dialog
Nach dem Erstellen der Tabelle können Sie den Tabellenzellen Text, Links, Grafiken usw. hinzufügen. Als Beispiel erstellten wir eine Tabelle mit 2 Reihen und 6 Spalten und kopierten die Links im Abschnitt "Interessante Links" unseres Beispiel-Textes. In die Zellen der zweiten Reihe wurden Grafiken eingefügt, die mit den Links in den Zellen in der ersten Reihe verbunden waren.
Eine andere Art, eine Tabelle zu erstellen, ist die Auswahl in eine Tabelle umzuwandeln. Bei dieser Methode wählen wir den Text, den wir in eine Tabelle einfügen wollen, aus und klicken auf die Schaltfläche "Tabelle" auf der Bearbeitungs-Symbolleiste (oder Menü Tabelle > Tabelle aus Auswahl erstellen). Dies öffnet den Dialog "In Tabelle umwandeln". Sie können das Zeichen auswählen, welches verwendet wird, um die Auswahl in Spalten zu trennen. Die Trennzeichen können Komma, Leerzeichen, oder benutzerdefiniert sein. Auf OK klicken, wandelt den gewählten Text in eine Tabelle um. Jede Zeile der Auswahl ist in eine Reihe der generierten Tabelle umgewandelt worden.
Der Abschnitt Status des Beispiel-Textes, wurde mit "Leertaste" als Trennzeichen zu einer Tabelle umgewandelt. Um nur den Beispiel-Text mit der Tabelle zu betrachten, klicken Sie hier.
Fig4.3 In Tabelle umwandeln Dialog
Beispiel-Text
Unten steht der Beispiel-Text. Unformatierter Text wird grau dargestellt, bis er während des Verlaufs des Tutorials formatiert worden ist.
Beispiel Text
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ac massa non enim dictum vulputate. Vestibulum iaculis. Maecenas nisl magna, suscipit quis, vulputate nec, egestas vel, enim. Ut venenatis blandit elit. Aliquam erat volutpat. Nam eros. Morbi imperdiet, diam at lacinia luctus, diam lacus porttitor quam, a posuere nulla sem vel diam. Suspendisse quam felis, scelerisque vel, fringilla sit amet, commodo quis, orci. Etiam at eros. Aenean facilisis adipiscing libero. Phasellus malesuada sem ornare nulla. Sed sit amet elit.
Aenean vel turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla rhoncus posuere turpis. Phasellus id ante ac wisi hendrerit bibendum. Etiam a mi. Vestibulum malesuada nisl. Vestibulum eget nulla non quam aliquet mattis. Aliquam molestie lacus sit amet metus. Maecenas sit amet turpis posuere purus cursus cursus. Morbi at sem. Quisque malesuada hendrerit mauris. Cras tincidunt dignissim orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque magna urna, auctor consectetuer, tristique sit amet, porta sit amet, dui.
Status
| Absätze | 2 |
| Worte | 168 |
| Bytes | 1149 |
Eine nummerierte Liste
Hier sehen Sie eine geordnete d.h. nummerierte Liste. Ungeordnete Listen können auf die gleiche Weise erstellt werden wie geordnete, nur mit der entsprechend anderen Schaltfläche der Formatierungs-Symbolleiste.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Sed nec velit sit amet dui malesuada porttitor.
- Fusce auctor turpis ac dui ornare feugiat.
- Ut et elit ut ante mattis ullamcorper.
- Maecenas sed tortor at tellus pulvinar commodo.
Interessante Links
Weiter
Im nächsten Kapitel, lernen wir wie man eine Webseite veröffentlicht. Das Veröffentlichen Ihrer Website (Webseiten, Grafiken, und andere Dateien) auf dem Web-Server ist der letzte Schritt. Nachdem die Veröffentlichung Ihrer Website erfolgreich beendet ist, können andere User Ihre Webseiten sehen, wenn sie Ihre Website besuchen.
weiter zu Tutorial:Kapitel5
©2004-2005 KDS Sahambi/R.Richter
