Zusammengestellt für den Fachbereich Visuelle Kommunikation Robert Bossart, Dipl. Visueller Gestalter FH. Überarbeitete Version HSLU Februar 2013

Größe: px
Ab Seite anzeigen:

Download "Zusammengestellt für den Fachbereich Visuelle Kommunikation Robert Bossart, Dipl. Visueller Gestalter FH. Überarbeitete Version HSLU Februar 2013"

Transkript

1 1 Grundlagen und Programmeinführung Internet/Html/Dreamweaver HANDBUCH ZU INTERNET-GRUNDLAGEN UND DREAMWEAVER / HTML / CSS Grundlagen und Programmeinführungen für Visuelle GestalterInnen Begleitdokumentation zum Unterricht Mit Website-Anwendungsbeispiel Zusammengestellt für den Fachbereich Visuelle Kommunikation Robert Bossart, Dipl. Visueller Gestalter FH Überarbeitete Version HSLU Februar 2013 Die männliche Bezeichnung einer Person oder Funktion schliesst in den folgenden Inhalten auch dieweibliche mit ein.

2 2 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Inhaltsverzeichnis Inhaltsverzeichnis 1 Geschichte und Idee Internet (3) 2 Dreamweaver Übersicht (4) 3 Website-Beispiel mit Dreamweaver/CSS schrittweise aufbauen (5 22) Anhang 4 Browservorschau (23) 5 Code, Teilen, Entwurf (23, 24) 6 Bilformate jpg, gif, png (24) 11 Domain, DNS (Domain Name Server), Provider, Hosting, index.html (28) 12 Metatext und Favicon (28) 13 FTP File Transfer Protocol (29) 7 Photoshop-Bilder für Web speichern (24, 25) 8 Flash- und Bildimport (25) 9 Typografie (26, 27) 10 Farbe (27)

3 3 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Geschichte und Idee Internet 1 Geschichte und Idee Internet Ausgangspunkt ist das 1969 entwickelte ARPA-Net (Advanced Research Project Agency) des US Verteidigungsministeriums. Es wurde zur Vernetzung von Universitäten und Forschungseinrichtungen benutzt. Ziel des Projekts war zunächst, die knappen Rechenkapazitäten sinnvoll zu nutzen, zuerst in den USA, später weltweit. Die anfängliche Verbreitung des Internets ist eng mit der Entwicklung des Betriebssystems Unix verbunden. Nachdem das Arpa - net im Jahr 1982 TCP/IP adaptierte, begann sich auch der Name Internet durchzusetzen. Nach einer weit verbreiteten Legende bestand das ursprüngliche Ziel des Projektes vor dem Hintergrund des Kalten Krieges in der Schaffung eines verteilten Kommunikationssystems, um im Falle eines Atomkrieges eine störungsfreie Kommunikation zu ermöglichen. In Wirklichkeit wurden vorwiegend zivile Projekte gefördert, auch wenn die ersten Knoten von der ARPA finanziert wurden. Das World Wide Web (www) wird 1989 von Tim Berners-Lee am CERN-Institut in Genf iniziert. Tim Berners-Lee kann man also als Erfinder des Internets bezeichnen. Das CERN-Institut in Genf ist das weltgrösste Elementarteilchen- Beschleunigungslabor. Hier werden auf einer mehreren kilometerlangen, unterirdischen Bahn Protonen, Elektronen und andere Elementarteilchen beschleunigt und zur Kollision gebracht. Dadurch entstehen neue Teilchenkombinationen. Für die Auswertung der Flugbahnen werden Grossrechner mit enormen Rechenleistungen benötigt. Quasi als Nebenprodukt hat Berners-Lee das World Wide Web entwickelt, mit der Absicht ein Netzerk für die Datenkommunikation zu entwickeln. Heute wird am CERN intensiv am World Wide Grid entwickelt und geforscht, einem Netzwerk für verteilte Rechenleistung. Der Austausch und Zugriff von Daten war zuerst also auf interne Netze beschränkt und fokusierte sich auf reine Textdaten. Man hat aber schnell erkannt, dass die Welt überall durch ein Telefonnetz erschlossen ist und dieses Netz zum Transport der Daten genutzt werden konnte. Es brauchte dazu nur ein Modem. Im Jahr 2000 wird das Internet in den USA von der Hälfte der Bevölkerung genutzt, weltweit haben aber erst 5% der gesamten Bvölkerung Zugang haben weltweit ca. 16.9% der Bevölkerung einen Internetzugang. Hypertext, Html, Http Mit der Beschränkung auf den Austausch von Textdaten in frühen www s gab es lediglich die geniale Hypertextverknüpfung. Das waren Stichwörter, welche blau ausgezeichnet und unterstrichen waren. Wir kennen das heute noch, finden wir doch über solche Links weitere Angaben zu den entsprechenden Begriffen und Themen. Zum Transport von Webinhalten wurde HTTP, das Hyper Text Transfer Protocol definiert, zur Erstellung von Webpages HTML, die Hyper Text Markup Language. Diese Protokolle waren ursprünglich für reine Textdateien gedacht. Mit dem späteren Einzug der Bildwelten in Hyper Text ergaben sich zunehmend Probleme, welche wir heute noch wahrnehmen können. Das Platzieren von Bildern und Grafiken ist nicht so einfach wie in einem Grafiklayout-Programm zu bewerkstelligen. Die freie Schriftwahl ist stark eingeschränkt und war bei der Entwicklung unbedeutend. Um bestimmte Elemente an bestimmte Positionen zu bewegen, muss man sich einiger Ticks bedienen, welche heute mehrheitlich die grafischen Webeditoren übernehmen (Dreamweaver). Urprünglich gab es solche Tools nicht und der HTML-Code musste in Texteditoren geschrieben werden. Bis heute bedarf es meist einiger Anstrengungen, bis garantiert werden kann, dass eine Website auch auf allen Betriebssystemen und mit allen gängigen Webbrowsern funktioniert und so aussieht, wie sie aussehen soll. Die komplexen Webinhalte werden immer noch auf Basis des HTTP/ HTML-Protokolls erstellt und generieren mit den heutigen Ansprüchen komplexen Code im Hintergrund. W3C-Konsortium Tim Berners Lee wurde nach der Erfindung des Webs Direktor des World Wide Web Consortium (http://www.w3c.org). Diese Postition hat er bis heute behalten. Das W3C-Konsortium legt die Standards für das Internet fest. Formate wie PDF, CSS und viele, viele mehr werden und wurden vom W3C als Standard festgelegt. Heute beantragen viele Firmen neue Formate welche sie als Standard durchsetzen möchten, dazu ist die Anerkennung durch das W3C äusserst wichtig und hilfreich. Anerkennt das W3C diese Formate nicht, sind sie quasi schon wieder vom Tisch, da bei der Entwicklung von Browsern auf die W3C-Standards zurückgegriffen wird. Heute können Websites über das W3C validiert werden, d.h. man überprüft, ob eine erstellte Website den Vorgaben und Richtlinien des W3C entspricht und somit auch mit den entsprechenden Browsern kompatibel ist. HTML-Editoren / Dreamweaver / WYSIWYG Die Hyper Text Markup Language ist geblieben, dazugesellt haben sich, Java Script und Flash. HTML hat sich weiterentwickelt, XHTML ist definiert worden, CSS (Cascading Style Sheets) erleichtern die Arbeit, HTML 5 und CSS3 sind startbereit und lösen Flash ab, etc. Grundsätzlich arbeiten wir aber heute immer noch auf der Ursprungsbasis. Allerdings wurden grafische Editoren entwickelt, welche es auch den Gestaltern möglich macht, einfacher Websites in HTML zu erstellen. Im professionellen Bereich waren diese Applikationen lange Zeit Adobe GoLive und Macromedia Dreamweaver. Durch den Kauf von Macromedia durch Adobe, haben diese GoLive zugunsten von Dreamweaver aufgegeben. Heute ist es somit praktisch das einzige professionelle HTML Graifktool. Wir nennen es auch WYSIWYG-Editor, was soviel heisst, wie What You See Is What You Get. Die nächste Generation Editoren (Adobe Muse) stehen aber schon vor der Tür und werden die Arbeit auf einer grafischen Oberfläche weiter vereinfachen. Allerdings ist es oft hilfreich, den Code einer Website mindestens grob interpretieren zu können. Steht dieser Code doch auch allen Usern über die Webbrowser zur Verfügung. Durch Copy/Paste und Wertanpassungen können bestehende Websites oft als Vorlage und Lehrstück für eigene Sites gute Dienste leisten. Der Code liegt also quasi offen. Quelltextausschnitt der W3C-Site:

4 4 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Dreamweaver Übersicht 2 Dreamweaver Übersicht Sämtliche Paletten können über das Menü, >Fenster aufgerufen werden. Profil Einfügen (Bild-, Flashimporte, Layoutdarstellungen, Frames, Formulare, Rolloverbilder, Navigationsleisten, etc.), Arbeitsbereich Klassisch Erweiterungspaletten (Style-Sheets, Ebenen Java Scripts, etc.) Dateibrowser HTML-Dokument (mit Darstellungsoptionen- Werkzugen) Eigenschaften (enthält je nach ausgewähltem Objekt die wichtigsten Infos und Einstellmöglichkeiten bereit)

5 5 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel 3 Website-Beispiel mit Dreamweaver/CSS schrittweise aufbauen Auf den folgenden Seiten wird schrittweise und exemplarisch der Aufbau einer ganzen Website in Dreamweaver mit CSS aufgezeigt. Diese Abschnitte dienen als praktisches Anwendungsbeispiel. 01 Datenablage konsistent vorbereiten/einrichten In einem ersten Schritt legen wir uns einen sinnvoll aufgeteilten Projektordner an, denn nicht alle bearbeiteten und erstellten Dateien müssen am Schluss auf den Server geladen werden. Wir erstellen einen Projektordner mit folgenden Unerordnern: > Projektordner >AI (Adobe Illustrator-Dateien) >BU(Back Up) >FLA (Flash-Dateien) >Original Bilder > PNG_GIF_JPG >PSD (Photoshop-Dateien) >Upload (wird auf den Server geladen) >Webfonts 02 Site-Verwaltung in Dreamweaver CS6 (DW) >Site >Neue Site... Name der Site Pfad angeben Achtung: Keine Umlaute und Sonderzeichen Angaben zu Server-Verbindung wie in Cyberduck oder anderem FTP-App Neue Serververbindung einrichten weitere Attribute (z.b. neu Webfonts einbinden)

6 6 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel Verbindung zum entfernten Host Datenänderung/Links aktualisieren Projektauswahl Daten vom Server/Remote holen Daten auf den Server/Remote laden Lokal- oder Server-Anzeige Einblenden lokale Site und Remote-Site gleichzeitig (siehe unten rechts) Mein Projekt Zustand der Serververbindung

7 7 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel 03 Site verwalten >Site >Sites verwalten... Wird dieses Fenster geöffnet, erscheinen alle angelegten Projekte zur Auswahl. Nun kann ein Projekt markiert werden, über den Stiftbutton können die Einstellungen von Seite 21/Punkt 02 bearbeitet oder ergänzt werden. Das about_us.html -File liegt somit im Ordner about_us und dieser wiederum in unserem Projektordner. Wir können durch Drag n Drop Ordner und Html-Files verschieben/ verschachteln, DW erkennt diesen Vorgang und fragt automatisch nach einer Aktualisierung der neuen Pfadverknüpfung. Wir legen folgende Struktur an: d) 2 Spalten, elastisch, linke Randseite, Header und Footer e) 2 Spalten, elastisch, rechte Randseite, Header und Footer etc. 04 Map und html-files anlegen Durch Rechtsklick auf unseren Projektordner in der Dateiverwaltung können.html-files wie auch neue Ordner angelegt werden. Neue Datei Neuer Ordner Die Files und Ordner müssen mit Kleinbuchstaben benannt werden, ohne Wortabstände und ohne Sonderzeichen. Es empfiehlt sich, vor Beginn der DW-Arbeit eine Sitemap oder eine Websitestruktur zurechtzulegen, um eine Übersicht zu erhalten, welche Ordner und Files benötigt werden. In unserem Projektordner oder Hauptverzeichnis benötigen wir das index.html Dokument. Nach diesem File wird beim Aufruf der Website automatisch gesucht. Dieses Dokument darf im Gegensatz zu weiteren Html s nicht in einen anderen Ordner gelegt werden. Die Strukturen sehen somit wie folgt aus, z.b.: 05 Vorgefertigte Layouts in DW verwenden Im Moment haben wir nur leere Html-Dokumente angelegt. Klicken wir doppelt auf index.html finden wir darin nichts. Es besteht nun die Möglichkeit, ohne eigene CSS-Regeln Layouts anzulegen: >Datei >Neu >HTML Nun können wir aus verschiedenen vorgegebenen Layouts auswählen, z.b.: a) 1 Spalte, elastisch, zentriert b) 1 Spalte, fixiert, zentriert c) 2 Spalten, elastisch, linke Randseite

