HIT-Projektwebseite mit Expression Web

Transkript

1 HIT-Projektwebseite mit Expression Web 1. Download der Musterwebseite vom Mechatronikwelt GoogleDrive. Zu finden im Ordner Musterweb18. ZIP Datei Musterweb18 herunterladen und im gewünschten Verzeichnis entpacken. 2. ExpressionWeb Software starten und Musterwebseite importieren. Site- >Site öffnen.

2 Auf Durchsuchen klicken. Den übergeordneten Ordner in dem die HTML Seiten enthalten sind auswählen. Und öffnen klicken.

3 Das Musterweb ist jetzt als verfügbare Seite eingetragen. Anschließend wieder öffnen klicken. 3. Auf der linken Seite wird nun der Site Explorer dargestellt. In der Mitte nochmals die Vollansicht. In der Liste befindet sich eine *.dwt-datei (dynamic web template). Ausgehend von dieser Seite können neue Seiten erzeugt werden.

4 4. Wird die dwt geöffnet kann am unteren Rand des Hauptfensters auf Teilen geklickt werden. Somit erhält man für jede Seite sowohl die Design- als auch die HTML Darstellung in einer geteilten Ansicht. 5. Informationen wie der Name des Projektes, die Teilnehmer usw., also Informationen die auf allen Seiten gleich sind können automatisch über das Template für alle Seiten angepasst werden. Die einzige Ausnahme ist hier die Index.html Seite. Diese wurde nicht aus dem Template erzeugt, da ihre Inhalte von den anderen abweichen. Als Beispiel wird hier gezeigt wie der Projektname für alle Seiten geändert und übernommen wird. a. In der Designansicht auf Projekt Name klicken. Dadurch springen wir auch in der Codeansicht an die entsprechende Stelle.

5 b. Nun den Text ändern. Achtung ändert man den Text in der Designansicht, kann es vorkommen, dass der Text nicht mehr FETT gedruckt ist. Daher kann man alternativ auch im Code ändern. Der Editor hat nun registriert, dass die Seite geändert wurde.

6 c. Wenn jetzt speichern geklickt wird kommt eine Abfrage, ob die Änderung für alle Seiten übernommen werden soll. Es ist zu sehen, dass die Änderung 33 Seiten betrifft. Nun auf Ja klicken um die Änderung zu übernehmen. Danach kommt die Bestätigung. Wenn nicht alle Seiten geändert wurden liegt dies daran, dass durch manuelle Änderungen in einer Seite die Verlinkung zum Template unterbrochen wurde.

7 Öffnet man nun Beispielsweise die Seite Team, sieht man, dass die Änderung durchgeführt wurde. 6. Im Template ist festgelegt, welche Inhalte der jeweiligen Seite (Bsp. Team) geändert werden kann. Diese Bereiche können mit dem Cursor angewählt und geändert werden. Wird im HTML Code der jeweiligen Seite der Bereich außerhalb des editierbaren Bereichs geändert wird die Seite vom Template getrennt. Dann ist diese Seite nicht mehr bei globalen Änderungen über das Template miteingeschlossen! 7. Um Inhalte wie Bilder oder Dokumente in die Webseite mit einzubinden oder einen Download zur Verfügung zu stellen muss zunächst der Inhalt

8 über den Explorer in den korrekten Ordner eingefügt werden. (Ordner: Bilder, Dateien, Protokolle) 8. Ein Bild kann auf der entsprechenden Seite wie folgt eingefügt werden. a. In den editierbaren Bereich klicken in den das Bild eingefügt werden soll. b. Anschließend Einfügen->Bild->Aus Datei... c. Navigieren Sie zu der Datei die im jeweiligen Musterwebordner angelegt ist und bestätigen Sie die Auswahl. Es wird gefragt ob man zusätzliche Informationen angeben möchte. d. Anschließend die Größe an den Ecken anpassen.

9 9. Die Webseite kann auf den Webspace des Hit-Servers hochgeladen werden. Hierzu muss zunächst eine neue Veröffentlichungseinstellung für diese Webseite durchgeführt werden. a. Einstellungen öffnen über Site->Veröffentlichungseinstellungen. b. Die Veröffentlichungseinstellungen sind am Anfang noch leer. c. Per Klick auf Hinzufügen legen wir neue Einstellungen an. Anschließend müssen die Felder ausgefüllt werden. i. Name: Hier steht der Name unter dem die Einstellung gespeichert wird. ii. Verbindungstyp: FrontPage auswählen iii. Speicherort: Ist die Adresse des Servers An der

10 Stelle MeinMusterweb muss der Name des Projektes eingetragen werden! Hier keine Umlaute und Leerzeichen verwenden! iv. Benutzername: mechatronikwelt v. PW: Mechatronik16 d. Anschließend auf Hinzufügen klicken. Dadurch wird die Einstellung gespeichert für diese Seite. Als nächstes OK.

11 e. Im nächsten Schritt wird nun mit dieser Einstellung veröffentlicht. Hierzu auf Site->Veröffentlichen klicken. Über den Link kann nun eine Verbindung aufgebaut werden. f. Nun wird beim ersten Mal gefragt ob ein neuer Ordner angelegt werden soll. Dies sollte nur beim ersten Mal auftauchen, da er auf dem Webspace noch nicht vorhanden ist. Sollte dies ein weiteres Mal auftauchen stimmt etwas mit den

12 Veröffentlichungseinstellungen nicht! Klicken sie dann nicht auf Ja, da sonst unnötigerweise ein weiteres Verzeichnis auf dem Server angelegt wird!!!!!!! Klicken sie stattdessen auf Nein und prüfen Sie die Einstellungen und versuchen Sie es erneut!!!! g. Nun kann es vorkommen, dass Windows ebenfalls nach den Zugangsdaten fragt. Geben Sie diese ein. mechatronikwelt Mechatronik16 h. Nun öffnet sich die Site-Ansicht für lokal und Online in einer geteilten Ansicht.

13 i. Auf der linken Seite können nun alle Inhalte markiert, die auf den Webspace übertragen werden sollen. Per Klick auf die Pfeile in der Mitte kann die Übertragung gestartet werden. Im unteren Bereich wird der Übertragungsfortschritt dargestellt.