02 16 Projekt DreamWebSite Hotel Mama

Transkript

1 Projekt DreamWebSite Hotel Mama HDWebSitePlanung.doc 1. WebSite planen, organisieren, Ordner anlegen Siehe HD01WebSitePlanung.doc HDDreamWebSiteHotelMama1.doc 2. Gesamten Websiteordner duplizieren 3. Erstellen der WebSite mit DW CS6 4. Vorlage 5. Menüpunkte dazugeben, Bilder einfügen Erstellen bearbeitbarer Bereiche 7. CSS Layout ändern 8. Fließendes/Fixes Layout 9. Seiten aus Vorlage erstellen 10. Verlinken 11. Neue CSS Regeln erstellen, Formatierungen 12. Bilder Ausrichten mit ext. Stylesheet 13. Bilder im Textfluss 14. Bildberechnungen 15. Abstände padding margin 16. Meta Tags HDDreamWebSiteHotelMama2.doc 17. Horizontales Menü mit ul. 18. Tabellen 19. Formulare 20. Webgallerie 21. Gästebuch 22. Einfügen VideosYoutube 23. Einfügen Maps 24. Einfügen Spry Menüleiste

2 2 1. WebSite planen, organisieren, Ordner anlegen siehe HD02WebSitePlanung.doc.

3 3 2. Gesamten WebSiteOrdner duplizieren [201301DreamWebSiteHotelMamaMia] Im Ordner sind folgende Ordner Im Ordner [NoUploadDateien] ist alles, das nicht ins Web hochgeladen wird also alles das die Website betrifft Bilder, Adressen, Schriftstücke. Originaldateien.. Im Ordner[ img] sind bei uns alle bereits fürs Web aufbereitete Dateien, Bilder enthalten Dupliziere den Ordner 2 mal Einmal erstellen wir die Website mit Dreamweaver daher: Name des ersten Ordners: [201301DreamWebSiteHotelMamaMia] Einmal erstellen wir die Website mit dem Editor daher: Name des zweiten Ordners: [201301EditorWebsiteHotelMamaMia]

4 4 3. Erstellen der WebSite mit Dreamweaver CS6 Ordnername: DreamWebSiteHotelMamaMia Site Neue Site Site Name, Lokaler SiteOrdner - speichern Re unten folgende Ansicht: Datei Neu HTML Vorlage 3 Spalten fließend, Kopf und Fußzeile; HTML5, CSS Neue Datei erstellen erstellen

5 5 4. Vorlage Unsere Vorlagenseite besteht aus einem container (mindestens 780px und höchstens 1260 px), der -header -sidebar1 -content -sidebar2 und -footer enthält Der Container (hier 80% des Displays) umschließt alle anderen Inhaltsboxen, deren Größe in Prozent definiert ist Sidebar1 (25%), content (55%), sidebar2 (20%) Umwandeln in fixes Layout: ersetzen der Prozentwerte mit Pixelwerten siehe weiter unten für stylesheet Datei neuen Ordner namens [stylesheet], Name der CSS datei: layout1.css

6 6

7 7 5. Menüpunkte hinzufügen, Logo einfügen Platzhalter für Logo li oben doppelt anklicken, eigenes Logo heraussuchen, Alternativtext eingeben (Logo oder Logo Hotel Mama Mia) Menüpunkte nach Wahl beschriften; sind zu wenige Schalter, am Ende der Schrift des letzten Schalters enter drücken, neuen Schalter z.b. Mitarbeiter beschriften, das Wort markieren, über HTML Hyperlink Platzhalter # eingeben, enter Taste drücken, fertig Oder: Listenpunkt im Quelltext kopieren und einfügen Menüpunkte für z.b Anreise und Bestellformular, Preise können später noch hinzugefügt werden