8 8 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel Eine Klasse kann mit Doppelklick geöffnet und geändert werden: Wir wählen die klassiche Variante d aus, mit Header, Navi Left, Content right und Footer. Unten rechts wählen wir den Dokumententyp Doc Type XHTML Transitional oder HTML 5 und unter Layout CSS in stehen folgende Varianten zur Verfügung: in die Seite einbetten, im Head : alle CSS-Regeln werden im Dokumenten-Head eingebettet Neue Datei erstellen : empfohlen! Ein neues CSS-Dokument wird in meinem Projektordner angelegt, der Titel benennt die Layoutform. Dieses File erscheint im Dateibrowser im Projektordner auf der index-ebene. Die Site wird nun automatisch von DW mit Blindtext gefüllt. Wechseln wir zur CSS-Stil-Palette, finden wir dort unser CSS-File, klappen wir den Pfeil vor dem Namen auf, werden sämtlich verwendeten CSS-Klassen sichtbar. Eine andere Möglichkeit ist im Dateibrowser das CSS-File twocolelslthdr.css mit Doppelklick zu öffnen. Nun sehen wir das CSS als Code. DW kommentiert dabei mit grauer Schrift die Regeln. Hier kann direkt in den CSS-Code eingegriffen werden.

9 9 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel 06 Eigene CSS in DW anlegen Klicken wir auf das index.html -Dokument, sehen wir, dass noch keine Inhalte angelegt wurden oder CSS-Regeln festgelegt sind (bereits oben ausgewählte Layouts und Regelen müssen wieder gelöscht werden). Wir möchten nun ein Layout mit folgenden Komponenten erstellen: Header on the top Navigation on the left Information/Content on the right Footer on the bottom Dazu wechseln wir zur CSS-Stile -Palette und klicken unten rechts den Button Neue CSS-Regel: DW füllt dabei automatisch links oben in der entsprechenden Box einen Text ein, dieser kann gelöscht werden. Nun stehen in einem Dialogfenster folgende CSS-Regel-Typen zur Auswahl: Klasse: kann auf beliebige HTML-Elemente angewendet werden ID: kann jeweils nur auf ein HTML-Element angewendet werden Tag: definiert ein bestimmtes HTML-Element neu Zusammengesetzter Ausdruck: Wird auf eine von mir bestimmte Auswahl angewendet Wir wählen ID aus, um einen bestimmten Bereich mit spezifischen Qualitäten der Website zu bearbeiten. Wir vergeben einen Namen: container (dieser ist wichtig und beinhaltet alle anderen Bereiche) Weitere Einstellungen: Neue Style Sheet Datei (wird als CSS separat gespeichert) Wir vergeben einen sinnvollen Namen, z.b. example_site.css Anschliessend werden im neuen Dialogfeld unter Box folgende Einstellungen vorgenommen: Width: 800 px (Breite) Height: 800 px (Höhe) Float: left (Positionierung) Bis jetzt hat sich in unserem index.html aber noch nichts geändert. Das hat damit zu tun, dass die CSS-ID-Regel noch nicht zugwiesen ist. >Einfügen >Layoutobjekte >Div-Tag Insert DivTag-Fenster öffnet sich, Klasse oder ID zuweisen. Wir weisen unter ID im rechten Dropdownmenü unseren vorhin angelegten CSS-Stil container aus. Ok und der Container wird im index.html Dokument angelegt. Um eine bessere Übersicht zu erhalten, kann am rechten, unteren Fensterrand auf die Lupe gewechselt werden. Mit gedrückter Alt- Taste verkleinert die Lupe die Ansicht. Wir haben nun einen Gesamtcontainer angelegt, der alle anderen Bereiche umfasst. Darin wollen wir nun als nächstes den Header anlegen: Click in den soeben angelegten Container! unten links: >Einfügen >Layoutobjekte >Div-Tag Dialogfenster Div-Tag einfügen : bei ID manuell header eingeben darunter Neue CSS-Regel auswählen Neue Regel unserem bestehenden CSS, z.b. example_site.css anfügen, Ok.

10 10 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel Wir kehren zum Div-Tag Fenster zurück. Bei ID steht nur header zur Auswahl, da ID s nur einmal auf ein Objekt angewendet werden können. Container haben wir bereits vorhin zugewiesen. Wir bestätigen nochmals mit OK. Nun befindet sich also im container der header. Klicken wir am unteren, linken Fensterrand in den div#header button, so wird dieser blau hervorgehoben. Klicken wir auf div#container, so wird dieser ausgezeichnet. In einem nächsten Schritt legen wir den Navigationsbereich an: Klick in den div#container, bzw. in den content (also nicht in den header) Vorgehensweise wie beim Anlegen des header, siehe vorher Name: nav, Width 125 px, Height 500 px, Float: left darauf achten, dass vor dem Bestätigen Nach dem Tag ausgewählt ist und hier header Als Letztes bleibt noch der footer, welchen wir nach obigem Muster wie folgt anlegen: Name: footer, Width 800 px, Height 40 px, Float left Fertig! Wir haben unser eigenes Layout angelegt. 07 Tags und spezifische Sektionen re-definieren Wir möchten grundsätzliche Gestaltungselemente definieren, wie z.b. Schrift, Schriftfarbe, Hintergrundfarbe, Links, etc. Dazu legen wir in der CSS-Stil Palette eine neue Regel an, wählen anschliessend Tag (definiert ein bestimmtes, bestehendes HTML- Element neu). Im Selektor wählen wir aus der Pulldownliste body aus. Im anschliessenden Dialogfenster die Schriftart Arial und weisse Schrift auswählen, bei der Hintergrundfarbe Schwarz einstellen. In der folgenden Box geben wir die Grösse dieser an, siehe folgender Screenshot (Breite 799 für Boxplatzierung, danach auf 800px): Nun legen wir in gleicher Weise den Maincontent links von der Navigation an: Name: maincontent, Width 600 px, Height 600 px, Float left Nun stellen wir fest, dass die Masse der Container noch nicht optimal abgestimmt sind. Wir korrigieren folgendermassen: In der Palette CSS-Stile durch Doppelklick auf die entsprechende Regel: maincontent: Width 675 px nav: Height 600 px

11 11 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel Als nächstes definieren wir das Aussehen der Links. Dazu wählen wir im Maincontainer den Begriff Inhalt aus dem vorgegebenen Text aus. Um ein Linkverhalten zu erzeugen, ohne wirklich einen Hyperlink zu setzen (wir kennen diesen ev. im Moment noch gar nicht), fügen wir in der Eigenschaftenpalette bei Hyperlink ein Rautensymbol # ein. Dieses können wir mit Alt 3 erstellen. Der Link wird standardmässig blau unterstrichen dargestellt. Auf dem schwarzen Hintergrund ist der Kontrast sehr schlecht. Wir ändern die Linkfarbe auf Orange: Wir legen dazu eine neue CSS-Regel an, wie oben für die Schrift und Hintergrundfarbe, also ein Tag, bei Selektor wählen wir aber a (Anker) für einen Link aus. In der anschliessenden Dialogbox wählen wir als Schriftfarbe orange und bei Unterstreichen none, fertig, Link ist mit einer CSS-Regel geändert. Nun setzen wir in der Navigation exemplarisch drei Menüpunkte: About us Galleries Contact Diese Menüpunkte sind schlussendlich auch Links, sollen aber anders aussehen als der soeben definierte a-link. Folgendes Vorgehen: About us markieren und in der Eigenschaftenpalette bei Hyperlinks mit Alt 3 eine Raute einfügen, damit ein Link entsteht. Dieser ist nun ebenfalls orange. Um das zu ändern, erstellen wir in der CSS-Stile -Palette eine neue Regel, wählen Zusammengesetzter Ausdruck. Im Selektor finden wir nun die ganze Verschachtelung der Div-Tags, bis zum Link. Über die Buttons Weniger Details oder Mehr Details lässt sich entscheiden, innerhalb welches Bereiches die Regel greift. Wir benötigen hier #nav a (Mit diesem Selektornamen wird Ihre Regel angewendet auf alle <a>-elemente die sich innerhalb eines beliebigen HTML-Elements mit der ID nav befinden.) In der folgenden Dialogbox können wir nun eine graue Schriftfarbe definieren und den Schriftschnitt bold machen. 08 CSS-Klassen in DW anwenden Klassen entsprechen Zeichenformaten in InDesign (nicht Absatzformate!) Wir fügen als erstes in unserem Maincontent Blindext nach der Titelzeile hinzu. Das lässt sich am elegantesten mit der Adobe-Extension Lorem ipsum bewerkstelligen, diese kann von Adobe heruntergeladen werden. Wir setzen über diesen Blindtext nun noch den Titel Willkommen auf der Website. Die so eingefügten Schrift-Abschnitte sind nun weiss und in Arial, unser Body-Tag bestimmt dies. Der Lauftext soll nun kleiner sein, als die Titel. Dazu erstellen wir wiederum in CSS-Stile eine neue Regel, diesmal eine Klasse und geben ihr im Selektor einen eigenen, sinnvollen Namen, z.b. Lauftext. Im anschliessenden Dialogfenster wählen wir wiederum die Schriftart Arial in weiss, aber in der Grösse 10px.

