Verbindende Vorhaben in IT 8: CAD und Web-Seiten



Ähnliche Dokumente
HTML. HyperText Markup Language. Die Programmiersprache des WWW. Keine eigentliche Programmiersprache, sondern eher Seitenbeschreibungssprache

D a s B e g l e i t s c r i p t z u m

Zeile 3-7: Der Kopf der HTML-Datei. Hier werden unsichtbare Einstellungen für das ganze Dokument vorgenommen.

Das Grundgerüst für ein HTML-Dokument sieht so aus:

- Viren (Würmer) Internet und Webseiten-Gestaltung. Vorlesungsinhalte

Verbindende Vorhaben in IT 8: CAD und Präsentation

Arbeiten im Datennetz der Universität Regensburg

Inf11 HTML / pl

Hyperlinks. Auf eine Seite, die möglicherweise weit entfernt zu lokalisieren ist. Pfeil der Maus wird zu einer Hand über einem Hyperlink.

HTML5. Grundlagen der Erstellung von Webseiten. Linda York, Tina Wegener. 2. Ausgabe, 3. Aktualisierung, Januar 2013 HTML5

Kennen, können, beherrschen lernen was gebraucht wird

Die Aufgabe des Browsers ist es, den HTML-Quelltext (source code) zu interpretieren und dann am Bildschirm entsprechend darzustellen:

HTML Kurs. Inhaltsverzeichnis. Dominic Dietiker Aktualisierung: February 13, Das HTML-Dokument 2. 2 Einige Tags 7

M i t t w o c h, 1 7. J u l i

Es gibt zahlreiche Web-Programmiersprachen: HTML, CSS, JavaScript, PHP, Perl, Python, HTTP, XML und viele weitere.

HTML-Tags zur Gestaltung von Informationen im Redaktionssystem SixCMS. Handbuch für Webredakteure

Wir studieren HTML-Tags

1 HTML-Grundlagen. 1.1 Einführung in HTML

Aufbau einer HTML Seite:

XML Vortrag. 1. Beispiel XML. 2. Begriffe. 3. XML Standards

HTML ist eine Auszeichnungssprache / Seitenbeschreibungssprache, mit der es möglich ist Internetseiten zu gestalten.

Eine Einführung in HTML

Gegeben ist das folgende XML-Dokument.

Stichpunkte zum Aufbau einer HTML-Website

Webdesign im Tourismus

Gandke & Schubert GS-SHOP : Anpassung bestehender Templates

Einführung in HTML Text

Goldene Regeln: 1.0 HTML-Tags

Kennen, können, beherrschen lernen was gebraucht wird

Kapitel 8 HTML. Copyright by Worldsoft AG, 2014, Pfäffikon SZ, Switzerland. Version: Seite 1

Java Webentwicklung (mit JSP)

HOMEPAGE I HTML. Schulungsunterlagen. Von Dietmar Becker. Tel.: 0172 /

Grundstruktur von HTML. Form und Darstellung von Informationen. Typen von Tags. Metadaten im Kopf. Dokument-Attribute im Body. Schriftformatierung

Warten auf Ereignisse

realschule.htm gymnasium.htm index.htm <html> <head> <title>schularten in Bayern</title> </head> <body text="orange"> <body bgcolor="gray">

Crash Kurs in HTML Frauenprojektlabor

1 Einführung Die Sprachen HTML und XHTML Struktur einer HTML Seite Webseiten speichern... 2

HTML Programmierung. Aufgaben

Einführung in HTML. Das http (Hyper Text Transfer Protocol) dient der Übertragung der www-seiten.

Verbindende Vorhaben in IT 8: CAD und Tabellenkalkulation

Webseiten erstellen für Einsteiger

Das World-Wide-Web (WWW), HTML-Dokumente und Links im Internet

Übung zur Vorlesung Digitale Medien. Hanna Schneider Ludwig-Maximilians-Universität München Wintersemester 2014/2015

WebQuests. Eine WebQuest erstellen und publizieren. Mit PowerPoint geht es besonders einfach. Seite 1. WebQuests erstellen und publizieren

4. Sonstige Mitarbeit 4.1 Formen der Sonstigen Mitarbeit

Format- oder Stilvorlagen

HTML5. Grundlagen der Erstellung von Webseiten. Marc Haunschild, Linda York, Tina Wegener. 3. Ausgabe, Januar 2015 ISBN: HTML5

Spreed Call Button. Kurzanleitung. 1 Übersicht Auswahl bzw. Erstellen einer Button-Grafik Konfiguration des Spreed Call Button...

2. HTML GRUNDLAGEN EINLEITUNG. Das WWW (word wide web) Überblick

Einführung in HTML. Tutorium. Präsentation der Sitzung vom 2./9. Juni 2004 Martin Stricker

DML Befehl: UPDATE II

