Webseiten mit HTML. Visual QuickProject Guide. von Elizabeth Castro

Größe: px

Ab Seite anzeigen:

Download "Webseiten mit HTML. Visual QuickProject Guide. von Elizabeth Castro"

Lilli Schneider
vor 8 Jahren
Abrufe

1 Webseiten mit HTML Visual QuickProject Guide von Elizabeth Castro

2 Der Ihnen vorliegende Visual QuickProject Guide langweilt nicht mit Theorie und umständlichen Erklärungen, sondern nutzt große Farbabbildungen und kurze Schritt-für-Schritt-Anweisungen, damit Sie ein bestimmtes Projekt in kurzer Zeit fertig stellen. Sie gestalten in diesem Buch eine kleine Website mit Hilfe von HTML und CSS, den beiden aktuellen Techniken für das Webdesign. Unsere Website zeigt hübsche Fotos und Postkarten und die für deren Präsentation verwendeten Techniken können Sie jederzeit für eigene Websites einsetzen. Vielleicht möchten Sie Urlaubsbilder aus Ägypten zeigen oder die Termine für Ihren Sportverein ins Netz stellen. Warum eigenes HTML und CSS schreiben und nicht einen HTML- Editor wie FrontPage oder Dreamweaver benutzen? Erstens lassen sich HTML und CSS mit dem kostenlosen Texteditor des Betriebssystems erstellen. Zweitens sind HTML und CSS einfacher zu lernen als die vielen Funktionen eines solchen HTML-Editors. Außerdem verfügen Sie damit über eine vollständige Kontrolle über Aussehen und Funktionsweise Ihrer Webseite. Und Sie können immer mit den aktuellsten Versionen von HTML und CSS arbeiten, ohne auf Software-Updates warten oder dafür zahlen zu müssen. V

Unsere Website zeigt hübsche Fotos und Postkarten und die für deren Präsentation verwendeten Techniken können Sie jederzeit für eigene Websites einsetzen.

3 Was Sie gestalten Sie gestalten auf der Homepage ein Logo als GIF-Bild mit transparentem Hintergrund. Das Hintergrundbild verschönert die Seite, ohne vom Inhalt abzulenken. Hier befindet sich die Navigationsleiste, mit der sich Besucher ganz einfach auf Ihrer Website zurechtfinden. Sie erzeugen Links zu anderen Seiten der Website. Sie erstellen überzeugende und schnell ladende Bilder und verwenden sie als Links zu anderen Seiten. Sie formatieren Text mit Schriftart, Größe und Farbe Ihrer Wahl. VI

Hier befindet sich die Navigationsleiste, mit der sich Besucher ganz einfach auf Ihrer Website zurechtfinden.

4 Sie unterteilen die Produktseite mit Hilfe von Überschrifen in hierarchische Abschnitte. Hier formatieren Sie Text. Fügen Sie Bilder neben den Text ein. Formatieren Sie einzelne Elemente (fett, kursiv), um wichtige Informationen hervorzuheben. Wählen Sie einen farbigen Hintergrund für die Seiten (selbst einen so hellen wie hier). Typografische oder fremdsprachige Zeichen geben Ihrer Seite ein professionelles Aussehen. VII

Formatieren Sie einzelne Elemente (fett, kursiv), um wichtige Informationen hervorzuheben.

5 Über dieses Buch Die Überschrift erklärt, um was es auf der Seite geht. Sie erstellen in diesem Buch zwei HTML- Dateien (keramik.html in Kapitel 1 und index. html in Kapitel 2). Der einzugebende Code für die HTML-Dateien steht auf orangefarbenem Hintergrund. Neuer Code ist schwarz und bereits vorhandener orange. Bildunterschrifen erklären das Was und Warum. Sie beziehen sich auf bestimmte Abschnitte im Code. Ein Bildschirmfoto zeigt die Auswirkungen des neuen Codes im Browser. VIII

Der einzugebende Code für die HTML-Dateien steht auf orangefarbenem Hintergrund.

