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

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

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

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

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

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

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

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

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

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

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... 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

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

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

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

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

Dokumentation. Dokumentation Schnell-Einstieg für webedition User. PROLINK internet communications GmbH Merzhauser Str. 4 D-79100 Freiburg

Dokumentation. Dokumentation Schnell-Einstieg für webedition User. PROLINK internet communications GmbH Merzhauser Str. 4 D-79100 Freiburg Dokumentation Dokumentation Schnell-Einstieg für webedition User PROLINK internet communications GmbH Merzhauser Str. 4 D-79100 Freiburg fon: +49 (0)761-456 989 0 fax: +49 (0)761-456 989 99 mail: info@prolink.de

Mehr

Handbuch DrahtexLabelwriter 3.0

Handbuch DrahtexLabelwriter 3.0 Handbuch DrahtexLabelwriter 3.0 Inhaltsverzeichnis INSTALLATION 3 DER PROGRAMMSTART 7 DIE PROGRAMMOBERFLÄCHE 8 DIE STARTSEITE DES PROGRAMMES 8 DIE PROGRAMMSYMBOLLEISTE 9 EIN NEUES PROJEKT ERSTELLEN 10

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

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

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

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

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

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

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

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

Marginalspalten (Randnotizen) in Word 2007

Marginalspalten (Randnotizen) in Word 2007 Marginalspalten (Randnotizen) in Word 2007 Oft sieht man vor allem in Büchern eine Spalte rechts oder Links neben dem Text, in der weitere Hinweise oder auch Erläuterungen zum eigentlichen Text stehen.

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

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

Von: Sven Weltring, Viola Berlage, Pascal Küterlucks, Maik Merscher

Von: Sven Weltring, Viola Berlage, Pascal Küterlucks, Maik Merscher Von: Sven Weltring, Viola Berlage, Pascal Küterlucks, Maik Merscher Inhaltsverzeichnis 1. Desktop 2. Erklärung von Tastatur und Maus 3. Computer ausschalten 4. Neuer Ordner erstellen 5. Microsoft Word

Mehr

Es gibt aber weitere Möglichkeiten, die den Zugriff auf die individuell wichtigsten Internetseiten

Es gibt aber weitere Möglichkeiten, die den Zugriff auf die individuell wichtigsten Internetseiten Thema: Favoriten nutzen Seite 8 3 INTERNET PRAXIS 3.1 Favoriten in der Taskleiste Es gibt aber weitere Möglichkeiten, die den Zugriff auf die individuell wichtigsten seiten beschleunigen. Links in der

Mehr

Erstellen von Beiträgen

Erstellen von Beiträgen Erstellen von Beiträgen Hinweis Die Anleitung ist für den Microsoft Internet Explorer 10 erstellt. Wird ein anderer Webbowser wie Firefox, Safari oder Google Chrom usw. verwendet, kann die Darstellung

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

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

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

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

Drupal Panels. Verwendung für Autoren

Drupal Panels. Verwendung für Autoren Verwendung für Autoren 11.08.2011 1 Inhalt 2 Panel Layout... 3 2.1 Der Layout Generator... 3 3 Inhalt Hinzufügen... 3 3.1 Anzeige vom Panel-Page Body Text in der Panel Ausgabe... 3 4 Dateianhänge... 4

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

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

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

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

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

Diese Anleitung bezieht sich auf FixFoto, V 3.40. In älteren oder neueren Versionen könnte die Arbeitsweise anders sein.

Diese Anleitung bezieht sich auf FixFoto, V 3.40. In älteren oder neueren Versionen könnte die Arbeitsweise anders sein. Pfade einstellen Stand: Dezember 2012 Diese Anleitung bezieht sich auf FixFoto, V 3.40. In älteren oder neueren Versionen könnte die Arbeitsweise anders sein. Diese Anleitung soll zeigen, wie man Pfad-Favoriten

Mehr

Handbuch Typo3 für Redakteure IZZ-on.de

Handbuch Typo3 für Redakteure IZZ-on.de Handbuch Typo3 für Redakteure IZZ-on.de Grundlegende Funktionen 1. Anmelden Bitte melden Sie sich mit Ihrem Namen und dem Passwort hier: zbw.pic-develop.de/typo3 an. Dies ist der Zugang zur Test- und Entwicklungsumgebung.

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

Anleitungen für User der Seite TSV AustriAlpin Fulpmes. So erstellen Sie einen Bericht (Beitrag) auf der TSV-AustriAlpin Fulpmes Homepage.