IT-Zertifikat: Allgemeine Informationstechnologien II PHP

1.0 Was ist eine Webseite? 1.1 Die 5-Minuten Webseite. HTML Grundwissen Teil 1

Wiki erstellen und bearbeiten

376 6 Bilder und Grafiken für das Web

Übung: Bootstrap - Navbar

Kurzeinführung in HTML

Tutorial: Webseite mit Photoshop erstellen

Aufgabenbereich 3: Layoutgestaltung mit CSS

Inhalt. Seite 1 von 14

GRUNDLAGEN zu HTML. Quelltext. Darstellung im Browser. Befehlsübersicht unter: 1

Dreamweaver MX Arbeiten mit HTML-Vorlagen

Grundelemente der Hypertext Markup Language (HTML)

HTML - Die Sprache des Internets. Grundlagen und Kurzprojekt

Um Ihren neuen»counter«(besucherzähler) auf einer Webseite zu installieren, benötigen Sie folgenden HTML-Code:

Meine erste Homepage - Beispiele

<P>Hallo! Dies ist ein nicht gerade wichtiges Dokument. Es enthält vor allem keine herausragende <EM>dichterische</EM> Leistung,

Seminar Mobile Computing: Wireless Markup Language. Tobias Schwegmann

Produktentwicklung/CAD

WEBSITE ERSTELLEN mit DREAMWEAVER MX

So einfach geht es Unterlagen zur Einführung in das Internet/Intranet-Redaktionssystem der Kliniken MTK Stand: , Bjoern Koester

Web-basierte Anwendungssysteme XHTML-Tabellen und Bilder

[Arbeiten mit dem Nvu Composer]

Inhalt. Vorwort 13. Einleitung 15. Für wen ist dieses Buch gedacht? 15 Zum Aufbau des Buchs Installation und erste Schritte 17

Das HTML-Element <iframe> ermöglicht innerhalb von Webseiten die Einbettung/Anzeige von anderen Webseiten.

Bilder und Dokumente in MediaWiki

HTML5. Wie funktioniert HTML5? Tags: Attribute:

Erstellen von Webseiten

HTML5 Formulare. HTML5 Formulare Seite Seite 1 von 7 Florian Bauer

Workshop Java Webentwicklung Tapestry. Ulrich Stärk

Die Programmiersprache des Webs. HTML HyperText Markup Language Hypertext - Auszeichnungssprache

Der Rumpf. Titel Seite 3

HTML. eine Einführung. Informatikkurse an der IGS im Schuljahr 2004 HTML

Bedienungshandbuch Geodatenportal MK

Inhalt. Vorwort 13. Einleitung Installation und erste Schritte Von der Webvisitenkarte zur Webpräsenz 51. Inhalt

1 Frames und Tabellen mit HTML mit PHP Cookies...15

3. Drucken und Exporte

Berufsakademie Stuttgart, Außenstelle Horb, MI2002

V by WBR1/BFH-TI 2011 by MOU2/BFH-TI

XSLT Vortrag. 2. Beispiel XML. 3. Anwendungsmöglichkeiten von XSLT 4. XHTML

Präsentieren mit PowerPoint

Interaktive Medien 1. Semester Martin Vollenweider. Web Entwicklung 1 Kapitel «Struktur»

INHALTS VERZEICHNIS. Einleitung 11 Der lange Weg zu Expression Web 11 Was Expression Web von Dreamweaver und GoLive unterscheidet 15

46 PowerPoint 2016 Shape Tools + Word

Wo kannst du mit JavaScript programmieren?

<Trainingsinhalt> Macromedia Dreamweaver 8 CS3

Digitale Medien. Übung

In dieser Anleitung wird beschrieben, wie Sie eine HTML-Seite in Macromedia Dreamweaver mit blinden Tabellen strukturieren können.

KURZANLEITUNG utypia Shop

Transkript:

