Page 1

maech hler grafik web design d // freiestrrasse 19 // 8406 6 winterthur // 052 0 202 71 16 // / main@retomaeechler.ch // www w.retomaechler.c ch

CM MS kon ntrast.ch // M Manua al f端r Redakt R teure Versiion 1.2 // 23.08.2012 Login n: www.kontrrast.ch/conta ao Benu utzername: Passw wort:

CMS kontrast.ch // Ma anual f端r Redaktteure

1 // / 12


1 Struktur Backend Backend = Administrations-Ebene der Site. Gegenstück ist das Frontend, der nach aussen sichtbare Teil der Site.

2 Exemplarisches Vorgehen . Daten aufbereiten (Texte, Bilder, Multimediaelemente) und in die Dateiverwaltung importieren. . Spezielle Inhaltselemente erstellen (Galerien). . Seitenstruktur anpassen. . Artikel einrichten. . Inhaltselemente einfügen. Wenn möglich immer bestehende Komponenten (Seiten, Artikel, Inhaltselemente) duplizieren, einfügen und anpassen!

CMS kontrast.ch // Manual für Redakteure

2 // 12


3 Work karounds Durch hgängig verw wendete Sym mbole: Bearbeiten Duplizieren mit Unterseite en Duplizieren m Verschieben öschen Lö Veröffentliche en gen Details anzeig Artikel bearbe eiten h… Einfügen nach Einfügen in…

3.1 Mate erial in Dateiiverwaltung g importieren n

. Bac ckend-Module/System/D Dateiverwaltu ung/ . Auff lokalem Rechner und im m CMS identiische Ordnerrstruktur auffbauen. . Datten mit Dateii-Upload in die d Dateiverw waltung impo ortieren. . Sin nnvolle Dateiinamen verw wenden. Z.B.: rep portage_01_0 01_small.jpg (für ( Vorschau ubild) portage_01_0 01.jpg (für Normalansichtt) rep portage_01_0 01_big.jpg (für Fullscreen ansicht) rep nerell für Ord dner und Dateibenennung eibung, keine e Leerschläg ge, keine Umlaute! Als g: Kleinschre . Gen Tre ennung Unterstrich oder Trennzeiche en verwende en. . Bild daufbereitun ng im Photoshop: siehe A Anhang 2.

CMS kontrast.ch // Ma anual für Redaktteure

3 // / 12


3.2 Bilde ergalerien eiinrichten 3.2.1 Galerrie erstellen . Bild der im richtig gen Format vorbereiten v u und in die Da ateiverwaltu ung importierren. . Bac ckend-Module/Inhalte/Galleria/ . Ein ne bestehend de Mustergalerie mit

d duplizieren und u unter neu uem Namen speichern. Galeriename G

mitt Nachname beginnen (z..B. «Aeby Fotto 1»). . Grö össe festlegen: Beii Galerie «Fotto» Wert so belassen b wie e er ist (Breite = 0, Höhe = 300). Beii Galerie «Tex xt» Breite = 580, 5 Höhe en ntsprechend dem verwen ndeten Bildfo ormat (siehe Anhang 2). . Verröffentlichen n

3.2.2 Galerrie mit Bilde ern füllen . Soe eben erstelle e Galerie bearrbeiten.

. Neu ues Bild anw wählen und fe estlegen, wo es eingefügtt werden solll. . Bild dtitel setzten n. SEO! . Bild d für Fullscre een auswählen. . Bild d für Standarrdansicht au uswählen (be ei «Foto» = Vo orschaubild). . Alte ernativtext eingeben e (wiird neben Tittel als Bildlegende angez zeigt). SEO! . Verröffentlichen n

CMS kontrast.ch // Ma anual für Redaktteure

4 // / 12


3.3 Seite enstruktur an npassen und d erweitern . Bac ckend-Module/Layout/Seitenstruktu ur . Ein ne bestehend de Seite dupliizieren Das s Knollensym mbol

.

bedeutet, dass d diese Seite niicht in der Navigation an ngezeigt werden soll.

. Ein nfügen «nach h» und «in» beachten. b «in n» erzeugt eine neue Ebene, was im N Normalfall nicht erwünsc cht ist; also in der Regel R «nach» » auswählen

.

n: . Seite bearbeiten eitenname» (wird ( als Nav vigationspun nkt verwendet) «Se «Se eitentitel» (w wird in der Brrowser-Kopfz zeile angezeigt) SEO! «Be eschreibung der Seite» (T Text erschein nt, wenn Goo ogle&Co. die Seite gefund den hat. EO! Ma ax. 155 Zeiche en werden an ngezeigt. SE

CMS kontrast.ch // Ma anual für Redaktteure

5 // / 12


3.4 Artik kel Bearbeite en . Bac ckend-Module/Inhalte/A Artikel . Artikel bearbeitten oder zuerrst einen besstehenden Artikel duplizieren, einfüg gen und dann n bearbeiten..

» (erscheint n nur im Backe end), Autor und u . Im obersten Berreich «Titel» SEO! uchbegriffe» (Keywords) eingeben. S «Su

. Evttl. «Klassen» vergeben (S Siehe Seitenttypen, Anhan ng 1).

Artiikel

Inhaltselem mente

CMS kontrast.ch // Ma anual für Redaktteure

6 // / 12


3.5 Inhalltselemente bearbeiten und einfüge en . A) B Bestehendes s Inhaltselem ment editierte en mit . B) B Bestehendes s Inhaltselem ment duplizie eren

. , einfü ügen

und d bearbeiten..

. C) N Neues Eleme ent anwählen n und an beliiebiger Stelle e einfügen