12 12 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel Wieder einmal tut sich nichts, die Klasse ist noch nicht angewendet, d.h. der Lauftext muss ausgewählt sein, in der CSS-Stile -Palette wählen wir auf unsere.lauftext Regel und mit der rechten Maustaste/ Context-Menü geben wir aus der erscheinenden Auswahl den Befehl Anwenden, voilà. Nun machen wir den Titel über dem Lauftext noch blau, etwas grösser und in Versalbuchstaben. Wir legen wieder eine neue CSS-Klasse an, diesmal nennen wir sie z.b..titel. In der folgenden Dialogbox können wir die gewünschten Attribute vergeben, anschlissend wiederum den Titel markieren und die Klasse aus CSS-Stile mit rechter Maustaste anwenden. Wir setzen nochmals zwei Abschnitte Lauftext aus der Extension Lorem unter den Titel Navigiere links, markieren diese und weisen die Klasse.lauftext zu. Am Schluss löschen wir noch die Kopfzeile Raum für den Inhalt von id maincontent. 09 Feineinstellungen Als erstes stellen wir das Padding ein. Mit Padding ist der Abstand innerhalb eines Div-Tags zum Rand gemeint. Also z.b. den Typoabstand zur Boxrand. Im Moment klebt die Typo an den Div-Tag-Rändern. Wir gehen zur CSS-Stile -Palette und klicken dort maincontent doppelt an. Nun stellen wir beim Padding Right und Left je 15 px ein. Gleichzeitig müssen wir die gesamte Boxbreite von 675 px auf 645 px reduzieren, andernfalls findet durch das Padding eine Textverdrängung statt und der ganze Maincontent wird aus seiner Position verschoben. Weiter machen wir aus unseren drei Navigationspunkten links mit Hilfe von Alt 3 je ein Link aus dem Text. Das nav a Compound-Format wird automatisch in nav-div-tag erkannt und zugewiesen. Nun ändern wir die Schrift in Versalien und verringern den Zeilenabstand. Dazu rufen wir aus der CSS-Stile -Palette das nav a Compound-Format auf und ändern Text-transform auf uppercase und für den Zeilenabstand Line-height auf 2 px. Wir fügen am Ende unseres Lauftextes noch eine Zeile hinzu, z.b. Navigiere links. Dies wird nun automatisch in 10px weiss formatiert. Möchten wir das als Titel formatiert haben, wählen wir die entsprechenden Wörter aus und weisen die Klasse.titel zu. Als nächstes ändern wir die Hintergrundfarbe des Headers. Wiederum in der CSS-Stile -Palette die ID header doppelklicken und in der Dialogbox die Hintergrundfarbe auf grau stellen. Schliesslich stellen wir das Padding bei der Navigation links auch auf 15 px (CSS-Stiele >nav a Doppelklick >Padding left 15 px). Als letztes wechseln wir die Titelfarbe von Blau auf Orange (CSS-Stile >.titel >Schriftfarbe Orange). All diese Änderungen können jeweils auch in der Eigenschaftenpalette unter der CSS-Stile -Palette gemacht werden, anstelle des Aufrufens der Dialogboxen. Unter Eigenschaften hinzufügen wird es aber recht schnell unübersichtlich.

13 13 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel 10 Hintergrundelemente hinzufügen und Photoshop-Smart-Objekte importieren Für diese Ausgangslage nehmen wir als erstes den grauen Hintergrund im header wieder heraus (>CSS-Stile >header >BG Color). Weiter setzen wir das Marging des body auf 0 px (wird später wichtig): >CSS-Stile >body >Marging >für alle 0 px. Nun plazieren wir im Header ein Logo. Dazu löschen wir erst mal die automatisch generierte Header-ID-Zeile. Das PSD-Logo legen wir in unseren Upload-Ordner! Klicke ich nun in den Anfang des Headers, kann ich auch meinem Dokumentenbrowser die Photoshop-Datei direkt in den Headbereich ziehen. DW erkennt die PSD-Datei, welche ja so nicht verwendet werden kann, öffnet einen Einstelldialog, wo ich die bekannten Webeinstellungen für jpg und gif vornehmen kann. Bestätigen fertig. Eine jpg-datei mit gleichem Namen wird automatisch in meinem Upload-Ordner hinzugefügt. Das eingefügte Bild zeigt links oben ein Verlinkungssymbol. Wird das originale Photoshop-Bild nachträglich bearbietet (kann aus dem Dokumenten-Browser in DW geöffnet werden), so macht das Verlinkungslogo darauf aufmerksam (roter Pfeil). Mit Mausklick rechts auf das Symbol, kann ich Von der Originaldatei aktualisieren. Als nächstes ersetzen wir den schwarzen Hintergrund durch ein vorbereitetes Background-Bild mit einem Schwarz-Dunkelblau-Verlauf. Wir bearbeiten im Tag body den Hintergrund und fügen unser Bild ein. Wir kacheln es auf der x-achse, nicht aber auf der y-achse. Allfällige bereits definierte Hintergrundfarben im header, nav, maincontent oder footer müssen wieder entfernt werden, sonst wird das BG-Bild nicht sichtbar.

14 14 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel Nun erstellen wir in einem nächsten Schritt einen internen Link zu einer anderen Html-Datei. Wir öffnen dazu aus dem Dateibrowser unsere Html-Datei about_us.html im Ordner about_us. Hier schreiben wir eine Text rein, z.b. Das ist die About Us Site. Diese soll nun aus unserer Index-Navigation mit ABOUT US aufgerufen werden: Markieren des ABOUT US Menüpunkts im index.html und bei Hyperlinks über das Ordnersymbol zur about_us.html -Datei browsen. Nun möchten wir auch den CONTACT Menüpunkt zur entsprechenden Site verknüpfen. Dazu müssen wir im Dateibrowser zuerst die contact.html Datei anlegen. In die Datei selber schreiben wir Contact. Es gibt auch eine andere Variante, den Menüpunkt mit der entsprechenden Datei zu verknüpfen: Dazu müssen wir den Dateibrowser/ Palette aus den Seitenpaletten lösen, damit diese als eigenes Fenster dargestellt wird. Der CONTACT Menüpunkt muss markiert sein (als Link eingerichtet >Alt 3). Jetzt packen wir das Fadenkreuz-Symbol welches nach Hyperlinks in der Eigenschaftspalette zu finden ist mit der Maus und ziehen mit dem entstehenden Pfeil auf die entsprechende Html-Datei im Dateibrowser. Das funktioniert auch mit mit Bildern. Im Maincontent schaffen wir uns etwas Platz nach dem ersten Titel WILLKOMMEN AUF DER WEBSITE. Im Uploadordner im Dateibrowser müssen wir einen Bilderordner anlegen mit einem Thumbnail-Foto bild1_240.jpg mit einer Bildbreite von ca. 240 px und einer grösseren Bildvariante bild1.jpg mit einer Bildbreite von ca. 900 px. Aus dem Dateibrowser kann nun das Thumbnailbild einfach an die Cursorstelle im Maincontent gezogen werden. In der Eigenschaftenpalette erscheint nun das Bild, wenn es in Maincontent ausgewählt is als Quelle. Darunter finden wir den Hyperlink. Wir ziehen wiederum mit dem Fadenkreuz-Symbol auf die grössere Variante des gleichen Bildes und geben beim Ziel _blank ein. Im Browser testen, beim Klick auf das Thumbnailbild geht ein neues Fenster auf und eine grössere Bildvariante erscheint. 11 Dokumente, Grafiken und Websites verlinken Als erstes erstellen wir einen Link, der eine externe Website aufruft. Nach dem 3. Abschnitt im Maincontent fügen wir den Linktext Click here to go to Google ein. Wir geben nun in der Eigenschaftspalette bei Hyperlink den entsprechenden Webaufruf ein: und damit sich dieser Link anschliessend in einem neuen Fenster öffnet definieren wir unter Ziel: _blank. Nun erscheint unser Link in Orange, dies differenziert sich nicht von den orangen Titeln. Somit rufen wir den CSS-Stil für die Links auf: a und ändern dort die Link-Schriftfarbe von Orange auf ein Gelb. Als nächstes erstellen wir einen Anker: Zuerst fügen wir 6 Abschnitte Blindtext am Ende des Maincontent ein. Wir formatieren diesen als.lauftext. Vor dem letzten Abschnitt fügen wir den Text Unten ein und erstellen daraus einen Link, und weissen den Stil titel zu. Unter dem eingefügten Bild setzen wir einen neuen Text: Gehe zum Ende. Wir scrollen runter zum Titel UNTEN, klicken an den Anfang und fügen über das Menü von DW einen Anker ein >Einfügen >Benannter Ankerpunkt. Es erscheint ein Dialogfenster, wir geben den Namen bottom. Der Anker wird eingefügt.

15 15 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel Was nicht schön ist, ist der entstandene Textüberlauf im Maincontent. Die Box ist zu klein für die vorgegebenen Textmenge, der Footer befindet sich nicht mehr unterhalb des Maincontent, das Layout ist unbrauchbar. Wir korrigieren folgendermassen: Palette CSS Stile #container : Height 800 und px löschen #maincontent : Height 600 und px löschen Fixed! (beim Testen im Browser daran denken, die Site neu zu laden!) 12 Webwidgets in DW installieren Eine vorgefertigte Galerie soll eingebaut werden. Im Menü fügen wir den Punkt PH GALLERY hinzu, für Phat Gallery so heisst unsere fertige Galerie, die wir verwenden wollen. In Hyperlinks setzen wir wieder die Raute, damit ein Link entsteht. Die benötigte Galerie ist eine DW-Extension. Wir rufen die Funktion Web-Widgets suchen auf, oben links, drittes Icon. erstellt werden. Dieser kann auch für die Software-Trialversionen verwendet werden. Die Galerie/Extension wird auf den Computer geladen und wir können diese installieren. Anschliessend muss DW beendet und neu gestartet werden. Oben rechts finden wir einen neuen Tab mit der entsprechenden Galerie. Im Dateibrowser brauchen wir ein neues Html-File, wir nennen es phatfusion.html. Zusätzlich legen wir noch einen Ordner im Dateibrowser an, mit dem Namen phatfusion und ziehen das phatfusion.html in diesen Ordner. Diese Html-Datei muss nun geöffnet werden, um darin die Galerie anzulegen. Oben rechts (siehe oben) den Reiter phatfusion auswählen und drunter das pf icon anklicken die Galerie ist erstellt. Datei sichern, ein Dialogfenster fragt, ob Abhängige Dateien kopiert werden dürfen, bestätigen. Beispielbilder werden in die Galerie geladen und im Dateibrowser im phatgalerie-ordner einige Dateien hinzugefügt. Wir möchten nun aber unserer eigenen Bilder verwenden. Dazu benötigen wir einen Ordner mit der Bezeichnung phatfusion_bilder, darin sind unsere Fotos enthalten, jedes zweimal, einmal Thumbnail und einmal grösser: Zurück zum Text Gehe zum Ende, diesen markieren, runterscrollen zu UNTEN, in der Eigenschaftenpalette mit dem Fadenkreuzsymbol auf den Anker ziehen. Nun kommen wir auf die Adobe-Website, dort gibt es verschiedene Extensions zur Auswahl. Wir suchen nach Phatfusion Slideshow (Freeware). Um diese Estension herunterzuladen benötigen wir einen Adobe Account. Falls nicht vorhanden kann dieser problemlos Thumbnail: 100 x 67 px (bild-1_thumb.jpg) Grossbild: 450 x 299 px (bild.-1.jpg) Den phatfusion_bilder-ordner mit den entsprechenden Fotos legen wir in den Upload-Ordner unseres Projekts und da in den phatfusion- Ordner. Jetzt müssen wir nur noch aus der Galerie die neuen Bilder verknüpfen.