1. Lehrplanbezug Verbindende Vorhaben in IT 8: CAD und Web-Seiten Neben der Bildschirmpräsentation gehört das Gestalten von Web-Seiten zu den bedeutenden Möglichkeiten der Veröffentlichung von selbst erarbeiteten Inhalten. Der integrative IT-Unterricht leistet damit einen wichtigen Beitrag zur Medienkompetenz unserer Schüler. Neben den rein technischen Grundlagen ist es in diesem Zusammenhang besonders wichtig, allgemeine Gestaltungskriterien zu erarbeiten, die auch später noch Gültigkeit besitzen. Dabei ist besonders darauf zu achten, dass die Gestaltung der Präsentation dem Thema angemessen ist und nicht durch unpassende Gags an Aussagekraft verliert. Das Veröffentlichen von CAD-Ergebnissen ist nicht nur eine weitere Möglichkeit, IT-Inhalte zu verbinden, sondern eine ideale Gelegenheit, 3D-Modelle Plattform unabhängig (also ohne CAD-Programm) zu präsentieren. IT 8.4 Informationen für die Präsentation aufbereiten (ca. 12 Std.) Die Schüler erarbeiten eine Bildschirmpräsentation und eine Web-Seite. Dabei strukturieren sie die Informationen, bereiten diese auf und fügen sie zusammen. Bildschirmpräsentationen.. Web-Seiten - Aufbau und Merkmale des Internets - Objekte und Attribute einer Web-Seite - Gestaltungsbeispiele von Web-Seiten analysieren; Gestaltungsgrundsätze entwickeln - Web-Seiten erstellen IT 8.9 Technische Darstellung zusammengesetzter Körper (ca. 8 Std.) Die Schüler erwerben die Fähigkeit, an zusammengesetzten Werkstücken und Bauformen die Einzelelemente als geometrische Grundkörper zu erkennen. Ihr Gespür für technische Zusammenhänge wird besonders bei diesem Themenbereich durch eine Synthese aus dem bisher gelernten Stoff und durch praxisorientiertes Arbeiten vertieft. Dabei erweitern die Schüler ihre Kenntnisse auch im Hinblick auf CAD-spezifische Arbeitsweisen. - zusammengesetzte, ebenflächig begrenzte Körper analysieren und als Raumbild sowie als Werkzeichnung skizzieren, konstruieren und im 3D-CAD-System erzeugen - als Stück und Gegenstück ebenflächig begrenzte Ergänzungsteile zeichnen - die Einzelteile einfacher zusammengefügter Körper im 3D-CAD-System durch Verschieben deutlich machen und als Explosionsdarstellung anordnen Arbeitskreis am ISB IT-8-I-Vorhaben-CAD_WEB Seite 1 von 6

2. Aufgabenstellung 3D-CAD-Modelle lassen sich in der Regel nicht nur im Programmformat speichern, sie können auch mit Hilfe von Austauschformaten anderen Anwendungen zur Verfügung gestellt oder als Bilder gespeichert werden. Eine Besonderheit ist das VRML- Format (Virtual Reality Modeling Language). Damit lassen sich 3D-Körper auch außerhalb eines CAD-Programms betrachten, so dass trotz realtiv geringer Dateigröße alle Vorteile der 3D-Darstellung nutzbar bleiben (drehen, schieben, zerlegen, schattieren). VRML ist eine Beschreibungssprache wie HTML (Hyper Text Markup Language) und bildet somit eine ideale Ergänzung zur Web-Seiten-Gestaltung. Aufgabe: 1. Ein zusammengesetztes Werkstück in 3D erzeugen 2. Visualisieren durch Shading und Rendering 3. Einzelteile als Explosionsdarstellung anordnen 4. Werkstücke im VRML-Format speichern 5. HTML-Seite erstellen 6. VRML-Modelle in HTML einbinden 7. Internet-Browser und Plug-In verwenden Das nachfolgend beschriebene Beispiel wurde mit dem CAD-Programm Solid Edge, dem Windows- Texteditor und dem HTML-Editor Dreamweaver durchgeführt. Dreamweaver von Macromedia verbindet bei der Erstellung von HTML-Seiten die Möglichkeiten, in der Codeansicht und in der Entwurfsansicht gleichzeitig zu arbeiten. Der Anwender kann direkt die Tags der Seitenbeschreibung eingeben und gleichzeitig das Layout über die Entwurfsansicht verändern. Der Einstieg sollte jedoch unbedingt über das Eingeben grundlegender Tags in einem Texteditor erfolgen. Arbeitskreis am ISB IT-8-I-Vorhaben-CAD_WEB Seite 2 von 6

3. Unterrichtsbeispiel Puzzle erstellen, zusammensetzen und als Explosionsdarstellung ausgeben. 1. Puzzle in 3D-CAD erzeugen - Einzelteile nach Skizzen oder Zeichnungsangaben in 3D erstellen - Die Teile aus einem Ordner abrufen und mit den entsprechenden Beziehungen montieren - Durch Shading und Rendering können den einzelnen Teilen Farben oder Oberflächentexturen zugeordnet werden. - Die Baugruppe lässt sich als Explosionsdarstellung ausgeben. Dabei kann zwischen einer automatischen Zerlegung und einer selbst definierten Darstellung gewählt werden. - Im Shading-Modus als VRML- Datei abspeichern 2. VRML-Viewer installieren - Um die VRML-Datei anzeigen zu können, benötigt der Browser ein entsprechendes Plug-In. - Unter der Adresse: http://www.parallelgraphics.com kann der Cortona VRML-Client kostenlos herunter geladen werden. Der Cortona VRML-Client ist in der Lage, virtuelle Welten darzustellen und in ihnen - über Maus oder Tastatur - zu navigieren. Dies ist vergleichbar mit einer Kamerafahrt auf ein 3D-Objekt zu oder um ein 3D-Objekt herum. Die Navigationstechniken Gehen, Fliegen, Prüfen erlauben das individuelle Manövrieren. - Die Installation erfolgt automatisch. Bei richtiger Installation wird sofort ein Beispiel sichtbar. - Der Viewer ist mit und ohne Navigationsleisten darstellbar. Arbeitskreis am ISB IT-8-I-Vorhaben-CAD_WEB Seite 3 von 6