.

. Elementtyp wäh hlen (Text, Bild, B Galleria, HTML). Das s Inhaltselem ment HTML w wird verwend det beim Einnden von Mulltimedia-Elementen wie YouTube, issuu etc. bin . Inh halte einfügen. Bei Texten n und Titeln SEO! beach hten. Evttl. «Klassen» vergeben (S Siehe Seitenttypen, Anhan ng 1).

3.5.1 Beson ndere Inhalttselemente | Bildergalerrien mit vorg geschaltetem m Teaserbilld (Foto) Dies s sind normale e Text-Inhaltselemente m mit einem an ngefügten Bild. . Bild d-Einstellung gen. . Ein n Bild hinzufü ügen. . Untter Quelldate ei ein Bild au us der Dateiv erwaltung au uswählen. . Untter Bildlink-A Adresse eine e zuvor einge erichtete Seite auswählen. Das Bild w wird so zur Sc chaltfläche.

3.5.2 Beson ndere Inhalttselemente | Inhalte in « «Akkordeon n» platzieren n (Text) Inhalltselemente die d in einem «Akkordeon n» platziert werden w sollen n, müssen m mit einem «AC CCORDEON WRAPPER START T» beginnen und mit eine em « ACCOR RDEON WRAP PPER END» eenden. Dies sind je einzellne achsten duplliziert und wieder eingefü ügt werden. IIm «ACCORD DEON WRAP-Inhalltselemente, die am einfa PER S START» wird d zusätzlich der Titel deffiniert, der als «Aufklappllink» im Fron ntend angezeigt wird. Zw wischen n den beiden n «WRAPPER R» kann ein b beliebiges Inhaltselemen nt stehen.

CMS kontrast.ch // Ma anual für Redaktteure

7 // / 12