Anleitungen für User der Seite TSV AustriAlpin Fulpmes. So erstellen Sie einen Bericht (Beitrag) auf der TSV-AustriAlpin Fulpmes Homepage. So erstellen Sie einen Bericht (Beitrag) auf der TSV-AustriAlpin Fulpmes Homepage. Seite 1 Walter Mayerhofer 2012 1.) ANMELDUNG Melden Sie sich mit Ihrem Benutzernamen und Passwort an. Als allererstes

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

Buchbonus: Eingabehilfe für Autoren:

Buchbonus: Eingabehilfe für Autoren: 3 4 5 6 7 1 2 8 9 10 11 12 Buchbonus: Eingabehilfe für Autoren: Ein wichtiger Hinweis vorab: Bitte denken Sie an die korrekten Quellenangaben, wenn Sie fremdes Material verwenden oder zitieren! Eine Kurzform

Mehr

Der Editor Abbildung 1 Der Editor

Der Editor Abbildung 1 Der Editor Der Editor Der Editor ist das wichtigste Werkzeug für den Administrator. Er dient zur Gestaltung sämtlicher Inhalte, gleich ob Inhalte der Website, Termine, Einladungen.. Wer sich hier ein wenig einarbeitet

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

Microsoft Access 2010 Bilder

Microsoft Access 2010 Bilder Microsoft Access 2010 Bilder Hyperlinks... arbeiten ähnlich wie ein Link in einer Webseite. sind ein Verweis auf eine Datei (access2010\material\beispiel\tabledevelop\automat.accdb). können ein Verweis

Mehr

Anleitung für die Einrichtung einer HTML-Signatur mit Bild und Verlinkung

Anleitung für die Einrichtung einer HTML-Signatur mit Bild und Verlinkung Anleitung für die Einrichtung einer HTML-Signatur mit Bild und Verlinkung Inhaltsverzeichnis Vorwort...1 Hinweise...2 Einrichtung unter Microsoft Outlook 2003...3 Einrichtung unter Outlook 2007...4 Einrichtung

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

Tutorium Learning by doing WS 2001/ 02 Technische Universität Berlin. Erstellen der Homepage incl. Verlinken in Word 2000

Tutorium Learning by doing WS 2001/ 02 Technische Universität Berlin. Erstellen der Homepage incl. Verlinken in Word 2000 Erstellen der Homepage incl. Verlinken in Word 2000 1. Ordner für die Homepagematerialien auf dem Desktop anlegen, in dem alle Bilder, Seiten, Materialien abgespeichert werden! Befehl: Desktop Rechte Maustaste

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

Randziffern in Microsoft Word: Eine Schritt-für-Schritt-Anleitung

Randziffern in Microsoft Word: Eine Schritt-für-Schritt-Anleitung Randziffern in Microsoft Word: Eine Schritt-für-Schritt-Anleitung Einleitung Unzählige Juristen aber mit Sicherheit auch andere Schreibende haben sich schon gefragt, wie man in Microsoft Word Randziffern

Mehr

Inhaltsverzeichnis. Mit dem WEB.DE WebBaukasten zur eigenen Homepage!...2. Schritt 1: Design auswählen...3

Inhaltsverzeichnis. Mit dem WEB.DE WebBaukasten zur eigenen Homepage!...2. Schritt 1: Design auswählen...3 Inhaltsverzeichnis Mit dem WEB.DE WebBaukasten zur eigenen Homepage!...2 Schritt 1: Design auswählen...3 Schritt 2: Umfang und Struktur der Seiten bestimmen...7 Schritt 3: Inhalte bearbeiten...9 Grafik

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

Mitarbeitereinsatzplanung. easysolution GmbH 1

Mitarbeitereinsatzplanung. easysolution GmbH 1 Mitarbeitereinsatzplanung easysolution GmbH 1 Mitarbeitereinsatzplanung Vorwort Eines der wichtigsten, aber auch teuersten Ressourcen eines Unternehmens sind die Mitarbeiter. Daher sollten die Mitarbeiterarbeitszeiten

Mehr

Userhandbuch. Version B-1-0-2 M

Userhandbuch. Version B-1-0-2 M Userhandbuch Version B-1-0-2 M Inhaltsverzeichnis 1.0 Was bietet mir SERVRACK?... 3 1.1 Anmeldung... 3 1.2 Passwort vergessen?... 3 1.3 Einstellungen werden in Realtime übernommen... 4 2.0 Die SERVRACK