Eine HTML-Seite erstellen. Der Buchhandel und das Internet bieten eine Vielzahl von Hilfen zum Erstellen von Web-Seiten an. Für den Anfang genügen die wichtigsten Befehle. Die Tags (Steueranweisungen) unterscheiden sich in Einleitungs- (< >) und Abschluss-Tags (</ >). Die Einleitungs-Tags können ein oder mehrere durch Leerzeichen getrennte Attribute enthalten. Die Reihenfolge der Attribute ist beliebig. An dieser Stelle kann keine ausführliche Beschreibung eines HTML-Skripts erfolgen, es sollen lediglich die wichtigen Schritte deutlich werden. 1. Das Grundgerüst - In einem einfachen Texteditor werden Anfang und Ende, Kopf (head) und Körper (body) definiert. - Wichtig ist, vorher bereits genau zu planen, was, wie und wo dargestellt werden soll. Dazu ist die Kenntnis der Möglichkeiten notwendig. 2. Die wichtigen Tags für den Anfang <HTML> </HTML>, schließen ein Dokument ein <HEAD> </HEAD>, der Dokumenten-Kopf <TITEL> </TITEL>, der Dokumenten-Titel <BODY> </BODY>, der Hauptteil <BR>, Zeilenumbruch <P> </P>, Absatz <H1...7> </H>, Größe von Überschriften <B> </B>, Fettschrift <I> </I>, Kursivschrift <U> </U>, Unterstrichen <FONT...> </FONT>, Schrift, -art, -größe <HR>, Linien <IMG SRC=... >, Grafik einfügen <A HREF=... > </A>, Link (Verweis) einfügen <!-- -->, Kommentar einfügen <CENTER> </CENTER>, Zentrier-Anweisung <TABLE></TABLE< umschließt eine Tabelle <TR> erzeugt eine Tabellenzeile <TD> erzeugt eine Tabellenzelle Achtung nicht alle Zeichen können in HTML dargestellt werden! (Beispiele) ä ist die Zeichenfolge ä < ist die Zeichenfolge < Ä ist die Zeichenfolge Ä ö ist die Zeichenfolge ö ß ist die Zeichenfolge ß > ist die Zeichenfolge > & ist die Zeichenfolge & " ist die Zeichenfolge " Arbeitskreis am ISB IT-8-I-Vorhaben-CAD_WEB Seite 4 von 6

3. Grafik einbinden <img src="[grafikquelle]" alt="[text]"> img = image (Bild), src = source (Quelle) alt = alternativer Text (kann entfallen) Quelltext: Darstellung im Browser: 4. Link zur VRML-Datei <a> </a> <a href="[linkziel]">linktext (Grafik)</a> a = anchor = Anker, href = hyper reference Quelltext: Darstellung im Browser: Arbeitskreis am ISB IT-8-I-Vorhaben-CAD_WEB Seite 5 von 6

4. Leistungserhebung Da es sich bei den oft wiederkehrenden Tags im HTML-Code um Grundwissen handelt, das im Zusammenhang mit Web-Seiten immer parat sein sollte, kann in einer Stegreifaufgabe oder in einem mündlichen Beitrag auf genaue Wiedergabe der Steueranweisungen Wert gelegt werden. Beispiel: Welche Anweisung wird in diesem Tag beschrieben? <img src="pics/quader.gif" width=200 height=78> Antwort: Ein Bildobjekt wird eingefügt. Quelle ist die Datei mit dem Namen quader und dem Dateiformat gif. Sie befindet sich relativ zum Stammverzeichnis im Ordner pics. Das Bild wird mit den Attributen Breite (Attributwert: 200 Pixel) und Höhe (78 Pixel) angegeben. Im Rahmen eines praktischen Leistungsnachweises kann eine umfassendere Aufgabe aus CAD und HTML gestellt werden. Beispiel: Konstruiere in CAD eine Schwalbenschwanzverbindung als Stück und Gegenstück. Veröffentliche das Ergebnis innerhalb einer HTML-Seite als Bild mit der Überschrift Schwalbenschwanzverbindung. Das Bild soll auf eine VRML-Datei verweisen, die im Browser angezeigt wird. Schwalbenschwanzverbindung Schwalbenschwanzverbindung Arbeitskreis am ISB IT-8-I-Vorhaben-CAD_WEB Seite 6 von 6