16 16 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel Mit dem Fadenkreuzsymbol weisen wir aus der Eigenschaftspalette unter Quelle das Thumbnail im Dateibrowser zu und unter Hyperlink die Grossansicht des Fotos fertig. 13 Video und Code von externen Sites einbetten Durch die vielen Möglichkeiten von Videohostings auf externen Servern (Youtube, Vimeo, etc.) ist es nicht unbedingt nötig, Videos in die eigenen Sites zu importieren. Hier wird als Beispiel ein Video von der Youtube Website eingebettet. Diese Methode ist heute am meisten verbreitet. Wir fügen in unserem Menü einen neuen Punkt ein, VIDEO mit einer Raute (Alt 3) im Hyperlink-Fenster. Im Dateibrowser legen wir die Datei video.html an und linken diese zu unserem Menüpunkt VIDEO. Die video.html - Datei öffnen, sie ist noch leer. Nun wechseln wir in den Browser und suchen uns z.b. auf YouTube das entsprechende Video. Unterhalb des Videos gibt es den Button Teilen >Einbetten. Rufen wir disen auf, so erscheint ein HTML-Code in einem Fenster. Diesen Code kopieren wir uns. Wir wechseln zur Code-Ansicht, schaffen etwas Platz zwischen den Bodytags <body> </body> und fügen den kopierten YouTube-Code dazwischen ein. Anschliessend gehen wir zurück zu DW. Fügen wir nun den Code in unseren Content des Videodokuments, so wird dieser Code einfach als Html-Text dargestellt, mit Video ist gar nichts los. Jetzt können wir zur Entwurfsansicht zurückwechseln, das Dokument speichern und im Browser testen. Auf diese Weise können auch Slideshows von z.b. Flickr eingebettet werden, ein Account/Login ist nötig, damit der Code kopiert werden kann.

17 17 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel 14 DW-Template erstellen Bis hierhin haben wir verschiedene Dateien angelegt. Aber das Problem ist, dass diese Html-Dateien keine kohärenz haben, d.h. nur das index.html entspricht den vorgegebenen Layoutvorstellungen. Alle anderen Dateien sind nicht konsistent, weisen z.b. gar keine Navigation auf. Diese kann im Moment nur über dan Browser-Zurück- Button geschehen. Abhilfe schafft hier ein DW-Template. Damit können auch bestimmte Bereiche gesperrt und andere Bereiche zur Bearbeitung bestimmt werden. index_new.html in index.html um. Links aktualisieren und Dokument öffnen. Unser Layout ist nicht sichtbar. Wechsel zur Palette Elemente, der zweitunterste Button auf der linken Seite zeigt die Vorlagen. Als erstes legen wir über das Menü >Datei >Neu eine leere XHTMLoder HTML 5-Datei an. Nun kopieren wir den ganzen Inhalt aus dem Maincontent des index.html und fügen diesen in das leere Dokument ein. Das Layout scheint zerstört, Referenzen zu Files (Bilder) sind defekt, etc. Dokument unter dem Namen index_new.html speichern (in den Uploadordner des Projekts), alle Links/Referenzen funktionieren augenblicklich wieder. Dokument schliessen. In unserem alten (gelayouteten) index.html-file löschen wir nun den ganzen Inhalt aus dem Content. Den Logo-Head (Bild) verknüpfen wir noch als Link zum index.html (über Eigenschaftenpalette, Hyperlink, Browse). Weiter definieren wir den editierbaren Bereich, das ist der Maincontent. In diesen klicken wir und wählen aus dem Menü >Einfügen >Vorlagenobjekte >Bearbeitbarer Bereich. Ein Dialogfenster fragt nach dem Namen dieses Bereichs, wir geben maincontent ein. Dieser Bereich erhält nun eine blaue Bezeichnung, darunter als Platzhalter der Text maincontent, diesen Text können wir löschen. Jetzt ziehen wir das general Dokument aus den Elementen in das geöffnete index.html. Ein Dialogfenster erscheint. DW möchte den Body auflösen, wir ordnen diesen dem maincontent zu (siehe Screenshot). Dokument unter >Datei > Als Vorlage speichern speichern im folgenden Dialogfenster einen Namen vergeben, z.b. general. Anschliessend die abgefragten Links aktualisieren. Im Titelkopf wir dieses Dokument nun als <<Vorlage>> general.dwt benannt. Wir schliessen dieses Vorlagendokument und gehen zum Dateibrowser und löschen unser index.html. Dafür benennen wir das

18 18 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel Nun sollte die index.html-site wieder so aussehen, wie wir sie gestaltet und programmiert haben. Manchmal verschiebt sich das Layout und das Padding der maincontent-box muss nachjustiert werden. Die nav und header sind gesperrt und können nur in der vorlage verändert werden. Dokument sichern und schliessen. video.html öffnen, aus den Elementen das Template general draufziehen, sichern, fertig. Mit allen unseren Dateien verfahren wir so. Darauf achten, dass die Links aus der Navigation keine Dateien in neuen Fenstern (_blank) aufrufen, sonst entstehen weisse Fenster zwischen den Seitenwechseln. Achtung: Die phatfusion-galerie funktioniert so nicht, da sie selber komplex aufgebaut ist, mit eigenen CSS und Javascript gespickt ist. Wir sehen später, wie wir ein solches Widget elegant in einem neuen Fenster öffnen können. Unsere Vorlage kann nun auch beim erstellen einer neuen Datei im folgenden Dialogfenster aus den Vorlagendateien ausgewählt werden. Nun klicken wir also zwischen die roten Linien und wechseln in unseren Reitern zu Allgemein, wählen dort eine Tabelle aus und legen diese folgendermassen an: Jetzt wechseln wir in DW wieder zum Reiter Formulare, um zwischen Textfeldern, Radiobuttons und Sendbuttons auszuwählen. Als erstes legen wir ein Textfeld an, 2. Button von links, ein Dialogfenster folgt: 15 Kontaktformular einrichten Zu einer Website gehört auch ein Kontaktformular. Ein solches haben wir schon eingerichtet und wahrscheinlich auch schon die Vorlage zugewiesen. Wir öffnen also contact.html und beginnen die erset Anweisung in das türkisfarbene Feld zu schreiben: Als nächstes müssen wir eine Art Formular-Schale anlegen. Oben rechts in DW gibt es den Reiter Formulare, darunter ganz links den Button Formular, diesen drücken wir und bekommen im Maincontent zwei rote Begrenzungslinien, die Schale unseres Kontaktformulars. Im Folgenden brauchen wir eine Struktur innerhalb dieser Schale. Diese lässt sich viel einfacher mit einer Tabelle anlegen als mit CSS, funktioniern tut diese mit allen gängigen Browsern. Jetzt beginnen wir die Tabelle mit unseren Angaben zu füllen, z.b. in dieser Art:

19 19 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel Die Anweisung, was auszufüllen ist, wird leider über dem Feld plaziert. Wir löschen diese wieder, klicken ins Textfeld, gehen zur Eigenschaftenpalette, und schreiben dort unter Anfangswert Bitte Vornamen eintragen. Genauso verfahren wir bei Nachname und . Als nächstes brauchen wir zwei Radio-Buttons für Newsletter. Wir klicken in die Zelle und wählen das 7. Icon im Formular Tab. Dialog: ID: _list_yes Radio Button auswäheln, zur Eigenschaftspalette wechseln Aktivierter Wert: yes Optionsschalter: include_ _list Rechts vom Radio Button selber Ja schreiben Nun praktisch das selbe mit dem No-Button: Wir klicken in die Zelle und wählen das 7. Icon im Formular Tab. Dialog: ID: _list_no Radio Button auswäheln, zur Eigenschaftspalette wechseln Aktivierter Wert: no Optionsschalter: include_ _list Anfangsstatus: Aktiviert Rechts vom Radio Button selber Nein schreiben Unter Infos über: erstellen wir ein Dropdown-Menü zur Auswahl. 9. Icon im Formular-Reiter. Dialogfenster: info_on Menü auswäheln In der Eigenschaftspalette zwischen Menü und Liste wählen, wir wählen Liste über Button Listenwerte Dialogfenster aufrufen Folgende Listenwerte eintragen: Zeitplan zeitplan Konsultation konsultation Preise preise Bitte wählen none Über die Pfeiltasten oben am Dialogfenster verschieben wir den letzten Punkt Bitte wählen an die erste Stelle. Für Kommentare verwenden wir das 4. Icon im Formular-Reiter Textbereich ID: comments Eigenschaftspalette die erforderlichen Attribute einstellen (selbsterklärend Zum Schluss benötigen wir noch einen Submit und einen Reset Button. Das 13. Icon im Formular-Reiter ist die richtige Wahl. Klick in Zelle und auf Button-Tool ID: submit Zweiter Button: ID: reset Jedem Button in der Eigenschaften-Palette das richtige Verhalten zuordnen (Senden, Zurücksetzen).

20 20 Grundlagen und Programmeinführung Internet/Html/Dreamweaver Website Anwendungsbeispiel Um das Formular versenden zu können, brauchen wir ein verstecktes Feld, wo wir z.b. eine Ziel- adress angeben können. Der 3. Knopf im Formular-Reiter ist für ein solches verstecktes Feld vorgesehen. Wir setzen es links neben den Submitbutton in die entsprechende Zelle. In der Eigenschaftpalette geben wir bei Versteckter Wert ein, bei Wert die Ziel adresse des Formularempfängers. Im folgenden Dialogfenster durchsuchen wir als erstes die Dokumente und geben den Pfad zum Zieldokument an. Weiter können wir das Fenster in einer bestimmten Grösse öffnen lassen und bestimmen, welche Attribute das Fenster haben darf. Im Folgenden eine Einstellmöglichkeit: Als nächstes gehen wir zum Menü von DW >Fenster >Verhalten und kommen zum Taginspektor. Über den viereckigen +Knopf kann ein Verhalten ausgewählt werden, wir wäheln Browserfenster öffnen. Über den Server kann auch ein Redirect oder eine Bestätigung erstellt werden. Dazu setzen wir neben dem versteckten -Textfeld noch ein Zweites hin mit dem Versteckten Wert redirect, bei Wert Ich benötige also eine Domain und einen Server, sowie eine eingerichtete thanks.html Site, wo z.b. steht: Besten Dank für Ihr Interesse, wir werden umgehend mit Ihnen Kontakt aufnehmen. Speichern wir anschliessend die Vorlage, so müssen wir für alle verknüpften Dokumente aktualisieren, das übernimmt DW für uns. 16 Verhalten in DW Verhalten oder Behaviours sind fertige javascriptbasierte Befehle, die ein bestimmtes Verhalten produzieren. Z.B. möchten wir unsere phatfusion-galerie in einem Popup-Window öffnen, aber in fixer Grösse und ohne Browser-Navigationsleiste, etc. Diesem Beispiel widmen wir uns in diesem Kapitel. Dazu müssen wir das Template general editieren. Wir öffnen dieses Dokument. Dann markieren wir den PH GALERIE Link in der Navigation und löschen in der Eigenschaftspalette bei Hyperlink ein allfälliger Aufruf des phatfusion.html, bzw. setzen hier wieder eine Raute mit Alt 3 ein.

Schulung Open CMS Editor

Schulung Open CMS Editor Schulung Open CMS Editor Um Ihr Projekt im OpenCMS zu bearbeiten brauchen Sie lediglich einen Webbrowser, am besten Firefox. Vorgehensweise beim Einrichten Ihrer Site im OpenCMS Erste Schritte Wenn Sie

Mehr

Anleitung TYPO3. Inhalt 2 Login 4. Übersicht 5. Dateiliste 5 Dateien (Fotos, PDF) integrieren 5. Datei hochladen 6

Anleitung TYPO3. Inhalt 2 Login 4. Übersicht 5. Dateiliste 5 Dateien (Fotos, PDF) integrieren 5. Datei hochladen 6 Inhalt Inhalt 2 Login 4 Übersicht 5 Dateiliste 5 Dateien (Fotos, PDF) integrieren 5 Datei hochladen 6 Bild oder PDF auf den Server laden 6 Exkurs: Bilder herunter rechnen 7 Web 7 Module 7 Seite 7 Liste

Mehr

RÖK Typo3 Dokumentation

RÖK Typo3 Dokumentation 2012 RÖK Typo3 Dokumentation Redakteur Sparten Eine Hilfe für den Einstieg in Typo3. Innpuls Werbeagentur GmbH 01.01.2012 2 RÖK Typo3 Dokumentation Inhalt 1) Was ist Typo3... 3 2) Typo3 aufrufen und Anmelden...