6 Sie erstellen zwei CSS-Stylesheets, in denen die Formatanweisungen für die HTML-Dateien enthalten sind (sarahs_styles.css in Kapitel 1 und home.css in Kapitel 2). Der CSS-Code steht auf grünem Hintergrund. Wieder ist neuer Code schwarz, während vorhandener Code in einem dunkleren Grün erscheint. Die Auslassung (...) zeigt an, dass weiterer Code in diesem Dokument vorhanden ist und bereits früher erklärt wurde. Namen von HTML- Elementen, CSS- Eigenschaften, Dateinamen und andere wichtige Begriffe sind orange, während Befehle und Optionen blau erscheinen. IX

Wieder ist neuer Code schwarz, während vorhandener Code in einem dunkleren Grün erscheint. Die Auslassung (.

7 Über dieses Buch Der Abschnitt Extras am Ende eines Kapitels enthält zusätzliche Tipps und Tricks, die Sie für die Gestaltung der Website nicht unbedingt kennen müssen, aber hilfreich sind. Titel eingeben Die Überschrift für jede Gruppe mit Tipps stimmt mit der Überschrift des Abschnitts überein. (Die Farbgebung hat hier keine besondere Bedeutung.) The title of your page goes inside opening and closing title tags within the head section of your web page file. It doesn t matter if the code spans more than one line. <html> <head> <title>sarah's Notecards - Ceramics Collection </title> </head>... The title is displayed in the browser s window bar (often with the browser s name). In this book, the ellipsis (...) indicates that there is more HTML code than can fit in the illustration. Neben der Überschrift finden Sie einen Seitenverweis auf den Abschnitt, auf den sich die Tipps beziehen. Titles are also used by default to identify pages saved as favorites or bookmarks. X

) The title of your page goes inside opening and closing title tags within the head section of your web page file. It doesn t matter if the code spans more than one line.

8 Die Website Sie finden das Projekt mit der fertigen Website unter Klicken Sie auf Sarahs Website, um sich die Seiten anzusehen. Wenn Sie auf sarah.zip klicken, laden Sie die Seiten und Bilder der fertigen Website (etwa 100 KB) herunter. XI

de/books/3827268656/ Klicken Sie auf Sarahs Website, um sich die

9 Wichtige Werkzeuge Die wichtigsten Werkzeuge für die Gestaltung einer Webseite sind Computer und Texteditor. Dabei kann der Computer mit Windows-, Unix- oder Macintosh- Systemsoftware laufen. Spezielle Texteditoren wie BBEdit (hier) bieten nützliche Werkzeuge für das Schreiben von HTML und CSS. Allerdings lässt sich auch mit dem kostenlosen Texteditor Ihres Betriebssystems Notepad für Windows bzw. TextEdit für Macintosh gut arbeiten. Ein Bildbearbeitungsprogramm benötigen Sie für die Retusche und Größenanpassung der Fotos und Grafiken für Ihre Website. Die meisten Digitalkameras und Scaner werden mit einem Bildbearbeitungsprogramm wie Photoshop Elements (hier) geliefert. XII

Spezielle Texteditoren wie BBEdit (hier) bieten nützliche Werkzeuge für das Schreiben von HTML und CSS.

10 Sie müssen die fertige Website auf den Server Ihres Service- Providers laden, um sie im Internet verfügbar zu machen. Bei einigen Providern geschieht das per Browser, während andere ein FTP-Programm wie PSFTP FREE (hier) voraussetzen. Und Sie benötigen einen oder mehrere Browser wie Internet Explorer (hier), Opera und Safari, um Ihre Seiten zu testen und das gewünschte Aussehen sicherzustellen. Die Browser kosten übrigens nichts und gehören meist zum Lieferumfang des Betriebssystems. XIII

Und Sie benötigen einen oder mehrere Browser wie Internet Explorer (hier), Opera und Safari, um Ihre Seiten zu testen und

Ähnliche Dokumente

Die i-tüpfelchen: Favicons

Die i-tüpfelchen: Favicons Schenken Sie Ihrer URL ein eigenes Icon Sie werden lernen: Wo werden Favicons überall angezeigt? Wie kommen Favicons in die Adressleiste? So erstellen Sie Favicons auf Windows und Mac Ein Favicon für unsere