Die erste Folgeseite
Die Datei "index.html" ist nun geschlossen. Im Dateimanager markieren wir diese Datei und duplizieren diese über "Bearbeiten - Duplizieren" oder mit dem Kurzbefehl. Die eben erstellte Datei "index1.html" benennen wir mit "katze.html".
Öffne diese neue Seite "katze.html" und lösche alle Bilder im DIV "img-row". Mit der Maus markiere diesen DIV und wechsle in den Quellcode. Du siehst nun, dass der ganze DIV "img-row" auch im Quellcode markiert erscheint. Somit ist der gesuchte Code über die Layoutansiht jederzeit sehr leicht zu finden.
Nun ersetzen wir "img_row" mit "subnavi" und den gleich darunter folgenden "content" mit "content_f" ("_f" für "folgende") speichern die Datei und öffnen die basic.css. Dort setzen wir den Cursor auf "#img_row" und erstellen einen neuen ID-Stil (#) dem wir den Namen "#subnavi" geben.
Folgende Eigenschaften weisen wir nun dieser ID (diesem DIV) zu:
- "Blockeigenschaften" Breite 160px, sowie "Textumfluss" Links.
- "Aussen- und Innenrandeigenschaften" bei "Innenabstand" Links und Rechts je 20px.
Danach erstellen wir unterhalb der ID "#content" die neue id #content_f" und teilen nachfolgend Eigenschaften zu:
- "Blockeigenschaften" Breite 520px, sowie "Textumfluss" Rechts.
- "Aussen- und Innenrandeigenschaften" bei "Innenabstand" Rechts 100px.
Mit dem Textumfluss sagen wir, wo sich der jeweilige DIV platzieren soll. Die Navigation Links - der Inhalt rechts. Wir könnten aber ohne weiteres auch den DIV "content_f" links platzieren. Ich habe in diesem Fall rechts gewählt, weil ich so nicht pixelgenau alles ausrechnen muss.
Wenn wir nun die Seite "katze.html" in der Layoutansicht betrachten, sehen wir einen schönen Durcheinander. Die Fusszeile wird ganz oben und über dem DIV "content_f" dargestellt.
Wenn wir dies im Firefox oder IE 7 betrachten, ist die Darstellung korrekt. Trotzdem korrigieren wir die Darstellung noch. In der basic.css gehen wir bei "#bottom" auf Blockeigenschaften und definieren bei Fortsetzung "Nach Rechts und Links". So sagen wir, dass dieser Layer auch den Inhalt der jeweiligen vorgängigen Links berücksichtigen und sich erst danach darstellen soll.
Nun lade dieses ZIP [417] runter, entpacke es und lege die beiden Bilder in das Verzeichnis "medien". Anschliessend ziehe das Bild "Katze.jpg" per Drag and Drop über den Titel, vergib dem Bild einen alternativen Text und den Titel unterhalb des Bildes ändere zu "Die Katze". Danach ändere auch gleich noch den Titel der Seite.
Nun duplizierte diese Seite, benenne sie mit "hund.html" öffne diese, ersetze das Bild mit dem bild "hund.jpg" und den Titel (h1) sowie den Seitentitel mit "Der Hund".
Nun möchten wir noch die Seiten verlinken. Dazu doppelklicken wir auf die Navigation. Es öffnet sich nun die Komponente. Schliesse die Seite "hund.html" damit du nur noch die Komponente und den Dateimanager offen hast. Markiere den Navigationspunkt "Home" und ziehe im Inspektor das Werkzeug Point @ shoot auf die "index.html". Den Navigationspunkt "Katze" auf die Seite "katze.html" sowie verlinke ebenfalls den Navigationspunkt "hund.html.".
Bei "Ziel" müssen wir nichts eintragen, bei Titel möglichst etwas Aussagekräftiges. Nun speichere die Seite ab. Hiermit wird ein Popub "Komponente wird aktualisiert" angezeigt. Dieses kannst du mit "OK" bestätigen und danach das Fenster mit der Bestätigung schliessen.
Nun öffne die Seite "index.html" im Browser und überprüfe das Resultat.
CSS-Formatierung der Navigation
Nun haben wir die horizontale Navigation - wenigstens zum Teil - erstellt. Diese zeigt aber für die Links die Standardwerte an. Wir möchten das Erscheinungsbild nun aber noch etwas verändern.
Deshalb öffne die Dateien "basic.css" und "index.html". Reihe die beiden Dateien so im Fenster an, damit du bei Veränderungen im CSS-Editor diese gleich auch in der Seite anschauen kannst. Damit dies funktioniert, musst du aber im Layout-Editor sein.
Erstelle nun unterhalb des Stile "#navi" drei weitere ID-Stile
- #navi a:link
- #navi a:visited
- #navi a:hover
"link" steht für den normalen, noch nicht angeklickten Link. "visited" ist ein bereits angeklickter oder hier besuchter Link und "hover" ist der Effekt, wenn man mit der Maus auf den Link kommt. Dabei spielt die Reihenfolge eine grosse Rolle. Wenn z.B. der "hover" vor dem "visited" kommt, wird beim Überfahren eines besuchten Links kein Hover-Effekt mehr angezeigt.
Weshalb setzen wir aber nun noch "#navi" vor den Link? Wir teilen dem Link so mit, dass er nur innerhalb des DIV's "#navi" diese Einstellungen übernehmen darf. Denn es wäre ja nicht gut, wenn auch im weissen Bereich weisse Links angezeigt würden. Die Links im weissen Bereich können wir über die bereits vorhandenen Element-Stile (a:link, a:visited und a:hover) zuweisen.
Aktiviere den ersten eben erstellten Stil "#navi a:link" und nimm folgende Auszeichnungen vor:
- Schrifteigenschaten: Farbe weiss, Stärke Fett, keine Textauszeichnung
- Schrifteigenschaften: Farbe Hex-Wert 999999, Stärke Fett, keine Textauszeichung
- Schrifteigenschaften: Farbe schwarz (oder rot), Stärke Fett, keine Textauszeichung
Unmittelbar bei der Vergabe des ersten Stils kannst du im Layout-Editor die Änderung mitverfolgen. Nun kannst du natürlich frei etwas spielen oder aber einfach einmal meine obigen Vorgaben übernehmen.
Nun kannst du das Resultat deiner Arbeit wiederum im Browser betrachten. Wenn du nun vorhin bereits einmal alle deine verlinkten Seiten im Browser betrachtet hast, wirst du lediglich die besuchte Linkfarbe angezeigt erhalten.
Natürlich können weitere Eigenschaften, wie z.B. die Hintergrundfarbe oder Linie oben und unten etc. hinzugefügt werden. Der Fantasie und den Möglichkeiten sind beinahe keine Grenzen gesetzt.
Veranstaltungskalender
Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.
Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.
Online
Dienstag, 14. Mai 2024, 10.00 - 10.30 Uhr
Webinar
Prozessoptimierung ist ein Teamsport! Keine Software und keine Maschine allein kann Ihnen helfen, die Effizienzpotenziale Ihres Betriebes maximal auszuschöpfen. Von der Auftragsannahme über die Vorstufe und den Druck bis hin zur Weiterverarbeitung – alles muss optimal ineinandergreifen. Apropos Weiterverarbeitung – in vielen Druckbetrieben fristet sie in Sachen Prozessoptimierung immer noch ein Schattendasein. Dabei liegen hier mittlerweile die größten Einsparpotenziale! In einem Webinar von Horizon und Impressed erfahren Sie, wie Sie diese Einsparungen realisieren können. Horizon, bekannt für innovative Lösungen in der Druckweiterverarbeitung, bietet mit iCE LiNK eine Workflowlösung für die Weiterverarbeitung. iCE LiNK überwacht, visualisiert und analysiert Produktionsabläufe und unterstützt bei der Wartung – damit immer alles reibungslos läuft. Den gleichen Anspruch hat der von Impressed entwickelte Impressed Workflow Server – er ist die smarte PDF-Workflow-Lösung für Druckereien, die Datenmanagement, Preflight und Produktionssteuerung übernimmt. Im Webinar zeigen Ihnen die Experten von Horizon und Impressed, wie beide Lösungen im Team die Effizienz und Produktivität Ihres Betriebes steigern können. Melden Sie sich am besten gleich an, wir freuen uns auf Sie! PS: Melden Sie sich in jedem Fall an – sollten Sie zum Termin verhindert sein, erhalten Sie die Aufzeichnung.
kostenlos
Ja
Organisator: Impressed / Horizon
Online
Donnerstag, 16. Mai 2024, 10.00 - 10.30 Uhr
Webinar
Komplizierte, kleinteilige Aufträge; alles sehr speziell; seit Jahren bewährte Prozesse – da können wir nichts standardisieren und automatisieren! Das sagen viele Großformatdrucker – aber stimmt das wirklich, ist dem tatsächlich so? Günther Business Solutions und Impressed treten in einem Webinar den Gegenbeweis an. Experten beider Unternehmen zeigen, wie Großformatdrucker vom Einsatz zweier bewährter Lösungen profitieren können: • von advanter print+sign von Günther Business Solutions, dem ERP-System für den Großformatdruck, dass alle Phasen der Wertschöpfung im Large Format Printing abdeckt • von Impressed Workflow Server, der smarten PDF-Workflow-Lösung für Druckereien, die Datenmanagement, Preflight und Produktionssteuerung übernimmt Über die Kombination beider Lösungen können Großformatdrucker ihre Prozesse mit modernen Workflows Schritt für Schritt automatisieren – und so zügig deutliche Zeit- und Kosteneinsparungen realisieren. Das Webinar sollten Sie sich nicht entgehen lassen – damit Sie keine Effizienzpotenziale mehr liegen lassen. Melden Sie sich am besten gleich an, wir freuen uns auf Sie! PS: Melden Sie sich in jedem Fall an – sollten Sie zum Termin verhindert sein, erhalten Sie die Aufzeichnung.
kostenlos
Nein
Organisator: Impressed / Günther Business Solutions
Aktuell
- Projektleitung Digitale Produktentwicklung, befristet für vier Jahre, 80-100%
- Projektleitung Digitale Transformation, befristet für vier Jahre, 80-100%
- Vorstufenmitarbeiter(in) für den Zeitungs-Abschluss 50-80%
- Praktikum Marketing & Kommunikation (100%)
- Trainee Casting - Eigenproduktionen TV National (a) 80-100%
- Beauftragte/r Information und Kommunikation 90%-100%
- Fachfrau/Fachmann Finanz- und Rechnungswesen mit eidg. Fachausweis, 70%-100%
- Mitarbeiter/in Administration, Assistent/in GL 20 - 50 %
- Art Director (w/m/d), 70 bis 100 %
- CONSULTANT / DIGITAL LEAD PROJECT (W/M/D) 80-100%