Mehr

Gebrauchsanweisung Template Lernumgebung Einführung Übersicht:

Gebrauchsanweisung Template Lernumgebung Einführung Übersicht: Einführung Willkommen. Auf den nächsten Seiten erfahren Sie, wie Sie das Template Autodidaktische Lernumgebung benutzen, um Ihre eigene Lernumgebung zu erstellen. Sie werden Ihre Lernumgebung in Dreamweaver

Mehr

Dreamweaver 8 Homepage erstellen Teil 1

Dreamweaver 8 Homepage erstellen Teil 1 Dreamweaver 8 Homepage erstellen Teil 1 Voraussetzungen Das vorliegende Skriptum knüpft an das Skriptum Dreamweaver_Einführung an und setzt voraus, dass du dieses bereits durchgearbeitet hast. Planung

Mehr

Visual Web Developer Express Jam Sessions

Visual Web Developer Express Jam Sessions Visual Web Developer Express Jam Sessions Teil 1 Die Visual Web Developer Express Jam Sessions sind eine Reihe von Videotutorials, die Ihnen einen grundlegenden Überblick über Visual Web Developer Express,

Mehr

Dreamweaver 8 Homepage erstellen Teil 2

Dreamweaver 8 Homepage erstellen Teil 2 Dreamweaver 8 Homepage erstellen Teil 2 Voraussetzungen Das vorliegende Skriptum knüpft an folgende Skripten an und setzt voraus, dass du diese bereits durchgearbeitet hast. Dreamweaver_Einführung.pdf

Mehr

TYPO3 Redaktoren-Handbuch

TYPO3 Redaktoren-Handbuch TYPO3 Redaktoren-Handbuch Kontakt & Support: rdv interactive ag Arbonerstrasse 6 9300 Wittenbach Tel. 071 / 577 55 55 www.rdvi.ch Seite 1 von 38 Login http://213.196.148.40/typo3 Username: siehe Liste

Mehr

Rufen Sie im Internet Explorer die folgende Adresse auf: www.dskv.de/webedition

Rufen Sie im Internet Explorer die folgende Adresse auf: www.dskv.de/webedition Diese Kurzanleitung soll Ihnen eine schnelle und einfache Bearbeitung Ihrer Seiten ermöglichen. Aus diesem Grunde kann hier nicht auf alle Möglichkeiten des eingesetzten Content-Management-Systems (CMS)

Mehr

Über den Link Inhalte bearbeiten in der Navigation erreichen Sie den Online Editor.

Über den Link Inhalte bearbeiten in der Navigation erreichen Sie den Online Editor. Homepage bearbeiten mit dem ezillo.com Online Editor Bei ezillo.com können Sie für Ihre kostenlose Erotik Homepage eigene Unterseiten erstellen und bearbeiten. Dazu steht Ihnen mit dem Online Editor ein

Mehr

Einführung. Übersicht: Was Sie brauchen, bevor Sie anfangen Projekt in Dreamweaver anlegen. Austauschen der Logos Logo oben

Einführung. Übersicht: Was Sie brauchen, bevor Sie anfangen Projekt in Dreamweaver anlegen. Austauschen der Logos Logo oben Einführung Willkommen. Auf den nächsten Seiten erfahren Sie, wie Sie das bestehende Template Lernpfad benutzen, um Ihren eigenen Lernpfad zu erstellen. Sie werden Ihren Lernpfad in Dreamweaver anlegen,

Mehr

Anleitung zur Pflege der Homepage über den Raiffeisen-Homepage-Manager

Anleitung zur Pflege der Homepage über den Raiffeisen-Homepage-Manager Anleitung zur Pflege der Homepage über den Raiffeisen-Homepage-Manager Homepage-Manager Navigation Home Der Homepage-Manager bietet die Möglichkeit im Startmenü unter dem Punkt Home einfach und schnell

Mehr

Webseiten erstellen mit Dreamweaver

Webseiten erstellen mit Dreamweaver Dreamweaver Dreamweaver ist ein HTML-Editor der Firma Adobe Systems bestehend aus einer Kombination eines WYSIWYG-Editors (what you see is what you get) mit paralleler Quelltextbearbeitung. Dreamweaver

Mehr

Die Benutzeroberfläche von PDF Editor besteht aus den folgenden Bereichen:

Die Benutzeroberfläche von PDF Editor besteht aus den folgenden Bereichen: Bedienungsanleitung CAD-KAS PDF Editor 3.1 Die Benutzeroberfläche von PDF Editor besteht aus den folgenden Bereichen: Hauptmenu Werkzeuge zum Bearbeiten der Datei inblase2:=false; Einige Funktionen des

Mehr

Comic Life 2.x. Fortbildung zum Mediencurriculum

Comic Life 2.x. Fortbildung zum Mediencurriculum Comic Life 2.x Fortbildung zum Mediencurriculum - 1 - Comic Life Eine kurze Einführung in die Bedienung von Comic Life 2.x. - 2 - Starten von Comic Life Bitte starte das Programm Comic Life. Es befindet

Mehr

Erzherzog Johann Jahr 2009

Erzherzog Johann Jahr 2009 Erzherzog Johann Jahr 2009 Der Erzherzog Johann Tag an der FH JOANNEUM in Kapfenberg Was wird zur Erstellung einer Webseite benötigt? Um eine Webseite zu erstellen, sind die folgenden Dinge nötig: 1. Ein

Mehr

KEN, DTP, 07/ Produktion

KEN, DTP, 07/ Produktion KEN, DTP, 07/08 32 Produktion Siteverwaltung «Online» Siteverwaltung «Lokal» Sitestruktur Sämtliche Dateien einer (html, jpg, css), die am Ende der Produktion ins Internet gestellt werden, müssen in einem

Mehr

Dokumentation Eigenwartung

Dokumentation Eigenwartung Inhaltsverzeichnis 1 Allgemeines... 3 1.1 Copyright... 3 1.2 Einstieg... 3 2 Ordner Navigation... 4 3 Menüleiste... 5 3.1 Alle/Keine Elemente auswählen... 5 3.2 Kopieren... 5 3.3 Ausschneiden... 5 3.4

Mehr

Website importieren oder erstellen?

Website importieren oder erstellen? 94 Eine Website aus Vorlagen Website importieren oder erstellen? Grundsätzlich gibt es zwei Möglichkeiten, MAGIX Web Designer zu benutzen: entweder Sie haben bereits eine Website und wollen sie mit MAGIX

Mehr

http://www.video2brain.com/de/products-582.htm

http://www.video2brain.com/de/products-582.htm André Reinegger führt Sie grundlegend in Dreamweaver CS5 ein und macht vor fortgeschrittenen Themen nicht halt. Lernen Sie die Struktur von XHTML-Seiten kennen genauso wie die Vorzüge vom Gestalten mit

Mehr

Mit der Maus im Menü links auf den Menüpunkt 'Seiten' gehen und auf 'Erstellen klicken.

Mit der Maus im Menü links auf den Menüpunkt 'Seiten' gehen und auf 'Erstellen klicken. Seite erstellen Mit der Maus im Menü links auf den Menüpunkt 'Seiten' gehen und auf 'Erstellen klicken. Es öffnet sich die Eingabe Seite um eine neue Seite zu erstellen. Seiten Titel festlegen Den neuen

Mehr

Bitte schenken Sie den unterstrichenen Passagen besondere Aufmerksamkeit, sie enthalten wichtige Hinweise.

Bitte schenken Sie den unterstrichenen Passagen besondere Aufmerksamkeit, sie enthalten wichtige Hinweise. Der Editor - ArkEditor unter Joomla 3.x Mit dem Editor können Sie die Inhalte Ihrer Website nach Ihren Vorstellungen gestalten. Wie Sie die Beiträge zur Bearbeitung öffnen, erfahren Sie in der Anleitung

Mehr

Anleitung zur Verwendung von Silverstripe 3.x

Anleitung zur Verwendung von Silverstripe 3.x Anleitung zur Verwendung von Silverstripe 3.x Inhaltsverzeichnis: 1. EINLEITUNG 2. ORIENTIERUNG 2.1 Anmelden am CMS 2.2 Die Elemente des Silverstripe CMS 2.3 Funktion des Seitenbaums 2.4 Navigieren mit

Mehr

1. Sobald Sie mit der Maus über die Navigationszeile Ihrer Homepage fahren, erscheint ein Button Navigation bearbeiten.

1. Sobald Sie mit der Maus über die Navigationszeile Ihrer Homepage fahren, erscheint ein Button Navigation bearbeiten. Anwendungsbeispiel Wir über uns Seite erstellen In diesem Anwendungsbeispiel wird zunächst eine Übersichtstabelle zu allen Mitarbeitern Ihres Büros erstellt. Hinter jeder Person ist dann eine neue Seite