Mehr

Neues Projekt anlegen... 2. Neue Position anlegen... 2. Position in Statikdokument einfügen... 3. Titelblatt und Vorbemerkungen einfügen...

Neues Projekt anlegen... 2. Neue Position anlegen... 2. Position in Statikdokument einfügen... 3. Titelblatt und Vorbemerkungen einfügen... FL-Manager: Kurze beispielhafte Einweisung In dieser Kurzanleitung lernen Sie die wichtigsten Funktionen und Abläufe kennen. Weitere Erläuterungen finden Sie in der Dokumentation FLManager.pdf Neues Projekt

Mehr

Kurzanleitung. Arbeiten mit Word 2003 bei der Erstellung Wissenschaftlicher Arbeiten. Renate Vochezer rv@vochezer-trilogo.de

Kurzanleitung. Arbeiten mit Word 2003 bei der Erstellung Wissenschaftlicher Arbeiten. Renate Vochezer rv@vochezer-trilogo.de Kurzanleitung Arbeiten mit Word 2003 bei der Erstellung Wissenschaftlicher Arbeiten Renate Vochezer rv@vochezer-trilogo.de Inhaltsverzeichnis, Abbildungs- und Tabellenverzeichnis Inhaltsverzeichnis Abbildungsverzeichnis...

Mehr

1 ÖFFNEN UND SPEICHERN VON DATEIEN... 2

1 ÖFFNEN UND SPEICHERN VON DATEIEN... 2 1 ÖFFNEN UND SPEICHERN VON DATEIEN... 2 2 SEITENANSICHT, ZOOM, FORMATIERUNGSZEICHEN... 2 2.1 SEITENANSICHT... 2 2.2 ZOOM... 2 2.3 FORMATIERUNGSZEICHEN... 3 3 MARKIEREN... 3 3.1 MARKIEREN VON ZEICHEN...

Mehr

Für die Administration sind folgende Mindestanforderungen zu beachten:

Für die Administration sind folgende Mindestanforderungen zu beachten: CMS Sefrengo Handbuch für Redakteure Seite 1 Zugangsdaten Mindestanforderungen Für die Administration sind folgende Mindestanforderungen zu beachten: Ein Webbrowser: Microsoft Internet Explorer ab Version

Mehr

Einführung in die Stapelverarbeitung von FixFoto

Einführung in die Stapelverarbeitung von FixFoto Einführung in die Stapelverarbeitung von FixFoto Stand: Januar 2012 Diese Anleitung bezieht sich auf FixFoto, V 3.30. In älteren oder neueren Versionen könnte die Arbeitsweise anders sein. Inhalt 1. Was

Mehr

www.s-fabrik.ch: Anleitung für Änderungen an der Website

www.s-fabrik.ch: Anleitung für Änderungen an der Website www.s-fabrik.ch: Anleitung für Änderungen an der Website Neue Seite erstellen 2 Eine Seite löschen 3 Abstände in der Navigation 4 Direkt zum Produkt eines Produzenten verlinken 6 Bilder 8 Tooltip 8 Funktionen

Mehr

Outlook Express Anleitung

Outlook Express Anleitung Mit dem Programm versenden. Outlook Express können Sie E-Mails empfangen und 1. E-Mail Adressen Um andere Personen via E-Mail erreichen zu können, benötigen Sie - wie auf dem regulären Postweg - eine Adresse.

Mehr

Windows. Martina MÜLLER. Monika WEGERER. Zusammengestellt von. Überarbeitet von

Windows. Martina MÜLLER. Monika WEGERER. Zusammengestellt von. Überarbeitet von Windows Zusammengestellt von Martina MÜLLER Überarbeitet von Monika WEGERER April 2002 Windows Starten von Windows Wenn das System entsprechend installiert ist, erscheint Windows automatisch. (Kennwort)

Mehr

2. FAQ. 2.1 Headline Banner. Inhalt: 1.Installation. 1. Installation 2. FAQ 3. Einstellungen 4. Benötigen Sie weitere Hilfe?

2. FAQ. 2.1 Headline Banner. Inhalt: 1.Installation. 1. Installation 2. FAQ 3. Einstellungen 4. Benötigen Sie weitere Hilfe? Inhalt: 1. Installation 2. FAQ 3. Einstellungen 4. Benötigen Sie weitere Hilfe? 1.Installation Um das Electronics Theme zu installieren, gehen Sie in der Rubrik Design zum Template Store. Hier sehen Sie

Mehr