8 8 6. Erstellen bearbeitbarer Bereiche Sidebar links (sidebar 1) : Das wird ein bearbeitbarer Bereich, soll also auf jeder Seite anders befüllt werden können - Hier schreiben wir einige Smalltalk Sachen hinein, die zum jeweiligen Menüpunkt passen Schrift markieren Einfügen Vorlagenobjekte bearbeitbarer Bereich (entfernen des bearbeitbaren Bereiches: markieren, Entf Taste) Im Content Bereich: Eventuell Bearbeitbarer Bereich für Content Überschrift Weiters: Bearbeitbarer Bereich für Content Text und Bilder Sidebar rechts: Bearbeitbarer Bereich für Aktuelle Werbethemen, Links etc- Footer: Impressum etc,

9 9 Datei speichern als Vorlage (.dwt) Speichern unter HauptvorlageHotelMamaMia

10 10 7. CSS Layout ändern Nun werden Farben der Boxen nach Wahl geändert. Klicke re oben bei CSS Regeln auf alle, dann bei layout auf + um das Aussehen der einzelnen Bereiche nach Wahl zu gestalten Folgendes wird nun individuell geändert: Hintergrund mit Hintergrundbild oder Farbe ändern: body, header, sidebar1, content, sidebar2, footer, Navigationsliste ul.nav.a, und ul.nav.hover, Verändere auch das Aussehen der Überschriften h1, h2.p

11 11

12 12 8. Fließendes Layout Fixes Layout Soll kein flexibles Layout (Seite kann zusammengeschoben werden), sondern die Seite eine fixe Größe haben, gehe ins layout1.css und ändere bei:.container die width auf z.b. 960 Pixel (jeweilige Bannerbreite); Um die Größe der header box genau auf die Größe des Bildes anzupassen, ändere im.header die Höhe auf 160 Pixel (die Höhe des jeweiligen Banners). sidebar1,2 und content können ebenfalls nachträglich genaue Breitenangaben erhalten. Es wird empfohlen innerhalb einer Website immer entweder px Angaben oder immer Prozentangaben zu verwenden container= sidebar1+ content + sidebar2 960px=

13 13