Mehr

Cmsbox Kurzanleitung. Das Wichtigste in Kürze

Cmsbox Kurzanleitung. Das Wichtigste in Kürze Cmsbox Kurzanleitung Cmsbox Kurzanleitung Das Wichtigste in Kürze Die Benutzeroberfläche der cmsbox ist nahtlos in die Webseite integriert. Elemente wie Texte, Links oder Bilder werden direkt an Ort und

Mehr

HILFE ZUM ÄNDERN VON INHALTEN

HILFE ZUM ÄNDERN VON INHALTEN HILFE ZUM ÄNDERN VON INHALTEN Erste Schritte - Loggen Sie sich mit dem Benutzernamen und dem Passwort ein. Bestätigen mit Enter-Taste oder auf den grünen Button klicken. hier bestätigen - Wählen Sie den

Mehr

UMGANG MIT MICROSOFT WORD ~DER EINSTIEG~

UMGANG MIT MICROSOFT WORD ~DER EINSTIEG~ UMGANG MIT MICROSOFT WORD ~DER EINSTIEG~ INHALT Inhalt... 1 1. Titelblatt... 1 1.1 Inhalt... 1 1.2 Gestaltung... 2 1.3 Kopf-und Fußzeile... 3 2. Seitenlayout... 4 2.1 Typografie... 4 2.2 Seitenränder...

Mehr

4 Die FrontPage-Website

4 Die FrontPage-Website 4 Die FrontPage-Website Ziele dieses Kapitels A Sie lernen die Struktur einer Website kennen. A Sie können Websites verschachteln. A Sie können Websites konvertieren. Microsoft Office Frontpage 2003 Einführung

Mehr

Der Website-Generator

Der Website-Generator Der Website-Generator Der Website-Generator im Privatbereich gibt Ihnen die Möglichkeit, schnell eine eigene Website in einheitlichem Layout zu erstellen. In Klassen, Gruppen und Institutionen können auch

Mehr

Inhalte mit DNN Modul HTML bearbeiten

Inhalte mit DNN Modul HTML bearbeiten Einführung Redaktoren Content Management System DotNetNuke Inhalte mit DNN Modul HTML bearbeiten DotNetNuke Version 7+ w3studio GmbH info@w3studio.ch www.w3studio.ch T 056 288 06 29 Letzter Ausdruck: 15.08.2013

Mehr

Hermann von Helmholtz-Zentrum für Kulturtechnik Übung: Multimedia-Anwendungen in den Wissenschaften. Tutorium. Mozilla Composer. Ein kurzer Überblick

Hermann von Helmholtz-Zentrum für Kulturtechnik Übung: Multimedia-Anwendungen in den Wissenschaften. Tutorium. Mozilla Composer. Ein kurzer Überblick Tutorium Mozilla Composer Ein kurzer Überblick Vorbereitung: Projektordner erstellen Für jede projektierte Website wird zuerst ein eigener Projektordner erstellt, der alle zu publizierenden Dateien aufnimmt.

Mehr

Wordpress Alle wichtigen Funktionen kurz erklärt

Wordpress Alle wichtigen Funktionen kurz erklärt Wordpress Alle wichtigen Funktionen kurz erklärt Dies soll als Hilfe dienen für neue Mitglieder der Homepage AG und als kurzes Nachschlagwerk, ohne dass das große Buch durchforstet werden muss. Alle Funktionen

Mehr

Arbeiten mit Acrobat. Vorstellung von Adobe Acrobat Bearbeitung des Dokuments Präsentationen erstellen Teamarbeit

Arbeiten mit Acrobat. Vorstellung von Adobe Acrobat Bearbeitung des Dokuments Präsentationen erstellen Teamarbeit Arbeiten mit Acrobat Vorstellung von Adobe Acrobat Bearbeitung des Dokuments Präsentationen erstellen Teamarbeit Vollbildmodus Wählen Sie das Menü Fenster Vollbildmodus. Die aktuell angezeigte Seite verdeckt

Mehr

HTL-Website. TYPO3- Skriptum II. Autor: RUK Stand: 02.06.2010 Gedruckt am: - Version: V0.1 Status: fertig. Qualitätsmanagement

HTL-Website. TYPO3- Skriptum II. Autor: RUK Stand: 02.06.2010 Gedruckt am: - Version: V0.1 Status: fertig. Qualitätsmanagement HTL-Website TYPO3- Skriptum II Autor: RUK Stand: 02.06.2010 Gedruckt am: - Version: V0.1 Status: fertig Qualitätsmanagement Erstellt Geprüft Freigegeben Name RUK Datum 02.06.2010 Unterschrift Inhaltsverzeichnis

Mehr

Für Fragen und Anregungen, Wünsche und Verbesserungsvorschlägen zu diesem Handbuch können Sie mich gerne kontaktieren.

Für Fragen und Anregungen, Wünsche und Verbesserungsvorschlägen zu diesem Handbuch können Sie mich gerne kontaktieren. Inhaltsverzeichnis 1. Inhaltselemente bearbeiten Bild einfügen 2. Inhaltselement anlegen 3. Seite anlegen 4. Dateien verwalten Ordner anlegen Datei hochladen 5. Buttons 6. TYPO3 Backend (Aufbau) Einleitung

Mehr

Dateien verwalten (Bilder, Dokumente, Medien)

Dateien verwalten (Bilder, Dokumente, Medien) 17 Dateien verwalten (Bilder, Dokumente, Medien) Bilder und Dokumente können Sie im Funktionsmenü unter Dateiliste verwalten. Alle Bilder und Dokumente, die Sie in Ihren Baukasten hochgeladen haben, werden

Mehr

Benutzerhandbuch. Gästebuch Software - YellaBook v1.0 http://www.yellabook.de. Stand: 01.08.2012. by YellaBook.de - Alle Rechte vorbehalten.

Benutzerhandbuch. Gästebuch Software - YellaBook v1.0 http://www.yellabook.de. Stand: 01.08.2012. by YellaBook.de - Alle Rechte vorbehalten. Benutzerhandbuch Gästebuch Software - YellaBook v1.0 http://www.yellabook.de Stand: 01.08.2012 Inhalt 1 Funktionen... 3 2 Systemanforderungen... 4 3 Installation... 4 4 Einbinden des Gästebuchs... 5 5

Mehr

Napoleon.ch Administrations-Tool. Beschreibung Administrationsbereich / CMS für Ihre Website

Napoleon.ch Administrations-Tool. Beschreibung Administrationsbereich / CMS für Ihre Website Beschreibung Administrationsbereich / CMS für Ihre Website Seite:1/11 Inhaltsverzeichnis 1. Intro... 3 2. Allgemeine Erscheinung... 3 3. Benutzerverwaltung... 4 4. Bild- und DokuModul... 4 5. Website Modul...

Mehr

Webdesign 1. PCC-Seminar Einheit 1 Di., 21.3.2006

Webdesign 1. PCC-Seminar Einheit 1 Di., 21.3.2006 Webdesign 1 PCC-Seminar Einheit 1 Di., 21.3.2006 Projekt Website Wir wollen eine Website gestalten und umsetzen! Aber wie fangen wir an? Grundsätzliches: Internet Print ein anderes Medium verlangt andere

Mehr

Dreamweaver MX Arbeiten mit HTML-Vorlagen

Dreamweaver MX Arbeiten mit HTML-Vorlagen Publizieren auf dem NiBiS Kersten Feige Nicole Y. Männl 03.06.2003, 8.30-13.00 Uhr 18.06.2003, 8.30-13.00 Uhr Dreamweaver MX Arbeiten mit HTML-Vorlagen Voraussetzungen zum Arbeiten mit HTML-Vorlagen Starten

Mehr

Der Editor und seine Funktionen

Der Editor und seine Funktionen Der Editor und seine Funktionen Für die Eingabe und Änderung von Texten steht Ihnen im Pflegemodus ein kleiner WYSIWYG-Editor zur Verfügung. Tinymce 1 ist ein Open Source Javascript-Editor, der mittlerweile

Mehr

Diese Anleitung zeigt dir, wie du eine Einladung mit Microsoft Word gestalten kannst.