3.5.3 Beson ndere Inhalttselemente | Links setztten (auch au uf PDF’s) In ein nem Text Ele ement kann an a beliebigerr Stelle ein Link L gesetzt werden. w . Tex xtstelle, die als a Link verw wendet werde en soll, anfärrben. . Ketttensymbol auswählen. a Link setzten auf: ontao-Seite),, . eine Seite innerrhalb von kontrast.ch (Co er Dateiverwa altung (z.B. e ein PDF), . eine Datei in de eite im Web. In I diesem Fa all muss die komplette URL (http://w www.irgendw was.ch/...) in das d . eine externe Se w Bei e externe Links s empfiehlt es e sich zusättzlich die Seiite in einem Adrresse-Feld eiingetragen werden. neu uen Fensten öffnen zu las ssen (Fenste er: Neues Fen nster öffnen)..

4 Searc ch Engine Op ptimization SEO! Die S Seiten für Go oogle&Co. op ptimieren . Key ywordliste errstellen. Unte er welchen B Begriffen solll die Site gefunden werdeen (ca. 10 Stü ück). . Tite el und Texte verfassen in n denen dies e Begriffe vo orkommen. . Key ywords (kom mmagetrennt) und Seiten nbeschriebe im i Backend erfassen. e Derr Seitenbeschrieb wird als erster Text angezeigt, wenn n von Google eine Seite gefunden g wird. Max. 155 Z Zeichen werd den angezeig gt. e Site gut verrnetzen! Bitte en Sie Freun de, Bekannte e, Firmen, Ins stitutionen, eetc. einen Lin nk auf Ihre . Die n. Natürlich meist m im Geg genrecht! Seite zu setzten

CMS kontrast.ch // Ma anual für Redaktteure

8 // / 12


Anha ang 1 // Seite entypen (IE = Inhaltselement)

Biogrrafie Foto

IE Bild B Klas sse: index_img g Klas sse Hintergrun ndfarben: blau u, beige, anthrazit

IE Text T Klas sse: bio Für ganze Spalten nbreite Klassee: bio_full

Biogrrafie Text

IE Text T Klas sse: index_tex xt Klas sse Hintergrun ndfarben: blau u, beige, anthra azit Zita atlegende im Texteditor T mit Format «small» markieren

IE Text T Klas sse: bio Für ganze Spalten nbreite Klassee: bio_full

efinierte Hin ntergrundfarb ben: Vorde blau u beig ge anth hrazit

CMS kontrast.ch // Ma anual für Redaktteure

9 // / 12


Konta akt

IE Text T mit Bild Klas sse: kontakt

cht Portffolio Übersic

IE Text T mit Bild Klas sse: galerie_in ndex Leg gende mit Titell h3 (Überschrrift 3) und Lau uftext

Portffolio Galerie

IE Galleria G Tite el h3 (Übersch hrift 3)

CMS kontrast.ch // Ma anual für Redaktteure

10 // / 12


Lesep proben Die Seiten unter Leseproben L bestehen b auss mehreren Artikeln. A Dies se Artikel ha aben die Klas sse: leseprobe. etzte Artikel auf der Seite e bekommt z zusätzlich die Klasse: last. Dies unterd drückt die Trennlinie am m Der le Schlu uss. Die D Darstellung im m «Akkordeo on» ist nur eiine Option. Die D Entsprech henden Inhallte können auch a direkt bar eingebun nden werden n. sichtb

IE Te ext Klass se: left Text mit Titel h3 (Ü Überschrift 3) und Lauftext

IE Biild Klasse: right Muss immer als eerstes IE im Artikel stehen!!

Elem mente im «Akko ordeon» Siehe e Punkt 3.5.2

IE Te ext Klass se: left Text mit Link hinte erlegt

IE Ga alleria

IE HT TML Beinhaltet den Cod de für YouTube, etc

CMS kontrast.ch // Ma anual für Redaktteure

11 // / 12


Anhang 2 // Bildformate und Bildaufbereitung

Bilder für

Masse in Pixel

Proportionen

für Ansicht:

Galleria Höhe (nur «Text»)

Galleria «Foto»

2000 (max. B oder H)

Fullscreen

190 breit

Standard = Vorschaubild

2000 x 1125

16:9

Fullscreen

580 x 326

16:9

Standard

359 (Bild + 30 für Steuerung)

2000 x 1333

3:2

Fullscreen

Galleria «Text»

Teaserbilder Text Bei Leseproben

Teaserbilder Foto Bei Portfolio Übersicht

Portrait

580 x 387

3:2

Standard

417 (Bild + 30 für Steuerung)

2000 x 1500

4:3

Fullscreen

580 x 435

4:3

Standard

465 (Bild + 30 für Steuerung)

280 x 157

16:9

280 x 186

3:2

280 x 210

4:3

278 x 155

16:9

278 x 184

3:2

278 x 208

4:3

370 x 290

Bildaufbereitung in Photoshop . Bilder beschneiden mit Freistellwerkzeug. Die Masseinheit ist immer Pixel. Die Auflösung ist nicht Relevant, wird aber im Webbereich normalerweise mit 72 ppi definiert.

. Bei starken Verkleinerungen Bild schärfen mit Filter/Scharfzeichnungsfilter/Unscharf maskieren… . Datei/für Web und Geräte speichern . Dateiformat: JPEG . Qualität: 60–80 . In sRGB konvertieren (Evtl. bereits vorgängig dieses Profil zuweisen und allfällige Bildanpassungen in diesem Profil vornehmen).

CMS kontrast.ch // Manual für Redakteure

12 // 12


Manual Redakteure  

Manual Redakteure

Advertisement
Read more
Read more
Similar to
Popular now
Just for you