Bildbearbeitung Irfanview

Bildbearbeitung Irfanview Bildbearbeitung Irfanview Mit diesem Schulungs-Handbuch lernen Sie Bilder für das Internet zu bearbeiten mit dem Gratis-Programm IrfanView Version 1.2 Worldsoft AG 1. Kurzübersicht des Schulungs-Lehrgangs

Mehr

HTML5. Grundlagen der Erstellung von Webseiten. Linda York, Tina Wegener. 1. Ausgabe, Dezember 2011 HTML5

HTML5. Grundlagen der Erstellung von Webseiten. Linda York, Tina Wegener. 1. Ausgabe, Dezember 2011 HTML5 Linda York, Tina Wegener HTML5 Grundlagen der Erstellung von Webseiten 1. Ausgabe, Dezember 2011 HTML5 2 HTML5 - Grundlagen der Erstellung von Webseiten 2 Die erste Webseite mit HTML erstellen In diesem

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

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

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

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

Frontend Backend Administration Frontend Backend Administration Template

Frontend Backend Administration Frontend Backend Administration Template Begriffe Frontend Backend Administration Bei Contentmanagementsystemen (CMS) unterscheidet man zwischen zwei Bereichen, dem sogenannten Frontend und dem Backend Bereich. Der Backend wird häufig als Administration

Mehr

Kurzanleitung CMS. Diese Kurzanleitung bietet Ihnen einen Einstieg in die Homepage Verwaltung mit dem Silverstripe CMS. Inhaltsverzeichnis

Kurzanleitung CMS. Diese Kurzanleitung bietet Ihnen einen Einstieg in die Homepage Verwaltung mit dem Silverstripe CMS. Inhaltsverzeichnis Diese Kurzanleitung bietet Ihnen einen Einstieg in die Homepage Verwaltung mit dem Silverstripe CMS Verfasser: Michael Bogucki Erstellt: 24. September 2008 Letzte Änderung: 16. Juni 2009 Inhaltsverzeichnis

Mehr

Erweiterungen Gantry Framework -

Erweiterungen Gantry Framework - Gantry Framework Gantry Framework ist eine Art Tabelle (Grid), in der man in den Zellen die jeweiligen Beiträge und sonstigen Bereiche positionieren kann. Gantry Framework downloaden Über Google nach Gantry

Mehr

Favoriten speichern und verwalten im Internetexplorer 7.x

Favoriten speichern und verwalten im Internetexplorer 7.x Favoriten speichern und verwalten im Internetexplorer 7.x Klaus-Dieter Käser Andreas-Hofer-Str. 53 79111 Freiburg Fon: +49-761-292 43 48 Fax: +49-761-292 43 46 www.computerschule-freiburg.de kurse@computerschule-freiburg.de

Mehr

Arbeiten mit. Eine einführende Schulung für Redakteure VGT. Michael Fritz, 21. Oktober 2006

Arbeiten mit. Eine einführende Schulung für Redakteure VGT. Michael Fritz, 21. Oktober 2006 Arbeiten mit Eine einführende Schulung für Redakteure VGT Michael Fritz, 21. Oktober 2006 1 Inhalte 1. TYPO3 - Ihr neues Content-Management-System S. 3 ff. 1.1 Was ist ein CMS 1.2 Wie komme ich rein 1.3

Mehr

Leitfaden zur Schulung

Leitfaden zur Schulung AWO Ortsverein Sehnde Reiner Luck Straße des Großen Freien 5 awo-sehnde.de PC Verwaltung für Vereine Leitfaden zur Schulung Inhalt Sortieren nach Geburtsdaten... 2 Sortieren nach Ort, Nachname, Vorname...

Mehr

@HERZOvision.de. Kurzanleitung WebClient. v 1.0.0 by Herzo Media GmbH & Co. KG - www.herzomedia.de

@HERZOvision.de. Kurzanleitung WebClient. v 1.0.0 by Herzo Media GmbH & Co. KG - www.herzomedia.de @HERZOvision.de Kurzanleitung WebClient v 1.0.0 by Herzo Media GmbH & Co. KG - www.herzomedia.de Inhaltsverzeichnis Inhaltsverzeichnis... 2 E-Mails direkt im Browser bearbeiten... 3 Einführung in den WebClient

Mehr

Kapitel 1 - Warum TYPO3?

Kapitel 1 - Warum TYPO3? Kapitel 1 - Warum TYPO3? TYPO3 ist ein leistungsfähiges Content-Management-System, mit dem Sie alle Inhalte Ihrer Homepage im Handumdrehen selbst verwalten können. Sie müssen kein Programmierer sein und