Diese Anleitung zeigt dir, wie du eine Einladung mit Microsoft Word gestalten kannst. Diese Anleitung zeigt dir, wie du eine Einladung mit Microsoft Word gestalten kannst. Bevor es losgeht Wenn du mal etwas falsch machst ist das in Word eigentlich kein Problem! Den Rückgängig-Pfeil (siehe

Mehr

PHT-Web CMS Anleitung Redaktion, Version 2.0 September 2015

PHT-Web CMS Anleitung Redaktion, Version 2.0 September 2015 Inhalt 1.1 Anmelden im System... 2 2 Allgemeine Hinweise... 3 2.1 Texte... 3 2.2 Artikelbilder... 3 3 Inhalte erstellen bzw. editieren... 4 3.1 Eigene Inhalte finden... 4 3.2 Vorhandenen Inhalt bearbeiten...

Mehr

http://www.nvu-composer.de

http://www.nvu-composer.de Kapitel 16 Seite 1 Ein portabler Web-Editor Wer viel Zeit in eine Website investieren will ist gut beraten, eine professionelle Software für Webdesigner zu beschaffen. Diese Programme sind sehr leistungsfähig,

Mehr

GTV Vorlagendesigner

GTV Vorlagendesigner GTV Vorlagendesigner Der GTV Vorlagendesigner Der GTV Vorlagendesigner ist ein Hilfstool zur Erstellung und Bearbeitung Ihrer Eigenwerbung. So können Sie in wenigen Schritten aus Ihren Texten, Fotos, Grafiken

Mehr

Diese Seite kann auch als pdf-file heruntergeladen werden.

Diese Seite kann auch als pdf-file heruntergeladen werden. Kleines Vademecum für cms 3.0 (artmedic) Trifles-Kleinigkeiten Diese Seite kann auch als pdf-file heruntergeladen werden. Bearbeitungsprogramm starten Browser starten In Browserfenster der Website.ch/cms_index.php

Mehr

Einfügen mit Hilfe des Assistenten: Um eine Seite hinzufügen zu können, müssen Sie nur mehr auf ein Symbol Stelle klicken.

Einfügen mit Hilfe des Assistenten: Um eine Seite hinzufügen zu können, müssen Sie nur mehr auf ein Symbol Stelle klicken. 2. SEITE ERSTELLEN 2.1 Seite hinzufügen Klicken Sie in der Navigationsleiste mit der rechten Maustaste auf das Symbol vor dem Seitentitel. Es öffnet sich ein neues Kontextmenü. Wenn Sie nun in diesem Kontextmenü

Mehr

1 Grundlagen von Phase 5 Installiere das Programm Phase 5 auf dem Rechner.

1 Grundlagen von Phase 5 Installiere das Programm Phase 5 auf dem Rechner. Kapitel 1 Grundlagen von Phase 5 Seite 1 1 Grundlagen von Phase 5 Installiere das Programm Phase 5 auf dem Rechner. 1.1 Projekt anlegen Bevor du das Programm Phase 5 startest, musst du einen Ordner anlegen,

Mehr

Word öffnen und speichern

Word öffnen und speichern Word öffnen und speichern 1. Öffne das Programm "Word" mit Klick auf das Symbol in der Taskleiste. 2. Schreibe den Titel deiner Wortliste auf und drücke auf die Enter-Taste. 3. Klicke auf "Speichern".

Mehr

Content Management System (CMS) Manual

Content Management System (CMS) Manual Content Management System (CMS) Manual Thema Seite Aufrufen des Content Management Systems (CMS) 2 Funktionen des CMS 3 Die Seitenverwaltung 4 Seite ändern/ Seite löschen Seiten hinzufügen 5 Seiten-Editor

Mehr

1. Software installieren 2. Software starten. Hilfe zum Arbeiten mit der DÖHNERT FOTOBUCH Software

1. Software installieren 2. Software starten. Hilfe zum Arbeiten mit der DÖHNERT FOTOBUCH Software 1. Software installieren 2. Software starten Hilfe zum Arbeiten mit der DÖHNERT FOTOBUCH Software 3. Auswahl 1. Neues Fotobuch erstellen oder 2. ein erstelltes, gespeichertes Fotobuch laden und bearbeiten.

Mehr

Erste Schritte mit Elvis 3 ein Beispielprojekt

Erste Schritte mit Elvis 3 ein Beispielprojekt Erste Schritte mit Elvis 3 ein Beispielprojekt Um Sie mit Elvis 3 vertraut zu machen möchten wir mit Ihnen mit diesem Kapitel ein Beispielprojekt vom ersten Aufruf von Elvis 3 bis zum Testlauf aufbauen.

Mehr

Handbuch für Redakteure (Firmenpark)

Handbuch für Redakteure (Firmenpark) Handbuch für Redakteure (Firmenpark) Eigenen Eintrag finden... 1 Anmeldung am System... 1 Inhalte ändern... 2 Feld: Branchenzuordnung... 3 Feld: Virtueller Ortsplan... 4 Feld: Logo (Bild einfügen)... 5

Mehr

Microsoft Access 2010 Formulare automatisiert entwerfen

Microsoft Access 2010 Formulare automatisiert entwerfen Microsoft Access 2010 Formulare automatisiert entwerfen Formulare... bieten eine grafische Benutzeroberfläche zur Anzeige und / oder Bearbeitung von Daten. sind elektronische Masken zum Sammeln und Anzeigen

Mehr

Die Beschreibung bezieht sich auf die Version Dreamweaver 4.0. In der Version MX ist die Sitedefinition leicht geändert worden.

Die Beschreibung bezieht sich auf die Version Dreamweaver 4.0. In der Version MX ist die Sitedefinition leicht geändert worden. In einer Website haben Seiten oft das gleiche Layout. Speziell beim Einsatz von Tabellen, in denen die Navigation auf der linken oder rechten Seite, oben oder unten eingesetzt wird. Diese Anteile der Website

Mehr

ANLEITUNG MINI-PAGE. Bahnstrasse 1 8610 Uster Tel.: 0041 (0)44 504 26 00 Fax: 0041 (0)44 504 26 01 E-Mail: support@webagentur.ch

ANLEITUNG MINI-PAGE. Bahnstrasse 1 8610 Uster Tel.: 0041 (0)44 504 26 00 Fax: 0041 (0)44 504 26 01 E-Mail: support@webagentur.ch ANLEITUNG MINI-PAGE Bahnstrasse 1 Tel.: 0041 (0)44 504 26 00 Fax: 0041 (0)44 504 26 01 E-Mail: support@webagentur.ch INHALT 1. Hinweise 2. Bearbeitung 2.1 Login 2.2 Rubrik ohne Unterrubrik 2.3 Rubrik mit

Mehr

Quickstart IMS Custom-Player Pro

Quickstart IMS Custom-Player Pro Quickstart IMS Custom-Player Pro Jedes IMS-MDN (Media Delivery Network) Konto bietet zum Abspielen von Flash Videos den Standard IMS Custom Player. Dieser Player wird von uns auf einem hoch performanten

Mehr

Handbuch AP Backoffice

Handbuch AP Backoffice Handbuch AP Backoffice Verfasser: AP marketing Tony Steinmann Bahnhofstrasse 13 6130 Willisau Alle Rechte vorbehalten. Willisau, 24. August 2005 Handbuch unter www.ap-backoffice.ch/handbuch_ap-backoffice.pdf

Mehr

Inhalt. 2 RÖK Typo3 Dokumentation

Inhalt. 2 RÖK Typo3 Dokumentation 2012 RÖK Typo3 Dokumentation Hauptadmin RÖK Eine Hilfe für den Einstieg in Typo3. innpuls Werbeagentur GmbH 01.01.2012 2 RÖK Typo3 Dokumentation Inhalt 1) Was ist Typo3... 3 2) Typo3 aufrufen und Anmelden...

Mehr

WEBSITE ERSTELLEN mit DREAMWEAVER MX