14 14 9. Seiten aus Vorlagenseiten erstellen.dwt heißt Dreamweaver Template- Die Vorlagendatei dient als Vorlage für alle anderen Seiten diese braucht nicht ins Netz hochgeladen zu werden. Nun werden alle anderen Seiten (index.html, essen.html, hotel.html..aus der Vorlage erstellt: Datei- Neu-Seite aus Vorlage erstellen, Doppelklick auf: Hauptvorlage MammaMia und speichere die jeweiligen Seiten ab als: index.html,essen.html, mitarbeiter.html Füge auf jeder Seite im bearbeitbaren Bereich vorerst eine Überschrift ein und füge auch einen Seiten Titel (oben) ein.seitentitel ein Titel einfügen Hotel Mama Mia, Essen Mama Mia.

15 15 Wichtig: Alles das für alle Seiten geändert werden soll, wird auf der:. dwt also auf der Hauptvorlage geändert. Alles speichern, Aktualisieren immer alle Dateien auf der gesamten Website Wichtig: Wird auf einem andern Computer die bereits erstellte Website weiterbearbeitet, ist folgendes zu tun, damit Änderungen auf der.dwt Seite sich auf die anderen Seiten der Website auswirken: Site neue Site erstellen: Name für die Site vergeben, Ordner wählen: Ordner wo die Website samt Dateien drinnen ist

16 Verlinken: Markiere den ersten Menüpunkt HTML - Hyperlink einfügen auf Ordner klicken, Seite auswählen, doppelklicken Alles speichern, aktualisieren, Vorschau im Browser. Kontrolliere im Quelltext die Richtigkeit der Verlinkungen und bessere eventuelle Fehler aus z.b.: siehe unten, bei Mitarbeiter hat sich hinter.html ein Fehler eingeschlichen. Kontrolliere ebenso, ob die unordered list passt und nicht irrtümlich beim Einfügen der Menüpunkte eventuelle Unterlisten erstellt wurden.

17 17 Soll ein Menüpunkt nach oben oder unten verschoben werden, geschieht dies durch erneutes Beschriften und Verlinken oder durch Verschieben des gesamten Listenpunktes im Quelltext Nun werden die Seiten mit Schriften, Kommentaren und Bildern gefüllt. Bilder einfügen: von re unten hineinziehen, oder oben - Einfügen- Bild und auf die Datei klicken

18 Neue CSS Regeln erstellen, Formatierungen Formatieren CSS. Stile Neu Vergib einen Klassen Namen (aussagekräftig, klein und zusammenschreiben, keine Sonderzeichen ), verändere in der sich zu öffnenden Box z.b Schrift oder Abstände, Ausrichtung etc. Klicke auf z.b die Schrift die geändert werden soll (samt Absatztags markieren) und weise mit re Maustaste den CSS Stil zu.

19 Bilder ausrichten mit externem Stylesheet: Mittig oder rechts oder links Bilder sollten sich immer in einem Absatz (oder ähnlichem) befinden (also innerhalb z. B. <p> Tags </p>eingeschlossen sein. Regle die Ausrichtung in der externen stylesheet Datei layout.css Bild innerhalb eines Absatzes platzieren Oben auf: Formatieren CSS Stil Neu oder klick auf Bild, re Maustaste, CSS Neu Stile Namen auswählen (z.b. bildmitte); bei Block text align center (oder right oder left wobei left meist standardmäßig ist) eingeben gesamten Absatz im Quelltext markieren (inklusive des Anfangs und Endtags <p>.bild.</p>, re Maustaste CSS Stil zuweisen

20 20 Quelltext wie folgt: Davor: <p img src="../img/banner/logo.jpg" width="240" height="160"> </p> Danach: <p class="bildmitte"><img src="../img/banner/logo.jpg" width="240" height="160"> </p>

21 Bilder in Textfluss einfügen: Damit die Bilder von der Schrift umschrieben werden: klick aufs eingefügte Bild - dann re Maustaste- CSS Stile fltlft (float left Bild schwebt links und wird rechts von der Schrift umgeben oder fltrt Bild schwebt rechts und wird auf der linken Seite umschrieben). Das bild sollte sich wieder innerhalb von Absatztags befinden sollte die Klasse fürs floaten links oder rechts noch nicht vorhanden sein, Oben auf: Formatieren CSS Stil Neu, (oder rechte Maustatste CSS Stil neu Namen vergeben z.b.floatlinks,

22 Bilderberechnungen neu auflösen in DW werden permanent geändert (Bearbeiten Neuauflösen rückgängig); Bilder sollte man grundsätzlich vor dem Einfügen in richtiger Auflösung und richtiger Größe speichern alternativ kann es in Dreamweaver gemacht werden, um Speicherplatz beim Laden zu sparen

23 Abstände padding, margin (by: Patrick Sexton on google.de)

24 Head Bereich Metatags einfügen Sowohl Titel als auch Metatags sollten aussagekräftige Informationen enthalten. Die Wörter sollen jedoch - um nicht von Suchmaschinen ignoriert zu werden- auch im Websitetext vorkommen. Klick im Quelltext in den head bereich und füge Metatags hinzu Einfügen HTML Metatags etc. <head> <meta name="description" content="hotel Mama Mia, Lienz, Osttirol "> <meta name="author" content="mama Mia"> <meta name="keywords" content="stichwort, Hotel, immer, Osttirol, Wellness, Essen "> <meta name="date" content=" t08:49:37+02:00"> </head> <meta name="robots" content="noindex" /> wenn die Seite nicht gefunden werden soll Übrigens: Sämtliche Kommentare können aus der Website herausgelöscht werden. Hochgeladen wird aus dem Gesamten Ordner alles nur folgender Ordner nicht: [NoUploadDateien] und [Templates]. Das Hochladen kann mit Dreamweaver erfolgen oder mit z.b. mit Filezilla Siehe FileZillaWebSpaceZugang.doc