Mehr

DESIGN & DEVELOPMENT. TYPO3 Basics

DESIGN & DEVELOPMENT. TYPO3 Basics DESIGN & DEVELOPMENT TYPO3 Basics 1 Einleitung / Inhalt 2 / 21 Einleitung Dieses Dokument weist Sie durch die Funktion des Open Source CMS TYPO3. In wenigen, einfachen Schritten wird Ihnen bebildert erklärt,

Mehr

FTP HOWTO. zum Upload von Dateien auf Webserver. Stand: 01.01.2011

FTP HOWTO. zum Upload von Dateien auf Webserver. Stand: 01.01.2011 FTP HOWTO zum Upload von Dateien auf Webserver Stand: 01.01.2011 Copyright 2002 by manitu. Alle Rechte vorbehalten. Alle verwendeten Bezeichnungen dienen lediglich der Kennzeichnung und können z.t. eingetragene

Mehr

10. Die Programmoberfläche

10. Die Programmoberfläche DIE PROGRAMMOBERFLÄCHE 10. Die Programmoberfläche Menüband 10.1. Mit dem Menüband arbeiten Die Benutzeroberfläche von Office 2010 wurde gegenüber der Version 2003 komplett neu gestaltet. Anstelle von Menüzeile

Mehr

Typo3 Website - Die Innenarchitekten

Typo3 Website - Die Innenarchitekten Kurzeinstieg - Leitfaden - Stand 15.12.2010 Redaktionelle Bearbeitung der Seite Top-News inkl. Anlegen von Pop-Up Fenstern ge der Anfangsseite Top-News. Um die Redaktiionsmöglichkeiten übersichtlich zu

Mehr

Bedienungsanleitung. Content-Management-System GORILLA

Bedienungsanleitung. Content-Management-System GORILLA Bedienungsanleitung Content-Management-System GORILLA Einloggen Öffnen Sie die Seite http://login.rasch-network.com Es öffnet sich folgendes Fenster. Zum Anmelden verwenden Sie die Benutzerdaten, die wir

Mehr

Dokumentation www.e-genius.at

Dokumentation www.e-genius.at Dokumentation www.e-genius.at Die Wissens- und Lernplattform www.e-genius.at basiert auf Typo3. Grundkenntnisse in der Verwendung dieser OpenSourceSoftware werden vorausgesetzt. Infos und aktuelle Handbücher

Mehr

Als Administrator im Backend anmelden

Als Administrator im Backend anmelden Inhalt CompuMaus-Brühl-Computerschulung Als Administrator im Backend anmelden 1 Ihre Seiten verändern oder neue Seiten erstellen 2 Seiteninhalte verändern 2 hier Ihre Seite Willkommen auf meiner Homepage

Mehr

Handreichung fu r Autoren

Handreichung fu r Autoren Handreichung fu r Autoren Inhalt: 1. Wie und wo melde ich mich an? 2. Wo ändere ich mein Passwort? 3. Struktur des sogenannten Backend-Bereichs 4. Neue Datei (Inhaltselement) anlegen. a. Der Karteireiter

Mehr

Das neue Suite Content Management System

Das neue Suite Content Management System Das neue Suite Content Management System Eine Beschreibung des neuen 'Visual CMS', veröffentlicht mit emarketing Suite Version 8.0 im Mai, 2014 Mai 2014 1 Einführung in das Visual CMS Bitte beachten Sie:

Mehr

FAQs zur Wissensbilanz-Toolbox (3. Aufl.) Häufig gestellte Fragen.

FAQs zur Wissensbilanz-Toolbox (3. Aufl.) Häufig gestellte Fragen. FAQs zur Wissensbilanz-Toolbox (3. Aufl.) Häufig gestellte Fragen. Hier finden Sie Fragen und Antworten zu den am häufigsten gestellten Fragen zur 3. Auflage der Wissensbilanz-Toolbox. Nachstehend finden

Mehr

CMSimple Kurzanleitung

CMSimple Kurzanleitung CMSimple Kurzanleitung für Redakteure Stand: 28.11.2010 CMSimple Kurzanleitung Seite: 1 Inhalt CMSIMPLE KURZANLEITUNG... 1 INHALT... 1 WICHTIGE DATEN... 2 EINFÜHRUNG... 2 ANMELDEN... 3 LOGIN... 3 LOGOUT...

Mehr