CSS Layout und Design - Hit - FH
Werbung
Präsentation Expression Web 2 Gruppe: Felix Burget Sören Valet 16.12.2008 Felix Burget / Sören Valet 1 Inhalt 0. Inhalt 1. Problemstellung 1. Problemstellung 2. Aufgabenstellung 3. Neuheiten EW2 2. Aufgabenstellung 4. Master.dwt 3. Neuheiten von Expression Web 2 5. CSS Layout 4. Aufbau der Master .dwt 6. Filmdateien 5. CSS Layout und Design 7. Dateistruktur 6. Einbindung der Filmdateien (3med_new.html) 8. Ausblicke 7. Dateistruktur für 3med_new.html 9. Verbesserungen 8. Ausblicke 10. Fazit 9. Verbesserungen und Weiterentwicklungen 10. Fazit 16.12.2008 Felix Burget / Sören Valet 2 Problemstellung 0. Inhalt 1. Problemstellung 2. Aufgabenstellung 3. Neuheiten EW2 4. Master.dwt 5. CSS Layout 6. Filmdateien 7. Dateistruktur 8. Ausblicke 9. Verbesserungen Die aktuelle Webpräsenz von HD-Campus-TV und ExtraHertz wurde mit der Entwicklungsumgebung MS Frontpage 2003 erstellt. Um die Webpräsenz attraktiver gestalten zu können müssen neue Technologien wie z.B Silverlight eingesetzt werden. Diese aktuellen Technologien können jedoch in der Entwicklungsumgebung MS Frontpage 2003 nicht eingesetzt werden, dies macht den Einsatz einer neuen Entwicklungsumgebung, des sogenannten Expression Web 2 notwendig. 10. Fazit 16.12.2008 Felix Burget / Sören Valet 3 Aufgabenstellung 0. Inhalt 1. Problemstellung 2. Aufgabenstellung 3. Neuheiten EW2 4. Master.dwt 5. CSS Layout 6. Filmdateien 7. Dateistruktur Es soll eine neue Vorlage für die HD-Campus-TV und ExtraHertz Webpräsenz mit Hilfe der Software Expression Web 2 erstellt werden. Dabei sollen in der Vorlage die in Expression Web2 neu angebotenen Technologien wie z.B Silverlight zur Verfügung stehen. 8. Ausblicke 9. Verbesserungen 10. Fazit 16.12.2008 Felix Burget / Sören Valet 4 Neuheiten EW 2 0. Inhalt 1. Problemstellung 2. Aufgabebenstellung 3. Neuheiten EW2 4. Master.dwt 5. CSS Layout Seit Juni 2008 ist Expression Web 2 auf dem Markt, dass einige neue Technologien anbietet. Speziell auf dem Gebiet der Medien hat Microsoft mit dem Programm "Silverlight" ein neues Werkzeug zur Erstellung optisch ansprechender Flash-Applikationen zur Verfügung gestellt. 6. Filmdateien 7. Dateistruktur 8. Ausblicke 9. Verbesserungen 10. Fazit 16.12.2008 Felix Burget / Sören Valet 5 Aufbau der Master.dwt 0. Inhalt 1. Problemstellung • Master gibt den Aufbau aller abgeleiteten .html Seiten vor. • Gesteuert wird der Aufbau über die layout.css. • Im Master können bearbeitbare Bereiche definiert werden. • Dynamic web templates ersetzen framepages. • Minimierung der Anzahl von inline frames. • Einbindung der vom .css vordefinierten Bereiche. 2. Aufgabebstellung 3. Neuheiten EW2 4. Master.dwt 5. CSS Layout 6. Filmdateien 7. Dateistruktur 8. Ausblicke 9. Verbesserungen 10. Fazit 16.12.2008 Felix Burget / Sören Valet 6 Aufbau der Master.dwt 0. Inhalt 1. Problemstellung 2. Aufgabebstellung 3. Neuheiten EW2 Masterhead Navigation 1 4. Master.dwt 5. CSS Layout Navigation 2 6. Filmdateien 7. Dateistruktur Bearbeitbarer Bereich 8. Ausblicke 9. Verbesserungen 10. Fazit Fußzeile 16.12.2008 Felix Burget / Sören Valet 7 CSS Layout und Design 0. Inhalt 1. Problemstellung 2. Aufgabenstellung • Trennung von Design (style.css, layout.css) und Inhalt. 3. Neuheiten EW2 • Steuerung der Webseite über wenige globale Parameter. 4. Master.dwt • Definierungen von Bereichen bezüglich Größe (in %, px) und Farbe. • Schnelles umschalten auf komplett neues Design mit vordefinierten .css. 5. CSS Layout 6. Filmdateien 7. Dateistruktur 8. Ausblicke 9. Verbesserungen 10. Fazit 16.12.2008 Felix Burget / Sören Valet 8 CSS Layout und Design 0. Inhalt 1. Problemstellung •Beispiel 2. Aufgabebstellung 3. Neuheiten EW2 Style0.css Style1.css 4. Master.dwt 5. CSS Layout 6. Filmdateien 7. Dateistruktur 8. Ausblicke 9. Verbesserungen 10. Fazit 16.12.2008 Felix Burget / Sören Valet 9 Einbindung der Filmdateien 0. Inhalt (3med_new.html) 1. Problemstellung 2. Aufgabenstellung 3. Neuheiten EW2 • Designsteuerung durch die 3med_new.css 4. Master.dwt 5. CSS Layout 6. Filmdateien 7. Dateistruktur 8. Ausblicke Steuerelemente ( in Arbeit: Gruppe Blend) 9. Verbesserungen Web Player (in Arbeit: Gruppe Encoder) 10. Fazit 16.12.2008 Felix Burget / Sören Valet 10 Dateistruktur für 3med_new.html 0. Inhalt 1. Problemstellung • Ordnerstruktur wurde weitestgehend beibehalten • Zusätzlich sind drei Ordner für die 3 Qualitäten nötig • Diese Ordner werden von der Encoder Gruppe erzeugt. 2. Aufgabebstellung 3. Neuheiten EW2 4. Master.dwt 5. CSS Layout 6. Filmdateien 7. Dateistruktur 8. Ausblicke 9. Verbesserungen 10. Fazit Beispiel Ordnerstruktur 16.12.2008 Felix Burget / Sören Valet 11 Ausblicke 0. Inhalt 1. Problemstellung 2.Aufgabenstellung 3. Neuheiten EW2 4. Master.dwt • Videos direkt auf Webseite Abspielbar (Gruppe: Encoder) 5. CSS Layout • Teilsendungen im Player integriert (Gruppe: Encoder) 6. Filmdateien • Ansprechende Steuerelemente mit Silverlight-Technologie (Gruppe: Blend) • 3med_new.html wird zum neuen Standard. 7. Dateistruktur 8. Ausblicke 9. Verbesserungen 10. Fazit 16.12.2008 Felix Burget / Sören Valet 12 Verbesserungen und Weiterentwicklungen 0. Inhalt 1. Problemstellung 2. Aufgabenstellung 3. Neuheiten EW2 • Minimierung des Platzbedarfs für Navigation. 4. Master.dwt • Besseres Design der Seite (Farbwahl). • SQL Datenbank für Videobewertungen (z.B . Starbar). 5. CSS Layout 6. Filmdateien 7. Dateistruktur 8. Ausblicke 9. Verbesserungen 10. Fazit 16.12.2008 Felix Burget / Sören Valet 13 Fazit 0. Inhalt 1. Problemstellung 2. Aufgabenstellung 3. Neuheiten EW2 • • – Programmiersprachen( VB,C++, Javascript, flash), – Web Design, – Animation (flash, silverlight), – Farbwissenschaften, uvm. 4. Master.dwt 5. CSS Layout 6. Filmdateien 7. Dateistruktur 8. Ausblicke 9. Verbesserungen Es sieht einfacher aus als es ist! Sehr übergreifend auf andere Bereiche • Strukturiertes Vorgehen bei der Webseiten Erstellung 10. Fazit 16.12.2008 Felix Burget / Sören Valet 14