WEBSITE ERSTELLEN mit DREAMWEAVER MX WEBSITE ERSTELLEN mit DREAMWEAVER MX Inhalt: WEBSITE ERSTELLEN mit DREAMWEAVER MX... 1 Neue Site anlegen... 2 Neue HTML-Seite erstellen... 2 Seiteneigenschaften... 2 Webseite speichern... 2 CSS (Cascading

Mehr

Slices und Rollover für die Startseite einer Bildergalerie

Slices und Rollover für die Startseite einer Bildergalerie Slices und Rollover für die Startseite einer Bildergalerie Die größte Frage bei einer Webseite ist es, auf ggf. viele Informationen von der relativ kleinen Fläche eines Bildschirmes zu verweisen. Dabei

Mehr

1. Allgemein 2. 2. Speichern und Zwischenspeichern des Designs 2. 3. Auswahl der zu bearbeitenden Seite 2. 4. Text ergänzen 3. 5. Textgrösse ändern 3

1. Allgemein 2. 2. Speichern und Zwischenspeichern des Designs 2. 3. Auswahl der zu bearbeitenden Seite 2. 4. Text ergänzen 3. 5. Textgrösse ändern 3 Inhaltsverzeichnis 1. Allgemein 2 2. Speichern und Zwischenspeichern des Designs 2 3. Auswahl der zu bearbeitenden Seite 2 4. Text ergänzen 3 5. Textgrösse ändern 3 6. Schriftart ändern 3 7. Textfarbe

Mehr

TYPO3 Schritt für Schritt - Einführung für Redakteure

TYPO3 Schritt für Schritt - Einführung für Redakteure TYPO3 Version 4.0 Schritt für Schritt Einführung für Redakteure zeitwerk GmbH Basel - Schweiz http://www.zeitwerk.ch ++4161 383 8216 TYPO3_einfuehrung_redakteure.pdf - 07.07.2006 TYPO3 Schritt für Schritt

Mehr

TYPO3-Kurzreferenz für Redakteure

TYPO3-Kurzreferenz für Redakteure TYPO3-Kurzreferenz für Redakteure Die Kurzreferenz orientiert sich weitgehend an den TYPO3 v4 Schulungsvideos. Es kann jedoch geringfügige Abweichungen geben, da in den Videos auf didaktisch sinnvolles

Mehr

Anleitung Website für Fotoromanza, Export der einzelnen Seiten

Anleitung Website für Fotoromanza, Export der einzelnen Seiten Anleitung Website für Fotoromanza, Export der einzelnen Seiten 9 Einzelne Seiten exportieren Die einzelnen Seiten der Fotoromanza müssen als einzelne Bilder im Format JPG exportiert werden. Damit dies

Mehr

Photoalben anlegen und verwalten.

Photoalben anlegen und verwalten. ClubWebMan GKMB Gallery Photoalben anlegen und verwalten. geeignet für TYPO Version.5 bis.6 Die Arbeitsschritte A. Upload der Bilder in die Dateiliste B. Bilder beschriften und sortieren B. Album im Ordner

Mehr

Anleitung iphone optimierte CMS-Webseite Version 2.0 2. Vorwort

Anleitung iphone optimierte CMS-Webseite Version 2.0 2. Vorwort Anleitung iphone optimierte CMS-Webseite Version 2.0 2 Vorwort In der folgenden Anleitung wird beschrieben wie Sie in das Worldsoft-CMS eine Weiche für das iphone integrieren können und wie Sie Bilder

Mehr

http://www.jimdo.com Mit Jimdo eine Homepage erstellen Kapitel 16 Seite 1 Die eigene Homepage mit Jimdo http://benutzername.jimdo.com Der Benutzername

http://www.jimdo.com Mit Jimdo eine Homepage erstellen Kapitel 16 Seite 1 Die eigene Homepage mit Jimdo http://benutzername.jimdo.com Der Benutzername Kapitel 16 Seite 1 Die eigene Homepage mit Jimdo Mit Jimdo ist das Erstellen einer eigenen Homepage ganz besonders einfach. Auch ohne Vorkenntnisse gelingt es in kurzer Zeit, mit einer grafisch sehr ansprechenden

Mehr

Falls Sie den Hintergrund der Website schon kennen, wählen Sie am einfachsten die gleiche Farbe in Photoshop für die Schaltfläche.

Falls Sie den Hintergrund der Website schon kennen, wählen Sie am einfachsten die gleiche Farbe in Photoshop für die Schaltfläche. 1. Schritt Schaltfläche vorbereiten In Photoshop eine neue Datei in Größe der Schaltfläche erstellen. Hier: Breite: 100 Pixel Höhe: 50 Pixel Auflösung 72 dpi Hintergrund: Weiß* Der weiße Hintergrund ist

Mehr

1... Ein Platz im Internet... 24 2... Die Sprachen des Web... 36 3... Dreamweaver im Vergleich... 50

1... Ein Platz im Internet... 24 2... Die Sprachen des Web... 36 3... Dreamweaver im Vergleich... 50 1... Ein Platz im Internet... 24 1.1... Wie kommt meine Site ins Internet... 24 1.1.1... Was ist eine Website... 24 1.1.2... Ein Platz im WWW... 25 1.2... Die eigene Domain... 25 1.2.1... Was ist eine

Mehr

Erstellen von Web-Seiten

Erstellen von Web-Seiten Erstellen von Web-Seiten Grundlagen html: Zum Erstellen von html-seiten benötigen wir nur einen Text-Editor. Der Inhalt von HTML-Dateien steht in HTML-Elementen. HTML-Elemente werden durch so genannte

Mehr

Kurzbedienungsanleitung zu Contenido

Kurzbedienungsanleitung zu Contenido Kurzbedienungsanleitung zu Contenido von Dirk Weikard INHALTSVERZEICHNIS Schritt-für-Schritt Anleitung...2 Artikel...2 Neuen Artikel erstellen...2 Artikel bearbeiten...2 Artikel verschieben...2 Artikel

Mehr

Version 1.0 Merkblätter

Version 1.0 Merkblätter Version 1.0 Merkblätter Die wichtigsten CMS Prozesse zusammengefasst. Das Content Management System für Ihren Erfolg. Tabellen im Contrexx CMS einfügen Merkblatt I Tabellen dienen dazu, Texte oder Bilder

Mehr

1 Websites mit Frames

1 Websites mit Frames 1 Websites mit Frames Mehrere Seiten in einer einzelnen Seite anzeigen - Was sind Frames und wie funktionieren sie? - Was sind die Vor- und Nachteile von Frames? - Wie erstellt man eine Frames- Webseite?

Mehr

FlowFact Alle Versionen

FlowFact Alle Versionen Training FlowFact Alle Versionen Stand: 29.09.2005 Brief schreiben, ablegen, ändern Die FlowFact Word-Einbindung macht es möglich, direkt von FlowFact heraus Dokumente zu erzeugen, die automatisch über

Mehr

In dieser Lektion erlernen Sie die Verwendung von Vorlagen, die Anwendung von Mastern sowie die Bearbeitung von Kopf- und Fußzeilen.

In dieser Lektion erlernen Sie die Verwendung von Vorlagen, die Anwendung von Mastern sowie die Bearbeitung von Kopf- und Fußzeilen. In dieser Lektion erlernen Sie die Verwendung von Vorlagen, die Anwendung von Mastern sowie die Bearbeitung von Kopf- und Fußzeilen. Was erfahren Sie in diesem Kapitel? Wie Sie den Folienmaster anwenden

Mehr

Anleitungen zum Einfügen eines Partnerlinks in Ihre Website

Anleitungen zum Einfügen eines Partnerlinks in Ihre Website www.satnam.de Anleitungen zum Einfügen eines Partnerlinks in Ihre Website A. Mittels eines Content-Management-Systems (CMS) oder Weblogs Seiten 2-6 B. Mittels eines Homepagebaukastens, z.b. von 1&1 Seiten

Mehr

Zimplit CMS Handbuch. Einführung. Generelle Informationen

Zimplit CMS Handbuch. Einführung. Generelle Informationen Zimplit CMS Handbuch Einführung Dieses Dokument gibt Ihnen einen Überblick über die Nutzeroberfläche des Zimplit CMS (Content Management System) und seinen Funktionen. Generelle Informationen Version:

Mehr

Handbuch Groupware - Mailserver

Handbuch Groupware - Mailserver Handbuch Inhaltsverzeichnis 1. Einführung...3 2. Ordnerliste...3 2.1 E-Mail...3 2.2 Kalender...3 2.3 Kontakte...3 2.4 Dokumente...3 2.5 Aufgaben...3 2.6 Notizen...3 2.7 Gelöschte Objekte...3 3. Menüleiste...4

Mehr

Typo3 Handbuch Redaktion: Peter W. Bernecker Tel.: 069 / 92 107 292 pw.bernecker@ev medienhaus.de Stand: 6. Oktober 2014

Typo3 Handbuch Redaktion: Peter W. Bernecker Tel.: 069 / 92 107 292 pw.bernecker@ev medienhaus.de Stand: 6. Oktober 2014 Typo3 Handbuch Redaktion: Peter W. Bernecker Tel.: 069 / 92 107 292 pw.bernecker@ev medienhaus.de Stand: 6. Oktober 2014 3. Arbeitsbereich: Wo sind meine Inhalte? Wo kann ich Inhalte einstellen (Rechte)?

Mehr

LERNMATERIALIEN VERWALTEN. von Harald Jakobs und Yannic Hoffmann Stand: September 2015

LERNMATERIALIEN VERWALTEN. von Harald Jakobs und Yannic Hoffmann Stand: September 2015 LERNMATERIALIEN VERWALTEN von Harald Jakobs und Yannic Hoffmann Stand: September 2015 Inhalt 1. Lernmaterialien verwalten... 2 1.1. LERNMATERIALEN HINZUFÜGEN... 2 1.2. LERNMATERIALIEN HINZUFÜGEN PER DRAG

Mehr

Kontakte nach Nachnamen sortieren lassen

Kontakte nach Nachnamen sortieren lassen Kontakte nach Nachnamen sortieren lassen Wer hat sich nicht schon darüber geärgert, dass standardmässig die Kontakte im Adressbuch nach den Vornamen sortiert und nicht nach Nachnamen. Durch eine einfache

Mehr

Anleitung neuen Beitrag unter News auf www.schoellonia.de erstellen

Anleitung neuen Beitrag unter News auf www.schoellonia.de erstellen Anleitung neuen Beitrag unter News auf www.schoellonia.de erstellen BILD: Es ist möglich ein Bild unter den News mit zu veröffentlichen. Achtung: NUR EIN BILD pro Beitrag, und dieses sollte zuvor auf die

Mehr

Webentwicklung mit Mozilla Composer I.

Webentwicklung mit Mozilla Composer I. Tutorium Webentwicklung mit Mozilla Composer I. Präsentation der Sitzung vom 12. Mai 2004 Martin Stricker martin.stricker@rz.hu-berlin.de Programm Erstellen und Bearbeiten von Webseiten mit dem HTML-Editor

Mehr

Einrichten eines News-Systems in Typo3

Einrichten eines News-Systems in Typo3 Einrichten eines News-Systems in Typo3 Generelles: tt_news ist eine der beliebtesten Erweiterungen für Typo3 und wir bereits auf vielen Sites Vorarlberger Schulen verwendet: Beispiele: http://www.vobs.at/hsl

Mehr

Wiederholung float+clear. Grundlagen Webgestaltung Seite 136

Wiederholung float+clear. Grundlagen Webgestaltung Seite 136 Wiederholung float+clear Grundlagen Webgestaltung Seite 136 float und clear clear kann für mehrspaltige Layouts verwenden werden. Jedoch kann das auch zu ungewollten Effekten führen. Angenommen eine Webseite

Mehr

Kurzanleitung für das CMS Joomla 3.x

Kurzanleitung für das CMS Joomla 3.x Kurzanleitung für das CMS Joomla 3.x 1. Login ins Backend Die Anmeldung ins sogenannte Backend (die Verwaltungsebene) der Website erfolgt über folgenden Link: www.name-der-website.de/administrator. Das

Mehr

Manual WordPress - ContentManagementSystem

Manual WordPress - ContentManagementSystem Was ist WordPress? WordPress ist ein ContentManagementSystem (CMS) zur Verwaltung der Inhalte einer Website. Es bietet sich besonders zum Aufbau und Pflege eines Weblogs (Online-Tagebuch) an. Funktionsschema

Mehr

Hilfe zur Dokumentenverwaltung

Hilfe zur Dokumentenverwaltung Hilfe zur Dokumentenverwaltung Die Dokumentenverwaltung von Coffee-CRM ist sehr mächtig und umfangreich, aber keine Angst die Bedienung ist kinderleicht. Im Gegensatz zur Foto Galeria können Dokumente

Mehr

Einstellungen des Windows-Explorers

Einstellungen des Windows-Explorers Einstellungen des Windows-Explorers Die Ordnerstruktur des Explorers Der Explorer ist der Manager für die Verwaltung der Dateien auf dem Computer. Er wird mit Rechtsklick auf Start oder über Start Alle

Mehr

Mai$ Handbuch - Publisher Tool 1

Mai$ Handbuch - Publisher Tool 1 Mai$ 15 16 Handbuch - Publisher Tool 1 Inhalt 1. Wilkommen... 3 1.1 Anmelden... 3 1.2 Dashboard... 4 2. Bücher... 5 2.1 Bücher hinzufügen... 5 2.2 Buchinformation bearbeiten... 7 3. Anreicherungen... 9

Mehr

Nur in schwarz angezeigten Verzeichnissen kann gespeichert werden!

Nur in schwarz angezeigten Verzeichnissen kann gespeichert werden! Kurzanleitung für das CMS WebEdition für die Schulhomepage Seite 1 Kurzanleitung für Homepage-Redakteure (CMW WebEdition) 1. Anmeldung http://www.gymnasium-landau.de/webedition Linke Seite: Dateimanager

Mehr

Beim Schreiben von kürzeren Text reicht es völlig, wenn Sie

Beim Schreiben von kürzeren Text reicht es völlig, wenn Sie 5 Vorlagen gestalten In diesem Kapitel: n Gestaltungsbereiche und -werkzeuge n Designs bearbeiten n Formatvorlagen erstellen n Formatvorlagen prüfen n Formatvorlagen ändern n Mit Dokumentvorlagen arbeiten

Mehr

Textbearbeitung im CKEditor

Textbearbeitung im CKEditor CKEditor (HTML) Textbearbeitung im CKEditor Der CKEditor ist ein freier, webbasierter HTML-Editor, der in onoffice integriert ist und die Erstellung von HTML-formatierten emails (Websiteformat) ermöglicht.

Mehr

Handbuch Bildergalerie Litebox

Handbuch Bildergalerie Litebox Handbuch Reference Guide Erstellt durch: Ivo Lex INM Inter Network Marketing AG Usterstrasse 202 CH-8620 Wetzikon Email ivo.lex@inm.ch URL http://www.inm.ch Telefon: +41 (0) 44 934 50 50 Fax +41 (0) 44

Mehr

Fotobuch Kurzanleitung für Windows Designer

Fotobuch Kurzanleitung für Windows Designer Fotobuch Kurzanleitung für Windows Designer Version 1.0 1 Kurzanleitung Fotobuch In wenigen Schritten zum ifolor Fotobuch Sie wollen ein Fotobuch gestalten? Die folgende Anleitung hilft Ihnen, ein Fotobuch

Mehr

CLASSROOM IN A BOOK. Adobe GoLive cs2

CLASSROOM IN A BOOK. Adobe GoLive cs2 CLASSROOM IN A BOOK Adobe GoLive cs2 Inhalt Einführung Über dieses Buch................................... 17 Voraussetzungen................................... 17 Adobe GoLive installieren...........................

Mehr

Newssystem für den eigenen Lehrstuhl einrichten

Newssystem für den eigenen Lehrstuhl einrichten Newssystem für den eigenen Lehrstuhl einrichten Zunächst muss unterhalb des Lehrstuhlordners (im Beispiel Schulpädagogik) ein Neuer Ordner config angelegt werden: Der Dateiname des neuen Ordners sollte

Mehr

Handbuch für Redakteure für Typo3. Version 1.1. Datum: 15.2.2005. Georg Ringer

Handbuch für Redakteure für Typo3. Version 1.1. Datum: 15.2.2005. Georg Ringer Handbuch für Redakteure für Typo3 Version 1.1 Datum: 15.2.2005 Georg Ringer Inhaltsverzeichnis 1. Login... 3 2. Oberfläche von Typo3... 4 2.1. Modulleiste... 5 2.2. Navigationsleiste... 6 3. Einfache Funktionen...

Mehr

Anleitung zur Erstellung der Internetseiten

Anleitung zur Erstellung der Internetseiten Anleitung zur Internetseitenerstellung mit Microsoft Expression Web4 1/6 Anleitung zur Erstellung der Internetseiten Die Erstellung erläutere ich mit dem Programm Microsoft Expression Web. Zu beziehen

Mehr